/* =========================================================================
 * DEAD CODE — kept temporarily, do NOT extend.
 * Contacts/socials moved out of .header-nav into .header-feed (header.php).
 * Dead selectors in this file:
 *   .header-nav__contacts-item img  (~line 1312)
 *   .header-nav__social ul li img   (~line 1306)
 * ========================================================================= */

/* =========================================================================
 * File-row component (canonical) — `.link-list__*` namespace.
 *
 * One unified visual for "file / link / PDF" rows used by:
 *   - link-list block (lists of links and files)
 *   - pdf-viewer block in card mode (single PDF card)
 *   - news-single attached files (per-news file list)
 *   - content-file-link wpLink card (rich-text inline)
 *
 * Each row: brand-filled icon column (76px) on the left, body on
 * surface-soft. Optional `.link-list__download` icon button at the
 * right edge for file rows (always download, regardless of the row's
 * primary click target). For PDF rows the row anchor points at the
 * PDF.js viewer URL with data-iframe so lightGallery picks it up.
 *
 * Block-specific bits (sections, subheadings, the compact variant,
 * the adjacent-block group wrapper) live in
 * templates/blocks/link-list/style.css.
 * ========================================================================= */
.link-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.link-list__item {
    margin: 0;
    padding: 0;
}

/* File rows lay out two children side-by-side: the main entry anchor
   (icon + body) takes the remaining width; the download icon stays at
   the fixed icon-column size on the right. The two tiles touch — no
   gap — so the row reads as one composed plate, not as two buttons.
   Link rows (no download) are simple anchors and skip this flex shell. */
.link-list__item--file {
    display: flex;
    align-items: stretch;
}

.link-list__item--file .link-list__entry {
    flex: 1;
    min-width: 0;
}

.link-list__entry {
    display: flex;
    align-items: stretch;
    /* Keeps rows without a description from collapsing — matches the
       natural height of a row with a single-line description so the
       list reads as a uniform stack regardless of which rows have
       extra text underneath. */
    min-height: 78px;
    color: var(--c-text);
    text-decoration: none;
    background-color: var(--c-surface-soft);
    transition: background-color 0.4s ease;
}

.link-list__entry:hover {
    background-color: color-mix(in srgb, var(--c-brand) 8%, var(--c-surface-soft));
}

.link-list__entry:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
}

.link-list__icon {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 76px;
    background-color: var(--c-brand);
    color: var(--c-surface);
}

.link-list__ext {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: var(--fs-2xs);
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--c-surface);
}

.link-list__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    padding: 16px 22px;
}

/* Single-line ellipsis on both title and description — the row's a
   compact card, multi-line content blows the rhythm out. Long values
   get cut with `…`; the editor's full text remains accessible to
   screen readers and via the row's tooltip when an editor provides
   one. */
.link-list__entry-title {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: var(--fs-base); /* compact file-row label, not a hero card title */
    line-height: var(--lh-heading);
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.4s ease;
}

.link-list__entry:hover .link-list__entry-title,
.link-list__entry:focus-visible .link-list__entry-title {
    color: var(--c-brand);
}

.link-list__desc {
    font-family: Avenir Next Cyr, sans-serif;
    font-weight: 400;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--c-text);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right-edge download icon — brand-filled square that mirrors the
   row's min-height (78px) on the side, so the tile reads as a peer
   of the icon column instead of a tall slim button. The parent
   `align-items: stretch` keeps it the row's actual height; the
   explicit width here makes it square at the default min-height. */
.link-list__download {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    background-color: var(--c-brand);
    color: var(--c-surface);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.link-list__download:hover,
.link-list__download:focus-visible {
    background-color: var(--c-brand-dark, color-mix(in srgb, #000 18%, var(--c-brand)));
    color: var(--c-surface);
    outline: none;
}

.link-list__download:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
}

/* The site-wide `.page-content a` rule lower in this file (~line 737)
   paints translucent-brand underlines + brand colour on every anchor;
   that overrides our flat `.link-list__entry` / `.link-list__download`
   on specificity grounds (0,0,1,1 beats 0,0,1,0). Use a more specific
   override so file rows keep their clean plate look (no underline)
   AND the download tile keeps its white icon on its brand fill. */
.link-list__entry,
.link-list__entry:hover,
.link-list__download,
.link-list__download:hover {
    border-bottom: 0;
}
.page-content .link-list__entry,
.page-content .link-list__entry:hover {
    color: var(--c-text);
    border-bottom: 0;
}
.page-content .link-list__download,
.page-content .link-list__download:hover {
    color: var(--c-surface);
    border-bottom: 0;
}

@media (max-width: 600px) {
    .link-list__icon,
    .link-list__download {
        width: 56px;
    }
    .link-list__body {
        padding: 14px 16px;
    }
}
/* ========================================================================= */

.homepage .icon-cards {
    padding: var(--section-py) 0;
    background: var(--c-surface-soft);
}

.homepage .content-with-title__wrapper {
    margin: 0 !important;
}


/* custom-cards.css */
.custom-cards__grid {
    display: grid;
    gap: var(--block-gap);

    /* Per-block image treatment knobs, set by modifier classes on the
       grid root. Defaults match the historical look so unchanged blocks
       render identically. Overridden by --tint / --overlay / --blur
       modifiers below. */
    --li-overlay-color: 0, 0, 0;
    --li-overlay-from:  0.3;
    --li-overlay-to:    0.5;
    --li-blur:          0px;
    --li-bg-scale:      1;
}

/* Tint of the overlay gradient — dark (neutral) by default, or
   brand-blue (the darker brand variant — the regular brand is too
   light to give white card titles enough contrast against pale
   photos) when the editor picks the brand tint. */
.custom-cards__grid--tint-brand { --li-overlay-color: 9, 38, 85; }

/* Overlay intensity. Same gradient slope (low → high) for all levels;
   the alpha values scale to give a perceptible step between them. */
.custom-cards__grid--overlay-none   { --li-overlay-from: 0;    --li-overlay-to: 0;    }
.custom-cards__grid--overlay-weak   { --li-overlay-from: 0.15; --li-overlay-to: 0.25; }
.custom-cards__grid--overlay-medium { --li-overlay-from: 0.3;  --li-overlay-to: 0.5;  }
.custom-cards__grid--overlay-strong { --li-overlay-from: 0.5;  --li-overlay-to: 0.7;  }

/* Blur. Slight bg-scale compensation hides the soft transparent ring
   filter:blur leaves at the element's edges. */
.custom-cards__grid--blur { --li-blur: 3px; --li-bg-scale: 1.03; }

/* Настройки колонок */
.custom-cards__grid--2-columns,
.custom-cards__grid--3-columns,
.custom-cards__grid--4-columns,
.custom-cards__grid--5-columns {
    grid-template-columns: repeat(1, 1fr);
}

.custom-cards__card {
    position: relative;
    height: 280px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    will-change: transform;
}

/* Base overlay — colour and intensity are CSS-variable driven (see the
   grid-level knobs above). */
.custom-cards__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
    rgba(var(--li-overlay-color), var(--li-overlay-from)),
    rgba(var(--li-overlay-color), var(--li-overlay-to)));
    z-index: 1;
    transition: opacity 0.2s ease;
}

