/*
 * Velgrina — Blog (Magefan + Hyvä compat) — Editorial Magazine Style
 * ===================================================================
 * Pages styled:
 *   /blog                            (index)
 *   /blog/post/{slug}                (single post)
 *   /blog/category/{slug}            (category)
 *   /blog/tag/{slug}                 (tag)
 *   /blog/archive/{YYYY-MM}          (archive)
 *   /blog/search/{q}                 (search results)
 *
 * Layout is forced to 1-column via blog_default.xml override. Every
 * sidebar widget is removed, so the main content gets the full canvas.
 *
 * Design goals:
 *   - Kitchen-lifestyle brand feel: generous whitespace, Cormorant
 *     Garamond display headings, Jost sans body, teal accents.
 *   - Works beautifully WITHOUT featured images (the current posts
 *     have no hero images) — we auto-generate a gradient cover from
 *     the post title's first letter.
 *   - Mobile-first, progressive enhancement to 3-col grid on desktop.
 */

:root {
    --vg-teal:        #2E7D8C;
    --vg-teal-dark:   #246876;
    --vg-teal-light:  #3A9BAD;
    --vg-teal-bg:     rgba(46, 125, 140, 0.08);
    --vg-ink:         #1E2022;
    --vg-ink-soft:    #374151;
    --vg-mute:        #6B7280;
    --vg-mute-soft:   #9CA3AF;
    --vg-line:        #E8EAED;
    --vg-line-soft:   #F3F4F6;
    --vg-bg-soft:     #F8FAFB;
}

/* ============================================================
   PAGE FRAME
   ============================================================ */
.blog-index-index .page-main,
.blog-post-view .page-main,
.blog-category-view .page-main,
.blog-tag-view .page-main,
.blog-archive-view .page-main,
.blog-search-index .page-main,
[class*="blog-"] .page-main {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 1.25rem;
    padding-block: 3rem 4rem;
}

/* Kill any leftover 2-column grid that Magefan brings in */
.blog-index-index .columns,
[class*="blog-"] .columns {
    display: block;
}
.blog-index-index .column.main,
[class*="blog-"] .column.main {
    width: 100% !important;
    max-width: 100%;
    float: none;
    padding: 0;
}
.blog-index-index .sidebar-additional,
.blog-index-index .sidebar-main,
[class*="blog-"] .sidebar-additional,
[class*="blog-"] .sidebar-main {
    display: none !important;
}

/* ============================================================
   PAGE HEADER / HERO
   ============================================================ */
[class*="blog-"] .page-title-wrapper {
    text-align: center;
    margin-bottom: 3rem;
    padding-block: 1rem 1.25rem;
}
[class*="blog-"] .page-title-wrapper .page-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    line-height: 1.1;
    font-weight: 600;
    color: var(--vg-ink);
    margin: 0;
    letter-spacing: -0.01em;
}
[class*="blog-"] .page-title-wrapper::before {
    content: "EDITORIAL";
    display: block;
    font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    color: var(--vg-teal);
    text-transform: uppercase;
    margin-bottom: 0.875rem;
}
[class*="blog-"] .page-title-wrapper::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    margin: 1.25rem auto 0;
    background: linear-gradient(90deg, var(--vg-teal), var(--vg-teal-light));
    border-radius: 2px;
}

/* Subtitle (Magefan index description block) */
.blog-index-index .blog-index-description,
.blog-category-view .blog-category-description {
    max-width: 640px;
    margin: -1.75rem auto 3rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--vg-mute);
    padding-inline: 1rem;
}

/* ============================================================
   POST LIST — MAGAZINE GRID
   ============================================================ */
.post-list-wrapper { margin-top: 0; }

.post-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 720px) {
    .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
}
@media (min-width: 1080px) {
    .post-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; }
}

/* ---- POST CARD ---- */
.post-list .post-holder {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--vg-line);
    border-radius: 16px;
    overflow: hidden;
    min-height: 100%;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.35s ease,
                border-color 0.25s ease;
    position: relative;
}
.post-list .post-holder:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -12px rgba(30, 32, 34, 0.15);
    border-color: rgba(46, 125, 140, 0.3);
}

/* ---- FEATURED IMAGE ---- */
.post-list .post-ftimg-hld {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--vg-line-soft);
    order: -2;
}
.post-list .post-ftimg-hld a,
.post-list .post-ftimg-hld img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.post-list .post-holder:hover .post-ftimg-hld img {
    transform: scale(1.06);
}

