/* =====================================================================
   SummitBridge — editorial.css
   Buttons, architectural cards, mosaics, strips, quotes, stats, forms,
   prose. Sharp-edged, ruled, index-numbered editorial language.
   ===================================================================== */

/* ---------- buttons (squared, architectural) ---------- */
.btn { display:inline-flex; align-items:center; gap:.55em; padding:.95em 1.6em; border-radius: var(--r-sm); font-family: var(--ff-display); font-weight:700; font-size:.9rem; letter-spacing:.02em; text-transform:uppercase; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast); }
.btn svg { width:1.1em; height:1.1em; }
.btn--red { background: var(--red); color:#fff; box-shadow: var(--sh-red); }
.btn--red:hover { background: var(--red-deep); transform: translateY(-2px); }
.btn--yellow { background: var(--yellow); color: var(--charcoal); }
.btn--yellow:hover { background: var(--yellow-deep); transform: translateY(-2px); }
.btn--char { background: var(--charcoal); color: var(--warm); }
.btn--char:hover { background:#000; transform: translateY(-2px); }
.btn--line { border:2px solid var(--charcoal); color: var(--charcoal); }
.btn--line:hover { background: var(--charcoal); color: var(--warm); }
.btn--ghost { border:1px solid var(--line-light); color: var(--warm); }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.btn--block { width:100%; justify-content:center; }
.linkmore { display:inline-flex; align-items:center; gap:.5em; font-family: var(--ff-display); font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color: var(--red); }
.linkmore svg { width:1.1em; transition: transform var(--t-fast); }
.linkmore:hover svg { transform: translateX(5px); }
.on-dark .linkmore { color: var(--yellow); }

/* ---------- tags ---------- */
.tag { display:inline-flex; align-items:center; gap:.4em; font-family: var(--ff-display); font-weight:700; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; padding:.4em .8em; border-radius: var(--r-sm); background: var(--concrete); color: var(--charcoal); }
.tag--red { background: var(--red); color:#fff; }
.tag--yellow { background: var(--yellow); color: var(--charcoal); }
.tag--line { background:transparent; border:1px solid var(--line-strong); }
.tag--ghost { background: rgba(255,255,255,.14); color:#fff; }
.tags { display:flex; flex-wrap:wrap; gap:.5rem; }

/* ---------- project card (sharp, index-numbered) ---------- */
.proj { position:relative; display:flex; flex-direction:column; background: var(--bone); border:1px solid var(--line); overflow:hidden; transition: transform var(--t), box-shadow var(--t); }
.proj:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.proj__media { position:relative; aspect-ratio:5/4; overflow:hidden; }
.proj__media img, .proj__media svg { width:100%; height:100%; object-fit:cover; transition: transform 800ms var(--ease); }
.proj:hover .proj__media img, .proj:hover .proj__media svg { transform: scale(1.07); }
.proj__no { position:absolute; top:0; left:0; background: var(--charcoal); color: var(--yellow); font-family: var(--ff-display); font-weight:800; font-size:.92rem; padding:.5em .8em; }
.proj__tag { position:absolute; top:12px; right:12px; }
.proj__body { padding:20px 22px 24px; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.proj__body h3 { font-size:1.32rem; line-height:1.05; }
.proj__meta { display:flex; gap:.9rem; align-items:center; margin-top:auto; padding-top:.8rem; border-top:1px solid var(--line); font-family: var(--ff-display); font-weight:600; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; color: var(--muted); }
.proj__meta svg { width:1.1em; color: var(--red); }

/* ---------- editorial entry (text-led) ---------- */
.entry { display:grid; gap:.6rem; }
.entry__media { overflow:hidden; aspect-ratio:16/10; border:1px solid var(--line); }
.entry__media img, .entry__media svg { width:100%; height:100%; object-fit:cover; transition: transform var(--t); }
.entry:hover .entry__media img, .entry:hover .entry__media svg { transform: scale(1.05); }
.entry__cat { font-family: var(--ff-display); font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--red); }
.entry h3 { transition: color var(--t-fast); }
.entry:hover h3 { color: var(--red); }
.entry p { font-size:.94rem; }
.entry__by { font-family: var(--ff-display); font-weight:600; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; color: var(--muted); }

/* ---------- overlay tile (rooms mosaic) ---------- */
.mtile { position:relative; overflow:hidden; min-height:240px; display:flex; align-items:flex-end; color:#fff; isolation:isolate; }
.mtile img, .mtile svg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform var(--t); }
.mtile::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(28,27,26,0) 30%, rgba(28,27,26,.85)); }
.mtile:hover img, .mtile:hover svg { transform: scale(1.07); }
.mtile__label { padding:22px; }
.mtile__label small { font-family: var(--ff-display); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; color: var(--yellow); }
.mtile__label h3 { color:#fff; margin-top:.2rem; }

/* ---------- horizontal rail ---------- */
.rail { display:grid; grid-auto-flow:column; grid-auto-columns: minmax(290px, 32%); gap: clamp(14px,1.8vw,24px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem; scrollbar-width:thin; }
.rail > * { scroll-snap-align:start; }
.rail::-webkit-scrollbar { height:7px; }
.rail::-webkit-scrollbar-thumb { background: var(--concrete); border-radius:var(--r-pill); }
@media (max-width:620px){ .rail { grid-auto-columns: minmax(80%,82%); } }

/* ---------- material swatch strip ---------- */
.swatch { position:relative; aspect-ratio:3/4; overflow:hidden; border:1px solid var(--line); display:flex; align-items:flex-end; color:#fff; isolation:isolate; }
.swatch img, .swatch svg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform var(--t); }
.swatch::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, transparent 40%, rgba(28,27,26,.82)); }
.swatch:hover img, .swatch:hover svg { transform: scale(1.06); }
.swatch span { padding:16px; font-family: var(--ff-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }

/* ---------- panels ---------- */
.panel { background: var(--bone); border:1px solid var(--line); border-radius: var(--r-md); padding: clamp(22px,3vw,40px); }
.panel--flat { border-radius:0; }
.panel--red { background: var(--g-ember); color:#fff; border:0; }
.panel--red h3,.panel--red h4 { color:#fff; } .panel--red p { color: rgba(255,255,255,.86); }
.panel--char { background: var(--g-char); color: var(--warm); border:0; }
.panel--char h3,.panel--char h4 { color: var(--warm); } .panel--char p { color: rgba(250,246,240,.74); }
.panel--lift { box-shadow: var(--sh-1); }

/* ---------- stat ---------- */
.fig { font-family: var(--ff-display); font-weight:800; font-size: clamp(2.4rem,5vw,4rem); line-height:.9; color: var(--charcoal); letter-spacing:-.04em; display:block; }
.on-dark .fig, .surface-char .fig, .surface-ember .fig { color: var(--warm); }
.fig--red { color: var(--red); } .fig--yellow { color: var(--yellow-deep); }
.fig-cap { font-family: var(--ff-display); font-weight:600; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); margin-top:.5rem; }
.on-dark .fig-cap, .surface-char .fig-cap, .surface-ember .fig-cap { color: rgba(250,246,240,.66); }

/* ---------- icon feature ---------- */
.feat { display:flex; flex-direction:column; gap:.6rem; }
.feat__ic { width:54px; height:54px; border-radius: var(--r-sm); display:grid; place-items:center; }
.feat__ic svg { width:26px; }
.ic-red { background: rgba(229,64,42,.14); color: var(--red); }
.ic-yellow { background: rgba(245,182,43,.2); color: var(--yellow-deep); }
.ic-char { background: rgba(28,27,26,.08); color: var(--charcoal); }
.on-dark .feat__ic { background: rgba(255,255,255,.1); color: var(--warm); }

/* ---------- quote ---------- */
.bigquote { font-family: var(--ff-display); font-weight:800; font-size: clamp(1.7rem,4vw,3rem); line-height:1.08; letter-spacing:-.02em; color: var(--charcoal); text-transform:uppercase; }
.bigquote span { color: var(--red); }
.on-dark .bigquote { color: var(--warm); } .on-dark .bigquote span { color: var(--yellow); }

/* ---------- checklist ---------- */
.checks { display:grid; gap:.8rem; }
.checks li { display:flex; gap:.8rem; align-items:flex-start; color:#423b32; }
.checks li svg { width:22px; flex:none; color: var(--red); margin-top:.15em; }
.checks--boxed li { background: var(--bone); border:1px solid var(--line); padding:.9rem 1rem; }
.on-dark .checks li { color: rgba(250,246,240,.84); }
.on-dark .checks li svg { color: var(--yellow); }

/* ---------- forms ---------- */
.field { display:flex; flex-direction:column; gap:.45rem; }
.field label { font-family: var(--ff-display); font-weight:600; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color: var(--ink); }
.field input, .field textarea, .field select { padding:.9em 1.1em; border-radius: var(--r-sm); border:1.5px solid var(--line-strong); background: var(--bone); font:inherit; color: var(--ink); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--red); box-shadow: var(--ring); outline:none; }
.field textarea { min-height:160px; resize:vertical; }
.formcard { background: var(--bone); border:1px solid var(--line); border-radius: var(--r-md); padding: clamp(24px,4vw,46px); }
.form-note { font-size:.84rem; color: var(--muted); }
.form-msg { display:none; margin-top:1rem; padding:.9em 1.1em; border-radius: var(--r-sm); font-size:.9rem; }
.form-msg.show { display:block; }
.form-msg--ok { background: rgba(245,182,43,.22); color:#7a5a08; }
.form-msg--err { background: rgba(229,64,42,.16); color: var(--red-deep); }

/* ---------- prose (legal / articles) ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-size:1.6rem; margin-top:2.6rem; text-transform:none; letter-spacing:-.02em; }
.prose h3 { font-size:1.2rem; margin-top:1.6rem; }
.prose p, .prose li { color:#423b32; }
.prose ul { margin:1rem 0; display:grid; gap:.5rem; }
.prose ul li { position:relative; padding-left:1.4rem; }
.prose ul li::before { content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; background: var(--red); }
.prose a { color: var(--red); text-decoration:underline; text-underline-offset:3px; }
.prose hr { border:0; height:1px; background: var(--line); margin:2.2rem 0; }
.toc { background: var(--bone); border:1px solid var(--line); border-radius: var(--r-md); padding:22px 24px; position:sticky; top:110px; }
.toc h4 { margin-bottom:.6rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color: var(--red); }
.toc a { display:block; padding:.32rem 0; font-size:.92rem; color: var(--ink); }
.toc a:hover { color: var(--red); }

/* contrast fix: checklists/light text inside dark panels */
.panel--red .checks li, .panel--char .checks li { color: rgba(250,246,240,.86); }
.panel--red .checks li svg, .panel--char .checks li svg { color: var(--yellow); }
.panel--red .index-num, .panel--char .index-num { color: var(--yellow); }