/* Hover overlay — a lighter scrim that's the inverse direction of the
   base gradient so the card brightens a touch on hover instead of going
   darker (which felt heavy). Same 0.2s timing as the rest of the site. */
.custom-cards__card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.30));
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
}

.custom-cards__card:hover::after {
    opacity: 1;
}

.custom-cards__card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(var(--li-blur));
    /* Subtle 1.05 zoom on hover — same idiom as icon-cards and news-card,
       no more 1.12 (too theatrical for the rest of the site). When blur
       is on, the resting scale is bumped to 1.03 to hide the soft
       transparent ring at the element's edge. */
    transform: scale(var(--li-bg-scale));
    transition: transform 0.2s ease;
    z-index: 0;
}

.custom-cards__card:hover .custom-cards__card-bg {
    transform: scale(calc(var(--li-bg-scale) + 0.05));
}

.custom-cards__card-title {
    padding: 0 20px;
    margin: 0;
    position: relative;
    font-family: Montserrat, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: var(--fs-lg); /* card/item title role */
    line-height: var(--lh-heading);
    color: var(--c-surface);
    text-align: center;
    z-index: 2;
    /* Title stays put on hover — every other card type on the site
       (staff, news, icon-cards) holds the heading static. */
}

/* Медиа-запросы для разных размеров экрана */
@media (min-width: 640px) {
    .custom-cards__grid--2-columns,
    .custom-cards__grid--3-columns,
    .custom-cards__grid--4-columns,
    .custom-cards__grid--5-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .custom-cards__grid--2-columns {
        grid-template-columns: repeat(2, 1fr);
    }

    .custom-cards__grid--3-columns {
        grid-template-columns: repeat(3, 1fr);
    }

    .custom-cards__grid--4-columns {
        grid-template-columns: repeat(4, 1fr);
    }

    .custom-cards__grid--5-columns {
        grid-template-columns: repeat(5, 1fr);
    }
}


/* icon-cards.css */
/*.icon-cards {*/
/*    margin: 0;*/
/*    padding: 4rem 0;*/
/*}*/

.icon-cards__grid {
    display: grid;
    gap: var(--block-gap);
}

/* Grid columns configuration */
.icon-cards__grid--2-columns,
.icon-cards__grid--3-columns,
.icon-cards__grid--4-columns,
.icon-cards__grid--5-columns {
    grid-template-columns: repeat(1, 1fr);
}

.icon-cards__card {
    position: relative;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-decoration: none;
    background-color: var(--c-surface-tint);
    will-change: transform;
    padding: var(--card-py) var(--card-px);
    transition: all 0.3s ease;
}

.icon-cards__card--link {
    cursor: pointer;
    text-decoration: none;
}

.icon-cards__card--link:hover {
    /* Darker variant of --c-surface-tint so hover stays in the brand-blue
       family and is visually distinct from both the default card tint and
       the section's neutral background. */
    background-color: #d6e4f5;
}

.icon-cards__card--link:hover .icon-cards__icon img {
    transform: scale(1.05);
}

/* Transparent variant — drop the tint box (and the link-hover tint). */
.icon-cards--transparent .icon-cards__card {
    background-color: transparent;
    padding: 0;
}

.icon-cards--transparent .icon-cards__card--link:hover {
    background-color: transparent;
}

.icon-cards__icon img {
    margin: 0;
    padding: 0;
    width: 80px;
    height: 80px;
    object-fit: contain;
    transition: all 0.3s ease;
}

.icon-cards__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.icon-cards__card-title {
    margin: 0;
    padding: 0;
    font-family: Montserrat, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: var(--fs-lg); /* card/item title role */
    line-height: var(--lh-heading);
    color: var(--c-brand);
    text-align: center;
}

.icon-cards__card-description {
    margin: 0;
    padding: 0;
    font-family: Avenir Next Cyr, sans-serif;
    font-style: normal;
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--c-text);
    text-align: center;
}

.icon-cards__card-description a {
    color: var(--c-brand);
    text-decoration: none;
    border-bottom: 1px solid rgba(50, 83, 144, 0.2);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.icon-cards__card-description a:hover {
    color: var(--c-brand-dark);
    border-bottom-color: var(--c-brand-dark);
}

/* Responsive grid settings */
@media (min-width: 640px) {
    .icon-cards__grid--2-columns,
    .icon-cards__grid--3-columns,
    .icon-cards__grid--4-columns,
    .icon-cards__grid--5-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .icon-cards__grid--2-columns {
        grid-template-columns: repeat(2, 1fr);
    }

    .icon-cards__grid--3-columns {
        grid-template-columns: repeat(3, 1fr);
    }

    .icon-cards__grid--4-columns {
        grid-template-columns: repeat(4, 1fr);
    }

    .icon-cards__grid--5-columns {
        grid-template-columns: repeat(5, 1fr);
    }
}


.content-with-title__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--section-gy);
}

