/* ============================================
   ALVEX STUDIO — Template Catalogue Page
   ============================================ */

/* --- Hero (mirrors work.css so /templates sits beside /work) --- */
.tpl-hero {
  padding: 160px 48px 80px;
  background: var(--dark);
}
.tpl-hero h1 {
  font-size: clamp(48px, 8vw, 96px);
  letter-spacing: -.05em;
  line-height: .92;
  margin-bottom: 20px;
}
.tpl-hero .sub {
  font-size: 16px;
  font-weight: 300;
  color: rgba(240,237,230,.5);
  max-width: 560px;
  line-height: 1.7;
}

/* --- Carousel --- */
.tpl-body {
  padding: 96px 48px 120px;
  background: var(--navy);
}
/* Wider than the 720px prose blocks below it on purpose: the arrows and the
   two gaps take 128px off this width before the frame gets any of it, so at
   1100 the preview came out smaller than it was before the carousel existed.
   1300 fits inside the 1344px .tpl-body leaves at a 1440 viewport. */
.tpl-carousel {
  max-width: 1300px;
  margin: 0 auto;
}

/* Sector picker, 720px and up. Mirrors .nav-links colouring. */
.tpl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  margin-bottom: 48px;
  border-bottom: 1px solid rgba(240,237,230,.08);
}
.tpl-tabs button {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(240,237,230,.45);
  padding: 12px 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.tpl-tabs button:hover { color: var(--warm-white); }
.tpl-tabs button[aria-selected="true"] {
  color: var(--warm-white);
  border-bottom-color: var(--amber);
}

/* Sector picker, below 720px. The name and the count stay visible so the
   breadth of the catalogue is still stated while the list is closed. */
.tpl-picker {
  display: none;
  margin-bottom: 32px;
}
.tpl-picker__name {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--warm-white);
  display: inline;
}
.tpl-picker__count {
  margin-left: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240,237,230,.35);
}
.tpl-picker__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.tpl-picker select {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 13px 14px;
  min-height: 44px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 400;
  color: var(--warm-white);
  background: var(--mid);
  border: 1px solid rgba(240,237,230,.15);
  border-radius: 2px;
}

/* Arrows flank the viewport rather than overlaying it, so nothing sits on
   top of a live preview. Dots take a full row of their own. */
.tpl-stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.tpl-viewport {
  /* Basis 0, not auto. With auto the flex base size is the max-content
     width of all six slides, which is wide enough to push the arrows onto
     their own lines before any shrinking happens. */
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
}
.tpl-track {
  display: flex;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.tpl-arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--warm-white);
  border: 1px solid rgba(240,237,230,.15);
  border-radius: 50%;
  transition: color .2s, border-color .2s, background .2s;
}
.tpl-arrow:hover:not(:disabled) {
  border-color: rgba(240,237,230,.45);
  background: rgba(240,237,230,.06);
}
.tpl-arrow:disabled {
  opacity: .25;
  cursor: default;
}
.tpl-dots {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.tpl-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(240,237,230,.2);
  transition: background .3s, transform .3s;
}
.tpl-dots span.is-on {
  background: var(--amber);
  transform: scale(1.4);
}

.tpl-card {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}

/* --- Browser frame ---
   .browser, .browser__bar, .browser__url and .browser__screen now live in
   css/main.css, shared with /bespoke-systems. What follows is the carousel
   layer on top of that frame. */

/* Scrim over the screenshot, fades on hover */
.browser__screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(8,15,24,.45);
  transition: opacity .3s;
  pointer-events: none;
}
.browser__screen:hover::before { opacity: 0; }

/* Play button — .btn-main styling at a smaller size */
.tpl-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  background: var(--blue);
  color: #fff;
  padding: 14px 28px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .2s, transform .2s;
}
.tpl-play:hover {
  background: #1E4BC4;
  transform: translate(-50%, -50%) scale(1.03);
}

/* --- Live preview --- */
.browser__screen iframe {
  width: 1440px;
  height: 900px;
  border: 0;
  transform-origin: top left;
  display: block;
}
.browser__screen.is-live::before,
.browser__screen.is-live picture,
.browser__screen.is-live .tpl-play { display: none; }

