/* =====================================================================
   SELPIC — Editorial sub-page primitives
   Extends selpic-editorial.css tokens. Page hero, breadcrumb, prose,
   spec tables, forms, filter chips, timeline, generic grids.
   ===================================================================== */

/* ---------- Page hero (smaller than home hero) ---------- */
.page-hero{ padding:72px 0 64px; border-bottom:1px solid var(--line); background:var(--cream) }
.page-hero.navy{ background:var(--navy); border-bottom-color:var(--navy-line) }
.page-hero .container{ display:grid; gap:20px }
.crumb{ font:600 13px/1 'Space Grotesk',sans-serif; letter-spacing:.04em; color:var(--muted); display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.crumb a{ color:var(--muted); text-decoration:none } .crumb a:hover{ color:var(--ink) }
.crumb .sep{ opacity:.5 }
.page-hero.navy .crumb, .page-hero.navy .crumb a{ color:var(--on-navy-soft) }
.page-hero.navy .crumb a:hover{ color:#fff }
.ph-title{ font-weight:800; font-size:clamp(34px,4.4vw,56px); line-height:1.04; letter-spacing:-.035em; color:var(--ink); word-break:keep-all }
.page-hero.navy .ph-title{ color:#fff }
.ph-title .thin{ display:block; font-weight:300; color:var(--body); font-size:.62em; letter-spacing:-.02em; margin-bottom:.15em }
.page-hero.navy .ph-title .thin{ color:var(--on-navy-soft) }
.ph-sub{ font-size:17.5px; line-height:1.6; color:var(--body); max-width:56ch }
.page-hero.navy .ph-sub{ color:var(--on-navy-soft) }
@media(max-width:760px){ .page-hero{ padding:48px 0 44px } }

/* ---------- Prose ---------- */
.prose{ max-width:64ch; color:var(--body); font-size:17px; line-height:1.72 }
.prose>*+*{ margin-top:1.1em }
.prose h3{ color:var(--ink); font-weight:800; font-size:24px; letter-spacing:-.02em; margin-top:1.6em }
.prose strong,.prose b{ color:var(--ink); font-weight:700 }
.prose ul{ padding-left:1.1em; display:grid; gap:.5em } .prose li{ list-style:disc }

/* ---------- Generic grids ---------- */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
@media(max-width:1080px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:760px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr } }

/* ---------- Info / feature card ---------- */
.info-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; transition:transform .25s ease,border-color .25s ease }
.info-card:hover{ transform:translateY(-3px); border-color:var(--navy) }
.info-card .ic-k{ font:600 12.5px/1 'Space Grotesk',sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:14px }
.info-card h3{ font-weight:800; font-size:22px; letter-spacing:-.02em; color:var(--ink); margin-bottom:10px; word-break:keep-all }
.info-card p{ color:var(--body); font-size:15.5px; line-height:1.62 }
.block--navy .info-card{ background:var(--navy-2); border-color:var(--navy-line) }
.block--navy .info-card h3{ color:#fff } .block--navy .info-card p{ color:var(--on-navy-soft) }
.block--navy .info-card .ic-k{ color:var(--yellow) }

/* ---------- Spec / pricing table ---------- */
.spec-table{ width:100%; border-collapse:collapse; font-size:15.5px }
.spec-table th,.spec-table td{ text-align:left; padding:16px 18px; border-bottom:1px solid var(--line); vertical-align:top }
.spec-table th{ font:600 12.5px/1.3 'Space Grotesk',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); width:34%; white-space:nowrap }
.spec-table td{ color:var(--ink); font-weight:500 }
.spec-table tr:first-child th,.spec-table tr:first-child td{ border-top:1.5px solid var(--navy) }
.table-wrap{ overflow-x:auto }

/* ---------- Form ---------- */
.form{ display:grid; gap:20px; max-width:640px }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
@media(max-width:640px){ .form-row{ grid-template-columns:1fr } }
.field{ display:grid; gap:8px }
.field label{ font:600 13px/1 'Space Grotesk',sans-serif; letter-spacing:.02em; color:var(--ink) }
.field label .req{ color:var(--yellow); margin-left:2px }
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; border:1px solid var(--line-2); border-radius:12px;
  background:#fff; color:var(--ink); font-size:15.5px; font-family:inherit; transition:border-color .2s ease }
.field textarea{ min-height:120px; resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--navy) }
.field-check{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--body); line-height:1.5 }
.field-check input{ width:18px; height:18px; margin-top:1px; flex:none }
.field-check a{ color:var(--ink); text-decoration:underline }
.form-note{ font-size:13px; color:var(--muted) }
.form-ok{ display:none; padding:20px; border-radius:14px; background:var(--cream-2); color:var(--ink); font-weight:600 }
.form-ok.show{ display:block }

/* ---------- Filter chips ---------- */
.filter-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px }
.chip-btn{ font:600 14px/1 'Space Grotesk',sans-serif; padding:10px 18px; border-radius:var(--pill);
  border:1px solid var(--line-2); background:#fff; color:var(--body); cursor:pointer; transition:all .2s ease }
.chip-btn:hover{ border-color:var(--navy) }
.chip-btn.on{ background:var(--navy); color:#fff; border-color:var(--navy) }

/* ---------- Timeline ---------- */
.timeline{ display:grid; gap:0; border-top:1.5px solid var(--navy) }
.tl-item{ display:grid; grid-template-columns:140px 1fr; gap:28px; padding:26px 0; border-bottom:1px solid var(--line) }
.tl-year{ font:700 20px/1 'Space Grotesk',sans-serif; color:var(--yellow); letter-spacing:.01em }
.tl-body h4{ font-weight:800; font-size:18px; color:var(--ink); margin-bottom:6px }
.tl-body p{ color:var(--body); font-size:15px; line-height:1.6 }
@media(max-width:640px){ .tl-item{ grid-template-columns:1fr; gap:6px } }

/* ---------- Map embed ---------- */
.map-embed{ width:100%; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--cream-2) }
.map-embed iframe,.map-embed>div{ width:100%; height:100% }
@media(max-width:760px){ .map-embed{ aspect-ratio:4/5 } }

/* ---------- Store list ---------- */
.store-list{ display:grid; gap:0; border-top:1px solid var(--line) }
.store-row{ display:grid; grid-template-columns:1fr auto; gap:16px; padding:18px 4px; border-bottom:1px solid var(--line); align-items:center }
.store-row .sr-name{ font-weight:700; color:var(--ink); font-size:16px }
.store-row .sr-addr{ font-size:14px; color:var(--muted); margin-top:3px }
.store-row .sr-cat{ font:600 12px/1 'Space Grotesk',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap }

/* ---------- Section intro helper for pages ---------- */
.pg-lead{ max-width:70ch; margin-bottom:44px }