/* ---- Midnight marquee: scoped to .hd-page so it can't leak site-wide ---- */
/* Shared by home_details.php, movie-details.php, and movie-detail.php so
   all three post types (Landing Page, curated movie, live TMDB lookup)
   share one design - edit here once instead of drifting per-file copies. */
.hd-page {
    --bg: #0c0a08; --surface: #17130f; --surface-2: #1f1912;
    --text: #f3ede2; --text-dim: #ab9d8c; --text-faint: #786b5c;
    --accent: #e2a13d; --accent-soft: #e2a13d33; --accent-2: #7d2233;
    --line: rgba(226, 161, 61, 0.16); --shadow: rgba(0, 0, 0, 0.5);

    background: var(--bg); color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    max-width: 1180px; margin: 120px auto 60px; padding: 0 24px;
    animation: hdFadeIn .8s ease;
    overflow-x: hidden;
}
/* Safety net: admin-entered content (cast lists, descriptions) can
   contain long unbroken strings (pasted HTML, raw URLs). One such
   string can force the whole page wider than the viewport on mobile,
   which breaks every media query below it - so every text container
   gets a hard wrap rule regardless of what the data looks like. */
.hd-page *{box-sizing:border-box; min-width:0}
.hd-page p, .hd-page span, .hd-page li, .hd-page div {
    overflow-wrap: anywhere;
}
@keyframes hdFadeIn { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }

.hd-display {
    font-family: "Archivo Black", "Arial Narrow", Impact, sans-serif;
    font-stretch: condensed; text-transform: uppercase;
    letter-spacing: -0.01em; text-wrap: balance; font-weight: 400;
}
.hd-eyebrow {
    font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-dim); font-weight: 600;
}

.hd-hero { display: grid; grid-template-columns: 340px 1fr; gap: 44px; padding-bottom: 40px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.hd-poster-frame { position: relative; border-radius: 4px; overflow: hidden; box-shadow: 0 30px 60px -20px var(--shadow); }
.hd-poster-frame::before { content: ""; position: absolute; inset: -40px; z-index: 0; background: radial-gradient(closest-side, var(--accent-soft), transparent 70%); filter: blur(6px); }
.hd-poster-frame img { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 2/3; object-fit: cover; }

.hd-hero-body { display: flex; flex-direction: column; min-width: 0; }
.hd-tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.hd-tag { border: 1px solid var(--line); color: var(--text-dim); font-size: 0.78rem; padding: 4px 10px; border-radius: 2px; letter-spacing: 0.02em; }
.hd-tag.hd-age { border-color: var(--accent-2); color: var(--accent-2); font-weight: 700; }

.hd-title { font-size: 3.2rem; line-height: 0.96; margin: 0 0 14px; color: var(--text); }

.hd-fact-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin-bottom: 26px; }
.hd-fact { background: var(--surface); padding: 14px 16px; }
.hd-fact .hd-eyebrow { margin-bottom: 4px; display: block; }
.hd-fact .hd-value { font-weight: 700; font-size: 1.02rem; font-variant-numeric: tabular-nums; word-break: break-word; }

.hd-score-row { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.hd-score-copy .hd-eyebrow { margin-bottom: 2px; }
.hd-score-copy .hd-line { font-weight: 600; }

.hd-highlight { background: var(--surface); border-left: 3px solid var(--accent); padding: 16px 20px; border-radius: 0 4px 4px 0; color: var(--text-dim); font-size: 0.98rem; margin-top: auto; }
.hd-highlight b { color: var(--text); }

.hd-section { max-width: 720px; margin: 0 auto 48px; }
.hd-section-title { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 14px; }
.hd-section p { color: var(--text-dim); font-size: 1.02rem; margin: 0; white-space: pre-line; }

.hd-trailer-wrap { max-width: 900px; margin: 0 auto 56px; }
.hd-trailer-frame { position: relative; aspect-ratio: 16/9; background: var(--surface-2); border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.hd-trailer-frame video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.hd-trailer-frame iframe { width: 100%; height: 100%; border: 0; }

.hd-two-col { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; max-width: 960px; margin: 0 auto 56px; }
.hd-cast-list { list-style: none; margin: 0; padding: 0; }
.hd-cast-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.96rem; }
.hd-cast-list li:last-child { border-bottom: none; }
.hd-cast-list .hd-cast-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hd-cast-list .hd-cast-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hd-cast-list .hd-actor { font-weight: 600; }
.hd-cast-list .hd-role { color: var(--text-dim); }

.hd-side-block { margin-bottom: 26px; }
.hd-side-block:last-child { margin-bottom: 0; }
.hd-side-block .hd-section-title { font-size: 0.72rem; }
.hd-side-block p { font-size: 0.92rem; color: var(--text-dim); white-space: pre-line; }
.hd-watch-status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-faint); border: 1px dashed var(--line); padding: 8px 12px; border-radius: 4px; }

