/* ============================================================
   THE LAVOYA BLOG (/blogs, /blogs/page/<n>, /blogs/<slug>)

   Loaded only by the blog's layout, after css/style.css, so the shared
   sheet and every other page stay exactly as they were. Everything here
   is built from the tokens in css/style.css :root — the palette, the
   serif/sans pair, the --space-* scale, --section-y / --block-y /
   --header-gap / --split-gap and --card-radius. No raw pixel value sets
   a margin, padding or gap.

   The article body is the CMS's stored rendering. Its markup is whatever
   the CMS editor produced after the CMS's own sanitiser: headings with
   ids, paragraphs, lists, quotes, images, tables wrapped in
   .blog-table-scroll, code in .blog-code, embeds as <iframe>, and
   .blog-graphic placeholders (interactive charts this site does not
   draw, so they are hidden rather than left as empty boxes).
   ============================================================ */

/* ---- Page header ---------------------------------------------------- */
.blog-hero {
    padding-block: calc(var(--nav-h) + var(--space-14)) var(--space-12);
}
.blog-hero .container > * { max-width: 900px; }
.blog-hero h1 {
    font-size: clamp(38px, 5.6vw, 74px);
    margin-bottom: var(--space-6);
}
.blog-hero-lead {
    font-size: 18px;
    color: var(--ink-soft);
    max-width: 56ch;
}

/* ---- Shared text bits -------------------------------------------- */
.blog-meta {
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}
.blog-section-title {
    font-size: clamp(28px, 3.6vw, 48px);
    margin-bottom: var(--header-gap);
}

/* One link per card: the title's link is stretched over the whole card,
   and the card — not the words — shows the focus ring. */
.blog-stretch::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.blog-stretch:focus-visible { outline: none; }
.blog-card:has(.blog-stretch:focus-visible),
.blog-featured:has(.blog-stretch:focus-visible) {
    outline: 2px solid var(--luxury-bronze);
    outline-offset: var(--space-2);
    border-radius: var(--card-radius);
}

/* ---- Covers ---------------------------------------------------------
   One standard shape, as on the CogNerd blog: every cover — featured,
   card and article — is a 16:9 frame (the CMS's own 1920×1080 cover
   size), and the photo fills it (object-fit: cover comes from the global
   img rule). An upload of any size or shape therefore shows at the same
   size, cropped to fit rather than stretched or left oversized. A post
   without an image gets the monogram panel. */
.blog-card-cover,
.blog-featured-cover,
.blog-article-cover {
    aspect-ratio: 16 / 9;
    width: 100%;
    border-radius: var(--card-radius);
}
.blog-article-cover { margin-bottom: var(--space-10); }
.blog-card-cover img,
.blog-featured-cover img,
.blog-article-cover img {
    width: 100%;
    height: 100%;
}
.blog-card-cover img,
.blog-featured-cover img {
    transition: opacity var(--dur-slow) var(--ease-soft), transform 1.2s var(--ease);
}
.blog-card:hover .blog-card-cover img,
.blog-featured:hover .blog-featured-cover img {
    transform: scale(1.04);
}
.blog-cover-empty {
    display: grid;
    place-items: center;
    background: var(--soft-beige);
}
.blog-cover-empty span {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(48px, 7vw, 96px);
    line-height: 1;
    color: var(--luxury-bronze);
    opacity: 0.55;
}

/* ---- Featured story (page 1) -------------------------------------- */
.blog-featured-wrap { padding-block-end: var(--section-y); }
.blog-featured {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--split-gap);
    align-items: center;
}
.blog-featured-title {
    font-size: clamp(28px, 3.2vw, 46px);
    margin-bottom: var(--space-5);
}
.blog-featured-title a { transition: color var(--dur) var(--ease); }
.blog-featured:hover .blog-featured-title a { color: var(--luxury-bronze); }
.blog-featured-excerpt {
    font-size: 17px;
    color: var(--ink-soft);
    margin-bottom: var(--space-5);
    max-width: 52ch;
}
.blog-read {
    display: inline-block;
    margin-top: var(--space-6);
    padding-bottom: var(--space-1);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: 1px solid currentColor;
    transition: color var(--dur) var(--ease);
}
.blog-featured:hover .blog-read { color: var(--luxury-bronze); }

