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

.announcements-hero{
    position:relative;
    min-height:300px;
    overflow:hidden;

    background:
    linear-gradient(
        90deg,
        rgba(6,10,20,.95) 0%,
        rgba(6,10,20,.82) 32%,
        rgba(6,10,20,.35) 62%,
        transparent 100%
    ),
    url("../images/hero/Announcements\ Banner.webp");

    background-repeat:no-repeat;
    background-size:cover;
    background-position:35% 40%;
}

.announcements-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);
}

.announcements-hero-copy h1{
    font-size:2.75rem;
    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;
}

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

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

.announcements-hero-script{
    flex-shrink:0;
    text-align:right;
    font-family:'Brush Script MT', cursive;
    font-style:italic;
    color:#fff;
    font-size:1.3rem;
    line-height:1.3;
    text-shadow:0 2px 10px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.6);
}

/* ===========================================================
   CATEGORY FILTER + SEARCH
===========================================================*/

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

.announce-categories{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    flex:1 1 auto;
    flex-wrap:wrap;
}

.announce-cat-btn{
    display:flex;
    align-items:center;
    gap:7px;
    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;
}

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

.announce-search{
    width:auto;
    min-width:220px;
    flex-shrink:0;
    padding:10px var(--space-4);
}

/* ===========================================================
   MAIN LAYOUT
===========================================================*/

.announce-layout{
    display:grid;
    grid-template-columns:1.7fr 1fr;
    gap:var(--space-5);
    align-items:start;
    margin-top:var(--space-6);
}

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

.announce-card{
    display:flex;
    gap:var(--space-4);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-4);
}

.announce-thumb{
    position:relative;
    flex-shrink:0;
    width:130px;
    height:100px;
    border-radius:var(--radius-md);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    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));
}

.announce-thumb .icon{
    font-size:1.8rem;
    opacity:0.9;
}

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

.announce-body-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--space-3);
    margin-bottom:6px;
}

.announce-cat-tag{
    display:inline-block;
    padding:3px 10px;
    border-radius:var(--radius-pill);
    font-size:var(--fs-tiny);
    font-weight:700;
    color:#fff;
    margin-bottom:6px;
}

.announce-date{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:5px;
    font-size:var(--fs-tiny);
    color:var(--color-text-faint);
    white-space:nowrap;
}

.announce-body h3{
    font-size:1.05rem;
    margin-bottom:4px;
}

.announce-body p{
    font-size:var(--fs-small);
    color:var(--color-text-muted);
}

.announce-more-detail{
    display:none;
    font-size:var(--fs-small);
    color:var(--color-text-muted);
    margin-top:var(--space-2);
    padding-top:var(--space-2);
    border-top:1px solid var(--color-border);
}

.announce-more-detail.show{
    display:block;
}

.announce-read-more{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-top:var(--space-2);
    font-size:var(--fs-small);
    font-weight:600;
    color:var(--color-gold);
    cursor:pointer;
    background:none;
    border:none;
    padding:0;
}

.announce-no-match-note{
    text-align:center;
    color:var(--color-text-muted);
    font-size:var(--fs-small);
    padding:var(--space-6);
}

