/* =====================================================================
   QuickHoop public landing — "Golden Hour".
   Ported from wireframe/candidates/09-golden-hour.html into the live SPA.

   EVERYTHING is scoped under .lpg so the generic class names never collide
   with app.css or the Streetball landing (.lp). Surface/text tokens follow
   the app's dark/light theme; the warm brand accents + the sunset hero scene
   stay warm in both. Shown by Landing.razor when data-skin="golden".
   ===================================================================== */

.lpg {
    /* warm brand + type + geometry (theme-independent) */
    --coral: #ec6a45;
    --terra: #c14e2c;
    --amber: #f4a23a;
    --gold-deep: #d98a1f;
    --peach: #ffe3c2;
    --rose: #e7a48d;
    --disp: 'Instrument Serif', Georgia, serif;
    --body: 'Hanken Grotesk', system-ui, sans-serif;
    --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
    --radius: 22px; --radius-sm: 16px; --pill: 999px;
    --maxw: 1180px;

    /* break out of the centered .container to full viewport width (mirrors .lp) */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: -1.5rem;
    margin-bottom: -1.5rem;
    overflow-x: hidden;

    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 1.05rem;
    line-height: 1.62;
}

/* Surface / text tokens follow the dark / light theme. */
[data-bs-theme="light"] .lpg, .lpg {
    --paper: #fbf3e8;
    --paper-2: #fffaf2;
    --paper-3: #f3e7d3;
    --ink: #3d2b21;
    --ink-soft: #806551;
    --line: rgba(61, 43, 33, .12);
    --line-strong: rgba(61, 43, 33, .2);
    --accent-text: #c14e2c;
    --shadow: 0 24px 60px -28px rgba(193, 78, 44, .5);
    --shadow-sm: 0 14px 32px -18px rgba(193, 78, 44, .45);
}
[data-bs-theme="dark"] .lpg {
    --paper: #241a14;
    --paper-2: #2f231b;
    --paper-3: #3a2c22;
    --ink: #f4e8d8;
    --ink-soft: #bda892;
    --line: rgba(244, 232, 216, .12);
    --line-strong: rgba(244, 232, 216, .2);
    --accent-text: #f2855f;
    --shadow: 0 24px 60px -28px rgba(0, 0, 0, .6);
    --shadow-sm: 0 14px 32px -18px rgba(0, 0, 0, .5);
}

.lpg *, .lpg *::before, .lpg *::after { box-sizing: border-box; }
.lpg a { color: inherit; text-decoration: none; }
.lpg ul { margin: 0; padding: 0; list-style: none; }
.lpg svg { display: block; max-width: 100%; }
.lpg img { max-width: 100%; }
.lpg a:focus-visible, .lpg button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 8px; }

.lpg .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }

/* ---------- type ---------- */
.lpg .disp { font-family: var(--disp); font-weight: 400; line-height: 1.0; letter-spacing: .005em; margin: 0; }
.lpg .it { font-style: italic; }
.lpg .grad { background: linear-gradient(95deg, var(--coral), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lpg .eyebrow {
    font-family: var(--body); font-weight: 700; font-size: .74rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--terra);
    display: inline-flex; align-items: center; gap: 10px;
}
[data-bs-theme="dark"] .lpg .eyebrow { color: var(--amber); }
.lpg .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--coral); border-radius: 2px; }
.lpg .section-head { max-width: 640px; margin: 0 auto var(--s-7); text-align: center; }
.lpg .section-head .eyebrow { justify-content: center; margin-bottom: 12px; }
.lpg .section-head h2 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); }
.lpg .section-head p { color: var(--ink-soft); font-size: 1.1rem; margin: 14px 0 0; }

/* ---------- buttons ---------- */
.lpg .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    font-family: var(--body); font-weight: 700; font-size: .98rem;
    padding: .92rem 1.6rem; border-radius: var(--pill); border: 1.5px solid transparent;
    cursor: pointer; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.lpg .btn svg { width: 17px; height: 17px; }
.lpg .btn-solid { background: linear-gradient(120deg, var(--coral), var(--terra)); color: #fff6ee; box-shadow: var(--shadow-sm); }
.lpg .btn-solid:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -20px rgba(193, 78, 44, .7); }
.lpg .btn-soft { background: var(--paper-2); color: var(--ink); border-color: var(--line-strong); }
.lpg .btn-soft:hover { transform: translateY(-3px); border-color: var(--coral); color: var(--accent-text); }
.lpg .btn-sm { padding: .62rem 1.1rem; font-size: .86rem; }

/* ---------- hero ---------- */
.lpg .hero { padding: var(--s-7) 0 var(--s-6); }
.lpg .hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 50px; align-items: center; }
.lpg .hero-copy h1 { font-size: clamp(3.2rem, 7.5vw, 5.8rem); }
.lpg .hero-copy .eyebrow { margin-bottom: 18px; }
.lpg .standfirst { font-size: 1.2rem; color: var(--ink-soft); max-width: 36ch; margin: 22px 0 28px; }
.lpg .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.lpg .hero-foot { margin-top: 28px; display: flex; align-items: center; gap: 14px; color: var(--ink-soft); font-size: .94rem; }
.lpg .avs { display: flex; }
.lpg .avs span { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--paper); margin-left: -10px; box-shadow: var(--shadow-sm); }
.lpg .avs span:first-child { margin-left: 0; }

