/* ═══════════════════════════════════════════════════════════
   Blog Public Styles — Glore Aesthetic
   Uses same CSS variables as style.css
═══════════════════════════════════════════════════════════ */

/* This file also supports the older blog variable names used below. */
:root {
    --color-bg-primary: var(--bg-white);
    --color-bg-secondary: var(--bg-section);
    --color-text-primary: var(--text-dark);
    --color-text-secondary: var(--text-muted);
    --color-accent: var(--brand-red);
    --color-btn: var(--brand-red);
    --color-border: var(--border-light);
}

/* ── Blog Hero ─────────────────────────────────────────── */
.blog-hero {
    min-height: 390px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg, rgba(20, 18, 30, .94) 0%, rgba(20, 18, 30, .72) 48%, rgba(20, 18, 30, .4) 100%),
        url('/assets/images/generated/fabric-collage.jpg') center 58% / cover no-repeat;
    padding: 72px 0 68px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.blog-hero::before {
    content: 'JOURNAL';
    position: absolute;
    right: -20px;
    bottom: -30px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(100px, 19vw, 260px);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -.06em;
    color: rgba(255,255,255,.09);
    pointer-events: none;
}
.blog-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    border-top: 1px solid rgba(255,255,255,.25);
    border-bottom: 1px solid rgba(255,255,255,.15);
    pointer-events: none;
}
.blog-hero .container { position: relative; z-index: 1; }
.blog-hero-copy { max-width: 720px; margin: 0 auto; }
.blog-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #f4c15d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.blog-kicker::before, .blog-kicker::after {
    content: '';
    width: 28px;
    height: 1px;
    background: currentColor;
}
.blog-hero h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 500;
    color: #fff;
    margin: 0 auto;
    line-height: .98;
    letter-spacing: -.025em;
}
.blog-hero h1 em {
    color: #f4c15d;
    font-weight: 500;
}
.blog-section-intro h2 em, .blog-query h2 em {
    color: var(--color-accent);
    font-weight: 500;
}
.blog-hero p {
    color: rgba(255,255,255,.78);
    font-size: 14px;
    max-width: 480px;
    margin: 18px auto 0;
    letter-spacing: .03em;
}

/* ── Category Filter ───────────────────────────────────── */
.blog-filter {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 35px auto 0;
    justify-content: center;
}
.blog-filter a {
    padding: 7px 18px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,.35);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: rgba(255,255,255,.84);
    transition: all .15s;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.blog-filter a.active,
.blog-filter a:hover {
    background: #fff;
    color: var(--brand-red);
    border-color: #fff;
}
.blog-filter a.active:hover {
    color: #fff;
    background: var(--brand-red);
    border-color: var(--brand-red);
}

/* ── Blog Grid ─────────────────────────────────────────── */
.blog-section {
    padding: 84px 0 110px;
    background: #fbfaf8;
}
.blog-section-intro {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: end;
    margin-bottom: 34px;
}
.blog-section-intro h2 {
    margin: 10px 0 0;
    font: 500 clamp(28px, 4vw, 42px)/1.05 'Cormorant Garamond', Georgia, serif;
    color: var(--color-text-primary);
}
.blog-section-intro > p {
    max-width: 360px;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.8;
    margin: 0 0 2px;
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .blog-grid { grid-template-columns: 1fr; } }

/* ── Blog Card ─────────────────────────────────────────── */
.blog-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .25s, transform .25s, border-color .25s;
}
.blog-card:hover {
    box-shadow: 0 18px 40px rgba(26,26,46,.12);
    transform: translateY(-5px);
    border-color: rgba(192,57,43,.25);
}
.blog-card-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    background: var(--color-bg-secondary);
}
.blog-card-img-placeholder {
    width: 100%;
    height: 200px;
    background: var(--color-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    font-size: 36px;
}
.blog-card-body {
    padding: 23px 24px 27px;
    min-height: 218px;
}
.blog-card-cat {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 10px;
    display: block;
}
.blog-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 21px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0 0 10px;
    line-height: 1.3;
}
.blog-card-title a {
    text-decoration: none;
    color: inherit;
}
.blog-card-title a:hover {
    color: var(--color-accent);
}
.blog-card-excerpt {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 16px;
}
.blog-card-meta {
    font-size: 11px;
    color: #aaa;
    display: flex;
    gap: 12px;
    align-items: center;
}
.blog-card-read-more {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    margin-top: 14px;
    transition: color .15s;
}
.blog-card-read-more:hover { color: var(--color-accent); }

