/* =====================================================================
   BLOG — blog.html (listing / archive) and blog-detail.html (single post)

   Kept in its own file rather than appended to style.css. style.css is the
   design snapshot the WordPress plugin mirrors verbatim; it has already
   drifted out of sync once, and a separate sheet means the eventual port is
   one extra conditional enqueue instead of a re-sync of a 133KB file. Both
   blog pages load style.css first, so everything here builds on the design's
   own tokens, type scale and utilities rather than restating them.

   Palette, taken from style.css rather than invented:
     #FFF     archive toolbar / featured / grid, and the post page
     #E3E8EF  card and control borders on light
     #101012  headings on light
     #F5F8FC  related-posts band on the post page
     #312F39  card border on dark, as .spa-card uses
     #EF6D2C  accent — eyebrows, the italic half of an h2
     #0078D6  primary action
     #383743  body copy on light
   ===================================================================== */


/* =====================================================================
   1. HERO  (blog.html)

   The same construction as .listing-hero — full-bleed photo, bottom-anchored
   copy, gradient scrim behind it — at a shorter height, because an archive
   should get the reader to the posts rather than hold them on a banner.
   ===================================================================== */
.blog-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.blog-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.blog-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(1deg, #000 7.06%, rgba(0, 0, 0, 0.00) 46.24%);
    z-index: -1;
    pointer-events: none;
}

.blog-hero .container {
    width: 100%;
    padding-top: 100px;
    padding-bottom: 70px;
}

.blog-hero-inner {
    max-width: 680px;
    color: #FFF;
}

.blog-hero-inner h1 {
    margin-bottom: 14px;
}

.blog-hero-inner p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    margin: 0;
}


/* =====================================================================
   2. TOOLBAR — categories + search

   Sits on the light ground between the hero and the grid. The category pills
   reuse the .explore-tab idiom from the home page's slider tabs, so the
   active state reads the same way across the site.
   ===================================================================== */
.blog-toolbar {
    background: #FFF;
    padding: 34px 0 0;
}

.blog-toolbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.blog-cats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-cat {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border: 1px solid #E3E8EF;
    background: transparent;
    color: #383743;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        color var(--dur) var(--ease);
}

/* The theme reset styles bare buttons and anchors, so both states are stated
   here rather than left to inherit — the same reason the kit restates every
   button hover. */
.blog-cat:hover,
.blog-cat:focus-visible {
    background: #F5F8FC;
    border-color: #C3C2CC;
    color: #101012;
}

.blog-cat.is-active,
.blog-cat.is-active:hover {
    background: #0078D6;
    border-color: #0078D6;
    color: #FFF;
}

.blog-search {
    position: relative;
    flex: 0 0 auto;
    width: 300px;
    max-width: 100%;

    /* space-between only right-aligns the search while everything fits on one
       row. With enough categories to wrap, the search dropped to a second row
       and sat hard left; margin-left keeps it on the right either way. */
    margin-left: auto;
}

.blog-search input {
    width: 100%;
    padding: 12px 44px 12px 16px;
    border: 1px solid #E3E8EF;
    border-radius: 0;
    background: #FFF;
    color: #101012;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    transition: border-color var(--dur) var(--ease);
}

.blog-search input::placeholder {
    color: #8A8996;
}

.blog-search input:focus {
    outline: 0;
    border-color: #0078D6;
}

.blog-search button {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6B6A76;
    cursor: pointer;
    transition: color var(--dur) var(--ease);
}

.blog-search button:hover,
.blog-search button:focus-visible {
    background: transparent;
    color: #0078D6;
}

.blog-search svg,
.blog-search i {
    font-size: 15px;
}


/* =====================================================================
   3. FEATURED POST

   One post given the width of the grid it sits above: photo on the left,
   copy on the right. Same split proportions as .split-section on about.html.
   ===================================================================== */
.blog-featured {
    background: #FFF;
    padding: 40px 0 0;
}

.blog-featured-card {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 0;
    border: 1px solid #E3E8EF;
    overflow: hidden;
}

.blog-featured-media {
    position: relative;
    overflow: hidden;
    min-height: 420px;
}

.blog-featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-slow) var(--ease);
}

.blog-featured-card:hover .blog-featured-media img {
    transform: scale(1.04);
}

