/* Esiep2 theme custom styles */

* {
    box-sizing: border-box;
}

/* WP core injects forced margin-block-start/end on flow-layout children
   via :root :where(.is-layout-flow) > * (block-gap) and > :first-child/
   :last-child — override all of it so our own spacing (margins/padding set
   per component) isn't stomped. */
:root :where(.is-layout-flow) > *,
:root :where(.is-layout-flow) > :first-child,
:root :where(.is-layout-flow) > :last-child {
    margin-block-start: revert !important;
    margin-block-end: revert !important;
}
/* Same story one level up: .wp-site-blocks (header/content/footer) isn't
   itself .is-layout-flow, so it dodges the override above and keeps its
   own separate 24px margin-block-start on every child but the first. On
   every page that leaves a visible white strip between the last section
   and the footer template part (the footer's own background starts 24px
   lower than the section above it ends). Reset it the same way. */
:where(.wp-site-blocks) > * {
    margin-block-start: revert !important;
    margin-block-end: revert !important;
}
html {
    font-family: var(--font-primary, sans-serif);
}
body {
    margin: 0;
}

/* Header — a rounded white bar, fixed on top of the hero and pinned to the
   viewport so it stays visible while the page scrolls (the hero's blue is
   the only background here; this wrapper takes up no space of its own). */
.es-top {
    position: relative;
}
#es-header {
    position: fixed;
    top: 20px;
    left: 24px;
    right: 24px;
    z-index: 20;
    background-color: var(--bg-white);
    border-radius: 9999px;
}
#es-header .wp-element-button{
    margin: 0;
}
@media (min-width: 768px) {
    #es-header {
        left: 32px;
        right: 32px;
    }
}
/* Plain justify-content:space-between (via the "flex items-center
   justify-between" utility classes already on the markup) — no per-child
   flex-grow overrides, so it stays easy to reach in and customize. */
.es-header__inner {
    /* Matches .es-footer__panel's padding (8px) so the two floating
       chrome elements — header pill and footer card — share the same
       inset instead of each picking its own. */
    padding: 8px;
}

.es-header-logo {
    display: flex;
    align-items: center;
}
/* Same (0,2,0)-specificity issue as .es-header-nav__list above: figure is
   .es-header__inner's first child, so the global revert rule matches it
   via :first-child too and wins over a plain margin-top/bottom:0, handing
   <figure> its UA-default ~1em block margin (figures get one natively). */
:root .es-header-logo {
    margin-block: 0 !important;
}
.es-header-logo img {
    /* Core's .wp-block-image img sets max-width:100%, which here resolves
       against an indefinite flex-item width (figure -> anchor -> img, none
       of them sized independently of the others) and collapses to 0 —
       overriding it is what actually makes the logo render at all. */
    max-width: none;
    height: 52px;
    width: 52px;
    flex-shrink: 0;
    display: block;
}

.es-header-nav {
    flex: 1 1 auto;
    display: flex;
    padding-left: 16px;
    padding-right: 16px;
}
.es-header-nav__list {
    display: flex;
    justify-content: space-between;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 18px;
    flex-wrap: nowrap;
}
/* This <ul> is nav's only child, so the global revert rule up top matches
   it via its :first-child/:last-child variants too — those carry (0,2,0)
   specificity (:root + the pseudo-class), which beats a plain one-class
   !important override. :root here matches that specificity so ours wins
   and the <ul> doesn't fall back to the browser's ~1em default margin,
   which was the real source of the header's extra height, not padding. */
:root .es-header-nav__list {
    margin-block: 0 !important;
}
.es-header-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 2px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-dark);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1.5px solid transparent;
}
.es-header-nav__link:hover {
    color: var(--text-blue);
}
.es-header-nav__link.is-active {
    color: var(--text-blue);
    border-bottom-color: var(--text-blue);
}
.has-dropdown .es-header-nav__link::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--color-border-muted);
    border-bottom: 1.5px solid var(--color-border-muted);
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform 0.2s ease;
}
.has-dropdown:hover .es-header-nav__link::after,
.has-dropdown:focus-within .es-header-nav__link::after {
    transform: rotate(225deg);
    margin-top: 3px;
}

/* Dropdown — hover- and keyboard-accessible (:focus-within covers Tabbing
   into a link without any JS): hidden by default via opacity+visibility
   (not display:none) so the transform/opacity transition actually runs. */
.es-header-nav__item {
    position: relative;
}
.es-header-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 4px);
    z-index: 30;
    min-width: 240px;
    margin: 14px 0 0;
    padding: 10px;
    list-style: none;
    background-color: var(--bg-white);
    border-radius: 20px;
    box-shadow: var(--shadow-dropdown);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
/* Small pointer triangle back to the parent link, matching the dropdown's
   own rounded-card fill/shadow so it reads as one continuous shape. */
.es-header-nav__dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    background-color: var(--bg-white);
    border-radius: 3px 0 0 0;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: -2px -2px 4px rgba(26, 26, 26, 0.03);
}
.has-dropdown:hover .es-header-nav__dropdown,
.has-dropdown:focus-within .es-header-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.es-header-nav__dropdown-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 14px;
    color: var(--text-dark);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}
.es-header-nav__dropdown-link .es-icon-tile {
    transition: transform 0.15s ease;
}
.es-header-nav__dropdown-link:hover,
.es-header-nav__dropdown-link:focus-visible {
    background-color: var(--bg-gray-light);
}
.es-header-nav__dropdown-link:hover .es-icon-tile,
.es-header-nav__dropdown-link:focus-visible .es-icon-tile {
    transform: scale(1.08);
}
.es-header-nav__dropdown-link.is-active {
    background-color: var(--bg-blue-light);
}
.es-header-nav__dropdown-link.is-active .es-header-nav__dropdown-text {
    color: var(--text-blue);
}

.es-header__actions {
    flex-shrink: 0;
    gap: 12px;
}

/* Hero — margin-top:0 overrides the 24px auto-gap WordPress puts between
   top-level template blocks (.wp-site-blocks > *), which otherwise left a
   blank strip above the hero since the header above it is absolutely
   positioned and takes up no actual space of its own. */
.es-hero {
    background-color: var(--bg-blue);
    margin-top: 0;
}
.es-hero__inner {
    align-items: center;
    padding-top: 120px;
    padding-bottom: 56px;
    gap: 40px;
    flex-direction: column;
}
@media (min-width: 1024px) {
    .es-hero__inner {
        flex-direction: row;
    }
}
.es-hero__content {
    max-height: 50%;
    flex: 0 0 100%;
    max-width: 100%;
}
.es-hero__visual {
    display: flex;
    justify-content: center;
    flex: 0 0 100%;
    max-width: 100%;
    min-height: 380px;
}
@media (min-width: 1024px) {
    .es-hero__content {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .es-hero__visual {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.es-hero__title {
    margin: 0 0 16px;
    color: var(--text-white);
    font-size: 42px;
    font-weight: 500;
    line-height: 0.9;
}
.es-hero__subtitle {
    margin: 0 0 28px;
    color: var(--text-white);
    opacity: 0.9;
    font-size: 16px;
    line-height: 0.9;
    max-width: 460px;
}

.es-feature-cards {
    gap: 13px;
    margin-bottom: 28px;
    flex-wrap: wrap;
    padding: 16px 0;
}
.es-feature-card {
    flex: 1 1 140px;
    background-color: var(--bg-surface-blue-soft);
    border-radius: 20px;
    padding: 32px 20px 30px;
    text-align: center;
}
.es-feature-card__badge {
    display: inline-block;
    margin: 0 0 17px;
    padding: 11px 26px;
    border-radius: 9999px;
    color: var(--text-white);
    font-size: 18px;
    font-weight: 700;
}
.es-feature-card__badge--orange {
    background-color: var(--bg-orange);
}
.es-feature-card__badge--red {
    background-color: var(--bg-red);
}
.es-feature-card__badge--teal {
    background-color: var(--bg-teal);
}
.es-feature-card__text {
    margin: 0;
    color: var(--text-dark);
    font-size: 16px;
    line-height: 0.9;
}

/* Buttons are sized to fit their content, not stretched to the column's
   full width — .es-hero__ctas shrink-wraps to the wider of the two, and
   align-items:stretch (the flex column default) then makes the shorter
   button match it, so both end up the same width with centered text. */
.es-hero__ctas {
    width: fit-content;
    gap: 12px;
    padding-top: 16px;
}
.es-hero-cta .wp-block-button__link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 17px 32px;
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 600;
    border: 1.5px solid transparent;
    white-space: nowrap;
}
.es-hero-cta.is-style-fill .wp-block-button__link {
    background-color: var(--bg-white);
    color: var(--text-dark);
}
.es-hero-cta--outline .wp-block-button__link {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.85);
    color: var(--text-white);
}

/* Page hero — shared component for any inner page needing a blue hero with
   a heading/lead, a row of numbered step cards and two CTAs beside a
   cutout photo (first used by patterns/admission-hero.php). Deliberately
   generic (not scoped to one page) and reuses .es-container/.es-hero__ctas
   /.es-hero-cta as-is, so every hero built on top of it — on this page or
   a future one — stays visually in sync automatically instead of forking
   its own copy of the same rules. */
/* Background comes from the shared .es-hero-gradient (ui.css, added in
   markup); this rule only supplies the fixed-header gap fix. */
.es-page-hero {
    margin-top: 0;
}
.es-page-hero__inner {
    position: relative;
    padding-top: 140px;
    padding-bottom: 64px;
    gap: 40px;
    flex-direction: column;
}
@media (min-width: 1024px) {
    .es-page-hero__inner {
        flex-direction: row;
        align-items: center;
    }
}
.es-page-hero__content {
    flex: 1 1 auto;
            position: relative;
        z-index: 1;
}
@media (min-width: 1024px) {
    .es-page-hero__content {
        flex: 0 0 56%;
        max-width: 56%;
    }
}
.es-page-hero__title {
    margin: 0 0 16px;
    max-width: 620px;
    color: var(--text-white);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.15;
}
@media (min-width: 768px) {
    .es-page-hero__title {
        font-size: 48px;
    }
}
.es-page-hero__lead {
    margin: 0 0 28px;
    max-width: 480px;
    color: var(--text-white);
    opacity: 0.9;
    font-size: 16px;
    line-height: 1.5;
}
@media (min-width: 768px) {
    .es-page-hero__lead {
        font-size: 20px;
    }
}
/* Numbered step cards — shared component (badge top, text bottom,
   colored circle number) first used by the page hero's 4-step row and
   reused as-is by patterns/support-approach.php's 6-card grid. Deliberately
   generic (not scoped to "hero") so any pattern can drop in a
   .es-step-cards list without pulling in hero-specific CSS. */
.es-step-cards {
    gap: 20px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
/* justify-content:space-between (not a gap) is what pins each card's text
   to its bottom edge regardless of how many lines it wraps to — matches
   the source design, where every card's text ends flush with the same
   baseline even though some cards run to half again as many lines as
   others in the same row. */
.es-step-card {
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    min-height: 220px;
    background-color: var(--bg-surface-blue);
    border-radius: 20px;
    padding: 24px;
}
.es-step-card__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--text-white);
    font-size: 20px;
    font-weight: 700;
}
.es-step-card__badge--red { background-color: var(--bg-red); }
.es-step-card__badge--purple { background-color: var(--bg-purple); }
.es-step-card__badge--green { background-color: var(--bg-green); }
.es-step-card__badge--orange { background-color: var(--bg-orange); }
.es-step-card__badge--teal { background-color: var(--bg-teal); }
.es-step-card__text {
    margin: 0;
    color: var(--text-dark);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
}
.es-page-hero__visual {
    display: flex;
    justify-content: center;
    flex: 0 0 100%;
    max-width: 100%;
}
@media (min-width: 1024px) {
    .es-page-hero__visual {
        flex: 0 0 44%;
        max-width: 44%;
    }
}
.es-page-hero__photo {
    display: block;
    height: auto;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
}

/* Support approach — "Мы не продаём страны..." section, right under the
   support-includes accordion on the same page. Same blue-section-with-
   bleeding-circle idea as the page hero, but its own circle (different
   position/size in the source) rather than forcing a shared one — the two
   only coincidentally look similar. The 6 point cards reuse .es-step-card
   as-is; --grid just tightens the gap to match this section's source
   spacing (12px vs. the hero row's 20px). */
/* Background comes from the shared .es-hero-gradient (ui.css, added in
   markup) — nothing left to declare on .es-support-approach itself. */
.es-support-approach__inner {
    position: relative;
    padding-top: 64px;
    padding-bottom: 64px;
    gap: 40px;
    flex-direction: column;
}
@media (min-width: 1024px) {
    .es-support-approach__inner {
        flex-direction: row;
        align-items: center;
    }
}
.es-support-approach__content {
    flex: 1 1 auto;
}
@media (min-width: 1024px) {
    .es-support-approach__content {
        flex: 0 0 42%;
        max-width: 42%;
    }
}
.es-support-approach__title {
    margin: 0 0 32px;
    max-width: 560px;
    color: var(--text-white);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
}
@media (min-width: 768px) {
    .es-support-approach__title {
        font-size: 36px;
    }
}
/* A true grid (not flex-wrap) — with 6 cards, flex-wrap leaves a lone
   leftover item on its own row stretching to the full container width
   instead of lining up as a third column. */
.es-step-cards--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 480px) {
    .es-step-cards--grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.es-support-approach__visual {
    position: relative;
    display: flex;
    justify-content: center;
    flex: 0 0 100%;
    max-width: 100%;
}
@media (min-width: 1024px) {
    .es-support-approach__visual {
        flex: 0 0 52%;
        max-width: 52%;
    }
}
.es-support-approach__photo {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
}
.es-support-approach__video {
    position: absolute;
    right: 4%;
    bottom: 6%;
    display: block;
    width: 48%;
    max-width: 320px;
    aspect-ratio: 16 / 9;
    background-color: var(--bg-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}
.es-support-approach__video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Hero orbit diagram — student in the middle, support roles on an inner
   ring (plain labels, not links — they're relationships, not pages),
   exam/program badges on a middle ring (real links) and study regions on
   the outermost ring (plain labels again, just markers). Every position
   below is a left/top percentage measured directly off the source design
   PDF's own pixel coordinates (an 820x780 crop of its 1920x946 canvas),
   which is why the container is locked to that aspect ratio — it keeps
   the percentages circular instead of drifting into an ellipse at other
   widths. The rings/spokes are one inline SVG (viewBox matches those same
   820x780 coordinates 1:1); node dots, pill links and labels are real
   HTML on top so they stay hoverable/editable instead of being baked
   into the graphic. Avatar is a placeholder icon until a real student
   photo is supplied. */
.es-orbit {
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 820 / 780;
}
.es-orbit__rings {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.es-orbit__center {
    position: absolute;
    left: 47.56%;
    top: 48.08%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2;
}
.es-orbit__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background-color: var(--bg-lavender-light);
    border: 3px solid rgba(255, 255, 255, 0.85);
    color: var(--text-blue);
}
.es-orbit__avatar svg {
    width: 34px;
    height: 34px;
}
.es-orbit__center-label {
    margin: 0;
    color: var(--text-white);
    font-size: 16px;
    font-weight: 700;
}

.es-orbit__node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100px;
    text-align: center;
    color: var(--text-white);
    font-size: 13px;
    font-weight: 700;
    line-height: 0.9;
}
.es-orbit__node-dot {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    border: 3px solid rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
}
.es-orbit__node-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--bg-white);
    transform: translate(-50%, -50%);
}
.es-orbit__node--parents { left: 47.56%; top: 26.15%; }
.es-orbit__node--clubs { left: 26.71%; top: 42.05%; }
.es-orbit__node--teachers { left: 68.41%; top: 42.05%; }
.es-orbit__node--academic { left: 34.76%; top: 67.69%; }
.es-orbit__node--mentors { left: 60.37%; top: 67.69%; }