/* Rich-text and tabs render their heading directly in the section (no
   .content-with-title__wrapper). Their .container holds just the heading plus one
   content wrapper (.tabbed-block for tabs, .page-content for rich-text), so a
   gap-based column gives the title↔content rhythm and applies no gap when the
   heading is hidden (single child). */
.rich-text-content .container,
.tabbed-section .container {
    display: flex;
    flex-direction: column;
    gap: var(--section-gy);
}


/* page-content.css */
/* Основной контейнер контента */
.page-content {
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-family: Avenir Next Cyr, sans-serif;
    font-style: normal;
    line-height: var(--lh-body);
    color: #2C3E50;
    font-size: var(--fs-base);
}

/* Типографика заголовков */
.page-content h1, .page-content h2, .page-content h3,
.page-content h4, .page-content h5, .page-content h6 {
    font-family: Montserrat, sans-serif;
    margin: 1em 0;
    color: var(--c-text);
    font-weight: 700;
}

/* In-content headings (what an editor types inside a rich-text block) — a
   fluid scale that sits one notch below the block's own section-title, so the
   hierarchy reads page H1 > block title > in-content headings. Each clamp hits
   its min at ~360px and max at ~1240px (no breakpoint jumps). px: h1 22→28,
   h2 20→25, h3 18→22, h4 17→19, h5 16→17, h6 16. */
/* In-content headings ride the SAME token scale as the rest of the site
   (no private clamps), one notch below the block's section-title so the
   hierarchy reads page H1 > block title > in-content headings. */
.page-content h1 {
    font-size: var(--fs-xl);
}

.page-content h2 {
    font-size: var(--fs-lg);
}

.page-content h3 {
    font-size: var(--fs-md);
}

.page-content h4 {
    font-size: var(--fs-base);
    font-weight: 600;
}

.page-content h5 {
    font-size: var(--fs-sm);
    font-weight: 600;
}

.page-content h6 {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Параграфы и текст */
.page-content p {
    margin: 0.8em 0;
    font-size: var(--fs-base);
}

.page-content strong {
    color: var(--c-text);
    font-weight: 600;
}

.page-content mark {
    background-color: rgba(50, 83, 144, 0.1);
    color: var(--c-brand);
    padding: 0.2em 0.4em;
}

/* Списки */
.page-content ul,
.page-content ol {
    margin: 0 0 1.5em 0;
    padding-left: 1.5em;
    list-style-position: outside;
}

.page-content ol > li::marker,
.page-content ul > li::marker {
    color: var(--c-brand);
}

.page-content ul li {
    position: relative;
    padding: 0.2rem 0;
}

.page-content ul ul {
    margin: 0.5em 0;
}

.page-content ul ul > li::marker,
.page-content ol ol > li::marker {
    color: rgba(50, 83, 144, 0.7);
}

.page-content ul ul ul > li::marker,
.page-content ol ol ol > li::marker {
    color: rgba(50, 83, 144, 0.5);
}

/* Square brand bullet for content bulleted lists — matches the site's
   sharp-edged idiom (same square as specialties-cards). Ordered lists keep
   their numbers; nested levels fade the square like the old ::marker did. */
.page-content ul {
    list-style: none;
    padding-left: 0; /* markers sit flush with the text's left edge */
}
.page-content ul > li {
    padding-left: 1.1em; /* gap between the square and the text */
}
.page-content ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    /* Centre the square on the FIRST line: li padding-top (0.2rem) + half the
       line height (0.8em at line-height 1.6) − half the square. Multi-line
       items keep it on the first line, not the block centre. */
    top: calc(0.2rem + 0.8em - 3.5px);
    width: 7px;
    height: 7px;
    background-color: var(--c-brand);
}
.page-content ul ul > li::before {
    background-color: rgba(50, 83, 144, 0.7);
}
.page-content ul ul ul > li::before {
    background-color: rgba(50, 83, 144, 0.5);
}

/* Нумерованные списки */
.page-content ol {
    list-style: decimal;
    counter-reset: item;
    padding-left: 1.1em; /* align the text edge with ul (whose markers sit flush-left) */
}