/* ---- AUTO-COVER for posts without a featured image ----
 * When a post has no .post-ftimg-hld, we synthesize a cover block via
 * ::before on .post-holder. Uses CSS-only decorative backgrounds
 * (gradient + soft grid pattern + centered Velgrina mark) so each card
 * still has visual weight. `:nth-of-type` rotates through three color
 * moods so a row of 3 cards never feels monotone.
 */
.blog-index-index .post-list .post-holder::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    order: -2;
    background-image:
        radial-gradient(circle at 22% 28%, rgba(255,255,255,0.18), transparent 45%),
        radial-gradient(circle at 78% 78%, rgba(255,255,255,0.08), transparent 55%),
        linear-gradient(135deg, var(--vg-teal) 0%, var(--vg-teal-dark) 60%, #1a4a55 100%);
    background-size: cover;
    position: relative;
    overflow: hidden;
}
/* Subtle 32px grid texture on top of the gradient */
.blog-index-index .post-list .post-holder::after {
    content: "V";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 6.5rem;
    font-weight: 500;
    line-height: 1;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    order: -2;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.blog-index-index .post-list .post-holder:hover::after {
    transform: scale(1.04);
}

/* Rotate color moods every 3 cards */
.blog-index-index .post-list > li:nth-of-type(3n+2) .post-holder::before {
    background-image:
        radial-gradient(circle at 22% 28%, rgba(255,255,255,0.20), transparent 45%),
        radial-gradient(circle at 78% 78%, rgba(255,255,255,0.08), transparent 55%),
        linear-gradient(135deg, #1E2022 0%, #2D3035 55%, var(--vg-teal-dark) 100%);
}
.blog-index-index .post-list > li:nth-of-type(3n+3) .post-holder::before {
    background-image:
        radial-gradient(circle at 22% 28%, rgba(255,255,255,0.22), transparent 45%),
        radial-gradient(circle at 78% 78%, rgba(255,255,255,0.08), transparent 55%),
        linear-gradient(135deg, #3A9BAD 0%, var(--vg-teal) 60%, #1a4a55 100%);
}

/* If a real featured image IS present, the template renders
 * .post-ftimg-hld — our ::before/::after pseudos are hidden so the
 * real image takes precedence. */
.blog-index-index .post-list .post-holder:has(.post-ftimg-hld)::before,
.blog-index-index .post-list .post-holder:has(.post-ftimg-hld)::after {
    display: none;
}

/* Hide the noisy addthis social toolbox on cards */
.post-list .addthis_toolbox { display: none !important; }

/* ---- HEADER (title) ---- */
.post-list .post-header {
    padding: 1.5rem 1.5rem 0;
    order: -1;
}
.post-list .post-title-holder {
    margin-bottom: 0.5rem;
}
.post-list .post-title-holder h2 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: var(--vg-ink) !important;
    text-align: left !important;
    margin: 0 !important;
    letter-spacing: -0.005em;
}
.post-list .post-item-link {
    color: var(--vg-ink);
    text-decoration: none;
    background-image: linear-gradient(var(--vg-teal), var(--vg-teal));
    background-repeat: no-repeat;
    background-size: 0 2px;
    background-position: 0 95%;
    transition: background-size 0.35s ease, color 0.2s ease;
    padding-bottom: 2px;
}
.post-list .post-holder:hover .post-item-link {
    color: var(--vg-teal);
    background-size: 100% 2px;
}

/* ---- POST META ---- */
.post-list .post-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.5rem;
    margin-bottom: 0.875rem;
    font-size: 0.6875rem;
    color: var(--vg-mute-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.post-list .post-info .item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.post-list .post-info .item:not(:last-child)::after {
    content: "·";
    margin-left: 0.75rem;
    color: var(--vg-mute-soft);
}
.post-list .post-info .label {
    color: var(--vg-teal);
    font-weight: 600;
}
.post-list .post-info .value { color: var(--vg-mute); font-weight: 500; }
.post-list .post-info a {
    color: var(--vg-teal);
    text-decoration: none;
}
.post-list .post-info a:hover { color: var(--vg-teal-dark); }

/* ---- BODY (excerpt) ---- */
.post-list .post-content {
    padding: 0 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.post-list .post-description {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.post-list .post-description > div:not(.post-ftimg-hld),
.post-list .post-description .text-base {
    font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--vg-mute);
    margin-bottom: 1.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-list .post-description p { margin-bottom: 0.5rem; }

/* ---- READ MORE ---- */
.post-list .btn.btn-primary,
.post-list .post-content a.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    margin-top: auto;
    padding: 0;
    background: transparent !important;
    color: var(--vg-teal) !important;
    font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    border-radius: 0;
    text-decoration: none;
    transition: gap 0.25s ease, color 0.2s ease;
}
.post-list .btn.btn-primary::after,
.post-list .post-content a.btn::after {
    content: "→";
    font-size: 1rem;
    transition: transform 0.25s ease;
}
.post-list .btn.btn-primary:hover,
.post-list .post-content a.btn:hover {
    background: transparent !important;
    color: var(--vg-teal-dark) !important;
    gap: 0.75rem;
}
.post-list .btn.btn-primary:hover::after {
    transform: translateX(3px);
}

/* ============================================================
   SINGLE POST VIEW
   ============================================================ */
.blog-post-view .page-main {
    max-width: 840px;
    padding-block: 2rem 4rem;
}

/* Hero header */
.blog-post-view .page-title-wrapper {
    position: relative;
    text-align: center;
    padding: 3.5rem 1rem 3rem;
    margin-bottom: 2.5rem;
    background:
        radial-gradient(circle at 30% 0%, var(--vg-teal-bg), transparent 60%),
        linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
    border-radius: 18px;
    border: 1px solid var(--vg-line);
    overflow: hidden;
}
.blog-post-view .page-title-wrapper::before {
    content: "VELGRINA EDITORIAL";
    display: block;
    font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    color: var(--vg-teal);
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.blog-post-view .page-title-wrapper .page-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.875rem, 4.5vw, 2.875rem);
    line-height: 1.15;
    font-weight: 600;
    color: var(--vg-ink);
    margin: 0;
    max-width: 700px;
    margin-inline: auto;
    letter-spacing: -0.01em;
}
.blog-post-view .page-title-wrapper::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    margin: 1.5rem auto 0;
    background: linear-gradient(90deg, var(--vg-teal), var(--vg-teal-light));
    border-radius: 2px;
}

/* Single post wrapper — Magefan renders either `.post-view-modern` (native
 * modern template) or `.post-view` (Hyvä compat). We also scope against the
 * body class `.blog-post-view` so meta/content rules don't leak into lists. */
.blog-post-view .post-view-modern,
.blog-post-view .post-view {
    background: #ffffff;
}
.blog-post-view .post-view-modern .post-holder,
.blog-post-view .post-view .post-holder {
    display: flex;
    flex-direction: column;
    border: none;
    background: transparent;
}
.blog-post-view .post-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 0;
    order: 0;
}
.blog-post-view .addthis_toolbox { display: none !important; }

/* Post meta on single view */
.blog-post-view .post-info,
.blog-post-view .post-data-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--vg-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0;
    border: none;
}
.blog-post-view .post-data-wrap .post-date,
.blog-post-view .post-data-wrap .post-author,
.blog-post-view .post-data-wrap .post-categories {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--vg-ink-soft);
    font-weight: 500;
}
.blog-post-view .post-data-wrap .post-date span:first-child,
.blog-post-view .post-data-wrap .post-categories .label {
    color: var(--vg-teal);
    font-weight: 600;
    font-size: 0.6875rem;
}
.blog-post-view .post-data-wrap a {
    color: var(--vg-teal);
    text-decoration: none;
}
.blog-post-view .post-data-wrap a:hover { color: var(--vg-teal-dark); }

