/* =========================================================
   DEALS DESK BLOG
   blog.css
   Works with the existing root styles.css variables
========================================================= */


/* =========================================================
   RESET / BLOG BASE
========================================================= */

.blog-container{
    width:min(1180px, calc(100% - 40px));
    margin:0 auto;
}

.blog-section{
    padding:80px 0;
}

.blog-section-alt{
    background:rgba(226,219,196,0.32);
}

.blog-section h2,
.newsletter-section h2{
    color:var(--ink);
}

.blog-section p{
    color:var(--text-soft);
}

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}


/* =========================================================
   BLOG HEADER
========================================================= */

.blog-header{
    background:var(--ink);
    border-bottom:1px solid rgba(239,234,217,0.16);
}

.blog-header-inner{
    width:min(1180px, calc(100% - 40px));
    min-height:76px;
    margin:0 auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.blog-brand{
    display:inline-flex;
    align-items:center;
    gap:12px;

    color:var(--paper);
    text-decoration:none;
    font-family:"Fraunces",serif;
    font-size:1.35rem;
    font-weight:600;
}

.blog-brand img{
    width:38px;
    height:38px;
    object-fit:contain;
}

.blog-nav{
    display:flex;
    align-items:center;
    gap:26px;
}

.blog-nav a{
    color:var(--paper);
    text-decoration:none;

    font-family:"Source Sans 3",sans-serif;
    font-size:0.95rem;
    font-weight:600;

    transition:opacity .2s ease;
}

.blog-nav a:hover{
    opacity:.72;
}


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

.blog-home-hero{
    background:var(--ink);
    color:var(--paper);

    padding:90px 0;
}

.blog-hero-inner{
    width:min(1180px, calc(100% - 40px));
    margin:0 auto;

    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
    gap:70px;
    align-items:center;
}

.blog-hero-copy{
    max-width:720px;
}

.blog-tag{
    display:inline-block;

    font-family:"IBM Plex Mono",monospace;
    font-size:.72rem;
    font-weight:500;
    letter-spacing:.08em;
    text-transform:uppercase;

    color:var(--brass);
}

.blog-hero-copy h1{
    margin:18px 0 22px;

    color:var(--paper);

    font-family:"Fraunces",serif;
    font-size:clamp(3rem,6vw,5.4rem);
    line-height:.98;
    font-weight:600;
}

.blog-hero-copy p{
    max-width:650px;
    margin:0;

    color:#E2DBC4;

    font-family:"Source Sans 3",sans-serif;
    font-size:1.2rem;
    line-height:1.65;
}

.blog-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:32px;
}

.blog-hero-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:46px;
    padding:10px 22px;

    border:1px solid rgba(239,234,217,.45);
    border-radius:8px;

    color:var(--paper);
    text-decoration:none;

    font-weight:600;
}

.blog-hero-secondary:hover{
    background:rgba(239,234,217,.08);
}


/* =========================================================
   SEARCH PANEL
========================================================= */

.blog-search-panel{
    padding:34px;

    background:var(--paper);

    border:1px solid rgba(239,234,217,.2);
    border-radius:18px;

    box-shadow:0 18px 50px rgba(0,0,0,.16);
}

.blog-search-panel h2{
    margin:12px 0 8px;

    color:var(--ink);

    font-family:"Fraunces",serif;
    font-size:2rem;
}

.blog-search-panel p{
    margin:0 0 22px;

    color:var(--text-soft);
}

.search-input-wrap{
    display:flex;
    gap:10px;
}

.search-input-wrap input{
    min-width:0;
    flex:1;

    height:48px;
    padding:0 14px;

    border:1px solid var(--line);
    border-radius:7px;

    background:#fff;

    color:var(--text);

    font-family:"Source Sans 3",sans-serif;
    font-size:1rem;
}

.search-input-wrap input:focus{
    outline:2px solid var(--focus);
    outline-offset:2px;
}

.search-input-wrap .btn{
    flex-shrink:0;
}


/* =========================================================
   SEARCH RESULTS
========================================================= */

.search-results{
    position:relative;
    z-index:20;

    margin-top:12px;
}

.search-result{
    display:block;

    padding:14px 0;

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

    color:var(--text);
    text-decoration:none;
}

.search-result h3{
    margin:0 0 4px;

    font-family:"Fraunces",serif;
    font-size:1.1rem;
}

.search-result p{
    margin:0 0 5px;
    font-size:.9rem;
}

.search-result span{
    color:var(--brass-dim);

    font-family:"IBM Plex Mono",monospace;
    font-size:.68rem;
    text-transform:uppercase;
}

.search-result:hover h3{
    color:var(--brass-dim);
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;

    margin-bottom:32px;
}

.section-heading h2{
    margin:8px 0 0;

    font-family:"Fraunces",serif;
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.05;
}

.section-link{
    color:var(--sage);
    text-decoration:none;

    font-weight:700;
    white-space:nowrap;
}

.section-link:hover{
    color:var(--brass-dim);
}


/* =========================================================
   FEATURED ARTICLE
========================================================= */

