/* Page layout for the site itself (the lab has its own lab.css with the same names).
   .wrap            content width with side gutters
   .band            vertical rhythm of a section
   .section-head    eyebrow, heading and lead at the top of a section
   .reveal          fades and rises when it scrolls into view (site.js adds .is-in) */

.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.band {
  padding-block: var(--space-section);
}

.band--tight {
  padding-block: var(--space-9);
}

.section-head {
  display: grid;
  gap: var(--space-4);
  max-width: 44rem;
  margin-bottom: var(--space-8);
}

.eyebrow {
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
}

.t-h2 {
  font-size: var(--text-h2);
}

.t-display {
  font-size: var(--text-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}

.t-lead {
  font-size: var(--text-lead);
  max-width: var(--text-max);
  color: var(--fg-muted);
}

.muted {
  color: var(--fg-muted);
}

/* Intro after the hero: one statement, then three numbers */
.intro {
  display: grid;
  gap: var(--space-8);
}

.intro__statement {
  font-size: clamp(2rem, 1.1rem + 2.2vw, 3.1rem);
  text-wrap: pretty; /* lines are set by hand on wide screens, never balanced into odd breaks */
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.intro__statement em {
  font-style: normal;
  color: var(--fg-muted);
}

/* Exploded view inside a dark section: one claim, the panel below, as wide as the page allows */
.wrap--wide {
  max-width: 1400px;
}

.inside {
  display: grid;
  gap: var(--space-6);
}

.inside__claim {
  max-width: 24ch;
  font-size: var(--text-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

/* Never taller than 82 % of the screen: the width follows from that, and the panel stays centred */
.inside .xp--panel {
  width: min(100%, calc(82vh * 16 / 9));
  justify-self: center;
}

/* Line breaks that apply only where there is room for them */
.br-wide {
  display: none;
}

@media (min-width: 861px) {
  .br-wide {
    display: inline;
  }
}

/* Scroll reveal, one block at a time; nothing moves with reduced motion */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform var(--dur-cinematic) var(--ease-emphasis);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Partner page: the offer banner keeps its distance from the cards */
#balicky .offer {
  margin-bottom: var(--space-7);
}

/* Packages row: four cards, scrollable on narrow screens */
.pkg-row {
  display: grid;
  /* --cards: the number of packages in the offer, set by the server */
  grid-template-columns: repeat(var(--cards, 4), minmax(0, 1fr));
  gap: var(--space-4);
  scroll-margin-top: var(--space-6);
}

.pkg-row .pkg {
  --pkg-pad: var(--space-5);
  --pkg-visual-h: 210px;
}

.pkg-row .pkg__spec {
  grid-template-columns: 1fr;
  gap: 2px;
}

.pkg-row .pkg__kw {
  font-size: 7rem;
}

@media (max-width: 1100px) {
  .pkg-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(270px, 42vw, 380px); /* a definite size: in a scroll box percentages never grow */
    overflow: auto hidden; /* sideways only; the cards' entrance must not make the row scroll up and down */
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-3);
    scrollbar-width: none;
  }

  .pkg-row::-webkit-scrollbar {
    display: none;
  }

  .pkg-row > .pkg {
    scroll-snap-align: start;
  }
}

/* Package cards arrive one after another: the panel rises, the photo settles into its crop,
   the big number comes last. Hover keeps its own photo move once the card is in. */
.pkg-row .pkg.reveal {
  transform: translateY(56px);
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform var(--dur-cinematic) var(--ease-emphasis),
    box-shadow var(--dur-slower) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 140ms), calc(var(--i, 0) * 140ms), 0ms;
}

.pkg-row .pkg.reveal .pkg__photo {
  opacity: 0;
  transform: translate(4%, 3%) scale(1.06);
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform 1600ms var(--ease-emphasis);
  transition-delay: calc(var(--i, 0) * 140ms + 160ms);
}

.pkg-row .pkg.reveal .pkg__kw {
  opacity: 0;
  transform: translateY(0.1em);
  transition:
    opacity var(--dur-cinematic) var(--ease-out),
    transform var(--dur-cinematic) var(--ease-emphasis);
  transition-delay: calc(var(--i, 0) * 140ms + 420ms);
}

/* The indoor unit arrives last, after the number */
.pkg-row .pkg.reveal .pkg__cb {
  opacity: 0;
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 140ms + 620ms), 0ms;
}

.pkg-row .pkg.reveal.is-in {
  transform: none;
}

.pkg-row .pkg.reveal.is-in .pkg__cb {
  opacity: 1;
}

.pkg-row .pkg.reveal.is-in .pkg__photo,
.pkg-row .pkg.reveal.is-in .pkg__kw {
  opacity: 1;
  transform: none;
}

/* Once in, the photo drops the slow entrance timing: hover in 700 ms, back in 420 ms, no delay */
.pkg-row .pkg.reveal.is-in .pkg__photo {
  transition: transform var(--dur-slow) var(--ease-out);
  transition-delay: 0ms;
}