/* Featured image */
.blog-post-view .post-ftimg-hld {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 2.5rem;
    aspect-ratio: 16 / 9;
    background: var(--vg-line-soft);
}
.blog-post-view .post-ftimg-hld img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Post body typography — long-form reading.
 * Magefan modern template uses `.post-description` directly; Hyvä compat
 * uses `.post-text-hld`. We style both. */
.blog-post-view .post-description,
.blog-post-view .post-text-hld {
    font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--vg-ink-soft);
    max-width: 680px;
    margin-inline: auto;
}
.blog-post-view .post-description > p:first-of-type,
.blog-post-view .post-text-hld > p:first-of-type {
    font-size: 1.1875rem;
    line-height: 1.75;
    color: var(--vg-ink);
    font-weight: 400;
    margin-bottom: 1.75rem;
}
.blog-post-view .post-description h2,
.blog-post-view .post-text-hld h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--vg-ink);
    margin: 3rem 0 1rem;
    letter-spacing: -0.01em;
}
.blog-post-view .post-description h2::before,
.blog-post-view .post-text-hld h2::before {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    background: var(--vg-teal);
    margin-bottom: 1rem;
    border-radius: 2px;
}
.blog-post-view .post-description h3,
.blog-post-view .post-text-hld h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--vg-ink);
    margin: 2rem 0 0.75rem;
}
.blog-post-view .post-description p,
.blog-post-view .post-text-hld p { margin: 0 0 1.25rem; }
.blog-post-view .post-description a,
.blog-post-view .post-text-hld a {
    color: var(--vg-teal);
    text-decoration: none;
    background-image: linear-gradient(var(--vg-teal), var(--vg-teal));
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 95%;
    padding-bottom: 2px;
    transition: background-size 0.25s ease, color 0.2s ease;
}
.blog-post-view .post-description a:hover,
.blog-post-view .post-text-hld a:hover {
    color: var(--vg-teal-dark);
    background-size: 100% 2px;
}
.blog-post-view .post-description strong,
.blog-post-view .post-text-hld strong { color: var(--vg-ink); font-weight: 600; }
.blog-post-view .post-description em,
.blog-post-view .post-text-hld em { color: var(--vg-ink-soft); }