.es-orbit__pill {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.16);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    color: var(--text-white);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.es-orbit__pill:hover {
    background-color: rgba(255, 255, 255, 0.32);
}
.es-orbit__pill--sat { left: 47.56%; top: 8.72%; }
.es-orbit__pill--admission { left: 30.85%; top: 12.82%; }
.es-orbit__pill--ielts { left: 64.15%; top: 12.82%; }
.es-orbit__pill--toefl { left: 77.44%; top: 24.10%; }
.es-orbit__pill--essay { left: 17.56%; top: 24.10%; }
.es-orbit__pill--duolingo { left: 84.88%; top: 40.13%; }
.es-orbit__pill--semesters { left: 10.24%; top: 40.13%; }
.es-orbit__pill--ent { left: 84.88%; top: 58.08%; }
.es-orbit__pill--summer { left: 10.24%; top: 58.08%; }
.es-orbit__pill--ap { left: 77.44%; top: 74.23%; }
.es-orbit__pill--business { left: 17.56%; top: 74.23%; }
.es-orbit__pill--research { left: 30.85%; top: 85.38%; }
.es-orbit__pill--ibdp { left: 64.15%; top: 85.38%; }
.es-orbit__pill--preap { left: 47.56%; top: 89.49%; }

.es-orbit__region {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.es-orbit__region-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--bg-white);
}
.es-orbit__region--kazakhstan { left: 4.27%; top: 27.82%; }
.es-orbit__region--canada { left: 79.27%; top: 12.18%; }
.es-orbit__region--usa { left: 95%; top: 50.90%; }
.es-orbit__region--east-asia { left: 14.39%; top: 85%; }
.es-orbit__region--north-europe { left: 65.73%; top: 95%; }

/* "Why complex" — kicker + heading, then a 3x2 grid of numbered cards
   (icon cluster + highlighted title) under the hero. Every card hides a
   description paragraph by default; hovering reveals it, swaps in a
   gray-to-blue gradient and scales the card up slightly. */
.es-why__inner {
    padding-top: 64px;
    padding-bottom: 64px;
}
.es-why__title-highlight {
    color: var(--text-blue);
}

.es-why__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
@media (min-width: 640px) {
    .es-why__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .es-why__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Hovered card scales via transform, which is purely visual and doesn't
   participate in grid layout — so it grows "in place" without shifting the
   grid tracks or its neighbors. transform-origin is the card's own center
   so it grows evenly in every direction instead of favoring one edge.
   z-index lifts it above adjacent cards so the scaled-up edges render on
   top instead of being overlapped by them. */
.es-why-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-gray-light);
    border-radius: 24px;
    padding: 18px;
    transform: scale(1);
    transform-origin: center;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.es-why-card:hover {
    z-index: 2;
    background: var(--gradient-diagonal-blue);
    box-shadow: 0 16px 32px rgba(26, 26, 26, 0.12);
    transform: scale(1.06);
}
.es-why-card__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin-bottom: 12px;
    color: var(--text-white);
    font-size: 13px;
    font-weight: 700;
}
.es-why-card__number--blue { background-color: var(--bg-blue); }
.es-why-card__number--purple { background-color: var(--bg-purple); }
.es-why-card__number--orange { background-color: var(--bg-orange); }
.es-why-card__number--green { background-color: var(--bg-green); }
.es-why-card__number--red { background-color: var(--bg-red); }
.es-why-card__number--teal { background-color: var(--bg-teal); }

.es-why-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 300px;
    margin-bottom: 12px;
}
.es-why-card__icon img {
    max-width: 100%;
    height: 100%;
    width: auto;
    object-fit: contain;
    transition: width 0.25s ease;
}
/* Icon overflows its own box on hover by design — the card has no
   overflow:hidden, so it pops out above the neighboring content. */
.es-why-card:hover .es-why-card__icon img {
    width: 400px;
}

/* Deliberately larger than the shared .es-card-title size — an explicit
   one-off for this section. */
.es-why-card__title {
    font-size: 28px;
}
.es-why-card__highlight--blue { color: var(--text-blue); }
.es-why-card__highlight--purple { color: var(--text-purple); }
.es-why-card__highlight--orange { color: var(--text-orange); }
.es-why-card__highlight--green { color: var(--text-green); }
.es-why-card__highlight--red { color: var(--text-red); }
.es-why-card__highlight--teal { color: var(--text-teal); }

/* Description reveal — .desc-wrap is a 1-row grid animating its track
   between 0fr and 1fr (an intrinsic-size-aware alternative to animating
   height:auto, which CSS can't transition directly). .desc-inner needs
   overflow:hidden + min-height:0 because a grid item's content otherwise
   keeps its intrinsic height regardless of how small the 0fr track gets,
   which would defeat the collapse. */
.es-why-card__desc-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}
.es-why-card:hover .es-why-card__desc-wrap {
    grid-template-rows: 1fr;
}
.es-why-card__desc-inner {
    overflow: hidden;
    min-height: 0;
}
.es-why-card__desc {
    display: block;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 0.9;
}

/* AP why — kicker + heading + lead paragraph, a row of 4 numbered cards,
   then a prompt line and CTA, sitting right above the footer. Card sizes/
   gaps and the badge-above-card treatment are taken from the source
   design PDF's own pixel coordinates (1920x780 canvas): 436px cards with
   a 32px gap scale down to the values below at typical container widths. */
.es-ap__inner {
    padding-top: 64px;
    padding-bottom: 64px;
}
.es-ap__lead {
    margin: 0 0 40px;
    max-width: 620px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 0.9;
}

.es-ap__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px 24px;
    margin-bottom: 40px;
}
@media (min-width: 640px) {
    .es-ap__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .es-ap__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* The badge floats centered above its card rather than living inside it,
   so the card itself is just badge + body stacked with a gap. */
.es-ap-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.es-ap-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--text-white);
    font-size: 15px;
    font-weight: 700;
}
.es-ap-card__badge--blue { background-color: var(--bg-blue); }
.es-ap-card__badge--red { background-color: var(--bg-red); }
.es-ap-card__badge--purple { background-color: var(--bg-purple); }
.es-ap-card__badge--teal { background-color: var(--bg-teal); }

.es-ap-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: var(--bg-surface-neutral);
    border-radius: 24px;
    padding: 32px 24px;
    text-align: center;
}
/* Fixed height + width:auto so the 4 source icons (each its own native
   size — some bundle their own rounded-square background, one doesn't)
   render at a consistent visual size instead of their raw pixel size. */
.es-ap-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    margin-bottom: 24px;
}
.es-ap-card__icon img {
    display: block;
    width: auto;
    height: 100%;
}
.es-ap-card__title {
    margin-bottom: 12px;
}
.es-ap-card__desc {
    margin: 0;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 0.9;
}

.es-ap__prompt {
    margin: 0 0 20px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 0.9;
}
.es-ap__ctas {
    width: fit-content;
}

/* Why ecosystem — kicker + heading + lead paragraph, a row of 4 cards
   sitting right above the footer, then a prompt line and CTA. Each card
   only shows its badge + title by default; hovering reveals a divider and
   description using the same 0fr/1fr grid-rows trick, top-anchored scale
   and gray-to-blue gradient as the "Why complex" cards above, so the two
   hover-card treatments on the page stay visually identical. */
.es-eco__inner {
    padding-top: 64px;
    padding-bottom: 64px;
}
.es-eco__lead {
    margin: 0 0 40px;
    max-width: 620px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 0.9;
}

.es-eco__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 40px;
}
@media (min-width: 640px) {
    .es-eco__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .es-eco__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.es-eco-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px;
    background-color: var(--bg-gray-light);
    border-radius: 24px;
    padding: 28px;
    transform: scale(1);
    transform-origin: top center;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
/* Top accent stripe comes from the shared .es-top-accent (ui.css,
   added in markup) — only the 24px radius (vs. its 16px default) is
   still declared here, to match this card's own corners. */
.es-eco-card.es-top-accent::before {
    border-radius: 24px 24px 0 0;
}
.es-eco-card:hover {
    z-index: 2;
    background: var(--gradient-diagonal-blue);
    box-shadow: 0 16px 32px rgba(26, 26, 26, 0.12);
    transform: scale(1.06);
}

.es-eco-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-bottom: 16px;
    color: var(--text-white);
    font-size: 15px;
    font-weight: 700;
}
.es-eco-card__badge--blue { background-color: var(--bg-blue); }
.es-eco-card__badge--purple { background-color: var(--bg-purple); }
.es-eco-card__badge--red { background-color: var(--bg-red); }
.es-eco-card__badge--teal { background-color: var(--bg-teal); }

.es-eco-card__desc-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}
.es-eco-card:hover .es-eco-card__desc-wrap {
    grid-template-rows: 1fr;
}
.es-eco-card__desc-inner {
    overflow: hidden;
    min-height: 0;
}
/* Line itself now comes from the shared .es-divider (ui.css, added in
   markup); this rule only supplies the spacing above it. */
.es-eco-card__divider {
    margin-top: 16px;
}
.es-eco-card__desc {
    display: block;
    margin-top: 16px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 0.9;
}

.es-eco__prompt {
    margin: 0 0 20px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 0.9;
}
.es-eco__ctas {
    width: fit-content;
}
/* Exams — kicker/heading/lead on the left with a CTA on the right (same
   row on desktop, stacked on mobile), then a row of 4 exam logo cards
   sitting right above the footer. Each card is a lavender-light wrapper
   around a white logo tile: SAT/AP are roughly-square opaque art so
   object-fit:cover fills the tile edge to edge; IELTS (a wide wordmark)
   and IB (a transparent circular badge) use object-fit:contain at a
   fixed 68% box instead, which is what leaves visible padding around
   them rather than cropping or stretching. */
.es-exam__inner {
    padding-top: 64px;
    padding-bottom: 64px;
}
.es-exam__header {
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 40px;
    flex-direction: column;
}
@media (min-width: 768px) {
    .es-exam__header {
        flex-direction: row;
    }
}
.es-exam__intro {
    flex: 1 1 auto;
    min-width: 0;
}
.es-exam__lead {
    margin: 0;
    max-width: 560px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 0.9;
}
.es-exam__ctas {
    flex-shrink: 0;
    width: fit-content;
}
.es-exam__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 640px) {
    .es-exam__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .es-exam__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.es-exam-card {
    background-color: var(--bg-lavender-light);
    border-radius: 24px;
    padding: 12px;
}
.es-exam-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--bg-white);
    border-radius: 16px;
    overflow: hidden;
}
.es-exam-card__logo--cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.es-exam-card__logo--contain img {
    width: 68%;
    height: 68%;
    object-fit: contain;
}
.es-exam-card__label {
    margin: 12px 0 0;
    color: var(--text-dark);
    font-size: 24px;
    font-weight: 500;
    text-align: center;
}

/* Programs — same kicker/heading/lead + CTA row as Exams, then a row of 4
   real photo cards, each a link to its matching blog category archive
   (resolved via get_term_link() in programs.php, not hardcoded here). */
.es-program__inner {
    padding-top: 64px;
    padding-bottom: 64px;
}

.es-program__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 640px) {
    .es-program__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .es-program__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.es-program-card {
    display: block;
    background-color: var(--bg-lavender-light);
    border-radius: 24px;
    padding: 12px;
    text-decoration: none;
}
.es-program-card__image {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
}
.es-program-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Zoom-on-hover comes from the shared .es-hover-zoom (ui.css, added in
   markup) — it targets any descendant <img>, so no rule needed here. */
.es-program-card__label {
    margin: 12px 0 0;
    color: var(--text-dark);
    font-size: 16px;
    font-weight: 600;
}

/* Team — right above the footer. Unlike the other kicker+title sections
   (Why complex, AP why, ...) this one is centered, not left-aligned, and
   the grid is 3 truly equal columns: two stacked cards on the left, the
   full-height photo in the middle, two more stacked cards on the right.
   Column proportions (600px cards/photo, 20px gaps) are taken directly
   off the source design's own pixel coordinates. */
.es-team__inner {
    padding-top: 64px;
    padding-bottom: 64px;
}
.es-team__head {
    max-width: 700px;
    margin: 0 auto 40px;
    text-align: center;
}
.es-team__lead {
    margin: 0;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 0.9;
}

.es-team__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
}
@media (min-width: 1024px) {
    .es-team__grid {
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch;
    }
}
.es-team__col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.es-team-card {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    background-color: var(--bg-surface-blue);
    border-radius: 24px;
    padding: 24px;
    text-align: center;
}
.es-team-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-bottom: 20px;
    color: var(--text-white);
    font-size: 15px;
    font-weight: 700;
}
.es-team-card__badge--blue { background-color: var(--bg-blue); }
.es-team-card__badge--purple { background-color: var(--bg-purple); }
.es-team-card__badge--green { background-color: var(--bg-green); }
.es-team-card__badge--red { background-color: var(--bg-red); }

/* Photo keeps the source cutout's own 600x526 ratio, so cover vs contain
   doesn't matter in practice — the gradient only shows if a narrower crop
   ever leaves the sides exposed. */
.es-team__photo {
    min-height: 360px;
    background: var(--gradient-blue-vertical);
    border-radius: 24px;
    overflow: hidden;
}
.es-team__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.es-team__ctas {
    width: 100%;
}
@media (min-width: 1024px) {
    /* Same width as the photo column beneath it, matching the source
       design instead of spanning the full row. */
    .es-team__ctas {
        max-width: calc((100% - 40px) / 3);
        margin: 0 auto;
    }
}

/* Team roster (patterns/our-team.php) — centered head like Team above,
   then a plain static grid pulled live from the esiep2-team plugin's CPT.
   No slider/animation: every member renders once and wraps naturally.
   "Познакомиться с командой" is the way to see the rest of the roster,
   linking out to the full "Академическая команда" page. */
