/*!
 * ==========================================================
 * Hospital theme
 * Entity: Specialty
 * ==========================================================
 * Contains styles for:
 *   - .specialty-single  (single specialty page)
 *   - .specialty-card    (specialty card, used in grids)
 *   - .specialty-archive (A→Z index of specialties)
 * ========================================================== */


/* ==========================================================
   1. Single — doctor stats card
   ==========================================================
   The page heading, breadcrumbs and section links come from
   parts/entity-header.php and are styled by .page-header in
   app.css — deliberately not restyled here, so an entity page and
   a Page Builder page look the same at the top.
   ========================================================== */

/* ----------------------------------------------------------
   Doctor count card
   ---------------------------------------------------------- */

.specialty-single__stats {
    padding-block: var(--space-7, 2rem) 0;
}

.specialty-single__stats + .specialty-single__body {
    padding-top: var(--space-5, 1.5rem);
}

.specialty-single__stats-card {
    background: var(--surface-section, #FAFAFA);
    border-radius: var(--radius-card, 0.75rem);
    padding: var(--space-7, 2rem);
    text-align: center;
}

.specialty-single__stats-lead {
    font-family: var(--font-family-heading);
    font-size: 1.375rem;
    line-height: var(--line-height-heading, 1.3);
    margin: 0;
}

.specialty-single__stats-lead strong {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold, 700);
}

/*
 * "onlardan:" with a rule running out to either side. Drawn with
 * borders on a flex row instead of a background image, so it
 * follows the card width and the theme's border colour on its own.
 */
.specialty-single__stats-divider {
    display: flex;
    align-items: center;
    gap: var(--space-4, 1rem);
    color: var(--text-muted);
    font-size: var(--font-size-helper, 0.8125rem);
    margin-block: var(--space-5, 1.5rem);
}

.specialty-single__stats-divider::before,
.specialty-single__stats-divider::after {
    content: "";
    flex: 1;
    border-top: var(--border-width-thin, 1px) solid var(--border-default);
}

.specialty-single__stats-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5, 1.5rem) var(--space-8, 2.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.specialty-single__stats-item {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    text-align: start;
}

.specialty-single__stats-number {
    font-family: var(--font-family-heading);
    font-size: 2rem;
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-primary);
    line-height: 1;
}

.specialty-single__stats-label {
    color: var(--text-secondary);
    line-height: var(--line-height-heading, 1.3);
}


/* ==========================================================
   2. Single — body and sections
   ========================================================== */

.specialty-single__body {
    padding-block: var(--space-5, 1.5rem) var(--space-8, 2.5rem);
}

/* Bölmələr arasında daha çox hava: mətn blokları bir-birinə
   yapışmasın. */
.specialty-single__section + .specialty-single__section {
    margin-top: 4rem;
}

/*
 * The extended description has no heading of its own — the H1
 * above already names the specialty — so it is set slightly larger
 * to read as the page's opening prose rather than as another
 * reference section.
 */
.specialty-single__section--description .specialty-single__content {
    font-size: 1.0625rem;
}

/*
 * Scroll offset so an anchor jump doesn't tuck the heading under
 * the sticky header. Matches the value the rest of the theme uses
 * for its in-page anchors.
 */
.specialty-single__section {
    scroll-margin-top: 6rem;
}

/*
 * One step up the theme's scale: --font-size-subsection-title
 * (1.5rem) → --font-size-section-title (1.875rem). Written as the
 * token rather than the number so these headings keep following
 * the scale if it is ever retuned.
 */
.specialty-single__heading {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-section-title, 1.875rem);
    line-height: var(--line-height-heading, 1.3);
    margin-bottom: var(--space-4, 1rem);
    padding-bottom: var(--space-3, 0.75rem);
    border-bottom: var(--border-width-medium, 2px) solid var(--primary-100);
}

.specialty-single__content {
    color: var(--text-primary);
    line-height: var(--line-height-body, 1.6);
}

.specialty-single__content > :last-child {
    margin-bottom: 0;
}

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

