/* ============================================
   homealt.css
   Third private home-page option (added 11/09/2026):
   a bento-grid card layout with a photo-mosaic background
   built from real collection tile images (the site owner
   hand-picked 250 of them via a review pass). Split into
   its own file rather than inline <style> in Home.cshtml
   on purpose — this project has a documented history (see
   DEVLOG, 19/08/2026) of Razor silently mis-rendering
   pages because of "@" or "<" characters inside inline
   <style>/comment blocks in a .cshtml file.
   Visit /Home?alt=true to see it; plain /Home stays the
   default ("New") card-directory page, /Home?classic=true
   the original shuffled-rows page. Temporary, same private
   A/B setup as the other two — remove this file together
   with the rest of the switch once a final design is chosen.
   Dark/light follow the site's own global theme toggle
   (body[data-theme]) exactly like homehub.css — there is no
   separate per-view theme switch.
   Card layout/colors ported from the validated design-canvas
   mockup (bento grid, 189/113/95/59/4/71 collection counts).
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@400;500;600&display=swap');

:root {
    /* Dark mode (default) — same orange/cream palette as homehub.css */
    --alt-bg: #140d09;
    --alt-card: #362619;
    --alt-card-feature: #3f2c1d;
    --alt-ghost-border: rgba(224, 149, 74, .38);
    --alt-ghost-bg: rgba(224, 149, 74, .06);
    --alt-orange-deep: #d2793c;
    --alt-orange: #e0954a;
    --alt-orange-light: #eeae6e;
    --alt-cream: #f3ecdd;
    --alt-muted: #a99a8a;

    /* Light mode — site's own brand gold, same values homehub.css uses
       for its light-mode card accent */
    --alt-light-bg: #f7f2ea;
    --alt-light-card: #c9a84c;
    --alt-light-heading: #2a2420;
    --alt-light-muted: #6b6258;
    --alt-light-deep: #a3762b;
    --alt-light-red: #b91c1c;
    --alt-light-ghost-border: rgba(163, 118, 43, .4);
}

body {
    background:
        radial-gradient(ellipse 70% 45% at 50% 0%, rgba(224, 149, 74, .16), transparent 60%),
        radial-gradient(ellipse 55% 35% at 85% 10%, rgba(210, 121, 60, .12), transparent 60%),
        var(--alt-bg);
    color: var(--alt-cream);
    font-family: 'DM Sans', sans-serif;
}

body[data-theme="light"] {
    background: var(--alt-light-bg);
    color: var(--alt-light-heading);
}

/* ── Photo-mosaic background — real collection tile thumbnails, tiled
   behind the page content. Fixed to the viewport (does not scroll with
   the page — matches how much of it repeats-to-fill on tall pages), sits
   behind everything (z-index:-1), never intercepts clicks. Opacity tuned
   for legibility against the intro text in the design-canvas mockup
   (dark 17% / light 19%) — same values, since CSS opacity on a photo
   layer over a solid background is mathematically identical to the
   alpha-blend used there. ── */
.mosaic-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    pointer-events: none;
    opacity: .17;
}

    .mosaic-bg img {
        width: 68px;
        height: 68px;
        object-fit: cover;
        border-radius: 7px;
        margin: 1.5px;
        flex: none;
    }

body[data-theme="light"] .mosaic-bg {
    opacity: .19;
}

.alt-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 40px 120px;
    position: relative;
}

.alt-eyebrow {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--alt-orange);
    margin: 0 0 18px;
}

body[data-theme="light"] .alt-eyebrow {
    color: var(--alt-light-deep);
}

.alt-intro-line {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.72rem;
    line-height: 1.45;
    color: var(--alt-cream);
    max-width: 640px;
    margin: 0 0 40px;
}

body[data-theme="light"] .alt-intro-line {
    color: var(--alt-light-heading);
}

.alt-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
}

.alt-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: var(--alt-card);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}