.es-team-roster__inner {
    padding-top: 64px;
    padding-bottom: 64px;
}
.es-team-roster__head {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
.es-team-roster__lead {
    margin: 16px 0 0;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.6;
}
.es-team-roster__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 40px 0;
}
@media (min-width: 640px) {
    .es-team-roster__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1024px) {
    .es-team-roster__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.es-team-roster__card {
    background-color: var(--bg-surface-neutral);
    border-radius: 20px;
    padding: 24px;
}
.es-team-roster__photo {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    background: var(--gradient-blue-vertical);
    border-radius: 20px;
    overflow: hidden;
}
.es-team-roster__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.es-team-roster__name {
    margin: 0 0 8px;
    color: var(--text-dark);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}
.es-team-roster__role {
    margin: 0 0 16px;
    min-height: 63px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}
.es-team-roster__country {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-blue);
    font-size: 14px;
    font-weight: 600;
}
.es-team-roster__country-icon {
    display: flex;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}
.es-team-roster__ctas {
    width: fit-content;
    margin: 0 auto;
}

/* Promo split — a 2x2 checkerboard right above the footer: a centered text
   card (badge/heading/desc/CTA) diagonally opposite a full-bleed photo, for
   two topics (admissions, parents). DOM order is text-1, photo-1, photo-2,
   text-2 (reading order of the 2x2 grid), which is also what a 1-column
   mobile layout falls back to — each text card still lands right next to
   its own photo instead of the two photos or two text cards pairing up. */
.es-promo__inner {
    padding-top: 64px;
    padding-bottom: 64px;
}
.es-promo__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px) {
    .es-promo__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.es-promo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 340px;
    background-color: var(--bg-gray-light);
    border-radius: 24px;
    padding: 40px 32px;
}
.es-promo-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 20px;
    border-radius: 50%;
    color: var(--text-white);
    font-size: 15px;
    font-weight: 700;
}
.es-promo-card--red .es-promo-card__badge { background-color: var(--bg-red); }
.es-promo-card--green .es-promo-card__badge { background-color: var(--bg-green); }
.es-promo-card--purple .es-promo-card__badge { background-color: var(--bg-purple); }
.es-promo-card--orange .es-promo-card__badge { background-color: var(--bg-orange); }
.es-promo-card__title {
    margin: 0 0 12px;
    color: var(--text-dark);
    font-size: 26px;
    font-weight: 500;
    line-height: 0.9;
}
.es-promo-card__title {
 font-size: 42px;
}
.es-promo-card__desc {
    margin: 0 0 28px;
    max-width: 440px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 0.9;
}
.es-promo-card__ctas {
    width: fit-content;
}
.es-promo-photo {
    display: block;
    min-height: 340px;
    border-radius: 24px;
    overflow: hidden;
}
.es-promo-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Support scenarios (patterns/support-scenarios.php) — same checkerboard
   grid/DOM-order trick as Promo split above (text-1, video-1, video-2,
   text-2, ...), and the text cards reuse .es-promo-card as-is. Each video
   slot is a real YouTube embed (16:9, matching the text card's min-height
   via aspect-ratio rather than a fixed height, since embeds must keep
   their own proportions). */
.es-services__inner {
    padding-top: 64px;
    padding-bottom: 64px;
}
.es-services-video {
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 24px;
    overflow: hidden;
    background-color: var(--bg-gray-light);
}
.es-services-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Blog teaser (patterns/blog-teaser.php) — kicker/heading on the left,
   prev/next arrow buttons on the same row (right-aligned), then a
   manually-scrollable card row for the "Блог" custom post type registered
   by the esiep2-blog plugin. Scrolling is click-driven (assets/js/
   blog-teaser.js scrolls by one card width) — no auto-play, matching the
   "static, no slider" feedback from the team section earlier: a user-
   controlled row is a different thing from an auto-animating one. */
.es-blog-teaser__inner {
    padding-top: 64px;
    padding-bottom: 64px;
}
.es-blog-teaser__head {
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.es-blog-teaser__arrows {
    display: flex;
    flex-shrink: 0;
    gap: 12px;
}
.es-blog-teaser__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background-color: var(--bg-red);
    color: var(--text-white);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.es-blog-teaser__arrow:hover {
    background-color: var(--color-red-hover);
}
.es-blog-teaser__arrow svg {
    width: 20px;
    height: 20px;
}
.es-blog-teaser__row {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 -24px;
    padding: 0 24px;
}
.es-blog-teaser__row::-webkit-scrollbar {
    display: none;
}
.es-blog-teaser__card {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 280px;
    scroll-snap-align: start;
    background-color: var(--bg-surface-blue);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s ease;
}
.es-blog-teaser__card:hover {
    transform: translateY(-4px);
}
.es-blog-teaser__cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    background-color: var(--bg-surface-blue-muted);
    background-size: cover;
    background-position: center;
}
.es-blog-teaser__play {
    display: flex;
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}
.es-blog-teaser__title {
    margin: 20px 20px 0;
    color: var(--text-dark);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}
.es-blog-teaser__excerpt {
    margin: 8px 20px 20px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

/* Blog archive (/blog/, templates/archive-esiep2_blog_post.html) — same
   .es-blog-teaser__card look as the homepage teaser, just as a wrapping
   grid instead of a horizontal scroller. */
.es-blog-archive__inner {
    padding-top: 64px;
    padding-bottom: 64px;
}
.es-blog-archive__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 32px;
}
@media (min-width: 640px) {
    .es-blog-archive__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1024px) {
    .es-blog-archive__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.es-blog-archive__grid .es-blog-teaser__card {
    width: auto;
}
.es-blog-archive__pagination {
    margin-top: 40px;
}
.es-blog-archive__pagination ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.es-blog-archive__pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 9999px;
    background-color: var(--bg-gray-light);
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.es-blog-archive__pagination .page-numbers.current {
    background-color: var(--bg-blue);
    color: var(--text-white);
}
.es-blog-archive__pagination a.page-numbers:hover {
    background-color: var(--bg-blue-light);
}

/* Single blog post (templates/single-esiep2_blog_post.html) — plain
   article layout: title, optional cover, then core post content at the
   theme's normal reading width. */
.es-blog-single__inner {
    padding-top: 64px;
    padding-bottom: 64px;
}
.es-blog-single__title {
    margin: 0 0 24px;
    color: var(--text-dark);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}
@media (min-width: 768px) {
    .es-blog-single__title {
        font-size: 42px;
    }
}
.es-blog-single__cover {
    margin: 0 0 32px;
    border-radius: 20px;
    overflow: hidden;
}
.es-blog-single__content {
    color: var(--text-dark);
    font-size: 17px;
    line-height: 1.7;
}
.es-blog-single__content p {
    margin: 0 0 20px;
}
.es-blog-single__video {
    display: block;
    aspect-ratio: 16 / 9;
    margin: 0 0 24px;
    border-radius: 20px;
    overflow: hidden;
}
.es-blog-single__video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Resources — same kicker/heading/lead + CTA row as Exams/Programs, then a
   row of 4 external resource cards. Each is a real link (target=_blank,
   set in resources.php) to the org's own site, so the whole card — not
   just the little arrow icon — is clickable. */
.es-resource__inner {
    padding-top: 64px;
    padding-bottom: 64px;
}
.es-resource__header {
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 40px;
    flex-direction: column;
}
@media (min-width: 768px) {
    .es-resource__header {
        flex-direction: row;
    }
}
.es-resource__intro {
    flex: 1 1 auto;
    min-width: 0;
}
.es-resource__lead {
    margin: 0;
    max-width: 560px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.6;
}
.es-resource__ctas {
    flex-shrink: 0;
    width: fit-content;
}
.es-resource__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 640px) {
    .es-resource__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .es-resource__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.es-resource-card {
    display: block;
    background-color: var(--bg-lavender-light);
    border-radius: 24px;
    padding: 12px;
    text-decoration: none;
    transition: box-shadow 0.2s ease;
}
/* Toggled by assets/js/resources-filter.js. A class, not the native
   [hidden] attribute — .es-resource-card's own "display: block" above is
   an author-origin rule, which beats the UA stylesheet's [hidden] rule
   even at equal specificity, so [hidden] alone would render as if visible. */
.es-resource-card.is-hidden {
    display: none;
}
.es-resource-card:hover {
    box-shadow: 0 12px 24px rgba(26, 26, 26, 0.1);
}
.es-resource-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    background-color: var(--bg-white);
    border-radius: 16px;
    overflow: hidden;
}
.es-resource-card__logo img {
    width: 72%;
    height: 72%;
    object-fit: contain;
}
.es-resource-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
}
.es-resource-card__title {
    overflow: hidden;
    color: var(--text-dark);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.es-resource-card__link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--bg-blue);
    color: var(--text-white);
}
.es-resource-card__link-icon svg {
    width: 14px;
    height: 14px;
}
.es-resource-card__tag {
    display: block;
    margin-top: 4px;
    color: var(--text-blue);
    font-size: 14px;
    font-weight: 600;
}
.es-resource-card__desc {
    display: block;
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

/* FAQ — right above the footer. Centered kicker + heading like Team's,
   then a single-column accordion of numbered rows. Questions/answers come
   from the "FAQ" custom post type (esiep2-faq plugin); one row is expanded
   at a time via .is-open (toggled in assets/js/faq.js), using the same
   0fr/1fr grid-rows reveal already used for the hover cards above, just
   driven by a class instead of :hover. The source mockup indents the
   question/answer text well past the number badge on wide screens (an
   editorial-margin look) — kept from 1024px up only, since that much dead
   space reads as broken on narrower widths where every other section in
   this theme simplifies instead. */
.es-faq__inner {
max-width: 1048px;
margin: 0 auto;
    padding-top: 64px;
    padding-bottom: 64px;
}
.es-faq__head {
    max-width: 700px;
    margin: 0 auto 40px;
    text-align: center;
}
.es-faq__title-highlight {
    color: var(--text-blue);
}
.es-faq__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.es-faq-item {
    background-color: var(--bg-surface-neutral);
    border-radius: 16px;
    transition: background-color 0.2s ease;
}
.es-faq-item.is-open {
    background-color: var(--bg-surface-blue);
}
.es-faq-item__header {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 24px;
    background: none;
    border: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: inherit;
}
.es-faq-item__number {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--bg-blue);
    color: var(--text-white);
    font-size: 15px;
    font-weight: 700;
}
.es-faq-item__question {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-dark);
    font-size: 18px;
    font-weight: 600;
    line-height: 0.9;
}
@media (min-width: 1024px) {
    .es-faq-item__question {
        padding-left: 128px;
    }
}
.es-faq-item__toggle {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-blue-sky);
    transition: background-color 0.2s ease;
}
.es-faq-item__toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--bg-white);
    border-bottom: 2px solid var(--bg-white);
    transform: translate(-50%, -65%) rotate(45deg);
    transition: transform 0.2s ease;
}
.es-faq-item.is-open .es-faq-item__toggle {
    background-color: var(--bg-blue-mid);
}
.es-faq-item.is-open .es-faq-item__toggle::after {
    transform: translate(-50%, -35%) rotate(225deg);
}
.es-faq-item__answer-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}
.es-faq-item.is-open .es-faq-item__answer-wrap {
    grid-template-rows: 1fr;
}
.es-faq-item__answer-inner {
    overflow: hidden;
    min-height: 0;
}
.es-faq-item__answer {
    padding: 0 24px 22px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 0.9;
}
.es-faq-item__answer p {
    margin: 0;
    max-width: 560px;
}
@media (min-width: 1024px) {
    .es-faq-item__answer {
        padding-left: 152px;
    }
}

/* Grid variant of the accordion above — same .es-faq-item markup, same
   is-open/toggle behaviour from assets/js/faq.js (it only keys off
   .es-faq-item / .es-faq-item__header, so nothing extra was needed there),
   just laid out as a row of squarish cards instead of full-width stacked
   bars: badge top-left, title beneath it, toggle pinned to the card's own
   bottom-right corner. First used by patterns/support-includes.php. The
   selectors below win over the stacked variant's rules through class-count
   specificity alone (2 classes vs. 1), regardless of source order. */
.es-faq__list--grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}
.es-faq__list--grid .es-faq-item {
    flex: 1 1 200px;
}
.es-faq__list--grid .es-faq-item__header {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    min-height: 148px;
    padding: 20px;
}
.es-faq__list--grid .es-faq-item__question {
    padding-left: 0;
    padding-right: 40px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}
.es-faq__list--grid .es-faq-item__toggle {
    position: absolute;
    right: 20px;
    bottom: 20px;
}
.es-faq__list--grid .es-faq-item__answer {
    padding: 0 20px 20px;
}
.es-faq-item__number--orange { background-color: var(--bg-orange); }
.es-faq-item__number--purple { background-color: var(--bg-purple); }
.es-faq-item__number--teal { background-color: var(--bg-teal); }
.es-faq-item__number--red { background-color: var(--bg-red); }
.es-faq-item__number--green { background-color: var(--bg-green); }

.es-support-includes__inner {
    padding-top: 64px;
    padding-bottom: 64px;
}

/* Consultation CTA — right above the footer. Blue section (same blue as
   the hero) with a headline/lead/callout on the left and a white
   lead-capture form card on the right, mirroring the hero's own 2-column
   split. The decorative background circles are the source design's own
   layered-ellipse SVGs: three concentric circles pinned to the top-left
   corner, and three more (largest at back, lightest/smallest in front)
   pinned behind the card and sweeping off the bottom-right corner —
   both clusters fake a soft glow without a blur filter. */
.es-consult {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-blue);
}
.es-consult__decor {
    position: absolute;
    pointer-events: none;
}
.es-consult__decor-layer {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.es-consult__decor--corner {
    top: 0;
    left: 0;
    width: 18.2%;
    aspect-ratio: 343 / 273;
}
.es-consult__decor--corner .es-consult__decor-layer--2 {
    width: 89.5%;
    height: 86.8%;
}
.es-consult__decor--corner .es-consult__decor-layer--3 {
    width: 78.4%;
    height: 72.9%;
}
.es-consult__decor--edge {
    top: 8.2%;
    right: -6%;
    width: 55.9%;
    aspect-ratio: 1054 / 867;
}
.es-consult__decor--edge .es-consult__decor-layer--2 {
    width: 96.2%;
    height: 95.4%;
}
.es-consult__decor--edge .es-consult__decor-layer--3 {
    width: 92.3%;
    height: 90.7%;
}
.es-consult__inner {
    position: relative;
    padding-top: 64px;
    padding-bottom: 64px;
    flex-direction: column;
    gap: 40px;
}
@media (min-width: 1024px) {
    .es-consult__inner {
        flex-direction: row;
        align-items: flex-start;
    }
}
.es-consult__content {
    flex: 1 1 auto;
}
@media (min-width: 1024px) {
    .es-consult__content {
        /* -20px is half of .es-consult__inner's 40px gap — flex-basis
           percentages don't account for gap on their own, so 45%+55%
           would overflow the container by the full gap width. */
        flex: 0 0 calc(45% - 20px);
        max-width: calc(45% - 20px);
        padding-top: 24px;
    }
}
.es-consult__title {
    margin: 0 0 16px;
    color: var(--text-white);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
}
@media (min-width: 768px) {
    .es-consult__title {
        font-size: 36px;
    }
}
.es-consult__lead {
    margin: 0 0 24px;
    color: var(--text-white);
    opacity: 0.9;
    font-size: 18px;
    line-height: 1.6;
}
.es-consult__callout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background-color: var(--bg-white);
    border-radius: 20px;
    padding: 20px;
}
.es-consult__callout-icon {
    display: flex;
    flex-shrink: 0;
}
.es-consult__callout-icon img {
    display: block;
    width: 40px;
    height: 40px;
}
.es-consult__callout-text {
    margin: 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
}

