/* ===========================================================
   HOME HERO
===========================================================*/

.hero{
    position:relative;
    min-height:640px;
    display:flex;
    align-items:center;
    overflow:hidden;

    background:
    linear-gradient(
        90deg,
        rgba(6,10,20,.96) 0%,
        rgba(6,10,20,.92) 22%,
        rgba(6,10,20,.72) 45%,
        rgba(6,10,20,.28) 68%,
        rgba(6,10,20,.05) 82%,
        transparent 100%
    ),
    url("../images/hero/hero-trophy-player.webp");

    background-repeat:no-repeat;
    background-size:105%;
    background-position:center 33%;
}

/* Container */

.hero>.container{

    width:100%;
    max-width:1320px;
    margin:auto;
    position:relative;
    z-index:5;
    padding:0 40px;
}

/* Left Content */

.hero-copy{
    width:700px;
    max-width:700px;
    padding-top:40px;
}
/* Badge */

.hero-badge{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(243,179,56,.18);

    color:#F4C14A;

    font-weight:700;

    margin-bottom:24px;
}

/* Heading */

.hero h1{

    font-size:5.25rem;

    font-weight:800;

    line-height:.92;

    letter-spacing:-3px;

    margin-bottom:26px;
}

.hero h1 span{

    color:#F3B63C;
}

/* Tagline */

.hero .tagline{

    font-size:1.18rem;

    color:#D3D8E2;

    max-width:480px;

    margin-bottom:38px;
}

/* Buttons */

.hero-actions{

    display:flex;

    gap:22px;

    margin-bottom:45px;
}

/* Countdown Title */

.hero .text-small{

    color:#C9D0DC;

    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;

    margin-bottom:18px;
}

/* Countdown */

.countdown{

    display:flex;

    gap:18px;
}

.countdown-unit{

    width:92px;
    height:94px;
    border-radius:18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:rgba(16,24,41,.75);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(8px);
}

.countdown-unit .num{

    font-size:2.15rem;
    font-weight:700;
    color:#fff;
}

.countdown-unit .label{

    margin-top:6px;
    font-size:15px;
    letter-spacing:1px;
    color:#A8B2C2;
    text-transform:uppercase;
}

/* ===============================
   BREAKING NEWS CARD
================================ */

.news-panel{

    position:absolute;
    top:180px;
    right:30px;
    width:350px;
    min-height:200px;
    padding:24px;
    border-radius:24px;
    background:linear-gradient(
        180deg,
        rgba(18,27,49,.97),
        rgba(11,18,34,.97)
    );

    border:1px solid rgba(255,110,70,.45);
    overflow:hidden;
    box-shadow:
        0 0 25px rgba(255,80,40,.08),
        0 25px 60px rgba(0,0,0,.55);
}


/* Orange Border Glow */
.news-panel::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:24px;
    padding:1px;
    background:linear-gradient(
        135deg,
        rgba(255,120,60,.85),
        rgba(255,180,60,.25)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}


/* Breaking Badge */

.news-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:linear-gradient(
        180deg,
        #ff3434,
        #b60000
    );

    color:#fff;
    padding:10px 18px;
    border-radius:14px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.7px;
    text-transform:uppercase;
    box-shadow:
        0 8px 18px rgba(255,0,0,.28);
}


/* Title */

.news-title{

    margin-top:34px;
    font-size:1.15rem;
    color:#fff;
    font-weight:700;
    line-height:1.4;
}


/* Date */

.news-date{

    margin-top:18px;
    font-size:1.9rem;
    font-weight:800;
    color:#FFC425;
    line-height:1.05;

    text-shadow:
    0 0 12px rgba(255,190,0,.22);
}


/* Button */

.news-panel a{

    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:28px;
    padding:14px 20px;
    border-radius:14px;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    font-size:15px;
    background:rgba(10,22,45,.72);
    border:1px solid rgba(70,120,255,.22);
    transition:.25s;
}

.news-panel a:hover{

    background:#16284d;
    transform:translateY(-2px);
}


/* Auction Hammer */

.news-gavel{
    position:absolute;
    right:5px;
    bottom:15px;
    width:185px;
    height:auto;
    object-fit:contain;
    pointer-events:none;
    z-index:2;
    filter:drop-shadow(0 12px 20px rgba(0,0,0,.45));
}