/* ---- The grid -------------------------------------------------------- */
.blog-list { padding-block-end: var(--section-y); }
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-14) var(--space-8);
}
.blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
}
.blog-card-body { padding-top: var(--space-5); }
.blog-card-label {
    display: block;
    margin-bottom: var(--space-3);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--luxury-bronze);
}
.blog-card-title {
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: var(--space-3);
}
.blog-card-title a { transition: color var(--dur) var(--ease); }
.blog-card:hover .blog-card-title a { color: var(--luxury-bronze); }
.blog-card-excerpt {
    font-size: 15px;
    color: var(--ink-soft);
    margin-bottom: var(--space-4);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Pagination ------------------------------------------------------ */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--header-gap);
    padding-top: var(--space-8);
    border-top: 1px solid rgba(25, 23, 20, 0.12);
}
.blog-page-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}
.blog-page-number {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding-inline: var(--space-3);
    border: 1px solid rgba(25, 23, 20, 0.2);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.blog-page-number:hover { border-color: var(--primary-dark); }
.blog-page-number[aria-current="page"] {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white);
}
.blog-page-step {
    min-width: 8rem;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
a.blog-page-step { padding-block: var(--space-3); }
a.blog-page-step:hover { color: var(--luxury-bronze); }
.blog-pagination > :last-child { text-align: right; }

/* ---- Empty blog ------------------------------------------------------ */
/* Same left edge as the header above it; only the words are narrowed. */
.blog-empty {
    padding-block: var(--space-8) var(--section-y);
}
.blog-empty > * { max-width: 720px; }
.blog-empty h2 {
    font-size: clamp(28px, 3.6vw, 44px);
    margin-bottom: var(--space-5);
}
.blog-empty p {
    font-size: 17px;
    color: var(--ink-soft);
    margin-bottom: var(--space-10);
}

/* ---- Article header (inside the reading column) ------------------- */
.blog-article-head { padding-block-end: var(--space-10); }
.blog-article-head h1 {
    font-size: clamp(32px, 4vw, 52px);
    margin-bottom: var(--space-6);
}
.blog-article-lead {
    font-size: 20px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 60ch;
    margin-bottom: var(--space-6);
}
.blog-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.blog-article-meta > * + *::before {
    content: '·';
    margin-inline-end: var(--space-3);
    color: var(--luxury-bronze);
}
.blog-article-meta b { font-weight: 500; color: var(--primary-dark); }

/* ---- Article layout: one reading column (header, cover, text), with a
   sticky contents rail beside it on wide screens and a collapsed drawer
   in it on narrow ones — the CogNerd blog's arrangement. ------------- */
.blog-article-layout {
    padding-block: calc(var(--nav-h) + var(--space-14)) var(--section-y);
}
.blog-article-main {
    max-width: 820px;
    margin-inline: auto;
    min-width: 0;
}
.blog-toc-rail { display: none; }

@media (min-width: 1101px) {
    .blog-article-layout.has-toc {
        display: grid;
        grid-template-columns: 240px minmax(0, 820px);
        justify-content: center;
        gap: var(--space-16);
        align-items: start;
    }
    .blog-article-layout.has-toc .blog-article-main { margin-inline: 0; }
    .blog-toc-rail {
        display: block;
        position: sticky;
        top: calc(var(--nav-h-scrolled) + var(--space-8));
        max-height: calc(100vh - var(--nav-h-scrolled) - var(--space-16));
        overflow-y: auto;
        padding-inline-start: var(--space-5);
        border-left: 1px solid rgba(25, 23, 20, 0.12);
    }
    .blog-toc-drawer { display: none; }
}

.blog-toc-title {
    margin-bottom: var(--space-4);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--luxury-bronze);
}
.blog-toc-list {
    list-style: none;
    display: grid;
    gap: var(--space-3);
    font-size: 14px;
    line-height: 1.45;
}
.blog-toc-list .is-sub { padding-inline-start: var(--space-4); font-size: 13px; }
.blog-toc-list a { color: var(--ink-soft); }
.blog-toc-list a:hover { color: var(--luxury-bronze); }

