/*!
 * ==========================================================
 * Hospital theme
 * Entity: Article
 * ==========================================================
 * Contains styles for:
 *   - .article-single  (single article page)
 *   - .article-card    (article card, used in grids/related blocks)
 *   - .article-archive (article listing page)
 * ========================================================== */

:root {
    --article-gap: 1.5rem;
    --article-radius: 0.75rem;
    --article-transition: transform .2s ease, box-shadow .2s ease;
}


/* ==========================================================
   1. Article Single
   ========================================================== */

.article-single__section {
    padding-block: 3rem;
}

.article-single__title {
    font-weight: 700;
}

.article-single__reading-time {
    font-size: .95rem;
}

.article-single__heading {
    font-weight: 700;
}

.article-single__content :is(p, ul, ol, h2, h3, h4) {
    margin-bottom: 1rem;
}

.article-single__grid {
    row-gap: var(--article-gap);
}


.article-single__gallery-figure {
    margin: 0;
}

.article-single__gallery-image {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    border-radius: var(--article-radius);
}


/* ==========================================================
   2. Article Card
   ========================================================== */

.article-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--article-radius);
    transition: var(--article-transition);
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .08);
}

.article-card__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.article-card__title {
    font-size: 1.1rem;
    font-weight: 700;
}

.article-card__reading-time {
    font-size: .85rem;
}

.article-card__excerpt {
    flex-grow: 1;
}

.article-card__footer {
    padding-top: 0;
}


/* ==========================================================
   3. Article Archive
   ========================================================== */

.article-archive {
    padding-block: 3rem;
}

.article-archive__title {
    font-weight: 700;
}

.article-archive__grid {
    row-gap: var(--article-gap);
}

/* ==========================================================
   4. Responsive
   ========================================================== */

@media (max-width: 991.98px) {

    .article-single__section {
        padding-block: 2rem;
    }

}

@media (max-width: 575.98px) {

    .article-single__gallery-image {
        aspect-ratio: 16 / 9;
    }

}
.article-single__meta {
    font-size: var(--font-size-meta);
}

.article-single__meta-sep {
    margin-inline: var(--space-2);
    opacity: 0.5;
}


/* ==========================================================
   Prose lists
   ==========================================================
   app.css resets every ul/ol to list-style: none — right for
   navigation, wrong for running text. The imported content is
   full of symptom, indication and preparation lists, and without
   markers they read as a run of disconnected lines. Restored for
   this entity's prose only, so the reset keeps doing its job
   everywhere else.
   ========================================================== */

/*
 * Scoped to the panel, not to .article-single__content — that
 * class sits on the first block only, so lists inside the numbered
 * sections kept losing their markers. The panel wraps both.
 */
.article-single__panel ul {
    list-style: disc;
    padding-inline-start: 1.25rem;
}

.article-single__panel ol {
    list-style: decimal;
    padding-inline-start: 1.25rem;
}

.article-single__panel ul ul {
    list-style: circle;
}

.article-single__panel li {
    margin-bottom: var(--space-2, 0.5rem);
}

.article-single__panel li::marker {
    color: var(--color-primary);
}


/* ==========================================================
   Hero card
   ==========================================================
   Picture on the left, text on the right, on the pale green the
   reference page uses. The image replaces the author portrait
   there: the articles come without an author on this site, and a
   card built around a person would have had an empty circle at
   its heart.
   ========================================================== */

.article-single__hero {
    padding-block: var(--space-6, 1.75rem) 0;
}

.article-single__card {
    display: flex;
    align-items: stretch;
    gap: var(--space-7, 2rem);
    /* Sampled from the reference page rather than picked off the
       theme scale — neither --primary-50 (var(--brand-primary-light), too pale to
       read as a card) nor --primary-100 (var(--primary-100), too saturated)
       matched it. */
    background: var(--brand-accent-t1);
    border-radius: var(--radius-xl, 1rem);
    padding: var(--space-7, 2rem);
}

/*
 * Fixed width rather than a share of the row: the portrait it
 * replaces was a fixed square, and a picture that grows with the
 * viewport would push the text into a column too narrow to read.
 */
