/* Editorial: blog index, category archives and the single article.
   Every value comes from tokens.css. The card is deliberately the product
   card's twin — same border, radius, hover lift and grid mechanics — so a
   listing of articles and a listing of medicines read as the same site. */

/* Archive header ---------------------------------------------------------- */

.igm-archive__cover {
    display: block;
    width: 100%;
    height: auto;
    max-height: 260px;
    margin-bottom: 18px;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.igm-archive__head--editorial {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--gray-300);
}

.igm-archive__head--editorial .igm-archive__intro p:last-child {
    margin-bottom: 0;
}

/* Topic rail --------------------------------------------------------------
   A horizontal pill row on every width. Below the grid breakpoint it scrolls
   sideways instead of wrapping to four lines, which is how the shop's filter
   chips behave on mobile — same gesture, same component vocabulary. */

.igm-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.igm-topic {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 14px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-pill);
    background: var(--white);
    font: 600 13px/1 var(--font-body);
    color: var(--gray-700);
    white-space: nowrap;
}

/* WCAG 2.5.5 wants a 44px target regardless of input modality. The pill stays
   36px tall so the rail reads as a rail; an invisible overlay carries the hit
   area out to 44px, the same trick .igm-product-card__action uses. The 8px row
   gap is wider than the 4px the overlay adds on each edge, so neighbouring
   pills never swallow each other's taps. */
.igm-topic::after {
    content: "";
    position: absolute;
    inset-block: -4px;
    inset-inline: 0;
}

.igm-topic:hover {
    border-color: var(--navy-700);
    color: var(--navy-700);
    text-decoration: none;
}

.igm-topic.is-current {
    background: var(--navy-700);
    border-color: var(--navy-700);
    color: var(--white);
}

@media (max-width: 599px) {
    .igm-topics {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        /* Bleed to the container edge so the last pill is visibly cut off —
           the standard signal that a rail scrolls. */
        margin-inline: -16px;
        padding-inline: 16px;
        padding-bottom: 4px;
    }

    .igm-topics::-webkit-scrollbar { display: none; }
}

/* Grid --------------------------------------------------------------------
   Same auto-fill mechanics as .igm-products, one size up: an article card
   carries a headline and two lines of summary, which need more measure than a
   product name and a price. */

.igm-post-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(var(--igm-post-card-min, 280px), 1fr));
}

@media (max-width: 479px) {
    .igm-post-grid { --igm-post-card-min: 100%; }
}

.igm-post-grid--compact {
    gap: 14px;
    --igm-post-card-min: 210px;
}

/* Card --------------------------------------------------------------------- */

.igm-post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition-fast);
}

.igm-post-card:hover,
.igm-post-card:focus-within {
    border-color: var(--navy-700);
    box-shadow: var(--shadow-card);
}

/* 2.5/1 matches the 81% of covers drawn at the house banner ratio; see the
   note on .igm-postcard__media in home.css. */
.igm-post-card__media {
    position: relative;
    aspect-ratio: 2.5 / 1;
    background: var(--gradient-form-wash);
    overflow: hidden;
}

.igm-post-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Empty media slot: a token wash carrying the category name and a drawn mark.
   It stands in for an image without pretending to be one — the same choice
   igm_product_placeholder() makes for a missing pack shot. Every published
   post now carries a cover, so this is a fallback rather than the norm. */

.igm-post-card__media--empty {
    display: grid;
    place-content: center;
    gap: 10px;
    justify-items: center;
    padding: 12px;
    text-align: center;
}

/* Two overlapping rounded rectangles read as a stack of pages at any size,
   and cost no request. */
.igm-post-card__mark {
    position: relative;
    width: 30px;
    height: 38px;
    border: 2px solid var(--navy-700);
    border-radius: var(--radius-xs);
    opacity: .28;
}

.igm-post-card__mark::before {
    content: "";
    position: absolute;
    inset-block-start: -6px;
    inset-inline-start: 6px;
    width: 30px;
    height: 38px;
    border: 2px solid var(--navy-700);
    border-radius: var(--radius-xs);
    background: var(--white);
}

.igm-post-card__wash-label {
    max-width: 22ch;
    font: 600 11px/1.3 var(--font-body);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--gray-500);
}

.igm-post-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.igm-post-card__topic {
    color: var(--navy-700);
}

.igm-post-card__title {
    margin: 0;
    font: 700 17px/1.35 var(--font-display);
    color: var(--text-heading);
    letter-spacing: normal;
}

.igm-post-card__link {
    color: inherit;
}

.igm-post-card__link:hover {
    color: var(--navy-700);
    text-decoration: underline;
}

