/* ═══════════════════════════════════════════════════════════════════════════
   Page compositions — the shells each template lays out for itself.

   The 330px aside is laid out HERE, per page, not in base.html: .ShowSidebar
   is true on the homepage only, so the base-layout switch the starter theme
   uses cannot drive this design.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer pages {

  /* ── Shared shell ────────────────────────────────────────────────────── */
  .tr-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
    gap: var(--space-11);
    align-items: start;
    /* No bottom padding: the footer already carries margin-block-start of
       --section-gap, and stacking both produced a ~144px dead band. */
  }
  .tr-shell__main { min-width: 0; }

  .tr-section { padding-block-start: var(--section-gap-tight); }
  .tr-section__cta { margin-block-start: var(--space-9); }
  .tr-stack--gutter { gap: var(--gutter); }

  .tr-pagehead { padding-block: var(--space-7) var(--space-6); display: grid; gap: var(--space-5); }
  .tr-pagehead__lede {
    margin: 0; max-width: var(--measure-wide);
    font-size: var(--text-lg); line-height: var(--lh-normal); color: var(--text-muted);
  }

  /* Editor-controlled band under the feed. */
  .tr-band {
    margin-block-start: var(--section-gap);
    padding-block: var(--space-11);
    background: var(--surface-card);
    border-block: var(--border-w-hair) solid var(--border-hairline);
  }

  /* ── Section filter strip ────────────────────────────────────────────────
     25 imported categories will not fit on one line, so the strip scrolls
     horizontally inside its own box — the page body never scrolls sideways.
     ────────────────────────────────────────────────────────────────────── */
  .tr-tabs {
    display: flex; gap: var(--space-2);
    margin-block-end: var(--space-7);
    padding-block-end: var(--space-3);
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: thin;
    border-bottom: var(--border-w-hair) solid var(--border-hairline);
  }
  .tr-tab {
    display: inline-flex; align-items: center; flex-shrink: 0;
    min-height: var(--tap-min); padding-inline: var(--space-4);
    font-size: var(--text-sm); font-weight: var(--fw-semibold);
    color: var(--text-muted); white-space: nowrap;
    border-radius: var(--radius-pill);
    transition: var(--transition-color);
  }
  .tr-tab:hover { color: var(--cat); background: var(--surface-sunken); }
  .tr-tab[aria-current] { color: var(--text-inverse); background: var(--cat); }

  /* ── Home: lead band ─────────────────────────────────────────────────── */
  .tr-lede { padding-block-start: var(--space-8); }
  .tr-lede__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--gutter);
    /* The lead sets the band height; the two side cards split it. Explicit,
       because the side column is 1fr/1fr and would otherwise collapse to
       whatever the lead's 16/9 aspect happened to produce. */
    min-height: 430px;
  }
  .tr-lede__grid > .tr-card--lead { min-height: 430px; }
  .tr-lede__side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--gutter); min-height: 0; }
  .tr-lede__side .tr-card { min-height: 0; }

  /* ── Article ─────────────────────────────────────────────────────────── */
  .tr-article__head { padding-block: var(--space-6) var(--space-7); display: grid; gap: var(--space-6); }
  .tr-article__intro { display: grid; gap: var(--space-5); max-width: var(--container-prose); }
  .tr-article__title {
    margin: 0;
    font-size: var(--text-4xl); font-weight: var(--fw-extrabold);
    line-height: var(--lh-snug); letter-spacing: var(--ls-heading);
  }
  .tr-article__lede {
    margin: 0; font-size: var(--text-lg); line-height: var(--lh-normal);
    color: var(--text-muted); text-wrap: pretty;
  }
  /* The hero keeps the full container width while the prose narrows to 740px. */
  .tr-article__hero { padding-block-end: var(--space-8); }
  .tr-figure--hero { aspect-ratio: 16 / 9; box-shadow: var(--shadow-media); }
  .tr-figure__caption {
    margin-block-start: var(--space-3);
    font-size: var(--text-xs); color: var(--text-muted);
  }
  .tr-article__video { margin-block-end: var(--space-8); }
  .tr-article__video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-media); }
  .tr-article__tags {
    margin-block-start: var(--space-8); padding-block-start: var(--space-6);
    border-top: var(--border-w-hair) solid var(--border-hairline);
  }
  .tr-article__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-6); margin-block-start: var(--space-7); padding-block: var(--space-5);
  }
  .tr-article__related { margin-block-start: var(--section-gap-tight); }

  /* ── Search ──────────────────────────────────────────────────────────── */
  .tr-searchband {
    padding-block: var(--space-7) var(--space-8);
    background: var(--surface-card);
    border-bottom: var(--border-w-hair) solid var(--border-hairline);
  }
  .tr-searchband .tr-container > * + * { margin-block-start: var(--space-5); }
  .tr-searchband__title {
    margin: 0; font-size: var(--text-3xl); font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-heading);
  }
  .tr-searchband .tr-search--page { max-width: 720px; }
  .tr-searchband__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  .tr-searchband__chips-label { font-size: var(--text-xs); color: var(--text-muted); }

  .tr-resulthead { display: grid; gap: var(--space-2); margin-block: var(--space-8) var(--space-6); }
  .tr-resulthead__count {
    margin: 0; display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
    font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--text-strong);
  }
  .tr-resulthead__n { font-size: var(--text-2xl); color: var(--cobalt-600); }
  .tr-resulthead__q { font-size: var(--text-lg); font-weight: var(--fw-regular); color: var(--text-muted); }

  /* ── 404 ─────────────────────────────────────────────────────────────── */
  .tr-404 {
    position: relative;
    display: grid; place-items: center;
    min-height: 60vh; padding-block: var(--space-12);
    overflow: hidden;
    background: var(--cobalt-900);
  }
  .tr-404__photo { position: absolute; inset: 0; }
  .tr-404__photo img { width: 100%; height: 100%; object-fit: cover; }
  /* The one --gradient-horizon on this page. */
  .tr-404__photo::after {
    content: ""; position: absolute; inset: 0;
    background: var(--gradient-horizon); opacity: .82;
  }
  .tr-404__inner { position: relative; display: grid; justify-items: center; gap: var(--space-5); text-align: center; }
  .tr-404__code {
    font-family: var(--font-display); font-size: var(--text-7xl); font-weight: var(--fw-bold);
    line-height: 1; letter-spacing: var(--ls-display); color: var(--sun-400);
  }
  .tr-404__title { margin: 0; font-size: var(--text-3xl); }
  .tr-404__text { margin: 0; max-width: 46ch; }
  .tr-404__search { width: min(100%, 480px); margin-block-start: var(--space-3); }

  /* ── Form page ───────────────────────────────────────────────────────── */
  .tr-formpage { max-width: var(--container-prose); padding-block: var(--space-7) var(--section-gap); }
  .tr-formpage__head { margin-block: var(--space-6); }
  .tr-form { display: grid; gap: var(--space-6); margin-block-start: var(--space-7); }
  .tr-form__actions { display: flex; justify-content: flex-end; }
  .tr-field__options { display: grid; gap: var(--space-1); }
  .tr-formpage__done { display: grid; justify-items: center; gap: var(--space-4); text-align: center; padding-block: var(--space-12); }
  .tr-formpage__icon { font-size: 48px; color: var(--state-success); }
  .tr-formpage__title { margin: 0; }

  /* ── Responsive ──────────────────────────────────────────────────────── */
  @media (max-width: 1199px) {
    .tr-lede__grid { grid-template-columns: minmax(0, 1fr) 340px; }
  }
  @media (max-width: 991px) {
    .tr-shell { grid-template-columns: minmax(0, 1fr); gap: var(--section-gap-tight); }
    .tr-lede__grid { grid-template-columns: 1fr; }
    .tr-lede__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
    .tr-article__title { font-size: var(--text-3xl); }
  }
  @media (max-width: 767px) {
    .tr-lede__side { grid-template-columns: 1fr; }
    .tr-article__title { font-size: var(--text-2xl); }
    .tr-article__foot { flex-direction: column; align-items: flex-start; }
    .tr-404__code { font-size: var(--text-5xl); }
    .tr-searchband__title { font-size: var(--text-2xl); }
  }
}