body[data-theme="light"] .alt-card {
    background: var(--alt-light-card);
    border: 1px solid rgba(0, 0, 0, .05);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
}

.alt-icon {
    color: var(--alt-orange);
}

    .alt-icon svg {
        display: block;
    }

body[data-theme="light"] .alt-icon {
    color: var(--alt-light-deep);
}

.alt-card--feature {
    grid-column: span 7;
    background: var(--alt-card-feature);
    padding: 44px 44px 38px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 326px;
}

body[data-theme="light"] .alt-card--feature {
    background: var(--alt-light-card);
}

.alt-card--feature.alt-c2 {
    grid-column: span 5;
}

.alt-card--feature .alt-icon {
    width: 34px;
    height: 34px;
    color: var(--alt-orange-light);
}

body[data-theme="light"] .alt-card--feature .alt-icon {
    color: var(--alt-light-deep);
}

.alt-card--feature .alt-icon svg {
    width: 34px;
    height: 34px;
}

.alt-card--feature::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 60%;
    height: 90%;
    background: radial-gradient(circle, rgba(224, 149, 74, .16), transparent 70%);
    pointer-events: none;
}

body[data-theme="light"] .alt-card--feature::after {
    background: radial-gradient(circle, rgba(163, 118, 43, .16), transparent 70%);
}

.alt-card--feature h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 2.05rem;
    margin: 22px 0 12px;
    color: var(--alt-cream);
    position: relative;
}

body[data-theme="light"] .alt-card--feature h2 {
    color: var(--alt-light-heading);
}

.alt-card--feature p {
    font-size: .98rem;
    line-height: 1.62;
    color: var(--alt-muted);
    max-width: 420px;
    margin: 0 0 30px;
    position: relative;
}

body[data-theme="light"] .alt-card--feature p {
    color: var(--alt-light-muted);
}

.alt-stat-row {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    position: relative;
}

.alt-stat-num {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 3.1rem;
    line-height: 1;
    color: var(--alt-cream);
}

body[data-theme="light"] .alt-stat-num {
    color: var(--alt-light-heading);
}

.alt-stat-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 6px;
}

.alt-stat-label {
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--alt-muted);
}

body[data-theme="light"] .alt-stat-label {
    color: var(--alt-light-muted);
}

.alt-stat-arrow {
    width: 16px;
    height: 16px;
    color: var(--alt-orange-light);
}

body[data-theme="light"] .alt-stat-arrow {
    color: var(--alt-light-deep);
}

.alt-card--medium {
    grid-column: span 4;
    padding: 34px 32px;
    min-height: 224px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.alt-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.alt-card--medium .alt-icon {
    width: 22px;
    height: 22px;
}

.alt-card--medium .alt-icon svg {
    width: 22px;
    height: 22px;
}

.alt-card--medium h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0;
    color: var(--alt-cream);
}

body[data-theme="light"] .alt-card--medium h3 {
    color: var(--alt-light-heading);
}

.alt-card--medium p {
    font-size: .9rem;
    line-height: 1.58;
    color: var(--alt-muted);
    margin: 0 0 22px;
}

body[data-theme="light"] .alt-card--medium p {
    color: var(--alt-light-muted);
}

.alt-count-row {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.alt-count-num {
    font-weight: 600;
    font-size: 1rem;
    color: var(--alt-orange);
}

body[data-theme="light"] .alt-count-num {
    color: var(--alt-light-red);
}

.alt-count-label {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--alt-muted);
}

body[data-theme="light"] .alt-count-label {
    color: var(--alt-light-muted);
}

.alt-count-arrow {
    width: 13px;
    height: 13px;
    color: var(--alt-orange);
    margin-left: 2px;
}

body[data-theme="light"] .alt-count-arrow {
    color: var(--alt-light-red);
}

.alt-card--compact {
    grid-column: span 6;
    padding: 26px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 108px;
}