.blog-featured-body {
    padding: 48px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.blog-featured-body h2 {
    color: #101012;
    font-size: 36px;
    line-height: 46px;
    margin-bottom: 14px;
}

.blog-featured-body > p {
    color: #383743;
    font-size: 17px;
    line-height: 28px;
    margin-bottom: 26px;
}


/* ---- shared bits: the pill and the meta line ---- */
.blog-tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    background: rgba(239, 109, 44, 0.10);
    color: #EF6D2C;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 18px;
}

.blog-tag.on-light {
    background: rgba(239, 109, 44, 0.10);
}

.blog-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: #6B6A76;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 14px;
}

/* A dot between items rather than a character in the markup, so the
   separators never end up read out by a screen reader. */
.blog-meta > * + *::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 10px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
}

.blog-meta.on-light {
    color: #6B6A76;
}


/* =====================================================================
   4. POST GRID

   Three across, matching .spa-grid so the archive and the models listing
   read as the same family.
   ===================================================================== */
.blog-collection {
    background: #FFF;
    padding-top: 40px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #E3E8EF;
    overflow: hidden;
    background: #FFF;
}

.blog-card-media {
    position: relative;
    overflow: hidden;
}

.blog-card-media img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-slow) var(--ease);
}

.blog-card:hover .blog-card-media img {
    transform: scale(1.06);
}

/* The scrim the design puts on .spa-card-img. pointer-events: none matters —
   the identical gradient on the pool cards was silently swallowing every
   click on the card image until it was made transparent to the pointer. */
.blog-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(1deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 55%);
    pointer-events: none;
}

.blog-card-media .blog-tag {
    position: absolute;
    left: 18px;
    bottom: 16px;
    margin: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.62);
    color: #FFF;
}

.blog-card-body {
    padding: 24px 22px 28px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.blog-card-body h3 {
    color: #101012;
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 10px;
}

.blog-card-body h3 a {
    color: inherit;
    text-decoration: none;
}

.blog-card-body > p {
    color: #383743;
    font-size: 16px;
    line-height: 26px;
    margin: 0 0 22px;
}

/* Pushes the read-more to the bottom so a short excerpt does not leave the
   link floating mid-card and the row of cards keeps a common baseline. */
.blog-card-more {
    margin-top: auto;
}

.blog-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0078D6;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}

.blog-more::after {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: url('../images/right-arrow.svg') no-repeat center / contain;
}

.blog-more:hover,
.blog-more:focus-visible {
    gap: 14px;
    color: #0063B1;
}

/* The arrow SVG is drawn white for the dark ground; inverted for the light one. */
.blog-more::after {
    filter: invert(1);
}

.blog-more.on-light {
    color: #0078D6;
}

.blog-more.on-light::after {
    filter: invert(1);
}




/* =====================================================================
   4b. LIST LAYOUT — one post per row, categories sidebar beside it

   The Post Grid widget's default layout. Rows are image left, copy right,
   on a pale ground with no card border, so the photos carry the rhythm and
   the text reads as a column. The sidebar sticks while the list scrolls.
   ===================================================================== */
.blog-collection.is-list {
    background: #F8F9FB;
    padding: 80px 0;
}

.blog-list-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 80px;
    align-items: start;
}

.blog-list {
    display: flex;
    flex-direction: column;
    gap: 44px;
}

.blog-row {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.blog-row-media {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 16 / 10;
    background: #E3E8EF;
}

.blog-row-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-slow) var(--ease);
}

.blog-row:hover .blog-row-media img {
    transform: scale(1.04);
}

.blog-row-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.blog-row-cat {
    color: #101012;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    margin-bottom: 12px;
    transition: color var(--dur) var(--ease);
}

a.blog-row-cat:hover,
a.blog-row-cat:focus-visible {
    color: #0078D6;
}

.blog-row-title {
    color: inherit;
    text-decoration: none;
}

/* .ek-h3 is white by default for the design's dark bands; restated here. */
.blog-row-body .ek-card-title {
    color: #101012;
    font-size: 24px;
    line-height: 32px;
    margin: 0 0 14px;
    transition: color var(--dur) var(--ease);
}

.blog-row-title:hover .ek-card-title,
.blog-row-title:focus-visible .ek-card-title {
    color: #0078D6;
}

/* Two lines, then an ellipsis — keeps every row the same height whatever
   the excerpt length, as the reference layout does. */
.blog-row-body > p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: #6B6A76;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    margin: 0 0 18px;
}

