/*
 * Header, hero, print-bed, sections and footer.
 *
 * Mobile-first (REQ-22): every base rule below describes the 390px layout. The three
 * min-width queries at the foot — 601px, 901px, 1081px — add what a wider screen gets.
 * They are the exact complements of the 600px / 900px / 1080px max-width queries they
 * replace, so no width changes hands at a different pixel than before.
 */

/* Header */
.cp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cp-page-veil);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cp-line);
}

.cp-header__inner {
  display: flex;
  align-items: center;
  gap: var(--cp-space-lg);
  height: var(--cp-header-height);
}

.cp-header__logo svg {
  width: auto;
  height: 2.125rem;
}

/* A drawer under the header bar on a phone; an inline row from 901px up. */
.cp-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  gap: 0;
  margin-inline: auto;
  padding: var(--cp-space-xs) var(--cp-gutter) var(--cp-space-md);
  background: var(--cp-page);
  border-bottom: 1px solid var(--cp-line);
}

.cp-nav[data-open='true'] {
  display: flex;
}

.cp-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-nav a {
  position: relative;
  padding-block: var(--cp-space-sm);
  border-bottom: 1px solid var(--cp-line);
  font-size: var(--cp-text-lg);
  font-weight: 500;
  text-decoration: none;
}

.cp-nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--cp-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--cp-duration) var(--cp-ease);
}

.cp-nav a:hover::after {
  transform: scaleX(1);
}

.cp-header__actions {
  display: flex;
  align-items: center;
  gap: var(--cp-space-xs);
  margin-left: auto;
}

/* The header call to action is the first thing to go when the bar gets tight. */
.cp-header__cta {
  display: none;
}

.cp-menu-toggle {
  display: block;
  min-height: 2.75rem;
  padding: 0 var(--cp-space-sm);
  border: 2px solid var(--cp-ink);
  background: transparent;
  color: var(--cp-ink);
  font: 600 var(--cp-text-sm) / 1 var(--cp-font-body);
  cursor: pointer;
}

/* Hero */
.cp-hero {
  /* The header already gives the hero air above; below it owns the section rhythm. */
  padding-block: var(--cp-space-lg) var(--cp-space-2xl);
}

.cp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.cp-hero__place {
  margin-bottom: var(--cp-space-md);
  color: var(--cp-graphite);
  font-size: var(--cp-text-sm);
  font-weight: 500;
}

.cp-hero__title {
  font-size: var(--cp-display-lg);
  line-height: 0.98;
}

.cp-hero__title span {
  display: block;
}

.cp-hero__lead {
  max-width: 34rem;
  margin-top: var(--cp-space-md);
  color: var(--cp-graphite);
  font-size: var(--cp-text-md);
  line-height: 1.5;
}

.cp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cp-space-xs);
  margin-top: var(--cp-space-lg);
}

/* One full-width button per row at 390px. */
.cp-hero__actions .cp-button {
  flex: 1 1 100%;
}

.cp-hero__promises {
  display: grid;
  gap: var(--cp-space-xs);
  margin: var(--cp-space-lg) 0 0;
  padding: var(--cp-space-md) 0 0;
  border-top: 1px solid var(--cp-line);
  list-style: none;
  font-size: var(--cp-text-sm);
  font-weight: 500;
}

.cp-hero__promises li {
  display: flex;
  align-items: center;
  gap: var(--cp-space-xs);
}

.cp-hero__promises li::before {
  content: '';
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  background: var(--cp-amber);
  outline: 2px solid var(--cp-ink);
}

/* Print bed */
.cp-bed {
  display: grid;
  border: var(--cp-frame) solid var(--cp-ink);
  background: var(--cp-sheet);
  box-shadow: 6px 6px 0 var(--cp-ink);
}

.cp-bed__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cp-space-sm);
  padding: var(--cp-space-sm);
  border-bottom: 1px solid var(--cp-line);
}

.cp-bed__category {
  color: var(--cp-graphite);
  font-size: var(--cp-text-xs);
  font-weight: 500;
}

.cp-bed__name {
  font-size: var(--cp-text-lg);
  font-weight: 600;
  line-height: 1.25;
}

.cp-bed__status {
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-2xs);
  padding: 0.3125rem 0.625rem;
  background: var(--cp-amber-soft);
  font-size: var(--cp-text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.cp-bed__status::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--cp-radius-circle);
  background: var(--cp-amber);
  box-shadow: 0 0 0 2px var(--cp-ink);
}

.cp-bed__status[data-state='paused'] {
  background: var(--cp-page);
}

.cp-bed__status[data-state='paused']::before {
  background: var(--cp-sheet);
}

.cp-bed__status[data-state='done'] {
  background: var(--cp-ink);
  color: var(--cp-sheet);
}

.cp-bed__status[data-state='done']::before {
  box-shadow: none;
}