/*
 * An oblong that fills the card's height rather than a square.
 *
 * Stretching instead of holding an aspect ratio means the bottom
 * of the picture lines up with the bottom of the text column by
 * construction — before this, the two were kept level by giving
 * the body a min-height equal to the image's side, which only held
 * as long as both numbers were edited together.
 *
 * The width is fixed: a picture that grew with the viewport would
 * squeeze the lead into a column too narrow to read.
 */
.article-single__card-media {
    flex: 0 0 auto;
    width: 23rem;
    align-self: stretch;
    position: relative;
    min-height: 13rem;
    border-radius: var(--radius-card, 0.75rem);
    overflow: hidden;
}

.article-single__card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * A floor under the text column. The picture is a fixed 23rem, so
 * on a narrower viewport the lead would be the only thing left to
 * give — and it is the part that has to stay readable. Below this
 * width the card stacks instead.
 */
.article-single__card-body {
    flex: 1 1 auto;
    min-width: 20rem;
    min-height: 13rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Under the text, not above it: the lead is what the reader came
   for, and the specialty labels are a way onward from it. */
.article-single__card-specialists {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    margin-block: var(--space-4, 1rem) 0;
}

.article-single__card-label {
    color: var(--text-secondary);
    font-size: var(--font-size-helper, 0.8125rem);
}

/* White on the green, so the labels read as separate items rather
   than as a run-on line — the source packs them into one string.
   Styled the same whether they link anywhere or not: a specialty
   without a page of its own should not look broken. */
.article-single__chip {
    display: inline-block;
    background: var(--surface-card, #fff);
    border-radius: var(--radius-pill, 999px);
    padding: var(--space-1, 0.25rem) var(--space-4, 1rem);
    font-size: var(--font-size-helper, 0.8125rem);
    color: var(--text-primary);
    white-space: nowrap;
    text-decoration: none;
}

a.article-single__chip:hover,
a.article-single__chip:focus-visible {
    background: var(--color-primary);
    color: var(--text-inverse, #fff);
}

.article-single__card-lead {
    margin: 0;
    flex: 0 1 auto;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--text-primary);
}

.article-single__card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 1rem);
    margin-top: var(--space-5, 1.5rem);
    padding-top: var(--space-4, 1rem);
    border-top: var(--border-width-thin, 1px) solid rgba(0, 0, 0, .08);
}

.article-single__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    background: var(--surface-card, #fff);
    border-radius: var(--radius-pill, 999px);
    padding: var(--space-2, 0.5rem) var(--space-5, 1.5rem);
    color: var(--text-primary);
    text-decoration: none;
}

.article-single__back:hover,
.article-single__back:focus-visible {
    color: var(--color-primary);
}

.article-single__card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4, 1rem);
}

/* Icon and number on one baseline. The icon inherits the text
   colour, so each stat only has to set its own. */
.article-single__stat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: var(--font-weight-semibold, 600);
}

.article-single__stat--views {
    color: var(--text-secondary);
    font-size: var(--font-size-helper, 0.8125rem);
    font-weight: var(--font-weight-regular, 400);
}

.article-single__stat-icon {
    flex: 0 0 auto;
}

/* Round icon buttons, as on the reference. The labels stay in the
   markup for screen readers — see Sharing::render(). */
.article-single__card-meta .entity-share {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.article-single__card-meta .entity-share__label {
    color: var(--text-secondary);
    font-size: var(--font-size-helper, 0.8125rem);
}

.article-single__card-meta .entity-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--text-inverse, #fff);
    cursor: pointer;
}

.article-single__card-meta .entity-share__link:hover,
.article-single__card-meta .entity-share__link:focus-visible {
    background: var(--primary-700, var(--brand-accent-d1));
    color: var(--text-inverse, #fff);
}

.article-single__card-footer {
    border-top-color: rgba(0, 0, 0, .1);
}

.article-single__card--plain .article-single__card-body {
    width: 100%;
}

.article-single__heading {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-section-title, 1.875rem);
    margin-bottom: var(--space-4, 1rem);
    scroll-margin-top: 6rem;
}

.article-single__section {
    scroll-margin-top: 6rem;
}

