/* The Icon — pagina de noutati (lista de articole).
   Se incarca ULTIMA in layout, doar pe ruta listei, dupa brand-navy si
   home-motion; asa poate rescrie regulile vechi fara `!important` peste tot.

   Ce inlocuieste: o coloana principala ingusta plus o bara laterala de 330px
   care repeta exact aceleasi articole („Postari recente") si o lista de taguri.
   Cu trei articole publicate, jumatate de ecran arata de doua ori acelasi
   lucru, iar cardurile ramase au 240px latime, cu titluri rupte pe sase randuri.

   Ce pune in loc: fara bara laterala. Tagurile devin filtre in bara de sus,
   articolul recomandat primeste o banda larga, restul o grila uniforma.
   Cardurile nu mai au fundal, contur si umbra — imaginea e ancora vizuala,
   textul sta direct pe pagina. */

body.public-blog-page {
    --b-gold: #d6b46d;
    --b-gold-soft: rgba(214, 180, 109, .34);
    --b-cream: #f1e9db;
    --b-mut: #9fb0c8;
    --b-line: rgba(214, 180, 109, .16);
    --b-surface: #13243f;
    --b-shell: min(1240px, 100%);

    --reveal-dur: 1500ms;
    --reveal-ease: cubic-bezier(.16, 1, .3, 1);
    --reveal-y: 52px;
    --reveal-step: 110ms;
}

/* ============================================================
   1. Hero
   ============================================================ */

/* Hero-ul avea fundal negru propriu, deci se decupa ca o caramida peste navy.
   Aceeasi tratare minimala ca pe galerie: fundal transparent, text centrat. */
html body.public-blog-page .page-hero.blog-page-hero {
    padding: clamp(78px, 9vw, 128px) 24px clamp(34px, 4vw, 52px);
    background: transparent !important;
    background-image: none !important;
    text-align: center;
}

html body.public-blog-page .blog-page-hero::before,
html body.public-blog-page .blog-page-hero::after {
    display: none !important;
}

html body.public-blog-page .blog-page-hero .page-hero-inner {
    width: min(1050px, 100%);
    margin: 0 auto;
    padding: 0;
}

.blog-hero-eyebrow {
    display: block;
    color: var(--b-gold);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
}

html body.public-blog-page .blog-page-hero h1 {
    max-width: 100%;
    margin: 24px auto 22px;
    color: var(--b-cream);
    font-size: clamp(38px, 5.1vw, 70px);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: 1.12;
    text-wrap: balance;
    text-shadow: none;
}

html body.public-blog-page .blog-page-hero h1 em {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    color: #dec38f;
}

html body.public-blog-page .blog-page-hero p {
    max-width: 640px;
    margin: 0 auto;
    color: var(--b-mut);
    font-size: 15px;
    line-height: 1.8;
    text-shadow: none;
}

.blog-hero-rule {
    display: block;
    width: 42px;
    height: 1px;
    margin: 30px auto 0;
    background: var(--b-gold);
    opacity: .55;
}

/* ============================================================
   2. Bara de filtre
   ============================================================ */

body.public-blog-page .blog-page-section {
    padding-top: clamp(30px, 3.4vw, 48px);
}

.blog-bar {
    width: var(--b-shell);
    margin: 0 auto clamp(30px, 3.4vw, 48px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--b-line);
}

.blog-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 7px;
}

/* Invariantul de butoane: fundal transparent, contur si text in aceeasi culoare. */
body.public-blog-page .blog-tags a {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--b-mut);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: none;
    transition: color .25s ease, border-color .25s ease;
}

body.public-blog-page .blog-tags a:hover {
    background: transparent;
    color: var(--b-cream);
    border-color: var(--b-gold-soft);
}

body.public-blog-page .blog-tags a.active {
    background: transparent;
    color: var(--b-gold);
    border-color: var(--b-gold);
}

.blog-count {
    color: var(--b-gold);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ============================================================
   3. Articolul recomandat
   ============================================================ */

body.public-blog-page .blog-featured {
    width: var(--b-shell);
    margin: 0 auto clamp(38px, 4.4vw, 64px);
    padding: 0 0 clamp(38px, 4.4vw, 64px);
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 3.4vw, 52px);
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--b-line) !important;
    box-shadow: none !important;
}

body.public-blog-page .blog-featured-media {
    position: relative;
    height: 0;
    min-height: 0;
    padding: 62% 0 0;        /* procentul se raporteaza la LATIME: inaltime stabila in orice motor */
    overflow: hidden;
    border-radius: 4px;
    background: var(--b-surface);
}

body.public-blog-page .blog-featured-media img,
body.public-blog-page .blog-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}

.blog-featured-flag {
    display: inline-block;
    color: var(--b-gold);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
}

body.public-blog-page .blog-featured h2 {
    margin: 18px 0 16px;
    font-family: inherit;
    font-size: clamp(26px, 3vw, 42px);
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: 1.1;
    text-wrap: balance;
}

body.public-blog-page .blog-featured h2 a {
    color: var(--b-cream);
    transition: color .25s ease;
}

body.public-blog-page .blog-featured h2 a:hover { color: var(--b-gold); }

body.public-blog-page .blog-featured p {
    margin: 0;
    max-width: 54ch;
    color: var(--b-mut);
    font-size: 15px;
    line-height: 1.75;
}

/* ============================================================
   4. Meta si legatura de citire
   ============================================================ */

body.public-blog-page .blog-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 0;
    color: var(--b-mut) !important;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Punct auriu intre data si subiect, in loc de doua etichete lipite. */
body.public-blog-page .blog-meta > * + *::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--b-gold);
    vertical-align: middle;
}