.specialty-single__content :is(h3, h4) {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-semibold, 600);
    font-size: 1.125rem;
    margin-block: var(--space-5, 1.5rem) var(--space-3, 0.75rem);
}

/*
 * app.css resets every ul/ol to list-style: none — right for
 * navigation, wrong for prose. Imported content is full of
 * symptom and indication lists, and without markers they read as
 * a run of disconnected lines. Restored here rather than globally
 * so the reset keeps doing its job everywhere else.
 */
.specialty-single__content ul {
    list-style: disc;
    padding-inline-start: 1.25rem;
}

.specialty-single__content ol {
    list-style: decimal;
    padding-inline-start: 1.25rem;
}

.specialty-single__content ul ul {
    list-style: circle;
}

.specialty-single__content li::marker {
    color: var(--color-primary);
}

/* Inside the green panel a brand-green marker on green is
   invisible — inherit the panel's white instead. */
.specialty-single__panel .specialty-single__content li::marker {
    color: inherit;
}

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

.specialty-single__content a {
    color: var(--color-primary);
    text-underline-offset: 0.2em;
}

.specialty-single__content a:hover {
    color: var(--primary-700);
}

/*
 * The imported markup ends a lot of blocks with a bare <br>, which
 * would otherwise add a stray blank line before every heading.
 */
.specialty-single__content br:last-child {
    display: none;
}

.specialty-single__empty {
    color: var(--text-muted);
}


/* ----------------------------------------------------------
   Hero — green panel with the intro text and the picture beside
   it. Always present: intro and image are fields rather than
   optional repeater rows, and the image falls back to a site-wide
   default, so this block is identical in shape on all 89 pages.
   ---------------------------------------------------------- */

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

.specialty-single__panel-lead {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.7;
}

/*
 * No measure cap on the intro.
 *
 * A max-width here looked like a padding bug: the left inset was
 * the panel's 4rem, the right one was 4rem plus whatever the
 * capped paragraph didn't use, so the block read as lopsided even
 * though the padding was symmetrical. The column is already
 * bounded by the picture beside it, which keeps the line length
 * reasonable without a second limit fighting the first.
 */