@media (max-width: 767.98px) {

    .article-single__card {
        flex-direction: column;
        padding: var(--space-5, 1.5rem);
        gap: var(--space-5, 1.5rem);
    }

    .article-single__card-media {
        width: 100%;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .article-single__card-body {
        min-width: 0;
    }

    /* Stacked, there is no picture beside the body to take a
       height from. */
    .article-single__card-body {
        min-height: 0;
    }

    .article-single__card-footer {
        justify-content: flex-start;
    }
}


/* ==========================================================
   Body panels
   ==========================================================
   Each block of running text sits in its own rounded panel, the
   way the reference page lays them out. The fill is sampled from
   that page (var(--brand-surface)) rather than taken off the theme scale —
   --surface-section (#FAFAFA) is a warmer, lighter grey and the
   two read differently side by side.

   Full container width, not a centred narrow column: the panel's
   own padding already sets the measure, and a col-lg-10 inside it
   would inset the text twice.
   ========================================================== */

.article-single__panel {
    background: var(--brand-surface);
    border-radius: var(--radius-xl, 1rem);
    padding: var(--space-8, 2.5rem);
}

.article-single__section {
    padding-block: var(--space-4, 1rem);
}

.article-single__section:first-of-type {
    padding-top: var(--space-6, 1.75rem);
}

.article-single__panel > :last-child {
    margin-bottom: 0;
}

.article-single__panel :is(p, ul, ol) {
    margin-bottom: var(--space-4, 1rem);
}

/* The heading belongs to the panel it opens, so it sits inside
   rather than floating above it. */
.article-single__panel .article-single__heading {
    margin-top: 0;
}

@media (max-width: 767.98px) {

    .article-single__panel {
        padding: var(--space-5, 1.5rem);
        border-radius: var(--radius-card, 0.75rem);
    }
}


/* ==========================================================
   Move between articles
   ==========================================================
   A panel in the same grey as the body blocks, with the two
   links pushed to the middle — the shape the reference page uses
   at the foot of an article.
   ========================================================== */

.article-nav {
    padding-block: var(--space-5, 1.5rem);
}

.article-nav__panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-4, 1rem);
    background: var(--brand-surface);
    border-radius: var(--radius-pill, 999px);
    padding: var(--space-4, 1rem) var(--space-7, 2rem);
}

/*
 * The single link case still centres, rather than the lone
 * "next" sliding to one end and reading as a stray button — the
 * first and last articles in the set have only one neighbour.
 */
.article-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    background: var(--primary-100, var(--primary-100));
    border-radius: var(--radius-pill, 999px);
    padding: var(--space-2, 0.5rem) var(--space-5, 1.5rem);
    color: var(--text-primary);
    text-decoration: none;
}

.article-nav__link:hover,
.article-nav__link:focus-visible {
    background: var(--color-primary);
    color: var(--text-inverse, #fff);
}

.article-nav__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--surface-card, #fff);
    color: var(--color-primary);
    font-size: .625rem;
    flex: 0 0 auto;
}

.article-nav__link:hover .article-nav__arrow,
.article-nav__link:focus-visible .article-nav__arrow {
    color: var(--color-primary);
}


/* ==========================================================
   Other articles
   ========================================================== */

.article-others {
    padding-block: var(--space-7, 2rem) var(--space-region, 4rem);
}

.article-others__title {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-section-title, 1.875rem);
    margin-bottom: var(--space-6, 1.75rem);
}

@media (max-width: 575.98px) {

    .article-nav__panel {
        border-radius: var(--radius-card, 0.75rem);
        padding: var(--space-5, 1.5rem);
    }

    .article-nav__link {
        width: 100%;
        justify-content: center;
    }
}




/* ==========================================================
   Article card
   ==========================================================
   Modelled on the reference listing: a grey panel, the picture
   inset within it rather than bleeding to the edges, title,
   excerpt, the specialties as slash-separated links, and a footer
   with the button on the left and the stats on the right.

   The grey is the same var(--brand-surface) the body panels use — one surface
   colour across the page rather than two that nearly match.
   ========================================================== */

.article-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--brand-surface);
    border-radius: var(--radius-xl, 1rem);
    padding: var(--space-5, 1.5rem);
}

/*
 * Fixed 16:9 well rather than the picture's own proportions: a row
 * of cards has to line its titles up, and images of differing
 * heights would stagger them.
 */
.article-card__media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-card, 0.75rem);
    margin-bottom: var(--space-5, 1.5rem);
}

