/* =========================================================
   SERVOMIX — BLOG
   File: css/pages/blog.css
   Used by: blog/. Markup and copy are the originals (cards,
   sidebar lists and pagination are drawn by
   js/pages/blog.js); this file only lays them out. Every
   value is a token.
========================================================= */

/* ---------------------------------------------------------
   SHARED
--------------------------------------------------------- */

.blog-container{
    width:min(var(--container), 100% - var(--gutter) * 2);
    margin-inline:auto;
}

:where(main[class*="page-"]) small{
    font-size:var(--t-small);
}

.blog-breadcrumb{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-2);
    padding-top:var(--s-5);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.blog-breadcrumb a{
    display:inline-flex;
    align-items:center;
    gap:var(--s-1);
    min-height:32px;
    color:var(--ink-2);
    text-decoration:none;
}

.blog-breadcrumb a:hover{
    color:var(--accent-strong);
}

.blog-breadcrumb > .icon{
    width:14px;
    height:14px;
    color:var(--ink-3);
}

.blog-breadcrumb span{
    color:var(--ink);
    font-weight:var(--w-strong);
}

:where(.blog-search button, .guide-find-button, .guide-popular button, .category-filter, .sidebar-category, .blog-pagination button, #clearArticleSearch, #resetArticles, .article-card, .popular-article, .recent-article):focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}


/* ---------------------------------------------------------
   HERO: search + guide finder
--------------------------------------------------------- */

.blog-hero{
    padding-block:var(--s-6) var(--s-5);
}

.blog-hero-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-6);
    align-items:center;
}

@media (min-width:1024px){

    .blog-hero-grid{
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
        gap:var(--s-8);
    }
}

.blog-hero-content{
    display:grid;
    justify-items:start;
    gap:var(--s-4);
    min-width:0;
}

.blog-hero h1{
    font-size:min(var(--t-display), 12vw);
    line-height:1;
    font-weight:var(--w-display);
    font-stretch:var(--wd-display);
}

.blog-hero h1 span{
    color:var(--accent);
}

.blog-hero-content > p{
    max-width:50ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
    line-height:1.55;
}

.blog-search{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    width:100%;
    max-width:480px;
    padding:var(--s-1) var(--s-1) var(--s-1) var(--s-4);
    border:1px solid var(--line-control);
    border-radius:var(--r-pill);
    background:var(--surface);
    box-shadow:var(--shadow-card);
}

.blog-search:focus-within{
    border-color:var(--accent);
    box-shadow:var(--focus-ring);
}

.blog-search input{
    flex:1;
    min-width:0;
    min-height:40px;
    border:0;
    background:transparent;
    color:var(--ink);
    font:inherit;
    outline:none;
}

.blog-search button{
    display:grid;
    place-items:center;
    flex:none;
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    background:var(--accent);
    color:var(--ink-on-accent);
    cursor:pointer;
}

.guide-finder{
    display:grid;
    gap:var(--s-4);
    padding:var(--card-pad-lg);
    border:1px solid var(--glass-edge);
    border-radius:var(--r-panel);
    background:var(--glass);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    box-shadow:var(--shadow-float);
}

.guide-finder-heading{
    display:flex;
    align-items:center;
    gap:var(--s-3);
}

.guide-finder-icon{
    display:grid;
    place-items:center;
    flex:none;
    width:44px;
    height:44px;
    border-radius:var(--r-control);
    background:var(--accent);
    color:var(--ink-on-accent);
}

.guide-finder-heading span{
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.guide-finder-heading h2{
    font-size:var(--t-h3);
    line-height:var(--lh-h3);
}

.guide-finder-fields{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-3);
}

@media (min-width:640px){

    .guide-finder-fields{
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    }
}

.guide-field{
    display:grid;
    gap:var(--s-1);
}

.guide-field span{
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.guide-field select,
.article-sort select{
    min-height:var(--field-h);
    padding:0 var(--s-3);
    border:1px solid var(--line-control);
    border-radius:var(--r-control);
    background:var(--surface);
    color:var(--ink);
    font:inherit;
}

.guide-field select:disabled{
    background:var(--surface-sunken);
    color:var(--ink-2);
}

.guide-find-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--s-2);
    min-height:var(--btn-h);
    border:0;
    border-radius:var(--r-pill);
    background:var(--accent);
    color:var(--ink-on-accent);
    font:inherit;
    font-weight:var(--w-strong);
    cursor:pointer;
}