/* The card is one link, not three: the title's link is stretched over the
   whole card so the target is card-sized, while the accessibility tree still
   sees a single named link. */
.igm-post-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.igm-post-card__excerpt {
    margin: 0;
    font: 14px/1.6 var(--font-body);
    color: var(--gray-700);
}

/* Push the meta line to the bottom edge so cards of unequal headline length
   still line their dates up across a row. */
.igm-post-card .igm-post-meta {
    margin-top: auto;
    padding-top: 4px;
}

/* Search results ----------------------------------------------------------
 * A search mixes posts, pages and products. Posts render as the card above;
 * pages fall through to the generic editorial entry, which has no chrome — in
 * a grid beside a bordered card that reads as a broken card, and rendered at
 * full container width a card's 16/9 media slot becomes a ~600px empty wash.
 * Giving the generic entry the same chrome inside the grid makes every result
 * the same object. */

.igm-post-grid > .igm-entry {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--white);
    transition: var(--transition-fast);
}

.igm-post-grid > .igm-entry:hover,
.igm-post-grid > .igm-entry:focus-within {
    border-color: var(--navy-700);
    box-shadow: var(--shadow-card);
}

.igm-post-grid > .igm-entry .igm-entry__title {
    font: 700 17px/1.35 var(--font-display);
    letter-spacing: normal;
}

.igm-post-grid > .igm-entry .igm-entry__body {
    font: 14px/1.6 var(--font-body);
}

.igm-post-grid > .igm-entry .igm-entry__body p:last-child {
    margin-bottom: 0;
}

/* Meta line ---------------------------------------------------------------- */

.igm-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0;
    font: 400 12.5px/1.4 var(--font-meta);
    color: var(--gray-500);
}

.igm-post-meta__item + .igm-post-meta__item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.igm-post-meta__item + .igm-post-meta__item::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .6;
}

/* Single article ----------------------------------------------------------- */

.igm-article {
    margin-bottom: 8px;
}

.igm-article__head {
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--gray-300);
}

/* An 11px uppercase eyebrow is the design's category mark, and it is also a
   link — the design audit measured the tap target at 149x11. It is given a
   real 44px box rather than the invisible ::after overlay used elsewhere on
   the site: an overlay that size would reach into the headline below and the
   breadcrumbs above, and here there is nothing to protect — the extra height
   is whitespace the article head wanted anyway. */
.igm-article__topic {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 2px;
    color: var(--navy-700);
}

.igm-article__topic:hover {
    color: var(--color-secondary);
}

.igm-article__title {
    margin-bottom: 12px;
    font-size: clamp(26px, 4.4vw, 38px);
}

.igm-article__standfirst {
    margin-bottom: 12px;
    font: 400 clamp(16px, 2.2vw, 18px)/1.6 var(--font-body);
    color: var(--gray-700);
}

.igm-article__head .igm-reviewer {
    margin-top: 14px;
}

.igm-article__figure {
    margin: 0 0 24px;
}

.igm-article__figure img {
    width: 100%;
    border-radius: var(--radius-lg);
}

/* Article bodies can contain long unbroken strings (a raw citation URL used
 * as its own link text, in a References section, is the case that surfaced
 * this) that force a page-wide horizontal scroll on narrow viewports.
 * `overflow-wrap: anywhere` breaks only when a word genuinely has nowhere
 * else to wrap, so normal prose is unaffected. */
.igm-article .igm-entry__body {
    overflow-wrap: anywhere;
}

.igm-article__caption {
    margin-top: 8px;
    font: 12.5px/1.5 var(--font-body);
    color: var(--gray-500);
}

/* Table of contents ---------------------------------------------------------
 * Same component as the product page's .igm-toc (assets/css/product.css) —
 * duplicated rather than shared across a page type that doesn't otherwise
 * load product.css. A <details> so it collapses on a phone with no script. */

.igm-toc {
    margin: 0 0 24px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--white);
    overflow: hidden;
}

.igm-toc__summary {
    padding: 12px 15px;
    border-bottom: 1px solid var(--gray-300);
    background: var(--gray-50);
    font: 600 11px/1 var(--font-body);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--gray-600);
    cursor: pointer;
}

.igm-toc__list {
    margin: 0;
    padding: 6px 15px 12px;
    list-style: none;
    counter-reset: igm-toc;
}

.igm-toc__item {
    counter-increment: igm-toc;
    border-bottom: 1px solid var(--gray-200);
}

.igm-toc__item:last-child { border-bottom: 0; }

.igm-toc__link {
    display: block;
    padding: 12px 0;
    font: 14.5px/1.4 var(--font-body);
    color: var(--navy-700);
}

