/* ==========================
   Category
========================== */
/* =====================================
   CATEGORY SECTION
===================================== */

.category-group{
    margin:56px 0;
}

.category-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:18px;
    margin-bottom:22px;
}

.category-title{
    display:flex;
    align-items:center;
    gap:14px;
    margin:0;

    font-size:clamp(1.6rem,2.8vw,2.25rem);
    font-weight:800;
    letter-spacing:-.03em;
    line-height:1.2;
    color:var(--heading);
}

.category-title::before{
    content:"";
    width:7px;
    height:38px;
    flex-shrink:0;

    border-radius:999px;

    background:linear-gradient(
        180deg,
        var(--accent-light),
        var(--accent)
    );

    box-shadow:
        0 0 18px var(--accent-soft);
}

.category-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:9px 18px;

    border-radius:999px;

    background:var(--button-gradient);

    color:#fff;

    font-size:.78rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;

    box-shadow:
        0 10px 28px var(--accent-shadow);
}

/* =====================================
   INTRO CARD
===================================== */

.category-intro{
    position:relative;

    overflow:hidden;

    margin-bottom:30px;

    padding:28px;

    background:var(--hero-gradient);

    border:1px solid var(--accent-border);

    border-radius:26px;

    box-shadow:
        0 12px 34px rgba(15,23,42,.06);
}

.category-intro::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:5px;

    background:
    linear-gradient(
        90deg,
        var(--accent),
        var(--accent-light)
    );
}

.category-intro h2{
    margin:0 0 14px;

    font-size:clamp(1.65rem,3vw,2.35rem);

    font-weight:800;

    letter-spacing:-.03em;

    line-height:1.2;

    color:var(--heading);
}

.category-intro p{
    margin:0;

    max-width:760px;

    font-size:1.02rem;

    line-height:1.9;

    color:var(--muted);
}

/* =====================================
   GRID
===================================== */

.category-grid,
.category-feed-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(320px,1fr)
        );

    gap:24px;

    align-items:start;

    margin-top:26px;
}

/* =====================================
   STORY CARD
===================================== */

.story-card{

    display:flex;
    flex-direction:column;

    height:100%;

    overflow:hidden;

    background:#fff;

    border:1px solid var(--border);

    border-radius:24px;

    box-shadow:
        0 10px 30px rgba(15,23,42,.06);

    transition:
        transform .28s,
        box-shadow .28s,
        border-color .28s;
}

.story-card:hover{

    transform:translateY(-6px);

    border-color:var(--accent-border);

    box-shadow:
        0 22px 48px rgba(15,23,42,.12);
}

.story-link{
    display:flex;
    flex-direction:column;
    height:100%;
    color:inherit;
}

.story-image{
    overflow:hidden;
    background:#EDF2F7;
}

.story-image img{

    display:block;

    transition:transform .45s ease;
}

.story-card:hover img{

    transform:scale(1.05);
}

.story-content{

    display:flex;
    flex-direction:column;

    flex:1;

    padding:22px;
}

.story-category{

    display:inline-flex;

    align-items:center;

    width:max-content;

    margin-bottom:14px;

    padding:7px 14px;

    border-radius:999px;

    background:var(--button-gradient);

    color:#fff;

    font-size:.74rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.05em;
}

.story-content h3{

    margin:0 0 14px;

    font-size:1.18rem;

    font-weight:800;

    line-height:1.45;

    letter-spacing:-.02em;

    color:var(--heading);

    transition:color .25s;
}

.story-card:hover h3{

    color:var(--accent);
}

.story-summary{

    flex:1;

    margin:0;

    color:var(--muted);

    font-size:.98rem;

    line-height:1.8;
}

.story-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:20px;

    padding-top:16px;

    border-top:1px solid var(--border);

    color:var(--muted);

    font-size:.82rem;
}

.story-time{

    display:flex;

    align-items:center;

    gap:6px;
}

.story-time::before{

    content:"🕒";
}

/* =====================================
   END SECTION
===================================== */

.content-hub{

    margin-top:34px;
}

.end-section{

    margin:56px 0 26px;
}

.section-actions{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;
}

/* =====================================
   MOBILE
===================================== */

@media(max-width:768px){

.category-group{
    margin:42px 0;
}

.category-header{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
}

.category-title{
    font-size:1.45rem;
}

.category-intro{
    padding:22px;
}

.category-grid,
.category-feed-grid{

    grid-template-columns:1fr;

    gap:20px;
}

.story-content{

    padding:18px;
}

.story-content h3{

    font-size:1.08rem;
}

.story-summary{

    font-size:.94rem;
}

}
/* ==========================
   Notice Box
========================== */

.notice{
    display:flex;
    align-items:flex-start;
    gap:12px;

    margin-top:18px;
    padding:16px 18px;

    background:linear-gradient(
        135deg,
        var(--accent-soft),
        #FFF
    );

    border:1px solid var(--accent-border);
    border-left:5px solid var(--accent);
    border-radius:18px;

    color:#334155;

    font-size:.95rem;
    line-height:1.7;
}

.notice::before{
    content:"ℹ️";

    flex-shrink:0;

    font-size:1.2rem;
}

.newsletter-card{
    position:relative;
    overflow:hidden;
    margin:40px 0;
    padding:40px;
    text-align:center;
    background:linear-gradient(135deg,#FFFFFF,#F4F8FF);
    border:1px solid rgba(79,70,229,.12);
    border-radius:28px;
    box-shadow:0 18px 45px rgba(15,23,42,.08);
}


.newsletter-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:5px;

    background:
    linear-gradient(
        90deg,
        var(--accent),
        #60A5FA
    );

    z-index:3;
}