.article-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.article-card:hover .article-card__image {
    transform: scale(1.04);
}

/* Takes the slack, so the footers of cards in a row stay level
   however unevenly the titles and excerpts run. */
.article-card__body {
    flex: 1 1 auto;
}

.article-card__title {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold, 700);
    font-size: 1.125rem;
    line-height: var(--line-height-heading, 1.3);
    margin-bottom: var(--space-3, 0.75rem);
}

.article-card__title a {
    color: var(--text-primary);
    text-decoration: none;
}

.article-card__title a:hover,
.article-card__title a:focus-visible {
    color: var(--color-primary);
}

.article-card__excerpt {
    color: var(--text-secondary);
    line-height: var(--line-height-body, 1.6);
    margin-bottom: var(--space-4, 1rem);
}

.article-card__specialists {
    font-size: var(--font-size-helper, 0.8125rem);
    color: var(--text-muted);
    margin-bottom: var(--space-4, 1rem);
}

.article-card__specialists-label {
    display: block;
}

.article-card__specialists-list a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.article-card__specialists-list a:hover,
.article-card__specialists-list a:focus-visible {
    color: var(--color-primary);
}

.article-card__sep {
    color: var(--text-muted);
}

.article-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 0.75rem);
    margin-top: auto;
}

.article-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--text-inverse, #fff);
    border-radius: calc(50px * var(--rs, 1));
    padding: var(--space-3, 0.75rem) var(--space-6, 1.75rem);
    text-decoration: none;
    white-space: nowrap;
}

.article-card__button:hover,
.article-card__button:focus-visible {
    background: var(--primary-700, var(--brand-accent-d1));
    color: var(--text-inverse, #fff);
}

.article-card--news .article-card__button {
    background: var(--primary-100, var(--primary-100));
    color: var(--primary-800, var(--primary-800));
    box-shadow: none;
}

.article-card--news .article-card__button:hover,
.article-card--news .article-card__button:focus-visible {
    background: var(--primary-200, var(--primary-200));
    color: var(--primary-800, var(--primary-800));
}

.article-card--news .article-card__footer,
.article-card--video .article-card__footer {
    margin-top: auto;
}

.article-card__stats {
    display: flex;
    align-items: center;
    gap: var(--space-4, 1rem);
}

.article-card__stat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    color: var(--text-secondary);
    font-size: var(--font-size-helper, 0.8125rem);
    white-space: nowrap;
}


.article-date {
    display: inline-block;
    align-self: flex-start;
    background: var(--surface-card, #fff);
    border-radius: var(--radius-pill, 999px);
    padding: var(--space-1, 0.25rem) var(--space-4, 1rem);
    font-size: var(--font-size-helper, 0.8125rem);
    color: var(--text-secondary);
    margin-bottom: var(--space-3, 0.75rem);
}

.page-header__meta {
    margin-top: var(--space-3, 0.75rem);
}

.page-header__meta .article-date {
    background: var(--primary-100, var(--primary-100));
    margin-bottom: 0;
}

.article-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.75rem;
    height: 3.75rem;
    margin: -1.875rem 0 0 -1.875rem;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, .25);
    transition: transform .2s ease;
    pointer-events: none;
}

.article-card__play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.6rem 0 0 -0.35rem;
    border-style: solid;
    border-width: 0.6rem 0 0.6rem 1rem;
    border-color: transparent transparent transparent var(--text-inverse, #fff);
}

.article-card:hover .article-card__play {
    transform: scale(1.1);
}

.article-card__duration {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    background: rgba(0, 0, 0, .72);
    color: var(--text-inverse, #fff);
    border-radius: var(--radius-pill, 999px);
    padding: 0.125rem 0.625rem;
    font-size: var(--font-size-helper, 0.8125rem);
    line-height: 1.5;
}

.article-single__player {
    padding-top: var(--space-6, 1.75rem);
}

.article-archive__empty {
    text-align: center;
}


/* ==========================================================
   Comments
   ========================================================== */

.article-single__panel .article-comments__list,
.article-single__panel .article-comments__list .children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-single__panel .article-comments__list .children {
    margin-top: var(--space-3, 0.75rem);
    padding-left: var(--space-7, 2rem);
}

.article-comments__item + .article-comments__item,
.article-comments__list > .article-comments__item:not(:first-child) {
    margin-top: var(--space-3, 0.75rem);
}

.article-comments__pending {
    color: var(--text-secondary);
}

.article-comments__reply {
    margin-top: var(--space-2, 0.5rem);
}

.article-comments__reply a {
    color: var(--color-primary);
    font-weight: 600;
}

.article-comments__empty {
    margin-bottom: var(--space-5, 1.5rem);
}

.article-comments .navigation {
    margin-top: var(--space-4, 1rem);
}

.article-comments .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
}

