/* ─────────────────────────────────────────────────────────────────────
   Editorial blogpost layout
   Hero (featured image + light/dark overlay) → white article card with
   a sticky table of contents. Rendered by ContentResolver::renderBlogPostLayout().
   Loaded on top of story-page.css (shared wrapper/shell rules).
   ───────────────────────────────────────────────────────────────────── */

.blog-post-wrapper,
.story-template-residential .blog-post-wrapper {
    --blog-radius: 32px;
    --blog-card-radius: 28px;
    --blog-hero-pad: clamp(24px, 3.6vw, 52px);
    --blog-ink: #14222c;
    --blog-ink-soft: #3a4d58;
    --blog-muted: #6b7c86;
    --blog-line: rgba(20, 34, 44, 0.09);
    --blog-accent: var(--brand-blue, #3c8dc7);
    --blog-card-bg: #ffffff;
    --blog-quote-bg: #f2f7f9;
    --blog-toc-bg: #f4f8fa;
    --blog-sticky-top: calc(var(--header-height, 72px) + 28px);
    /* Header is sticky (in flow): no extra offset needed above the hero. */
    margin-top: 0;
    gap: 0;
}

/* Keep the site gradient as page ground; hero + card float on it. */
.template-user-story.template-blogpost {
    background:
        radial-gradient(circle at top left, rgba(103, 152, 173, 0.2), transparent 34%),
        radial-gradient(circle at 85% 8%, rgba(60, 141, 199, 0.12), transparent 30%),
        linear-gradient(180deg, #f3f8fa 0, #ffffff 520px);
}

/* ═══════════════════════ HERO ═══════════════════════ */

.blog-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: min(var(--container-width, 1440px), 100%);
    margin: 10px auto 0;
    min-height: clamp(440px, 58vh, 660px);
    display: flex;
    border-radius: var(--blog-radius);
    background-color: #dfe9ef;
    box-shadow:
        0 24px 60px rgba(24, 39, 56, 0.10),
        0 2px 8px rgba(24, 39, 56, 0.05);
}

.blog-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    display: block;
}

.blog-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Overlays use the Hydraloop blues from the story hero:
   dark = navy #365072, light = light blue #6798AD. White type on both. */
.blog-hero--dark .blog-hero__overlay {
    background:
        linear-gradient(180deg, rgba(54, 80, 114, 0.12) 0%, rgba(54, 80, 114, 0.38) 42%, rgba(38, 58, 86, 0.86) 100%),
        linear-gradient(90deg, rgba(54, 80, 114, 0.55) 0%, rgba(54, 80, 114, 0.18) 48%, rgba(54, 80, 114, 0) 74%);
}

.blog-hero--light .blog-hero__overlay {
    background:
        linear-gradient(180deg, rgba(103, 152, 173, 0.14) 0%, rgba(103, 152, 173, 0.42) 42%, rgba(84, 130, 152, 0.86) 100%),
        linear-gradient(90deg, rgba(103, 152, 173, 0.62) 0%, rgba(103, 152, 173, 0.22) 48%, rgba(103, 152, 173, 0) 74%);
}

/* No featured image: brand gradients instead of a photo. */
.blog-hero--dark.no-image {
    background: linear-gradient(135deg, #2b4463 0%, #365072 38%, #5f8ea6 100%);
}

.blog-hero--light.no-image {
    background: linear-gradient(135deg, #5b8ba3 0%, #6798ad 42%, #8fb5c7 100%);
}

.blog-hero.no-image .blog-hero__overlay {
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.16), transparent 42%),
        radial-gradient(circle at 12% 92%, rgba(0, 0, 0, 0.12), transparent 40%);
}

.blog-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(48px, 9vh, 96px);
    width: 100%;
    padding: var(--blog-hero-pad);
}

.blog-hero__back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px 11px 14px;
    border-radius: 999px;
    font-family: 'Urbanist', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}

.blog-hero__back:hover {
    transform: translateY(-1px);
}

.blog-hero__back-arrow {
    display: inline-block;
    transition: transform 0.22s ease;
}

.blog-hero__back:hover .blog-hero__back-arrow {
    transform: translateX(-3px);
}

.blog-hero__back {
    color: #ffffff;
    background: rgba(20, 34, 44, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.30);
}

.blog-hero__back:hover {
    background: rgba(20, 34, 44, 0.40);
    border-color: rgba(255, 255, 255, 0.48);
}