.guide-find-button:hover{
    background:var(--accent-strong);
}

.guide-popular{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-2);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.guide-popular i{
    display:none;
}

.guide-popular button{
    min-height:32px;
    padding:0 var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink);
    font:inherit;
    font-size:var(--t-small);
    cursor:pointer;
}

.guide-popular button:hover{
    border-color:var(--accent);
    color:var(--accent-strong);
}


/* ---------------------------------------------------------
   CATEGORY FILTERS
--------------------------------------------------------- */

.blog-categories{
    padding-block:var(--s-4);
}

.category-filter-list{
    display:flex;
    gap:var(--s-2);
    overflow-x:auto;
    padding-bottom:var(--s-1);
    scrollbar-width:thin;
}

.category-filter{
    display:inline-flex;
    flex:none;
    align-items:center;
    gap:var(--s-2);
    min-height:40px;
    padding:0 var(--s-4);
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink-2);
    font:inherit;
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    cursor:pointer;
}

.category-filter:hover{
    border-color:var(--accent);
    color:var(--ink);
}

.category-filter.active{
    border-color:transparent;
    background:var(--accent);
    color:var(--ink-on-accent);
}


/* ---------------------------------------------------------
   ARTICLES + SIDEBAR
--------------------------------------------------------- */

.blog-main{
    padding-block:var(--s-5) var(--s-8);
}

.blog-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-6);
    align-items:start;
}

@media (min-width:1024px){

    .blog-layout{
        grid-template-columns:minmax(0, 1fr) 320px;
    }
}

.articles-area{
    display:grid;
    gap:var(--s-4);
    min-width:0;
}

.articles-heading{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
}

.articles-heading > div{
    display:flex;
    align-items:center;
    gap:var(--s-2);
}

.articles-heading > div .icon{
    color:var(--accent);
}

.articles-heading h2{
    font-size:var(--t-h2);
    font-weight:var(--w-h2);
}

.article-sort{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.article-sort select{
    min-height:40px;
}

.article-result-info{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
    padding:var(--s-3) var(--s-4);
    border-radius:var(--r-control);
    background:var(--accent-tint);
    color:var(--ink);
    font-size:var(--t-small);
}

.article-result-info[hidden]{
    display:none;
}

#clearArticleSearch,
#resetArticles{
    display:inline-flex;
    align-items:center;
    gap:var(--s-1);
    min-height:36px;
    padding:0 var(--s-3);
    border:1px solid var(--line-strong);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink);
    font:inherit;
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    cursor:pointer;
}

.articles-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-4);
}

@media (min-width:640px){

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

/* cards are drawn by the page script */
.article-card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    color:var(--ink);
    text-decoration:none;
    transition:box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.article-card:hover{
    box-shadow:var(--shadow-card);
    transform:translateY(-2px);
}

.article-card-image{
    position:relative;
    aspect-ratio:16 / 9;
    background:linear-gradient(135deg, var(--accent-soft), var(--surface-sunken));
}

.article-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.article-new-badge{
    position:absolute;
    top:var(--s-3);
    left:var(--s-3);
    min-height:24px;
    padding:0 var(--s-2);
    border-radius:var(--r-pill);
    background:var(--accent);
    color:var(--ink-on-accent);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    line-height:24px;
}

.article-card-content{
    display:flex;
    flex:1;
    flex-direction:column;
    gap:var(--s-2);
    padding:var(--card-pad);
}

.article-category{
    width:max-content;
    color:var(--accent-strong);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
    text-transform:uppercase;
}

.article-card h3{
    font-size:var(--t-h3);
    line-height:var(--lh-h3);
}

.article-card-description{
    color:var(--ink-2);
    font-size:var(--t-small);
    line-height:var(--lh-small);
}

.article-card-meta{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-3);
    margin-top:auto;
    padding-top:var(--s-3);
    border-top:1px solid var(--line);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.article-card-meta span{
    display:inline-flex;
    align-items:center;
    gap:var(--s-1);
}

.articles-empty{
    display:grid;
    justify-items:center;
    gap:var(--s-2);
    padding:var(--s-8) var(--s-4);
    border:1px dashed var(--line-strong);
    border-radius:var(--r-card);
    text-align:center;
}

.articles-empty[hidden]{
    display:none;
}

.articles-empty > div > .icon{
    width:40px;
    height:40px;
    color:var(--ink-3);
}

.articles-empty p{
    color:var(--ink-2);
}

.blog-pagination{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--s-2);
}

