/* ===========================================================
   CARDS
===========================================================*/

.card{
    position:relative;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-5);
    box-shadow:var(--shadow-card);
    overflow:hidden;
}

.card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    background:linear-gradient(90deg, var(--color-cyan), transparent 70%);
}

.card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:var(--space-4);
}

.card-subtitle{
    font-size:var(--fs-small);
    font-weight:var(--fw-bold);
    color:var(--color-text);
    margin-top:6px;
}

.card-header h3{
    display:flex;
    align-items:center;
    gap:var(--space-2);
}

/* Cyan section-label headers (Featured Teams, Points Table, etc.) —
   NOT used on Live Match/Auction headers, which mix a badge + plain text */

.card-title{
    font-size:var(--fs-small);
    font-weight:var(--fw-bold);
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--color-cyan);
}

.card-title-gold{
    color:var(--color-gold);
}

.card-link{
    font-size:var(--fs-tiny);
    font-weight:var(--fw-semibold);
    color:var(--color-cyan);
}

/* Card Grid Layout */

.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:var(--space-5);
}

.live-card-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-5);
    margin:var(--space-6) 0;
}

/* Stat Card (Top Statistics — photo + text side by side) */

.stat-card{
    display:flex;
    align-items:center;
    gap:var(--space-3);
}

.stat-card .avatar{
    width:48px;
    height:48px;
    border-radius:var(--radius-md);
    flex-shrink:0;
}

.stat-avatar{
    border-radius:8px 8px 4px 4px;
}

/* ===========================================================
   BADGES
===========================================================*/

.badge{
    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:4px 12px;
    border-radius:var(--radius-pill);

    font-size:var(--fs-tiny);
    font-weight:var(--fw-semibold);
    text-transform:uppercase;
    letter-spacing:0.04em;
}

.badge-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor;
}

.badge-live{ background:rgba(239, 68, 68, 0.15); color:var(--color-danger); }
.badge-success{ background:rgba(34, 197, 94, 0.15); color:var(--color-success); }
.badge-warning{ background:rgba(245, 158, 11, 0.15); color:var(--color-warning); }
.badge-info{ background:rgba(59, 130, 246, 0.15); color:var(--color-info); }
.badge-gold{ background:rgba(232, 170, 61, 0.15); color:var(--color-gold); }

/* ===========================================================
   KEY METRICS STRIP (unified bar — Teams / Players / Matches...)
===========================================================*/

.stat-strip{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    row-gap:var(--space-3);

    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);

    padding:var(--space-4) var(--space-5);
    margin:var(--space-6) 0;
    gap:var(--space-5);
}

.stat-item{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    flex:1;
}

.stat-icon{
    width:40px;
    height:40px;
    border-radius:var(--radius-md);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:1.1rem;
    flex-shrink:0;
}

.stat-icon.icon-green{ background:rgba(34, 197, 94, 0.15); color:var(--color-success); }
.stat-icon.icon-blue{ background:rgba(59, 130, 246, 0.15); color:var(--color-info); }
.stat-icon.icon-purple{ background:rgba(124, 92, 252, 0.15); color:var(--color-purple); }
.stat-icon.icon-orange{ background:rgba(245, 158, 11, 0.15); color:var(--color-warning); }
.stat-icon.icon-gold{ background:rgba(232, 170, 61, 0.15); color:var(--color-gold); }

.stat-item .stat-value{
    font-size:1.25rem;
    font-weight:var(--fw-bold);
    color:var(--color-text);
    line-height:1.1;
}

.stat-item .stat-label{
    font-size:var(--fs-tiny);
    color:var(--color-text-muted);
    text-transform:uppercase;
    letter-spacing:0.04em;
}

.stat-strip .btn{
    flex-shrink:0;
}

/* Legacy boxed stat tile — kept for any page still using it */

.stat-tile{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    padding:var(--space-4);
    text-align:center;
}

.stat-tile .stat-value{
    font-size:1.75rem;
    font-weight:var(--fw-bold);
    color:var(--color-gold);
}

.stat-tile .stat-label{
    font-size:var(--fs-tiny);
    color:var(--color-text-muted);
    text-transform:uppercase;
    letter-spacing:0.04em;
    margin-top:4px;
}

.stat-value{
    font-weight:var(--fw-bold);
    color:var(--color-gold);
}

.laurel-badge{
    width:72px;
    height:72px;
    margin:0 auto var(--space-3);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:1.75rem;

    border-radius:50%;
    border:2px solid var(--color-gold);
    background:radial-gradient(circle, rgba(232,170,61,0.15), transparent 70%);
}

/* ===========================================================
   LIVE MATCH / LIVE AUCTION CARDS
===========================================================*/

/* Scoreboard Row (crest + score + VS + crest + score) */

.scoreboard-row{
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:var(--space-4);
    margin:var(--space-4) 0 var(--space-3);
}