.blog-hero__content {
    max-width: 760px;
    display: flex;
    flex-direction: column;
}

.blog-hero__content {
    color: #ffffff;
}

.blog-hero__eyebrow {
    margin: 0 0 18px;
    font-family: 'Urbanist', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.88;
}

.blog-hero__title {
    margin: 0;
    font-family: 'Urbanist', sans-serif;
    font-size: clamp(2.35rem, 4.6vw, 4.25rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.005em;
    text-wrap: balance;
}

.blog-hero__title {
    color: #ffffff;
    text-shadow: 0 10px 34px rgba(8, 18, 26, 0.32);
}

.blog-hero__subtitle {
    margin: 18px 0 0;
    font-family: 'Urbanist', sans-serif;
    font-size: clamp(1.15rem, 1.7vw, 1.5rem);
    font-weight: 500;
    line-height: 1.35;
    opacity: 0.94;
    text-wrap: pretty;
}

.blog-hero__intro {
    margin: 16px 0 0;
    max-width: 62ch;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.98rem, 1.1vw, 1.08rem);
    font-weight: 400;
    line-height: 1.65;
    opacity: 0.86;
    text-wrap: pretty;
}

.blog-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    opacity: 0.86;
}

.blog-hero__sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}

/* ═══════════════════════ ARTICLE CARD ═══════════════════════ */

.blog-layout {
    width: 100%;
    padding: 20px 0 0;
}

.blog-card {
    /* Same outer width as the hero, so both blocks share their edges. */
    width: min(var(--container-width, 1440px), 100%);
    margin: 0 auto;
    padding: clamp(28px, 4.6vw, 72px) clamp(28px, 5.2vw, 84px);
    background: var(--blog-card-bg);
    border: 1px solid var(--blog-line);
    border-radius: var(--blog-card-radius);
    box-shadow:
        0 22px 60px rgba(18, 33, 43, 0.07),
        0 2px 6px rgba(18, 33, 43, 0.04);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 80px);
    align-items: start;
}

.blog-layout.has-toc .blog-card {
    grid-template-columns: minmax(0, 1fr) 248px;
}

.blog-article {
    min-width: 0;
}

.blog-article__body {
    max-width: 820px;
    font-family: 'Urbanist', sans-serif;
    font-size: 1.125rem;
    line-height: 1.78;
    color: var(--blog-ink-soft);
    overflow-wrap: anywhere;
}

.blog-article__body > :first-child {
    margin-top: 0;
}

.blog-article__body > :last-child {
    margin-bottom: 0;
}

/* Text */
.blog-article__body p {
    margin: 0 0 1.45em;
}

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

.blog-article__body a:not([class]) {
    color: var(--blog-accent);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.16em;
    text-decoration-color: rgba(60, 141, 199, 0.45);
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.blog-article__body a:not([class]):hover {
    color: var(--brand-blue-dark, #2d7ab3);
    text-decoration-color: currentColor;
}

/* Headings — clear steps between levels */
.blog-article__body h1,
.blog-article__body h2,
.blog-article__body h3,
.blog-article__body h4 {
    color: var(--blog-ink);
    font-family: 'Urbanist', sans-serif;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-wrap: balance;
    scroll-margin-top: calc(var(--header-height, 72px) + 24px);
}

.blog-article__body h1 {
    font-size: clamp(2.1rem, 3.4vw, 2.85rem);
    line-height: 1.12;
    margin: 2.2em 0 0.65em;
}

.blog-article__body h2 {
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    line-height: 1.18;
    margin: 2.3em 0 0.7em;
    padding-top: 0.2em;
}

.blog-article__body h3 {
    font-size: clamp(1.28rem, 1.9vw, 1.5rem);
    line-height: 1.3;
    margin: 1.9em 0 0.6em;
}

.blog-article__body h4 {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 1.7em 0 0.5em;
}

.blog-article__body h2 + h3,
.blog-article__body h3 + h4 {
    margin-top: 1.1em;
}

/* Lists */
.blog-article__body ul,
.blog-article__body ol {
    margin: 0 0 1.6em;
    padding-left: 1.45em;
}

.blog-article__body li {
    margin: 0.5em 0;
    padding-left: 0.2em;
}

.blog-article__body li::marker {
    color: var(--blog-accent);
    font-weight: 700;
}

.blog-article__body ul ul,
.blog-article__body ol ol,
.blog-article__body ul ol,
.blog-article__body ol ul {
    margin: 0.5em 0 0.6em;
}

/* Images & captions */
.blog-article__body img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
}

.blog-article__body figure,
.blog-article__body .wp-block-image {
    margin: 2.2em 0;
    padding: 0;
    max-width: 100%;
}

.blog-article__body figure img {
    width: 100%;
}

.blog-article__body figcaption {
    margin-top: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--blog-muted);
    text-align: left;
}