/* Plain spacing between byline items rather than the dots the cards use. */
.blog-row-meta {
    gap: 14px;
    color: #8A8996;
    font-size: 15px;
    margin: 0;
}

.blog-row-meta > * + *::before {
    content: none;
}

/* ---- sidebar ---- */
.blog-sidebar {
    position: sticky;
    top: 110px;              /* clears the fixed header */
}

.blog-sidebar .blog-search {
    width: 100%;
    margin: 0 0 40px;
}

.blog-sidebar-title {
    color: #101012;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 30px;
    padding-bottom: 22px;
    border-bottom: 1px solid #DCE1E8;
}

.blog-sidebar-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-sidebar-cat {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border: 1px solid #C3C2CC;
    border-radius: 6px;
    background: #FFF;
    color: #101012;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    transition:
        background-color var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        color var(--dur) var(--ease);
}

.blog-sidebar-cat:hover,
.blog-sidebar-cat:focus-visible {
    border-color: #0078D6;
    color: #0078D6;
}

.blog-sidebar-cat.is-active,
.blog-sidebar-cat.is-active:hover {
    background: #0078D6;
    border-color: #0078D6;
    color: #FFF;
}


/* =====================================================================
   5. PAGINATION
   ===================================================================== */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 50px;
    flex-wrap: wrap;
}

.blog-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding: 0 12px;
    border: 1px solid #E3E8EF;
    background: transparent;
    color: #383743;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        color var(--dur) var(--ease);
}

.blog-page:hover,
.blog-page:focus-visible {
    background: #F5F8FC;
    border-color: #C3C2CC;
    color: #101012;
}

.blog-page.is-current,
.blog-page.is-current:hover {
    background: #0078D6;
    border-color: #0078D6;
    color: #FFF;
}

.blog-page.is-disabled {
    opacity: .4;
    pointer-events: none;
}

.blog-page-dots {
    color: #8A8996;
    padding: 0 4px;
}


/* =====================================================================
   6. NEWSLETTER

   A band in the site's primary blue (#0078D6), so the archive closes on a
   clear call to action. Everything on it is restated light: style.css
   gives the eyebrow, h2 and .sec-head copy dark colours meant for light
   sections, and the design's orange italic has too little contrast
   against this blue, so the italic half of the heading goes pale peach.
   ===================================================================== */
.blog-newsletter {
    background: #0078D6;
}

.blog-newsletter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.blog-newsletter .sec-head {
    max-width: 560px;
    margin: 0;
}

.blog-newsletter .sec-head .eyebrow {
    color: rgba(255, 255, 255, 0.85);
}

.blog-newsletter .sec-head h2 {
    color: #FFF;
    margin-bottom: 10px;
}

.blog-newsletter .sec-head h2 span,
.blog-newsletter .sec-head h2 .italic {
    color: #FFD2B8;
}

.blog-newsletter .sec-head p:not(.eyebrow) {
    color: rgba(255, 255, 255, 0.85);
}