/* sunset scene (always warm, both themes) */
.lpg .scene { position: relative; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow);
    aspect-ratio: 1 / .92; background: linear-gradient(180deg, #ffd9a0 0%, #ffb877 34%, #f48a55 64%, #e2693f 100%); }
.lpg .scene .sun { position: absolute; left: 50%; top: 46%; width: 42%; aspect-ratio: 1; transform: translate(-50%, -50%);
    border-radius: 50%; background: radial-gradient(circle, #fff3cf 0%, #ffd877 45%, #fcb24f 100%);
    box-shadow: 0 0 80px 30px rgba(255, 221, 140, .7); animation: lpg-rise 7s ease-in-out infinite; }
@keyframes lpg-rise { 0%, 100% { transform: translate(-50%, -48%); } 50% { transform: translate(-50%, -54%); } }
.lpg .scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lpg .scene .tag { position: absolute; left: 18px; bottom: 16px; z-index: 3; font-family: var(--body); font-weight: 700;
    font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #fff3e6;
    background: rgba(61, 43, 33, .32); backdrop-filter: blur(4px); padding: .4rem .8rem; border-radius: var(--pill); }
.lpg .scene .chip { position: absolute; right: 16px; top: 16px; z-index: 3; background: var(--paper-2);
    border-radius: var(--radius-sm); padding: 11px 15px; box-shadow: var(--shadow-sm); }
.lpg .scene .chip .s { font-family: var(--disp); font-size: 1.6rem; line-height: 1; color: var(--terra); }
[data-bs-theme="dark"] .lpg .scene .chip .s { color: var(--coral); }
.lpg .scene .chip .l { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 3px; }

/* ---------- stats band ---------- */
.lpg .stats { padding: 0 0 var(--s-6); }
.lpg .stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lpg .stat { background: var(--paper-2); border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--shadow-sm); text-align: center; }
.lpg .stat .num { font-family: var(--disp); font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: .9; color: var(--coral); }
.lpg .stat:nth-child(2) .num { color: var(--amber); }
.lpg .stat:nth-child(3) .num { color: var(--terra); }
.lpg .stat:nth-child(4) .num { color: var(--coral); }
[data-bs-theme="dark"] .lpg .stat:nth-child(3) .num { color: var(--rose); }
.lpg .stat .label { font-weight: 600; color: var(--ink-soft); font-size: .92rem; margin-top: 8px; }

/* ---------- section ---------- */
.lpg .block { padding: var(--s-8) 0; }
.lpg .tonight-band { background: var(--paper-3); }

/* steps */
.lpg .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.lpg .step { background: var(--paper-2); border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.lpg .step:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.lpg .step .ico { width: 54px; height: 54px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
    background: linear-gradient(135deg, var(--peach), #ffd1a6); color: var(--terra); }
.lpg .step:nth-child(2) .ico { background: linear-gradient(135deg, #ffe0b0, var(--amber)); color: #7a3d12; }
.lpg .step:nth-child(3) .ico { background: linear-gradient(135deg, #ffd2c0, var(--coral)); color: #fff3ee; }
.lpg .step:nth-child(4) .ico { background: linear-gradient(135deg, #f6c9b3, var(--rose)); color: #6e2f1a; }
.lpg .step .ico svg { width: 26px; height: 26px; }
.lpg .step .k { font-family: var(--disp); font-size: 1.3rem; color: var(--terra); }
[data-bs-theme="dark"] .lpg .step .k { color: var(--amber); }
.lpg .step h3 { font-size: 1.28rem; font-weight: 800; margin: 2px 0 8px; letter-spacing: -.01em; }
.lpg .step p { margin: 0; color: var(--ink-soft); font-size: .97rem; }

/* ---------- tonight / standings ---------- */
.lpg .tn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.lpg .panel-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.lpg .panel-h h3 { font-family: var(--disp); font-size: 1.9rem; margin: 0; }
.lpg .panel-h .lk { font-weight: 700; color: var(--terra); font-size: .9rem; }
[data-bs-theme="dark"] .lpg .panel-h .lk { color: var(--amber); }
.lpg .runs { display: flex; flex-direction: column; gap: 14px; }
.lpg .run { display: flex; align-items: center; gap: 16px; background: var(--paper-2); border-radius: var(--radius-sm); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.lpg .run .when { flex: none; text-align: center; width: 58px; }
.lpg .run .when .d { font-family: var(--disp); font-size: 1.5rem; line-height: .9; color: var(--coral); }
.lpg .run .when .t { font-size: .72rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.lpg .run .info { flex: 1; min-width: 0; }
.lpg .run .info b { font-size: 1.05rem; font-weight: 800; display: block; letter-spacing: -.01em; }
.lpg .run .info span { font-size: .88rem; color: var(--ink-soft); }
.lpg .run .spots { flex: none; font-weight: 700; font-size: .82rem; color: var(--terra); background: rgba(244, 162, 58, .22); padding: .3rem .7rem; border-radius: var(--pill); }
[data-bs-theme="dark"] .lpg .run .spots { color: var(--amber); }

.lpg .ldr { background: var(--paper-2); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.lpg .ldr .lh { padding: 18px 22px; background: linear-gradient(120deg, var(--coral), var(--terra)); color: #fff4ec; display: flex; justify-content: space-between; align-items: center; }
.lpg .ldr .lh b { font-family: var(--disp); font-size: 1.45rem; font-weight: 400; }
.lpg .ldr .lh .live { font-weight: 700; font-size: .8rem; letter-spacing: .06em; }
.lpg table.t { width: 100%; border-collapse: collapse; }
.lpg table.t th, .lpg table.t td { padding: 13px 22px; text-align: center; font-weight: 600; }
.lpg table.t thead th { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.lpg table.t tbody tr { border-top: 1px solid var(--line); }
.lpg table.t th:first-child, .lpg table.t td:first-child { text-align: left; }
.lpg table.t .rk { font-family: var(--disp); font-size: 1.2rem; color: var(--ink-soft); margin-right: 10px; }
.lpg table.t tr.lead { background: rgba(244, 162, 58, .16); }
.lpg table.t tr.lead .rk { color: var(--coral); }
.lpg table.t .pos { color: var(--terra); font-weight: 800; }
[data-bs-theme="dark"] .lpg table.t .pos { color: var(--amber); }

/* ---------- closer ---------- */
.lpg .closer { position: relative; overflow: hidden; text-align: center; color: #fff4ea;
    background: linear-gradient(180deg, #ffc488 0%, #f3884f 45%, #cf5a31 100%); }
.lpg .closer::before { content: ""; position: absolute; left: 50%; top: 62%; width: 520px; height: 520px; transform: translate(-50%, -50%);
    border-radius: 50%; background: radial-gradient(circle, rgba(255, 239, 200, .85), rgba(255, 210, 140, 0) 62%); }
.lpg .closer .inner { position: relative; z-index: 2; padding: var(--s-8) 0; }
.lpg .closer .eyebrow { color: #5a2d18; justify-content: center; }
.lpg .closer .eyebrow::before { background: #5a2d18; }
.lpg .closer h2 { font-family: var(--disp); font-size: clamp(2.8rem, 8vw, 5.6rem); line-height: .98; margin: 8px 0 12px; }
.lpg .closer p { max-width: 44ch; margin: 0 auto 28px; font-size: 1.14rem; color: #fff1e2; }
.lpg .closer .btn-soft { background: var(--paper-2); color: var(--terra); border-color: transparent; }
.lpg .closer .btn-ghost { background: rgba(61, 43, 33, .18); color: #fff4ea; border: 1.5px solid rgba(255, 244, 234, .5); }
.lpg .closer .btn-ghost:hover { transform: translateY(-3px); background: rgba(61, 43, 33, .28); }

/* ---------- footer ---------- */
.lpg .site-foot { background: #2c2017; color: #e9d8c6; padding: var(--s-7) 0 var(--s-5); }
.lpg .foot-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 22px; padding-bottom: 24px; border-bottom: 1px solid rgba(233, 216, 198, .18); }
.lpg .foot-brand .lpg-brand { font-family: var(--disp); font-size: 2.1rem; color: #fbf3e8; }
.lpg .foot-brand .lpg-brand .b { color: var(--amber); font-style: italic; }
.lpg .foot-brand p { max-width: 32ch; color: #c4ad97; margin: .5rem 0 0; }
.lpg .foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 28px; }
.lpg .foot-cols h4 { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin: 0 0 12px; }
.lpg .foot-cols a { display: block; padding: 5px 0; color: #d8c3ad; transition: color .15s ease, padding-left .15s ease; }
.lpg .foot-cols a:hover { color: #fbf3e8; padding-left: 5px; }
.lpg .colophon { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(233, 216, 198, .16); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .84rem; color: #b09a85; }

/* ---------- reveal ---------- */
.lpg .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.lpg .reveal.in { opacity: 1; transform: none; }

@media (max-width: 920px) {
    .lpg .hero-grid, .lpg .tn-grid { grid-template-columns: 1fr; gap: 30px; }
    .lpg .scene { order: -1; max-width: 440px; margin: 0 auto; }
    .lpg .stats .wrap { grid-template-columns: 1fr 1fr; }
    .lpg .steps { grid-template-columns: 1fr 1fr; }
    .lpg .foot-cols { grid-template-columns: 1fr 1fr; }
    .lpg .foot-top { flex-direction: column; }
}
@media (max-width: 560px) {
    .lpg .steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .lpg .scene .sun { animation: none; }
    .lpg .reveal { opacity: 1; transform: none; }
}