/* ============================================================
   Tee Auto — page styles. Loaded after the DS foundations
   (colors_and_type.css). Bold-signage by default; the
   [data-dir="editorial"] overrides give the calm alternate.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: clip; max-width: 100%; }
::selection { background: var(--flight); color: #fff; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

:root {
  --container: 1200px;
  --edge: 3px;             /* routed sign keyline weight */
  --header-h: 74px;
  --designer-header-h: 104px;
  --designer-logo-h: 56px;
}

/* ---- layout helpers ---- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.band { padding: var(--sp-9) 0; }
.band-tight { padding: var(--sp-8) 0; }
.pine { background: var(--pine); color: var(--paper); }
.pine-deep { background: var(--pine-900); color: var(--paper); }
.ink { background: var(--ink); color: var(--paper); }
.sand { background: var(--bg-alt); }
.moss { background: var(--moss); }

.eyebrow {
  font-family: var(--font-display); font-weight: 300; font-size: 13px;
  text-transform: uppercase; letter-spacing: .32em; color: var(--fg2);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--flight); display: inline-block;
}
.eyebrow.no-rule::before { display: none; }
.eyebrow.on-dark { color: rgba(255,255,255,.7); }

/* ---- the signature routed sign-edge motif ---- */
.sign-edge {
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset;
  position: relative;
}
.sign-bolt { width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff7, transparent 60%), var(--stone-500);
  box-shadow: 0 1px 1px rgba(0,0,0,.4); position: absolute; }

/* corner bolts on a routed sign */
.sign-edge.bolted::before, .sign-edge.bolted::after,
.sign-edge.bolted > .bolt-tr, .sign-edge.bolted > .bolt-br { content:""; }

/* ---- kicker tab (bold chips) ---- */
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .18em;
  padding: 6px 12px; border-radius: var(--r-sm);
  background: var(--flight); color: #fff;
}
.kicker.pine { background: var(--moss); color: var(--pine); }

/* ---- section heading rhythm ---- */
.h-display {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  line-height: .96; letter-spacing: -.01em; margin: 0;
}
[data-dir="editorial"] .h-display { font-weight: 700; letter-spacing: .01em; }

.lead { font-family: var(--font-body); font-weight: 400; font-size: var(--text-lg);
  line-height: 1.6; color: var(--fg2); }
.lead.on-dark { color: rgba(255,255,255,.82); }

/* hairline rule */
.rule { height: 1px; background: var(--line); border: 0; }
.rule.on-dark { background: rgba(255,255,255,.14); }