.newsletter-card::after{
    content:"";

    position:absolute;
    bottom:-100px;
    left:-80px;

    width:200px;
    height:200px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(96,165,250,.12),
        transparent 70%
    );
}

.newsletter-card > *{
    position:relative;
    z-index:2;
}

.newsletter-card .newsletter-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:15px 34px;

    background:var(--button-gradient);

    color:#FFF;

    border-radius:999px;

    font-size:.98rem;
    font-weight:700;

    box-shadow:0 10px 28px var(--accent-shadow);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.newsletter-card .newsletter-button:hover{
    transform:translateY(-3px) scale(1.02);
    box-shadow:0 16px 38px var(--accent-shadow);
}


/* ==========================================
   Social Links
========================================== */

.social-grid{
    display:flex;
    flex-wrap:wrap;

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

    gap:10px;

    margin-top:20px;
}

.social-grid a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 16px;

    background:#FFFFFF;

    border:1px solid var(--border);
    border-radius:999px;

    color:var(--text);

    text-decoration:none;

    font-size:.84rem;
    font-weight:600;

    white-space:nowrap;

    box-shadow:0 4px 12px rgba(15,23,42,.05);

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.social-grid a:hover{
    background:var(--accent);

    border-color:var(--accent);

    color:#FFFFFF;

    transform:translateY(-2px);

    box-shadow:0 10px 24px var(--accent-shadow);
}

/* =====================================================
   Footer
===================================================== */

.site-footer{
    margin-top:60px;
    padding:50px 30px;

    text-align:center;

    background:linear-gradient(
        180deg,
        #FFFFFF,
        #F8FAFC
    );

    border-top:1px solid var(--border);
    border-radius:28px 28px 0 0;
}

.footer-links{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;

    gap:14px;

    margin:0 0 20px;
    padding:0;

    list-style:none;
}

.footer-links a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:12px 22px;

    background:#FFF;

    border:1px solid var(--border);
    border-radius:999px;

    color:var(--text);

    font-size:.9rem;
    font-weight:600;

    text-decoration:none;

    white-space:nowrap;

    box-shadow:0 5px 16px rgba(15,23,42,.05);

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.footer-links a:hover{
    background:var(--accent);
    border-color:var(--accent);
    color:#FFF;

    transform:translateY(-2px);

    box-shadow:0 10px 28px var(--accent-shadow);
}

.copyright{
    margin-top:18px;

    color:var(--muted);

    font-size:.9rem;
    line-height:1.7;
}

/* =====================================================
   Empty Feed
===================================================== */

.empty-feed{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:12px;

    margin:20px 0;
    padding:50px 25px;

    text-align:center;

    background:
    linear-gradient(
        135deg,
        #FFFFFF,
        #F8FAFC
    );

    border:1px dashed var(--accent-border);
    border-radius:24px;

    color:#64748B;

    box-shadow:0 10px 30px rgba(15,23,42,.05);
}

.empty-feed::before{
    content:"📰";

    font-size:2.6rem;
}

.empty-feed p{
    margin:0;

    font-size:1rem;
    font-weight:500;
}


/* ==========================
   CTA Buttons
========================== */

.load-more-button,
.back-to-top,
.newsletter-button,
.support-button,
.contact-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 24px;
    border-radius:20px;
    font-size:.95rem;
    font-weight:700;
    text-decoration:none;
    box-shadow:0 10px 24px rgba(15,23,42,.08);
    transition:
        background .28s ease,
        color .28s ease,
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

/* Primary CTA */
.load-more-button{
    padding:16px 34px;

    background:linear-gradient(
        135deg,
        var(--accent),
        var(--accent-hover)
    );
    color:#FFF;
    font-size:1rem;
    letter-spacing:.02em;
    box-shadow:0 12px 30px var(--accent-shadow);
}

.load-more-button:hover{
    transform:translateY(-3px) scale(1.02);
    box-shadow:0 18px 40px var(--accent-shadow);
}

.load-more-button:active{
    transform:translateY(-1px);
}


.back-to-top:hover{
    transform:translateY(-3px);
    border-color:var(--accent);
    color:var(--accent);
    background:var(--accent-soft);
    box-shadow:0 18px 36px rgba(15,23,42,.14);
}

/* Brand Buttons */

.newsletter-button{
    background:linear-gradient(135deg,#2563EB,#3B82F6);
    color:#FFF;
}

.support-button{
    background:linear-gradient(135deg,#EC4899,#F43F5E);
    color:#FFF;
}

.contact-button{
    background:linear-gradient(135deg,#14B8A6,#10B981);
    color:#FFF;
}

.newsletter-button:hover,
.support-button:hover,
.contact-button:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 36px rgba(15,23,42,.14);
}


/* ==========================
   Content Cards
========================== */

.newsletter-card,
.community-section,
.support-section,
.contact-section{
    position:relative;
    overflow:hidden;

    margin:28px 0;
    padding:32px;

    text-align:center;

    background:linear-gradient(
        180deg,
        #FFF,
        #F8FAFC
    );

    border:1px solid rgba(148,163,184,.18);
    border-radius:28px;

    box-shadow:0 18px 45px rgba(15,23,42,.06);
}

.newsletter-card::before,
.community-section::before,
.support-section::before,
.contact-section::before{
    content:"";

    position:absolute;
    inset:0 0 auto 0;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--accent),
        #60A5FA
    );
}

.newsletter-card h2,
.community-section h2,
.support-section h2,
.contact-section h2{
    margin:0 0 12px;

    font-size:clamp(1.5rem,3vw,2rem);
    font-weight:800;
    letter-spacing:-.03em;

    color:var(--heading);
}

.newsletter-card p,
.community-section p,
.support-section p,
.contact-section p{
    max-width:650px;

    margin:0 auto;

    font-size:1rem;
    line-height:1.8;

    color:var(--muted);
}