/* The form and its privacy note, stacked in one column. */
.blog-newsletter-action {
    flex: 1 1 380px;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.blog-newsletter-form {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.blog-newsletter-form input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid #FFF;
    border-radius: 0;
    background: #FFF;
    color: #101012;
    font-family: inherit;
    font-size: 16px;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.blog-newsletter-form input:focus {
    outline: 0;
    border-color: #FFF;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

/* A blue button would vanish on a blue band, so it inverts: near-black
   with white text, which reads as the action next to the white field. */
.blog-newsletter-form button {
    flex: 0 0 auto;
    padding: 16px 28px;
    border: 0;
    background: #101012;
    color: #FFF;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);
}

.blog-newsletter-form button:hover,
.blog-newsletter-form button:focus-visible {
    background: #2A2A31;
    color: #FFF;
}

.blog-newsletter-note {
    color: rgba(255, 255, 255, 0.80);
    font-size: 14px;
    line-height: 22px;
    margin: 0;
}


/* =====================================================================
   7. POST HERO  (blog-detail.html)

   Light, unlike the archive's hero. The article body below it is long-form
   reading, and the design's own long-copy panels (.estimator-panel,
   .builder-form) are all light — starting dark and switching mid-page would
   read as two different pages stitched together.
   ===================================================================== */
.post-hero {
    background: #FFF;
    padding-top: 80px;
}

.post-hero-inner {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.post-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    color: #6B6A76;
    font-size: 14px;
    line-height: 1;
}

.post-breadcrumb a {
    color: #6B6A76;
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

.post-breadcrumb a:hover {
    color: #0078D6;
}

.post-breadcrumb li + li::before {
    content: '/';
    margin-right: 8px;
    color: #C3C2CC;
}

.post-breadcrumb [aria-current] {
    color: #101012;
}

.post-hero h1 {
    color: #101012;
    font-size: 52px;
    line-height: 62px;
    margin-bottom: 18px;
}

.post-hero h1 .italic {
    color: #EF6D2C;
    font-style: italic;
}

.post-standfirst {
    color: #383743;
    font-size: 19px;
    line-height: 30px;
    margin: 0 auto 28px;
    max-width: 720px;
}

/* ---- byline ---- */
.post-byline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.post-byline img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

/* Monogram stand-in for an author photo. The image library has no headshots,
   and the alternative — reusing a landscape pool photo in a round frame —
   presents a swimming pool as somebody's face. Swap in a real portrait and
   this rule stops applying. */
.post-avatar {
    width: 46px;
    height: 46px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #101012;
    color: #FFF;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .5px;
}

.post-avatar.lg {
    width: 84px;
    height: 84px;
    font-size: 26px;
}

.post-byline-text {
    text-align: left;
}

.post-byline-name {
    display: block;
    color: #101012;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.single .post-feature {
    margin-top: 44px !important;
}

.single .post-feature img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
}

.single .post-feature figcaption {
    color: #6B6A76;
    font-size: 14px;
    font-style: italic;
    line-height: 22px;
    padding-top: 12px;
}


/* =====================================================================
   8. ARTICLE LAYOUT
   ===================================================================== */
.post-main {
    background: #FFF;
}

.post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 60px;
    align-items: start;
}


/* ---- body copy ----
   Element selectors, deliberately: this is the one place on the site whose
   content comes from an editor rather than a repeater field, so the styling
   has to hold for whatever tags they use. */
.post-body {
    color: #383743;
    font-size: 17px;
    line-height: 30px;
}

/* Reset and gap at the same specificity, so source order decides and a
   later element rule (h2, blockquote, figure) can still override both.
   These were originally `.post-body p { margin: 0 }` plus the sibling rule —
   but `p` is (0,1,1) against the sibling selector's (0,1,0), so the shorthand
   won and every paragraph gap collapsed. */
.post-body > * {
    margin-top: 0;
    margin-bottom: 0;
}

.post-body > * + * {
    margin-top: 22px;
}

.post-body h2 {
    color: #101012;
    font-size: 32px;
    line-height: 42px;
    margin: 46px 0 0;
}

.post-body h3 {
    color: #101012;
    font-size: 23px;
    line-height: 32px;
    margin: 36px 0 0;
}

.post-body h2 + *,
.post-body h3 + * {
    margin-top: 14px;
}

.post-body a:not(.default-btn) {
    color: #0078D6;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.post-body strong {
    color: #101012;
    font-weight: 600;
}

.post-body ul,
.post-body ol {
    padding-left: 22px;
}

.post-body li + li {
    margin-top: 10px;
}

.post-body ul {
    list-style: none;
    padding-left: 0;
}

.post-body ul > li {
    position: relative;
    padding-left: 26px;
}

.post-body ul > li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 12px;
    width: 7px;
    height: 7px;
    background: #EF6D2C;
    border-radius: 50%;
}

.post-body blockquote {
    margin: 40px 0;
    padding: 4px 0 4px 28px;
    border-left: 3px solid #EF6D2C;
    color: #101012;
    font-family: 'Test Tiempos Fine', sans-serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 300;
    line-height: 36px;
}

.post-body blockquote cite {
    display: block;
    margin-top: 14px;
    color: #6B6A76;
    font-family: "Instrument Sans", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
}

.post-body figure {
    margin: 40px 0;
}

/* A tall or square source would otherwise run to a thousand pixels and push
   the rest of the article off the screen — finishes-img-1.jpg is nearly
   square. max-height leaves normal landscape photos at their own ratio and
   only crops the ones that would dominate the page. */
.post-body figure img {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    display: block;
}

.post-body figcaption {
    color: #6B6A76;
    font-size: 14px;
    font-style: italic;
    line-height: 22px;
    padding-top: 12px;
}

/* A pull-out for the "key takeaways" style block an editor will reach for. */
.post-callout {
    background: #ECF2F8;
    border-left: 3px solid #0078D6;
    padding: 26px 28px;
    margin: 40px 0;
}

.post-callout h3 {
    margin: 0 0 12px !important;
    font-size: 19px;
    line-height: 28px;
}

.post-callout ul {
    margin: 0;
}

.post-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.post-body th,
.post-body td {
    border: 1px solid #E3E8EF;
    padding: 12px 14px;
    text-align: left;
    line-height: 24px;
}

.post-body th {
    background: #F5F8FC;
    color: #101012;
    font-weight: 600;
}


/* ---- tags + share, under the article ---- */
.post-footer {
    margin-top: 46px;
    padding-top: 28px;
    border-top: 1px solid #E3E8EF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.post-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-tags a {
    display: inline-flex;
    padding: 8px 14px;
    background: #F1F4F8;
    color: #383743;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.post-tags a:hover {
    background: #0078D6;
    color: #FFF;
}

.post-share {
    display: flex;
    align-items: center;
    gap: 10px;
}

.post-share span {
    color: #6B6A76;
    font-size: 14px;
}

.post-share a {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E3E8EF;
    color: #383743;
    text-decoration: none;
    transition:
        background-color var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        color var(--dur) var(--ease);
}

.post-share a:hover {
    background: #101012;
    border-color: #101012;
    color: #FFF;
}



/* ---------------------------------------------------------------------
   Keeping the article's typography out of the widget's own furniture

   .post-footer and .post-author sit inside .post-body, because that is where
   the design puts them — so they inherited the rules meant for editor content:
   the tag list picked up the orange list bullets and the 26px indent, and both
   the tags and the share icons came out blue and underlined by the body's link
   rule.

   Restated here rather than by narrowing the body selectors, because those
   have to keep matching whatever an editor writes. These are more specific
   (.post-body .post-tags a is (0,2,1) and sits later in the file), so they win
   without needing !important.
   --------------------------------------------------------------------- */
.post-body .post-tags,
.post-body .post-share {
    list-style: none;
    padding-left: 0;
}

.post-body .post-tags > li {
    padding-left: 0;
    margin-top: 0;
}

/* The article gives every list item an orange bullet. The tags are chips in a
   row, not prose. */
.post-body .post-tags > li::before {
    content: none;
}

.post-body .post-tags a,
.post-body .post-share a {
    color: #383743;
    text-decoration: none;
}

.post-body .post-tags a:hover,
.post-body .post-tags a:focus-visible {
    color: #FFF;
    text-decoration: none;
}

.post-body .post-share a:hover,
.post-body .post-share a:focus-visible {
    color: #FFF;
    text-decoration: none;
}

/* ---- author box ---- */
.post-author {
    margin-top: 46px;
    padding: 30px;
    background: #F5F8FC;
    display: flex;
    gap: 22px;
    align-items: flex-start;
}

.post-author img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

.post-author h3 {
    color: #101012;
    font-size: 20px;
    line-height: 28px;
    margin: 0 0 4px;
}

.post-author-role {
    display: block;
    color: #EF6D2C;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.post-author p {
    color: #383743;
    font-size: 16px;
    line-height: 26px;
    margin: 0;
}


/* =====================================================================
   9. SIDEBAR
   ===================================================================== */
.post-aside {
    position: sticky;
    top: 110px;              /* clears the fixed header */
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.post-widget {
    border: 1px solid #E3E8EF;
    padding: 24px 22px;
}

.post-widget-title {
    color: #101012;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin: 0 0 16px;
}

/* ---- table of contents ---- */
.post-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}

.post-toc li {
    counter-increment: toc;
}

.post-toc li + li {
    margin-top: 12px;
}

.post-toc a {
    display: flex;
    gap: 10px;
    color: #383743;
    font-size: 15px;
    line-height: 24px;
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

.post-toc a::before {
    content: counter(toc) '.';
    color: #A9A8B4;
    font-weight: 600;
    flex: none;
}

.post-toc a:hover {
    color: #0078D6;
}

/* ---- popular posts ---- */
.post-mini {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    text-decoration: none;
}

.post-mini + .post-mini {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #E3E8EF;
}

.post-mini img {
    width: 76px;
    height: 62px;
    object-fit: cover;
    flex: none;
}

.post-mini h4 {
    color: #101012;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    margin: 0 0 6px;
    transition: color var(--dur) var(--ease);
}

.post-mini:hover h4 {
    color: #0078D6;
}

.post-mini time {
    color: #8A8996;
    font-size: 13px;
    line-height: 1;
}

/* ---- sidebar CTA ---- */
.post-cta-card {
    background: #101012;
    padding: 28px 24px;
}

.post-cta-card h3 {
    color: #FFF;
    font-size: 21px;
    line-height: 29px;
    margin: 0 0 10px;
}

.post-cta-card p {
    color: rgba(255, 255, 255, 0.70);
    font-size: 15px;
    line-height: 24px;
    margin: 0 0 20px;
}


/* =====================================================================
   10. RELATED POSTS
   ===================================================================== */
.post-related {
    background: #F5F8FC;
}

/* The heading's own 15px margin is all that separates it from the cards
   otherwise, which crowds a centred 45px heading against the photos. */
.post-related .blog-grid {
    margin-top: 50px;
}

@media (max-width: 767px) {
    .post-related .blog-grid {
        margin-top: 32px;
    }
}

/* A pale tint rather than white, so the band still reads as its own section
   under the white article, and the white cards stand off it. */
.post-related .sec-head h2 {
    color: #101012;
}


/* =====================================================================
   11. RESPONSIVE — the design's own breakpoints
   ===================================================================== */
@media (max-width: 1200px) {
    .post-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 40px;
    }

    .blog-featured-body {
        padding: 38px 34px;
    }

    .blog-featured-body h2 {
        font-size: 30px;
        line-height: 40px;
    }

    .blog-list-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 50px;
    }

    .blog-row {
        gap: 32px;
    }

    .blog-row-body .ek-card-title {
        font-size: 21px;
        line-height: 29px;
    }
}

