/* ============================================================
   UI.CSS — Reusable UI components for the Esiep2 theme

   Every class in this file is intentionally generic (not scoped to
   one page or section) so any pattern can drop it in without pulling
   in component-specific CSS. Load order:

     variables.css → utilities.css → ui.css → esiep2.css
   ============================================================ */


/* ============================================================
   1. Layout
   ============================================================ */

/* Matches #es-header's own left/right inset exactly so every section's
   edge lines up with the floating header pill. */
.es-container {
	padding-left: var(--space-gutter-x);
	padding-right: var(--space-gutter-x);
}
@media (min-width: 768px) {
	.es-container {
		padding-left: var(--space-gutter-x-md);
		padding-right: var(--space-gutter-x-md);
	}
}

/* Standard section vertical padding — apply to any section inner wrapper. */
.es-inner {
	padding-top: var(--space-section-y);
	padding-bottom: var(--space-section-y);
}


/* ============================================================
   2. Typography — Kicker
   ============================================================ */

.es-kicker {
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}
.es-kicker-dot {
	width: var(--space-2);
	height: var(--space-2);
	border-radius: var(--radius-full);
	background-color: var(--bg-blue);
	flex-shrink: 0;
}
.es-kicker-label {
	margin: 0;
	color: var(--text-dark);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
}


/* ============================================================
   3. Typography — Section title
   ============================================================ */

.es-section-title {
	margin: 0 0 var(--space-4);
	color: var(--text-dark);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
}
@media (min-width: 768px) {
	.es-section-title {
		font-size: var(--font-size-xl);
	}
}


/* ============================================================
   4. Typography — Card title
   ============================================================ */

.es-card-title {
	margin: 0;
	color: var(--text-dark);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
}

/* Card description paragraph — identical rule kept getting redeclared
   per-pattern (evaluation cards, semester cards, benefit cards); pulled
   up here since a 4th copy would've been one too many. */
.es-card-desc {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	line-height: 1.55;
}


/* ============================================================
   5. Typography — Lead paragraph
   ============================================================ */

.es-lead {
	margin: 0;
	max-width: var(--layout-lead-max);
	color: var(--text-muted);
	font-size: var(--font-size-base);
	line-height: var(--line-height-tight);
}


/* ============================================================
   6. Section header layout
   ============================================================ */

.es-section-header {
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-6);
	margin-bottom: var(--space-10);
	flex-direction: column;
}
@media (min-width: 768px) {
	.es-section-header {
		flex-direction: row;
	}
}
.es-section-header__intro {
	flex: 1 1 auto;
	min-width: 0;
}
.es-section-header__ctas {
	flex-shrink: 0;
	width: fit-content;
}


/* ============================================================
   7. Buttons
   ============================================================ */

.es-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	padding: 17px var(--space-8);
	border-radius: var(--radius-pill);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
	border: var(--border-width-ui) solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	margin: var(--space-6) 0;
}

.es-header__actions .es-btn .wp-block-button__link,
.es-navmenu-card__cta .wp-block-button__link {
	padding: 10px var(--space-5);
	font-size: var(--font-size-sm);
}

.es-btn--outline .wp-block-button__link {
	background-color: var(--bg-white);
	border-color: var(--bg-blue-light);
	color: var(--text-blue);
}
.es-btn--outline .wp-block-button__link:hover {
	border-color: var(--bg-blue);
}
.es-btn--primary .wp-block-button__link {
	background-color: var(--bg-blue);
	color: var(--text-white);
}
.es-btn--primary .wp-block-button__link:hover {
	background-color: var(--color-blue-hover);
}
.es-btn--white .wp-block-button__link {
	background-color: var(--bg-white);
	border-color: var(--bg-gray);
	color: var(--text-dark);
}
.es-btn--white .wp-block-button__link:hover {
	background-color: var(--bg-gray-light);
}
.es-btn--dark .wp-block-button__link {
	background-color: var(--bg-dark);
	border-color: var(--bg-white);
	color: var(--text-white);
}
.es-btn--dark .wp-block-button__link:hover {
	background-color: var(--color-dark-hover);
}
.es-btn--blue-light .wp-block-button__link {
	background-color: var(--bg-blue-mid);
	color: var(--text-white);
}
.es-btn--blue-light .wp-block-button__link:hover {
	background-color: var(--bg-blue);
}
.es-btn--outline-dark .wp-block-button__link {
	background-color: var(--bg-dark);
	border-color: var(--bg-blue);
	color: var(--text-blue);
}
.es-btn--outline-dark .wp-block-button__link:hover {
	background-color: var(--color-dark-hover);
}