.alt-icon-badge {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(224, 149, 74, .1);
    display: flex;
    align-items: center;
    justify-content: center;
}

body[data-theme="light"] .alt-icon-badge {
    background: rgba(163, 118, 43, .14);
}

.alt-card--compact .alt-icon {
    width: 20px;
    height: 20px;
}

.alt-card--compact .alt-icon svg {
    width: 20px;
    height: 20px;
}

.alt-card-body {
    flex: 1;
    min-width: 0;
}

    .alt-card-body h4 {
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        font-size: 1.12rem;
        margin: 0 0 4px;
        color: var(--alt-cream);
    }

body[data-theme="light"] .alt-card-body h4 {
    color: var(--alt-light-heading);
}

.alt-card-body p {
    font-size: .82rem;
    line-height: 1.4;
    color: var(--alt-muted);
    margin: 0;
}

body[data-theme="light"] .alt-card-body p {
    color: var(--alt-light-muted);
}

.alt-cta {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--alt-orange);
    white-space: nowrap;
}

body[data-theme="light"] .alt-cta {
    color: var(--alt-light-red);
}

.alt-cta svg {
    width: 12px;
    height: 12px;
}

.alt-card--ghost {
    background: var(--alt-ghost-bg);
    border: 1.5px solid var(--alt-ghost-border);
    box-shadow: none;
}

body[data-theme="light"] .alt-card--ghost {
    background: var(--alt-light-bg);
    border: 1.5px solid var(--alt-light-ghost-border);
    box-shadow: none;
}

    body[data-theme="light"] .alt-card--ghost .alt-icon-badge {
        background: rgba(163, 118, 43, .08);
    }

    body[data-theme="light"] .alt-card--ghost .alt-cta {
        color: var(--alt-light-deep);
    }

@media (max-width: 900px) {
    .alt-wrap {
        padding: 20px 20px 70px;
    }

    .alt-intro-line {
        font-size: 1.32rem;
        margin-bottom: 30px;
    }

    .alt-bento {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .alt-card--feature, .alt-card--feature.alt-c2, .alt-card--medium, .alt-card--compact {
        grid-column: auto;
    }

    .alt-card--feature {
        min-height: 0;
        padding: 32px 28px 28px;
    }

    .alt-card--medium {
        min-height: 0;
        padding: 28px 24px;
    }

    .alt-card--compact {
        flex-wrap: wrap;
        padding: 22px 24px;
    }

        .alt-card--compact .alt-cta {
            margin-inline-start: 64px;
        }
}

/* ============================================
   Header — Home page ONLY, identical treatment to homehub.css
   (same orange palette, same "reset to native gold in light mode"
   pattern). _Layout.cshtml itself is not touched.
   ============================================ */
.header-quicklinks {
    gap: 26px;
}

.top-header {
    background: linear-gradient(90deg, #0d0700 0%, #1f1108 55%, #0d0700 100%);
}

.header-title {
    color: var(--alt-orange);
    text-shadow: 0 0 18px rgba(224, 149, 74, 0.55), 0 1px 3px rgba(0,0,0,0.9);
}

body[data-theme="light"] .header-title {
    color: #c9a84c;
}

.header-logo {
    border-color: var(--alt-orange);
    box-shadow: 0 0 10px rgba(224, 149, 74, 0.5);
}

body[data-theme="light"] .header-logo {
    border-color: #c9a84c;
    box-shadow: 0 0 10px rgba(201, 168, 76, 0.5);
}

.header-brand:hover .header-logo {
    box-shadow: 0 0 18px rgba(224, 149, 74, 0.8);
}

body[data-theme="light"] .header-brand:hover .header-logo {
    box-shadow: 0 0 18px rgba(201, 168, 76, 0.8);
}

.header-quicklink {
    background: none;
    border: none;
    padding: 4px 0;
    border-radius: 0;
    color: var(--alt-muted);
    font-weight: 400;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

    .header-quicklink:hover {
        background: none;
        color: var(--alt-orange);
    }

body[data-theme="light"] .header-quicklink {
    background: none;
    border: none;
    color: #a07830;
}

    body[data-theme="light"] .header-quicklink:hover {
        background: none;
        color: #c9a84c;
    }

#theme-toggle-btn {
    color: var(--alt-orange);
    border-color: rgba(224, 149, 74, 0.4);
}

    #theme-toggle-btn:hover {
        background: rgba(224, 149, 74, 0.1);
        border-color: rgba(224, 149, 74, 0.7);
    }

body[data-theme="light"] #theme-toggle-btn {
    color: #c9a84c;
    border-color: rgba(201, 168, 76, 0.4);
}

    body[data-theme="light"] #theme-toggle-btn:hover {
        background: rgba(201, 168, 76, 0.1);
        border-color: rgba(201, 168, 76, 0.7);
    }