/* ---- reveal on scroll (always visible; subtle slide-up when scrolled to) ---- */
.reveal { }
.reveal.in { animation: rise-in .55s var(--ease); }
@keyframes rise-in { from { transform: translateY(20px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal.in { animation: none; } }

/* ---- focus ring ---- */
:focus-visible { outline: 2px solid var(--flight); outline-offset: 2px; }

/* ---- scrollbar (subtle) ---- */
* { scrollbar-color: var(--stone-300) transparent; }

/* ============================================================
   EDITORIAL DIRECTION overrides — calmer, more air, hairlines
   ============================================================ */
[data-dir="editorial"] .band { padding: var(--sp-10) 0; }
[data-dir="editorial"] .kicker { background: transparent; color: var(--fg2);
  padding: 0; font-weight: 300; letter-spacing: .32em; font-size: 12px; }
[data-dir="editorial"] .kicker .ic { color: var(--flight); }
[data-dir="editorial"] .sign-edge { border-width: 1px; border-color: var(--line-strong); border-radius: var(--r-lg); }
[data-dir="editorial"] .pine { background: var(--pine-900); }

/* ---- modal ---- */
.overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(14,17,12,.62);
  backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes pop { from { opacity: 0; transform: scale(.96); } }
.sheet {
  background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  width: 100%; position: relative; animation: rise .26s var(--ease); overflow: hidden;
}

/* tiny utility */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.wrap { flex-wrap: wrap; }
.mono { font-family: var(--font-mono); }

/* value-changed flash on the live sign */
@keyframes flashval { 0% { background: var(--flight-100); } 100% { background: transparent; } }
.flash { animation: flashval .5s ease; }

/* trust chips (flow success) */
.chip-trust { display:inline-flex; align-items:center; gap:7px; background:var(--moss); color:var(--pine);
  font-family:var(--font-display); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  padding:8px 14px; border-radius:var(--r-pill); }

/* teaser cell hover */
.teaser-cell { transition: transform .3s var(--ease); }
.teaser-cell:hover { transform: translateY(-4px); }
.teaser-cell img { transition: transform .5s var(--ease); }
.teaser-cell:hover img { transform: scale(1.05); }

/* step + price card hover lift */
.step-card, .price-card { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.step-card:hover, .price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.menu-btn { display:none; }

/* ============================ COURSE DESIGNER ============================ */
.dz-shell { isolation: isolate; }
.dz-stagebar { flex: 1 1 auto; justify-content: flex-end; max-width: 640px; }
/* keep Leaflet panes/controls under the sticky header */
.leaflet-pane, .leaflet-top, .leaflet-bottom { z-index: 5 !important; }
.leaflet-control { z-index: 6 !important; }
.dz-side { }
@media (max-width: 1080px) {
  .dz-studio { grid-template-columns: 1fr !important; }
  .dz-studio > div:first-child { height: 460px !important; }
}
@media (max-width: 860px) {
  .dz-2col { grid-template-columns: 1fr !important; }
  .dz-2col .dz-side { position: static !important; order: -1; }
  .dz-canvas { height: 560px !important; }
  .dz-canvas .dz-float { width: calc(100% - 32px) !important; }
}
@media (max-width: 560px) {
  .dz-shell .dz-stagebar .hide-sm { display: none !important; }
}

/* grid children must be allowed to shrink below content min-size */
.price-grid > *, .price-grid-full > *, .steps-grid > *, .teaser-grid > * { min-width: 0; }

/* gallery masonry (CSS columns) + hover */
.gallery-masonry { column-count: 3; column-gap: 16px; }
.gal-cell { position: relative; }
.gal-cell:hover .gal-scrim { opacity: 1 !important; }
.gal-cell img { transition: transform .5s var(--ease); }
.gal-cell:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .gallery-masonry { column-count: 2; } }
@media (max-width: 540px) { .gallery-masonry { column-count: 1; } }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1080px) {
  .hd-grid { grid-template-columns: 1fr !important; }
  .hd-preview { border-left: 0 !important; border-top: 1px solid var(--line); }
}
@media (max-width: 1180px) {
  .site-nav { display: none !important; }
  .menu-btn { display: inline-flex !important; }
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .mat-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .steps-grid { grid-template-columns: repeat(2,1fr) !important; }
  .price-grid { grid-template-columns: repeat(2,1fr) !important; }
  .price-grid-full { grid-template-columns: repeat(2,1fr) !important; }
  .teaser-grid { grid-template-columns: repeat(2,1fr) !important; }
  .teaser-cell { grid-column: span 1 !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .flow-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
}
@media (max-width: 560px) {
  :root {
    --designer-header-h: 72px;
    --designer-logo-h: 36px;
  }
  .container { padding: 0 20px; }
  .band { padding: var(--sp-8) 0; }
  .steps-grid, .price-grid, .teaser-grid, .footer-grid, .watch-grid { grid-template-columns: 1fr !important; }
  .price-grid-full { grid-template-columns: 1fr !important; }
  .trust-strip { justify-content: flex-start !important; gap: 14px 22px !important; padding-left: 20px !important; padding-right: 20px !important; }
  .header-cta { flex-wrap: wrap; justify-content: flex-end; gap: 8px !important; }
  .header-cta .btn { max-width: calc(100vw - 40px); white-space: normal; text-align: center; min-height: 44px; }
  .menu-btn { min-width: 44px; min-height: 44px; padding: 8px; }
  .hide-sm { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .price-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .teaser-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .watch-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .mat-grid { gap: 28px !important; }
}

/* Review-step sign thumbnails — hover lift + reveal zoom affordance */
.dz-sign-thumb { transition: transform .15s var(--ease); }
.dz-sign-thumb:hover { transform: translateY(-3px); }
.dz-sign-thumb .dz-zoom-badge { opacity: .55; transition: opacity .15s var(--ease); }
.dz-sign-thumb:hover .dz-zoom-badge { opacity: 1; }
.dz-size-grid { } /* size cards grid (responsive override below if needed) */
@media (max-width: 720px) {
  .dz-size-grid { grid-template-columns: 1fr !important; }
}