/* Neutralise WP full-bleed helpers inside the card */
.blog-article__body .alignfull,
.blog-article__body .alignwide {
    width: 100%;
    max-width: 100%;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
}

.blog-article__body .alignleft,
.blog-article__body .alignright,
.blog-article__body .aligncenter {
    float: none;
    margin-left: 0;
    margin-right: 0;
}

/* Quotes / highlighted information */
.blog-article__body blockquote,
.blog-article__body .wp-block-pullquote {
    margin: 2.2em 0;
    padding: 24px 28px 24px 30px;
    border: 0;
    border-left: 4px solid var(--blog-accent);
    border-radius: 0 20px 20px 0;
    background: var(--blog-quote-bg);
    color: var(--blog-ink);
    font-size: 1.08em;
    line-height: 1.6;
    text-align: left;
}

.blog-article__body blockquote p,
.blog-article__body .wp-block-pullquote p {
    margin: 0 0 0.8em;
    font-size: inherit;
    line-height: inherit;
}

.blog-article__body blockquote p:last-child,
.blog-article__body .wp-block-pullquote p:last-child {
    margin-bottom: 0;
}

.blog-article__body blockquote cite,
.blog-article__body .wp-block-pullquote cite {
    display: block;
    margin-top: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 600;
    color: var(--blog-muted);
}

/* Misc blocks */
.blog-article__body hr {
    border: 0;
    height: 1px;
    margin: 3em 0;
    background: var(--blog-line);
}

.blog-article__body table {
    width: 100%;
    margin: 0 0 1.8em;
    border-collapse: collapse;
    font-size: 0.95em;
}

.blog-article__body th,
.blog-article__body td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--blog-line);
    text-align: left;
    vertical-align: top;
}

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

.blog-article__body code {
    padding: 0.1em 0.4em;
    border-radius: 6px;
    background: var(--blog-toc-bg);
    font-size: 0.9em;
}

.blog-article__body pre {
    overflow-x: auto;
    padding: 18px 20px;
    border-radius: 14px;
    background: var(--blog-toc-bg);
    font-size: 0.9em;
    line-height: 1.55;
}

.blog-article__body iframe,
.blog-article__body video {
    max-width: 100%;
    border-radius: 18px;
}

/* "More blogposts" carousel below the card: align to the card grid */
.blog-post-wrapper > .story-more-section {
    padding-top: 44px;
}

.blog-post-wrapper > .story-more-section .story-page-shell {
    width: min(var(--container-width, 1440px), 100%);
    margin: 0 auto;
}

/* ═══════════════════════ TABLE OF CONTENTS ═══════════════════════ */

.blog-toc--side {
    position: sticky;
    top: var(--blog-sticky-top);
    align-self: start;
    max-height: calc(100vh - var(--blog-sticky-top) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0 8px 22px;
    border-left: 1px solid var(--blog-line);
    scrollbar-width: thin;
}

.blog-toc__title {
    margin: 0 0 14px;
    font-family: 'Urbanist', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blog-muted);
}

.blog-toc__list,
.blog-toc__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-toc__item {
    margin: 0;
}

.blog-toc__item a {
    position: relative;
    display: block;
    padding: 7px 0 7px 14px;
    margin-left: -23px;
    border-left: 2px solid transparent;
    padding-left: 21px;
    color: #4f6470;
    font-family: 'Urbanist', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.blog-toc__item--sub > a {
    padding-left: 37px;
    font-size: 0.86rem;
    font-weight: 400;
    color: #66798a;
}

.blog-toc__item a:hover {
    color: var(--blog-ink);
}

.blog-toc__item a.is-active {
    color: var(--blog-accent);
    border-left-color: var(--blog-accent);
    font-weight: 600;
}

/* Mobile "On this page" accordion — hidden on desktop */
.blog-toc--mobile {
    display: none;
    margin: 0 0 30px;
    border-radius: 16px;
    background: var(--blog-toc-bg);
    border: 1px solid var(--blog-line);
}

.blog-toc__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    font-family: 'Urbanist', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--blog-ink);
    -webkit-tap-highlight-color: transparent;
}

