/* ==========================================================================
   Terms & Conditions page — adapted from the LGCE Claude Design document.
   Loaded ONLY on the terms page (via {% block head_extra %}); everything is
   scoped under .gtac (plus a body[data-page="terms"] backdrop) so it can never
   leak into the rest of the site. The source design was a print/A4 layout; this
   reflows it into one responsive, web-readable document while keeping its visual
   language (gradient hero title, skewed red→orange numbered badges, red
   "Article N" eyebrows, 1.1 clause numbering, gradient rules).
   ========================================================================== */

body[data-page="terms"] {
  background: #e7e3df;
  background-image: radial-gradient(120% 80% at 82% 18%, rgba(241,145,11,.07), transparent 60%);
  background-attachment: fixed;
}
/* clear the fixed site header (no dark page-hero on this page) */
body[data-page="terms"] main { padding-top: calc(var(--header-h, 76px) + clamp(1rem, 3vw, 2rem)); }

.gtac {
  max-width: 880px;
  margin: 0 auto clamp(2rem, 5vw, 4rem);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 44px rgba(20,24,28,.12);
  padding: clamp(1.6rem, 4vw, 3rem) clamp(1.4rem, 4vw, 3.2rem) clamp(1.6rem, 3vw, 2.6rem);
  color: #1a1a1a;
  font-family: var(--font, "Helvetica Neue", Helvetica, Arial, sans-serif);
}

/* ---- hero ---- */
.gtac__hero { display: flex; align-items: flex-start; gap: 1.1rem; }
.gtac__hero-accent {
  width: 7px; align-self: stretch; min-height: 56px; flex: 0 0 auto;
  background: linear-gradient(180deg, #F1910B, #FF0000);
  transform: skewX(-22deg);
}
.gtac__hero-text { flex: 1; min-width: 0; }
.gtac__title {
  margin: 0; color: #111; font-weight: 300; line-height: 1.04;
  letter-spacing: -.018em; font-size: clamp(1.9rem, 5.5vw, 2.7rem);
}
.gtac__title-accent {
  background: linear-gradient(180deg, #F1910B 0%, #FF2a00 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gtac__eyebrow {
  margin: .7rem 0 0; font-size: .72rem; letter-spacing: .3em;
  text-transform: uppercase; color: #9b9590;
}
.gtac__pdf {
  flex: 0 0 auto; margin-top: .25rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #FF3a00, #F1910B);
  padding: .7rem 1.2rem; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(255,80,0,.30);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gtac__pdf:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(255,80,0,.42); }
.gtac__pdf:focus-visible { outline: 2px solid var(--red-deep, #b00); outline-offset: 3px; }

.gtac__rule { height: 3px; margin: 1.3rem 0 1.7rem; background: linear-gradient(90deg, #FF0000, #F1910B); }

.gtac__intro p { font-size: .95rem; line-height: 1.7; color: #333; margin: 0 0 .85rem; }

/* ---- article ---- */
.gtac-art { display: flex; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid #ececec; }
.gtac-art:last-of-type { border-bottom: 1px solid #ececec; }
.gtac-art__badge {
  position: relative; z-index: 0; flex: 0 0 auto;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 300; font-size: 1.15rem;
}
.gtac-art__badge::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, #F1910B, #FF0000);
  transform: skewX(-22deg);
}
.gtac-art__body { flex: 1; min-width: 0; }
.gtac-art__head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .55rem; }
.gtac-art__eyebrow {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: #FF0000; font-weight: 700;
}
.gtac-art__title { margin: 0; font-size: 1.18rem; font-weight: 700; color: #111; line-height: 1.25; }

.gtac-clause { display: flex; gap: .7rem; margin-top: .6rem; }
.gtac-clause__n {
  flex: 0 0 auto; min-width: 2.4rem;
  font-weight: 700; color: #FF0000; font-size: .95rem; line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.gtac-clause p { margin: 0; font-size: .95rem; line-height: 1.6; color: #444; }

.gtac-sub { margin: .5rem 0 .2rem 3.1rem; padding-left: 1.1rem; list-style: lower-alpha; }
.gtac-sub li { margin-top: .35rem; font-size: .95rem; line-height: 1.55; color: #444; }

.gtac__legal {
  margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid #e6e6e6;
  font-size: .72rem; line-height: 1.5; color: #8a8a8a;
}

/* ---- responsive ---- */
@media (max-width: 600px) {
  .gtac__hero { flex-wrap: wrap; }
  .gtac__pdf { order: 3; width: 100%; text-align: center; }
  .gtac-art { gap: .7rem; }
  .gtac-art__badge { width: 32px; height: 32px; font-size: 1rem; }
  .gtac-clause__n { min-width: 2rem; }
  .gtac-sub { margin-left: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) { .gtac__pdf { transition: none; } }

/* ---- Dark mode ----
   This page is intentionally a "paper document" look (cream backdrop, white
   card) independent of the site's semantic tokens — but it still needs a
   dark variant. Re-themed as a dark card on the dark page background rather
   than literally inverted (a stark white sheet would otherwise be the only
   light mode left after switching). Brand elements (gradient title accent,
   gradient rule, skewed badges, red eyebrows/numbers, gradient PDF button)
   stay unchanged — they're already legible on light or dark. */
[data-theme="dark"] body[data-page="terms"] {
  background: var(--bg);
  background-image: radial-gradient(120% 80% at 82% 18%, rgba(241,145,11,.09), transparent 60%);
}
[data-theme="dark"] .gtac {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 14px 44px rgba(0,0,0,.45);
}
[data-theme="dark"] .gtac__title { color: var(--text); }
[data-theme="dark"] .gtac__eyebrow { color: var(--text-faint); }
[data-theme="dark"] .gtac__intro p { color: var(--text-soft); }
[data-theme="dark"] .gtac-art { border-top-color: var(--border); }
[data-theme="dark"] .gtac-art:last-of-type { border-bottom-color: var(--border); }
[data-theme="dark"] .gtac-art__title { color: var(--text); }
[data-theme="dark"] .gtac-clause p { color: var(--text-soft); }
[data-theme="dark"] .gtac-sub li { color: var(--text-soft); }
[data-theme="dark"] .gtac__legal { border-top-color: var(--border); color: var(--text-faint); }