/* ============================================================================
   Blog Section & Cards (based on portfolio-card-base)
   ============================================================================ */

.blog-section {
    padding: calc(var(--header-actual-height, 105px) + var(--cookie-banner-height, 0px) + var(--spacing-xl)) 0 var(--spacing-xl);
}

.blog-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.blog-page-title {
    margin-bottom: var(--spacing-sm);
}

.blog-intro {
    color: var(--text-gray);
    font-size: clamp(0.95rem, 2vw + 0.3rem, 1.1rem);
    max-width: min(800px, 90vw);
    margin: 0 auto;
    line-height: 1.8;
}

.blog-empty {
    text-align: center;
    color: var(--text-gray);
    padding: var(--spacing-xxl) 0;
}

/* Blog Grid — .blog-section (parent) already resolves to var(--content-width) via
   the generic section.css rule, so re-applying var(--content-width) here computed
   it AGAIN against that already-narrowed parent box (100% referenced the parent's
   1400px content-width, not the viewport), stacking a second --content-inline
   gutter on top of the first and making the grid ~96px narrower than the nav/
   header above it. width: 100% simply fills the parent, matching site-wide
   alignment. */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(var(--spacing-sm), 2vw, var(--spacing-lg));
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

.blog-grid-loading {
    min-height: 60vh;
    align-content: center;
    justify-items: center;
}

/* Blog Card — thumbnail on the LEFT beside the title/text, matching Blogger's own
   list layout (see the Blogger reference cards: small square thumb + text to its
   right). CSS Grid lets the media occupy a fixed-width left column that spans all
   three text rows, without needing to change the JS-generated DOM order
   (header, media, body, footer stay as siblings; grid-area repositions them). */
.blog-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-areas:
        "media header"
        "media body"
        "media footer";
    align-items: start;
    height: 100%;
    background: var(--bg-card, #242424);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.blog-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--primary, #32b38d);
    box-shadow: 0 8px 24px rgba(50, 179, 141, 0.3);
}

/* Entrance state for the staggered reveal in blog-loader.js: cards start hidden/
   offset, then the JS removes this class one-by-one (after the loader has fully
   faded out) so they animate into place in reading order, top to bottom — instead
   of all popping in at once underneath the still-visible spinner. */
.blog-card-hidden {
    opacity: 0;
    transform: translateY(24px);
}

/* Posts without a thumbnail render no .blog-card-media element at all — collapse
   the reserved left column so header/body/footer don't leave a blank gap. */
.blog-card:not(:has(.blog-card-media)) {
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "body"
        "footer";
}

/* 16:9-friendly box: never crops the image (object-fit: contain below), just
   grows the thumbnail until it hits either the row's height or the column's
   width — letterboxing whichever axis is left over, instead of cutting the
   logo/artwork off like "object-fit: cover" was doing. */
.blog-card-media {
    grid-area: media;
    width: 100%;
    height: 100%;
    min-height: 123.75px;
    position: relative;
    overflow: hidden;
    background: var(--bg-dark, #1a1a1a);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-media img {
    transform: scale(1.05);
}

.blog-card-header {
    grid-area: header;
    padding: 1.25rem 1.5rem 0.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: left;
}

.blog-card-date {
    font-size: 0.8rem;
    color: var(--primary, #32b38d);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
}

.blog-card-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-light, #ffffff);
    margin: 0;
    line-height: 1.3;
    text-align: left;
}

/* Crawlable permalink wrapping the card title — visually identical to plain text. */
.blog-card-permalink {
    color: inherit;
    text-decoration: none;
}

.blog-card-permalink:hover {
    text-decoration: none;
    color: var(--primary, #32b38d);
}

.blog-card-body {
    grid-area: body;
    padding: 0 1.5rem 1rem 1rem;
    min-height: 0;
}

.blog-card-excerpt {
    color: var(--text-gray, #b0b0b0);
    line-height: 1.7;
    margin: 0;
    font-size: 0.95rem;
}

.blog-card-footer {
    grid-area: footer;
    min-height: 50px;
    padding: 0.5rem 1.5rem 1rem 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}

.blog-card-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary, #32b38d);
    background: rgba(50, 179, 141, 0.1);
    padding: 0.28rem 0.85rem;
    border-radius: 999px;
}

/* Pagination */
.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    padding: var(--spacing-md) 0;
}

.blog-pagination-info {
    color: var(--text-gray);
    font-weight: 600;
    font-size: 0.95rem;
}

.blog-pagination .disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================================
   Blog Modal
   Struktúra: backdrop (click-to-close) + content box (flex column)
   - close gomb: absolute a content box tetejéhez képest
   - header: flex-shrink: 0 → sosem scrollol, mindig a tetején van
   - blog-body: flex: 1, overflow: hidden → a tényleges scroll konténer
   - blog-text: flex: 1, overflow-y: auto → csak ez scrollol
   ============================================================================ */

.blog-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(var(--header-actual-height, 105px) + var(--cookie-banner-height, 0px) + 16px) 1rem 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow-y: auto;
}