.blog-toc-drawer {
    margin-bottom: var(--space-10);
    border-block: 1px solid rgba(25, 23, 20, 0.12);
}
.blog-toc-drawer summary {
    list-style: none;
    cursor: pointer;
    padding-block: var(--space-4);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.blog-toc-drawer summary::-webkit-details-marker { display: none; }
.blog-toc-drawer summary::after { content: ' +'; color: var(--luxury-bronze); }
.blog-toc-drawer[open] summary::after { content: ' −'; }
.blog-toc-drawer .blog-toc-list { padding-block-end: var(--space-5); }

/* ---- Key takeaways ------------------------------------------------- */
.blog-takeaways {
    margin-bottom: var(--space-12);
    padding: var(--space-6) var(--space-8);
    background: var(--white);
    border-left: 3px solid var(--luxury-bronze);
    border-radius: var(--card-radius);
}
.blog-takeaways h2 {
    font-size: 22px;
    margin-bottom: var(--space-4);
}
.blog-takeaways ul {
    display: grid;
    gap: var(--space-3);
}
.blog-takeaways li {
    position: relative;
    padding-inline-start: var(--space-6);
}
.blog-takeaways li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 8px;
    height: 1px;
    background: var(--luxury-bronze);
}

/* ---- The stored article body ------------------------------------- */
.blog-prose {
    font-size: 18px;
    line-height: 1.75;
    color: var(--primary-dark);
    overflow-wrap: break-word;
}
.blog-prose > * + * { margin-top: var(--space-5); }
.blog-prose h2 {
    font-size: clamp(26px, 3vw, 36px);
    margin-top: var(--space-14);
}
.blog-prose h3 {
    font-size: clamp(21px, 2.2vw, 26px);
    margin-top: var(--space-10);
}
.blog-prose h4 { font-size: 20px; margin-top: var(--space-8); }
/* A heading straight after a heading needs no extra air. */
.blog-prose :is(h2, h3, h4) + :is(h2, h3, h4) { margin-top: var(--space-4); }
.blog-prose a {
    color: var(--bronze-deep);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}
.blog-prose a:hover { color: var(--luxury-bronze); }
.blog-prose strong, .blog-prose b { font-weight: 600; }
.blog-prose ul, .blog-prose ol { padding-inline-start: var(--space-6); }
.blog-prose ul { list-style: disc; }
.blog-prose ol { list-style: decimal; }
.blog-prose li + li { margin-top: var(--space-2); }
.blog-prose li::marker { color: var(--luxury-bronze); }
.blog-prose blockquote {
    padding-inline-start: var(--space-6);
    border-left: 2px solid var(--luxury-bronze);
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    line-height: 1.5;
    color: var(--bronze-deep);
}
/* Images in the text keep their shape and never exceed a standard size:
   the column's width, and at most 560px (or 70% of the screen) tall. A
   huge upload is scaled down to fit, never cropped, stretched or
   upscaled; a narrower one is centred. */
.blog-prose img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(70vh, 560px);
    margin-inline: auto;
    border-radius: var(--card-radius);
}
.blog-prose img:not(:first-child) { margin-top: var(--space-5); }
.blog-prose figure figcaption {
    margin-top: var(--space-2);
    font-size: 14px;
    color: var(--ink-soft);
}
.blog-prose hr {
    border: 0;
    border-top: 1px solid rgba(25, 23, 20, 0.15);
    margin-block: var(--space-12);
}
.blog-prose iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--card-radius);
}
.blog-prose .ql-align-center { text-align: center; }
.blog-prose .ql-align-right { text-align: right; }
.blog-prose .ql-align-justify { text-align: justify; }

/* Tables scroll inside their own frame; the page never scrolls sideways. */
.blog-prose .blog-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.blog-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5;
}
.blog-prose th, .blog-prose td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgba(25, 23, 20, 0.12);
    text-align: left;
    vertical-align: top;
}
.blog-prose th {
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--soft-beige);
}

/* Code: rare on a catering blog, but kept legible when it appears. The
   CMS's copy button needs the CMS site's script, so it is not shown. */