.blog-readlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--b-gold);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.blog-readlink svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.blog-readlink:hover svg,
.blog-card:hover .blog-readlink svg { transform: translateX(4px); }

/* ============================================================
   5. Grila de articole
   ============================================================ */

body.public-blog-page .blog-grid {
    width: var(--b-shell);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 2.4vw, 38px) clamp(18px, 2vw, 30px);
    align-items: start;
}

/* Fara fundal, contur sau umbra: imaginea e ancora, textul sta pe pagina. */
body.public-blog-page .blog-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible;
    transition: none;
}

body.public-blog-page .blog-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

body.public-blog-page .blog-card-media {
    position: relative;
    display: block;
    height: 0;
    min-height: 0;
    padding: 66.6667% 0 0;   /* 2/3 din latime = raportul 3:2 al imaginilor */
    overflow: hidden;
    border-radius: 4px;
    background: var(--b-surface);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

body.public-blog-page .blog-card:hover .blog-card-media img,
body.public-blog-page .blog-featured:hover .blog-featured-media img {
    transform: scale(1.04);
    filter: none;
}

body.public-blog-page .blog-card-body {
    padding: 18px 0 0;
}

body.public-blog-page .blog-card h3 {
    margin: 14px 0 10px;
    font-size: clamp(18px, 1.5vw, 21px);
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.25;
    text-wrap: balance;
}

body.public-blog-page .blog-card h3 a {
    color: var(--b-cream);
    transition: color .25s ease;
}

body.public-blog-page .blog-card h3 a:hover { color: var(--b-gold); }

body.public-blog-page .blog-card p {
    margin: 0;
    color: var(--b-mut);
    font-size: 14px;
    line-height: 1.7;
}

/* In card, „Citeste articolul" e doar indiciu vizual: tot cardul e deja
   accesibil prin titlu, iar un al doilea link catre aceeasi tinta ar dubla
   degeaba numarul de opriri la navigarea cu tastatura. */
body.public-blog-page .blog-card .blog-readlink {
    margin-top: 16px;
}

body.public-blog-page .blog-card-media:focus-visible,
body.public-blog-page .blog-card h3 a:focus-visible,
body.public-blog-page .blog-featured h2 a:focus-visible {
    outline: 2px solid var(--b-gold);
    outline-offset: 3px;
}

body.public-blog-page .blog-empty-state {
    grid-column: 1 / -1;
    margin: 0;
    padding: 56px 0;
    text-align: center;
    color: var(--b-mut);
}

body.public-blog-page .blog-empty-state a {
    color: var(--b-gold);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ============================================================
   6. Paginare si incheiere
   ============================================================ */

body.public-blog-page .public-pagination {
    width: var(--b-shell);
    margin: clamp(34px, 3.6vw, 52px) auto 0;
}

.blog-cta {
    width: var(--b-shell);
    margin: clamp(48px, 5.5vw, 82px) auto 0;
    padding-top: clamp(28px, 3vw, 40px);
    border-top: 1px solid var(--b-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px 32px;
}

body.public-blog-page .blog-cta p {
    margin: 0;
    max-width: 52ch;
    color: var(--b-cream);
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 400;
    letter-spacing: -.015em;
}

.blog-cta a {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 26px;
    border: 1px solid var(--b-gold);
    border-radius: 999px;
    background: transparent;
    color: var(--b-gold);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: color .25s ease, border-color .25s ease;
}

.blog-cta a:hover {
    color: var(--b-cream);
    border-color: var(--b-cream);
}

/* ============================================================
   7. Reveal — scopat pe noutati
   ============================================================ */

html.reveal-ready body.public-blog-page [data-reveal],
html.reveal-ready body.public-blog-page [data-reveal-stagger] > * {
    opacity: 0;
    transform: translate3d(0, var(--reveal-y), 0);
    transition:
        opacity var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms),
        transform var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

html.reveal-ready body.public-blog-page [data-reveal="fade"] { transform: none; }

html.reveal-ready body.public-blog-page [data-reveal-stagger] > * {
    --reveal-delay: calc(var(--reveal-i, 0) * var(--reveal-step));
    --reveal-y: 38px;
}

html.reveal-ready body.public-blog-page [data-reveal].is-in,
html.reveal-ready body.public-blog-page [data-reveal-stagger] > *.is-in {
    opacity: 1;
    transform: none;
}

html.reveal-ready body.public-blog-page [data-reveal].is-done,
html.reveal-ready body.public-blog-page [data-reveal-stagger] > *.is-done {
    transition: none;
    will-change: auto;
}

html.reveal-ready body.public-blog-page .reveal-force {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ============================================================
   8. Ecrane mici
   ============================================================ */

@media (max-width: 1000px) {
    body.public-blog-page .blog-featured {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    body.public-blog-page .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    body.public-blog-page {
        --reveal-y: 30px;
        --reveal-dur: 1200ms;
        --reveal-step: 80ms;
    }

    html body.public-blog-page .page-hero.blog-page-hero {
        padding: 66px 22px 26px;
    }

    html body.public-blog-page .blog-page-hero h1 {
        font-size: 36px;
        margin: 20px auto 18px;
    }

    html body.public-blog-page .blog-page-hero p {
        font-size: 14px;
        max-width: 40ch;
    }

    .blog-bar {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    /* Tagurile raman pe un rand, cu derulare laterala, ca pe restul site-ului. */
    .blog-tags {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .blog-tags::-webkit-scrollbar { display: none; }
    body.public-blog-page .blog-tags a { flex: 0 0 auto; }

    body.public-blog-page .blog-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.public-blog-page .blog-card-media img,
    body.public-blog-page .blog-featured-media img,
    .blog-readlink svg {
        transition: none;
    }
}