/* ============================================================
   8. Numbered badge
   ============================================================ */

.es-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--space-12);
	height: var(--space-12);
	border-radius: var(--radius-full);
	color: var(--text-white);
	font-size: 15px;
	font-weight: var(--font-weight-bold);
}
.es-badge--sm {
	width: 34px;
	height: 34px;
	font-size: var(--font-size-xs);
}
.es-badge--lg {
	width: 56px;
	height: 56px;
	font-size: var(--font-size-md);
}

.es-badge--blue { background-color: var(--bg-blue); }
.es-badge--red { background-color: var(--bg-red); }
.es-badge--purple { background-color: var(--bg-purple); }
.es-badge--green { background-color: var(--bg-green); }
.es-badge--orange { background-color: var(--bg-orange); }
.es-badge--teal { background-color: var(--bg-teal); }


/* ============================================================
   9. Icon tile — colored rounded-square housing a small icon.
   Same shape kept reappearing per-pattern (benefit cards, why-complex,
   evaluation cards, semester cards) with slightly different names;
   consolidated here so new patterns can reuse it directly instead of
   redeclaring it.
   ============================================================ */

.es-icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--space-12);
	height: var(--space-12);
	border-radius: 14px;
	color: var(--text-white);
}
.es-icon-tile svg,
.es-icon-tile img {
	width: 28px;
	height: 28px;
}

.es-icon-tile--blue { background-color: var(--bg-blue); }
.es-icon-tile--red { background-color: var(--bg-red); }
.es-icon-tile--purple { background-color: var(--bg-purple); }
.es-icon-tile--green { background-color: var(--bg-green); }
.es-icon-tile--orange { background-color: var(--bg-orange); }
.es-icon-tile--teal { background-color: var(--bg-teal); }

.es-icon-tile--sm {
	width: 36px;
	height: 36px;
	border-radius: 11px;
}
.es-icon-tile--sm svg,
.es-icon-tile--sm img {
	width: 18px;
	height: 18px;
}


/* ============================================================
   10. Gradient card — full-bleed color gradient panel with
   centered white text. Reuses the vertical gradient tokens from
   variables.css (also the source for the .es-team photo placeholders).
   ============================================================ */

.es-gradient-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 24px;
	padding: var(--space-8);
	color: var(--text-white);
}

.es-gradient-card--blue { background: var(--gradient-blue-vertical); }
.es-gradient-card--red { background: var(--gradient-red-vertical); }
.es-gradient-card--purple { background: var(--gradient-purple-vertical); }
.es-gradient-card--green { background: var(--gradient-green-vertical); }


/* ============================================================
   10b. Video placeholder — centered lowercase label standing in for an
   embed that isn't wired up yet. First built for the Clubs hero; kept
   here (no background-color) so a second usage can supply its own
   fill — white card, gradient panel, whatever the layout needs.
   ============================================================ */

.es-video-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	height: 100%;
	border-radius: 24px;
	color: var(--text-muted);
	font-size: 32px;
	font-weight: 600;
	text-transform: lowercase;
}


/* ============================================================
   11. Hover interactions — small composable behaviors meant to be
   added alongside a component's own class rather than redeclared
   per-pattern. Each one is self-contained (declares its own
   transition), so it works whether or not the host element already
   transitions other properties.
   ============================================================ */

/* Whole-element lift: card rises and picks up a shadow on hover. */
.es-hover-lift {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.es-hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-lg);
}

/* Photo zoom: put this on the hoverable container (card/link) — any
   <img> inside it scales up, so hovering the caption/padding around
   the photo still triggers the zoom, not just the photo itself. */
.es-hover-zoom img {
	transition: transform 0.3s ease;
}
.es-hover-zoom:hover img {
	transform: scale(1.05);
}

/* Background tint: subtle darken for chip/tile-style elements that
   don't warrant a full lift. */
.es-hover-tint {
	transition: background-color 0.2s ease;
}
.es-hover-tint:hover {
	background-color: var(--bg-gray);
}


/* ============================================================
   12. Top accent — thin colored stripe pinned to a card's top edge
   (originally the "why ecosystem" card's own ::before, redeclared
   almost verbatim for a second card design; pulled up here instead).
   Radius defaults to 16px to match most cards in the theme; a card
   with a different corner radius can override it, e.g.:
     .es-eco-card.es-top-accent::before { border-radius: 24px 24px 0 0; }
   ============================================================ */