@media (max-width: 991px) {
    .blog-hero {
        min-height: 440px;
    }

    .blog-hero .container {
        padding-top: 130px;
        padding-bottom: 50px;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* The sidebar moves above the list rather than below it: nine posts
       down is too far to scroll to find the category filter. */
    .blog-collection.is-list {
        padding: 50px 0 60px;
    }

    .blog-list-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .blog-sidebar {
        position: static;
        order: -1;
    }

    .blog-sidebar .blog-search {
        margin-bottom: 28px;
    }

    .blog-sidebar-title {
        margin-bottom: 20px;
        padding-bottom: 16px;
    }

    /* Stacked, photo first: at this width the two columns leave the copy too
       narrow to read comfortably. */
    .blog-featured-card {
        grid-template-columns: 1fr;
    }

    .blog-featured-media {
        min-height: 0;
    }

    .blog-featured-media img {
        height: 320px;
    }

    /* The sidebar stops being a sidebar and becomes a band under the article,
       so sticky has to be released or it pins mid-scroll. */
    .post-layout {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .post-aside {
        position: static;
        top: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .post-hero h1 {
        font-size: 40px;
        line-height: 50px;
    }

   .single .post-feature img {
        height: 380px;
    }
}

@media (max-width: 767px) {
    .blog-toolbar-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .blog-search {
        width: 100%;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .blog-list {
        gap: 40px;
    }

    .blog-featured-body {
        padding: 30px 24px;
    }

    .blog-newsletter-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .blog-newsletter-action {
        max-width: none;
        flex-basis: auto;
    }

    .post-aside {
        grid-template-columns: 1fr;
    }

    .post-hero {
        padding-top: 110px;
    }

    .post-hero h1 {
        font-size: 32px;
        line-height: 42px;
    }

    .post-standfirst {
        font-size: 17px;
        line-height: 28px;
    }

    .single .post-feature img {
        height: 260px;
    }

    .post-body {
        font-size: 16px;
        line-height: 28px;
    }

    .post-body h2 {
        font-size: 26px;
        line-height: 36px;
        margin-top: 36px;
    }

    .post-body blockquote {
        font-size: 21px;
        line-height: 32px;
        padding-left: 20px;
    }

    .post-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .post-author {
        flex-direction: column;
        padding: 24px;
    }
}

@media (max-width: 575px) {
    .blog-hero-inner p {
        font-size: 16px;
        line-height: 26px;
    }

    .blog-card-media img {
        height: 200px;
    }

    .blog-newsletter-form {
        flex-direction: column;
    }

    .blog-page {
        min-width: 40px;
        height: 40px;
    }
}