.article-comments .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.article-comments .comment-respond {
    margin-top: var(--space-6, 1.75rem);
}

.article-comments .children .comment-respond,
.article-comments__card .comment-respond {
    margin-top: var(--space-4, 1rem);
}

@media (max-width: 575.98px) {

    .article-single__panel .article-comments__list .children {
        padding-left: var(--space-4, 1rem);
    }
}
.article-single__panel .article-comments__item {
    list-style: none;
    margin-bottom: 0;
}


/* ==========================================================
   Content library (630)
   ==========================================================
   Components an author can write as plain HTML with classes in
   any wysiwyg of the article: tables (wrapped automatically in
   single.php), .callout, ol.steps, .compare, .timeline,
   .checklist, figures, blockquote, h3. Fonts come from the theme;
   only colours, spacing and shapes are set here. Nothing below
   matches markup that existing articles already have, except
   h3, blockquote, figure and table, which had no styling before.
   ========================================================== */

:is(.article-single__content-body, .article-single__content .article-single__panel) h3 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--line-height-heading, 1.3);
    margin: var(--space-6, 1.75rem) 0 var(--space-3, 0.75rem);
}

:is(.article-single__content-body, .article-single__content .article-single__panel) blockquote {
    margin: var(--space-5, 1.5rem) 0;
    padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem);
    border-left: var(--border-width-thick, 4px) solid var(--primary-300, var(--primary-300));
    background: var(--surface-card, #fff);
    border-radius: 0 var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem) 0;
    color: var(--text-secondary);
}

:is(.article-single__content-body, .article-single__content .article-single__panel) blockquote > :last-child {
    margin-bottom: 0;
}

/* ---------- figures ---------- */

:is(.article-single__content-body, .article-single__content .article-single__panel) figure {
    margin: 0 0 var(--space-4, 1rem);
}

:is(.article-single__content-body, .article-single__content .article-single__panel) figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg, 0.75rem);
}

:is(.article-single__content-body, .article-single__content .article-single__panel) figcaption {
    margin-top: var(--space-2, 0.5rem);
    color: var(--text-muted);
    font-size: var(--font-size-helper, 0.8125rem);
    line-height: var(--line-height-body, 1.6);
}

.article-single__panel {
    display: flow-root;
}

.article-figure {
    width: 100%;
    margin: 0 0 var(--space-4, 1rem);
}

.article-figure__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg, 0.75rem);
}

.article-figure__caption {
    margin-top: var(--space-2, 0.5rem);
    color: var(--text-muted);
    font-size: var(--font-size-helper, 0.8125rem);
    line-height: var(--line-height-body, 1.6);
}

.article-figure--solo {
    margin-bottom: 0;
}

.article-figure--solo .article-figure__img {
    aspect-ratio: 16 / 9;
}

.article-figure--wide {
    clear: both;
    margin-bottom: var(--space-5, 1.5rem);
}

.article-figure--wide .article-figure__img {
    aspect-ratio: auto 16 / 9;
    contain-intrinsic-size: auto none;
    object-fit: contain;
}

.article-single__content-body > :is(ul, ol, blockquote),
.article-single__panel :is(.callout, ol.steps, ul.checklist) {
    display: flow-root;
}

.article-single__panel :is(.table-wrap, .compare, .timeline) {
    clear: both;
}

@media (min-width: 768px) {

    .article-figure:not(.article-figure--solo, .article-figure--wide) {
        float: left;
        width: 40%;
        max-width: 26rem;
        margin: 0 var(--space-6, 1.75rem) var(--space-4, 1rem) 0;
    }

    .article-figure.article-figure--right {
        float: right;
        margin: 0 0 var(--space-4, 1rem) var(--space-6, 1.75rem);
    }
}