.es-top-accent {
	position: relative;
}
.es-top-accent::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 16px 16px 0 0;
	background-color: var(--bg-gray);
}
.es-top-accent--blue::before { background-color: var(--bg-blue); }
.es-top-accent--red::before { background-color: var(--bg-red); }
.es-top-accent--orange::before { background-color: var(--bg-orange); }
.es-top-accent--green::before { background-color: var(--bg-green); }
.es-top-accent--purple::before { background-color: var(--bg-purple); }
.es-top-accent--teal::before { background-color: var(--bg-teal); }


/* ============================================================
   13. Divider — plain 1px rule for separating stacked content
   inside a card. Spacing around it is left to the consumer (gap or
   margin), since that varies per layout.
   ============================================================ */

.es-divider {
	display: block;
	border-top: 1px solid var(--bg-gray);
}


/* ============================================================
   14. Hero gradient — blue background + decorative-circle image,
   used by every full-bleed blue hero/banner section in the theme.
   Was declared fresh in each of 5 different hero patterns; pulled
   up here instead. margin-top isn't included since one consumer
   (support-approach) doesn't want it — set it per-section if needed.
   ============================================================ */

.es-hero-gradient {
	position: relative;
	overflow: hidden;
	background-color: var(--bg-blue);
	background-image: url('../img/main-bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}


/* ============================================================
   15. Feature panel — a titled card holding a 2-column grid of small
   icon+label items. First built for the AP hero's "В отличие от
   IELTS и SAT, AP:" callout; no background-color here since consumers
   disagree (light panel + white items vs. white panel + tinted items)
   — set both per-section.
   ============================================================ */

.es-feature-panel {
	border-radius: 24px;
	padding: var(--space-8);
}
.es-feature-panel__title {
	margin: 0 0 var(--space-6);
	color: var(--text-dark);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	text-align: center;
}
.es-feature-panel__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
@media (min-width: 480px) {
	.es-feature-panel__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.es-feature-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-5);
	border-radius: 16px;
	text-align: center;
}
.es-feature-item__text {
	margin: 0;
	color: var(--text-dark);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: 1.4;
}


/* ============================================================
   16. Split layout — narrower intro column beside a wider content
   column, stacking on small screens. First built for the "activity
   selection" section; a content-neutral name so any two-column
   intro-plus-panel section can reuse it directly.
   ============================================================ */

.es-split-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}
@media (min-width: 900px) {
	.es-split-layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
		gap: var(--space-10);
		align-items: start;
	}
}


/* ============================================================
   16b. Trio grid — two equal narrow panels beside one twice-as-wide
   one, stacking on small screens. First built for the AP process
   section (two intro panels + a wide steps panel); reused as-is by
   "Принцип" (two panels + a wide comparison panel).
   ============================================================ */

.es-trio-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: stretch;
}
@media (min-width: 1100px) {
	.es-trio-grid {
		grid-template-columns: 1fr 1fr 2fr;
	}
}


/* ============================================================
   17. Photo circle — a circular photo with icon badges layered on
   top via absolute positioning (a large .es-icon-tile plus an
   optional smaller outlined .es-photo-circle__chip). First built for
   the semester-programs cards; the positions are placeholders set
   per-instance (inline style), not something this component owns.
   ============================================================ */

.es-photo-circle {
	position: relative;
	width: 100%;
	max-width: 260px;
	aspect-ratio: 1 / 1;
}
.es-photo-circle img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.es-photo-circle__tile {
	position: absolute;
	box-shadow: var(--shadow-icon);
}
.es-photo-circle__chip {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--radius-full);
	background-color: var(--bg-white);
	border: var(--border-width-ui) solid currentColor;
	box-shadow: var(--shadow-icon);
}
.es-photo-circle__chip svg { width: 18px; height: 18px; }
.es-photo-circle__chip--blue { color: var(--bg-blue); }
.es-photo-circle__chip--red { color: var(--bg-red); }
.es-photo-circle__chip--orange { color: var(--bg-orange); }
.es-photo-circle__chip--green { color: var(--bg-green); }
.es-photo-circle__chip--purple { color: var(--bg-purple); }
.es-photo-circle__chip--teal { color: var(--bg-teal); }