.featured-card{
    position:relative;

    min-height:390px;

    display:flex;
    align-items:flex-end;

    padding:46px;

    background:
        linear-gradient(
            135deg,
            var(--ink),
            var(--ink-soft)
        );

    border-radius:20px;
    overflow:hidden;

    box-shadow:0 18px 45px rgba(20,31,26,.16);
}

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

    position:absolute;
    right:-100px;
    top:-100px;

    width:300px;
    height:300px;

    border:1px solid rgba(199,154,69,.22);
    border-radius:50%;
}

.featured-content{
    position:relative;
    z-index:2;

    max-width:780px;
}

.featured-content h2{
    margin:14px 0 16px;

    font-family:"Fraunces",serif;
    font-size:clamp(2.2rem,5vw,4rem);
    line-height:1.04;
}

.featured-content h2 a{
    color:var(--paper);
    text-decoration:none;
}

.featured-content p{
    max-width:700px;

    margin-bottom:28px;

    color:#E2DBC4;

    font-size:1.08rem;
    line-height:1.65;
}


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

.article-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.article-card{
    display:flex;
    flex-direction:column;

    min-height:260px;

    padding:28px;

    background:var(--paper);

    border:1px solid var(--line);
    border-radius:15px;

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

.article-card:hover{
    transform:translateY(-4px);

    box-shadow:0 14px 35px rgba(20,31,26,.10);
}

.article-card h3{
    margin:13px 0 12px;

    font-family:"Fraunces",serif;
    font-size:1.55rem;
    line-height:1.15;
}

.article-card h3 a{
    color:var(--ink);
    text-decoration:none;
}

.article-card p{
    margin:0;

    line-height:1.6;
}

.read-more{
    margin-top:auto;
    padding-top:22px;

    color:var(--sage);

    font-weight:700;
    text-decoration:none;
}

.read-more:hover{
    color:var(--brass-dim);
}


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

.category-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.category-card{
    display:block;

    padding:30px;

    background:#fff;

    border:1px solid var(--line);
    border-radius:15px;

    text-decoration:none;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.category-card:hover{
    transform:translateY(-3px);
    border-color:var(--brass);
}

.category-card h3{
    margin:0 0 10px;

    color:var(--ink);

    font-family:"Fraunces",serif;
    font-size:1.55rem;
}

.category-card p{
    margin:0 0 20px;
    line-height:1.55;
}

.category-card span{
    color:var(--sage);
    font-weight:700;
}


/* =========================================================
   BUSINESS OF THE WEEK
========================================================= */

.business-card{
    display:grid;
    grid-template-columns:300px minmax(0,1fr);

    background:var(--paper);

    border:1px solid var(--line);
    border-radius:18px;

    overflow:hidden;
}

.business-image{
    min-height:280px;
    background:var(--paper-dim);
}

.business-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}

.business-content{
    padding:38px;
}

.business-content h2{
    margin:12px 0 15px;

    font-family:"Fraunces",serif;
    font-size:2.3rem;
}

.business-content p{
    line-height:1.65;
}


/* =========================================================
   FEATURED LISTING
========================================================= */

.listing-card{
    display:grid;
    grid-template-columns:280px minmax(0,1fr);

    background:#fff;

    border:1px solid var(--line);
    border-radius:18px;

    overflow:hidden;
}

.listing-image{
    min-height:280px;
    background:var(--paper-dim);
}

.listing-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}

.listing-content{
    padding:38px;
}

.listing-content h2{
    margin:12px 0 14px;

    color:var(--ink);

    font-family:"Fraunces",serif;
    font-size:2.3rem;
}

.listing-content p{
    line-height:1.6;
}

.listing-meta{
    margin:22px 0;
    padding:0;

    list-style:none;
}

.listing-meta li{
    margin:8px 0;

    color:var(--text-soft);
}


/* =========================================================
   NEWSLETTER
========================================================= */

.newsletter-section{
    padding:80px 0;

    background:var(--ink);
}

.newsletter{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;

    padding:50px;

    border:1px solid rgba(239,234,217,.15);
    border-radius:20px;

    background:var(--ink-soft);
}

.newsletter h2{
    margin:12px 0;

    color:var(--paper);

    font-family:"Fraunces",serif;
    font-size:clamp(2rem,4vw,3rem);
}

.newsletter p{
    color:#E2DBC4;
    line-height:1.6;
}

.newsletter-form{
    display:flex;
    gap:10px;
}

.newsletter-form input{
    flex:1;
    min-width:0;

    height:50px;
    padding:0 15px;

    border:1px solid rgba(239,234,217,.25);
    border-radius:7px;

    background:var(--paper);

    color:var(--text);

    font-family:"Source Sans 3",sans-serif;
    font-size:1rem;
}

.newsletter-form input:focus{
    outline:2px solid var(--focus);
    outline-offset:2px;
}

.newsletter-small{
    grid-column:2;

    margin-top:-30px;

    font-size:.82rem;
}


/* =========================================================
   FOOTER
========================================================= */

.blog-footer{
    padding:60px 0 25px;

    background:var(--ink);

    border-top:1px solid rgba(239,234,217,.12);
}