/* ── Pagination ────────────────────────────────────────── */
.blog-pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 48px;
}
.blog-pagination a,
.blog-pagination span {
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none;
    color: var(--color-text-secondary);
}
.blog-pagination a:hover { border-color: var(--color-text-primary); color: var(--color-text-primary); }
.blog-pagination span.current { background: var(--color-btn); color: #fff; border-color: var(--color-btn); }

/* ── Single Post ───────────────────────────────────────── */
.post-hero-wrap {
    background: var(--color-bg-secondary);
    padding: 34px 0 0;
    overflow: hidden;
}
.post-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9b9b9b;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 52px;
}
.post-breadcrumb a { color: var(--color-accent); text-decoration: none; font-weight: 700; }
.post-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(180px, .55fr);
    gap: 48px;
    align-items: end;
}
.post-hero-copy { padding-bottom: 44px; }
.post-hero-accent {
    min-height: 190px;
    border-left: 1px solid rgba(192,57,43,.28);
    padding: 10px 0 14px 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: rgba(192,57,43,.22);
}
.post-hero-accent span {
    font: 600 132px/.72 'Cormorant Garamond', Georgia, serif;
    letter-spacing: -.08em;
}
.post-hero-accent small {
    color: var(--color-accent);
    font-size: 9px;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-top: 16px;
}
.post-category-badge {
    display: inline-flex;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 14px;
}
.post-hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(38px, 5.6vw, 72px);
    font-weight: 500;
    color: var(--color-text-primary);
    max-width: 880px;
    line-height: 1.02;
    letter-spacing: -.02em;
    margin: 0 0 20px;
}
.post-hero-excerpt {
    max-width: 670px;
    color: var(--color-text-secondary);
    font: 400 16px/1.75 'Lora', Georgia, serif;
    margin: 0 0 25px;
}
.post-meta {
    font-size: 11px;
    color: var(--color-text-secondary);
    display: flex;
    gap: 14px;
    align-items: center;
}
.post-meta-item { display: inline-flex; align-items: baseline; gap: 6px; }
.post-meta-item i { font-style: normal; text-transform: uppercase; letter-spacing: 1px; color: #a0a0a0; font-size: 9px; font-weight: 700; }
.post-meta-divider { width: 3px; height: 3px; background: var(--color-accent); border-radius: 50%; }
.post-hero-img {
    width: 100%;
    height: min(52vw, 510px);
    object-fit: cover;
    display: block;
    margin-top: 0;
    position: relative;
}
.post-hero-img-placeholder {
    background: linear-gradient(120deg, #1a1a2e 0%, #652d3c 58%, #c0392b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.post-hero-img-placeholder span {
    color: rgba(255,255,255,.2);
    font: 600 150px/.8 'Cormorant Garamond', Georgia, serif;
}

/* ── Post Body ─────────────────────────────────────────── */
.post-body-wrap {
    padding: 72px 0 100px;
    background: var(--color-bg-primary);
}
.post-layout {
    display: grid;
    grid-template-columns: minmax(0, 760px) 260px;
    gap: 72px;
    align-items: start;
}
.post-content {
    max-width: none;
    font-size: 16px;
    line-height: 1.9;
    color: #333;
}
.post-content h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px;
    font-weight: 500;
    margin: 1.8em 0 .5em;
    color: var(--color-text-primary);
}
.post-content h3 {
    font-size: 21px;
    font-weight: 600;
    margin: 1.5em 0 .4em;
    color: var(--color-text-primary);
}
.post-content p { margin: 0 0 1.2em; }
.post-content img { max-width: 100%; border-radius: 4px; height: auto; }
.post-content ul, .post-content ol { padding-left: 22px; margin-bottom: 1.2em; }
.post-content li { margin-bottom: .4em; }
.post-content blockquote {
    border-left: 3px solid var(--color-accent);
    padding-left: 24px;
    font-style: italic;
    color: var(--color-text-secondary);
    margin: 1.4em 0;
}
.post-content a { color: var(--color-accent); }
.post-content strong { font-weight: 700; }
.post-content pre, .post-content code {
    background: #f5f5f5;
    border-radius: 4px;
    font-size: 13px;
    padding: 2px 6px;
}
.post-content pre { padding: 16px; overflow-x: auto; }
.post-aside { position: sticky; top: 30px; }
.post-back-link {
    display: inline-block;
    color: #8b8b8b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
    margin-bottom: 26px;
}
.post-back-link:hover { color: var(--color-accent); }
.post-aside-card {
    padding: 24px 22px;
    background: #1a1a2e;
    color: #fff;
}
.post-aside-card .section-label { color: #f1c40f; }
.post-aside-card h3 {
    font: 500 28px/1.05 'Cormorant Garamond', Georgia, serif;
    margin: 16px 0 12px;
}
.post-aside-card p { color: rgba(255,255,255,.68); font-size: 12px; line-height: 1.7; margin-bottom: 20px; }
.post-aside-card .btn { font-size: 11px; padding: 10px 14px; }
.post-aside-card .btn span, .post-bottom-cta .btn span { margin-left: 7px; }
.post-aside-note {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 20px 0 0;
    color: #8b8b8b;
    font-size: 11px;
    line-height: 1.45;
}
.post-aside-note span { color: var(--color-accent); font-size: 24px; }
.post-aside-note p { margin: 0; }
.post-aside-note strong { color: var(--color-text-primary); }

/* ── FAQ Accordion ─────────────────────────────────────── */
.post-faqs {
    max-width: 760px;
    margin: 40px 0;
}
.post-faqs h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 16px;
    color: var(--color-text-primary);
}
.post-faqs details {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-bottom: 8px;
    padding: 14px 18px;
}
.post-faqs summary {
    font-weight: 600;
    cursor: pointer;
    font-size: 15px;
    color: var(--color-text-primary);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.post-faqs summary::after {
    content: '+';
    font-size: 18px;
    color: var(--color-accent);
}
.post-faqs details[open] summary::after { content: '−'; }
.post-faqs p {
    margin: 12px 0 4px;
    color: var(--color-text-secondary);
    line-height: 1.7;
    font-size: 14px;
}

/* ── Related Posts ─────────────────────────────────────── */
.related-posts {
    margin: 72px 0 0;
    padding-top: 40px;
    border-top: 1px solid var(--color-border);
}
.related-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 24px;
}
.related-posts h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    font-weight: 500;
    margin: 10px 0 0;
    color: var(--color-text-primary);
}
.related-heading > a { color: var(--color-text-secondary); font-size: 12px; font-weight: 700; text-decoration: none; }
.related-heading > a:hover { color: var(--color-accent); }
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 700px) { .related-grid { grid-template-columns: 1fr; } }
.related-card {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s;
}
.related-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }
.related-card img { width:100%; height:120px; object-fit:cover; display:block; }
.related-card-placeholder { height:120px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1a1a2e,#c0392b); color:rgba(255,255,255,.5); font:600 52px/.8 'Cormorant Garamond',Georgia,serif; }
.related-card-body { padding: 12px 14px; }
.related-card-cat { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--color-accent); }
.related-card-title { font-family:'Cormorant Garamond',serif; font-size:16px; margin-top:5px; line-height:1.3; }
.related-card-arrow { display:block; margin-top:13px; color:#999; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.post-bottom-cta {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:28px;
    margin-top:72px;
    padding:30px 34px;
    background:var(--color-bg-secondary);
}
.post-bottom-cta h3 { margin:10px 0 0; color:var(--color-text-primary); font:500 32px/1 'Cormorant Garamond',Georgia,serif; }
.post-bottom-cta h3 em { color:var(--color-accent); font-weight:500; }
.post-bottom-cta .btn { white-space:nowrap; }
@media (max-width: 900px) {
    .post-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .post-aside { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .post-back-link { align-self: start; }
    .post-aside-note { padding: 14px 0 0; }
}
@media (max-width: 640px) {
    .post-hero-wrap { padding-top: 24px; }
    .post-breadcrumb { margin-bottom: 34px; }
    .post-hero-grid { display:block; }
    .post-hero-copy { padding-bottom: 34px; }
    .post-hero-accent { display:none; }
    .post-hero-title { font-size: clamp(38px, 12vw, 58px); }
    .post-hero-excerpt { font-size: 14px; }
    .post-hero-img { height: 58vw; min-height: 220px; }
    .post-body-wrap { padding: 48px 0 70px; }
    .post-content { font-size: 15px; }
    .post-aside { display:block; }
    .post-aside-note { padding-top:20px; }
    .post-bottom-cta { display:block; padding:24px; }
    .post-bottom-cta .btn { margin-top:22px; }
}

/* ── Empty State ───────────────────────────────────────── */
.blog-empty {
    text-align: center;
    padding: 84px 20px;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    background: linear-gradient(135deg, #fff 0%, var(--color-bg-secondary) 100%);
}
.blog-empty-mark {
    color: var(--color-accent);
    font-size: 24px;
    margin-bottom: 12px;
}
.blog-empty h3 {
    font: 500 30px/1.1 'Cormorant Garamond', Georgia, serif;
    color: var(--color-text-primary);
    margin: 0 0 10px;
}
.blog-empty p { margin: 0 0 24px; font-size: 14px; }
.blog-empty .btn span, .blog-query .btn span { margin-left: 8px; }
.blog-empty i { font-size: 40px; margin-bottom: 12px; display: block; }

/* ── Blog Query Form ────────────────────────────────────── */
.blog-query {
    display: grid;
    grid-template-columns: .86fr 1.14fr;
    gap: 56px;
    margin-top: 100px;
    padding: 58px;
    background: #1a1a2e;
    position: relative;
    overflow: hidden;
}
.blog-query::after {
    content: '✦';
    position: absolute;
    right: 28px;
    top: 15px;
    color: rgba(255,255,255,.08);
    font-size: 150px;
    line-height: 1;
}
.blog-query-copy, .blog-query-form { position: relative; z-index: 1; }
.blog-query-copy .section-label { color: #f1c40f; }
.blog-query h2 {
    color: #fff;
    font: 500 clamp(34px, 4vw, 50px)/.98 'Cormorant Garamond', Georgia, serif;
    margin: 16px 0 20px;
}
.blog-query-copy > p {
    max-width: 390px;
    color: rgba(255,255,255,.68);
    font-size: 14px;
    line-height: 1.8;
}
.blog-query-points {
    display: grid;
    gap: 12px;
    margin-top: 28px;
    color: rgba(255,255,255,.72);
    font-size: 12px;
}
.blog-query-points b {
    color: #f1c40f;
    font-size: 10px;
    letter-spacing: 1px;
    margin-right: 10px;
}
.blog-query-form {
    background: #fff;
    padding: 28px 30px 30px;
}
.blog-query-form-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.blog-query-form-head span {
    color: var(--color-accent);
    font-size: 10px;
    letter-spacing: 1.6px;
    font-weight: 700;
}
.blog-query-form-head strong {
    color: var(--color-text-primary);
    font: 500 25px 'Cormorant Garamond', Georgia, serif;
}
.blog-query-form form { display: grid; gap: 15px; }
.blog-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.blog-query-form label { display: grid; gap: 7px; }
.blog-query-form label > span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-secondary);
    font-weight: 700;
}
.blog-query-form input, .blog-query-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    background: #fcfbfa;
    padding: 11px 12px;
    font: 13px 'Lora', Georgia, serif;
    color: var(--color-text-primary);
    outline: none;
}
.blog-query-form input:focus, .blog-query-form textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(192,57,43,.08);
}
.blog-query-form textarea { resize: vertical; min-height: 90px; }
.blog-query-form .btn { border: 0; justify-content: center; margin-top: 2px; cursor: pointer; }
.blog-form-msg {
    padding: 10px 12px;
    margin-bottom: 16px;
    font-size: 12px;
    line-height: 1.5;
}
.blog-form-msg.success { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; }
.blog-form-msg.error { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
@media (max-width: 760px) {
    .blog-section-intro { display: block; }
    .blog-section-intro > p { margin-top: 18px; }
    .blog-query { grid-template-columns: 1fr; gap: 34px; padding: 32px 22px; margin-top: 70px; }
}
@media (max-width: 520px) {
    .blog-hero { padding: 58px 0 44px; }
    .blog-hero h1 { font-size: clamp(40px, 13vw, 58px); }
    .blog-form-row { grid-template-columns: 1fr; gap: 15px; }
    .blog-query-form { padding: 22px 18px; }
}