/* ============================================================
   18. Pill — small inline colored badge, e.g. a highlighted word
   inside a heading/paragraph. First built for the after-school-cards
   "Research" tag; no margin baked in since surrounding text varies.
   ============================================================ */

.es-pill {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	padding: 4px 12px;
	color: var(--text-white);
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--radius-pill);
	line-height: 1.4;
}
.es-pill--blue { background-color: var(--bg-blue); }
.es-pill--red { background-color: var(--bg-red); }
.es-pill--orange { background-color: var(--bg-orange); }
.es-pill--green { background-color: var(--bg-green); }
.es-pill--purple { background-color: var(--bg-purple); }
.es-pill--teal { background-color: var(--bg-teal); }


/* ============================================================
   19. Media panel — titled text block with a photo underneath,
   inside a colored card. First built for the "Проблема" side panels;
   no background-color here since consumers use different tints.
   ============================================================ */

.es-media-panel {
	display: flex;
	flex-direction: column;
	padding: var(--space-6);
	border-radius: 20px;
}
.es-media-panel__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;
}
.es-media-panel__note {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}
.es-media-panel__photo {
	display: block;
	margin-top: var(--space-6);
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	overflow: hidden;
}
.es-media-panel__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}


/* ============================================================
   20. Check row — icon + text in a white pill-corner card. First
   built for the "Проблема" mistake list (cross-only); a color
   modifier on the icon lets the same row work for checkmarks too.
   ============================================================ */

.es-check-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border-radius: 14px;
	background-color: var(--bg-white);
}
.es-check-row__icon {
	display: flex;
	flex-shrink: 0;
}
.es-check-row__icon--blue { color: var(--text-blue); }
.es-check-row__icon--red { color: var(--text-red); }
.es-check-row__icon--orange { color: var(--text-orange); }
.es-check-row__icon--green { color: var(--text-green); }
.es-check-row__icon--purple { color: var(--text-purple); }
.es-check-row__icon--teal { color: var(--text-teal); }
.es-check-row__text {
	margin: 0;
	color: var(--text-dark);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: 1.5;
}


/* ============================================================
   21. Text accent — colored keyword inline within a heading or
   paragraph. The same one-line rule ({ color: var(--text-*) })
   had been redeclared per-pattern (activity/evaluate/semester/
   trajectory/biz/problem __accent) under a different name each
   time; new patterns should reach for this instead.
   ============================================================ */

.es-text-accent--blue { color: var(--text-blue); }
.es-text-accent--red { color: var(--text-red); }
.es-text-accent--orange { color: var(--text-orange); }
.es-text-accent--green { color: var(--text-green); }
.es-text-accent--purple { color: var(--text-purple); }
.es-text-accent--teal { color: var(--text-teal); }


/* ============================================================
   22. Icon cluster — loose wrap of small white circular icon
   badges. First built for the AP principle section's "AP isn't a
   separate course" scatter; content-neutral so it can hold any set
   of icons (subject icons, university crests, etc.).
   ============================================================ */

.es-icon-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}
.es-icon-cluster__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	background-color: var(--bg-white);
	box-shadow: var(--shadow-icon);
}
.es-icon-cluster__item--blue { color: var(--bg-blue); }
.es-icon-cluster__item--red { color: var(--bg-red); }
.es-icon-cluster__item--orange { color: var(--bg-orange); }
.es-icon-cluster__item--green { color: var(--bg-green); }
.es-icon-cluster__item--purple { color: var(--bg-purple); }
.es-icon-cluster__item--teal { color: var(--bg-teal); }


/* ============================================================
   23. Decor blob — the soft corner-circle image used on every
   brand-gradient blue section (Clubs recommended, Clubs final CTA,
   ...). Size/position (--left/--right, vw offsets) still varies per
   section, so that stays scoped per consumer.
   ============================================================ */

.es-decor-blob {
	position: absolute;
	background-image: url('../img/decor/blob-corner.svg');
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
}


/* ============================================================
   24. Callout card — white rounded box pairing an .es-icon-tile with
   a short paragraph. First built for the Clubs hero's "who this is
   for" note; reused by the Admission strategy CTA's method blurb.
   ============================================================ */

.es-callout-card {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	background-color: var(--bg-white);
	border-radius: 20px;
	padding: var(--space-5);
}
.es-callout-card__text {
	margin: 0;
	color: var(--text-muted);
	font-size: 15px;
	line-height: 1.6;
}