.cp-bed__stage {
  position: relative;
  aspect-ratio: 1 / 0.92;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.cp-bed__stage:active {
  cursor: grabbing;
}

.cp-bed__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cp-bed__hint {
  position: absolute;
  right: var(--cp-space-md);
  bottom: var(--cp-space-sm);
  color: var(--cp-graphite);
  font-size: var(--cp-text-xs);
  pointer-events: none;
}

.cp-bed__controls {
  display: grid;
  gap: var(--cp-space-sm);
  padding: var(--cp-space-sm) var(--cp-space-sm) var(--cp-space-md);
  border-top: 1px solid var(--cp-line);
}

.cp-bed__objects {
  display: flex;
  gap: var(--cp-space-2xs);
  overflow-x: auto;
  scrollbar-width: none;
}

.cp-bed__objects::-webkit-scrollbar {
  display: none;
}

.cp-bed__object {
  flex: none;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--cp-line);
  background: var(--cp-sheet);
  color: var(--cp-ink);
  font: 500 var(--cp-text-xs) / 1 var(--cp-font-body);
  cursor: pointer;
  transition: border-color var(--cp-duration) var(--cp-ease);
}

.cp-bed__object:hover {
  border-color: var(--cp-ink);
}

.cp-bed__object[aria-pressed='true'] {
  border-color: var(--cp-ink);
  background: var(--cp-ink);
  color: var(--cp-sheet);
}

.cp-bed__timeline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--cp-space-sm);
}

.cp-bed__play {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 2px solid var(--cp-ink);
  background: var(--cp-amber);
  cursor: pointer;
}

.cp-bed__play svg[hidden] {
  display: none;
}

.cp-bed__play svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: var(--cp-ink);
}

.cp-bed__range {
  width: 100%;
  height: 1.5rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.cp-bed__range::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(var(--cp-ink), var(--cp-ink)) 0 / var(--progress, 0%) 100% no-repeat, var(--cp-line);
}

.cp-bed__range::-moz-range-track {
  height: 4px;
  background: var(--cp-line);
}

.cp-bed__range::-moz-range-progress {
  height: 4px;
  background: var(--cp-ink);
}

.cp-bed__range::-webkit-slider-thumb {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: -7px;
  border: 2px solid var(--cp-ink);
  background: var(--cp-amber);
  appearance: none;
}

.cp-bed__range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--cp-ink);
  border-radius: 0;
  background: var(--cp-amber);
}

.cp-bed__readout {
  min-width: 0;
  font-size: var(--cp-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cp-bed__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cp-space-2xs) var(--cp-space-lg);
  padding-top: var(--cp-space-sm);
  border-top: 1px solid var(--cp-line);
  font-size: var(--cp-text-sm);
}

.cp-bed__specs div {
  display: flex;
  align-items: center;
  gap: var(--cp-space-xs);
}

.cp-bed__specs dt {
  color: var(--cp-graphite);
}

.cp-bed__specs dd {
  font-weight: 600;
}

/* Shared section rhythm */
.cp-section {
  padding-block: var(--cp-space-2xl);
}

/*
 * Vertical rhythm.
 *
 * Two neighbours on the same surface used to stack both paddings and turn a 128px gap
 * into 256, so the second one drops its top padding: one section owns the gap.
 *
 * That only holds while both sections sit on the same surface. A section with its own
 * dark background keeps its padding INSIDE the band, where it is the band's breathing
 * room and not the gap to anything — so its neighbour has nothing to inherit and must
 * keep its own. This used to be a hand-written list of the banded sections, and it failed
 * the way hand-written lists do: `.cp-lamp-specs` and `.cp-faq` on /lamparas/ both started
 * flush against the edge of the band above them, the photo slot beginning at the exact
 * pixel the dark band ended. The list named the bands themselves and nobody remembered to
 * name what came after them.
 *
 * `cp-section--band` is now carried in the markup by every banded section, so the rule
 * reads the surface instead of the section's name and there is no list to forget.
 * `tests/e2e/specs/section-rhythm.cjs` fails if a section after a band collapses again.
 */
.cp-section + .cp-section {
  padding-top: 0;
}

/* A band owns its padding, so both of its neighbours keep theirs. Same specificity as the
   rule above, so this has to stay below it. */
.cp-section--band + .cp-section,
.cp-section + .cp-section--band {
  padding-top: var(--cp-space-2xl);
}

.cp-section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cp-space-md) var(--cp-space-xl);
  align-items: end;
  margin-bottom: var(--cp-space-xl);
}

.cp-section__title {
  font-size: var(--cp-display-md);
}

.cp-section__lead {
  color: var(--cp-graphite);
  font-size: var(--cp-text-md);
}

/* FAQ */
.cp-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cp-space-md) var(--cp-space-xl);
  padding-top: var(--cp-space-2xl);
  border-top: 1px solid var(--cp-line);
}

.cp-faq__grid .cp-section__lead {
  max-width: 22rem;
  margin-top: var(--cp-space-md);
}