.igm-toc__link::before {
    content: counter(igm-toc) ". ";
    color: var(--gray-600);
}

.igm-toc__link:hover { color: var(--red-500); }

.igm-article__pages {
    justify-content: flex-start;
    margin-top: 24px;
}

.igm-article__tags {
    margin-top: 26px;
}

.igm-tag {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 14px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-pill);
    background: var(--white);
    font: 600 13px/1 var(--font-body);
    color: var(--navy-700);
}

.igm-tag:hover {
    border-color: var(--navy-700);
    text-decoration: none;
}

/* Related posts / related products ------------------------------------------
 * Same section rhythm as the homepage rails (.igm-home-section in home.css),
 * duplicated here rather than pulled in whole — this is the only piece of
 * that sheet a single article needs. */

.igm-related-section {
    padding: 34px 0;
    border-top: 1px solid var(--gray-200);
}

.igm-related-section__title {
    margin-bottom: 18px;
    font-size: clamp(20px, 3vw, 26px);
}

.igm-related-section .igm-post-grid {
    --igm-post-card-min: 240px;
}

/* Prose --------------------------------------------------------------------
   Applies to editor-authored content, so it has to style tags rather than
   classes. Measure is already capped by .igm-container--narrow. */

.igm-prose {
    font: 17px/1.75 var(--font-body);
    color: var(--gray-900);
}

.igm-prose > *:first-child { margin-top: 0; }
.igm-prose > *:last-child { margin-bottom: 0; }

.igm-prose p {
    margin: 0 0 1.15em;
}

.igm-prose h2 {
    margin: 1.9em 0 .5em;
    font-size: clamp(21px, 3vw, 26px);
}

.igm-prose h3 {
    margin: 1.6em 0 .4em;
    font-size: clamp(18px, 2.4vw, 21px);
}

.igm-prose h4 {
    margin: 1.4em 0 .4em;
    font: 700 17px/1.3 var(--font-display);
    color: var(--text-heading);
}

.igm-prose a {
    color: var(--navy-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.igm-prose a:hover {
    color: var(--color-secondary);
}

.igm-prose ul,
.igm-prose ol {
    margin: 0 0 1.15em;
    padding-inline-start: 1.35em;
}

.igm-prose li {
    margin-bottom: .4em;
}

.igm-prose li::marker {
    color: var(--navy-700);
}

.igm-prose blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 18px;
    border-inline-start: 3px solid var(--navy-700);
    font: 400 clamp(17px, 2.4vw, 19px)/1.6 var(--font-display);
    color: var(--text-heading);
}

.igm-prose blockquote p:last-child { margin-bottom: 0; }

.igm-prose img,
.igm-prose figure img {
    border-radius: var(--radius-lg);
}

.igm-prose figure {
    margin: 1.8em 0;
}

.igm-prose figcaption {
    margin-top: 8px;
    font: 12.5px/1.5 var(--font-body);
    color: var(--gray-500);
}

.igm-prose hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--gray-300);
}

.igm-prose code {
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    background: var(--gray-50);
    font-size: .9em;
}

.igm-prose pre {
    margin: 1.5em 0;
    padding: 16px;
    border-radius: var(--radius-md);
    background: var(--gray-50);
    overflow-x: auto;
}

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

/* A table authored in the editor must not push the page sideways on a phone. */
.igm-prose table {
    display: block;
    width: 100%;
    margin: 1.5em 0;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 15px;
}

.igm-prose th,
.igm-prose td {
    padding: 10px 12px;
    border: 1px solid var(--gray-300);
    text-align: start;
    vertical-align: top;
}

.igm-prose th {
    background: var(--gray-50);
    font: 600 14px/1.4 var(--font-body);
    color: var(--text-heading);
}

/* Read next ---------------------------------------------------------------- */

.igm-read-next {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-300);
}

.igm-read-next__title {
    margin-bottom: 16px;
    font-size: 20px;
}

/* Post navigation ---------------------------------------------------------
   base.css gives this a bare grid; on an article the two links are a real
   control, so they get card treatment and a 44px target. */

.igm-article + .post-navigation,
.igm-post-grid + .post-navigation,
.post-navigation {
    border-top: 1px solid var(--gray-300);
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 44px;
    padding: 12px 14px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    color: var(--text-heading);
    transition: var(--transition-fast);
}

.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
    border-color: var(--navy-700);
    box-shadow: var(--shadow-card);
    text-decoration: none;
}

.post-navigation .nav-next a {
    align-items: flex-end;
    text-align: end;
}

/* Request CTA on an article ------------------------------------------------ */

.igm-article ~ .igm-request-medicine,
.igm-read-next + .igm-request-medicine {
    margin-top: 30px;
}