.blog-toc__summary::-webkit-details-marker {
    display: none;
}

.blog-toc__summary::marker {
    content: '';
}

.blog-toc__chevron {
    flex-shrink: 0;
    color: var(--blog-muted);
    transition: transform 0.22s ease;
}

.blog-toc--mobile[open] .blog-toc__chevron {
    transform: rotate(180deg);
}

.blog-toc--mobile .blog-toc__nav {
    padding: 0 18px 12px;
}

.blog-toc--mobile .blog-toc__item a {
    margin-left: 0;
    padding: 8px 0 8px 12px;
    border-left-width: 2px;
}

.blog-toc--mobile .blog-toc__item--sub > a {
    padding-left: 28px;
}

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */

@media (max-width: 1180px) {
    .blog-layout.has-toc .blog-card {
        grid-template-columns: minmax(0, 1fr) 208px;
    }
}

@media (max-width: 1024px) {
    .blog-layout.has-toc .blog-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-toc--side {
        display: none;
    }

    .blog-toc--mobile {
        display: block;
    }

    .blog-article__body {
        max-width: 100%;
    }

    .blog-hero {
        min-height: clamp(400px, 52vh, 560px);
    }
}

@media (max-width: 800px) {
    .blog-post-wrapper {
        --blog-radius: 24px;
        --blog-card-radius: 22px;
        padding-top: 0;
    }

    .blog-hero {
        margin-top: 6px;
        min-height: clamp(380px, 60vh, 520px);
    }

    .blog-hero__inner {
        gap: 40px;
    }

    .blog-hero__content {
        max-width: 100%;
    }

    .blog-hero__intro {
        font-size: 0.98rem;
    }

    .blog-layout {
        padding-top: 12px;
    }

    .blog-card {
        padding: 26px 22px 30px;
    }

    .blog-article__body {
        font-size: 1.05rem;
        line-height: 1.72;
    }

    .blog-article__body img,
    .blog-article__body iframe,
    .blog-article__body video {
        border-radius: 14px;
    }

    .blog-article__body blockquote,
    .blog-article__body .wp-block-pullquote {
        padding: 18px 20px 18px 22px;
        border-radius: 0 16px 16px 0;
    }
}

@media (max-width: 480px) {
    .blog-post-wrapper {
        --blog-radius: 20px;
        --blog-card-radius: 18px;
        --blog-hero-pad: 18px;
    }

    .blog-hero__back {
        font-size: 0.86rem;
        padding: 10px 14px 10px 12px;
    }

    .blog-hero__title {
        font-size: clamp(2rem, 9vw, 2.6rem);
    }

    .blog-hero__meta {
        margin-top: 22px;
    }

    .blog-card {
        padding: 22px 18px 26px;
    }
}

/* Users who prefer less motion get no hover slides */
@media (prefers-reduced-motion: reduce) {
    .blog-hero__back,
    .blog-hero__back-arrow,
    .blog-toc__chevron {
        transition: none;
    }
}

/* ═══════════════════════ DARK MODE ═══════════════════════ */

[data-theme="dark"] .template-user-story.template-blogpost {
    background:
        radial-gradient(circle at top left, rgba(103, 152, 173, 0.12), transparent 34%),
        linear-gradient(180deg, #131a22 0, #0d1117 520px);
}

[data-theme="dark"] .blog-post-wrapper {
    --blog-ink: #f0f6fc;
    --blog-ink-soft: #c9d1d9;
    --blog-muted: #8b949e;
    --blog-line: rgba(255, 255, 255, 0.09);
    --blog-accent: #79b8dc;
    --blog-card-bg: #161b22;
    --blog-quote-bg: rgba(121, 184, 220, 0.08);
    --blog-toc-bg: #1c232c;
}

[data-theme="dark"] .blog-card {
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .blog-hero {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .blog-toc__item a {
    color: #9fb0bd;
}

[data-theme="dark"] .blog-toc__item--sub > a {
    color: #8b9aa6;
}

[data-theme="dark"] .blog-toc__item a:hover {
    color: #f0f6fc;
}

[data-theme="dark"] .blog-article__body a:not([class]) {
    text-decoration-color: rgba(121, 184, 220, 0.5);
}

[data-theme="dark"] .blog-article__body a:not([class]):hover {
    color: #a5d0ea;
}