/* ==========================================================================
   MarcheGros — Blog V1
   Brand system: pure white + near-black + MarcheGros brand green (#2D6A4F, was orange #FF750F) +
   neutral grays. Same palette contract as public/css/geo-directory.css.

   This file deliberately does NOT read --mg-* for its own palette: the active
   site theme is admin-selected and may paint a tinted page. The blog is
   specified as white/black/green, so the brand tokens are redeclared locally
   as --blog-* and everything below uses only those. The rest of the site keeps
   its theme untouched.
   ========================================================================== */

:root {
    /* brand */
    --blog-white: #ffffff;
    --blog-ink: #171717;
    --blog-orange: #2d6a4f;
    --blog-orange-deep: #245a41;
    --blog-orange-wash: #eff2e8;

    /* neutral grays: secondary text, borders, subtle states only */
    --blog-muted: #6b6b6b;
    --blog-faint: #9a9a9a;
    --blog-line: #e8e8e6;
    --blog-wash: #fafafa;

    /* layout */
    --blog-shell: 1120px;
    --blog-prose: 760px;

    /* type */
    --blog-serif-fallback: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}

.blog-shell {
    max-width: var(--blog-shell);
    margin: 0 auto;
    padding: 2rem 1.25rem 5rem;
    background: var(--blog-white);
    color: var(--blog-ink);
}

@media (min-width: 768px) {
    .blog-shell {
        padding: 3.5rem 2rem 7rem;
    }
}

/* Keep the page itself pure white even though the site shell may tint it.
   `body` is the element the layout paints (bg-[var(--mg-bg)]), and an active
   theme can resolve that to a cold blue-grey or a cream. Scoped to pages that
   actually contain a .blog-shell so no other page is affected. */
html:has(.blog-shell),
body:has(.blog-shell) {
    background: var(--blog-white);
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.blog-crumbs {
    font-size: 0.75rem;
    color: var(--blog-faint);
    margin-bottom: 2rem;
}

.blog-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-crumbs a {
    color: var(--blog-muted);
    text-decoration: none;
}

.blog-crumbs a:hover {
    color: var(--blog-orange);
}

.blog-crumbs li[aria-current='page'] {
    color: var(--blog-ink);
}

/* --------------------------------------------------------------------------
   Index — masthead
   -------------------------------------------------------------------------- */

.blog-masthead {
    max-width: 900px;
    margin-bottom: 3.5rem;
}

@media (min-width: 768px) {
    .blog-masthead {
        margin-bottom: 5rem;
    }
}

.blog-eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blog-orange);
    margin: 0 0 1.25rem;
}

.blog-h1 {
    font-family: var(--blog-serif-fallback);
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.022em;
    color: var(--blog-ink);
    margin: 0;
    text-wrap: balance;
}

.blog-masthead p {
    margin: 1.5rem 0 0;
    max-width: 62ch;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--blog-muted);
}

/* --------------------------------------------------------------------------
   Index — editorial list (no cards, no grid)
   -------------------------------------------------------------------------- */

.blog-list {
    border-top: 1px solid var(--blog-line);
    max-width: 860px;
}

.blog-row {
    display: block;
    border-bottom: 1px solid var(--blog-line);
    padding: 2rem 0;
    text-decoration: none;
    color: inherit;
}

@media (min-width: 768px) {
    .blog-row {
        padding: 2.75rem 0;
    }
}

.blog-row-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--blog-orange);
    margin-bottom: 0.85rem;
}

.blog-row-date {
    letter-spacing: 0.06em;
    color: var(--blog-faint);
    font-weight: 500;
}

.blog-row-title {
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.014em;
    color: var(--blog-ink);
    margin: 0;
    text-wrap: balance;
    transition: color 0.15s ease;
}

.blog-row:hover .blog-row-title,
.blog-row:focus-visible .blog-row-title {
    color: var(--blog-orange-deep);
}

.blog-row-excerpt {
    margin: 0.85rem 0 0;
    max-width: 68ch;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--blog-muted);
}

.blog-row-more {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1.1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--blog-ink);
}

.blog-row-more svg {
    transition: transform 0.18s ease;
}

.blog-row:hover .blog-row-more svg,
.blog-row:focus-visible .blog-row-more svg {
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Article — header
   -------------------------------------------------------------------------- */

.blog-article {
    max-width: var(--blog-prose);
    margin: 0 auto;
}

.blog-article-head {
    margin-bottom: 2.75rem;
}

.blog-article-head .blog-eyebrow {
    margin-bottom: 1rem;
}

.blog-article-h1 {
    font-family: var(--blog-serif-fallback);
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.022em;
    margin: 0;
    text-wrap: balance;
}

.blog-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--blog-line);
    font-size: 0.8125rem;
    color: var(--blog-faint);
}

.blog-byline strong {
    color: var(--blog-muted);
    font-weight: 600;
}