.specialty-single__panel {
    display: flex;
    align-items: stretch;
    background: var(--color-primary);
    color: var(--text-inverse, #fff);
    border-radius: var(--radius-xl, 1rem);
    overflow: hidden;
}

/* No picture — the text simply takes the whole panel instead of
   leaving an empty half. */
.specialty-single__panel--plain .specialty-single__panel-text {
    width: 100%;
}

.specialty-single__panel-text {
    /*
     * Grows into whatever the picture leaves. Without it the column
     * was only as wide as the longest line the browser happened to
     * break at, and the intro sat in a narrow strip with green to
     * its right.
     */
    flex: 1 1 auto;
    min-width: 0;

    /*
     * Horizontal padding is deliberately larger than vertical, and
     * the same on both sides — the left edge sits against the
     * panel, the right against the picture, and unequal insets
     * there read as a mistake.
     *
     * The horizontal value is past the end of the theme's spacing
     * scale, which stops at --space-10 (4rem), so it is written
     * out: 4rem left the text too close to both the panel edge and
     * the picture for a block this size.
     */
    padding: var(--space-8, 2.5rem) 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}


/*
 * The image is taken out of the flow.
 *
 * Left in it, the picture contributes its own intrinsic height —
 * a 4:3 photo in a 700px column is 500px tall — and since the
 * panel has no height of its own, that becomes the panel's height,
 * with the text floating in the middle of the empty space beside
 * it. `height: 100%` can't help: the parent's height is what the
 * image is trying to define.
 *
 * Absolutely positioned, it contributes nothing. The panel is then
 * exactly as tall as its text, the media column stretches to match
 * (align-items: stretch on the panel), and the photo is cropped to
 * fill whatever that turns out to be.
 */
/*
 * The picture keeps its own proportions.
 *
 * Its height comes from the panel (flex stretches it), and the
 * inline `aspect-ratio` — the uploaded file's real width and
 * height, written out by the template — turns that height into a
 * width. So a portrait photograph occupies a narrow column and a
 * landscape one a wider column, instead of every image being
 * cropped into the same fixed slot.
 *
 * `flex: 0 0 auto` keeps flexbox from overriding that computed
 * width; the max-width stops a panorama from crowding out the
 * text; the min-height is what gives the whole panel its height,
 * since two sentences of intro would otherwise leave it squat.
 */
/*
 * Headline price in the hero. Size and weight match
 * .doctor-single__price-value so the same figure reads the same
 * way on both pages; only the colour differs, because here it sits
 * on green and has to inherit white rather than the page's text
 * colour.
 */
.specialty-single__panel-price {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
    margin: var(--space-6, 1.75rem) 0 0;
}

.specialty-single__panel-price-label {
    font-size: var(--font-size-helper, 0.8125rem);
    opacity: .85;
}

.specialty-single__panel-price-value {
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.1;
    color: inherit;
}

.specialty-single__panel-price + .specialty-single__panel-button {
    margin-top: var(--space-5, 1.5rem);
}

.specialty-single__panel-button {
    margin-top: var(--space-6, 1.75rem);
    background: var(--surface-card, #fff);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold, 600);
    border-radius: var(--radius-button, 0.5rem);
    padding: var(--space-3, 0.75rem) var(--space-6, 1.75rem);
}

.specialty-single__panel-button:hover,
.specialty-single__panel-button:focus-visible {
    background: var(--surface-card, #fff);
    color: var(--primary-700);
}

.specialty-single__panel-media {
    flex: 0 0 auto;
    align-self: stretch;
    position: relative;

    /*
     * Pushed to the far edge. The text column takes its width from
     * its content and the picture is fixed-width by its own ratio,
     * so the two together don't fill the panel — the leftover sat
     * between the picture and the right edge as a strip of green.
     * An auto start-margin hands that leftover to the gap instead.
     */
    margin-inline-start: auto;
    min-height: 20rem;
    max-width: 40%;
    aspect-ratio: 4 / 3;
}

/*
 * The image fills its half whatever its own proportions are —
 * editors upload whatever they have, and a letterboxed photo with
 * green bars down the side looks like a mistake.
 */
.specialty-single__panel-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Inside the panel the prose sits on green, so everything that
 * carries its own colour has to be restated — body text, headings
 * and links all inherit white here instead of the page defaults.
 */
/*
 * Tighter than the page defaults: the panel is a short intro, not
 * an article, and article-sized paragraph gaps made it twice as
 * tall as it needed to be.
 */
.specialty-single__panel .specialty-single__content {
    color: inherit;
    line-height: var(--line-height-body, 1.6);
}

.specialty-single__panel .specialty-single__content :is(p, ul, ol) {
    margin-bottom: var(--space-3, 0.75rem);
}

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

.specialty-single__panel .specialty-single__content :is(h2, h3, h4) {
    color: inherit;
}

.specialty-single__panel .specialty-single__content a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.specialty-single__panel .specialty-single__content a:hover {
    color: inherit;
    text-decoration: none;
}

@media (max-width: 767.98px) {

    /* Stacked on a narrow screen: image first, text below (site-wide hero rule). */
    .specialty-single__panel {
        flex-direction: column;
    }

    .specialty-single__panel-media {
        order: -1;
    }

    .specialty-single__panel-text {
        padding: var(--space-7, 2rem) var(--space-6, 1.75rem);
    }

    /*
 * Headline price in the hero. Size and weight match
 * .doctor-single__price-value so the same figure reads the same
 * way on both pages; only the colour differs, because here it sits
 * on green and has to inherit white rather than the page's text
 * colour.
 */
.specialty-single__panel-price {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
    margin: var(--space-6, 1.75rem) 0 0;
}

.specialty-single__panel-price-label {
    font-size: var(--font-size-helper, 0.8125rem);
    opacity: .85;
}

.specialty-single__panel-price-value {
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.1;
    color: inherit;
}

.specialty-single__panel-price + .specialty-single__panel-button {
    margin-top: var(--space-5, 1.5rem);
}

.specialty-single__panel-button {
        width: 100%;
        margin-top: var(--space-5, 1.5rem);
    }

    .specialty-single__panel-lead {
        font-size: 1.0625rem;
    }

    /*
     * Stacked, the media column has no text beside it to take its
     * height from, so it gets an explicit one.
     */
    /*
     * Stacked, there is no text column beside the picture to take
     * a height from, so the ratio is dropped and a plain height
     * used instead.
     */
    .specialty-single__panel-media {
        max-width: none;
        aspect-ratio: auto;
        min-height: 14rem;
        margin-inline-start: 0;
    }
}


/* ==========================================================
   3. Single — related blocks
   ========================================================== */

.specialty-single__block {
    padding-block: 4rem;
    scroll-margin-top: 6rem;
}

.specialty-single__block--alt {
    background: var(--surface-section, #FAFAFA);
}

.specialty-single__block-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);
}

/* ==========================================================
   4. Specialty Card
   ========================================================== */

.specialty-card {
    border-radius: var(--radius-card, 0.75rem);
    transition: transform .2s ease, box-shadow .2s ease;
}

.specialty-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md) !important;
}