.blog-footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:45px;
}

.blog-footer-grid > div{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.blog-footer-grid p{
    max-width:340px;

    color:#BFC8BE;

    line-height:1.6;
}

.blog-footer-grid h3{
    margin:0 0 16px;

    color:var(--paper);

    font-family:"Fraunces",serif;
}

.blog-footer-grid a:not(.blog-brand){
    margin:6px 0;

    color:#D7DDCF;
    text-decoration:none;
}

.blog-footer-grid a:not(.blog-brand):hover{
    color:var(--brass);
}

.blog-footer-bottom{
    display:flex;
    justify-content:space-between;
    gap:20px;

    margin-top:45px;
    padding-top:22px;

    border-top:1px solid rgba(239,234,217,.12);
}

.blog-footer-bottom p,
.blog-footer-bottom a{
    margin:0;

    color:#AEB8AE;

    font-size:.85rem;
}

.blog-footer-bottom a{
    text-decoration:none;
}


/* =========================================================
   BUTTON FALLBACK
   Uses existing site button styling where available.
========================================================= */

.blog-home-hero .btn,
.newsletter .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:46px;
    padding:10px 22px;

    border:1px solid var(--brass);
    border-radius:7px;

    background:var(--brass);

    color:var(--ink);

    font-family:"Source Sans 3",sans-serif;
    font-weight:700;

    text-decoration:none;

    cursor:pointer;
}

.blog-home-hero .btn:hover,
.newsletter .btn:hover{
    background:var(--paper);
    border-color:var(--paper);
}


/* =========================================================
   TABLE / CHECKLIST SUPPORT FOR ARTICLES
========================================================= */

.blog-content{
    width:min(900px, calc(100% - 40px));
    margin:0 auto;

    padding:60px 0 90px;
}

.blog-content h2{
    margin-top:55px;

    color:var(--ink);

    font-family:"Fraunces",serif;
    font-size:2.25rem;
}

.blog-content h3{
    margin-top:35px;

    color:var(--ink);

    font-family:"Fraunces",serif;
    font-size:1.5rem;
}

.blog-content p,
.blog-content li{
    color:var(--text-soft);

    font-size:1.05rem;
    line-height:1.75;
}

.blog-content li{
    margin:8px 0;
}

.blog-table{
    width:100%;
    margin:28px 0;

    border-collapse:collapse;

    background:#3b4b3e;
}

.blog-table th,
.blog-table td{
    padding:14px 16px;

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

    text-align:left;
}

.blog-table th{
    background:var(--ink);
    color:var(--paper);

    font-family:"Source Sans 3",sans-serif;
}

.blog-note{
    margin:30px 0;
    padding:22px 24px;

    background:rgba(199,154,69,.12);

    border-left:4px solid var(--brass);

    color:var(--text-soft);

    line-height:1.6;
}

.checklist{
    padding:0;

    list-style:none;
}

.checklist li{
    padding:10px 0;

    border-bottom:1px solid var(--line);
}


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

@media(max-width:900px){

    .blog-hero-inner{
        grid-template-columns:1fr;
        gap:40px;
    }

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

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

    .business-card,
    .listing-card{
        grid-template-columns:1fr;
    }

    .business-image,
    .listing-image{
        min-height:220px;
    }

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

    .newsletter-small{
        grid-column:auto;
        margin-top:-30px;
    }

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

}


@media(max-width:720px){

    .blog-container{
        width:min(100% - 28px, 1180px);
    }

    .blog-header-inner{
        width:min(100% - 28px, 1180px);

        min-height:65px;

        flex-direction:column;
        align-items:flex-start;
        justify-content:center;

        padding:12px 0;
    }

    .blog-nav{
        width:100%;

        overflow-x:auto;

        gap:18px;

        padding-bottom:3px;
    }

    .blog-nav a{
        white-space:nowrap;
    }

    .blog-home-hero{
        padding:60px 0;
    }

    .blog-hero-inner{
        width:min(100% - 28px, 1180px);
    }

    .blog-hero-copy h1{
        font-size:clamp(2.7rem,12vw,4rem);
    }

    .blog-search-panel{
        padding:24px;
    }

    .search-input-wrap{
        flex-direction:column;
    }

    .search-input-wrap input,
    .search-input-wrap .btn{
        width:100%;
    }

    .blog-section{
        padding:55px 0;
    }

    .section-heading{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
    }

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

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

    .featured-card{
        min-height:auto;
        padding:30px 24px;
    }

    .featured-content h2{
        font-size:2.25rem;
    }

    .business-content,
    .listing-content{
        padding:28px 24px;
    }

    .newsletter{
        padding:30px 24px;
    }

    .newsletter-form{
        flex-direction:column;
    }

    .newsletter-form input,
    .newsletter-form .btn{
        width:100%;
    }

    .blog-footer-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .blog-footer-bottom{
        flex-direction:column;
    }

    .blog-content{
        width:min(100% - 28px, 900px);
    }

    .blog-content h2{
        font-size:1.9rem;
    }

    .blog-table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

}