.page-content ol ol {
    list-style: lower-alpha;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.page-content ol ol ol {
    list-style: lower-roman;
}

/* Цитаты */
.page-content blockquote {
    margin: 2em 0;
    padding: 1.5em 2em;
    border-left: 4px solid var(--c-brand);
    background-color: rgba(50, 83, 144, 0.05);
}

.page-content blockquote p {
    color: var(--c-brand);
    font-size: 1.1em;
    font-style: italic;
}

.page-content blockquote cite {
    display: block;
    margin-top: 1em;
    color: rgba(50, 83, 144, 0.7);
    font-size: 0.9em;
}

/* Tables — neutral palette: soft-grey header band, faint zebra on
   even rows. Borders use a black-overlay rgba so the dividers stay
   visible on both white and the zebra row background. */
.page-content table {
    width: 100%;
    margin: 2em 0;
    border-collapse: collapse;
    /* No border on the table object itself — every cell already draws its own
       1px border, so a table border just doubled the outer edge. The caption
       supplies the top frame (three-sided border below). */
    /* auto layout sizes each column to its content (a "№"/time column stays
       narrow, a name/email column gets the room it needs) instead of the
       equal split fixed layout forced — and the table fills its container. */
    table-layout: auto;
}

.page-content table caption {
    width: 100%;
    white-space: normal;
    word-wrap: break-word;
    /* No margins at all — the caption sits flush as the table's top frame. */
    margin: 0;
    padding: 0.6em 1em;
    /* Frame the title on three sides (the cell grid below closes the box),
       so there's no doubled border against a table-level border. */
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-bottom: none;
}

.page-content th {
    background-color: var(--c-surface-tint);
    color: var(--c-text);
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.page-content td,
.page-content th {
    padding: 1em;
    text-align: left;
    border: 1px solid rgba(0, 0, 0, 0.12);
    min-width: 120px;
}

.page-content tbody tr:nth-child(even) {
    background-color: var(--c-surface-soft);
}

/* Drop the leading margin off the first thing in any cell so headings
   that open a column don't push their text below the cell padding. */
.page-content table td > *:first-child,
.page-content table th > *:first-child {
    margin-top: 0;
}

/* Brand the inline links inside tables — the global .page-content a
   rule reaches them, but the underline below uses a translucent brand
   color that disappears on the zebra band. Tighten that here. */
.page-content table a {
    color: var(--c-brand);
    border-bottom-color: var(--c-brand);
}

.page-content table a:hover {
    color: var(--c-brand-dark);
    border-bottom-color: var(--c-brand-dark);
}

/* Код */
.page-content pre {
    background-color: var(--c-surface-soft);
    padding: 1.5em;
    margin: 2em 0;
    border: 1px solid rgba(50, 83, 144, 0.1);
}

.page-content code {
    font-family: 'JetBrains Mono', 'Fira Code', Monaco, Consolas, monospace;
    font-size: 0.9em;
    color: var(--c-brand);
    background-color: rgba(50, 83, 144, 0.05);
    padding: 0.2em 0.4em;
}

/* Определения */
.page-content dt {
    color: var(--c-brand);
    font-weight: 600;
    margin-top: 1.2em;
}

.page-content dd {
    margin-left: 2em;
    margin-top: 0.5em;
    color: var(--c-text-muted);
}

/* Ссылки */
.page-content a {
    color: var(--c-brand);
    text-decoration: none;
    border-bottom: 1px solid rgba(50, 83, 144, 0.2);
    transition: border-color 0.2s ease, color 0.2s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.page-content a:hover {
    color: var(--c-brand-dark);
    border-bottom-color: var(--c-brand-dark);
}

/* Горизонтальная линия */
.page-content hr {
    margin: 2em 0;
    border: none;
    height: 1px;
    background-color: rgba(50, 83, 144, 0.2);
}

/* Изображения */
.page-content img {
    max-width: 100%;
    height: auto;
    margin: 1em 0;
    display: block;
}

.page-content figure {
    margin: 1em 0;
}

.page-content figcaption {
    margin-top: 0.5em;
    text-align: center;
    font-size: 0.9em;
    color: var(--c-text-muted);
}

@media (max-width: 768px) {
    /* In-content heading sizes are fluid (clamp) now — no per-breakpoint
       override needed; the rules below only adjust spacing/boxes. */
    .page-content blockquote {
        padding: 1em;
        margin: 1.5em 0;
    }

    .page-content pre {
        padding: 1em;
        margin: 1.5em 0;
    }
}

/* Tablet/desktop: a normal table (display:table) so width:100% + auto layout
   fill the container with content-sized columns. */
@media (min-width: 769px) {
    .page-content td,
    .page-content th {
        padding: 0.8em;
    }
}

/* Mobile: keep tables as real tables that scroll horizontally rather than
   restructuring rows into cards (the card mode read poorly). Here — and only
   here — the table becomes a block-level scroll container; a per-cell
   min-width pushes its natural width past the viewport so it scrolls
   left/right instead of squashing the columns. */
@media (max-width: 768px) {
    .page-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        margin: 1em 0;
    }

    .page-content td,
    .page-content th {
        min-width: 140px;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

.wp-video {
    margin: 0.8em 0;
}


.feedback-section {
    font-family: Avenir Next Cyr, sans-serif;
    font-style: normal;
    padding: var(--section-py) 0;
}

/* The brand-tinted band reads as a homepage feature — on internal
   pages the form should sit flush with the surrounding content, not
   carry its own coloured container. */
.homepage .feedback-section {
    background: var(--c-surface-tint);
}

/* Opt-out from the default `.section-title { text-transform: uppercase }`
   in `style.css`. Editors enable this per-block via the section-title
   controls when title_format=one_row. */
.section-title-wrap--regular-case .section-title {
    text-transform: none;
}

.feedback-section .section-title-wrap {
    margin-bottom: var(--section-gy);
}

/* Editor-facing warning shown when the block is rendered without
   either a Google Forms URL or any configured fields — bold red so
   it can't be missed inside the otherwise calm section. */
.feedback-not-configured {
    color: var(--c-danger);
    font-weight: 700;
}

.feedback-title {
    font-size: var(--fs-xl);
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #1a1a1a;
}

.feedback-description {
    margin-bottom: 2rem;
    line-height: 1.6;
    color: var(--c-text);
}

.form-group {
    margin-bottom: 1.5rem;
    position: relative;
}

.form-label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--c-text);
}

.required::after {
    content: '*';
    color: var(--c-danger);
    margin-left: 4px;
}

.form-input {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--c-border);
    background: var(--c-surface-soft);
    transition: border-color 0.3s ease;
    margin-top: 4px;
    border-radius: 0;
    font-size: var(--fs-base); /* standard field size; native controls don't inherit reliably */
    font-family: inherit;
}

.form-input:focus {
    outline: none;
    border-color: var(--c-brand);
}

.form-input.error {
    border-color: var(--c-danger);
}

.error-message {
    color: var(--c-danger);
    font-size: var(--fs-sm);
    margin-top: 0.25rem;
    display: none;
}

.error-message.visible {
    display: block;
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Radio/checkbox groups in contact form. */
.form-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
    color: var(--c-text);
}

.form-choice input[type="radio"],
.form-choice input[type="checkbox"] {
    flex-shrink: 0;
    accent-color: var(--c-brand);
    margin: 0;
}

/* Native <select> styled like .form-input. */
.form-select {
    appearance: none;
    -webkit-appearance: none;
    font-size: var(--fs-base);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23474747' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    padding-right: 36px;
}

.form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
}

/* Site-wide button system. Resting state: soft-surface fill, brand
   border, brand text — same look as the .share-button used in the
   tabs block. On hover the whole button shifts as one unit: fill,
   border and text colour all change together so it reads as a
   single colored block (no thin outline ring). */