.specialty-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--space-3, 0.75rem);
}

.specialty-card__title {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-semibold, 600);
    font-size: 1.125rem;
}

.specialty-card__excerpt {
    color: var(--text-secondary);
    font-size: var(--font-size-helper, 0.8125rem);
}

.specialty-card__doctors {
    font-size: var(--font-size-caption, 0.75rem);
    margin-top: var(--space-3, 0.75rem);
}


/* ==========================================================
   5. Specialty Archive (A→Z index)
   ========================================================== */

.specialty-archive {
    padding-block: var(--space-block, 2rem) var(--space-region, 4rem);
}

.specialty-archive__card {
    background: var(--surface-card, #fff);
    border: var(--border-width-thin, 1px) solid var(--border-light);
    border-radius: var(--radius-card, 0.75rem);
    box-shadow: var(--shadow-card);
    padding: var(--space-7, 2rem);
}

/*
 * Multi-column rather than grid — see the same note on
 * .doctor-specialties-block__grid in blocks/style.css. As a grid
 * each row is as tall as its fullest letter, which leaves large
 * holes next to the sparse ones; columns pack the groups instead.
 * Column width, not count, so the layout follows the container.
 */
.specialty-archive__grid {
    columns: 220px;
    column-gap: var(--space-7, 2rem);
}

.specialty-archive__group {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: var(--space-6, 1.75rem);
}

.specialty-archive__letter {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold, 700);
    font-size: 1.5rem;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-3, 0.75rem);
    padding-bottom: var(--space-2, 0.5rem);
    border-bottom: var(--border-width-medium, 2px) solid var(--border-light);
}

.specialty-archive__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.specialty-archive__item {
    margin-bottom: var(--space-2, 0.5rem);
}

/* Same full-state reset as the block index — see the note in
   blocks/style.css. */
.specialty-archive__link,
.specialty-archive__link:link,
.specialty-archive__link:visited,
.specialty-archive__link:active {
    color: var(--text-primary) !important;
    background-color: transparent !important;
    text-decoration: none;
    line-height: var(--line-height-body, 1.6);
}