@media (max-width: 600px) {
    .header-quicklinks {
        gap: 16px;
    }

    .header-quicklink {
        font-size: 0.74rem;
        padding: 4px 0;
    }

    .theme-toggle-mobile {
        color: var(--alt-orange);
        border-color: rgba(224, 149, 74, 0.4);
    }
}

body[data-theme="light"] .theme-toggle-mobile {
    color: #c9a84c;
    border-color: rgba(201, 168, 76, 0.4);
}

/* ── Shared switch-button row, IDENTICAL (same max-width/padding) in
   homehub.css / homeswitch-classic.css / homealt.css — added 12/09/2026
   to fix a real bug: the button used to live inside each view's own
   content container (.hub-container 720px / .home-container full-width /
   .alt-wrap 1200px), so on desktop it visibly jumped to a different
   screen position every time you switched views, since each container
   centers at a different width. Now it sits in this separate wrapper,
   OUTSIDE .alt-wrap, positioned identically across all three views
   regardless of what's below it. ── */
.view-switch-row {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 40px 0;
}

/* ── New/Classic/Alt view switch button — same in-flow pill pattern as
   .hub-switch-btn / .hub-switch-btn-classic (never position:fixed — see
   10/09/2026 note about collisions with scrolling row controls and the
   floating continuity player). Cycle: New → Classic → Alt → New. Top
   margin removed (12/09/2026) — .view-switch-row's own padding-top now
   provides that spacing, identically across all three views. ── */
.alt-switch-btn {
    display: flex;
    width: fit-content;
    margin: 0 0 24px auto;
    align-items: center;
    gap: 6px;
    background: rgba(10, 8, 6, 0.85);
    border: 1px solid rgba(224, 149, 74, 0.45);
    color: var(--alt-orange);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 500;
    text-decoration: none;
    font-family: 'DM Sans', Arial, sans-serif;
    backdrop-filter: blur(6px);
    transition: background 0.2s, border-color 0.2s;
}

    .alt-switch-btn:hover {
        background: rgba(224, 149, 74, 0.15);
        border-color: var(--alt-orange);
    }

body[data-theme="light"] .alt-switch-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(201, 168, 76, 0.4);
    color: #a3762b;
}

    body[data-theme="light"] .alt-switch-btn:hover {
        background: rgba(201, 168, 76, 0.1);
        border-color: #c9a84c;
    }

@media (max-width: 900px) {
    .view-switch-row {
        padding: 16px 20px 0;
    }
}

/* Desktop switch button now lives once, in the shared header
   (_Layout.cshtml, .view-switch-header-btn) — guaranteed identical
   position across all three views, added 12/09/2026 after the
   per-view in-flow copies (pixel-identical on paper, in three
   separately-loaded files) still wasn't landing the same in practice.
   This in-flow button stays for mobile only; the header version is
   hidden below 601px instead. */
@media (min-width: 601px) {
    .view-switch-row {
        display: none;
    }
}