.scoreboard-team{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.scoreboard-team-main{
    display:flex;
    align-items:center;
    gap:var(--space-3);
}

/* Bug fix: .crest-badge normally has margin:0 auto (to center it in
   grid/column layouts elsewhere on the site). Reused here inside a
   flex ROW, that auto margin absorbs all the row's free space and
   auto-centers the crest — shoving it away from the score right next
   to it and scattering the whole row. Cancel it out in this context. */
.scoreboard-team-main .crest-badge{
    margin:0;
}

.scoreboard-team-right{
    align-items:flex-end;
}

.scoreboard-team-right .scoreboard-team-main{
    flex-direction:row-reverse;
}

.scoreboard-team-name{
    font-size:var(--fs-tiny);
    font-weight:var(--fw-semibold);
    color:var(--color-text-muted);
    text-transform:uppercase;
    letter-spacing:0.04em;
}

.crest-badge-sm{
    width:40px;
    height:40px;
    border-radius:var(--radius-md);

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:var(--fw-bold);
    font-size:var(--fs-tiny);
    color:#fff;

    flex-shrink:0;
}

.scoreboard-score{
    display:flex;
    align-items:baseline;
    gap:6px;
}

.scoreboard-runs{
    font-size:1.5rem;
    font-weight:var(--fw-bold);
    color:var(--color-text);
}

.scoreboard-overs{
    font-size:var(--fs-tiny);
    color:var(--color-text-muted);
}

.scoreboard-vs{
    width:32px;
    height:32px;
    border-radius:50%;
    margin-top:4px;

    background:var(--color-surface-alt);
    border:1px solid var(--color-border);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:var(--fs-tiny);
    font-weight:var(--fw-bold);
    color:var(--color-text-muted);

    flex-shrink:0;
}

/* .scoreboard-names removed — team name now nests inside .scoreboard-team
   as .scoreboard-team-name, guaranteeing it sits directly under its own
   crest+score block instead of a separately-aligned row. */

.match-score-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:var(--space-3) 0;
}

.team-score{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    font-weight:var(--fw-semibold);
}

.team-score .runs{
    color:var(--color-gold);
}

.bid-figure{
    font-family:var(--font-mono);
    font-size:1.75rem;
    font-weight:var(--fw-bold);
    color:var(--color-gold);
}

/* Auction Card — player info left, bid info right */

.auction-player-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--space-4);
    margin:var(--space-3) 0;
}

.auction-player-info{
    display:flex;
    align-items:center;
    gap:var(--space-3);
}

.auction-player-info .avatar{
    width:52px;
    height:52px;
    border-radius:var(--radius-md);
}

.auction-bid-info{
    text-align:right;
}

.auction-bid-info .badge{
    margin-top:4px;
}

/* ===========================================================
   CRESTS / AVATARS (Teams, Players)
===========================================================*/

.crest-strip{
    display:flex;
    gap:var(--space-4);
    overflow-x:auto;
    padding-bottom:var(--space-2);
}

.crest{
    flex-shrink:0;
    text-align:center;
    width:84px;
}

.crest-badge{
    width:56px;
    height:56px;
    border-radius:var(--radius-md);
    margin:0 auto var(--space-2);

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:var(--fw-bold);
    font-size:var(--fs-small);
    color:#fff;
}

.crest .name{
    font-size:var(--fs-tiny);
    color:var(--color-text-muted);
}

.avatar{
    width:64px;
    height:64px;
    border-radius:50%;

    background:var(--color-surface-alt);
    border:1px solid var(--color-border);

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:var(--fw-bold);
    color:var(--color-purple);
}

/* ===========================================================
   SPONSORS
===========================================================*/

.sponsor-strip{
    display:flex;
    align-items:center;
    gap:var(--space-6);
    flex-wrap:wrap;
    opacity:0.75;
}

.sponsor-card{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--space-5) var(--space-3);
    text-align:center;
}

@media (max-width: 560px){
    .sponsor-card{
        font-size:var(--fs-small);
        padding:var(--space-4) var(--space-2);
    }
}

/* ===========================================================
   ANNOUNCEMENTS
===========================================================*/

.announcement-list{
    display:flex;
    flex-direction:column;
    gap:var(--space-4);
}

.announcement-item{
    display:flex;
    align-items:center;
    gap:var(--space-3);
}

/* ===========================================================
   PHOTO GALLERY
===========================================================*/

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

/* Small preview tiles matching the real Gallery page's per-category
   texture treatment (radial-gradient "bokeh" + accent color), just
   scaled down for this homepage teaser. Kept as its own lightweight
   copy here rather than linking gallery.css, per the site's convention
   of duplicating small shared visual patterns per page. */
.mini-gallery-tile{
    position:relative;
    height:80px;
    border-radius:var(--radius-md);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    text-align:center;
    padding:0 4px;
    background:
        radial-gradient(circle at 20% 22%, rgba(255,255,255,0.3) 0, rgba(255,255,255,0.3) 2px, transparent 3px),
        radial-gradient(circle at 82% 75%, rgba(255,255,255,0.2) 0, rgba(255,255,255,0.2) 2px, transparent 3px),
        radial-gradient(ellipse at 30% 100%, var(--tile-accent, rgba(232,170,61,.35)), transparent 60%),
        linear-gradient(135deg, var(--tile-accent-soft, rgba(232,170,61,.22)), rgba(11,18,32,.94));
}

.mini-gallery-icon{
    font-size:1.1rem;
}

.mini-gallery-label{
    font-size:9px;
    color:#fff;
    font-weight:600;
    line-height:1.2;
}

/* ===========================================================
   FIXTURES / POINTS TABLE — small icon chips
===========================================================*/

.team-icon{
    display:inline-block;
    width:16px;
    height:16px;
    border-radius:4px;
    vertical-align:middle;
    margin:0 4px;
}

.date-chip{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;

    border-radius:var(--radius-sm);
    background:var(--color-surface-alt);

    font-size:9px;
    font-weight:var(--fw-bold);
    line-height:1.2;
    text-align:center;

    margin-right:var(--space-2);
    vertical-align:middle;
}

/* ===========================================================
   CHIP SELECT (form inputs — e.g. Playing Role picker)
===========================================================*/

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

.chip-option{
    padding:10px;
    text-align:center;

    font-size:var(--fs-tiny);
    font-weight:var(--fw-semibold);

    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    background:var(--color-surface-alt);
    color:var(--color-text-muted);

    transition:all var(--transition-fast);
}

.chip-option.selected{
    background:var(--color-purple);
    border-color:var(--color-purple);
    color:#fff;
}