.hd-watch-group { margin-bottom: 14px; }
.hd-watch-group:last-child { margin-bottom: 0; }
.hd-watch-label { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.hd-watch-providers { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-provider { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); font-size: 0.65rem; color: var(--text-dim); text-align: center; }
.hd-provider img { width: 100%; height: 100%; object-fit: cover; }

.hd-full-story { max-width: 960px; margin: 0 auto 48px; }

.hd-similar { margin-bottom: 48px; }
.hd-carousel { position: relative; display: flex; align-items: center; gap: 10px; }
.hd-carousel-arrow { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .15s; }
.hd-carousel-arrow:hover { border-color: var(--accent); color: var(--accent); }
.hd-similar-track { flex: 1; min-width: 0; display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: thin; scroll-behavior: smooth; }
.hd-similar-card { flex: 0 0 150px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--text); transition: transform .15s ease; }
.hd-similar-card:hover { transform: translateY(-4px); }
.hd-similar-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); }
.hd-similar-info { display: flex; flex-direction: column; gap: 2px; }
.hd-similar-title { font-size: 0.88rem; font-weight: 600; line-height: 1.25; }
.hd-similar-score { font-size: 0.78rem; color: var(--accent); font-weight: 700; }

.hd-moods { margin-bottom: 48px; }
.hd-mood-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hd-mood-pill { border: 1px solid var(--line); color: var(--text-dim); font-size: 0.85rem; padding: 8px 16px; border-radius: 20px; text-decoration: none; transition: .15s; }
.hd-mood-pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.hd-reviews { margin-bottom: 48px; }
.hd-review-score-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.hd-score-ring { position: relative; width: 56px; height: 56px; flex: 0 0 auto; }
.hd-score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hd-score-ring circle { fill: none; stroke-width: 4; }
.hd-score-ring .hd-ring-bg { stroke: var(--line); }
.hd-score-ring .hd-ring-fg { stroke-dasharray: 119.4; stroke-dashoffset: calc(119.4 - (119.4 * var(--pct) / 100)); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.hd-score-ring.hd-good .hd-ring-fg { stroke: #3ba55d; }
.hd-score-ring.hd-mid .hd-ring-fg { stroke: var(--accent); }
.hd-score-ring.hd-low .hd-ring-fg { stroke: var(--accent-2); }
.hd-score-ring .hd-ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: var(--text); }
.hd-score-copy { display: flex; flex-direction: column; }
.hd-score-copy strong { font-size: 0.95rem; color: var(--text); }
.hd-score-copy span { font-size: 0.8rem; color: var(--text-dim); }
.hd-leave-review-btn { margin-left: auto; background: var(--accent); color: #1a1200; border: 0; border-radius: 20px; padding: 10px 18px; font-weight: 600; cursor: pointer; }
.hd-leave-review-btn:hover { opacity: 0.9; }
.hd-review-item { border-top: 1px solid var(--line); padding: 12px 0; }
.hd-review-item p { color: var(--text-dim); margin-top: 4px; }
.hd-text-faint { color: var(--text-faint); }
.hd-review-form { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; max-width: 500px; }
.hd-review-form select, .hd-review-form input[type=text], .hd-review-form textarea { padding: 8px; background: var(--surface); border: 1px solid var(--line); color: var(--text); border-radius: 4px; }
.hd-review-form button[type=submit] { background: var(--accent); color: #1a1200; border: 0; border-radius: 4px; padding: 10px; font-weight: 600; cursor: pointer; }
.hd-website-field { position: absolute; left: -9999px; }

.hd-note { max-width: 720px; margin: 0 auto 48px; font-size: 0.88rem; color: var(--text-faint); text-align: center; }

.hd-share-row { max-width: 720px; margin: 0 auto; padding-top: 32px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.hd-share-row .hd-eyebrow { margin: 0; }
.hd-icon-row { display: flex; gap: 10px; }
.hd-icon-row a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--text-dim); text-decoration: none; font-size: 1rem; transition: .15s; }
.hd-icon-row a:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 820px) {
    .hd-page{margin-top:100px}
    .hd-hero { grid-template-columns: 1fr; }
    .hd-poster-frame { max-width: 280px; margin: 0 auto; }
    .hd-title, .hd-tag-row { text-align: center; }
    .hd-title { font-size: 2.4rem; }
    .hd-tag-row { justify-content: center; }
    .hd-fact-strip { grid-template-columns: repeat(2, 1fr); }
    .hd-score-row { justify-content: center; }
    .hd-two-col { grid-template-columns: 1fr; }
    .hd-carousel-arrow { display: none; }
}