.blog-post-view .post-description ul,
.blog-post-view .post-description ol,
.blog-post-view .post-text-hld ul,
.blog-post-view .post-text-hld ol {
    margin: 0 0 1.5rem;
    padding-left: 1.75rem;
}
.blog-post-view .post-description ul,
.blog-post-view .post-text-hld ul { list-style: none; }
.blog-post-view .post-description ul li,
.blog-post-view .post-text-hld ul li {
    position: relative;
    margin-bottom: 0.5rem;
}
.blog-post-view .post-description ul li::before,
.blog-post-view .post-text-hld ul li::before {
    content: "";
    position: absolute;
    left: -1.25rem;
    top: 0.75rem;
    width: 6px;
    height: 6px;
    background: var(--vg-teal);
    border-radius: 9999px;
}
.blog-post-view .post-description ol,
.blog-post-view .post-text-hld ol { list-style: decimal; }
.blog-post-view .post-description ol li,
.blog-post-view .post-text-hld ol li { margin-bottom: 0.5rem; }

.blog-post-view .post-description img,
.blog-post-view .post-text-hld img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 2rem auto;
    display: block;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.blog-post-view .post-description blockquote,
.blog-post-view .post-text-hld blockquote {
    margin: 2rem 0;
    padding: 1.5rem 1.75rem;
    border-left: 3px solid var(--vg-teal);
    background: var(--vg-bg-soft);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--vg-ink-soft);
    border-radius: 0 12px 12px 0;
    position: relative;
}
.blog-post-view .post-description blockquote::before,
.blog-post-view .post-text-hld blockquote::before {
    content: "\201C";
    position: absolute;
    top: 0.25rem;
    left: 1rem;
    font-size: 3rem;
    color: var(--vg-teal);
    opacity: 0.25;
    line-height: 1;
}

/* Reset any list-grid styling leaking onto `.post-content` on single view */
.blog-post-view .post-content {
    padding: 0;
    background: transparent;
    border: none;
    display: block;
}
.blog-post-view ._post-description {
    max-width: none;
    padding: 0;
}

/* ============================================================
   POST BOTTOM — RELATED CONTENT
   ============================================================ */
.blog-post-view .post-bottom {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--vg-line);
}