/* "right" holds infographics next to the text: keep the picture whole */
.article-figure--right .article-figure__img {
    aspect-ratio: auto;
    contain-intrinsic-size: auto none;
    object-fit: contain;
}
/* ---------- tables ---------- */

.table-wrap {
    margin: var(--space-5, 1.5rem) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface-card, #fff);
    border: var(--border-width-thin, 1px) solid var(--border-default);
    border-radius: var(--radius-lg, 0.75rem);
}

.table-wrap:focus-visible {
    outline: var(--border-width-medium, 2px) solid var(--color-primary);
    outline-offset: 2px;
}

.article-single__panel .table-wrap table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.article-single__panel .table-wrap :is(th, td) {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    text-align: left;
    vertical-align: top;
    border-bottom: var(--border-width-thin, 1px) solid var(--border-default);
}

.article-single__panel .table-wrap :is(th, td) + :is(th, td) {
    border-left: var(--border-width-thin, 1px) solid var(--border-default);
}

.article-single__panel .table-wrap :is(thead th, tr:first-child > th) {
    background: var(--primary-600);
    color: var(--text-inverse, #fff);
    font-weight: var(--font-weight-semibold, 600);
    border-bottom-color: var(--primary-600);
}

.article-single__panel .table-wrap tbody tr:nth-child(even) > * {
    background: var(--primary-50);
}

.article-single__panel .table-wrap tbody tr:last-child > * {
    border-bottom: 0;
}

.article-single__panel .table-wrap tbody th {
    font-weight: var(--font-weight-semibold, 600);
}

@media (max-width: 575.98px) {

    /* 920: 8rem x 3 columns (384px) overflowed the ~318px wrap, so the third
       column of a 3-column table was cut off. A smaller min-width and font let
       3-4 columns fit; wider tables still scroll inside .table-wrap. */
    .article-single__panel .table-wrap :is(th, td) {
        min-width: 5.25rem;
        padding: var(--space-2, 0.5rem) 0.4rem;
        font-size: 0.875rem;
        line-height: 1.4;
        overflow-wrap: break-word;
    }

    /* up to 3 columns: shrink to fit, breaking very long words if needed */
    .article-single__panel .table-wrap table:not(:has(:is(th, td):nth-child(4))) :is(th, td) {
        min-width: 4.5rem;
        overflow-wrap: anywhere;
    }
}

/* ---------- callouts ---------- */

.article-single__panel .callout {
    --callout-bg: var(--primary-50, var(--brand-primary-light));
    --callout-edge: var(--primary-200, var(--primary-200));
    --callout-accent: var(--primary-600, var(--brand-primary));
    --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-2 15-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z'/%3E%3C/svg%3E");
    position: relative;
    margin: var(--space-5, 1.5rem) 0;
    padding: var(--space-4, 1rem) var(--space-5, 1.5rem) var(--space-4, 1rem) 4rem;
    background: var(--callout-bg);
    border: var(--border-width-thin, 1px) solid var(--callout-edge);
    border-left: var(--border-width-thick, 4px) solid var(--callout-accent);
    border-radius: var(--radius-lg, 0.75rem);
    color: var(--text-primary);
}

.article-single__panel .callout--important {
    --callout-bg: var(--amber-50, #FFF3E5);
    --callout-edge: #F6D3A2;
    --callout-accent: var(--amber-500, #D97706);
    --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}

.article-single__panel .callout--doctor {
    --callout-bg: var(--teal-50, var(--teal-50));
    --callout-edge: var(--teal-200, var(--teal-200));
    --callout-accent: var(--teal-600, var(--teal-600));
    --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z'/%3E%3C/svg%3E");
}

.article-single__panel .callout::before {
    content: "";
    position: absolute;
    left: var(--space-4, 1rem);
    top: var(--space-4, 1rem);
    width: 2rem;
    height: 2rem;
    background: var(--callout-accent);
    -webkit-mask: var(--callout-icon) center / contain no-repeat;
    mask: var(--callout-icon) center / contain no-repeat;
}

.article-single__panel .callout > :last-child {
    margin-bottom: 0;
}

.article-single__panel .callout :is(p, ul, ol) {
    margin-bottom: var(--space-2, 0.5rem);
}

.article-single__panel .callout :is(ul, ol) {
    padding-inline-start: 1.1rem;
}

.article-single__panel .callout__title {
    margin-bottom: var(--space-1, 0.25rem);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold, 700);
    color: var(--callout-accent);
}

@media (max-width: 575.98px) {

    .article-single__panel .callout {
        padding: var(--space-4, 1rem) var(--space-4, 1rem) var(--space-4, 1rem) 3.5rem;
    }

    .article-single__panel .callout::before {
        left: var(--space-3, 0.75rem);
        width: 1.75rem;
        height: 1.75rem;
    }
}

/* ---------- ol.steps ---------- */

.article-single__panel ol.steps {
    list-style: none;
    margin: var(--space-5, 1.5rem) 0;
    padding: 0;
    counter-reset: step;
}

.article-single__panel ol.steps > li {
    position: relative;
    counter-increment: step;
    margin: 0;
    padding: 0.25rem 0 var(--space-5, 1.5rem) 3.5rem;
    min-height: 2.5rem;
}

.article-single__panel ol.steps > li:last-child {
    padding-bottom: 0;
}

.article-single__panel ol.steps > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--text-inverse, #fff);
    font-weight: var(--font-weight-bold, 700);
}

.article-single__panel ol.steps > li::after {
    content: "";
    position: absolute;
    left: calc(1.25rem - 1px);
    top: 2.5rem;
    bottom: 0;
    width: 2px;
    background: var(--primary-200, var(--primary-200));
}

.article-single__panel ol.steps > li:last-child::after {
    display: none;
}

.article-single__panel ol.steps > li > p {
    margin-bottom: var(--space-2, 0.5rem);
}

/* ---------- .compare ---------- */

.article-single__panel .compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4, 1rem);
    margin: var(--space-5, 1.5rem) 0;
}