.es-consult__card {
    max-width: 856px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* gap, not margin-bottom on the photo — WP's block-gap reset up top
       force-reverts margin-block-end (with !important) on every
       is-layout-flow child, which would win over a plain margin here. */
    gap: 16px;
    background-color: var(--bg-surface-neutral);
    border-radius: 24px;
    padding: 24px;
}
@media (min-width: 1024px) {
    .es-consult__card {
        flex: 0 0 calc(55% - 20px);
        /* Caps the card at its actual source-design width (856px) on wide
           viewports instead of growing to fill the section — .es-container
           has no max-width of its own, so 55% alone keeps stretching. */
        max-width: min(856px, calc(55% - 20px));
    }
}
.es-consult__photo {
    position: relative;
    aspect-ratio: 808 / 272;
    border-radius: 16px;
    background-color: var(--bg-gray);
    overflow: hidden;
}
.es-consult__photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Decorative only — matches the source design's close icon on the photo,
   not a functional dismiss control (this is a static page section). */
.es-consult__photo-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bg-white);
    color: var(--text-blue);
    font-size: 20px;
    line-height: 1;
}

.es-consult-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.es-consult-form__field {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 14px;
    background-color: var(--bg-white);
    color: var(--text-dark);
    font-family: var(--font-primary, sans-serif);
    font-size: 15px;
}
.es-consult-form__field::placeholder {
    color: var(--text-muted);
}
.es-consult-form__field:focus {
    outline: 2px solid var(--bg-blue);
    outline-offset: 1px;
}
.es-consult-form__submit {
    margin-top: 8px;
    padding: 17px 32px;
    border: none;
    border-radius: 9999px;
    background-color: var(--bg-blue);
    color: var(--text-white);
    font-family: var(--font-primary, sans-serif);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.es-consult-form__submit:hover {
    background-color: var(--color-blue-hover);
}

/* Footer — a light floating panel (logo/pitch/nav columns/legal links) and
   a 2x2 social icon grid next to it, both directly on the page's white
   background (confirmed against the source file: the panel is the only
   fill, there is no separate dark section behind it). Mobile-first:
   stacked by default, side-by-side from 768px. Sizes below (18px nav
   text, 40px panel padding, 42px/38px gaps, ...) are taken directly off
   footer.pdf via its vector coordinates, not eyeballed off a screenshot. */
.es-footer {
    padding-top: 32px;
    padding-bottom: 32px;
}
.es-footer__inner {
    gap: 20px;
}
@media (min-width: 768px) {
    .es-footer__inner {
        flex-direction: row;
    }
}

.es-footer__panel {
    /* Grow to fill the row next to the fixed-width social grid — it was
       sitting at its content width before, leaving a huge gap on wide
       viewports instead of spanning the full container. Padding/gap
       trimmed down from the source-PDF values to make room for the
       enlarged social grid next to it. */
    flex: 1 1 auto;
    min-width: 0;
    background-color: var(--bg-gray-light);
    border-radius: 24px;
    padding: 8px;
    gap: 4px;
}
.es-footer__top {
    /* flex-start, not stretch (the row default) — otherwise every column
       gets pulled up to match the tallest one instead of sizing to its
       own content, which is what was ballooning the whole panel's height. */
    align-items: flex-start;
    gap: 20px;
    justify-content: space-between;
}
@media (min-width: 768px) {
    .es-footer__top {
        flex-direction: row;
    }
}

.es-footer__brand {
    flex: 1 1 200px;
    max-width: 300px;
}
.es-footer__brand-logo {
    margin: 0 0 10px;
}
.es-footer__brand-logo img {
    width: 52px;
    height: auto;
    display: block;
}
.es-footer__brand-title {
    margin: 0 0 6px;
    color: var(--text-dark);
    font-size: 17px;
    font-weight: 700;
    line-height: 0.9;
}
.es-footer__brand-disclaimer {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 0.9;
}

.es-footer__nav {
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    gap: 24px;
}
@media (min-width: 768px) {
    .es-footer__nav {
        flex-direction: row;
        /* Let columns drop to a second line instead of squeezing all 4
           into one row — without this, widening the social grid left too
           little room and columns shrank to single-letter width. Wrapping
           only kicks in once the row is genuinely too narrow for all 4 at
           their 160px basis, so the wide ~1800px reference layout still
           renders as one row. */
        flex-wrap: wrap;
        row-gap: 32px;
    }
}
.es-footer__col {
    /* Columns shrink together and let their own text wrap onto a second
       line at narrower widths, instead of an entire column jumping to a
       new row (that's what was blowing up the panel's height below the
       source design's ~1800px reference width). overflow-wrap so long
       headings/items (e.g. "Внешкольная") break onto a new line instead
       of spilling past the shrunk column and over the next one. */
    flex: 1 1 130px;
    min-width: 0;
    overflow-wrap: break-word;
    gap: 4px;
}
.es-footer__section {
    gap: 2px;
}
.es-footer-heading {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 0.9;
}
.es-footer-heading a {
    color: var(--text-dark);
    text-decoration: none;
}
.es-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1px;
}
.es-footer__list a {
    color: var(--text-muted);
    font-size: 14px;
    text-decoration: none;
}

.es-footer__bottom {
    margin: 0;
    display: flex;
    gap: 20px;
    color: var(--text-muted);
    font-size: 12px;
}
.es-footer__legal-link {
    color: inherit;
    text-decoration: none;
}

.es-footer-heading a:hover,
.es-footer__list a:hover,
.es-footer__legal-link:hover {
    color: var(--text-blue);
    text-decoration: underline;
}

.es-footer__social {
    /* .es-footer__inner stretches its row children by default — without
       this the grid inherited the panel's full height and every button
       below got stretched into a tall rectangle instead of staying square. */
    align-self: flex-start;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (min-width: 768px) {
    .es-footer__social {
        /* Fixed width, not just flex-basis — .es-footer__panel is flex:1 1
           auto with min-width:0 next to it, so it absorbs any width this
           grid gains instead of overflowing the row. */
        flex: 0 0 420px;
        width: 420px;
    }
}
.es-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--bg-blue);
    border-radius: 28px;
    color: var(--text-white);
    transition: background-color 0.2s ease;
}
.es-footer__social-link:hover {
    background-color: var(--color-blue-hover);
}
.es-footer__social-link svg {
    width: 52px;
    height: 52px;
}

/* Nav menu — sitemap card grid (patterns/nav-menu.php). One card per real
   Navigation menu item; 1 column on mobile, 2 on tablet+ so the grid
   reads the same 2-wide layout as the source design regardless of
   whether the menu ends up with an even or odd item count. */
.es-navmenu__inner {
    padding-top: 64px;
    padding-bottom: 64px;
}
.es-navmenu__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px) {
    .es-navmenu__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.es-navmenu-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background-color: var(--bg-gray-light);
    border-radius: 24px;
    padding: 32px;
    text-decoration: none;
}
/* Hover tint comes from the shared .es-hover-tint (ui.css, added in markup). */
.es-navmenu-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 70%;
}
.es-navmenu-card__overline {
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}
.es-navmenu-card__title {
    margin-bottom: 12px;
    color: var(--text-dark);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}
.es-navmenu-card__desc {
    margin-bottom: 24px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.5;
}
.es-navmenu-card__cta {
    margin-top: auto;
}

/* Per-card visual — either a small cluster of logo tiles (Exams,
   Resources), still laid out in flow next to the text, or a single photo
   (Team, Programs, Admissions, Parents). Both stay hidden below the
   tablet breakpoint so cards read text-first and don't fight a photo for
   width in a single narrow column. */
.es-navmenu-card__logos,
.es-navmenu-card__photo {
    display: none;
}
@media (min-width: 768px) {
    .es-navmenu-card__logos,
    .es-navmenu-card__photo {
        display: flex;
    }
}
.es-navmenu-card__logos {
    flex-shrink: 0;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-end;
    gap: 10px;
    width: 132px;
}
.es-navmenu-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 calc(50% - 5px);
    background-color: var(--bg-white);
    border-radius: 14px;
    padding: 12px;
}
.es-navmenu-card__logo--lg {
    flex-basis: 100%;
}
.es-navmenu-card__logo img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Absolutely positioned against .es-navmenu-card (position:relative above)
   so its placement is free to set per taste — adjust top/right/bottom/left
   here instead of fighting the card's flex layout. Width/height still
   control the crop size; top/right below are just a starting position. */
.es-navmenu-card__photo {
     position: absolute;
    right: 0;
    bottom: 0;
    align-items: stretch;
    justify-content: center;
    width: 280px;
    border-radius: 20px;
    overflow: hidden;
}
.es-navmenu-card__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Resources hero (patterns/resources-hero.php) — page-level hero for
   "Полезные материалы", distinct from the homepage's es-hero. Circles are
   plain absolutely-positioned squares turned round and clipped by the
   section's own overflow:hidden, sized in vw so they scale with the
   viewport instead of overflowing on narrow screens. */
/* Background comes from the shared .es-hero-gradient (ui.css, added in
   markup); this rule only supplies the fixed-header gap fix. */
.es-resources-hero {
    margin-top: 0;
}
.es-resources-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    padding-top: 140px;
    padding-bottom: 96px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.es-resources-hero__title {
    margin: 0 0 20px;
    color: var(--text-white);
    font-size: 38px;
    font-weight: 500;
    line-height: 0.9;
}
@media (min-width: 768px) {
    .es-resources-hero__title {
        font-size: 44px;
    }
}
.es-resources-hero__lead {
    margin: 0 0 32px;
    color: var(--text-white);
    opacity: 0.9;
    font-size: 16px;
    line-height: 1.6;
}
.es-resources-hero__ctas {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* Resources tabs (patterns/resources-list.php) — kicker/heading, then a
   row of filter tabs: "Все" plus one per taxonomy term that has a
   description (see esiep2_resources_get_or_create_term() in the plugin).
   Filtering itself is assets/js/resources-filter.js: it toggles
   .is-active here and hides/shows .es-resource-card by data-categories,
   no page reload. */
.es-resources-tabs__inner {
    padding-top: 64px;
    padding-bottom: 32px;
}
.es-resources-tabs__title {
    margin: 0 0 32px;
    color: var(--text-dark);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
}
@media (min-width: 768px) {
    .es-resources-tabs__title {
        font-size: 32px;
    }
}
.es-resources-tabs__title-highlight {
    color: var(--text-blue);
}
.es-resources-tabs__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 640px) {
    .es-resources-tabs__list {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .es-resources-tabs__list {
        grid-template-columns: repeat(6, 1fr);
    }
}
.es-resources-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 140px;
    background-color: var(--bg-gray-light);
    border: none;
    border-radius: 20px;
    padding: 20px;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.es-resources-tab:hover {
    background-color: var(--bg-gray);
}
.es-resources-tab__title {
    color: var(--text-dark);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}
.es-resources-tab__desc {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}
.es-resources-tab.is-active {
    align-items: center;
    justify-content: center;
    background-color: var(--bg-blue);
}
.es-resources-tab.is-active:hover {
    background-color: var(--color-blue-hover);
}
.es-resources-tab.is-active .es-resources-tab__title {
    color: var(--text-white);
    text-align: center;
}
.es-resources-tab.is-active .es-resources-tab__desc {
    color: var(--text-white);
    opacity: 0.85;
    text-align: center;
}

/* Resources page listing — reuses the homepage's .es-resource-card look
   for every card; assets/js/resources-filter.js hides/shows cards here
   instead of this file grouping them by category. */
.es-resources-page__inner {
    padding-top: 32px;
    padding-bottom: 64px;
}
.es-resources-page__empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 16px;
    text-align: center;
}

/* Clubs hero (patterns/clubs-hero.php) — same gradient/circle treatment as
   the Resources hero, but two-column like the homepage hero: content on
   the left, a video placeholder on the right instead of the orbit diagram. */
/* Background comes from the shared .es-hero-gradient (ui.css, added in
   markup); this rule only supplies the fixed-header gap fix. */