/* Per-category accent colors */
.cat-general{ --tile-accent: rgba(232,170,61,.4); --tile-accent-soft: rgba(232,170,61,.24); }
.cat-general-tag{ background:#E8AA3D; color:#1A1305; }
.cat-match-updates{ --tile-accent: rgba(34,197,94,.4); --tile-accent-soft: rgba(34,197,94,.22); }
.cat-match-updates-tag{ background:#16A34A; }
.cat-auction{ --tile-accent: rgba(59,130,246,.4); --tile-accent-soft: rgba(59,130,246,.22); }
.cat-auction-tag{ background:#2563EB; }
.cat-team-updates{ --tile-accent: rgba(124,58,237,.4); --tile-accent-soft: rgba(124,58,237,.22); }
.cat-team-updates-tag{ background:#7C3AED; }
.cat-events{ --tile-accent: rgba(249,115,22,.4); --tile-accent-soft: rgba(249,115,22,.22); }
.cat-events-tag{ background:#F97316; }
.cat-media{ --tile-accent: rgba(220,38,38,.4); --tile-accent-soft: rgba(220,38,38,.22); }
.cat-media-tag{ background:#DC2626; }

/* ===========================================================
   SIDEBAR
===========================================================*/

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

.notice-card{
    background:rgba(220,38,38,0.1);
    border:1px solid rgba(220,38,38,0.4);
    border-radius:var(--radius-lg);
    padding:var(--space-4);
}

.notice-card-head{
    display:flex;
    align-items:center;
    gap:10px;
    color:#F87171;
    font-weight:700;
    margin-bottom:var(--space-2);
}

.notice-card-head .icon{
    width:26px;
    height:26px;
    border-radius:50%;
    background:#DC2626;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.9rem;
    flex-shrink:0;
}

.notice-card p{
    font-size:var(--fs-small);
    color:var(--color-text-muted);
    margin-bottom:var(--space-3);
}

.notice-extra{
    display:none;
    font-size:var(--fs-small);
    color:var(--color-text-muted);
    margin-bottom:var(--space-3);
    padding-top:var(--space-2);
    border-top:1px solid rgba(220,38,38,0.3);
}

.notice-extra.show{
    display:block;
}

.key-dates-list{
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
}

.key-date-row{
    display:flex;
    align-items:center;
    gap:var(--space-3);
}

.key-date-chip{
    flex-shrink:0;
    width:48px;
    text-align:center;
    background:var(--color-surface-alt);
    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);
    padding:6px 0;
    font-size:var(--fs-tiny);
    font-weight:700;
    color:var(--color-gold);
    line-height:1.3;
}

.key-date-row .name{
    font-weight:600;
    font-size:var(--fs-small);
}

.key-date-row .place{
    font-size:var(--fs-tiny);
    color:var(--color-text-faint);
}

.subscribe-card input{
    margin-bottom:var(--space-3);
}

/* ===========================================================
   TOAST — honest feedback for Subscribe (no backend yet)
===========================================================*/

.gallery-toast{
    position:fixed;
    left:50%;
    bottom:32px;
    transform:translateX(-50%) translateY(20px);
    background:var(--color-surface-alt);
    border:1px solid var(--color-border);
    color:var(--color-text);
    padding:var(--space-3) var(--space-5);
    border-radius:var(--radius-md);
    font-size:var(--fs-small);
    font-weight:var(--fw-medium);
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.25s ease, transform 0.25s ease;
    z-index:999;
    white-space:nowrap;
}

.gallery-toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

@media (max-width: 480px){
    .gallery-toast{
        white-space:normal;
        width:calc(100% - 48px);
        text-align:center;
    }
}

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

.announce-bottom-banner{
    position:relative;
    margin-top:var(--space-7);
    min-height:90px;
    overflow:hidden;

    background:
    url("../images/hero/announcements-bottom-banner.pngs");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

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

@media (max-width: 1100px){
    .announce-layout{
        grid-template-columns:1fr;
    }
}

@media (max-width: 1024px){
    .announce-filter-row{
        flex-direction:column;
        flex-wrap:nowrap;
        align-items:stretch;
    }

    .announce-categories{
        flex-wrap:nowrap;
        overflow-x:auto;
        gap:6px;
        min-width:0;
        -webkit-mask-image:linear-gradient(90deg, #000 92%, transparent 100%);
        mask-image:linear-gradient(90deg, #000 92%, transparent 100%);
    }

    .announce-cat-btn{
        flex-shrink:0;
        font-size:12px;
        padding:var(--space-2) var(--space-3);
    }

    .announce-search{
        width:100%;
    }
}

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

    .announcements-hero-script{
        text-align:left;
    }
}

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

    .announce-card{
        flex-direction:column;
    }

    .announce-thumb{
        width:100%;
        height:120px;
    }

    .announce-body-head{
        flex-direction:column;
        gap:4px;
    }
}