/* --- Card meta --- */
.tpl-meta h3 {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--warm-white);
  margin-bottom: 8px;
}
.tpl-sector {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240,237,230,.35);
  margin-bottom: 16px;
}
.tpl-desc {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(240,237,230,.5);
}

/* --- The rationale, which is the point of the page --- */
.tpl-why {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(240,237,230,.08);
}
.tpl-why h4 {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 16px;
}
.tpl-why > p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(240,237,230,.5);
  max-width: 32em;
}
.tpl-why dl {
  margin: 20px 0 0;
}
.tpl-why dt {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--warm-white);
  margin: 0;
}
.tpl-why dd {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(240,237,230,.45);
  margin: 4px 0 16px;
  max-width: 32em;
}
/* Child selector, not a bare .tpl-avoid: this is a <p> inside .tpl-why, so
   .tpl-why > p (0,1,1) was beating a lone class (0,1,0) and the aside picked
   up the lead's 14px and 32em rather than its own 13px. Two classes (0,2,0)
   settles it without !important. */
.tpl-why > .tpl-avoid {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(240,237,230,.35);
  max-width: 32em;
}
.tpl-avoid strong {
  font-weight: 500;
  color: var(--warm-white);
}
.tpl-why-link {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(240,237,230,.45);
  letter-spacing: .04em;
  text-transform: none;   /* .btn-sec uppercases; a sentence must not */
  min-height: 44px;
  padding: 10px 0;
  display: inline-flex;
  align-items: center;
  transition: color .2s;
}
.tpl-why-link:hover { color: var(--warm-white); }

/* --- Card actions --- */
.tpl-actions {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.tpl-actions .btn-main {
  font-size: 14px;
  padding: 16px 28px;
}

/* --- Objection block (sits between the carousel and the FAQ) --- */
/* --mid sits very close to the --navy carousel above it, so this band is
   ruled off top and bottom the same way .marquee-wrap is in main.css. */
.tpl-objection {
  background: var(--mid);
  padding: 100px 48px;
  border-top: 1px solid rgba(240,237,230,.06);
  border-bottom: 1px solid rgba(240,237,230,.06);
}
.tpl-objection-inner {
  max-width: 720px;
  margin: 0 auto;
}
.tpl-objection h2 {
  font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--warm-white);
  margin-bottom: 24px;
}
.tpl-objection p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(240,237,230,.55);
}
.tpl-objection p + p { margin-top: 18px; }

/* --- FAQ --- */
.tpl-faq {
  padding: 100px 48px;
  background: var(--dark);
  border-bottom: 1px solid rgba(240,237,230,.06);
}
.tpl-faq-inner {
  max-width: 720px;
  margin: 0 auto;
}
.tpl-faq h2 {
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-bottom: 48px;
}
.tpl-faq-item {
  padding: 28px 0;
  border-top: 1px solid rgba(240,237,230,.08);
}
.tpl-faq-item:last-child { border-bottom: 1px solid rgba(240,237,230,.08); }
.tpl-faq-item h3 {
  font-size: 17px;
  font-weight: 500;
  color: var(--warm-white);
  margin-bottom: 10px;
}
.tpl-faq-item p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(240,237,230,.5);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .tpl-hero { padding: 140px 24px 60px; }
  .tpl-objection { padding: 80px 24px; }
  .tpl-body { padding: 72px 24px 80px; }
  .tpl-faq { padding: 80px 24px; }
  /* No .tpl-card gap here: the card is single-column from 1200 down, and that
     rule sets the row gap for every width this block can reach. */
  .tpl-tabs { gap: 0 24px; margin-bottom: 36px; }
  .tpl-stage { gap: 14px; }
}

/* Frame first, rationale beneath. Collapses at 1200 rather than 900: the
   arrows and gaps take 128px off the carousel before the 1.4fr/1fr split
   happens, so below 1200 two columns leave a text column too narrow to read
   next to a screenshot too small to read. Must stay after the 1024 block,
   which is the only other rule touching .tpl-card. */