.es-clubs-hero {
    margin-top: 0;
}
.es-clubs-hero__inner {
    position: relative;
    z-index: 1;
    padding-top: 120px;
    padding-bottom: 96px;
    gap: 40px;
    flex-direction: column;
}
@media (min-width: 1024px) {
    .es-clubs-hero__inner {
        flex-direction: row;
        align-items: center;
    }
}
.es-clubs-hero__content {
    flex: 0 0 100%;
    max-width: 100%;
}
.es-clubs-hero__visual {
    flex: 0 0 100%;
    max-width: 100%;
}
@media (min-width: 1024px) {
    .es-clubs-hero__content {
        flex: 0 0 46%;
        max-width: 46%;
    }
    .es-clubs-hero__visual {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
.es-clubs-hero__title {
    margin: 0 0 20px;
    color: var(--text-white);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
}
@media (min-width: 768px) {
    .es-clubs-hero__title {
        font-size: 40px;
    }
}
.es-clubs-hero__lead {
    margin: 0 0 24px;
    color: var(--text-white);
    opacity: 0.9;
    font-size: 16px;
    line-height: 1.6;
}
/* Shape/color/padding now come from the shared .es-callout-card +
   .es-icon-tile (ui.css, added in markup); this rule only supplies the
   spacing this hero wants before the CTA button below it. */
.es-clubs-hero__callout {
    margin-bottom: 28px;
}
.es-clubs-hero__ctas {
    width: fit-content;
}
/* Shape/centering/label styling now come from the shared
   .es-video-placeholder (ui.css, added in markup); this rule only
   supplies the taller min-height and white fill this hero wants. */
.es-clubs-hero__video {
    min-height: 520px;
    background-color: var(--bg-white);
}

/* After-school hero (patterns/after-school-hero.php) — blue gradient with decorative
   circles, two-column layout: left side has 4 stacked feature cards with colored
   circle badges, right side has heading, subtitle, and 2 info cards. */
/* Background comes from the shared .es-hero-gradient (ui.css, added in
   markup); this rule only supplies the fixed-header gap fix. */
.es-after-school-hero {
    margin-top: 0;
}
.es-after-school-hero__inner {
    position: relative;
    z-index: 1;
    padding-top: 120px;
    padding-bottom: 96px;
    gap: 40px;
    flex-direction: column;
}
@media (min-width: 1024px) {
    .es-after-school-hero__inner {
        flex-direction: row;
        align-items: flex-start;
    }
}
.es-after-school-hero__left {
    flex: 0 0 100%;
    max-width: 100%;
}
@media (min-width: 1024px) {
    .es-after-school-hero__left {
        flex: 0 0 20%;
        max-width: 45%;
    }
}
.es-after-school-hero__right {
    flex: 0 0 100%;
    max-width: 100%;
}
@media (min-width: 1024px) {
    .es-after-school-hero__right {
        flex: 0 0 55%;
        max-width: 40%;
    }
}
.es-after-school-hero__cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.es-after-school-hero__card {
     display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background-color: var(--bg-white);
    border-radius: 20px;
    padding: 20px 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    max-width: 320px;
}
.es-after-school-hero__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.es-after-school-hero__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: var(--text-white);
}
.es-after-school-hero__card-icon svg {
    width: 24px;
    height: 24px;
}
.es-after-school-hero__card-icon--red { background-color: var(--bg-red); }
.es-after-school-hero__card-icon--orange { background-color: var(--bg-orange); }
.es-after-school-hero__card-icon--green { background-color: var(--bg-green); }
.es-after-school-hero__card-icon--purple { background-color: var(--bg-purple); }
.es-after-school-hero__card-title {
    color: var(--text-dark);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}
.es-after-school-hero__title {
    margin: 0 0 16px;
    color: var(--text-white);
    font-size: 42px;
    font-weight: 500;
    line-height: 1.1;
}
@media (min-width: 768px) {
    .es-after-school-hero__title {
        font-size: 52px;
    }
}
.es-after-school-hero__title-sub {
    display: block;
    font-size: 18px;
    font-weight: 400;
    opacity: 0.85;
    margin-top: 8px;
}
.es-after-school-hero__lead {
    margin: 0 0 32px;
    color: var(--text-white);
    opacity: 0.9;
    font-size: 22px;
    line-height: 1.6;
    max-width: 480px;
}
.es-after-school-hero__infos {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.es-after-school-hero__info {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background-color: var(--bg-white);
    border-radius: 16px;
    padding: 20px;
    backdrop-filter: blur(8px);
}
/* .es-after-school-hero__info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background-color: var(--bg-white);
    color: var(--bg-blue);
} */
.es-after-school-hero__info-icon svg {
    width: 65px;
    height: 65px;
}
.es-after-school-hero__info-content {
    flex: 1 1 auto;
}
.es-after-school-hero__info-title {
    margin: 0 0 8px;
    color: var(--text-white);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}
.es-after-school-hero__info-desc {
    margin: 0;
    color: var(--text-gray-dark);
    font-size: 15px;
    line-height: 1.5;
}
.es-after-school-hero__photo {
        right: 0;
    bottom: -140px;
}
/* Clubs ecosystem (patterns/clubs-ecosystem.php) — centered intro, then a
   row of touching circles. Side nodes overlap into their neighbors via
   negative margin (skipped on the first node); the center "Ученик" node
   is simply bigger and sits above them (z-index) so the overlap reads as
   it tucking behind, not just floating cards in a row. Horizontal scroll
   below desktop since 5 large circles don't have room to shrink much
   further without the labels stopping being legible. */
.es-ecosystem__inner {
    padding-top: 64px;
    padding-bottom: 64px;
}
.es-ecosystem__head {
    max-width: 640px;
    margin: 0 auto 48px;
    text-align: center;
}
.es-ecosystem__lead {
    margin: 0;
    color: var(--text-dark);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
}
.es-ecosystem__sublead {
    margin: 16px 0 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
}
.es-ecosystem__grid {
    display: flex;
    align-items: center;

    overflow-x: auto;
    padding: 24px 24px 40px;
}
@media (min-width: 1024px) {
    .es-ecosystem__grid {
      justify-content: space-around;
        overflow-x: visible;
        padding: 24px 0 0;
    }
}
.es-ecosystem-node {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background-color: var(--bg-lavender-light);
    padding: 24px;
    text-align: center;
}
.es-ecosystem-node:not(:first-child) {
    margin-left: -28px;
}
@media (min-width: 1024px) {
    .es-ecosystem-node {
        width: 260px;
        height: 260px;
    }
    .es-ecosystem-node:not(:first-child) {
        margin-left: -36px;
    }
}
.es-ecosystem-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: 50%;
    color: var(--text-white);
}
.es-ecosystem-node__icon svg {
    width: 22px;
    height: 22px;
}
.es-ecosystem-node__icon--green { background-color: var(--bg-green); }
.es-ecosystem-node__icon--purple { background-color: var(--bg-purple); }
.es-ecosystem-node__icon--teal { background-color: var(--bg-teal); }
.es-ecosystem-node__icon--blue { background-color: var(--bg-blue); }
.es-ecosystem-node__title {
    color: var(--text-dark);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}
.es-ecosystem-node__desc {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}
.es-ecosystem-node--center {
    z-index: 1;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle at 35% 30%, #6FBFFF 0%, var(--bg-blue) 70%);
}
.es-ecosystem-node--center .es-ecosystem-node__title {
    color: var(--text-white);
    font-size: 24px;
}
@media (min-width: 1024px) {
    .es-ecosystem-node--center {
        width: 320px;
        height: 320px;
    }
    .es-ecosystem-node--center .es-ecosystem-node__title {
        font-size: 28px;
    }
}

/* Clubs recommended resources (patterns/clubs-recommended.php) — same
   gradient/circle treatment as the Clubs/Resources heroes, reuses
   .es-resource-card as-is (it already reads fine on this blue background)
   in a 3-column grid instead of the Resources page's 4-column one. */
.es-clubs-recommended {
    position: relative;
    overflow: hidden;
    background: var(--gradient-brand);
    margin-top: 0;
}
/* Image/positioning-base now come from the shared .es-decor-blob
   (ui.css, added in markup); these two rules only supply size/offset. */
.es-clubs-recommended__circle--left {
    width: 34vw;
    height: 34vw;
    left: -14vw;
    top: -9vw;
    transform: rotate(180deg);
}
.es-clubs-recommended__circle--right {
    width: 24vw;
    height: 24vw;
    right: -8vw;
    bottom: -10vw;
}
.es-clubs-recommended__inner {
    position: relative;
    z-index: 1;
    padding-top: 64px;
    padding-bottom: 64px;
}
.es-clubs-recommended__title {
    margin: 0 0 40px;
    color: var(--text-white);
    font-size: 28px;
    font-weight: 500;
    text-align: center;
}
@media (min-width: 768px) {
    .es-clubs-recommended__title {
        font-size: 32px;
    }
}
.es-clubs-recommended__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px) {
    .es-clubs-recommended__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Clubs communities (patterns/clubs-communities.php) — "Родительские
   сообщества" section: a two-column intro (kicker+heading vs lead+sublead)
   above two accent-colored club cards. Each card's badge/checkmarks/CTA
   share one color modifier (--purple/--blue) so a 3rd club later only
   needs a new modifier, not new per-part classes. */
.es-clubs-communities__inner {
    padding-top: 64px;
    padding-bottom: 64px;
}
.es-clubs-communities__head {
    gap: 32px;
    margin-bottom: 40px;
    flex-direction: column;
}
@media (min-width: 1024px) {
    .es-clubs-communities__head {
        flex-direction: row;
        align-items: flex-start;
    }
}
.es-clubs-communities__intro {
            flex: 3 0 50%;
        max-width: 50%;

}

.es-clubs-communities__lead {
    margin: 0 0 12px;
    color: var(--text-dark);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
}
.es-clubs-communities__sublead {
    margin: 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
}
.es-clubs-communities__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 900px) {
    .es-clubs-communities__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.es-club-card {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-gray-light);
    border-radius: 24px;
    padding: 32px;
}
.es-club-card__badge {
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 20px;
    padding: 8px 18px;
    border-radius: 9999px;
    color: var(--text-white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.es-club-card__badge--purple { background-color: var(--bg-purple); }
.es-club-card__badge--blue { background-color: var(--bg-blue); }
.es-club-card__title {
    margin: 0 0 12px;
    color: var(--text-dark);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}
.es-club-card__desc {
    margin: 0 0 24px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
}
.es-club-card__topics-label {
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bg-gray);
    color: var(--text-dark);
    font-size: 15px;
    font-weight: 600;
}
.es-club-card__topics {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
}
.es-club-card__topic {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-dark);
    font-size: 15px;
}
.es-club-card__topic-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}
.es-club-card__topic-icon svg {
    width: 100%;
    height: 100%;
}
.es-club-card__topic-icon--purple { color: var(--text-purple); }
.es-club-card__topic-icon--blue { color: var(--text-blue); }
.es-club-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 17px 32px;
    border-radius: 9999px;
    color: var(--text-white);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.es-club-card__cta--purple { background-color: var(--bg-purple); }
.es-club-card__cta--purple:hover { background-color: var(--color-purple-hover); }
.es-club-card__cta--blue { background-color: var(--bg-blue); }
.es-club-card__cta--blue:hover { background-color: var(--color-blue-hover); }

/* Clubs teachers community (patterns/clubs-teachers.php) — plain text
   column on the left, a light panel on the right holding a 2x2 grid of
   feature cards. Icon color is a modifier like the club cards above, so
   a 5th/6th feature later only needs a new one, not new per-part classes. */
.es-clubs-teachers__inner {
    padding-top: 64px;
    padding-bottom: 64px;
    gap: 40px;
    flex-direction: column;
    align-items: center;
}
@media (min-width: 1024px) {
    .es-clubs-teachers__inner {
        flex-direction: row;
        align-items: stretch;
    }
}
.es-clubs-teachers__content {
    flex: 0 0 100%;
    max-width: 100%;
}
.es-clubs-teachers__panel {
    flex: 0 0 100%;
    max-width: 100%;
    background-color: var(--bg-lavender-light);
    border-radius: 24px;
    padding: 32px;
}
@media (min-width: 1024px) {
    .es-clubs-teachers__content {
  flex: 3 0 50%;
        max-width: 48.5%;
        align-self: center;
    }
    .es-clubs-teachers__panel {
     max-width: 48.5%;
    }
}
.es-clubs-teachers__lead {
    margin: 20px 0 0;
    color: var(--text-dark);
    font-size: 17px;
    line-height: 1.6;
}
.es-clubs-teachers__sublead {
    margin: 16px 0 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
}
.es-clubs-teachers__ctas {
    width: fit-content;
    margin-top: 28px;
}
.es-clubs-teachers__panel-title {
    margin: 0 0 24px;
    color: var(--text-dark);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}
.es-teachers-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 640px) {
    .es-teachers-features {
        grid-template-columns: repeat(2, 1fr);
    }
}
.es-teachers-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--bg-white);
    border-radius: 20px;
    padding: 28px 20px;
}
.es-teachers-feature__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 16px;
    color: var(--text-white);
}
.es-teachers-feature__icon svg {
    width: 28px;
    height: 28px;
}
.es-teachers-feature__icon--red { background-color: var(--bg-red); }
.es-teachers-feature__icon--green { background-color: var(--bg-green); }
.es-teachers-feature__icon--orange { background-color: var(--bg-orange); }
.es-teachers-feature__icon--purple { background-color: var(--bg-purple); }
.es-teachers-feature__title {
    margin: 0 0 8px;
    color: var(--text-dark);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}
.es-teachers-feature__desc {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

/* Clubs council (patterns/clubs-council.php) — same two-column intro
   shape as the teachers section above, then a 6-row checkerboard. The
   checkerboard itself is just a 2-col grid with no row/column spans: DOM
   order alone (text/photo swapped every other row, built server-side in
   the pattern) makes it read as a mosaic, same trick as .es-promo__grid. */
.es-clubs-council__inner {
    padding-top: 64px;
    padding-bottom: 64px;
}
.es-clubs-council__head {
    gap: 32px;
    margin-bottom: 40px;
    flex-direction: column;
}
@media (min-width: 1024px) {
    .es-clubs-council__head {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
}
.es-clubs-council__intro {
    flex: 0 0 49%;
}
.es-clubs-council__subtitle {
    margin: 0 0 16px;
    color: var(--text-dark);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}
.es-clubs-council__lead {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
}
.es-clubs-council__sublead {
    margin: 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
}
.es-council__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 40px;
}
@media (min-width: 768px) {
    .es-council__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.es-council-tile,
.es-council-photo {
    min-height: 220px;
    border-radius: 20px;
}
.es-council-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background-color: var(--bg-gray-light);
    padding: 24px;
    text-align: center;
}
.es-council-tile__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bg-blue);
    color: var(--text-white);
    font-size: 14px;
    font-weight: 700;
}
.es-council-tile__label {
    margin: 0;
    max-width: 280px;
    color: var(--text-dark);
    font-size: 36px;
    font-weight: 500;
    line-height: 1.3;
}
.es-council-photo {
    display: block;
    overflow: hidden;
}
.es-council-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.es-council-photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-gray-light);
    color: var(--text-muted);
}
.es-council-photo--placeholder svg {
    width: 40px;
    height: 40px;
}
.es-clubs-council__ctas {
    width: fit-content;
    margin: 0 auto;
}

/* Clubs final CTA (patterns/clubs-final-cta.php) — same gradient/circle
   treatment as the Clubs/Resources heroes, centered content, reuses the
   homepage consultation section's own icon-target.svg (already a green
   rounded-square badge baked into the file, so no extra wrapper styling
   needed here) for the callout. */
.es-clubs-final {
    position: relative;
    overflow: hidden;
    background: var(--gradient-brand);
    margin-top: 0;
}
/* Image/positioning-base now come from the shared .es-decor-blob
   (ui.css, added in markup); these two rules only supply size/offset. */
.es-clubs-final__circle--left {
  width: 42vw;
    height: 42vw;
    max-width: 560px;
    max-height: 560px;
    left: -4vw;
    top: -20vh;
    transform: rotate(180deg);
}
.es-clubs-final__circle--right {
    width: 26vw;
    height: 26vw;
    right: -2vw;
    bottom: -7vw;
}
.es-clubs-final__inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    padding-top: 96px;
    padding-bottom: 96px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.es-clubs-final__title {
    margin: 0 0 32px;
    color: var(--text-white);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.3;
}
@media (min-width: 768px) {
    .es-clubs-final__title {
        font-size: 38px;
    }
}
.es-clubs-final__callout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--bg-white);
    border-radius: 20px;
    padding: 20px;
    text-align: left;
}
/* The global :where(.is-layout-flow) > * reset (top of file) reverts
   margin-block-start/end with !important on every wp:group child, so a
   plain margin-bottom here was silently discarded — same fix as
   .es-header-logo/.es-header-nav__list above: match its specificity with
   :root and !important instead of fighting it. Without this the button
   row below rendered flush against the callout. */
:root .es-clubs-final__callout {
    margin-block: 0 32px !important;
}
.es-clubs-final__callout-icon {
    display: flex;
    flex-shrink: 0;
}
.es-clubs-final__callout-icon img {
    display: block;
    width: 40px;
    height: 40px;
}
.es-clubs-final__callout-text {
    margin: 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
}
.es-clubs-final__ctas {
    row-gap: 12px;
    column-gap: 16px;
}


/* ============================================================
   After-school cards section (Main Container grid)
   ============================================================ */

.es-after-school-cards {
	padding: 80px 0;
}