.blog-modal.active {
    opacity: 1;
    visibility: visible;
}

.blog-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    z-index: 0;
}

/* ---- Content box ---- */
.blog-modal-content {
    position: relative;
    z-index: 1;
    width: min(var(--content-width, 900px), 100%);
    max-height: calc(100vh - var(--header-actual-height, 105px) - var(--cookie-banner-height, 0px) - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-card, #1e1e1e);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    transform: translateY(16px);
    transition: transform 0.3s ease;
}

.blog-modal.active .blog-modal-content {
    transform: translateY(0);
}

/* ---- Close + Share buttons — rögzített a content box jobb felső sarkában ---- */
.blog-modal-close,
.blog-modal-share {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    background: none;
    border: none;
    color: var(--text-gray);
    cursor: pointer;
    /* Equal fixed box for both buttons so the text "×" (close) and the SVG icon
       (share) share the same centre — previously their differing heights, both
       anchored at top, left the share icon ~4px higher than the close button. */
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border-radius: var(--radius-sm);
    transition: color 0.2s, background 0.2s;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-modal-close {
    font-size: 1.75rem;
    line-height: 1;
}

.blog-modal-share {
    /* Sits just left of the 2.4rem-wide close button (0.85 + 2.4 + 0.2 gap). */
    right: 3.45rem;
}

.blog-modal-close:hover,
.blog-modal-share:hover,
.blog-modal-share[aria-expanded="true"] {
    color: var(--text-light);
    background: rgba(255, 255, 255, 0.1);
}

/* ---- Share dropdown menu ---- */
.blog-modal-share-menu {
    position: absolute;
    top: 3rem;
    right: 0.85rem;
    min-width: 180px;
    background: var(--bg-card, #1e1e1e);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    padding: 0.5rem;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.blog-modal-share-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.blog-modal-share-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: none;
    border: none;
    color: var(--text-gray);
    font-size: 0.95rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.2s, color 0.2s;
    text-align: left;
}

.blog-modal-share-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-light);
}

.blog-modal-share-item svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* ============================================================================
   Blog Post Image Lightbox — clicking an embedded post image (Blogger wraps
   every inline image in <a href="full-size-url"> which would otherwise
   navigate away to blogger.googleusercontent.com) opens the full-size image
   in an overlay instead, sized like the post modal above it. Works both when
   layered on top of the JS quick-view modal (blog-modal.js) and on the plain
   SSR /blog/post/{slug} page, which has no modal chrome of its own.
   ============================================================================ */
.blog-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.blog-image-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.blog-image-lightbox-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 0;
}