/* ===========================================================
   HERO — MOBILE OVERRIDES
===========================================================*/

@media (max-width: 768px){

    .hero-copy{
        max-width:100%;
    }

    .hero{
        min-height:auto;
        padding:var(--space-6) 0;
        flex-wrap:wrap;

        background:
            linear-gradient(180deg, rgba(11,18,32,.75) 0%, rgba(11,18,32,.92) 100%),
            url("../images/hero/hero-trophy-player.webp");

        background-size:cover;
        background-position:center;
    }

    .hero h1{
        font-size:2rem;
        letter-spacing:-1px;
    }

    .hero h1 span{
        display:block;
    }

    .hero-actions{
        flex-direction:row;
        flex-wrap:wrap;
    }

    .hero-actions .btn{
        flex:1 1 auto;
        justify-content:center;
    }

    .countdown{
        flex-wrap:nowrap;
        gap:10px;
    }

    .countdown-unit{
        width:auto;
        flex:1 1 0;
        height:74px;
        border-radius:14px;
    }

    /* .news-panel is a flex item inside .hero (display:flex) — "width:auto"
       on a flex item shrinks to fit its content instead of behaving like a
       normal block box, which was collapsing the whole card down to just
       the absolutely-positioned gavel graphic. Force it onto its own full
       -width row instead. */
    .news-panel{
        position:static;
        margin:var(--space-5) var(--space-5) 0;
        width:auto;
        flex:1 1 100%;
    }

}

@media (max-width: 480px){

    .hero h1{
        font-size:1.65rem;
    }

}
/* Top Statistics grid — was inline-styled to 5 columns, which beat any
   external stylesheet media query (inline style specificity always
   wins). Moved to a class so it can actually respond to screen size. */
.top-stats-grid{
    grid-template-columns:repeat(5, 1fr);
}

@media (max-width: 1024px){
    .top-stats-grid{
        grid-template-columns:repeat(3, 1fr);
    }
}

@media (max-width: 640px){
    .top-stats-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width: 400px){
    .top-stats-grid{
        grid-template-columns:1fr;
    }
}

/* CTA button row inside the Live Match / Live Auction preview cards —
   two buttons side by side. At narrow widths, "View All Players" /
   "Live Scorecard" don't have room next to a second button and get
   clipped; stack them instead. */
.card-cta-row{
    display:flex;
    gap:var(--space-3);
}

@media (max-width: 420px){
    .card-cta-row{
        flex-direction:column;
    }
}

/* Top Sponsors grid — was inline-styled to 6 columns (same inline-style
   bug as top-stats-grid: beats any external media query). 6 sponsor
   names/logos need real room to breathe on small screens. */
.sponsor-grid{
    grid-template-columns:repeat(6, 1fr);
}

@media (max-width: 1024px){
    .sponsor-grid{
        grid-template-columns:repeat(3, 1fr);
    }
}

@media (max-width: 560px){
    .sponsor-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

/* Hall of Fame grid — 3 champion cards. Fine down to small phones, but
   stack on very narrow screens so team names never get tight. */
.hall-of-fame-grid{
    grid-template-columns:repeat(3, 1fr);
}

@media (max-width: 420px){
    .hall-of-fame-grid{
        grid-template-columns:1fr;
    }
}

/* Upcoming Fixtures mini-table — "[date] TeamA vs TeamB" needs to read
   as one line on phones. Shrinking the font + tightening the team-icon
   margins here (not globally) buys just enough room to avoid a wrap or
   horizontal scroll. */
@media (max-width: 480px){
    .fixture-preview-table{
        font-size:12.5px;
    }
    .fixture-preview-table .team-icon{
        width:12px;
        height:12px;
        margin:0 3px;
    }
    .fixture-preview-table .date-chip{
        width:30px;
        height:30px;
        font-size:10px;
        margin-right:4px;
    }
}

@media (max-width: 340px){
    .fixture-preview-table{
        font-size:11px;
    }
    .fixture-preview-table .date-chip{
        width:26px;
        height:26px;
        font-size:9px;
    }
}