/* ===========================================================
   HALL OF FAME HERO
===========================================================*/

.hof-hero{
    position:relative;
    min-height:320px;
    overflow:hidden;

    background:
    linear-gradient(
        90deg,
        rgba(6,10,20,.95) 0%,
        rgba(6,10,20,.82) 30%,
        rgba(6,10,20,.35) 60%,
        transparent 100%
    ),
    url("../images/hero/Hall\ of\ Fame\ banner.webp");

    background-repeat:no-repeat;
    background-size:cover;
    background-position:center 45%;
}

.hof-hero>.container{
    position:relative;
    z-index:5;
    width:100%;
    max-width:1320px;
    margin:auto;
    padding:var(--space-6) 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
}

.hof-hero-copy h1{
    font-size:3rem;
    font-weight:800;
    letter-spacing:1px;
    line-height:1.05;
    background:linear-gradient(90deg, #F5D68A, var(--color-gold));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    margin-bottom:4px;
}

.hof-hero-copy .subtitle{
    color:var(--color-text);
    font-weight:700;
    font-size:1rem;
    letter-spacing:0.3em;
    margin-bottom:var(--space-3);
}

.hof-hero-copy .tagline{
    font-size:0.95rem;
    color:#C7CCD8;
    max-width:460px;
    line-height:1.5;
}

.hof-hero-vertical{
    flex-shrink:0;
    text-align:right;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.hof-hero-vertical span{
    font-size:var(--fs-tiny);
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:#8A93A6;
    font-weight:600;
}

/* ===========================================================
   QUICK NAV — scrolls to each section (all sections stay in
   the DOM/visible at once; this is NOT a hide/show tab set
   like tabs.js elsewhere on the site).
===========================================================*/

.hof-nav-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    flex-wrap:wrap;
    margin-top:var(--space-6);
}

.hof-nav{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    flex:1 1 auto;
    overflow-x:auto;
}

.hof-nav-btn{
    display:flex;
    align-items:center;
    gap:8px;
    padding:var(--space-3) var(--space-4);
    border-radius:var(--radius-md);
    border:1px solid var(--color-border);
    background:var(--color-surface);
    color:var(--color-text-muted);
    font-size:var(--fs-small);
    font-weight:var(--fw-medium);
    white-space:nowrap;
    cursor:pointer;
    text-transform:uppercase;
    letter-spacing:0.02em;
}

.hof-nav-btn.active{
    background:linear-gradient(90deg, var(--color-gold), #F5D68A);
    color:#1A1305;
    border-color:transparent;
    font-weight:var(--fw-bold);
}

.hof-season-select{
    width:auto;
    flex-shrink:0;
    padding:10px var(--space-4);
}

/* ===========================================================
   SECTION HEADERS (shared by all 4 sections)
===========================================================*/

.hof-section{
    margin-top:var(--space-7);
    scroll-margin-top:100px;
}

.hof-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin-bottom:var(--space-5);
}

.hof-section-head h2{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:1.3rem;
    margin-bottom:2px;
}

.hof-section-head p{
    color:var(--color-text-muted);
    font-size:var(--fs-small);
}

.hof-section-head .card-link{
    flex-shrink:0;
}

/* ===========================================================
   LEGENDARY PLAYERS — horizontal carousel (deliberate swipe/
   scroll UI with nav arrows, unlike an accidental overflow)
===========================================================*/

.legend-carousel{
    position:relative;
}

.legend-track{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:var(--space-4);
    padding-bottom:4px;
}

.legend-card{
    scroll-snap-align:start;
    flex:0 0 220px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-4);
    position:relative;
}

.legend-rank{
    font-size:2rem;
    font-weight:800;
    color:var(--color-gold);
    font-family:var(--font-mono);
    line-height:1;
    margin-bottom:var(--space-3);
}

.legend-photo{
    position:relative;
    width:100%;
    height:120px;
    border-radius:var(--radius-md);
    background:linear-gradient(150deg, var(--color-surface-alt), rgba(0,0,0,.3));
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:var(--space-3);
}

.legend-photo .avatar-lg{
    width:64px;
    height:64px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:1.2rem;
    color:#fff;
}