.blog-image-lightbox-content {
    position: relative;
    z-index: 1;
    width: min(var(--content-width, 900px), 100%);
    max-height: calc(100vh - 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card, #1e1e1e);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    padding: 2.4rem 1rem 1rem;
    transform: translateY(16px);
    transition: transform 0.25s ease;
}

.blog-image-lightbox.active .blog-image-lightbox-content {
    transform: translateY(0);
}

.blog-image-lightbox-content img {
    max-width: 100%;
    max-height: calc(100vh - 48px - 3.4rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    display: block;
}

.blog-image-lightbox-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    background: none;
    border: none;
    color: var(--text-gray);
    cursor: pointer;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border-radius: var(--radius-sm);
    font-size: 1.75rem;
    line-height: 1;
    transition: color 0.2s, background 0.2s;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-image-lightbox-close:hover {
    color: var(--text-light);
    background: rgba(255, 255, 255, 0.1);
}

/* ---- Article (flex column, kitölti a content boxot) ---- */
.blog-modal-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    color: var(--text-light);
    line-height: 1.8;
}

/* ---- Header — MINDIG felül, sosem scrollol ---- */
.blog-modal-header {
    flex-shrink: 0;
    padding: 1.25rem 3.5rem 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bg-card, #1e1e1e);
    text-align: center;
}

.blog-modal-date {
    display: block;
    font-size: 0.8rem;
    color: var(--primary, #32b38d);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
}

.blog-modal-title {
    font-size: clamp(1rem, 1.5vw + 0.3rem, 1.35rem);
    font-weight: 700;
    color: var(--text-light);
    margin: 0;
    line-height: 1.35;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ---- Text — ez scrollol egyedül ---- */
.blog-modal-text {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    /* Inherit body styling but allow content inline styles to override */
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.6;
}

/* Restore paragraph/list/heading spacing inside real post content — the global
   reset.css "* { margin: 0 }" strips the browser's default block-element margins,
   which otherwise made Blogger's <p>/<div>/<ul> content read as one crammed wall
   of text instead of the properly spaced article Blogger itself renders. */
.blog-modal-text p,
.blog-modal-text div:not(.separator):not(.blogger-post-footer) {
    margin: 0 0 1em;
}

.blog-modal-text p:empty,
.blog-modal-text div:empty {
    display: none;
}

.blog-modal-text ul,
.blog-modal-text ol {
    margin: 0 0 1em;
    padding-left: 1.5em;
}

.blog-modal-text li {
    margin-bottom: 0.4em;
}

.blog-modal-text h1,
.blog-modal-text h2,
.blog-modal-text h3,
.blog-modal-text h4 {
    margin: 1.2em 0 0.6em;
    line-height: 1.3;
}

.blog-modal-text blockquote {
    margin: 0 0 1em;
    padding-left: 1em;
    border-left: 3px solid var(--primary, #32b38d);
    color: var(--text-gray);
}

.blog-modal-text a {
    color: var(--primary, #32b38d);
    text-decoration: underline;
}

.blog-modal-text .separator {
    margin: 0 0 1em;
}

.blog-modal-text .blogger-post-footer {
    display: none;
}

/* Content images — constrain size but keep original positioning.
   "display: block" turns the <img> into a block box, which makes it IGNORE the
   ancestor Blogger <div style="text-align:center"> wrapper (text-align only
   centers inline-level content) — that pushed every inline post image to the
   left instead of the centered placement Blogger itself renders. "margin: 0
   auto" restores the centering.
   Deliberately NOT setting width/height here: Blogger's own <img width="240"
   height="240" ...> attributes are how it keeps embedded images small — an
   explicit "width: auto; height: auto" rule here would override those
   attributes with the image's true (often huge, e.g. 2048x2048) intrinsic
   size, which is exactly what made our copy render far bigger than the
   original Blogger post. max-width/max-height only cap the size on small
   screens or for images that lack explicit attributes; they never enlarge. */
.blog-modal-text img {
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    border-radius: var(--radius-md);
    display: block;
    margin: 0 auto;
}

.blog-modal-text iframe {
    max-width: 100%;
    border-radius: var(--radius-md);
}


/* Ensure smooth scroll for section nav links to posts */
html {
    scroll-behavior: smooth;
}

.blog-card:target {
    scroll-margin-top: calc(var(--header-actual-height, 105px) + 60px);
}

/* Body scroll lock when modal is open */
body.blog-modal-open {
    overflow: hidden;
}

body.blog-modal-open .top-nav,
body.blog-modal-open .section-nav {
    pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
    .blog-section {
        padding: calc(var(--header-actual-height, 105px) + var(--cookie-banner-height, 0px) + var(--spacing-md)) 0 var(--spacing-md);
    }

    .blog-grid {
        gap: var(--spacing-md);
        padding: 0 var(--spacing-sm);
    }

    .blog-card-title {
        font-size: 1.25rem;
    }

    /* The 110px left thumbnail column is too cramped on narrow screens — stack
       the media above the text instead, like the desktop layout used to. */
    .blog-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "media"
            "body"
            "footer";
    }

    .blog-card-media {
        max-height: 200px;
    }

    .blog-card-media img {
        height: auto;
        max-height: 200px;
        object-fit: contain;
    }

    .blog-modal-content {
        width: 100%;
        max-height: calc(100vh - var(--header-actual-height, 60px) - var(--cookie-banner-height, 0px) - 32px);
    }

    .blog-modal-header {
        padding: 1rem 3rem 0.75rem 1rem;
    }

    .blog-modal-title {
        font-size: 1rem;
    }

    .blog-modal-text {
        padding: 1rem;
    }

}