/* 90-foot Stone Decoder: page shell for /90-foot-stone-decoder (hero, parallax, sections).
   Same fixed-background hero as the Money Pit Map: the hero image stays put while the
   opaque body scrolls over it. The tool's own styles are in decoder.css. */

.c-sdp__hero {
    position: relative; z-index: 1; min-height: 44svh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: calc(var(--nav-height) + 32px) 20px 32px; overflow: hidden;
}
.c-sdp__hero-bg { position: absolute; inset: 0; z-index: 0; }
.c-sdp__hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.c-sdp__hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to bottom, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.7) 55%, rgba(10,10,10,1) 100%);
}
.c-sdp__hero > *:not(.c-sdp__hero-bg):not(.c-sdp__hero-overlay) { position: relative; z-index: 2; }
.c-sdp__hero-bg, .c-sdp__hero-overlay { position: fixed; inset: 0 0 auto 0; height: var(--hero-h, 44svh); }

/* Everything after the hero sits in full-width opaque blocks so the fixed hero
   never shows through the gaps; flow-root stops child margins collapsing through. */
.c-sdp__body, .c-sdp-tail { position: relative; z-index: 2; width: 100%; background: var(--bg-dark); display: flow-root; }

.c-sdp__label {
    display: block; color: var(--accent); text-transform: uppercase; letter-spacing: 3px;
    font-size: 0.75rem; font-family: var(--font-display); margin-bottom: 10px;
}
.c-sdp__title { font-size: clamp(2rem, 7.5vw, 3.6rem); color: #fff; text-shadow: var(--shadow-text); }

.c-sdp .c-briefing { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }
.c-sdp .c-briefing__inner { margin: 0; }

/* Copy above and below the tool: article typography from main.css */
.c-sdp__copy { padding-bottom: 0; }
.c-sdp__copy--body { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.c-sdp__copy h4 { margin: var(--space-md) 0 var(--space-sm); color: var(--text-muted); font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; }

/* The tool: wider than the reading column */
.c-sdp__tool { max-width: 1100px; margin: 0 auto; padding: var(--space-lg) 20px 0; scroll-margin-top: calc(var(--nav-height) + 12px); }
.c-sdp__h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); color: #fff; margin-bottom: 12px; }
.c-sdp__lede { color: var(--text-muted); max-width: 720px; margin-bottom: 24px; line-height: 1.7; }
.c-sdp__notice {
    border: 1px solid var(--border); background: var(--bg-card); border-radius: 10px;
    padding: 20px; color: var(--text-muted);
}

@media (max-width: 768px) {
    .c-sdp__hero { min-height: 36svh; }
    .c-sdp__hero-bg, .c-sdp__hero-overlay { height: var(--hero-h, 36svh); }
    .c-sdp__tool { padding: var(--space-md) 12px 0; }
}