.specialty-archive__link:hover {
    color: var(--color-primary) !important;
    background-color: transparent !important;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Same white-on-green focus state as the block — see the note in
   blocks/style.css. */
.specialty-archive .specialty-archive__link:focus,
.specialty-archive .specialty-archive__link:focus-visible {
    color: var(--text-inverse, #fff) !important;
    background-color: var(--color-primary) !important;
    border-radius: var(--radius-xs, 0.25rem);
    box-shadow: 0 0 0 0.25rem var(--color-primary);
    text-decoration: none;
    outline-color: var(--color-primary);
}

.specialty-archive__empty {
    color: var(--text-muted);
}


/* ==========================================================
   6. Narrow screens
   ========================================================== */

@media (max-width: 575.98px) {

    .specialty-single__stats-card {
        padding: var(--space-5, 1.5rem);
    }

    .specialty-single__stats-lead {
        font-size: 1.125rem;
    }

    .specialty-archive__card {
        padding: var(--space-5, 1.5rem);
    }

    .specialty-archive__grid {
        column-gap: var(--space-5, 1.5rem);
    }
}


/* ==========================================================
   İxtisasın xidmətləri
   ==========================================================
   Referens saytdakı kimi: solda yaşıl kart, sağında xidmətlərin
   adları sütunlarda sadə keçidlər kimi. Kart siyahının
   hündürlüyünə uzanmır — öz məzmunu qədər yer tutur.
   ========================================================== */

.specialty-single__services-grid {
    display: grid;
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: var(--space-7, 2rem);
    align-items: start;
}

.specialty-single__services-intro {
    margin: 0;
    font-size: 1.0625rem;
    background: var(--color-primary);
    color: var(--text-inverse, #fff);
    border-radius: var(--radius-card, 0.75rem);
    padding: var(--space-6, 1.75rem);
    line-height: 1.6;
}

.specialty-single__services-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4, 1rem) var(--space-6, 1.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.specialty-single__services-list a {
    display: block;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.35;
    text-decoration: none;
}

.specialty-single__services-list a:hover,
.specialty-single__services-list a:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}

@media (max-width: 1199.98px) {

    .specialty-single__services-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {

    .specialty-single__services-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5, 1.5rem);
    }

    .specialty-single__services-list {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ==========================================================
   «Müraciət səbəbləri» — siyahı üç sütunda
   ==========================================================
   Referens saytdakı kimi: qısa maddələr sətir boyu uzanmır,
   üç sütuna bölünür və oxumaq asan olur. Yalnız siyahıdan ibarət
   bölmələrə aiddir: mətn varsa, sütunlar onu parçalayardı.
   ========================================================== */

.specialty-single__section--indications .specialty-single__content > ul,
.specialty-single__section--conditions .specialty-single__content > ul,
.specialty-single__section--diagnostics .specialty-single__content > ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4, 1rem) var(--space-7, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.specialty-single__section--indications .specialty-single__content > ul > li,
.specialty-single__section--conditions .specialty-single__content > ul > li,
.specialty-single__section--diagnostics .specialty-single__content > ul > li {
    position: relative;
    margin: 0;
    padding-left: var(--space-6, 1.75rem);
    line-height: 1.5;
}

/* Maddənin qarşısındakı yaşıl halqa — referensdəki kimi içi boş. */
.specialty-single__section--indications .specialty-single__content > ul > li::before,
.specialty-single__section--conditions .specialty-single__content > ul > li::before,
.specialty-single__section--diagnostics .specialty-single__content > ul > li::before {
    position: absolute;
    top: 0.45em;
    left: 0;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    background: none;
    content: "";
}

@media (max-width: 991.98px) {

    .specialty-single__section--indications .specialty-single__content > ul,
    .specialty-single__section--conditions .specialty-single__content > ul,
    .specialty-single__section--diagnostics .specialty-single__content > ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {

    .specialty-single__section--indications .specialty-single__content > ul,
    .specialty-single__section--conditions .specialty-single__content > ul,
    .specialty-single__section--diagnostics .specialty-single__content > ul {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ==========================================================
   «Nəyi müalicə edirik» — əlifba göstəricisi
   ==========================================================
   Referensdəki kimi: açıq fonlu blok, içində hərf qrupları
   sütunlarda. Hərf solda, adlar onun sağında.
   ========================================================== */

/* İndeks bölmənin mətninin davamıdır: yuxarıdan az aralıq. */
.specialty-single__content .specialty-single__conditions-index {
    margin-top: var(--space-4, 1rem);
}

.specialty-single__conditions-index {
    columns: 4;
    column-gap: var(--space-7, 2rem);
    background: var(--surface-muted, var(--brand-surface));
    border-radius: var(--radius-xl);
    padding: var(--space-6, 1.75rem);
}

.specialty-single__conditions-group {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: var(--space-2, 0.5rem);
    break-inside: avoid;
    margin-bottom: var(--space-4, 1rem);
}

.specialty-single__conditions-letter {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
}

.specialty-single__conditions-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.specialty-single__conditions-group li + li {
    margin-top: var(--space-2, 0.5rem);
}

.specialty-single__conditions-group a {
    color: var(--text-primary);
    line-height: 1.4;
    text-decoration: none;
}

.specialty-single__conditions-group a:hover,
.specialty-single__conditions-group a:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}

@media (max-width: 1199.98px) {

    .specialty-single__conditions-index {
        columns: 3;
    }
}

@media (max-width: 767.98px) {

    .specialty-single__conditions-index {
        columns: 2;
        padding: var(--space-5, 1.5rem);
    }
}

@media (max-width: 479.98px) {

    .specialty-single__conditions-index {
        columns: 1;
    }
}


/* Blok öz sütununda qalır — mətn qonşu bölmələrlə eyni xətdən
   başlayır. Fonu isə arxadan çəkilmiş lay ekranın bir kənarından
   o birinə uzanır: beləliklə heç nə sağa sürüşmür. */
.specialty-single__services {
    position: relative;
    z-index: 0;
    margin-block: 4rem;
    padding-block: 4.5rem;
}

.specialty-single__services::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    z-index: -1;
    width: 100vw;
    background: var(--surface-muted, var(--brand-surface));
    content: "";
}

.specialty-single__services-inner {
    width: 100%;
}


/* ==========================================================
   «Tətbiq etdiyi üsullar» — xidmətlər bloku ilə eyni görkəm
   ==========================================================
   Boz zolaq bütün eni tutur, mətn isə qonşu bölmələrlə eyni
   xətdən başlayır: fon arxadan çəkilmiş laydır.
   ========================================================== */

.specialty-single__section--treatment {
    position: relative;
    z-index: 0;
    margin-block: 4rem;
    padding-block: 4.5rem;
}

.specialty-single__section--treatment::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    z-index: -1;
    width: 100vw;
    background: var(--surface-muted, var(--brand-surface));
    content: "";
}

/* Giriş cümləsi — yaşıl kartda, üsullar onun yanında sütunlarda. */
.specialty-single__split {
    display: grid;
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: var(--space-7, 2rem);
    align-items: start;
}

.specialty-single__split-card {
    background: var(--color-primary);
    color: var(--text-inverse, #fff);
    border-radius: var(--radius-card, 0.75rem);
    padding: var(--space-6, 1.75rem);
    font-size: 1.0625rem;
    line-height: 1.6;
}

/* Kartın içindəki keçidlər yaşıl fonda görünməz qalmasın: mətnin
   rəngini alır, xətlə seçilir. */
.specialty-single__split-card a,
.specialty-single__services-intro a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.specialty-single__split-card a:hover,
.specialty-single__split-card a:focus-visible,
.specialty-single__services-intro a:hover,
.specialty-single__services-intro a:focus-visible {
    text-decoration: none;
}

.specialty-single__split-card > :first-child {
    margin-top: 0;
}

.specialty-single__split-card > :last-child {
    margin-bottom: 0;
}

/* Sağ sütun: mətn abzasları, aralarındakı yarımbaşlıqlar və
   siyahılar. Siyahı varsa, iki sütuna bölünür. */
.specialty-single__split-body > :first-child {
    margin-top: 0;
}

.specialty-single__split-body > :last-child {
    margin-bottom: 0;
}

.specialty-single__split-body h3 {
    font-family: var(--font-family-heading);
    font-size: 1.1875rem;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.35;
    margin: var(--space-5, 1.5rem) 0 var(--space-2, 0.5rem);
}

.specialty-single__split-body h3:first-child {
    margin-top: 0;
}

.specialty-single__split-body p {
    margin: 0 0 var(--space-3, 0.75rem);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.specialty-single__split-body ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3, 0.75rem) var(--space-6, 1.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.specialty-single__split-body li {
    position: relative;
    padding-left: var(--space-6, 1.75rem);
    font-size: 1.0625rem;
    line-height: 1.45;
}

.specialty-single__split-body li::before {
    position: absolute;
    top: 0.45em;
    left: 0;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    content: "";
}

@media (max-width: 767.98px) {

    .specialty-single__split,
    .specialty-single__split-body ul {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ==========================================================
   Məqalələr — bir sıra, dörd kart, sürüşdürmə düymələri
   ========================================================== */

.specialty-single__slider {
    position: relative;
}

.specialty-single__slider-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * var(--space-5, 1.5rem)) / 4);
    gap: var(--space-5, 1.5rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: var(--space-2, 0.5rem);
}

.specialty-single__slider-track::-webkit-scrollbar {
    display: none;
}

.specialty-single__slide {
    scroll-snap-align: start;
}

.specialty-single__slider-nav {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3, 0.75rem);
    margin-top: var(--space-4, 1rem);
}

.specialty-single__slider-button {
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--text-inverse, #fff);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.specialty-single__slider-button:disabled {
    opacity: .35;
    cursor: default;
}

@media (max-width: 1199.98px) {

    .specialty-single__slider-track {
        grid-auto-columns: calc((100% - 2 * var(--space-5, 1.5rem)) / 3);
    }
}

@media (max-width: 991.98px) {

    .specialty-single__slider-track {
        grid-auto-columns: calc((100% - var(--space-5, 1.5rem)) / 2);
    }
}

@media (max-width: 575.98px) {

    .specialty-single__slider-track {
        grid-auto-columns: 82%;
    }
}


/* Rəngli zolağın öz kənar boşluğu qonşu bölmənin boşluğunu əvəz
   edir — yuxarıda mətnə yapışmasın, aşağıda isə ikiqat aralıq
   yaranmasın. */
.specialty-single__section + .specialty-single__services,
.specialty-single__section + .specialty-single__section--treatment {
    margin-top: 3rem;
}

.specialty-single__services + .specialty-single__section,
.specialty-single__section--treatment + .specialty-single__section {
    margin-top: 3rem;
}


/* Zolağın içindəki başlıq: alt xətt kartın üstündə asılı qalmasın
   deyə ondan sonrakı aralıq bir az artırılır. */
.specialty-single__section--treatment .specialty-single__heading,
.specialty-single__services .specialty-single__heading {
    margin-bottom: var(--space-6, 1.75rem);
}


/* ==========================================================
   Əlaqəli yazılar — keçidlər siyahısı
   ==========================================================
   Kart yalnız məqalələrdə qalır: orada şəkil və giriş cümləsi
   işləyir. Qalan hər şey adlar siyahısıdır — sütunlarda keçidlər
   həm tez oxunur, həm də səhifədə az yer tutur.
   ========================================================== */

.specialty-single__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3, 0.75rem) var(--space-6, 1.75rem);
    margin: 0;
    padding: var(--space-6, 1.75rem);
    background: var(--surface-muted, var(--brand-surface));
    border-radius: var(--radius-xl);
    list-style: none;
}

.specialty-single__links a {
    color: var(--text-primary);
    line-height: 1.4;
    text-decoration: none;
}

.specialty-single__links a:hover,
.specialty-single__links a:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}

@media (max-width: 991.98px) {

    .specialty-single__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {

    .specialty-single__links {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--space-5, 1.5rem);
    }
}
.specialty-archive__controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    margin-bottom: var(--space-6, 1.75rem);
}