.blog-lede {
    margin: 2rem 0 0;
    font-size: 1.1875rem;
    line-height: 1.65;
    color: var(--blog-muted);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Article — prose
   -------------------------------------------------------------------------- */

.blog-prose {
    font-size: 1.125rem;
    line-height: 1.78;
    color: #2b2b2b;
    /* Optical: hyphenation off, French punctuation spacing handled by
       `text-spacing` where supported; never justify — ragged right reads
       better on wide screens. */
    text-align: left;
    word-wrap: break-word;
}

.blog-prose > * + * {
    margin-top: 1.35em;
}

.blog-prose h2 {
    font-family: var(--blog-serif-fallback);
    font-size: clamp(1.375rem, 2.6vw, 1.75rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.016em;
    color: var(--blog-ink);
    margin-top: 2.6em;
    margin-bottom: 0.7em;
    padding-top: 0.4em;
    border-top: 1px solid var(--blog-line);
}

.blog-prose h3 {
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.008em;
    color: var(--blog-ink);
    margin-top: 2.1em;
    margin-bottom: 0.5em;
}

.blog-prose h4 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--blog-ink);
    margin-top: 1.8em;
    margin-bottom: 0.4em;
}

.blog-prose p {
    margin: 0;
}

.blog-prose strong {
    font-weight: 700;
    color: var(--blog-ink);
}

.blog-prose a {
    color: var(--blog-ink);
    text-decoration: underline;
    text-decoration-color: rgba(45, 106, 79, 0.5);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.blog-prose a:hover,
.blog-prose a:focus-visible {
    color: var(--blog-orange-deep);
    text-decoration-color: var(--blog-orange);
}

.blog-prose ul,
.blog-prose ol {
    padding-left: 1.35em;
    margin: 0;
}

.blog-prose ul {
    list-style: none;
}

.blog-prose ul > li {
    position: relative;
    padding-left: 1.1em;
}

.blog-prose ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 6px;
    height: 6px;
    background: var(--blog-orange);
}

.blog-prose ol {
    list-style: decimal;
}

.blog-prose li + li {
    margin-top: 0.6em;
}

.blog-prose li > ul,
.blog-prose li > ol {
    margin-top: 0.6em;
}

.blog-prose blockquote {
    margin: 2em 0;
    padding: 0 0 0 1.4em;
    border-left: 2px solid var(--blog-orange);
    font-size: 1.0625rem;
    font-style: italic;
    color: var(--blog-muted);
}

.blog-prose hr {
    border: 0;
    border-top: 1px solid var(--blog-line);
    margin: 3em 0;
}

.blog-prose code {
    font-size: 0.9em;
    background: var(--blog-wash);
    border: 1px solid var(--blog-line);
    padding: 0.1em 0.35em;
}

.blog-prose pre {
    background: var(--blog-wash);
    border: 1px solid var(--blog-line);
    padding: 1rem 1.15rem;
    overflow-x: auto;
}

.blog-prose pre code {
    background: none;
    border: 0;
    padding: 0;
}

/* Tables: the comparison articles rely on them, so they scroll rather than
   overflow the prose column on mobile. */
.blog-prose .blog-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 2em 0;
}

.blog-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.55;
}

.blog-prose th,
.blog-prose td {
    border: 1px solid var(--blog-line);
    padding: 0.7rem 0.85rem;
    text-align: left;
    vertical-align: top;
}

.blog-prose th {
    background: var(--blog-wash);
    font-weight: 700;
    color: var(--blog-ink);
}

/* GFM task lists (`- [ ]`) — rendered as a plain checklist, no JS. */
.blog-prose li:has(> input[type='checkbox']) {
    list-style: none;
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
}

.blog-prose li > input[type='checkbox'] {
    margin-top: 0.42em;
    accent-color: var(--blog-orange);
}

/* --------------------------------------------------------------------------
   Article — CTA (restrained, single, end of article)
   -------------------------------------------------------------------------- */

.blog-cta {
    margin-top: 3.5rem;
    padding: 2rem 1.5rem;
    border: 1px solid var(--blog-line);
    background: var(--blog-wash);
}

@media (min-width: 768px) {
    .blog-cta {
        padding: 2.5rem;
    }
}

.blog-cta p {
    margin: 0 0 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--blog-muted);
    max-width: 52ch;
}

.blog-cta-title {
    font-size: 1.1875rem;
    font-weight: 800;
    letter-spacing: -0.012em;
    color: var(--blog-ink);
    margin: 0 0 0.5rem;
}

.blog-cta a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--blog-orange);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    padding: 0.85rem 1.4rem;
    text-decoration: none;
    transition: background 0.15s ease;
}

.blog-cta a:hover,
.blog-cta a:focus-visible {
    background: var(--blog-orange-deep);
}

/* --------------------------------------------------------------------------
   Article — footer nav
   -------------------------------------------------------------------------- */

.blog-footnav {
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--blog-line);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.blog-footnav a {
    color: var(--blog-muted);
    text-decoration: none;
}

.blog-footnav a:hover {
    color: var(--blog-orange);
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.blog-empty {
    padding: 3rem 0;
    color: var(--blog-muted);
    font-size: 1rem;
    line-height: 1.7;
}