.blog-pagination button{
    display:grid;
    place-items:center;
    min-width:40px;
    height:40px;
    padding:0 var(--s-2);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface);
    color:var(--ink);
    font:inherit;
    font-weight:var(--w-strong);
    cursor:pointer;
}

.blog-pagination button:disabled{
    color:var(--ink-3);
    cursor:default;
}

.blog-pagination button.active{
    border-color:transparent;
    background:var(--accent);
    color:var(--ink-on-accent);
}

/* sidebar */
.blog-sidebar{
    display:grid;
    gap:var(--s-4);
    min-width:0;
}

@media (min-width:1024px){

    .blog-sidebar{
        position:sticky;
        top:calc(var(--nav-h) + var(--s-5));
    }
}

.sidebar-card{
    display:grid;
    gap:var(--s-3);
    padding:var(--card-pad);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

.sidebar-card-heading{
    display:flex;
    align-items:center;
    gap:var(--s-2);
}

.sidebar-card-heading .icon{
    color:var(--accent);
}

.sidebar-card-heading h3{
    font-size:var(--t-body);
    font-weight:var(--w-strong);
}

.popular-articles,
.recent-articles,
.sidebar-categories{
    display:grid;
    gap:var(--s-1);
}

.popular-article,
.recent-article{
    display:grid;
    grid-template-columns:56px minmax(0, 1fr);
    align-items:center;
    gap:var(--s-3);
    padding:var(--s-2);
    border-radius:var(--r-control);
    color:var(--ink);
    text-decoration:none;
}

.popular-article:hover,
.recent-article:hover{
    background:var(--surface-sunken);
}

.popular-article{
    grid-template-columns:56px minmax(0, 1fr) auto;
}

.popular-article-thumb,
.recent-article-thumb{
    width:56px;
    height:56px;
    overflow:hidden;
    border-radius:var(--r-control);
    background:var(--accent-soft);
}

.popular-article-thumb img,
.recent-article-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.popular-article-content,
.recent-article-content{
    display:grid;
    gap:2px;
    font-size:var(--t-small);
    line-height:var(--lh-small);
}

.popular-article-content strong,
.recent-article-content strong{
    font-weight:var(--w-strong);
}

.popular-article-content span,
.recent-article-content span,
.popular-article-views{
    color:var(--ink-2);
    font-size:var(--t-micro);
}

.sidebar-category{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-2);
    min-height:40px;
    padding:0 var(--s-3);
    border:0;
    border-radius:var(--r-control);
    background:transparent;
    color:var(--ink);
    font:inherit;
    font-size:var(--t-small);
    text-align:left;
    cursor:pointer;
}

.sidebar-category:hover{
    background:var(--surface-sunken);
}

.sidebar-category.active{
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.sidebar-category span:last-child{
    min-width:24px;
    padding:0 var(--s-1);
    border-radius:var(--r-pill);
    background:var(--surface-sunken);
    color:var(--ink-2);
    font-size:var(--t-micro);
    text-align:center;
}

.sidebar-hosting-card{
    display:grid;
    justify-items:start;
    gap:var(--s-2);
    padding:var(--card-pad);
    border-radius:var(--r-card);
    background:var(--console);
    color:var(--console-ink);
}

.sidebar-hosting-icon{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:var(--r-control);
    background:var(--accent);
    color:var(--ink-on-accent);
}

.sidebar-hosting-card > span{
    color:var(--console-ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.sidebar-hosting-card h3{
    color:var(--console-ink);
    font-size:var(--t-h3);
}

.sidebar-hosting-card p{
    color:var(--console-ink-2);
    font-size:var(--t-small);
}

.sidebar-hosting-card a{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:40px;
    margin-top:var(--s-1);
    padding:0 var(--s-4);
    border-radius:var(--r-pill);
    background:var(--accent);
    color:var(--ink-on-accent);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    text-decoration:none;
}

.sidebar-hosting-card a:hover{
    background:var(--accent-strong);
}