.btn,
.btn-submit,
.empty-state__action,
.share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.75rem 1.5rem;
    background: var(--c-surface-soft);
    border: 1px solid var(--c-brand);
    color: var(--c-brand);
    font-family: Montserrat, sans-serif;
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: var(--lh-snug);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.btn:hover:not(:disabled),
.btn-submit:hover:not(:disabled),
.empty-state__action:hover,
.empty-state__action:focus-visible,
.share-button:hover {
    background: var(--c-brand-dark);
    border-color: var(--c-brand-dark);
    color: var(--c-surface);
    outline: none;
}

.btn:disabled,
.btn-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn svg,
.btn-submit svg,
.empty-state__action svg,
.share-button svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Primary: form submit. Filled brand so it dominates over Clear. */
.btn-submit {
    background: var(--c-brand);
    color: var(--c-surface);
}

.btn-submit:hover:not(:disabled) {
    background: var(--c-brand-dark);
    border-color: var(--c-brand-dark);
    color: var(--c-surface);
}

/* Secondary: form reset / destructive — outlined neutral so it
   stays quieter than Submit, but with a white fill + visible dark
   border so it doesn't disappear into the form's grey background. */
.btn-clear {
    background: var(--c-surface);
    border-color: rgba(0, 0, 0, 0.25);
    color: var(--c-text);
}

.btn-clear:hover:not(:disabled) {
    background: var(--c-text);
    border-color: var(--c-text);
    color: var(--c-surface);
}

.spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--c-surface);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.success-message {
    display: none;
    background-color: var(--c-success-bg);
    color: var(--c-success-text);
    padding: 1rem;
    margin-bottom: 1rem;
}

.character-count {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    text-align: right;
    margin-top: 0.25rem;
}

.hidden-field {
    display: none;
    visibility: hidden;
    position: absolute;
    left: -9999px;
}


/* Стили для секции новостей */
.site-news {
    padding: var(--section-py) 0;
    background-color: var(--c-surface-soft);
}

/* Грид для главной страницы - всегда 3 колонки */
.site-news__grid {
    display: grid;
    gap: var(--block-gap);
}

@media (max-width: 991px) {
    .site-news__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .site-news__grid {
        grid-template-columns: 1fr;
    }
}

/* Базовая структура сетки */
.site-news__grid {
    display: grid;
    gap: var(--block-gap);
}

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

.site-news__grid--3-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.site-news__grid--4-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.site-news__grid--5-columns {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* News archive (news.php, category.php) — markup uses .content-with-title__wrapper
   gap directly, no .site-news--all-news wrapper. Scope by .news-content so the
   rules don't bleed into the homepage .site-news slider. */
.news-content .site-news__grid {
    grid-template-columns: repeat(var(--news-cols, 3), minmax(0, 1fr)); /* columns from News settings */
}

/* Адаптивность для страницы всех новостей */
@media (max-width: 991px) {
    .news-content .site-news__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .news-content .site-news__grid {
        grid-template-columns: 1fr;
    }
}

/* Карточка новости */
.site-news__item {
    display: flex;
    flex-direction: column;
    background-color: var(--c-surface);
    transition: all 0.3s ease;
    overflow: hidden;
}

.news-content .site-news__item {
    background-color: var(--c-surface-soft);
}

/* News-feed block: its <section class="site-news"> is itself surface-soft, so
   keep the cards on the plain surface to stand out (the archive page is the
   opposite — surface-soft cards on a plain-surface page, rule above). */
.site-news .news-content .site-news__item {
    background-color: var(--c-surface);
}

/* Контейнер для изображения */
.site-news__image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* Строго квадратное соотношение */
    overflow: hidden;
    background-color: var(--c-surface-soft);
}

.site-news__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.site-news__grid--2-columns .site-news__image-wrapper,
.site-news__grid--3-columns .site-news__image-wrapper,
.site-news__grid--4-columns .site-news__image-wrapper,
.site-news__grid--5-columns .site-news__image-wrapper {
    padding-bottom: 100%;
    aspect-ratio: 1;
}

.site-news__image-wrapper:hover .site-news__image {
    transform: scale(1.05);
}

/* Same zoom for the no-image placeholder, so cards without a photo react
   to hover like the rest. */
.site-news__image-wrapper:hover .image-placeholder__icon {
    transform: scale(1.05);
}

/* Контент карточки */
.site-news__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: var(--card-py) var(--card-px);
}

/* Заголовок */
.site-news__title {
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: var(--fs-md); /* card title */
    line-height: var(--lh-heading);
    font-weight: 600;
    margin: 0;
}

.site-news__link {
    color: var(--c-brand);
    text-decoration: none;
    transition: color 0.3s ease;
    font-family: Montserrat, sans-serif;
    font-size: var(--fs-md); /* card title */
    font-weight: 600;
    line-height: var(--lh-heading);
}

.site-news__link:hover {
    color: var(--c-brand-dark);
}

/* Мета-информация */
.site-news__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;

    color: var(--c-text-muted);
    font-family: Montserrat, sans-serif;
    font-size: var(--fs-sm); /* meta role */
    font-weight: 500;
    line-height: var(--lh-snug);
}

.site-news__date, .site-news__category {
    display: flex;
    align-items: center;
    gap: 6px;
}

.site-news__date img, .site-news__category img {
    width: 16px;
    height: 16px;
}