.blog-prose code {
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: 0.88em;
    padding: 0 var(--space-1);
    background: var(--soft-beige);
    border-radius: 2px;
}
.blog-prose .blog-code {
    background: var(--primary-dark);
    color: var(--warm-ivory);
    border-radius: var(--card-radius);
    overflow: hidden;
}
.blog-prose .blog-code__header {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(246, 241, 232, 0.7);
    border-bottom: 1px solid rgba(246, 241, 232, 0.12);
}
.blog-prose .blog-code__body {
    padding: var(--space-4);
    overflow-x: auto;
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre;
}
.blog-prose .blog-code code { background: none; padding: 0; color: inherit; }
.blog-prose .copy-code { display: none; }
.blog-prose .blog-graphic { display: none; }

/* ---- Questions on the article (the site's own .faq-item accordion) -- */
.blog-faq { margin-top: var(--space-16); }
.blog-faq h2 {
    font-size: clamp(26px, 3vw, 36px);
    margin-bottom: var(--space-4);
}

/* ---- Author -------------------------------------------------------- */
.blog-author {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
    margin-top: var(--space-16);
    padding-top: var(--space-10);
    border-top: 1px solid rgba(25, 23, 20, 0.12);
}
.blog-author-avatar {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
}
.blog-author-initials {
    display: grid;
    place-items: center;
    background: var(--soft-beige);
    font-family: var(--serif);
    font-size: 26px;
    color: var(--bronze-deep);
}
.blog-author-kicker {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--luxury-bronze);
    margin-bottom: var(--space-1);
}
.blog-author-name { font-family: var(--serif); font-size: 24px; line-height: 1.25; }
.blog-author-role { font-size: 14px; color: var(--ink-soft); margin-top: var(--space-1); }
.blog-author-bio { margin-top: var(--space-3); color: var(--ink-soft); max-width: 60ch; }
.blog-author-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-4);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.blog-author-links a {
    display: inline-block;
    padding-block: var(--space-2);
    border-bottom: 1px solid currentColor;
}
.blog-author-links a:hover { color: var(--luxury-bronze); }

/* ---- Related articles band ---------------------------------------- */
.blog-related {
    background: var(--soft-beige);
    padding-block: var(--block-y);
}
.blog-related .blog-cover-empty { background: var(--warm-ivory); }
.blog-all {
    margin-top: var(--header-gap);
    text-align: center;
}

/* ---- The CMS could not be read and no earlier copy exists ---------- */
.blog-error {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--space-10) var(--space-6);
}
.blog-error h1 { font-size: clamp(30px, 5vw, 52px); margin-bottom: var(--space-5); }
.blog-error p { max-width: 520px; margin: 0 auto var(--space-10); color: var(--ink-soft); }
.blog-error .btn-row {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Narrower screens ---------------------------------------------- */
@media (max-width: 1024px) {
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-featured { gap: var(--space-10); }
}

@media (max-width: 768px) {
    .blog-featured { grid-template-columns: 1fr; }
    .blog-hero { padding-block: calc(var(--nav-h-scrolled) + var(--space-12)) var(--space-10); }
    .blog-article-layout { padding-block-start: calc(var(--nav-h-scrolled) + var(--space-12)); }
    .blog-article-head { padding-block-end: var(--space-8); }
    .blog-article-cover { margin-bottom: var(--space-8); }
    .blog-prose { font-size: 17px; }
    .blog-page-step { min-width: 0; }
}

@media (max-width: 600px) {
    .blog-grid { grid-template-columns: 1fr; gap: var(--space-12); }
    .blog-author { flex-direction: column; gap: var(--space-4); }
    .blog-pagination { flex-wrap: wrap; justify-content: center; }
    .blog-page-step { flex: 1 1 40%; }
    .blog-page-list { order: -1; flex-basis: 100%; }
    .blog-takeaways { padding: var(--space-5) var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
    .blog-card-cover img,
    .blog-featured-cover img { transition: none; }
    .blog-card:hover .blog-card-cover img,
    .blog-featured:hover .blog-featured-cover img { transform: none; }
}

@media print {
    .blog-toc-rail, .blog-toc-drawer, .blog-pagination, .blog-related, .cta-box { display: none; }
    .blog-prose { font-size: 12pt; }
}