.specialty-archive__search {
    flex: 0 1 16rem;
    min-width: 8rem;
}

.specialty-archive__search-input {
    width: 100%;
    height: 2.75rem;
    padding: 0 var(--space-5, 1.5rem);
    background: var(--brand-surface);
    border: 0;
    border-radius: var(--radius-pill, 999px);
    color: var(--text-primary);
}

.specialty-archive__search-input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Fon sətirdəki digər elementlərlə eynidir — referansda da belə.
   Seçilmiş vəziyyət rənglə deyil, mətnin rəngi və qalınlığı ilə
   göstərilir: yaşıl düymə sıranın tarazlığını pozurdu. */
.specialty-archive__all {
    flex: 0 0 auto;
    height: 2.75rem;
    padding: 0 var(--space-5, 1.5rem);
    background: var(--brand-surface);
    border: 0;
    border-radius: var(--radius-pill, 999px);
    color: var(--index-letter-color, var(--brand-muted));
    white-space: nowrap;
    cursor: pointer;
}

.specialty-archive__all:hover {
    color: var(--color-primary);
}

.specialty-archive__all.is-active {
    background: var(--brand-surface);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold, 600);
}

/* Otuz iki hərf qalan yeri tutur və lazım gəldikdə sıxılır. */
.specialty-archive__alphabet {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 2.75rem;
    padding-inline: var(--space-3, 0.75rem);
    background: var(--brand-surface);
    border-radius: var(--radius-pill, 999px);
}

