/*
 * Blog: the index, the three category hubs and the posts.
 *
 * Shares the tokens and section rhythm of the rest of the new design, in its
 * own file so a fresh drop of the design team's stylesheet cannot wipe it.
 *
 * The post body is the part that matters. It is CMS output written over four
 * years by several hands, so the prose styles below have to hold up against
 * markup nobody is going to go back and normalise — tables, nested lists,
 * images of every size, headings from h2 to h5.
 */

.blog-hero {
    background: linear-gradient(160deg, #fdf2f2 0%, #ffffff 65%);
    padding: 32px 0 40px;
}

.blog-breadcrumb {
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    color: #6b7280;
}

.blog-breadcrumb a { color: #6b7280; text-decoration: none; }
.blog-breadcrumb a:hover { color: var(--primary-red); }
.blog-breadcrumb span { margin: 0 0.35rem; }
.blog-breadcrumb span[aria-current] { margin-left: 0; color: #111827; }

.blog-hero h1 {
    max-width: 46rem;
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.blog-hero__lead {
    max-width: 44rem;
    font-size: 1.02rem;
    line-height: 1.75;
    color: #4b5563;
    margin: 0 0 1.75rem;
}

/* ------------------------------------------------------------ topic links */

.blog-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.blog-topics a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.blog-topics a:hover { border-color: #f3d0d0; color: var(--primary-red); }

.blog-topics a.is-active {
    background: var(--primary-red);
    border-color: var(--primary-red);
    color: #fff;
}

.blog-topics span {
    font-size: 0.76rem;
    font-weight: 500;
    opacity: 0.7;
}

.blog-topics--footer {
    margin: -0.35rem 0 1.75rem;
}

/* ---------------------------------------------------------------- tags */

.tag {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
}

.tag--featured { background: #fdeaea; color: #b02024; }
.tag--link { text-decoration: none; }
.tag--link:hover { background: #fdeaea; color: #b02024; }

/* ------------------------------------------------------------- featured */

.blog-featured { padding: 40px 0 8px; }

.featured-post {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.featured-post:hover {
    color: inherit;
    border-color: #f3d0d0;
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.1);
}

.featured-post__media { background: #f8f9fb; }

.featured-post__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 18rem;
    object-fit: cover;
}

.featured-post__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 2rem 2.25rem;
}

.featured-post__meta,
.post-card__meta,
.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
    color: #6b7280;
}

.featured-post__title {
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    font-weight: 800;
    line-height: 1.3;
    color: #111827;
}

.featured-post__excerpt {
    font-size: 0.97rem;
    line-height: 1.7;
    color: #6b7280;
}

.featured-post__more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-red);
}

.featured-post__more i { font-size: 0.7rem; }

/* ---------------------------------------------------------------- grid */

.blog-grid { padding: 40px 0 8px; }
.blog-related { padding: 48px 0 8px; }

.post-card { height: 100%; }

.post-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.post-card__link:hover {
    transform: translateY(-4px);
    border-color: #f3d0d0;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}

.post-card__media { background: #f8f9fb; }

.post-card__media img {
    display: block;
    width: 100%;
    height: 12.5rem;
    object-fit: cover;
}

.post-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1 1 auto;
    padding: 1.15rem 1.3rem 1.35rem;
}

.post-card__title {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.4;
    color: #111827;
}

.post-card__excerpt {
    font-size: 0.88rem;
    line-height: 1.65;
    color: #6b7280;
}

.post-card__date {
    margin-top: auto;
    padding-top: 0.4rem;
    font-size: 0.78rem;
    color: #9ca3af;
}

/* ---------------------------------------------------------- pagination */

.blog-pagination { margin-top: 2.5rem; }

.blog-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 8px;
    color: #374151;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.blog-pagination .page-link:hover { border-color: #f3d0d0; color: var(--primary-red); }

.blog-pagination .active .page-link {
    background: var(--primary-red);
    border-color: var(--primary-red);
    color: #fff;
}

.blog-pagination .disabled .page-link { opacity: 0.45; pointer-events: none; }
.blog-pagination svg { width: 0.85rem; height: 0.85rem; fill: currentColor; }

/* ------------------------------------------------------------ post page */

.post-hero {
    background: linear-gradient(160deg, #fdf2f2 0%, #ffffff 65%);
    padding: 32px 0 48px;
}

.post-hero h1 {
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.post-meta { margin-bottom: 1.1rem; }

.post-standfirst {
    max-width: 40rem;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #4b5563;
}

/* The hero, stacked: words first, then the whole picture at full width.

   Side by side, the columns only balanced on a post with a standfirst, and 55
   of 61 have none. A heading and a date against a tall image left 180px of
   blank space; shrinking the image closed the gap and made the picture too
   small to read. Neither is a layout problem the picture should be paying for. */

.post-hero__intro {
    max-width: 46rem;
    margin: 0 auto 2rem;
    text-align: center;
}

.post-hero__intro .post-meta { justify-content: center; }
.post-hero__intro .post-standfirst { margin-inline: auto; }

.post-hero__figure {
    /* Centred under the title, and as large as the artwork allows: these are
       drawn at 1000px, so 60rem is the point past which they would be upscaled
       and go soft. */
    max-width: 60rem;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14);
}

/* No crop and no fixed height: several heroes are graphic cards with the
   article's title set into the artwork, and cover would cut the words off.
   The image's own proportions decide how tall the block is.

   The height cap is for the one portrait hero in 59 — at full column width it
   would otherwise stand 1,100px tall and push the article off the screen. A
   portrait image shrinks to fit that height and centres; every landscape one
   is unaffected. */
.post-hero__image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 32rem;
    margin: 0 auto;
}

.post-layout { padding: 56px 0 32px; }

/* ------------------------------------------------------------- contents */

.post-contents {
    position: sticky;
    top: 1.5rem;
    padding: 1.25rem 1.4rem;
    background: #f8f9fb;
    border: 1px solid #eceef1;
    border-radius: 14px;
}

.post-contents summary {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
    cursor: pointer;
}

.post-contents ol {
    counter-reset: contents;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.post-contents li {
    counter-increment: contents;
    padding: 0.35rem 0;
    border-top: 1px solid #eceef1;
}

.post-contents li:first-child { border-top: 0; }

.post-contents a {
    display: block;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #374151;
    text-decoration: none;
}

.post-contents a::before {
    content: counter(contents) ". ";
    color: #9ca3af;
}

.post-contents a:hover { color: var(--primary-red); }

/* Anchored headings must clear the sticky header when jumped to. */
.post-body :is(h2, h3) { scroll-margin-top: 6rem; }

/* ------------------------------------------------------------- the prose */

.post-body {
    max-width: 46rem;
    font-size: 1.03rem;
    line-height: 1.85;
    color: #374151;
}

.post-body > :first-child { margin-top: 0; }

.post-body h2 {
    margin: 2.75rem 0 1rem;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 800;
    line-height: 1.3;
    color: #111827;
}

.post-body h3 {
    margin: 2rem 0 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    color: #111827;
}

.post-body :is(h4, h5, h6) {
    margin: 1.6rem 0 0.6rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: #111827;
}

.post-body p { margin: 0 0 1.25rem; }

.post-body :is(ul, ol) { margin: 0 0 1.5rem; padding-left: 1.35rem; }
.post-body li { margin-bottom: 0.6rem; }
.post-body li::marker { color: var(--primary-red); }

.post-body a { color: var(--primary-red); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { text-decoration-thickness: 2px; }

.post-body strong { color: #111827; }

/* Four years of CMS output: images arrive at every size, and some are inside
   containers the old stylesheet used to constrain. */
.post-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.75rem auto;
    border-radius: 12px;
}

.post-body blockquote {
    margin: 1.75rem 0;
    padding: 0.35rem 0 0.35rem 1.25rem;
    border-left: 3px solid var(--primary-red);
    color: #4b5563;
    font-style: italic;
}

/* A wide table scrolls inside itself rather than pushing the page sideways. */
.post-body table {
    display: block;
    overflow-x: auto;
    width: 100%;
    margin: 0 0 1.75rem;
    border-collapse: collapse;
    font-size: 0.94rem;
}

.post-body :is(th, td) {
    padding: 0.65rem 0.9rem;
    border: 1px solid #eceef1;
    text-align: left;
    line-height: 1.6;
}

.post-body th { background: #f8f9fb; font-weight: 700; color: #111827; }

.post-body iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 1.75rem 0;
    border: 0;
    border-radius: 12px;
}

/* ---------------------------------------------------------------- sharing */

.share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f3f5;
}

.share__label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.share__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.share__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.share__link:hover,
.share__link:focus-visible {
    border-color: #f3d0d0;
    color: var(--primary-red);
}

/* WhatsApp leads the row, so it carries its own colour rather than sitting in
   a line of identical pills. */
.share__link--whatsapp {
    background: #e9f8ee;
    border-color: #cbead6;
    color: #157a3c;
}

.share__link--whatsapp:hover { background: #ddf3e5; color: #106b32; }

.share__link.is-copied {
    background: #e7f6ec;
    border-color: #cfe9d8;
    color: #1a7f43;
}

.share__link i { font-size: 0.9rem; }

/* Where a share sheet exists, one button replaces the row. */
.share--native .share__list { display: none; }

.share__native {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary-red);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.share__native:hover { background: #cc1820; }

.post-more {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f3f5;
}

.post-more a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--primary-red);
    text-decoration: none;
}

.post-more i { font-size: 0.7rem; }

/* --------------------------------------------------- products in context */

.blog-products {
    padding: 48px 0 56px;
    background: #f8f9fb;
    border-top: 1px solid #eceef1;
}

.blog-products h2,
.blog-related h2 {
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    font-weight: 800;
    margin-bottom: 0.75rem;
}

.blog-products__lead {
    max-width: 44rem;
    margin: 0 0 1.5rem;
    font-size: 0.97rem;
    line-height: 1.7;
    color: #6b7280;
}

.blog-products .row { margin-top: 1.25rem; }

.product-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.product-tile:hover {
    color: inherit;
    border-color: #f3d0d0;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.product-tile__media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 9.5rem;
    padding: 0.9rem;
    background: #fff;
}

.product-tile__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.product-tile__title {
    padding: 0 1rem;
    font-size: 0.93rem;
    font-weight: 700;
    line-height: 1.35;
}

.product-tile__summary {
    padding: 0.35rem 1rem 1.1rem;
    font-size: 0.8rem;
    line-height: 1.55;
    color: #6b7280;
}

.blog-products__all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.5rem;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--primary-red);
    text-decoration: none;
}

.blog-products__all i { font-size: 0.7rem; }

/* ----------------------------------------------------------- small screens */

@media (max-width: 991.98px) {
    .featured-post { grid-template-columns: 1fr; }
    .featured-post__media img { min-height: 0; height: 14rem; }
    .featured-post__body { padding: 1.5rem 1.5rem 1.75rem; }
    .post-layout { padding-top: 36px; }

    /* Stacked, the contents list would push the article a screen down, so it
       collapses to its summary line instead. */
    .post-contents { position: static; }
    .post-contents[open] > summary { margin-bottom: 0; }
}

@media (max-width: 575.98px) {
    /* No height cap: the image keeps its proportions and simply gets narrower
       with the screen. Capping it here used to squash the aspect ratio. */
    .post-hero__figure { border-radius: 12px; }
    .post-body { font-size: 1rem; }
    .blog-topics a { padding: 0.45rem 0.8rem; font-size: 0.85rem; }
}