.legend-photo .crest-badge{
    position:absolute;
    bottom:-8px;
    right:-8px;
    margin:0;
    width:32px;
    height:32px;
    font-size:10px;
    border:2px solid var(--color-bg);
}

.legend-card .name{
    font-weight:700;
    font-size:1.05rem;
}

.legend-card .title{
    font-style:italic;
    font-size:var(--fs-small);
    color:var(--color-gold);
    margin-bottom:var(--space-3);
}

.legend-stats{
    display:flex;
    justify-content:space-between;
    border-top:1px solid var(--color-border);
    border-bottom:1px solid var(--color-border);
    padding:var(--space-3) 0;
    margin-bottom:var(--space-3);
}

.legend-stats div{
    text-align:center;
}

.legend-stats .value{
    display:block;
    font-weight:700;
    font-family:var(--font-mono);
}

.legend-stats .label{
    font-size:var(--fs-tiny);
    color:var(--color-text-faint);
    text-transform:uppercase;
}

.legend-years{
    display:inline-block;
    background:rgba(232,170,61,0.15);
    color:var(--color-gold);
    font-size:var(--fs-tiny);
    font-weight:600;
    padding:4px 10px;
    border-radius:var(--radius-sm);
}

.legend-nav{
    /* Hidden by default — desktop uses a 5-column grid that always
       fills the row exactly, so there's nothing to scroll. Only shown
       again at the breakpoint below where the track switches to a
       scrollable carousel. */
    display:none;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    color:var(--color-text);
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:3;
}

.legend-nav.prev{ left:-14px; }
.legend-nav.next{ right:-14px; }

/* ===========================================================
   ICONIC TEAMS + MEMORABLE MOMENTS — side-by-side sections
===========================================================*/

.hof-two-col{
    display:grid;
    grid-template-columns:1fr 1.6fr;
    gap:var(--space-5);
    align-items:stretch;
    margin-top:var(--space-7);
}

.hof-two-col>.hof-section{
    margin-top:0;
    display:flex;
    flex-direction:column;
}

.iconic-teams-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    grid-auto-rows:1fr;
    flex:1;
    gap:var(--space-4);
}

.iconic-team-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-4);
}

.iconic-team-card .crest-badge{
    margin:0 auto var(--space-3);
    width:52px;
    height:52px;
}

.iconic-team-card .name{
    font-weight:700;
    margin-bottom:8px;
}

.iconic-team-card .value{
    font-size:1.4rem;
    font-weight:800;
    font-family:var(--font-mono);
    color:var(--color-gold);
}

.iconic-team-card .label{
    font-size:var(--fs-tiny);
    color:var(--color-text-faint);
    text-transform:uppercase;
    margin-bottom:6px;
}

.iconic-team-card .years{
    font-size:var(--fs-tiny);
    color:var(--color-gold);
    font-weight:600;
}

.moments-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    grid-auto-rows:1fr;
    flex:1;
    gap:var(--space-4);
}

.moment-card{
    display:flex;
    flex-direction:column;
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    overflow:hidden;
}

.moment-thumb{
    position:relative;
    flex:1;
    min-height:110px;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.35) 0, rgba(255,255,255,0.35) 2px, transparent 3px),
        radial-gradient(circle at 85% 15%, rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 2px, transparent 3px),
        radial-gradient(circle at 65% 75%, rgba(255,255,255,0.2) 0, rgba(255,255,255,0.2) 2px, transparent 3px),
        radial-gradient(circle at 30% 80%, rgba(255,255,255,0.15) 0, rgba(255,255,255,0.15) 2px, transparent 3px),
        radial-gradient(circle at 90% 60%, rgba(255,255,255,0.2) 0, rgba(255,255,255,0.2) 2px, transparent 3px),
        radial-gradient(ellipse at 30% 100%, rgba(232,170,61,.35), transparent 60%),
        linear-gradient(135deg, rgba(232,170,61,.22), rgba(11,18,32,.92));
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.moment-thumb::after{
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(
        115deg,
        rgba(255,255,255,0.03) 0px,
        rgba(255,255,255,0.03) 1px,
        transparent 1px,
        transparent 5px
    );
}