/* Section titles in the post bottom */
.blog-post-view .related-products-post .block-title,
.blog-post-view .related-posts-post-view .block-title,
.blog-post-view .post-bottom .block-title,
.blog-post-view .post-bottom h3 {
    text-align: center;
    margin-bottom: 2rem;
}
.blog-post-view .related-products-post .block-title strong,
.blog-post-view .related-posts-post-view .block-title strong,
.blog-post-view .post-bottom h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--vg-ink);
    display: block;
    position: relative;
}
.blog-post-view .related-products-post .block-title::before,
.blog-post-view .related-posts-post-view .block-title::before {
    content: "İLGİLİ İÇERİK";
    display: block;
    font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    color: var(--vg-teal);
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

/* Related products grid */
.blog-post-view .related-products-post { margin-top: 3rem; }
.blog-post-view .related-products-post .products-grid,
.blog-post-view .related-products-post ol.products,
.blog-post-view .related-products-post .products.list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (min-width: 640px) {
    .blog-post-view .related-products-post .products-grid,
    .blog-post-view .related-products-post ol.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .blog-post-view .related-products-post .products-grid,
    .blog-post-view .related-products-post ol.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.blog-post-view .related-products-post .product-item {
    background: #ffffff;
    border: 1px solid var(--vg-line);
    border-radius: 14px;
    padding: 1.25rem;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.blog-post-view .related-products-post .product-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    border-color: rgba(46, 125, 140, 0.35);
}
.blog-post-view .related-products-post .product-item-photo {
    display: block;
    margin-bottom: 1rem;
}
.blog-post-view .related-products-post .product-item-photo img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}
.blog-post-view .related-products-post .product-item-name,
.blog-post-view .related-products-post .product-item-name a {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--vg-ink);
    text-decoration: none;
    font-weight: 600;
}
.blog-post-view .related-products-post .price-box {
    margin-top: 0.625rem;
    font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    color: var(--vg-teal);
    font-size: 1rem;
}

/* Next/prev navigation */
.blog-post-view .post-nextprev,
.blog-post-view .nextprev-link {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--vg-line);
}
.blog-post-view .post-nextprev a,
.blog-post-view .nextprev-link a,
.blog-post-view .post-prev a,
.blog-post-view .post-next a {
    display: block;
    padding: 1.25rem 1.5rem;
    background: var(--vg-bg-soft);
    border: 1px solid var(--vg-line);
    border-radius: 12px;
    color: var(--vg-ink-soft);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.4;
    transition: all 0.25s ease;
}
.blog-post-view .post-nextprev a:hover,
.blog-post-view .nextprev-link a:hover,
.blog-post-view .post-prev a:hover,
.blog-post-view .post-next a:hover {
    border-color: var(--vg-teal);
    color: var(--vg-teal);
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.blog-post-view .post-prev::before,
.blog-post-view .nextprev-link .prev-link::before {
    content: "← Önceki Yazı";
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--vg-mute-soft);
    margin-bottom: 0.375rem;
    font-weight: 600;
}
.blog-post-view .post-next,
.blog-post-view .nextprev-link .next-link {
    text-align: right;
}
.blog-post-view .post-next::before,
.blog-post-view .nextprev-link .next-link::before {
    content: "Sonraki Yazı →";
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--vg-mute-soft);
    margin-bottom: 0.375rem;
    font-weight: 600;
}

/* ============================================================
   TOOLBAR (pagination)
   ============================================================ */
.toolbar.post-list-toolbar,
.post-list-toolbar {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--vg-line);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.875rem;
    color: var(--vg-mute);
}
.toolbar.post-list-toolbar .pages ol,
.post-list-toolbar .pages ol {
    display: inline-flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.toolbar.post-list-toolbar .pages a,
.toolbar.post-list-toolbar .pages strong,
.post-list-toolbar .pages a,
.post-list-toolbar .pages strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--vg-line);
    background: #ffffff;
    color: var(--vg-ink-soft);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}
