@import "./tokens.css";

/* ============================================================
   Section launcher — three big machined buttons that open
   #packages+#maintenance, #work, #order. Reuses the packages.css
   riveted-plate aesthetic (hairline border + corner rivets via
   radial-gradient) so it reads as part of the same machined-plate
   button family, not a bolted-on UI control.
   ============================================================ */

#launcher {
  padding: 2rem 1.25rem 2.5rem;
}

.launcher-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 900px) {
  .launcher-inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

.launcher-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--hairline);
  border-radius: 3px;
  padding: 1.35rem 1.35rem;
  background-color: var(--bg);
  cursor: pointer;
  font-family: var(--font-display);
  text-align: start;
  transition: border-color 200ms ease, background-color 200ms ease,
    box-shadow 200ms ease;
  box-shadow: 0 1px 0 var(--hairline);

  /* riveted corners — same technique as .plate in packages.css */
  background-image:
    radial-gradient(circle 2.5px, var(--hairline) 0 2.5px, transparent 2.5px),
    radial-gradient(circle 2.5px, var(--hairline) 0 2.5px, transparent 2.5px),
    radial-gradient(circle 2.5px, var(--hairline) 0 2.5px, transparent 2.5px),
    radial-gradient(circle 2.5px, var(--hairline) 0 2.5px, transparent 2.5px);
  background-repeat: no-repeat;
  background-size: 5px 5px;
  background-position:
    10px 10px,
    calc(100% - 10px) 10px,
    10px calc(100% - 10px),
    calc(100% - 10px) calc(100% - 10px);
}

.launcher-btn:hover,
.launcher-btn:focus-visible {
  border-color: var(--accent);
}

.launcher-btn:hover .launcher-icon-chip,
.launcher-btn:focus-visible .launcher-icon-chip,
.launcher-btn.is-open .launcher-icon-chip {
  background-color: var(--accent);
  border-color: var(--accent);
}

.launcher-btn:hover .launcher-icon,
.launcher-btn:focus-visible .launcher-icon,
.launcher-btn.is-open .launcher-icon {
  color: var(--bg);
}

.launcher-btn.is-open {
  border-color: var(--accent);
  border-top-color: var(--accent);
  background-color: var(--plate-bg);
}

.launcher-num {
  position: absolute;
  top: 0.55rem;
  inset-inline-end: 0.7rem;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

.launcher-icon-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 2px;
  border: 1px solid var(--hairline);
  background-color: var(--plate-bg);
  transition: background-color 200ms ease, border-color 200ms ease;
}

.launcher-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--accent-ink);
  transition: color 200ms ease;
}

.launcher-text {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.launcher-label {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}

.launcher-desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--muted);
}

/* physical "points down / points up" chevron — decorative hardware, must
   never mirror under RTL, same reasoning as the hero .scroll-cue arrow */
.launcher-chevron {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 300ms cubic-bezier(.2, .9, .25, 1.05), border-color 200ms ease;
}

.launcher-btn.is-open .launcher-chevron {
  border-color: var(--accent-ink);
  transform: rotate(-135deg);
}

@media (max-width: 479px) {
  #launcher {
    padding: 1.25rem 1rem 1.5rem;
  }

  .launcher-btn {
    padding: 1.1rem 1rem;
    gap: 0.75rem;
  }

  .launcher-icon-chip {
    width: 40px;
    height: 40px;
  }

  .launcher-icon {
    width: 20px;
    height: 20px;
  }

  .launcher-label {
    font-size: 0.95rem;
  }

  .launcher-desc {
    font-size: 0.78rem;
  }
}

/* ============================================================
   Collapse mechanics — progressive enhancement, load-bearing
   (same philosophy as reveal.js' html.js-reveal gate).

   Default (no JS, or collapse.js 404s/is blocked/throws before
   adding the class below): #packages/#maintenance/#work/#order
   render exactly as before this feature existed — full height,
   fully visible, nothing collapsed. Only under html.js-collapse
   (added by collapse.js as ITS FIRST ACTION, mirroring reveal.js)
   do these sections collapse to (near-)zero height until opened.

   Mechanism: the section becomes a single-row grid container
   (grid-template-rows 0fr/1fr trick) whose one child is the
   section's existing "-inner" wrapper.

   IMPORTANT: each section's own vertical padding stays on the
   SECTION (the grid container), not on the "-inner" item, and is
   explicitly zeroed/restored here alongside grid-template-rows.
   A grid item's own padding is NOT reachable by the 0fr trick —
   `overflow:hidden`/`min-height:0` on a grid item only zeroes out
   its CONTENT-based automatic minimum size, not its padding, so
   an item with padding still floors the row at ~padding-height
   (confirmed empirically: leaves a many-pixel gap that even
   leaks a line or two of un-clipped content). Padding living on
   the *container* instead is a plain, directly-transitionable
   box-model property with none of that ambiguity.
   ============================================================ */

html.js-collapse #packages,
html.js-collapse #maintenance,
html.js-collapse #work,
html.js-collapse #order {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  transition:
    grid-template-rows 450ms cubic-bezier(.2, .9, .25, 1.05),
    padding-top 450ms cubic-bezier(.2, .9, .25, 1.05),
    padding-bottom 450ms cubic-bezier(.2, .9, .25, 1.05);
}

html.js-collapse #packages.is-open,
html.js-collapse #maintenance.is-open,
html.js-collapse #work.is-open,
html.js-collapse #order.is-open {
  grid-template-rows: 1fr;
  padding-top: 4rem;
  padding-bottom: 4.5rem;
}

@media (max-width: 479px) {
  html.js-collapse #packages.is-open,
  html.js-collapse #maintenance.is-open {
    padding-top: 2rem;
    padding-bottom: 2.25rem;
  }
}

html.js-collapse #packages > *,
html.js-collapse #maintenance > *,
html.js-collapse #work > *,
html.js-collapse #order > * {
  min-height: 0;
  overflow: hidden;
}

/* Once the collapse transition finishes, collapse.js adds this class to
   pull the (now zero-height) content out of the tab order. No
   display:none is used anywhere — the height mechanism above already
   hides the content visually and immediately; this only tidies up
   focusability afterwards. Removed the instant a section starts
   expanding again (see collapse.js). */
html.js-collapse #packages.collapsed-hidden > *,
html.js-collapse #maintenance.collapsed-hidden > *,
html.js-collapse #work.collapsed-hidden > *,
html.js-collapse #order.collapsed-hidden > * {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  /* Collapse is a real state (short page vs. long page), not motion — it
     still applies under reduced motion. Only the animation is removed:
     open/close become instant. */
  html.js-collapse #packages,
  html.js-collapse #maintenance,
  html.js-collapse #work,
  html.js-collapse #order {
    transition: none;
  }

  .launcher-chevron {
    transition: none;
  }
}