.es-after-school-cards__head {
	gap: 32px;
	margin-bottom: 40px;
	flex-direction: column;
}
@media (min-width: 1024px) {
	.es-after-school-cards__head {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}
}

.es-after-school-cards__intro {
	flex: 0 0 49%;
}

.es-after-school-cards__lead-wrap {
	flex: 0 0 49%;
}

.es-after-school-cards__subtitle {
	margin: 0 0 16px;
	color: var(--text-dark);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

.es-after-school-cards__lead {
	margin: 0 0 40px;
	max-width: 620px;
	color: var(--text-muted);
	font-size: 16px;
	line-height: 0.9;
}

/* Shape/color now come from the shared .es-pill (ui.css, added in
   markup); this rule only supplies the gap before it. */
.es-after-school-cards__tag {
	margin-left: 12px;
}

.es-after-school-cards__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px 24px;
	margin-bottom: 40px;
}
@media (min-width: 640px) {
	.es-after-school-cards__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.es-after-school-cards__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.es-after-school-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.es-after-school-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	background-color: var(--bg-surface-neutral);
	border-radius: 24px;
	padding: 32px 24px;
	text-align: center;
    min-height: 300px;
    justify-content: center;
}

.es-after-school-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	margin-bottom: 24px;
}

.es-after-school-card__icon svg {
	display: block;
	width: auto;
	height: 100%;
	color: var(--text-dark);
}

.es-after-school-card__title {
	margin-bottom: 12px;
}

.es-after-school-card__desc {
	margin: 0;
	color: var(--text-muted);
	font-size: 16px;
	line-height: 0.9;
}

.es-after-school-cards__prompt {
	margin: 0 0 20px;
	color: var(--text-muted);
	font-size: 16px;
	line-height: 0.9;
}

.es-after-school-cards__ctas {
	width: fit-content;
}
/* ==========================================================================
   University evaluation / «Что оценивают зарубежные университеты?»
   Паттерн: esiep2/university-evaluation

   Файл содержит ТОЛЬКО специфику блока. Общее берётся из ui.css:
     .es-container, .es-inner, .es-kicker, .es-section-title,
     .es-card-title, .es-badge, .es-lead

   Ховер карточки — та же градиентная заливка (.es-why-card:hover),
   что уже используется в блоке «Why complex».
   ========================================================================== */

.es-evaluate {
	background: var(--bg-white);
}

.es-evaluate__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	margin-bottom: var(--space-10);
}
@media (min-width: 768px) {
	.es-evaluate__header {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		gap: var(--space-10);
	}
}

.es-evaluate__intro {
	flex: 0 0 auto;
	max-width: 460px;
}
.es-evaluate__intro .es-section-title {
	margin-bottom: 0;
}

.es-evaluate__lead {
	flex: 1 1 480px;
	max-width: 620px;
}

.es-evaluate__accent {
	color: var(--text-blue);
}

/* Акцентный цвет карточки: номер + плашка иконки.
   Токены совпадают с модификаторами .es-badge--* из ui.css */
.es-evaluate .es-evaluate-card:nth-child(1) { --accent: var(--bg-red); }
.es-evaluate .es-evaluate-card:nth-child(2) { --accent: var(--bg-orange); }
.es-evaluate .es-evaluate-card:nth-child(3) { --accent: var(--bg-teal); }
.es-evaluate .es-evaluate-card:nth-child(4) { --accent: var(--bg-purple); }

.es-evaluate__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
@media (min-width: 640px) {
	.es-evaluate__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-6);
	}
}
@media (min-width: 1100px) {
	.es-evaluate__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Карточка: фон, скругление и ховер повторяют .es-why-card —
   тот же градиентный переход из bg-gray-light в bg-blue-light. */
.es-evaluate-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: var(--space-6);
	border-radius: 24px;
	background-color: var(--bg-gray-light);
	transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
@media (min-width: 768px) {
	.es-evaluate-card {
		min-height: 280px;
	}
}
/* Lift + shadow come from the shared .es-hover-lift (ui.css) added in
   markup; this rule only supplies the gradient background swap. */
.es-evaluate-card:hover {
	background: var(--gradient-diagonal-blue);
}

.es-evaluate-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

/* Shape/size/centering now come from the shared .es-icon-tile (ui.css);
   this rule only supplies the per-card accent color. */
.es-evaluate-card__icon {
	background-color: var(--accent);
}

.es-evaluate-card__title {
	margin-bottom: var(--space-2);
}
/* Description styling now comes from the shared .es-card-desc (ui.css). */
/* ==========================================================================
   Semester programs / «Семестровые программы и курсы»
   Паттерн: esiep2/semester-programs

   Файл содержит ТОЛЬКО специфику блока. Общее берётся из ui.css:
     .es-container, .es-inner, .es-kicker, .es-section-title,
     .es-card-title, .es-badge, .es-lead

   Иконки-чипы вокруг фото — position:absolute с черновыми координатами,
   заданными инлайново в паттерне. Это отправная точка для ручной
   расстановки, не финальная верстка.
   ========================================================================== */

.es-semester {
	background: var(--bg-white);
}

.es-semester__intro {
	max-width: 620px;
	margin-bottom: var(--space-10);
}
.es-semester__accent {
	color: var(--text-blue);
}

.es-semester__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10) var(--space-6);
}
@media (min-width: 640px) {
	.es-semester__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1100px) {
	.es-semester__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.es-semester-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.es-semester-card__badge {
	align-self: flex-start;
	margin-bottom: var(--space-4);
}

/* Shape/positioning-base now come from the shared .es-photo-circle
   (ui.css, added in markup); this rule only supplies the bottom
   margin this card wants below its photo. */
.es-semester-card__media {
	margin-bottom: var(--space-5);
}

.es-semester-card__title {
	margin-bottom: var(--space-2);
}
/* Description styling now comes from the shared .es-card-desc (ui.css). */
/* ==========================================================================
   Trajectory examples / «Каждый профиль развивается по своей траектории»
   Паттерн: esiep2/research-trajectories

   Файл содержит ТОЛЬКО специфику блока. Общее берётся из ui.css:
     .es-container, .es-inner, .es-kicker, .es-section-title, .es-lead,
     .es-icon-tile, .es-gradient-card

   Подключать ПОСЛЕ ui.css (по порядку темы: variables → utilities → ui → …).
   ========================================================================== */

.es-trajectory {
	background: var(--bg-white);
}

.es-trajectory__intro {
	max-width: 620px;
	margin-bottom: var(--space-10);
}
.es-trajectory__accent {
	color: var(--text-blue);
}

/* 3 rows of [profile, diagram] in source order — the alternating
   left/right placement in the design falls out naturally from that
   order inside a 2-column grid, no explicit row overrides needed. */
.es-trajectory__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
@media (min-width: 900px) {
	.es-trajectory__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.es-trajectory__grid .es-gradient-card {
	min-height: 320px;
}

.es-trajectory-profile__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: var(--space-4);
	border-radius: var(--radius-full);
	background-color: var(--alpha-white-32);
	color: var(--text-white);
	font-size: 15px;
	font-weight: var(--font-weight-bold);
}
.es-trajectory-profile__title {
	margin: 0 0 var(--space-2);
	color: var(--text-white);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
}
.es-trajectory-profile__subtitle {
	margin: 0;
	color: var(--alpha-white-70);
	font-size: var(--font-size-base);
}

/* Diagram card: centers a fixed-size "canvas" holding the 4 nodes and 3
   connector arrows, each absolutely positioned via inline px offsets set
   in the pattern (per-row — see research-trajectories.php). The arrows
   are the project's own exported artwork (not redrawn CSS/SVG shapes),
   so the canvas is sized to fit THEM at their native pixel dimensions
   rather than stretching the art to fill an arbitrary card size. Cards
   still stretch to the tallest one in their grid row (default grid
   behavior), so the canvas is just centered in whatever space that
   leaves; overflow-x:auto is a safety net if a canvas ever runs wider
   than its card on narrow viewports. */
.es-trajectory-diagram {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-8);
	border-radius: 24px;
	background-color: var(--bg-white);
	box-shadow: var(--shadow-card-sm);
	overflow-x: auto;
}

.es-trajectory-diagram__canvas {
	position: relative;
	flex-shrink: 0;
}

.es-trajectory-diagram__arrow {
	position: absolute;
	z-index: 0;
	line-height: 0;
	color: var(--color-border-muted);
}
/* Overrides the fill="#3A3A3A" baked into the source SVGs — a plain CSS
   rule always wins over an element's own presentation attribute. */
.es-trajectory-diagram__arrow path {
	fill: currentColor;
}

.es-trajectory-diagram__node {
	position: absolute;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	max-width: 150px;
}
.es-trajectory-diagram__node--end {
	align-items: flex-end;
	text-align: right;
}

/* Bumped up from .es-icon-tile's 48px default — at this diagram's scale
   (nodes strung along thin connector arrows) the default tile read too
   small next to the labels. */
.es-trajectory-diagram__node .es-icon-tile {
	width: 70px;
	height: 70px;
	border-radius: 20px;
}
.es-trajectory-diagram__node .es-icon-tile svg {
	width: 40px;
	height: 40px;
}

.es-trajectory-diagram__node-label {
	margin: 0;
	color: var(--text-dark);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: 1.4;
}
/* ==========================================================================
   Business projects / «Бизнес-проекты и предпринимательство»
   Паттерн: esiep2/business-projects (данные из плагина esiep2-business-projects)

   Файл содержит ТОЛЬКО специфику блока. Общее берётся из ui.css:
     .es-container, .es-inner, .es-kicker, .es-section-title, .es-lead,
     .es-card-title, .es-card-desc

   Подключать ПОСЛЕ ui.css (по порядку темы: variables → utilities → ui → …).
   ========================================================================== */

.es-biz {
	background: var(--bg-white);
}

.es-biz__intro {
	max-width: 620px;
	margin-bottom: var(--space-10);
}
.es-biz__accent {
	color: var(--text-blue);
}

/* 4 direction cards + 1 wider partners panel. The panel's own internal
   2-column logo grid needs more room than a single photo card, so it
   gets a larger track share instead of matching the other four 1:1. */
.es-biz__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
@media (min-width: 640px) {
	.es-biz__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1100px) {
	.es-biz__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) 1.3fr;
	}
}

.es-biz-card__photo {
	display: block;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--space-4);
	border-radius: 16px;
	overflow: hidden;
}
.es-biz-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.es-biz-card__title {
	margin-bottom: var(--space-2);
}

.es-biz-partners {
	padding: var(--space-6);
	border-radius: 24px;
	background-color: var(--bg-gray-light);
}
.es-biz-partners__title {
	margin: 0 0 var(--space-5);
	color: var(--text-dark);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	line-height: 1.4;
}
.es-biz-partners__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
}

.es-biz-partner {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3);
	border-radius: 14px;
	background-color: var(--bg-white);
}
.es-biz-partner__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
}
.es-biz-partner__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.es-biz-partner__name {
	color: var(--text-dark);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	line-height: 1.2;
}
/* ==========================================================================
   Activity selection / «Не существует универсального рецепта поступления»
   Паттерн: esiep2/activity-selection

   Файл содержит ТОЛЬКО специфику блока. Общее берётся из ui.css:
     .es-container, .es-inner, .es-kicker, .es-section-title, .es-lead,
     .es-card-title, .es-card-desc, .es-badge, .es-top-accent, .es-divider,
     .es-hover-lift

   Подключать ПОСЛЕ ui.css (по порядку темы: variables → utilities → ui → …).
   ========================================================================== */

.es-activity {
	background: var(--bg-white);
}

.es-activity__accent {
	color: var(--text-blue);
}

.es-activity__subheading {
	margin: 0 0 var(--space-5);
	color: var(--text-dark);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
}

.es-activity__paragraphs {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* Grid mechanics now come from the shared .es-split-layout (ui.css,
   added in markup); nothing left to declare on .es-activity__layout. */

.es-activity__intro {
	max-width: 480px;
}

.es-activity__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
@media (min-width: 560px) {
	.es-activity__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.es-activity-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-6);
	border-radius: 16px;
	background-color: var(--bg-surface-blue);
}

.es-activity-card__divider {
	align-self: stretch;
}

.es-activity-card__desc {
	width: 100%;
}
/* ==========================================================================
   AP hero / «AP - уровень, который реально влияет на поступление»
   Паттерн: esiep2/ap-hero

   Файл содержит ТОЛЬКО специфику блока. Фон — общий .es-hero-gradient
   (ui.css); кнопки — .es-btn--white/.es-btn--blue-light; иконки —
   .es-icon-tile (все из ui.css).

   Подключать ПОСЛЕ ui.css (по порядку темы: variables → utilities → ui → …).
   ========================================================================== */

.es-ap-hero__inner {
	position: relative;
	z-index: 1;
	padding-top: 120px;
	padding-bottom: 96px;
	gap: var(--space-10);
	flex-direction: column;
}
@media (min-width: 1024px) {
	.es-ap-hero__inner {
		flex-direction: row;
		align-items: center;
	}
}

.es-ap-hero__content {
	flex: 0 0 100%;
	max-width: 100%;
}
.es-ap-hero__panel {
	flex: 0 0 100%;
	max-width: 100%;
}
@media (min-width: 1024px) {
	.es-ap-hero__content {
		flex: 0 0 44%;
		max-width: 44%;
	}
	.es-ap-hero__panel {
		flex: 0 0 52%;
		max-width: 52%;
	}
}

.es-ap-hero__title {
	margin: 0 0 var(--space-5);
	color: var(--text-white);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
}
@media (min-width: 768px) {
	.es-ap-hero__title {
		font-size: 40px;
	}
}
.es-ap-hero__lead {
	margin: 0 0 var(--space-5);
	color: var(--text-white);
	opacity: 0.9;
	font-size: var(--font-size-base);
	line-height: 1.6;
}
.es-ap-hero__note {
	margin: 0 0 var(--space-6);
	color: var(--text-white);
	opacity: 0.75;
	font-size: var(--font-size-sm);
	line-height: 1.6;
}
.es-ap-hero__ctas {
	width: fit-content;
}
.es-ap-hero__ctas .es-btn .wp-block-button__link {
	width: 100%;
}

/* Shape/spacing now come from the shared .es-feature-panel/.es-feature-item
   (ui.css, added in markup); these two rules only supply this hero's own
   color scheme (white panel, tinted items). */
.es-ap-hero__panel {
	background-color: var(--bg-white);
}
.es-ap-hero__feature {
	background-color: var(--bg-surface-neutral);
}
/* ==========================================================================
   AP roadmap / «Как мы ведем ребенка к поступлению?»
   Паттерн: esiep2/ap-roadmap (данные из плагина esiep2-ap-roadmap)

   Файл содержит ТОЛЬКО специфику блока. Общее берётся из ui.css:
     .es-container, .es-inner, .es-kicker, .es-section-title, .es-lead,
     .es-section-header/__intro/__ctas, .es-card-title, .es-card-desc,
     .es-badge, .es-icon-tile, .es-top-accent

   Подключать ПОСЛЕ ui.css (по порядку темы: variables → utilities → ui → …).
   ========================================================================== */