.toolbar.post-list-toolbar .pages a:hover,
.post-list-toolbar .pages a:hover {
    border-color: var(--vg-teal);
    color: var(--vg-teal);
    transform: translateY(-1px);
}
.toolbar.post-list-toolbar .pages strong,
.post-list-toolbar .pages strong {
    background: var(--vg-teal);
    border-color: var(--vg-teal);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(46, 125, 140, 0.25);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.post-list-wrapper .message.info.empty {
    padding: 4rem 1.5rem;
    text-align: center;
    background: var(--vg-bg-soft);
    border: 1px dashed var(--vg-line);
    border-radius: 16px;
    color: var(--vg-mute);
    font-size: 1rem;
    line-height: 1.6;
}
.post-list-wrapper .message.info.empty::before {
    content: "📖";
    display: block;
    font-size: 3rem;
    margin-bottom: 1rem;
    filter: grayscale(0.3);
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    [class*="blog-"] .page-main { padding-block: 2rem 2.5rem; }
    [class*="blog-"] .page-title-wrapper { margin-bottom: 2rem; }
    [class*="blog-"] .page-title-wrapper::before { font-size: 0.625rem; }

    .post-list { gap: 1.75rem; }
    .post-list .post-header { padding: 1.25rem 1.25rem 0; }
    .post-list .post-content { padding: 0 1.25rem 1.25rem; }
    .post-list .post-title-holder h2 { font-size: 1.375rem !important; }
    .post-list .post-info { padding: 0 1.25rem; }

    .blog-post-view .page-title-wrapper { padding: 2.5rem 1rem 2rem; border-radius: 14px; }
    .blog-post-view .page-title-wrapper::before { font-size: 0.625rem; }
    .post-view .post-text-hld { font-size: 1rem; line-height: 1.75; }
    .post-view .post-text-hld > p:first-of-type { font-size: 1.0625rem; }
    .post-view .post-text-hld h2 { font-size: 1.625rem; margin-top: 2.5rem; }
    .post-view .post-text-hld h3 { font-size: 1.25rem; }
    .post-view .post-text-hld blockquote { font-size: 1.0625rem; padding: 1.125rem 1.25rem; }

    .post-view .nextprev-link { grid-template-columns: 1fr; }
    .post-view .nextprev-link .next-link { text-align: left; }

    .post-view .related-products-post .block-title strong,
    .post-view .post-bottom h3 { font-size: 1.5rem; }
}

/* ============================================================
   VELGRINA BLOG POST — EDITORIAL LAYOUT (view.phtml override)
   ============================================================
   These styles support the custom theme override at
   app/design/frontend/Velgrina/default/Magefan_Blog/templates/post/view.phtml
   which replaces the vendor modern template with a semantic
   <h1> + hero + meta + TOC + CTA structure. */

/* The override emits its own page chrome, so hide the Magefan-
 * default page title wrapper (duplicate title) and the small
 * post-data-wrap row that the vendor info block would render
 * inside the injected children. */
.blog-post-view .velgrina-blog-post ~ .page-title-wrapper,
.blog-post-view .page-title-wrapper:has(+ .velgrina-blog-post),
.blog-post-view .velgrina-blog-post + .page-title-wrapper { display: none; }

.blog-post-view .velgrina-blog-post {
    max-width: 1080px;
    margin-inline: auto;
    padding-block: 0 2rem;
}
.blog-post-view .velgrina-blog-post .post-holder {
    display: block;
    background: transparent;
    border: none;
    padding: 0;
}

/* ---- Header (eyebrow, title, lede, meta, share row) ---- */
.velgrina-blog-post__header {
    text-align: center;
    max-width: 760px;
    margin-inline: auto;
    padding: 1rem 1rem 2.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.velgrina-blog-post__eyebrow,
.velgrina-blog-post__categories .velgrina-blog-post__category-link {
    display: inline-block;
    font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    color: var(--vg-teal);
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.35rem 0.85rem;
    background: var(--vg-teal-bg);
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease;
}
.velgrina-blog-post__categories { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.velgrina-blog-post__category-link:hover {
    background: var(--vg-teal);
    color: #ffffff;
}
.velgrina-blog-post__title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.1;
    font-weight: 600;
    color: var(--vg-ink);
    margin: 0.25rem 0 0;
    letter-spacing: -0.015em;
    max-width: 820px;
}
.velgrina-blog-post__lede {
    font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--vg-mute);
    margin: 0.25rem 0 0;
    max-width: 640px;
    font-weight: 400;
}
.velgrina-blog-post__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    margin-top: 0.25rem;
    padding: 0;
    border: none;
}
.velgrina-blog-post__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--vg-ink-soft);
    text-transform: none;
    letter-spacing: 0;
}
.velgrina-blog-post__meta-icon { color: var(--vg-teal); flex-shrink: 0; }

/* Inline share row (under meta) */
.velgrina-blog-post__share {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0;
}
.velgrina-blog-post__share--top {
    margin-top: 0.25rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--vg-line);
    width: 100%;
    max-width: 320px;
}
.velgrina-blog-post__share-label {
    font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vg-mute);
}
.velgrina-blog-post__share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: #ffffff;
    border: 1px solid var(--vg-line);
    color: var(--vg-ink-soft);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.velgrina-blog-post__share-btn:hover {
    transform: translateY(-2px);
    border-color: var(--vg-teal);
    background: var(--vg-teal);
    color: #ffffff;
}
.velgrina-blog-post__share-btn--facebook:hover { background: #1877f2; border-color: #1877f2; }
.velgrina-blog-post__share-btn--x:hover         { background: #0f1419; border-color: #0f1419; }
.velgrina-blog-post__share-btn--pinterest:hover { background: #e60023; border-color: #e60023; }

/* ---- Hero image (or branded fallback) ---- */
.velgrina-blog-post__hero {
    margin: 0 0 2.75rem;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--vg-line-soft);
    box-shadow: 0 20px 60px -30px rgba(15, 23, 42, 0.35);
}
.velgrina-blog-post__hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.velgrina-blog-post__hero--fallback {
    background:
        radial-gradient(circle at 30% 35%, rgba(255, 255, 255, 0.18), transparent 55%),
        radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.08), transparent 50%),
        linear-gradient(135deg, #246876 0%, #2E7D8C 40%, #3A9BAD 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.velgrina-blog-post__hero--fallback::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(0deg,  rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.6), transparent 72%);
    -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.6), transparent 72%);
}
.velgrina-blog-post__hero-fallback {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.velgrina-blog-post__hero-mark {
    width: 120px;
    height: 120px;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.2));
}