.article-single__panel .compare__col {
    --compare-accent: var(--primary-600, var(--brand-primary));
    padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
    background: var(--surface-card, #fff);
    border: var(--border-width-thin, 1px) solid var(--border-default);
    border-top: var(--border-width-thick, 4px) solid var(--compare-accent);
    border-radius: var(--radius-lg, 0.75rem);
}

.article-single__panel .compare__col--no {
    --compare-accent: var(--red-500, #E11D2E);
}

.article-single__panel .compare__col--warn {
    --compare-accent: var(--amber-500, #D97706);
}

.article-single__panel .compare__title {
    margin-bottom: var(--space-3, 0.75rem);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold, 700);
    color: var(--compare-accent);
}

.article-single__panel .compare__col > :last-child {
    margin-bottom: 0;
}

.article-single__panel .compare ul {
    list-style: none;
    padding: 0;
}

.article-single__panel .compare li {
    position: relative;
    padding-left: 1.75rem;
}

.article-single__panel .compare li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 1.1rem;
    height: 1.1rem;
    background: var(--compare-accent);
    -webkit-mask: var(--compare-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E")) center / contain no-repeat;
    mask: var(--compare-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E")) center / contain no-repeat;
}

.article-single__panel .compare__col--no {
    --compare-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6z'/%3E%3C/svg%3E");
}

.article-single__panel .compare__col--warn {
    --compare-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E");
}

@media (max-width: 767.98px) {

    .article-single__panel .compare {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- .timeline ---------- */

.article-single__panel .timeline {
    list-style: none;
    margin: var(--space-5, 1.5rem) 0;
    padding: 0;
}

.article-single__panel .timeline > li {
    position: relative;
    margin: 0;
    padding: 0 0 var(--space-5, 1.5rem) 2.25rem;
}

.article-single__panel .timeline > li:last-child {
    padding-bottom: 0;
}

.article-single__panel .timeline > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2rem;
    z-index: 1;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--surface-card, #fff);
    border: var(--border-width-thick, 4px) solid var(--color-primary);
}

.article-single__panel .timeline > li::after {
    content: "";
    position: absolute;
    left: calc(0.55rem - 1px);
    top: 1.5rem;
    bottom: 0;
    width: 2px;
    background: var(--primary-200, var(--primary-200));
}

.article-single__panel .timeline > li:last-child::after {
    display: none;
}

.article-single__panel .timeline__time {
    display: block;
    margin-bottom: var(--space-1, 0.25rem);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold, 700);
    color: var(--primary-700, var(--brand-primary-dark));
}

/* ---------- .checklist ---------- */

.article-single__panel .checklist {
    list-style: none;
    margin: var(--space-5, 1.5rem) 0;
    padding: 0;
}

.article-single__panel .checklist > li {
    position: relative;
    margin: 0 0 var(--space-3, 0.75rem);
    padding-left: 2.25rem;
}

.article-single__panel .checklist > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--color-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-2 15-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-2 15-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- reveal on scroll ----------
   .reveal is added by app.js, so without JS nothing is hidden. */

.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s ease, transform .4s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    .reveal,
    .reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================
   Medical direction: filter pills and topic line
   ========================================================== */

.direction-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3, 0.75rem);
    margin-bottom: var(--space-6, 1.75rem);
}

.direction-filter__pill {
    display: inline-block;
    padding: var(--space-2, 0.5rem) var(--space-5, 1.25rem);
    border-radius: var(--radius-pill, 999px);
    background: var(--brand-surface-2);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold, 600);
    text-decoration: none;
}