@media (hover: hover) {
  .pkg-row .pkg.reveal.is-in:hover .pkg__photo {
    transform: translate(-6px, -8px) scale(1.025);
    transition-duration: var(--dur-slower);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pkg-row .pkg.reveal,
  .pkg-row .pkg.reveal .pkg__photo,
  .pkg-row .pkg.reveal .pkg__kw,
  .pkg-row .pkg.reveal .pkg__cb {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Document cards arrive the same way: the card rises, the cover sheet slides into place */
.docs__grid .doc.reveal {
  transform: translateY(48px);
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform var(--dur-cinematic) var(--ease-emphasis),
    box-shadow var(--dur-slower) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms), calc(var(--i, 0) * 120ms), 0ms;
}

.docs__grid .doc.reveal .doc__cover img {
  opacity: 0;
  transform: rotate(-3deg) translateY(28px);
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform 1400ms var(--ease-emphasis);
  transition-delay: calc(var(--i, 0) * 120ms + 180ms);
}

.docs__grid .doc.reveal.is-in {
  transform: none;
}

.docs__grid .doc.reveal.is-in .doc__cover img {
  opacity: 1;
  transform: rotate(-3deg);
}

@media (hover: hover) {
  .docs__grid .doc.reveal.is-in:hover .doc__cover img {
    transform: rotate(-1.5deg) translateY(-6px);
    transition: transform var(--dur-cinematic) var(--ease-emphasis);
    transition-delay: 0ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .docs__grid .doc.reveal,
  .docs__grid .doc.reveal .doc__cover img {
    opacity: 1;
    transform: rotate(-3deg);
    transition: none;
  }

  .docs__grid .doc.reveal {
    transform: none;
  }
}

/* Links to the packages, each with its own place in the block */

/* Intro: the statement and its button on the left; the warranty card on the right spans both,
   its top on the statement's first line and its bottom on the button's */
.intro__head {
  display: grid;
  /* the same three columns as the figures below, so the card sits exactly over the third one */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "statement statement warranty"
    "cta cta warranty";
  gap: var(--space-6);
  align-items: end;
}
.intro__statement {
  grid-area: statement;
  align-self: start;
  margin: 0;
}
.intro__cta {
  grid-area: cta;
  justify-self: start;
}

/* Warranty: a quiet card, claim on top, the two figures below divided by a hairline, LED line at the foot */
.warranty {
  grid-area: warranty;
  align-self: stretch;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6) calc(var(--space-5) + 3px);
  border-radius: 12px;
  background: var(--mist);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.warranty::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--led-500), color-mix(in srgb, var(--led-500) 25%, transparent));
}
.warranty__head p {
  margin: 0;
}
.warranty__eyebrow {
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--led-700);
}
.warranty__claim {
  margin-top: 4px !important;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.warranty__figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.warranty__item {
  display: grid;
  gap: 6px;
  margin: 0;
}
.warranty__item + .warranty__item {
  padding-left: var(--space-5);
  border-left: 1px solid var(--line-strong);
}
.warranty__num {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.warranty__num small {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--led-700);
}
.warranty__label {
  font-size: var(--text-small);
  line-height: 1.3;
  color: var(--fg-muted);
}

/* Inside: a bar under the panel, as wide as the panel */
.inside__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; /* only the button: centred under the panel */
  gap: var(--space-4) var(--space-6);
  width: min(100%, calc(82vh * 16 / 9));
  justify-self: center;
  padding-top: var(--space-2);
}



/* Split section head: text left, a short line and the button right, on the lead's bottom line */
.section-head--split {
  grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr);
  gap: var(--space-6) var(--space-8);
  align-items: end;
  max-width: none;
}

.section-head__text {
  display: grid;
  gap: var(--space-4);
  max-width: 44rem;
}

.section-head__aside {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding-bottom: 0.3em;
}

.section-head__aside p {
  margin: 0;
  max-width: 24rem;
}

@media (max-width: 860px) {
  .intro__head,
  .section-head--split {
    grid-template-columns: 1fr;
  }

  .intro__head {
    grid-template-areas:
      "statement"
      "warranty"
      "cta";
  }

  .section-head__aside {
    padding-bottom: 0;
  }
}

/* The documents section leads straight into the dark footer */
.docs-band {
  padding-bottom: var(--space-section);
}

/* Blur-up: a 24 px thumbnail (styles/lqip.css) sits under the picture until the real one has arrived */
.hero[data-lqip],
.scene[data-lqip] {
  background-image: var(--lqip);
  background-size: cover;
  background-position: var(--focus, center);
  background-repeat: no-repeat;
}
img[data-fade] {
  opacity: 0;
  transition: opacity var(--dur-slower) var(--ease-out);
}
img[data-fade].is-loaded {
  opacity: 1;
}

/* The smallest phones: the bar's button wraps instead of pushing the page sideways */
@media (max-width: 400px) {
  .inside__bar .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* Print: the page as a document, nothing animated or floating */
@media print {
  .hero__photo { animation: none; transform: none; }
  .reveal, .pkg-row .pkg.reveal .pkg__photo, .pkg-row .pkg.reveal .pkg__kw, .pkg-row .pkg.reveal .pkg__cb { opacity: 1 !important; transform: none !important; }
  .offer-pill, .offer-notice, .xp__foot, .xp__layer, dialog { display: none !important; }
}