.cp-faq__list {
  border-top: var(--cp-frame) solid var(--cp-ink);
}

.cp-faq__item {
  border-bottom: 1px solid var(--cp-line);
}

.cp-faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cp-space-md);
  padding-block: var(--cp-space-md);
  font-size: var(--cp-text-lg);
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.cp-faq__item summary::-webkit-details-marker {
  display: none;
}

.cp-faq__item summary::after {
  content: '';
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--cp-ink);
  background:
    linear-gradient(var(--cp-ink), var(--cp-ink)) center / 10px 2px no-repeat,
    linear-gradient(var(--cp-ink), var(--cp-ink)) center / 2px 10px no-repeat;
}

.cp-faq__item[open] summary::after {
  background: linear-gradient(var(--cp-ink), var(--cp-ink)) center / 10px 2px no-repeat var(--cp-amber);
}

.cp-faq__item p {
  max-width: 40rem;
  padding-bottom: var(--cp-space-md);
  color: var(--cp-graphite);
}

/* Footer */
.cp-footer {
  background: var(--cp-ink);
  color: var(--cp-sheet);
}

.cp-footer__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cp-space-lg) var(--cp-space-xl);
  align-items: end;
  padding-block: var(--cp-space-2xl);
  border-bottom: 1px solid var(--cp-line-dark);
}

.cp-footer__title {
  max-width: 12ch;
  font-size: var(--cp-display-lg);
}

.cp-footer__cta-side {
  display: grid;
  gap: var(--cp-space-md);
  justify-items: start;
  color: var(--cp-sheet-body);
}

.cp-footer .cp-button:hover {
  background: var(--cp-sheet);
  box-shadow: 4px 4px 0 var(--cp-amber);
}

.cp-footer__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cp-space-lg);
  padding-block: var(--cp-space-xl);
  font-size: var(--cp-text-sm);
}

/* The brand block takes the whole row until the four-column footer is affordable. */
.cp-footer__brand {
  grid-column: 1 / -1;
}

.cp-footer__brand p {
  max-width: 20rem;
  margin-top: var(--cp-space-md);
  color: var(--cp-sheet-body);
}

.cp-footer__logo {
  width: auto;
  height: 3.5rem;
}

.cp-footer__heading {
  margin-bottom: var(--cp-space-sm);
  color: var(--cp-sheet-quiet);
  font-size: var(--cp-text-sm);
  font-weight: 500;
}

.cp-footer ul {
  display: grid;
  gap: var(--cp-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-footer ul a {
  text-decoration: none;
}

.cp-footer ul a:hover {
  color: var(--cp-amber);
}

.cp-footer__legal {
  padding-block: var(--cp-space-md);
  border-top: 1px solid var(--cp-line-dark);
  color: var(--cp-sheet-quiet);
  font-size: var(--cp-text-xs);
}

/* ------------------------------------------------------------------ *
 * Wider screens
 *
 * 601px, 901px and 1081px are the exact complements of the 600px / 900px / 1080px
 * max-width queries these replace: every width lands in the same bucket it did before.
 * They are in ascending order so the wider rule wins, which is the whole point of
 * authoring this way round.
 * ------------------------------------------------------------------ */
@media (min-width: 601px) {
  .cp-header__cta {
    display: inline-flex;
  }

  .cp-header__logo svg {
    height: 2.5rem;
  }

  .cp-bed {
    box-shadow: 10px 10px 0 var(--cp-ink);
  }

  .cp-bed__stage {
    aspect-ratio: 1 / 0.64;
  }

  .cp-bed__head,
  .cp-bed__controls {
    padding-inline: var(--cp-space-md);
  }

  .cp-bed__readout {
    min-width: 8.5rem;
  }

  /* `0 1 auto` is the initial flex: the buttons sit side by side again. */
  .cp-hero__actions .cp-button {
    flex: 0 1 auto;
  }

  .cp-hero__lead {
    font-size: var(--cp-text-lg);
  }
}

@media (min-width: 901px) {
  .cp-nav {
    position: static;
    display: flex;
    flex-direction: row;
    /* `normal` is the initial value; the base rule zeroes it for the stacked drawer. */
    gap: normal;
    padding: 0;
    background: none;
    border-bottom: 0;
  }

  .cp-nav__list {
    flex-direction: row;
    gap: var(--cp-space-md);
    width: auto;
  }

  .cp-nav a {
    padding-block: var(--cp-space-2xs);
    border-bottom: 0;
    font-size: var(--cp-text-sm);
  }

  .cp-header__actions {
    margin-left: 0;
  }

  .cp-menu-toggle {
    display: none;
  }

  .cp-section__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  }

  .cp-faq__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .cp-footer__cta {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  .cp-footer__columns {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  }

  .cp-footer__brand {
    grid-column: auto;
  }
}

@media (min-width: 1081px) {
  .cp-hero__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
}