.direction-filter__pill:hover {
    background: var(--brand-accent-t2);
    color: var(--text-primary);
}

.direction-filter__pill.is-active,
.direction-filter__pill.is-active:hover {
    background: var(--color-primary, var(--brand-accent));
    color: #fff;
}

.article-topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1, 0.25rem) var(--space-6, 1.5rem);
    margin-top: var(--space-3, 0.75rem);
}

.article-topics__label {
    color: var(--text-secondary);
}

.article-topics a {
    font-weight: var(--font-weight-semibold, 600);
}

.page-header__meta .article-date + .article-topics {
    margin-top: var(--space-3, 0.75rem);
}

.article-terms {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    padding-top: var(--space-4, 1rem);
    border-top: 1px solid var(--border-light);
}

.article-tags__label {
    margin: 0;
    font-size: inherit;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-secondary);
}

.article-tags .article-terms li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-tags .article-terms li::marker {
    content: "";
}

.article-terms__chip {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: calc(6px * var(--rs, 1));
    background: var(--brand-primary-light);
    color: var(--brand-primary-dark);
    line-height: 1.4;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.article-terms__chip::before {
    content: "#";
    margin-right: 0.125rem;
    opacity: .6;
}

.article-terms__chip:hover,
.article-terms__chip:focus-visible {
    background: var(--brand-primary);
    color: #fff;
}

/* ==========================================================
   Wiki links on condition / service / symptom pages
   (parts/wiki-related.php): «Dərmanlar», «Orqanlar», «İlk yardım»
   ==========================================================
   The same chips as «Açar sözlər» above, without the «#». The
   reset keeps the panel list rules (markers, indents, columns)
   of the host page away from the chips.
   ========================================================== */

.wiki-related .wiki-related__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
    margin: 0;
    padding: 0;
    columns: auto;
    list-style: none;
}

.wiki-related .wiki-related__chips > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wiki-related .wiki-related__chips > li::marker,
.wiki-related .wiki-related__chips > li::before {
    content: none;
}

.wiki-related .wiki-related__chip {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: calc(6px * var(--rs, 1));
    background: var(--brand-primary-light);
    color: var(--brand-primary-dark);
    line-height: 1.4;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.wiki-related .wiki-related__chip:hover,
.wiki-related .wiki-related__chip:focus-visible {
    background: var(--brand-primary);
    color: #fff;
    text-decoration: none;
}

@media (max-width: 575.98px) {

    .wiki-related .wiki-related__chips {
        gap: 0.375rem;
    }

    .wiki-related .wiki-related__chip {
        padding: 0.3125rem 0.625rem;
        font-size: 0.9375rem;
        overflow-wrap: anywhere;
    }
}

/* Drugs with limited evidence (_evidence_limited): a separate, muted
   list under the main «Dərmanlar» chips, so they never read as treatment. */

.wiki-related .wiki-related__chips + .wiki-related__limited {
    margin-top: var(--space-4, 1rem);
}

.wiki-related .wiki-related__note {
    margin: 0 0 var(--space-2, 0.5rem);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary, #6b7280);
}

.wiki-related .wiki-related__chip--limited {
    background: transparent;
    border: 1px dashed currentColor;
    color: var(--text-secondary, #6b7280);
}