.es-roadmap {
	background: var(--bg-white);
}

.es-roadmap__note {
	max-width: 320px;
}
.es-roadmap__note p {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	line-height: 1.5;
}

/* auto-fit (not auto-fill) collapses empty tracks and lets the existing
   cards stretch to take up the freed space — so a partial last row (7
   cards never divides evenly) still spans the full container width
   instead of leaving a gap, and the row always fills edge to edge
   regardless of viewport size. */
.es-roadmap__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-5);
}

.es-roadmap-card {
	padding: var(--space-5);
	border-radius: 16px;
	background-color: var(--bg-gray-light);
}
.es-roadmap-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-5);
}
.es-roadmap-card__title {
	margin-bottom: var(--space-2);
}
.es-roadmap-card__desc {
	margin-bottom: var(--space-5);
}
.es-roadmap-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 10px var(--space-4);
	border-radius: var(--radius-pill);
	background-color: var(--bg-blue);
	color: var(--text-white);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
}
.es-roadmap-card--highlighted .es-roadmap-card__link { background-color: var(--bg-white); color: var(--text-blue); }

/* Accent color drives the badge/icon-tile/link background alike, so a
   step only needs one color choice in wp-admin. */
.es-roadmap-card.es-top-accent--blue .es-roadmap-card__link { background-color: var(--bg-blue); }
.es-roadmap-card.es-top-accent--red .es-roadmap-card__link { background-color: var(--bg-red); }
.es-roadmap-card.es-top-accent--orange .es-roadmap-card__link { background-color: var(--bg-orange); }
.es-roadmap-card.es-top-accent--green .es-roadmap-card__link { background-color: var(--bg-green); }
.es-roadmap-card.es-top-accent--purple .es-roadmap-card__link { background-color: var(--bg-purple); }
.es-roadmap-card.es-top-accent--teal .es-roadmap-card__link { background-color: var(--bg-teal); }

/* The one step the design calls out (AP/IB DP itself) — solid fill
   instead of the light tint, white text, sits slightly taller than its
   neighbors so it reads as the centerpiece of the row. */
.es-roadmap-card--highlighted {
	margin-top: -12px;
	padding-top: calc(var(--space-5) + 12px);
	background-color: var(--bg-blue);
}
.es-roadmap-card--highlighted .es-roadmap-card__title,
.es-roadmap-card--highlighted .es-roadmap-card__desc {
	color: var(--text-white);
}
.es-roadmap-card--highlighted .es-badge {
	background-color: var(--bg-white);
	color: var(--text-blue);
}
.es-roadmap-card--highlighted .es-icon-tile {
	background-color: var(--alpha-white-16);
}
/* ==========================================================================
   AP tracks / «По каким трекам мы ведем ребенка к поступлению»
   Паттерн: esiep2/ap-tracks

   Файл содержит ТОЛЬКО специфику блока. Общее берётся из ui.css:
     .es-container, .es-inner, .es-kicker, .es-section-title,
     .es-gradient-card, .es-video-placeholder

   Подключать ПОСЛЕ ui.css (по порядку темы: variables → utilities → ui → …).
   ========================================================================== */

.es-tracks {
	background: var(--bg-white);
}

.es-tracks__intro {
	margin-bottom: var(--space-8);
}

.es-tracks__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: stretch;
}
@media (min-width: 900px) {
	.es-tracks__layout {
		grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
	}
}

.es-tracks__rows {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.es-track-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
@media (min-width: 640px) {
	.es-track-row {
		flex-direction: row;
		align-items: stretch;
	}
}

.es-track-row__tile {
	flex: 0 0 auto;
	width: 100%;
	min-height: 160px;
	padding: var(--space-6) var(--space-5);
}
@media (min-width: 640px) {
	.es-track-row__tile {
		width: 150px;
	}
}
.es-track-row__tile-label {
	color: var(--alpha-white-70);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}
.es-track-row__tile-name {
	margin: var(--space-2) 0;
	color: var(--text-white);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
}
.es-track-row__tile-meta {
	color: var(--alpha-white-70);
	font-size: var(--font-size-xs);
}

.es-track-row__stages {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	align-items: center;
}
@media (min-width: 1100px) {
	.es-track-row__stages {
		grid-template-columns: 1fr auto 1fr;
	}
}

.es-track-row__arrow {
	display: none;
	justify-content: center;
	color: var(--color-border-muted);
}
@media (min-width: 1100px) {
	.es-track-row__arrow {
		display: flex;
	}
}
.es-track-row__arrow--blue { color: var(--bg-blue); }
.es-track-row__arrow--red { color: var(--bg-red); }
.es-track-row__arrow--orange { color: var(--bg-orange); }
.es-track-row__arrow--green { color: var(--bg-green); }
.es-track-row__arrow--purple { color: var(--bg-purple); }
.es-track-row__arrow--teal { color: var(--bg-teal); }

.es-track-stage {
	height: 100%;
	padding: var(--space-5);
	border-radius: 16px;
	background-color: var(--bg-gray-light);
}
.es-track-stage__head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}
.es-track-stage__icon {
	display: flex;
	flex-shrink: 0;
}
.es-track-stage__icon--blue { color: var(--bg-blue); }
.es-track-stage__icon--red { color: var(--bg-red); }
.es-track-stage__icon--orange { color: var(--bg-orange); }
.es-track-stage__icon--green { color: var(--bg-green); }
.es-track-stage__icon--purple { color: var(--bg-purple); }
.es-track-stage__icon--teal { color: var(--bg-teal); }

.es-track-stage__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 6px var(--space-3);
	border-radius: var(--radius-pill);
	color: var(--text-white);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
}
.es-track-stage__badge-meta {
	font-weight: var(--font-weight-medium);
	opacity: 0.85;
}
.es-track-stage__badge--blue { background-color: var(--bg-blue); }
.es-track-stage__badge--red { background-color: var(--bg-red); }
.es-track-stage__badge--orange { background-color: var(--bg-orange); }
.es-track-stage__badge--green { background-color: var(--bg-green); }
.es-track-stage__badge--purple { background-color: var(--bg-purple); }
.es-track-stage__badge--teal { background-color: var(--bg-teal); }

.es-track-stage__desc {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	line-height: 1.55;
}

.es-tracks__video {
	min-height: 320px;
}
.es-tracks__video-placeholder {
	background: var(--gradient-purple-vertical);
	opacity: 0.85;
}
/* ==========================================================================
   AP problem / «Где большинство делает ошибку»
   Паттерн: esiep2/ap-problem

   Файл содержит ТОЛЬКО специфику блока. Общее берётся из ui.css:
     .es-container, .es-inner, .es-kicker, .es-section-title, .es-badge

   Центрированный заголовок переиспользует .es-faq__head as-is (та же
   верстка: max-width + margin auto + text-align center).

   Подключать ПОСЛЕ ui.css (по порядку темы: variables → utilities → ui → …).
   ========================================================================== */

.es-problem {
	background: var(--bg-white);
}

.es-problem__subheading {
	margin: var(--space-2) 0 0;
	color: var(--text-dark);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
}

/* Color now comes from the shared .es-text-accent--red (ui.css,
   added in markup). */

.es-problem__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: stretch;
}
@media (min-width: 900px) {
	.es-problem__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
	}
}

/* Shape/typography now come from the shared .es-media-panel (ui.css,
   added in markup); this rule only supplies this section's own tint. */
.es-problem-panel {
	background-color: var(--bg-surface-blue);
}

.es-problem-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-6);
	border-radius: 20px;
	background-color: var(--bg-gray-light);
}
.es-problem-list__badge {
	margin-bottom: var(--space-5);
}
.es-problem-list__rows {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	width: 100%;
}

/* Shape/color now come from the shared .es-check-row/__icon--red
   (ui.css, added in markup) — nothing block-specific left to declare. */
/* ==========================================================================
   AP diagnostics / «С чего начинается подготовка учащегося?»
   Паттерн: esiep2/ap-diagnostics

   Файл содержит ТОЛЬКО специфику блока. Общее берётся из ui.css:
     .es-container, .es-inner, .es-kicker, .es-section-title, .es-lead,
     .es-split-layout, .es-feature-panel, .es-feature-item, .es-icon-tile,
     .es-btn--primary/--outline

   Подключать ПОСЛЕ ui.css (по порядку темы: variables → utilities → ui → …).
   ========================================================================== */

.es-diag {
	background: var(--bg-white);
}

.es-diag__intro {
	max-width: 480px;
}

.es-diag__lead {
	margin-bottom: var(--space-4);
}
.es-diag__note {
	margin: 0 0 var(--space-6);
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	line-height: 1.6;
}

.es-diag__ctas {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	width: fit-content;
}

.es-diag__panel {
	background-color: var(--bg-surface-neutral);
}
.es-diag__feature {
	background-color: var(--bg-white);
}
/* ==========================================================================
   AP subjects / «Что дает AP на практике»
   Паттерн: esiep2/ap-subjects

   Файл содержит ТОЛЬКО специфику блока. Общее берётся из ui.css:
     .es-container, .es-inner, .es-kicker, .es-section-title, .es-lead,
     .es-card-title, .es-card-desc, .es-badge, .es-icon-tile,
     .es-photo-circle

   Центрированный заголовок переиспользует .es-faq__head as-is (та же
   верстка, что и у блока «Проблема»).

   Подключать ПОСЛЕ ui.css (по порядку темы: variables → utilities → ui → …).
   ========================================================================== */

.es-subjects {
	background: var(--bg-white);
}

.es-subjects__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
@media (min-width: 640px) {
	.es-subjects__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.es-subjects__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.es-subject-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.es-subject-card__badge {
	align-self: flex-start;
	margin-bottom: var(--space-4);
}
.es-subject-card__media {
	margin-bottom: var(--space-5);
}
.es-subject-card__title {
	margin-bottom: var(--space-2);
}
/* ==========================================================================
   AP process / «Как проходит подготовка?»
   Паттерн: esiep2/ap-process

   Файл содержит ТОЛЬКО специфику блока. Общее берётся из ui.css:
     .es-container, .es-inner, .es-kicker, .es-section-title, .es-badge,
     .es-card-title, .es-pill, .es-media-panel, .es-feature-panel

   Подключать ПОСЛЕ ui.css (по порядку темы: variables → utilities → ui → …).
   ========================================================================== */

.es-process {
	background: var(--bg-white);
}

.es-process__intro {
	margin-bottom: var(--space-8);
}

/* Grid mechanics now come from the shared .es-trio-grid (ui.css,
   added in markup); nothing left to declare on .es-process__grid. */

.es-process__panel--blue { background-color: var(--bg-surface-blue); }
.es-process__panel--gray { background-color: var(--bg-gray-light); }

.es-process__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: var(--space-3) 0 0;
	padding: 0;
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}
.es-process__list li::before {
	content: "- ";
}

.es-process__steps-panel {
	position: relative;
	background-color: var(--bg-gray-light);
}

.es-process__steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
@media (min-width: 480px) {
	.es-process__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 900px) {
	.es-process__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.es-process-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-5);
	border-radius: 16px;
	background-color: var(--bg-white);
	text-align: center;
}
.es-process-step__title {
	font-size: var(--font-size-base);
}

.es-process__note {
	position: absolute;
	right: var(--space-5);
	bottom: calc(-1 * var(--space-6));
	max-width: 260px;
	padding: var(--space-4) var(--space-5);
	border-radius: 16px;
	background-color: var(--bg-white);
	box-shadow: var(--shadow-card-lg);
}
.es-process__note p {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--font-size-xs);
	line-height: 1.5;
}
/* ==========================================================================
   AP principle / «Почему наш подход дает более сильный результат»
   Паттерн: esiep2/ap-principle

   Файл содержит ТОЛЬКО специфику блока. Общее берётся из ui.css:
     .es-container, .es-inner, .es-kicker, .es-section-title, .es-badge,
     .es-pill, .es-trio-grid, .es-media-panel, .es-feature-panel

   Подключать ПОСЛЕ ui.css (по порядку темы: variables → utilities → ui → …).
   ========================================================================== */

.es-principle {
	background: var(--bg-white);
}

.es-principle__intro {
	margin-bottom: var(--space-8);
}

.es-principle__panel--plain {
	padding: 0;
}
.es-principle__panel--gradient {
	background: var(--gradient-diagonal-blue);
}

/* Shape/color now come from the shared .es-icon-cluster (ui.css,
   added in markup); this rule only supplies the gap above it. */
.es-principle-icons {
	margin-top: var(--space-6);
}

.es-principle__compare {
	background-color: var(--bg-gray-light);
}
.es-principle__compare-title {
	margin: 0 0 var(--space-2);
	color: var(--text-dark);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	text-align: left;
}
.es-principle__compare-note {
	margin: 0 0 var(--space-6);
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	line-height: 1.6;
}

.es-principle__approaches {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
@media (min-width: 480px) {
	.es-principle__approaches {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.es-principle-approach__steps {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
}

.es-principle-approach__head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-pill);
	color: var(--text-white);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	text-align: center;
}
.es-principle-approach__badge {
	position: absolute;
	top: -10px;
	left: -10px;
	box-shadow: var(--shadow-icon);
}

.es-principle-approach__arrow {
	color: var(--text-muted);
	line-height: 1;
}

.es-principle-approach__step {
	width: 100%;
	padding: var(--space-4) var(--space-5);
	border-radius: 14px;
	background-color: var(--bg-white);
	text-align: center;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
}
.es-principle-approach__step-meta {
	font-weight: var(--font-weight-medium);
	opacity: 0.8;
}

.es-principle-approach--red .es-principle-approach__head { background-color: var(--bg-red); }
.es-principle-approach--red .es-principle-approach__step { color: var(--text-red); }
.es-principle-approach--red .es-principle-approach__arrow { color: var(--bg-red); }

.es-principle-approach--green .es-principle-approach__head { background-color: var(--bg-green); }
.es-principle-approach--green .es-principle-approach__step { color: var(--text-green); }
.es-principle-approach--green .es-principle-approach__arrow { color: var(--bg-green); }
/* ==========================================================================
   AP careers / «Соберите профиль под будущую профессию»
   Паттерн: esiep2/ap-careers

   Файл содержит ТОЛЬКО специфику блока. Общее берётся из ui.css:
     .es-container, .es-inner, .es-kicker, .es-section-title, .es-lead,
     .es-card-title, .es-card-desc, .es-badge, .es-icon-tile, .es-btn--primary

   Подключать ПОСЛЕ ui.css (по порядку темы: variables → utilities → ui → …).
   ========================================================================== */

.es-careers {
	background: var(--bg-white);
}

/* Single grid: cell 1 is the intro text (not a card), cell 2 is the
   outlined note, the rest are career cards — that's what lines the
   intro up with the note/cards instead of sitting in its own row. */
.es-careers__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
@media (min-width: 640px) {
	.es-careers__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.es-careers__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.es-careers-note {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-6);
	padding: var(--space-5);
	border-radius: 16px;
	border: var(--border-width-ui) solid var(--bg-gray);
}
.es-careers-note__label {
	margin: 0 0 var(--space-2);
	color: var(--text-muted);
	font-size: var(--font-size-xs);
}
.es-careers-note__title {
	margin: 0;
	color: var(--text-dark);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
}
.es-careers-note__desc {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--font-size-xs);
	line-height: 1.5;
}