/* ---- Body layout (TOC sidebar + content) ---- */
.velgrina-blog-post__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    background: transparent;
    border: none;
    max-width: 720px;
    margin-inline: auto;
}
.velgrina-blog-post__content {
    font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--vg-ink-soft);
    max-width: 100%;
    margin: 0;
}

/* On ≥1024px, place a sticky TOC to the left of the content */
@media (min-width: 1024px) {
    .velgrina-blog-post__body {
        grid-template-columns: 240px minmax(0, 720px);
        column-gap: 3rem;
        max-width: 1020px;
    }
    .velgrina-blog-post__toc {
        position: sticky;
        top: 7rem;
        align-self: start;
        max-height: calc(100vh - 9rem);
        overflow-y: auto;
        padding: 1.25rem 1rem 1.25rem 1.25rem;
        border-left: 2px solid var(--vg-line);
    }
}

.velgrina-blog-post__toc {
    margin: 0 0 2rem;
    padding: 1rem 1rem;
    background: var(--vg-bg-soft);
    border-radius: 14px;
    border: 1px solid var(--vg-line);
}
@media (min-width: 1024px) {
    .velgrina-blog-post__toc {
        background: transparent;
        border: none;
        border-left: 2px solid var(--vg-line);
        border-radius: 0;
    }
}
.velgrina-blog-post__toc-title {
    font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vg-teal);
    margin: 0 0 0.75rem;
}
.velgrina-blog-post__toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.velgrina-blog-post__toc-item a {
    display: block;
    font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--vg-mute);
    text-decoration: none;
    padding: 0.375rem 0.5rem;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
    background: none;
}
.velgrina-blog-post__toc-item a:hover {
    color: var(--vg-teal);
    background: rgba(46, 125, 140, 0.06);
}
.velgrina-blog-post__toc-item a.is-active {
    color: var(--vg-teal-dark);
    background: var(--vg-teal-bg);
    font-weight: 600;
}

/* Body content typography already exists in an earlier block —
 * map the new class name onto the same rules via aliasing.
 * We do not rewrite the whole block; we only make sure the new
 * `.velgrina-blog-post__content` inherits the same look as the
 * vendor `.post-description` class we were styling before. */
.velgrina-blog-post__content > p:first-of-type {
    font-size: 1.1875rem;
    line-height: 1.75;
    color: var(--vg-ink);
    font-weight: 400;
    margin-bottom: 1.75rem;
}
.velgrina-blog-post__content h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--vg-ink);
    margin: 3rem 0 1rem;
    letter-spacing: -0.01em;
    scroll-margin-top: 6rem;
}
.velgrina-blog-post__content h2::before {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    background: var(--vg-teal);
    margin-bottom: 1rem;
    border-radius: 2px;
}
.velgrina-blog-post__content h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--vg-ink);
    margin: 2rem 0 0.75rem;
    scroll-margin-top: 6rem;
}
.velgrina-blog-post__content p { margin: 0 0 1.25rem; }
.velgrina-blog-post__content a {
    color: var(--vg-teal);
    text-decoration: none;
    background-image: linear-gradient(var(--vg-teal), var(--vg-teal));
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 95%;
    padding-bottom: 2px;
    transition: background-size 0.25s ease, color 0.2s ease;
}
.velgrina-blog-post__content a:hover {
    color: var(--vg-teal-dark);
    background-size: 100% 2px;
}
.velgrina-blog-post__content strong { color: var(--vg-ink); font-weight: 600; }
.velgrina-blog-post__content ul {
    list-style: none;
    padding-left: 1.75rem;
    margin: 0 0 1.5rem;
}
.velgrina-blog-post__content ul li {
    position: relative;
    margin-bottom: 0.5rem;
}
.velgrina-blog-post__content ul li::before {
    content: "";
    position: absolute;
    left: -1.25rem;
    top: 0.75rem;
    width: 6px;
    height: 6px;
    background: var(--vg-teal);
    border-radius: 9999px;
}

