/*
 * ************************************************************
 * ************************************************************
 * ** Copyright (c) flavio.ferrara.it
 * ** All rights reserved.
 * **
 * ** Strict Proprietary Notice:
 * ** This website data, source code, and associated
 * ** assets are the exclusive property of flavio.ferrara.it.
 * ** Unauthorized copying, modification,
 * ** or distribution via any medium is strictly prohibited.
 * ************************************************************
 * ************************************************************
 */

/* ==========================
   SECTION / BLOG
   Built entirely from the site's existing design tokens
   (base/variables.css) and component classes (.skill-card-style cards,
   .btn buttons) — no new colors, type scale, or spacing values.
========================== */

.blog-eyebrow{
    color:var(--accent);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.05em;
    font-size:0.85rem;
    margin-bottom:8px;
    display:block;
}

/* Featured article */
.blog-featured{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    display:block;
    margin-bottom:56px;
    /* .blog-featured is an <a> — the whole card is one click target
       (image, title, excerpt, everything), not just the title/button —
       so browser default link styling needs neutralizing here. */
    color:inherit;
    text-decoration:none;
}

.blog-featured:hover .blog-featured-body h2{
    color:var(--accent);
}

.blog-featured img{
    display:block;
    width:100%;
    /* Cover images are generated at 1200x630 (1.91:1 — see the
       admin's cover-image hint) with a full-bleed background and bold
       typography reaching close to the edges (art direction, see
       docs/hub-and-spoke-content-framework.md). A side-by-side layout
       previously forced object-fit:cover into a squarish slot, cropping
       most of that composition off the sides. Matching the container's
       aspect-ratio to the source image means object-fit:cover has
       nothing to crop — the whole image always shows. */
    aspect-ratio:1200/630;
    object-fit:cover;
}

.blog-featured-body{
    padding:40px;
    display:flex;
    flex-direction:column;
}

.blog-featured-body h2{
    color:var(--navy);
    margin-bottom:12px;
}

.blog-featured-body p{
    color:var(--slate);
    margin-bottom:20px;
}

.blog-meta{
    color:var(--slate);
    font-size:0.9rem;
    margin-bottom:8px;
}

/* Latest articles carousel */
.blog-carousel-heading{
    color:var(--navy);
    margin-bottom:20px;
}

.blog-carousel{
    display:flex;
    gap:24px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:12px;
    margin-bottom:56px;
}

.blog-carousel-card{
    flex:0 0 300px;
    scroll-snap-align:start;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    display:block;
}

.blog-carousel-card img{
    width:100%;
    height:160px;
    object-fit:cover;
}

.blog-carousel-card-body{
    padding:20px;
}

.blog-carousel-card h3{
    color:var(--navy);
    font-size:1.1rem;
    margin-bottom:8px;
}

.blog-carousel-card p{
    color:var(--slate);
    font-size:0.9rem;
}

/* Search */
.blog-empty-state{
    max-width:600px;
    margin:0 auto 56px;
    text-align:center;
    background:var(--off-white);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:48px 40px;
}

.blog-empty-state h2{
    color:var(--navy);
    margin-bottom:16px;
}

.blog-empty-state p{
    color:var(--slate);
}

.blog-search{
    max-width:560px;
    margin:0 auto 56px;
    text-align:center;
}

.blog-search form{
    display:flex;
    gap:12px;
}

.blog-search input[type="search"]{
    flex:1;
    padding:14px 18px;
    border:1px solid var(--border);
    border-radius:999px;
    font-size:1rem;
}

.blog-search-results{
    max-width:800px;
    margin:0 auto;
}

.blog-search-result{
    display:block;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:28px 32px;
    margin-bottom:20px;
    /* .blog-search-result is an <a> — the whole card is one click
       target, not just the title — so link defaults are neutralized. */
    color:inherit;
    text-decoration:none;
}

.blog-search-result h2{ font-size:1.3rem; margin-bottom:8px; color:var(--navy); }
.blog-search-result p{ color:var(--slate); }
.blog-search-result:hover h2{ color:var(--accent); }

/* Article page */
.blog-article-hero{
    max-width:800px;
    margin:0 auto 40px;
    text-align:center;
}

.blog-article-hero h1{
    color:var(--navy);
    margin-bottom:16px;
}

.blog-article-cover{
    width:100%;
    max-width:900px;
    border-radius:var(--radius);
    margin:0 auto 40px;
    display:block;
}

.blog-preview-wrap{
    padding-top:32px;
    padding-bottom:32px;
}

.blog-article-body{
    max-width:720px;
    margin:0 auto;
    color:var(--charcoal);
    line-height:1.75;
}

.blog-article-body h2{ color:var(--navy); margin:40px 0 16px; }
.blog-article-body h3{ color:var(--navy); margin:32px 0 12px; }
.blog-article-body p{ margin-bottom:20px; }
.blog-article-body ul, .blog-article-body ol{ margin:0 0 20px 24px; }
.blog-article-body li{ margin-bottom:8px; }
.blog-article-body blockquote{
    border-left:3px solid var(--accent);
    padding-left:20px;
    color:var(--slate);
    font-style:italic;
    margin:24px 0;
}
.blog-article-body pre{
    background:var(--off-white);
    border:1px solid var(--border);
    border-radius:8px;
    padding:16px;
    overflow-x:auto;
    margin-bottom:20px;
}
.blog-article-body code{
    font-family:monospace;
    background:var(--off-white);
    padding:2px 6px;
    border-radius:4px;
}
.blog-article-body pre code{ background:none; padding:0; }
.blog-article-body img{ max-width:100%; border-radius:8px; }
.blog-article-body a{ color:var(--accent); }

.blog-disclaimer{
    max-width:720px;
    margin:40px auto 0;
    padding:16px 20px;
    background:var(--off-white);
    border:1px solid var(--border);
    border-radius:8px;
    color:var(--slate);
    font-size:0.9rem;
}

.blog-related{
    max-width:1000px;
    margin:56px auto 0;
}

.blog-related h2{
    color:var(--navy);
    margin-bottom:20px;
    text-align:center;
}