/* ============================================================================
   Blog — magazine section (home grid + single post). Ported & modernised from
   the live /de/blog/ layout. Self-contained: blog pages use the standard header
   + footer but NO left sidebar, so the layout is full-width and centred here.
   Loaded only on blog pages (head.php, gated by $isBlog). Brand vars from main.css.
   Fully responsive: 3 → 2 → 1 card columns, fluid type via clamp().
   ========================================================================== */

/* ---- full-width layout (no sidebar) ------------------------------------- */
/* The sidebar pushes both #content AND #footer right by 306px — with no sidebar
   on blog pages, zero both so content and footer span the full width. */
body.blog-layout #content,
body.blog-layout #footer { margin-left: 0; }
body.blog-layout .header-wrap__toggle { display: none; } /* no sidebar → no hamburger */
/* The fixed CTA bar starts at left:306px (after the sidebar) and centres its button
   inside that band — with no sidebar, span the full width so it centres in the viewport. */
body.blog-layout .btn-fixed-wrap-desctop { left: 0; }

.blog-page { --blog-max: 1180px; color: #2f3d40; }
.blog-page a { text-decoration: none; }

/* ---- top hero (blog home) ----------------------------------------------- */
.top-section {
    position: relative;
    min-height: clamp(240px, 38vw, 420px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}
.top-section__img { position: absolute; inset: 0; z-index: -2; }
.top-section__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.top-section::after {                                   /* brand-green wash for legibility */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(11,62,39,.62), rgba(11,62,39,.78));
}
.top-section__desc { padding: 32px 20px; max-width: 900px; }
.top-section__title {
    margin: 0;
    color: #fff;
    font-weight: 700;
    line-height: 1.1;
    font-size: clamp(30px, 5vw, 58px);
    text-shadow: 0 2px 18px rgba(0,0,0,.28);
}
.top-section__sub-title {
    margin-top: 14px;
    color: var(--brand-gold);
    font-weight: 600;
    letter-spacing: .3px;
    font-size: clamp(16px, 2.2vw, 24px);
}
.top-section__sub-title::before,
.top-section__sub-title::after { content: "\2014"; opacity: .55; margin: 0 .5em; }

/* ---- content card (.wrap) ----------------------------------------------- */
/* Both the home grid and the post body float in a centred white card on the
   hexagon pattern. Shared look here; per-page width/padding below. */
.blog-page .wrap {
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 12px 44px rgba(11,62,39,.12);
}
.blog-page.blog-home .wrap {
    width: min(1240px, 100% - 32px);
    margin: clamp(28px, 4vw, 56px) auto;
    padding: clamp(24px, 4vw, 48px);
}

/* ---- article grid (home) ------------------------------------------------ */
.articles-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: clamp(20px, 2.4vw, 32px);
}
.articles-wrap article { display: flex; }
.article-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid #e7ece9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(18,119,73,.06);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.article-wrap:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 38px rgba(18,119,73,.16);
    border-color: var(--brand-gold);
}
.overview-wrap { display: flex; flex-direction: column; flex: 1 1 auto; }

.article-wrap .post-thumbnail { margin: 0; overflow: hidden; }
.article-wrap .post-thumbnail a { display: block; }
.article-wrap .post-thumbnail img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.article-wrap:hover .post-thumbnail img { transform: scale(1.05); }

.article-wrap h2 {
    margin: 0;
    padding: 20px 22px 0;
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.3;
    font-weight: 700;
}
.article-wrap h2 a { color: var(--brand-green-dark); transition: color .18s ease; }
.article-wrap:hover h2 a,
.article-wrap h2 a:hover { color: var(--brand-green); }

.excerpt-wrap {
    padding: 12px 22px 20px;
    color: #55635f;
    font-size: 15px;
    line-height: 1.6;
    flex: 1 1 auto;
}

.article-wrap .go-to {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: 0 22px 22px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--brand-green);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    transition: background .18s ease, gap .18s ease;
}
.article-wrap .go-to::after {
    content: "\2192";                                    /* → */
    font-size: 15px;
    transition: transform .18s ease;
}
.article-wrap .go-to:hover { background: var(--brand-green-dark); }
.article-wrap .go-to:hover::after { transform: translateX(4px); }

/* ---- single post -------------------------------------------------------- */
/* Subtle hexagon pattern behind BOTH the home grid and the post card. */
.blog-page {
    background-image: url("/media/pages/de/blog/bg-pattern.webp");
    background-repeat: repeat;
    background-size: 520px auto;
}
/* Post pages: the article floats in a centred white card (.wrap) on the pattern.
   The article BODY uses the standard site content styling (.section-block
   .title/.sub-title/.list-check/links) — no bespoke typography here. */
.blog-page.blog-article {
    padding: clamp(22px, 4vw, 56px) 16px;
}
.blog-page.blog-article .wrap {
    max-width: 980px;
    padding: clamp(22px, 4vw, 60px);
}
/* Inside the card, drop the standard 875px cap + 7vw CLA-rail left offset so the
   content fills and centres in the card; the card padding gives the reading margin. */
.blog-page.blog-article .wrap .section-block,
.blog-page.blog-article .wrap .section-wrap {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.blog-nav__back {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid #d9e2dd;
    color: var(--brand-green);
    font-weight: 600;
    font-size: 14px;
    background: #fff;
    transition: background .18s ease, border-color .18s ease, gap .18s ease;
}
.blog-nav__back::before { content: "\2190"; transition: transform .18s ease; } /* ← */
.blog-nav__back:hover { background: #f2f8f4; border-color: var(--brand-green); }
.blog-nav__back:hover::before { transform: translateX(-3px); }

/* post hero image */
.blog-article .post-thumbnail {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(18,119,73,.12);
}
.blog-article .post-thumbnail img {
    width: 100%;
    max-height: 440px;
    object-fit: cover;
    display: block;
}

/* ---- shared: terms line sits comfortably full-width ---------------------- */
.blog-page ~ .agb-note,
body.blog-layout .agb-note { max-width: var(--blog-max, 1180px); margin-left: auto; margin-right: auto; }

/* ---- EN/ES stub (blog is German-only; switcher still resolves) ---------- */
.blog-stub {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    padding: clamp(20px, 5vw, 48px) 0;
}
.blog-stub p { font-size: clamp(17px, 2vw, 20px); color: #55635f; margin: 0 0 26px; }
.blog-stub .go-to {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 26px; border-radius: 999px;
    background: var(--brand-green); color: #fff; font-weight: 600;
    transition: background .18s ease, gap .18s ease;
}
.blog-stub .go-to::after { content: "\2192"; transition: transform .18s ease; }
.blog-stub .go-to:hover { background: var(--brand-green-dark); }
.blog-stub .go-to:hover::after { transform: translateX(4px); }

/* ---- responsive niceties ------------------------------------------------ */
@media (max-width: 600px) {
    .articles-wrap { grid-template-columns: 1fr; }
    .top-section__sub-title::before,
    .top-section__sub-title::after { margin: 0 .35em; }
}