/* ---- CTA card (end of post) ---- */
.velgrina-blog-post__cta {
    margin: 4rem auto 0;
    max-width: 820px;
    padding: 2.25rem 2rem;
    border-radius: 20px;
    background:
        radial-gradient(circle at 20% 20%, rgba(46, 125, 140, 0.16), transparent 60%),
        linear-gradient(135deg, #ffffff 0%, var(--vg-bg-soft) 100%);
    border: 1px solid var(--vg-line);
    box-shadow: 0 24px 60px -35px rgba(15, 23, 42, 0.25);
}
.velgrina-blog-post__cta-inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
}
@media (min-width: 720px) {
    .velgrina-blog-post__cta-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }
}
.velgrina-blog-post__cta-eyebrow {
    display: inline-block;
    font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--vg-teal);
    margin-bottom: 0.5rem;
}
.velgrina-blog-post__cta-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.625rem;
    line-height: 1.25;
    color: var(--vg-ink);
    font-weight: 600;
    margin: 0 0 0.5rem;
}
.velgrina-blog-post__cta-desc {
    font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--vg-mute);
    margin: 0;
    max-width: 440px;
}
.velgrina-blog-post__cta-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.velgrina-blog-post__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 10px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}
.velgrina-blog-post__cta-btn--primary {
    background: var(--vg-teal);
    color: #ffffff;
    box-shadow: 0 10px 24px -10px rgba(46, 125, 140, 0.55);
}
.velgrina-blog-post__cta-btn--primary:hover {
    transform: translateY(-2px);
    background: var(--vg-teal-dark);
    box-shadow: 0 16px 32px -12px rgba(46, 125, 140, 0.65);
}
.velgrina-blog-post__cta-btn--ghost {
    background: transparent;
    color: var(--vg-teal-dark);
    border: 1px solid rgba(46, 125, 140, 0.35);
}
.velgrina-blog-post__cta-btn--ghost:hover {
    background: var(--vg-teal-bg);
    border-color: var(--vg-teal);
}

/* ---- Footer (bottom share + related) ---- */
.velgrina-blog-post__bottom {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--vg-line);
}
.velgrina-blog-post__share--bottom {
    justify-content: center;
    margin-bottom: 2.5rem;
}
.velgrina-blog-post__share--bottom .velgrina-blog-post__share-label {
    margin-right: 0.25rem;
    letter-spacing: 0.08em;
    font-size: 0.8125rem;
    text-transform: none;
    color: var(--vg-ink-soft);
    font-weight: 500;
}

/* Mobile tuning */
@media (max-width: 640px) {
    .velgrina-blog-post__header { padding: 0.5rem 0.5rem 1.5rem; gap: 0.75rem; }
    .velgrina-blog-post__title { font-size: 1.875rem; line-height: 1.15; }
    .velgrina-blog-post__lede { font-size: 1rem; }
    .velgrina-blog-post__hero { margin-bottom: 2rem; border-radius: 14px; }
    .velgrina-blog-post__hero-mark { width: 80px; height: 80px; }
    .velgrina-blog-post__meta { gap: 0.875rem; }
    .velgrina-blog-post__meta-item { font-size: 0.75rem; }
    .velgrina-blog-post__content { font-size: 1rem; line-height: 1.75; }
    .velgrina-blog-post__content > p:first-of-type { font-size: 1.0625rem; }
    .velgrina-blog-post__content h2 { font-size: 1.625rem; margin-top: 2.5rem; }
    .velgrina-blog-post__content h3 { font-size: 1.25rem; }
    .velgrina-blog-post__cta { margin-top: 3rem; padding: 1.75rem 1.5rem; border-radius: 16px; }
    .velgrina-blog-post__cta-title { font-size: 1.375rem; }
    .velgrina-blog-post__cta-btn { width: 100%; }
    .velgrina-blog-post__cta-actions { width: 100%; }
}

/* Hide the vendor duplicate share row if it still renders */
.blog-post-view .velgrina-blog-post .post-sharing:not(.velgrina-blog-post__share) { display: none; }