@media (max-width: 1200px) {
  .tpl-card {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* Full width now, so the description needs the measure the rest of the
     rationale already carries. */
  .tpl-desc { max-width: 32em; }

  /* The card is a full-width frame with a long rationale under it, so it is
     tall. Centred arrows beside it would land at the midpoint of the body
     copy, nowhere near the frame they drive. Give the viewport a row of its
     own and put the controls beneath it as one centred row.
     DOM order is prev, viewport, next, dots, so every item needs an explicit
     order or the prev arrow wraps above the frame. */
  .tpl-viewport    { flex: 1 1 100%; order: 1; }
  .tpl-arrow--prev { order: 2; }
  /* Auto basis, not the 100% the two-column layout uses: the dots share this
     row with both arrows rather than taking a row of their own. */
  .tpl-dots        { flex: 0 0 auto; order: 3; margin-top: 0; }
  .tpl-arrow--next { order: 4; }
}

/* Rationale in two columns, stacked state only. Matches /bespoke-systems.
   Once the card is one column the rationale spans the full card, but every
   block in it carries a 32em measure, so at 1100 the prose sat in 440px on
   the left with 600px of empty card beside it. Splitting it fills that.

   Bounded band, not an open-ended max-width. 720 is where this page already
   swaps the tab row for the phone picker, and it keeps the narrowest column
   at 316px; below that two columns of 14px prose would drop under the ~280px
   where a line stops being worth reading, so one column takes over again.
   Upper bound is the collapse breakpoint: above 1200 the rationale is already
   in the narrow track of a two-column card, where one column is correct. */
@media (min-width: 720px) and (max-width: 1200px) {
  .tpl-why {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    align-items: start;
    /* Five rows for four left-hand items. The dl spans all five, and the fifth
       is the flexible one, deliberately left empty. Grid shares a spanning
       item's overflow equally across every intrinsic row it crosses, which is
       what opened a 131px hole between the h4 and its lead; track sizing skips
       that step entirely for an item spanning a flexible track, so the dl's
       extra height all lands in row 5, below the left column rather than
       inside it. Still load-bearing, just moved to the bottom now that the
       left column is a four-item stack instead of two rows. */
    grid-template-rows: auto auto auto auto 1fr;
  }
  /* Explicit rows throughout. Cards 3-6 have no .tpl-why-link, and on auto
     placement the missing item would shift the rows under it. */
  .tpl-why > h4 { grid-area: 1 / 1; }
  .tpl-why > p:not(.tpl-avoid) { grid-area: 2 / 1; }
  /* Left column, under the lead it qualifies. 20px picks up the same step the
     lead-to-dl gap uses in the stacked layout; the base 4px is for following a
     dd, which it no longer does here. */
  .tpl-why > .tpl-avoid { grid-area: 3 / 1; margin-top: 20px; }
  .tpl-why > .tpl-why-link { grid-area: 4 / 1; justify-self: start; }
  /* Right column alone, spanning the full height of the block. */
  .tpl-why > dl { grid-area: 1 / 2 / -1 / auto; margin-top: 0; }
  .tpl-why dd:last-of-type { margin-bottom: 0; }
  /* The column is the measure now. 36em only binds at the very top of the
     band, where a half-card column would otherwise reach 556px. */
  .tpl-why > p:not(.tpl-avoid),
  .tpl-why dd { max-width: 36em; }
}

@media (max-width: 768px) {
  .tpl-hero { padding: 120px 20px 48px; }
  .tpl-objection { padding: 64px 20px; }
  .tpl-body { padding: 56px 20px 60px; }
  .tpl-faq { padding: 64px 20px; }
  .tpl-meta h3 { font-size: 24px; }
  .tpl-play { font-size: 12px; padding: 12px 22px; }
  /* No hover on touch, so the scrim would never lift */
  .browser__screen::before { background: rgba(8,15,24,.3); }
  .tpl-actions { gap: 16px; }
}

/* Exactly one picker at every width. 719.98 rather than 719 so a
   fractional viewport width cannot land between the two rules. The carousel
   controls are not restated here: the 1200 block already stacks them, and one
   centred control row measures 202px, so it fits the 350px of content width
   left at 390 without the arrows needing a second row. */
@media (max-width: 719.98px) {
  .tpl-tabs { display: none; }
  .tpl-picker { display: block; }
}

/* A 45ms-per-slide horizontal slide is exactly what this setting is for. */
@media (prefers-reduced-motion: reduce) {
  .tpl-track { transition: none; }
  .tpl-dots span { transition: none; }
}