.specialty-archive__letter {
    flex: 0 1 auto;
    min-width: 1.5rem;
    height: 2.25rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-pill, 999px);
    color: var(--index-letter-color, var(--brand-muted));
    font-weight: var(--font-weight-medium);
    line-height: 1;
    cursor: pointer;
}

.specialty-archive__letter:hover:not(:disabled) {
    color: var(--color-primary);
}

.specialty-archive__letter.is-active {
    background: var(--color-primary);
    color: var(--text-inverse, #fff);
}

/* Boş hərflər sıradan çıxarılmır və solğunlaşdırılmır: sıra hər
   səhifədə eyni görünməlidir, rəng fərqi isə nasazlıq təəssüratı
   yaradırdı. Onlar sadəcə klikə cavab vermir. */
.specialty-archive__letter.is-empty {
    cursor: default;
}

/* ==========================================================
   Siyahı — ixtisaslar səhifəsindəki kartla eyni
   ========================================================== */



/* Süzgəcdən sonra: bir sütun, hərf kənarda — xəstəliklər
   göstəricisindəki kimi. */
.specialty-archive__grid.is-filtered {
    columns: auto;
}

.specialty-archive__grid.is-filtered .specialty-archive__group {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4, 1rem);
    margin-bottom: var(--space-5, 1.5rem);
}