.es-careers-card {
	display: flex;
	flex-direction: column;
	padding: var(--space-5);
	border-radius: 16px;
	background-color: var(--bg-gray-light);
}
.es-careers-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-5);
}
.es-careers-card__title {
	margin-bottom: var(--space-2);
}

.es-careers__ctas {
	margin-top: var(--space-8);
	width: fit-content;
}
/* ==========================================================================
   AP comparison / «Почему без AP сложно поступить»
   Паттерн: esiep2/ap-comparison

   Файл содержит ТОЛЬКО специфику блока. Общее берётся из ui.css:
     .es-container, .es-inner, .es-kicker, .es-section-title, .es-badge,
     .es-pill, .es-check-row, .es-text-accent

   Подключать ПОСЛЕ ui.css (по порядку темы: variables → utilities → ui → …).
   ========================================================================== */

.es-comparison {
	background: var(--bg-white);
}

.es-comparison__intro {
	margin-bottom: var(--space-8);
}

.es-comparison__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: start;
}
@media (min-width: 640px) {
	.es-comparison__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1100px) {
	.es-comparison__grid {
		grid-template-columns: 1fr 1.4fr 1.4fr 1fr;
	}
}

.es-comparison-photo {
	position: relative;
	padding: var(--space-3);
	border-radius: 24px;
}
.es-comparison-photo--green { background-color: var(--bg-green-light); }
.es-comparison-photo--red { background-color: var(--bg-red-light); }
.es-comparison-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: 16px;
	object-fit: cover;
}
.es-comparison-photo__badge {
	position: absolute;
	top: -10px;
	z-index: 1;
	box-shadow: var(--shadow-icon);
}
.es-comparison-photo--green .es-comparison-photo__badge { left: -10px; }
.es-comparison-photo--red .es-comparison-photo__badge { right: -10px; }

.es-comparison__column {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.es-comparison__pill {
	align-self: flex-start;
	margin-bottom: var(--space-2);
}
/* ==========================================================================
   AP audience / «Для кого это подойдет?»
   Паттерн: esiep2/ap-audience

   Файл содержит ТОЛЬКО специфику блока. Общее берётся из ui.css:
     .es-container, .es-inner, .es-kicker, .es-section-title, .es-media-panel

   Визуал каждой карточки — готовое изображение проекта (крестики
   университетов и предметные иконки уже "впечатаны" в картинку), поэтому
   здесь только рамка под неё, без верстки под иконки.

   Подключать ПОСЛЕ ui.css (по порядку темы: variables → utilities → ui → …).
   ========================================================================== */

.es-audience {
	background: var(--bg-white);
}

.es-audience__intro {
	margin-bottom: var(--space-8);
}

.es-audience__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: stretch;
}
@media (min-width: 640px) {
	.es-audience__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1100px) {
	.es-audience__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.es-audience-card {
	background-color: var(--bg-surface-blue);
}

.es-audience-card__visual {
	display: block;
	margin-top: auto;
}
.es-audience-card__visual img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}
/* ==========================================================================
   Benefits / «Почему эти ресурсы полезны?»
   Паттерн: esiep2/benefits

   Файл содержит ТОЛЬКО специфику блока. Общее берётся из ui.css:
     .es-container, .es-inner, .es-kicker, .es-section-title,
     .es-card-title, .es-badge

   Подключать ПОСЛЕ ui.css (по порядку темы: variables → utilities → ui → …).
   ========================================================================== */

.es-benefits {
	--es-decor-h: 42px;   /* высота синей полосы внизу секции */
	--es-icon-tile: 56px; /* размер цветной плашки иконки */

	position: relative;
	overflow: hidden;
	background: var(--bg-white);
}

/* Акцентный цвет карточки: номер + плашка иконки.
   Токены совпадают с модификаторами .es-badge--* из ui.css */
.es-benefits .es-benefit-card:nth-child(1) { --accent: var(--bg-red); }
.es-benefits .es-benefit-card:nth-child(2) { --accent: var(--bg-orange); }
.es-benefits .es-benefit-card:nth-child(3) { --accent: var(--bg-teal); }
.es-benefits .es-benefit-card:nth-child(4) { --accent: var(--bg-purple); }


.es-benefits::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: clamp(24px, 10vw, 160px);
	width: clamp(90px, 12vw, 150px);
	height: var(--es-decor-h);
	background: rgba(255, 255, 255, .3);
	transform: skewX(-32deg);
}

/* Верхний отступ — стандартный (--space-section-y от .es-inner),
   нижний — section-y + место под декоративную полосу */
.es-benefits .es-benefits__inner {
	padding-bottom: calc(var(--space-section-y) + var(--es-decor-h));
}

/* Синяя часть заголовка */
.es-benefits .es-text-accent {
	color: var(--text-blue);
}

/* Отступ до сетки задаём здесь, у заголовка убираем нижний маргин */
.es-benefits .es-section-title {
	margin-bottom: 0;
}

/* --- Сетка карточек --- */
.es-benefits .es-benefits__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-5);
	margin-top: var(--space-8);
}

/* Сброс flow-отступов, которые ядро WP ставит между соседними блоками */
.es-benefits .es-benefits__grid > * + * {
	margin-block-start: 0;
}

@media (min-width: 768px) {
	.es-benefits .es-benefits__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-6);
		margin-top: var(--space-10);
	}
}

@media (min-width: 1100px) {
	.es-benefits .es-benefits__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --- Карточка --- */
.es-benefits .es-benefit-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-6);
	padding: var(--space-5);
	border-radius: var(--radius-lg, 18px); /* подставьте реальный токен из variables.css */
	background: var(--bg-gray-light, #f4f5fa);
	transition: transform .25s ease, box-shadow .25s ease;
}

/* Ховер — декоративный, при желании удалите */
.es-benefits .es-benefit-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(24, 29, 46, .1);
}

@media (min-width: 768px) {
	.es-benefits .es-benefit-card {
		min-height: 340px; /* контент прижат к низу, карточки одной высоты */
		padding: var(--space-8);
	}
}

/* Номер: размер, флекс и типографику даёт .es-badge из ui.css,
   здесь — только форма (на макете плашка, а не круг) и цвет */
.es-benefits .es-benefit-card__number {
	border-radius: var(--radius-sm, 12px);
	background-color: var(--accent);
}

/* Плашка иконки — в ui.css такого компонента нет, оставил локально.
   Кандидат на вынос в ui.css как .es-icon-tile, если повторится */
.es-benefits .es-benefit-card__icon {
	    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* width: var(--es-icon-tile); */
    /* height: var(--es-icon-tile); */
    margin: 0;
    border-radius: var(--radius-md, 14px);
    background-color: var(--accent);
    padding: 22px;
    min-width: 100px;
    min-height: 100px;
}

.es-benefits .es-benefit-card__icon img {
	display: block;
	width: 54%;
	height: 54%;
	object-fit: contain;
}

/* Контент прижат к низу карточки (как на макете) */
.es-benefits .es-benefit-card__content {
	margin-top: auto;
}

/* Заголовок карточки: всё остальное даёт .es-card-title из ui.css */
.es-benefits .es-benefit-card__title {
	margin-bottom: var(--space-2);
}
/* Описание: всё остальное даёт .es-card-desc из ui.css */
/* ==========================================================================
   AP final CTA / «Начните с оценки уровня»
   Паттерн: esiep2/ap-final-cta

   Файл содержит ТОЛЬКО специфику блока. Общее берётся из ui.css:
     .es-container, .es-kicker, .es-decor-blob, .es-icon-cluster (только
     цвет/форма плашек — сам разброс здесь свой, не аккуратный wrap),
     .es-btn--white/--blue-light

   Фон — var(--gradient-brand) (variables.css), тот же, что и на
   закрывающих секциях Clubs/Resources.

   Подключать ПОСЛЕ ui.css (по порядку темы: variables → utilities → ui → …).
   ========================================================================== */

.es-final-cta {
	position: relative;
	overflow: hidden;
	background: var(--gradient-brand);
	margin-top: 0;
}
.es-final-cta__circle--left {
	width: 34vw;
	height: 34vw;
	max-width: 480px;
	max-height: 480px;
	left: -10vw;
	top: -14vw;
	transform: rotate(180deg);
}
.es-final-cta__circle--right {
	width: 24vw;
	height: 24vw;
	max-width: 360px;
	max-height: 360px;
	right: -6vw;
	bottom: -8vw;
}

.es-final-cta__icons {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.es-final-cta__icon {
	position: absolute;
}

.es-final-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 640px;
	margin: 0 auto;
	padding-top: 96px;
	padding-bottom: 96px;
	text-align: center;
}
.es-final-cta .es-kicker-dot {
	background-color: var(--text-white);
}
.es-final-cta__kicker-label {
	color: var(--text-white);
}

.es-final-cta__avatar {
	display: block;
	width: 100px;
	height: 100px;
	margin: 0 auto var(--space-6);
	border-radius: var(--radius-full);
	overflow: hidden;
	background-color: var(--bg-white);
}
.es-final-cta__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.es-final-cta__title {
	margin: 0 0 var(--space-4);
	color: var(--text-white);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
}
@media (min-width: 768px) {
	.es-final-cta__title {
		font-size: 40px;
	}
}
.es-final-cta__lead {
	margin: 0 0 var(--space-8);
	color: var(--alpha-white-85);
	font-size: var(--font-size-base);
	line-height: 1.6;
}

.es-final-cta__ctas {
	max-width: 420px;
	margin: 0 auto;
	width: 100%;
}
.es-final-cta__ctas .es-btn .wp-block-button__link {
	width: 100%;
}
/* ==========================================================================
   AP result / «Что получает ученик?»
   Паттерн: esiep2/ap-result

   Файл содержит ТОЛЬКО специфику блока. Общее берётся из ui.css:
     .es-container, .es-inner, .es-section-title, .es-badge, .es-card-title,
     .es-feature-panel/__title/__grid, .es-icon-tile, .es-media-panel

   Центрированный заголовок переиспользует .es-faq__head; карточки
   преимуществ AP — .es-process-step (см. паттерн esiep2/ap-process).

   Подключать ПОСЛЕ ui.css (по порядку темы: variables → utilities → ui → …).
   ========================================================================== */

.es-result {
	background: var(--bg-white);
}

.es-result__avatar {
	display: inline-flex;
	vertical-align: middle;
	width: 44px;
	height: 44px;
	margin: 0 var(--space-1);
	border-radius: var(--radius-full);
	overflow: hidden;
}
.es-result__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.es-result__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: stretch;
}
@media (min-width: 1024px) {
	.es-result__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	}
}

.es-result__panel {
	background-color: var(--bg-gray-light);
}

.es-result__side {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.es-result__perks-note {
	margin: calc(-1 * var(--space-4)) 0 var(--space-6);
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}
.es-result__perks {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
@media (min-width: 480px) {
	.es-result__perks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 900px) {
	.es-result__perks {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* .es-media-panel is a column by default; this callout wants its photo
   beside the text instead of underneath it. */
.es-result__final {
	flex-direction: row;
	align-items: center;
	gap: var(--space-5);
	background-color: var(--bg-surface-blue);
}
.es-result__final-text {
	flex: 1 1 auto;
	min-width: 0;
}
.es-result__final .es-media-panel__title {
	margin-bottom: var(--space-2);
}
.es-result__final-photo {
	display: block;
	flex: 0 0 auto;
	width: 120px;
	aspect-ratio: 3 / 4;
	border-radius: 16px;
	overflow: hidden;
}
.es-result__final-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}
@media (max-width: 479px) {
	.es-result__final {
		flex-direction: column;
	}
	.es-result__final-photo {
		width: 100%;
		aspect-ratio: 16 / 9;
	}
}

/* Admission parents resources (patterns/admission-parents.php) — on the
   "Сопровождение поступления" page. Kicker/heading/container all come
   from shared classes; only the avatar row, divider spacing and the
   5-card resource grid are specific to this section. */
.es-admission-parents__title-main {
	text-align: center;
	margin-bottom: var(--space-8);
}
.es-admission-parents__avatars {
	display: flex;
	justify-content: center;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}
.es-admission-parents__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	border-radius: var(--radius-full);
	background-color: var(--bg-blue-light);
	color: var(--bg-blue);
}
.es-admission-parents__avatar svg {
	width: 44px;
	height: 44px;
}
.es-admission-parents__divider {
	margin-bottom: var(--space-8);
}
.es-admission-parents__panel {
	background-color: var(--bg-lavender-light);
}
.es-admission-parents__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
@media (min-width: 640px) {
	.es-admission-parents__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1200px) {
	.es-admission-parents__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}
.es-admission-parents__card {
	display: block;
	background-color: var(--bg-white);
	border-radius: 20px;
	padding: var(--space-4);
	text-decoration: none;
	transition: box-shadow 0.2s ease;
}
.es-admission-parents__card:hover {
	box-shadow: 0 12px 24px rgba(26, 26, 26, 0.1);
}
.es-admission-parents__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 88px;
	padding: 0 var(--space-2);
	color: var(--text-dark);
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	line-height: 1.2;
}
.es-admission-parents__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-2);
	margin-top: var(--space-2);
}
.es-admission-parents__title {
	font-size: var(--font-size-sm);
}
.es-admission-parents__link-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: var(--radius-full);
	background-color: var(--bg-blue);
	color: var(--text-white);
}
.es-admission-parents__link-icon svg {
	width: 12px;
	height: 12px;
}
.es-admission-parents__desc {
	display: block;
	margin-top: var(--space-2);
}

/* Admission strategy CTA (patterns/admission-strategy-cta.php) — built on
   .es-page-hero/.es-hero-gradient/.es-hero__ctas/.es-hero-cta (see
   admission-hero above) and .es-callout-card/.es-icon-tile (ui.css); only
   the callout spacing and the photo+video visual are specific here. */
.es-admission-strategy__callout {
	margin-bottom: var(--space-6);
}
.es-admission-strategy__visual {
	display: flex;
	justify-content: center;
}
.es-admission-strategy__photo-wrap {
	position: relative;
	display: block;
	width: 100%;
	max-width: 480px;
	border-radius: 24px;
	overflow: visible;
}
.es-admission-strategy__photo {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
}
.es-admission-strategy__video {
	position: absolute;
	right: -24px;
	bottom: -24px;
	width: 55%;
	min-height: 120px;
	background-color: var(--bg-white);
	font-size: 20px;
	box-shadow: var(--shadow-icon);
}
@media (max-width: 479px) {
	.es-admission-strategy__video {
		right: -12px;
		bottom: -16px;
		width: 60%;
		min-height: 90px;
		font-size: 16px;
	}
}