.site-news__category {
    color: var(--c-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-news__category:hover {
    color: var(--c-brand-dark);
}

/* Текст новости */
.site-news__summary {
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: 'Avenir Next Cyr', sans-serif;
    font-size: var(--fs-sm); /* compact card excerpt */
    font-weight: 400;
    line-height: 1.6;
    color: var(--c-text-muted);
    text-align: justify;
    margin: 0;
}

/* Адаптивность */
@media (max-width: 1400px) {
    .site-news__grid--5-columns {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1200px) {
    .site-news__grid--4-columns,
    .site-news__grid--5-columns {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .site-news__grid--3-columns,
    .site-news__grid--4-columns,
    .site-news__grid--5-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .site-news__grid {
        grid-template-columns: 1fr !important;
    }
}

/* Кнопка "Смотреть все" */
.site-news__footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    text-align: center;
}

/* Unified vertical spacing — one section rhythm everywhere. Both tokens
   resolve to the same value; --section-gy is kept as an alias so existing
   selectors that target sub-row spacing (title↔content) stay readable.
   Homepage scopes a larger value locally (more air for the landing-style
   colored bands) — see the .homepage override below. */
:root {
    --section-py: 2rem;
    --section-gy: var(--section-py);
    --block-gap: 20px;    /* grid/flex gap between cards/tiles/items */
    --card-py: 28px;      /* card vertical padding */
    --card-px: 24px;      /* card horizontal padding */

    /* Typography — host font for the theme; core overrides (e.g. ASW) read
       this token so they stay portable when the theme font changes. */
    --font-base:      "Avenir Next Cyr", sans-serif;

    /* Brand + text. Brand stays #325390 — the in-use site blue, visually
       ~indistinguishable from the logo's #345491. --c-text-muted kept at a
       readable grey (the logo's blue-grey #748aaf is only ~3.5:1 on white,
       below AA for body copy — see --c-grey-dark below). */
    --c-brand:        #325390;
    --c-brand-dark:   #092655;
    --c-text:         #474747;
    --c-text-muted:   #6c757d;

    /* Logo greys — the blue-grey neutral family from the logo, used for
       borders/dividers/decorative fills so the UI reads as one palette.
       Keep --c-grey-dark for decorative/large use, NOT for body text. */
    --c-grey-light:   #d8e0e5;
    --c-grey:         #b3c2cd;
    --c-grey-dark:    #748aaf;

    /* Surfaces — logo white default; soft cool band for alternating sections. */
    --c-surface:        #fdfdfd;     /* logo white */
    --c-surface-soft:   #f7f7f9;     /* alternate band (cool neutral) */
    /* Brand-derived accent tint — color-mix keeps it in the same hue
       family as --c-brand instead of the previous sky-blue (#e6f0fb)
       which read as a different palette. */
    --c-surface-tint:   color-mix(in srgb, var(--c-brand) 10%, white);

    /* Borders / dividers — logo light grey (was generic #e5e7eb). */
    --c-border:         var(--c-grey-light);

    /* Functional / status — kept for form feedback */
    --c-danger:         #dc3545;
    --c-success-bg:     #d4edda;
    --c-success-text:   #155724;

    /* Scrollbar palette — softer than the raw brand colour so the bar
       reads as a calm theme accent rather than a focal element. The
       hover state lifts to full brand for a clear interaction cue. */
    --c-scrollbar-track:       var(--c-surface-soft);
    --c-scrollbar-thumb:       color-mix(in srgb, var(--c-brand) 35%, white);
    --c-scrollbar-thumb-hover: var(--c-brand);
}
@media (max-width: 767px) {
    :root {
        --section-py: 1rem;
        --block-gap: 16px;
        --card-py: 20px;
        --card-px: 16px;
    }
}

.homepage {
    --section-py: 3rem;
    /* Header offset lives on the container (like .main-content), not on the
       hero block, so content clears the fixed header regardless of which
       block comes first — or whether the hero is present at all. */
    padding-top: var(--header-total-height);
}
@media (max-width: 767px) {
    .homepage { --section-py: 1.5rem; }
}

/* Every homepage section carries one uniform vertical band of padding, so
   inter-section spacing is identical no matter how blocks are ordered. Colored
   bands fill this padding edge-to-edge (the colour change is the divider);
   transparent blocks get the same breathing room. Full-bleed full-viewport
   blocks (the hero, the final quote) are exempt — they fill the viewport edge
   to edge and must not carry inner padding. */
.homepage > *:not(.homepage-main):not(.final-quote) {
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
}

/* Universal vertical rhythm for all templates that use .main-content-wrapper
   (every template except homepage). The wrapper owns top/bottom outer
   padding and the gap between its direct children — breadcrumbs, the
   content block, pagination, etc. — so they visually belong to one
   content area instead of floating as separate bands. Token-driven, so
   spacing scales correctly on mobile via the --section-py override. */
.main-content-wrapper {
    padding: var(--section-py) 0;
    gap: var(--section-py);
}
.main-content-wrapper > * {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* basic-with-custom-blocks: blocks themselves are spacing-agnostic — gap on
   the wrapper spaces siblings uniformly regardless of which/how many blocks
   render. Reset zeros each block's own outer padding so existing per-block
   section spacing doesn't stack with the wrapper gap. */
.page-content-content {
    display: flex;
    flex-direction: column;
    gap: var(--section-py);
}
.page-content-content > * {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Tighten typography rhythm inside the_content() output.
   Original .page-content rules were tuned for long-form articles;
   on simpler pages the resulting whitespace is too loose. */
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
    margin: 0.6em 0 0.3em;
}
.page-content p {
    margin: 0.4em 0;
}
.page-content ul,
.page-content ol {
    margin: 0 0 0.75em;
}
.page-content > *:first-child { margin-top: 0; }
.page-content > *:last-child { margin-bottom: 0; }

/* Leading image: drop top margin even when wrapped by classic-editor <p>
   or by the Sienna accessibility plugin (data-asw-* wrappers). :has()
   targets a first-child wrapper whose only meaningful content is an img. */
.page-content > img:first-child,
.page-content > figure:first-child img,
.page-content > *:first-child:has(> img:only-child) img {
    margin-top: 0;
}

/* Visual spacer rendered by the the_content filter when editors leave
   empty paragraphs as separators (the typical TinyMCE/Classic side-
   effect of pressing Enter twice). The PHP filter folds runs of empty
   <p> into a single semantic spacer with a size class — 1 / 2 / 3,
   capped — so an accidentally long run can't blow out the layout. */
.content-spacer {
    display: block;
    width: 100%;
}
.content-spacer--1 { height: 1em; }
.content-spacer--2 { height: 2em; }
.content-spacer--3 { height: 3em; }

/* Homepage keeps the legacy block-owns-spacing model: colored bg blocks
   (.icon-cards, .feedback-section, .site-news) carry their
   own padding to form full bands. Transparent blocks below need explicit
   padding too, scoped to .homepage so it doesn't apply on basic-with-
   custom-blocks pages where the wrapper handles rhythm via gap. */
.homepage .rich-text-content {
    padding: var(--section-py) 0;
}

.page404-wrapper { padding: 6rem 0; }
@media (max-width: 991px) { .page404-wrapper { padding: 4rem 0; } }
@media (max-width: 575px) { .page404-wrapper { padding: 3rem 0; } }

/* Constrain icon dimensions regardless of SVG natural size */
.header-nav__social ul li img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}
.header-nav__contacts-item img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

/* ==========================================================================
   Specialties / programs block (.specialties-cards)
   Card grid like .icon-cards, but content + the item list are LEFT-aligned
   (a centred bulleted list reads badly). Square corners, no hover-lift.
   ========================================================================== */
.specialties-cards__grid {
    display: grid;
    gap: var(--block-gap);
}

.specialties-cards__grid--2-columns,
.specialties-cards__grid--3-columns,
.specialties-cards__grid--4-columns {
    grid-template-columns: repeat(1, 1fr);
}

.specialties-cards__card {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    background-color: var(--c-surface-tint);
    padding: var(--card-py) var(--card-px);
}

/* Transparent variant — drop the tint box so cards sit flush in the grid. */
.specialties-cards--transparent .specialties-cards__card {
    background-color: transparent;
    padding: 0;
}

.specialties-cards__icon img {
    margin: 0;
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.specialties-cards__title {
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: var(--fs-lg); /* card/item title role */
    line-height: var(--lh-heading);
    color: var(--c-brand);
    text-align: left;
}

.specialties-cards__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.specialties-cards__list li {
    position: relative;
    padding-left: 18px;
    font-family: Avenir Next Cyr, sans-serif;
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
    color: var(--c-text);
    text-align: left;
}

/* square brand-blue bullet — matches the site's sharp-edged idiom */
.specialties-cards__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    background-color: var(--c-brand);
}

.specialties-cards__list a {
    color: var(--c-brand);
    text-decoration: none;
    border-bottom: 1px solid rgba(50, 83, 144, 0.2);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.specialties-cards__list a:hover {
    color: var(--c-brand-dark);
    border-bottom-color: var(--c-brand-dark);
}

@media (min-width: 640px) {
    .specialties-cards__grid--2-columns,
    .specialties-cards__grid--3-columns,
    .specialties-cards__grid--4-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .specialties-cards__grid--2-columns {
        grid-template-columns: repeat(2, 1fr);
    }

    .specialties-cards__grid--3-columns {
        grid-template-columns: repeat(3, 1fr);
    }

    .specialties-cards__grid--4-columns {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================================================
   Gallery component (.gallery-grid) — shared by the gallery block and the
   news-single gallery. Image grid bound to lightGallery (selector 'a' in
   main.js). Bare .gallery-grid auto-fills (news); the block adds --N-columns.
   ========================================================================== */
.gallery-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.gallery-grid__item {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    cursor: zoom-in;
}

.gallery-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-grid__item:hover img {
    transform: scale(1.04);
}

@media (min-width: 640px) {
    .gallery-grid--2-columns { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid--3-columns,
    .gallery-grid--4-columns,
    .gallery-grid--5-columns { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .gallery-grid--2-columns { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid--3-columns { grid-template-columns: repeat(3, 1fr); }
    .gallery-grid--4-columns { grid-template-columns: repeat(4, 1fr); }
    .gallery-grid--5-columns { grid-template-columns: repeat(5, 1fr); }
}

/* ==========================================================================
   Video block (.video-grid) — grid of self-hosted videos (Plyr themes each
   <video> via the site-wide init).
   ========================================================================== */
.video-grid {
    display: grid;
    gap: var(--block-gap);
    grid-template-columns: repeat(1, 1fr);
}

.video-grid__player {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.video-grid__caption {
    margin: 0.5rem 0 0;
    font-family: Avenir Next Cyr, sans-serif;
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--c-text);
    text-align: center;
}

@media (min-width: 768px) {
    .video-grid--2-columns { grid-template-columns: repeat(2, 1fr); }
    .video-grid--3-columns { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .video-grid--2-columns { grid-template-columns: repeat(2, 1fr); }
    .video-grid--3-columns { grid-template-columns: repeat(3, 1fr); }
}

/* ── News list display variants ───────────────────────────────────────────
   Selectable in News → Налаштування (news_card_layout). All five are pure CSS
   modifiers on the same .site-news card markup, scoped to .news-content so the
   homepage feed is untouched. Square corners, no card-lift (site idiom). Placed
   after the base .site-news rules so same-specificity overrides win by source
   order; per-variant column counts repeat inside breakpoints to stay responsive. */

/* v1 — Vertical (default): base is a column card with a square photo; the ratio
   modifier switches the photo to 16:10 landscape. */
.news-content .site-news__grid--ratio-landscape .site-news__image-wrapper {
    padding-bottom: 62.5%;
}

/* Clamp the vertical-card title to 3 lines so a long headline can't stretch
   the card (the title was previously unclamped in this layout). */
.news-content .site-news__grid--v1 .site-news__link {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Excerpt capped at 7 lines in the vertical layout. */
.news-content .site-news__grid--v1 .site-news__summary {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* v2 — Horizontal: photo left, content right; full-width feed rows. Fixed
   row height + clamped title/excerpt so every card is the same height. */
.news-content .site-news__grid--v2 { grid-template-columns: 1fr; }
.news-content .site-news__grid--v2 .site-news__item {
    flex-direction: row; align-items: stretch;
}
.news-content .site-news__grid--v2 .site-news__image-wrapper {
    /* 16:10 box — same ratio as the vertical "landscape" card, so one 16:10
       photo fits BOTH modes uncropped. Height follows from the width. */
    flex: 0 0 40%; width: 40%; padding-bottom: 0; aspect-ratio: 16 / 10;
}
.news-content .site-news__grid--v2 .site-news__content {
    flex: 1; justify-content: center; overflow: hidden;
}
.news-content .site-news__grid--v2 .site-news__link {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-content .site-news__grid--v2 .site-news__summary {
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}

/* v3 — Overlay: content over the photo with a bottom gradient, no excerpt. */
.news-content .site-news__grid--v3 { grid-template-columns: repeat(var(--news-cols, 3), minmax(0, 1fr)); }
.news-content .site-news__grid--v3 .site-news__item { position: relative; }
.news-content .site-news__grid--v3 .site-news__image-wrapper { padding-bottom: 128%; }
/* Overlay layout: the content sits over the photo and intercepts hover, so the
   image-wrapper:hover zoom never fires — zoom on whole-card hover instead (the
   whole tile is the clickable target), like the staff portrait card. */
.news-content .site-news__grid--v3 .site-news__item:hover .site-news__image,
.news-content .site-news__grid--v3 .site-news__item:hover .image-placeholder__icon {
    transform: scale(1.05);
}
.news-content .site-news__grid--v3 .site-news__content {
    position: absolute; inset: 0; justify-content: flex-end;
    background: linear-gradient(to top, rgba(20, 28, 48, .92) 0%, rgba(20, 28, 48, .45) 45%, transparent 78%);
}
.news-content .site-news__grid--v3 .site-news__link,
.news-content .site-news__grid--v3 .site-news__meta,
.news-content .site-news__grid--v3 .site-news__date,
.news-content .site-news__grid--v3 .site-news__category { color: #fff; }
.news-content .site-news__grid--v3 .site-news__meta img { display: none; }
.news-content .site-news__grid--v3 .site-news__summary { display: none; }
/* Clamp the title so a long headline can't grow past the card and get clipped
   from the top — it caps at 3 lines with an ellipsis instead. */
.news-content .site-news__grid--v3 .site-news__link {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Overlay tile: the whole card is clickable — stretch the title link over it.
   The category stays an independent link via z-index above the overlay. */
.news-content .site-news__grid--v3 .site-news__link::after {
    content: "";
    position: absolute;
    inset: 0;
}
.news-content .site-news__grid--v3 .site-news__category {
    position: relative;
    z-index: 1;
}
/* On the dark overlay a colour shift barely reads — underline the category
   on hover instead (it stays white). */
.news-content .site-news__grid--v3 .site-news__category:hover {
    text-decoration: underline;
}

/* v4 — Compact: thumbnail + title + date, no excerpt; two per row. The thumb
   stretches to the row height (align-items:stretch) so it fills without the
   top/bottom gaps a fixed-square thumb leaves when the title wraps. */
.news-content .site-news__grid--v4 { grid-template-columns: repeat(var(--news-cols, 2), minmax(0, 1fr)); }
.news-content .site-news__grid--v4 .site-news__item { flex-direction: row; align-items: stretch; }
.news-content .site-news__grid--v4 .site-news__image-wrapper {
    flex: 0 0 120px; width: 120px; padding-bottom: 0;
}
.news-content .site-news__grid--v4 .site-news__content {
    padding: 12px 16px; gap: 0.35rem; justify-content: center;
}
/* Compact card is narrow — tighten the meta so a wrapped category sits right
   under the date instead of dropping with the full 16px row gap. */
.news-content .site-news__grid--v4 .site-news__meta {
    gap: 4px 12px;
}
/* Compact rows: slightly smaller title, clamped to 2 lines. Clamp lives on the
   link so the ellipsis takes the title colour, not the wrapper h3's. */
.news-content .site-news__grid--v4 .site-news__link {
    font-size: var(--fs-base); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-content .site-news__grid--v4 .site-news__summary { display: none; }

/* v5 — Text list: no photo, brand left-accent rows. */
.news-content .site-news__grid--v5 { grid-template-columns: 1fr; gap: 0; }
.news-content .site-news__grid--v5 .site-news__item {
    background: transparent; border-left: 3px solid var(--c-brand);
}
.news-content .site-news__grid--v5 .site-news__image-wrapper { display: none; }
/* Bottom divider lives on the content (which starts after the brand left
   border) so it doesn't cross/overlap that border at the corner. */
.news-content .site-news__grid--v5 .site-news__content { padding: 16px 18px; border-bottom: 1px solid rgba(0, 0, 0, .1); }
/* Text list has no photo — the "featured" badge would sit over the text, so
   pull it into the flow above the title (aligned with the content's left edge). */
.news-content .site-news__grid--v5 .site-news__featured-badge {
    position: static;
    align-self: flex-start;
    margin: 16px 0 -8px 18px;
}
/* The full brand ring suits the card layouts but sticks out on a text row —
   for v5 mark the featured row with a soft brand tint instead (the badge + the
   brand left border already flag it). */
.news-content .site-news__grid--v5 .site-news__item--featured {
    box-shadow: none;
    background-color: var(--c-surface-tint);
}
/* Excerpt clamped to 4 lines (clean line cut, not the raw char-truncate). */
.news-content .site-news__grid--v5 .site-news__summary {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Per-variant responsive column counts (override the base .news-content grid). */
@media (max-width: 991px) {
    .news-content .site-news__grid--v3,
    .news-content .site-news__grid--v4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .news-content .site-news__grid--v2 .site-news__item,
    .news-content .site-news__grid--v4 .site-news__item { flex-direction: column; align-items: stretch; }
    .news-content .site-news__grid--v2 .site-news__item { height: auto; }
    .news-content .site-news__grid--v2 .site-news__image-wrapper {
        /* Keep 16:10 on mobile too (aspect-ratio from the desktop rule carries;
           no padding-bottom override). */
        width: 100%; flex-basis: auto; min-height: 0;
    }
    .news-content .site-news__grid--v4 .site-news__image-wrapper {
        width: 100%; flex-basis: auto; height: auto; padding-bottom: 56.25%;
    }
}