.specialty-archive__grid.is-filtered .specialty-archive__letter {
    flex: 0 0 1.75rem;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
    line-height: 1.9;
}

.specialty-archive__grid.is-filtered .specialty-archive__list {
    flex: 1 1 auto;
    min-width: 0;
    columns: 220px;
    column-gap: var(--space-7, 2rem);
}

.specialty-archive__grid.is-filtered .specialty-archive__item {
    break-inside: avoid;
}

/* ==========================================================
   Lists in columns (Oct 2026): the template sets list-cols-1/2/3
   from the number and length of the items.
   ========================================================== */
.specialty-single__content ul.list-cols-2,
.specialty-single__content ul.list-cols-3 { column-gap: var(--space-7, 2rem); }
.specialty-single__content ul.list-cols-2 { columns: 2; }
.specialty-single__content ul.list-cols-3 { columns: 3; }
.specialty-single__content ul.list-cols-2 > li,
.specialty-single__content ul.list-cols-3 > li { break-inside: avoid; }

/* In the grid sections (indications/conditions/diagnostics) the grid wins; only the number of tracks changes. */
.specialty-single__section--indications .specialty-single__content > ul.list-cols-2,
.specialty-single__section--conditions .specialty-single__content > ul.list-cols-2,
.specialty-single__section--diagnostics .specialty-single__content > ul.list-cols-2 { columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.specialty-single__section--indications .specialty-single__content > ul.list-cols-1,
.specialty-single__section--conditions .specialty-single__content > ul.list-cols-1,
.specialty-single__section--diagnostics .specialty-single__content > ul.list-cols-1 { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 767.98px) {
    .specialty-single__content ul.list-cols-2,
    .specialty-single__content ul.list-cols-3 { columns: 1; }
    .specialty-single__section--indications .specialty-single__content > ul.list-cols-2,
    .specialty-single__section--conditions .specialty-single__content > ul.list-cols-2,
    .specialty-single__section--diagnostics .specialty-single__content > ul.list-cols-2 { grid-template-columns: minmax(0, 1fr); }
}