/* CrowdPilot holding page: short introduction beside a portrait video. */

:root {
  color-scheme: light dark;
  --content-gutter: var(--space-l);
  --construction-surface: light-dark(var(--color-primary-lightest), var(--color-primary-darkest));
  --construction-text: light-dark(var(--color-secondary), var(--color-primary-lightest));
  --construction-muted: light-dark(var(--color-primary-dark), var(--color-primary-light));
  --construction-focus: light-dark(var(--color-primary), var(--color-accent));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--construction-surface);
}

body {
  margin: 0;
}

.construction {
  min-block-size: 100svh;
  background: var(--construction-surface);
  color: var(--construction-text);
  font-family: var(--font-body);
  font-size: var(--text-m);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  align-content: center;
}

.construction main {
  isolation: isolate;
}

.construction p,
.construction h1,
.construction figure {
  margin: 0;
}

.construction-header {
  display: flex;
  justify-content: center;
  padding: var(--space-xs) var(--content-gutter) 0;
}

.construction-logo {
  inline-size: clamp(11rem, 16vw, 14rem);
}

.construction-logo img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.construction-container {
  inline-size: min(100%, var(--max-width));
  margin-inline: auto;
  padding-inline: var(--content-gutter);
}

.construction-hero {
  padding-block: var(--space-2xl) var(--space-l);
}

.construction-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3xl);
  max-inline-size: 72rem;
}

.construction-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xl);
  min-inline-size: 0;
  text-align: start;
}

.construction-eyebrow {
  color: var(--color-primary-light);
  font-size: 1rem;
}

.construction h1 {
  max-inline-size: 22ch;
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
}

.construction h1 span {
  color: light-dark(var(--color-primary), var(--color-accent));
}

.construction-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  min-block-size: 3rem;
  padding-block: .85em;
  padding-inline: 1.5em 1em;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-primary-darkest);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
}

.construction-cta svg {
  flex-shrink: 0;
}

.construction-cta:hover {
  background: var(--color-accent-light);
}

.construction a:focus-visible {
  outline: 3px solid var(--construction-focus);
  outline-offset: 5px;
}

.construction .construction-media {
  justify-self: center;
  inline-size: min(100%, 24rem, calc(72svh * 9 / 16));
  min-inline-size: 0;
}

.construction-media-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: clamp(.75rem, 2vw, 2.5rem);
  background: var(--color-primary-darker);
}

.construction-media-frame video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.construction-media figcaption {
  padding-block-start: var(--space-2xs);
  color: var(--color-primary-light);
  font-size: 1rem;
  text-align: end;
}

.construction-skip {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--space-m);
  inset-inline-start: var(--content-gutter);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  background: var(--color-accent);
  color: var(--color-primary-darkest);
  transform: translateY(-200%);
}

.construction-skip:focus {
  transform: none;
}

@media (max-width: 40rem) {
  .construction-header {
    padding-block-start: var(--space-xl);
  }

  .construction-copy {
    gap: var(--space-xl);
  }

}

/* The browser's controls remain available when JavaScript is unavailable. */
.construction-video-controls {
  position: absolute;
  inset-inline-end: var(--space-m);
  inset-block-end: var(--space-m);
  display: flex;
  gap: var(--space-2xs);
}

.construction-video-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-primary-darkest);
  font: inherit;
  cursor: pointer;
}

.construction-video-button:hover {
  background: var(--color-accent-light);
}

.construction-video-button:focus-visible {
  outline: 3px solid var(--color-primary-lightest);
  outline-offset: 3px;
}

.construction-video-controls [hidden],
.construction-media-frame [hidden] {
  display: none;
}

.construction-video-button svg {
  display: block;
  pointer-events: none;
}

.construction-video-button svg[hidden] {
  display: none;
}

.construction .construction-video-fallback {
  position: absolute;
  inset-inline: var(--space-m);
  inset-block-end: var(--space-m);
  padding: var(--space-m);
  border-radius: var(--radius-m);
  background: var(--color-primary-darkest);
  color: var(--color-primary-lightest);
  font-size: 1rem;
}

.construction-video-fallback a {
  color: var(--color-accent);
}

.construction-media-frame:fullscreen {
  inline-size: 100%;
  block-size: 100%;
  border-radius: 0;
  background: var(--color-primary-darkest);
}

.construction-description {
  display: grid;
  justify-items: start;
  gap: var(--space-s);
}

.construction-description p {
  max-inline-size: 48ch;
  text-wrap: pretty;
}

.construction-description p:last-child {
  color: var(--construction-muted);
}

@media (max-width: 56rem) {
  .construction-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .construction-copy {
    align-items: center;
    text-align: center;
  }

  .construction-description {
    justify-items: center;
  }

  .construction .construction-media {
    inline-size: min(100%, 26rem);
  }
}

.construction-brand {
  display: block;
  inline-size: min(100%, 10.75rem);
  margin-block-end: -1.5rem;
}

.construction-brand img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .construction-cta svg {
    transition: translate 160ms ease-out;
  }

  .construction-cta:is(:hover, :focus-visible) svg {
    translate: .2em 0;
  }
}