.moment-thumb .play-btn{
    position:relative;
    z-index:2;
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(0,0,0,0.5);
    border:2px solid var(--color-gold);
    color:var(--color-gold);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
}

.moment-info{
    padding:var(--space-3) var(--space-4);
}

.moment-info .name{
    font-weight:600;
    font-size:var(--fs-small);
}

.moment-info .detail{
    font-size:var(--fs-tiny);
    color:var(--color-text-faint);
}

/* ===========================================================
   RECORD BREAKERS
===========================================================*/

.records-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:var(--space-4);
}

.hof-record-card{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-4);
}

.hof-record-card .icon{
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(232,170,61,0.15);
    color:var(--color-gold);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
    flex-shrink:0;
}

.hof-record-card .title{
    font-size:var(--fs-tiny);
    text-transform:uppercase;
    color:var(--color-text-muted);
    margin-bottom:2px;
}

.hof-record-card .value{
    font-size:1.15rem;
    font-weight:800;
    font-family:var(--font-mono);
}

.hof-record-card .holder{
    font-size:var(--fs-tiny);
    color:var(--color-text-faint);
}

.hof-no-match-note{
    grid-column:1 / -1;
    text-align:center;
    color:var(--color-text-muted);
    font-size:var(--fs-small);
    padding:var(--space-4);
}

/* ===========================================================
   BOTTOM PROMO BANNER
===========================================================*/

.hof-promo-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    margin-top:var(--space-7);
    padding:var(--space-6);
    border-radius:var(--radius-lg);
    background:linear-gradient(90deg, rgba(18,27,49,.97), rgba(58,44,12,.85));
    border:1px solid var(--color-border);
    text-align:center;
}

.hof-promo-banner h3{
    font-size:1.4rem;
    letter-spacing:0.03em;
    margin-bottom:6px;
}

.hof-promo-banner p{
    color:var(--color-gold);
    font-size:var(--fs-small);
    letter-spacing:0.15em;
    text-transform:uppercase;
}

.hof-promo-vertical{
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    gap:4px;
    font-style:italic;
    color:#D3D8E2;
    font-size:var(--fs-small);
}

/* ===========================================================
   RESPONSIVE
===========================================================*/

@media (max-width: 1100px){
    .hof-two-col{
        grid-template-columns:1fr;
    }

    .records-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    /* Below this width, 5 columns get too cramped to read comfortably —
       switch to a swipeable/scrollable carousel with fixed-width cards
       instead of squeezing everything into a 5-column grid. */
    .legend-track{
        display:flex;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        scroll-behavior:smooth;
    }

    .legend-card{
        scroll-snap-align:start;
        flex:0 0 220px;
    }

    .legend-nav{
        display:flex;
    }
}

@media (max-width: 900px){
    .hof-hero>.container{
        padding:var(--space-6) 24px;
        flex-direction:column;
        align-items:flex-start;
    }

    .hof-hero-vertical{
        flex-direction:row;
        gap:var(--space-3);
        text-align:left;
    }

    /* Keep all 4 quick-nav buttons on one line, app-style — shrink to
       fit rather than scroll off-edge with no visible hint (same fix
       pattern used on the Statistics/Points Table tab bars). */
    .hof-nav-row{
        flex-direction:column;
        align-items:stretch;
    }

    .hof-nav{
        flex-wrap:nowrap;
        overflow-x:visible;
        gap:4px;
    }

    .hof-nav-btn{
        flex:1 1 0;
        min-width:0;
        justify-content:center;
        text-align:center;
        white-space:normal;
        padding:var(--space-2) 2px;
        font-size:10px;
        gap:4px;
    }

    .hof-season-select{
        width:100%;
    }
}

@media (max-width: 720px){
    .hof-hero-copy h1{
        font-size:2.1rem;
    }

    .hof-promo-banner{
        flex-direction:column;
        text-align:center;
    }

    .moments-grid,
    .iconic-teams-grid{
        grid-template-columns:1fr;
    }

    .records-grid{
        grid-template-columns:1fr;
    }

    .legend-card{
        flex:0 0 78%;
    }

    .legend-nav{
        display:none;
    }
}

@media (max-width: 480px){
    .hof-hero-vertical{
        display:none;
    }

    .legend-card{
        flex:0 0 88%;
    }
}