/* Estudia catalogue styles, shared part: loaded on every page that shows any catalogue component. Page-specific parts
   (catalog-*.css) are enqueued by Frontend\CatalogPages only where their components appear; see the plugin README
   ("CSS files"). Inherits the theme's fonts and colours, like booking.css. */
/* Estudia city / school / course pages. Inherits the theme's fonts and colours, like booking.css. */
.ee-catalog {
	--ee-highlight: var(--wp--preset--color--accent-1, #ffe58a);
	--ee-line: color-mix(in srgb, currentColor 18%, transparent);
	--ee-soft: color-mix(in srgb, currentColor 5%, transparent);
	--ee-muted: color-mix(in srgb, currentColor 65%, transparent);
	--ee-radius: 8px;
	max-width: 1200px;
	margin-inline: auto;
}

.ee-catalog h2 {
	margin: 0 0 1rem;
}

.ee-catalog h3 {
	font-size: 1.1em;
	margin: 1.25rem 0 0.5rem;
}

.ee-section {
	margin-block: 2.5rem;
}

.ee-note,
.ee-muted {
	color: var(--ee-muted);
}

.ee-note {
	font-size: 0.95em;
	margin: 0.75rem 0;
}

/* Cards: schools, courses, accommodation */
.ee-item {
	display: grid;
	gap: 1rem 1.5rem;
	padding: 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid var(--ee-line);
	border-radius: var(--ee-radius);
}

.ee-item__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 6px;
}

.ee-item__title {
	display: inline;
	margin: 0 0.5rem 0 0 !important;
	font-size: 1.2em !important;
}

.ee-item__title a {
	text-decoration: none;
}

.ee-item__title a:hover {
	text-decoration: underline;
}

.ee-item__meta {
	margin: 0.4rem 0 0;
	color: var(--ee-muted);
	font-size: 0.9em;
}

.ee-item__text {
	margin: 0.6rem 0 0;
}

.ee-item__aside {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
}

.ee-item__price {
	flex-basis: 100%;
	font-weight: 600;
	white-space: nowrap;
}

@media (max-width: 699px) {
	/* Phones: a small square thumbnail beside the name instead of a full-width photo, so a list of schools
	   stays short. */
	.ee-item.has-image {
		grid-template-columns: 84px minmax(0, 1fr);
		align-items: start;
	}
	.ee-item.has-image .ee-item__image img {
		aspect-ratio: 1;
	}
	.ee-item.has-image .ee-item__aside {
		grid-column: 1 / -1;
	}
}

@media (min-width: 700px) {
	.ee-item {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}
	.ee-item.has-image {
		grid-template-columns: 180px minmax(0, 1fr) auto;
	}
	.ee-item__aside {
		flex-direction: column;
		align-items: flex-end;
		text-align: right;
	}
	.ee-item__price {
		flex-basis: auto;
	}
}

.ee-catalog .wp-element-button,
.ee-link-button {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	white-space: nowrap;
	text-decoration: none;
}

/* Same size for the primary (theme) button and the secondary link button side by side. */
.ee-item__aside :is(.wp-element-button, .ee-link-button) {
	box-sizing: border-box;
	min-width: 7.5rem;
	padding: 0.55rem 1.1rem;
	border: 1px solid transparent;
	font-size: 0.95rem;
	line-height: 1.3;
	text-align: center;
}

.ee-link-button {
	border: 1px solid var(--ee-line) !important;
	border-radius: var(--wp--custom--button--border--radius, 6px);
	color: inherit;
}

.ee-link-button:hover {
	background: var(--ee-soft);
}

.ee-catalog :is(a, .wp-element-button):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Premium partners: listed first in their city, with a label and a coloured frame. */
.ee-premium {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-left: 0.4em;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-7, #b8492a);
	color: #fff;
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.02em;
	vertical-align: 0.15em;
}

.ee-premium::before {
	content: "★";
	font-size: 0.9em;
}

.ee-item.is-premium {
	border: 2px solid var(--wp--preset--color--accent-7, #b8492a);
	background: var(--ee-soft);
}

.ee-item__body > .ee-premium {
	margin: 0 0.4em 0.4rem 0; /* the pill comes before the school name, on the same line */
}

.ee-badge {
	display: inline-block;
	padding: 0.1em 0.55em;
	border-radius: 999px;
	background: var(--ee-highlight);
	color: #1a1a1a;
	font-size: 0.8em;
	font-weight: 600;
	vertical-align: 0.15em;
}

/* "Book a course" buttons (city, school, course lists): terracotta, white text 5.2:1. */
.wp-element-button.ee-btn-book {
	background-color: var(--wp--preset--color--accent-7, #b8492a);
	color: #fff;
}

.wp-element-button.ee-btn-book:is(:hover, :focus-visible) {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-7, #b8492a) 85%, #000);
	color: #fff;
	box-shadow: 0 8px 18px -8px rgb(184 73 42 / 0.7);
}

/* Rating star glyph in text (city facts, home stats, course rows): terracotta. */
.ee-star.ee-star {
	font-size: inherit;
	color: var(--wp--preset--color--accent-7, #b8492a);
}

.ee-item__price small {
	display: block;
	font-weight: 400;
	font-size: 0.85em;
	color: #55626b;
}

/* (i) next to a "from" price (Frontend\PriceInfo, catalog.js): a button toggling a short note. The icon is 18 px, the hit area
   44 px (::after). The note is absolutely positioned under the icon (catalog.js keeps it inside the viewport), so no card clips it. */
.ee-info {
	position: relative;
	display: inline-block;
	margin-inline-start: 0.35rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	vertical-align: middle;
	white-space: normal;
}

.ee-info__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	background: none;
	color: var(--ee-blue, #243b4a);
	font: italic 700 12px/1 Georgia, "Times New Roman", serif;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.ee-info__btn::after {
	content: "";
	position: absolute;
	inset: -13px;
}

.ee-info__btn:is(:hover, [aria-expanded="true"]) {
	background: var(--ee-blue, #243b4a);
	color: #fff;
}

.ee-info__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.ee-info__pop {
	position: absolute;
	z-index: 30;
	top: calc(100% + 10px);
	left: 0;
	width: min(18rem, calc(100vw - 2rem));
	box-sizing: border-box;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--ee-line);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 10px 28px -10px rgb(0 0 0 / 0.35);
	color: #1a1a1a;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.45;
	text-align: start;
	text-transform: none;
	white-space: normal;
}

.ee-info__pop[hidden] {
	display: none;
}

.ee-info__pop.is-above {
	top: auto;
	bottom: calc(100% + 10px);
}

/* "Why this school" / "Why book with us" */
.ee-highlights {
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
}

.ee-highlights li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: 0.35rem;
}

.ee-highlights li::before {
	content: "✓";
	position: absolute;
	left: 0;
	font-weight: 700;
	color: #1e7a3d;
}

.ee-why-us {
	margin-block: 2.5rem;
	padding: 1.25rem 1.5rem;
	border-left: 4px solid var(--ee-highlight);
	background: var(--ee-soft);
	border-radius: 0 var(--ee-radius) var(--ee-radius) 0;
}

.ee-why-us h2 {
	font-size: 1.3em;
	margin-bottom: 0.5rem;
}

/* Stars: one glyph string, filled by a gradient to the rating (half-star steps). */
.ee-stars {
	--ee-stars: 0%;
	display: inline-block;
	line-height: 1;
	white-space: nowrap; /* No letter-spacing: it would shift the fill so 4 stars look like 5. */
	background: linear-gradient(90deg, var(--wp--preset--color--accent-7, #b8492a) var(--ee-stars), color-mix(in srgb, currentColor 25%, transparent) var(--ee-stars));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ee-stars::before {
	content: "★★★★★";
}

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

/* Map of Spain ([estudia_map]) */
.ee-map {
	margin-block: 1.5rem 2.5rem;
}

/* ═══ Modern look (2026-09) ═══════════════════════════════════════════════════════════════════
   Softer cards with shadows, rounder corners, hover lift; home page components. Later rules on purpose
   override the plainer ones above. */
:root {
	--ee-r: 14px;
	--ee-border: rgb(16 24 40 / 0.08);
	--ee-shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 1px 3px rgb(16 24 40 / 0.08);
	--ee-shadow-lg: 0 14px 30px -10px rgb(16 24 40 / 0.22);
	--ee-green: var(--wp--preset--color--accent-3, #32936f);
	--ee-blue: var(--wp--preset--color--accent-4, #243b4a);
	--ee-pale: var(--wp--preset--color--accent-1, #d3e5d7);
}

.ee-catalog {
	--ee-radius: var(--ee-r);
}

.ee-item {
	border-color: var(--ee-border);
	border-radius: var(--ee-r);
	background: var(--wp--preset--color--base, #fff);
	box-shadow: var(--ee-shadow);
}

.ee-item {
	transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.ee-item:hover {
	box-shadow: var(--ee-shadow-lg);
	border-color: transparent;
}

.ee-item:hover {
	transform: translateY(-2px);
}

.ee-item.is-premium {
	border: 2px solid var(--wp--preset--color--accent-7, #b8492a);
	background: #fff;
}

.ee-item__image img {
	border-radius: 10px;
}

.ee-item__price {
	color: var(--ee-blue);
	font-size: 1.05em;
}

.ee-badge {
	background: var(--ee-pale);
	color: #1d5c44;
	padding: 0.2em 0.7em;
	letter-spacing: 0.01em;
}

/* School tiles (CatalogPages::school_list, card(['whole' => true])): the whole tile opens the school. The ONLY link in the
   tile is the title; its ::after stretches over the tile (an article, not a table row: the iPhone bug with stretched links
   was in table rows). The button is a label (span, aria-hidden). Other controls, e.g. the (i) price note, sit above the
   stretched layer (z-index 2) and keep working. */
.ee-item--link {
	position: relative;
	cursor: pointer;
}

.ee-item--link .ee-item__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--ee-r);
}

.ee-catalog .ee-item--link .ee-item__title a:focus-visible {
	outline: none;
}

.ee-item--link .ee-item__title a:focus-visible::after {
	outline: 3px solid var(--ee-blue);
	outline-offset: 2px;
}

.ee-item--link:hover .ee-item__title a {
	text-decoration: underline;
}

.ee-item--link .ee-info {
	z-index: 2;
}

/* A tile with an open (i) note or the pointer on it is painted above the following tiles (they are positioned too). */
.ee-item--link:is(:hover, :focus-within),
.ee-item--link:has(.ee-info__btn[aria-expanded="true"]) {
	z-index: 5;
}

.ee-item__price.is-muted {
	font-size: 0.95em;
	font-weight: 400;
	color: var(--ee-muted);
}

@media (max-width: 699px) {
	/* Phone tile, fixed order: photo (16:9), name, city, one quiet line (rating, at most one tag), a 2-line description,
	   bottom row (price left, button right). Every optional part is simply absent; nothing leaves a gap. */
	.ee-item--link.has-image {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.8rem;
		padding: 0.9rem;
	}
	.ee-item--link.has-image .ee-item__image img {
		aspect-ratio: 16 / 9;
	}
	.ee-item--link .ee-item__body {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.3rem 0.6rem;
		min-width: 0;
	}
	.ee-item--link .ee-item__title {
		order: 1;
		flex: 0 0 100%;
		margin: 0 !important;
		font-size: 1.2rem !important;
		line-height: 1.25;
		overflow-wrap: anywhere;
	}
	.ee-item--link .ee-item__meta {
		display: contents; /* city / rating / class size become items of the body row */
	}
	.ee-item--link .ee-item__meta > [aria-hidden="true"],
	.ee-item--link .ee-item__class {
		display: none;
	}
	.ee-item--link .ee-item__city {
		order: 2;
		flex: 0 0 100%;
		margin-top: -0.1rem;
	}
	.ee-item--link .ee-item__rating {
		order: 3;
		font-size: 0.9rem;
		white-space: nowrap;
	}
	.ee-item--link .ee-item__body > .ee-premium {
		order: 4;
		margin: 0;
		vertical-align: baseline;
	}
	.ee-item--link .ee-badge {
		order: 5;
		vertical-align: baseline;
	}
	.ee-item--link .ee-premium ~ .ee-badge {
		display: none; /* one tag at most on a phone */
	}
	.ee-item--link :is(.ee-highlights, .ee-item__text) {
		order: 6;
		flex: 0 0 100%;
		margin: 0.15rem 0 0;
	}
	.ee-item--link .ee-highlights li:nth-child(n + 2) {
		display: none;
	}
	.ee-item--link :is(.ee-highlights li, .ee-item__text) {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
		margin-bottom: 0;
		font-size: 0.95rem;
	}
	.ee-item--link .ee-item__aside {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 0.75rem;
	}
	.ee-item--link .ee-item__price {
		flex: 1 1 auto;
		min-width: 0;
		white-space: normal;
		font-size: 1rem;
	}
	.ee-item--link .ee-item__aside .wp-element-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		min-height: 44px;
		margin-inline-start: auto;
	}
}

/* Key figures under the photo header. The dividers are real 1px borders (a grid gap over a coloured background came out
   thicker or thinner depending on the position at fractional widths and let the photo show through). */
.ee-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-radius: var(--ee-r);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--ee-shadow-lg);
}

@media (min-width: 782px) {
	.ee-stats {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		grid-auto-flow: column;
	}
}

.ee-stats li {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 1.1rem 1.25rem;
	background: #fff;
	text-align: center;
}

.ee-stats li:nth-child(even) {
	border-inline-start: 1px solid var(--ee-border);
}

.ee-stats li:nth-child(n + 3) {
	border-block-start: 1px solid var(--ee-border);
}

@media (min-width: 782px) {
	.ee-stats li:nth-child(n) {
		border-block-start: 0;
		border-inline-start: 1px solid var(--ee-border);
	}
	.ee-stats li:first-child {
		border-inline-start: 0;
	}
}

.ee-stats strong {
	font-size: 1.6rem;
	line-height: 1.2;
	color: var(--ee-blue);
}

.ee-stats span {
	font-size: 0.9rem;
	color: var(--wp--preset--color--accent-6, #6b6b6b);
}

/* Asterisk after an average rating. Always the same plain inline glyph hugging the number (no padding, no flex gap,
   no space character in front); its note is in the site footer (theme .estudia-footer__note). */
.ee-rating-star {
	display: inline;
	margin: 0 0 0 0.1em;
	padding: 0;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
}

.ee-rating-star__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Home page articles ([estudia_posts]): three cards like the blog's post grid. */
.ee-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 2rem 1.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.ee-posts > li {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
}

.ee-posts .wp-block-post-featured-image {
	margin: 0;
}

.ee-posts .wp-block-post-title {
	margin: 0;
}

/* Items the random pick left out (catalog.js); also before the script runs. */
[data-ee-pick] > [hidden] {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.ee-item {
		transition: none;
		transform: none !important;
	}
}

/* Speed: sections further down a catalogue page (course lists with their price tables, accommodation, reviews …)
   are laid out and painted only when they come near the screen. The content stays in the HTML for search engines
   and the "find in page" of browsers. */
.ee-catalog .ee-section {
	content-visibility: auto;
	contain-intrinsic-size: auto 900px;
}

/* content-visibility: auto implies paint containment, which clips an open (i) note at the edge of the section. The section
   is on screen while a note is open, so it is laid out in full meanwhile (catalog.js sets the note's position). */
.ee-catalog .ee-section:has(.ee-info__btn[aria-expanded="true"]) {
	content-visibility: visible;
}

/* Booking status page: 'Prefer one payment?' */
.ee-pay-full {
	margin: 1.5rem 0;
	padding: 1.25rem 1.4rem;
	border-radius: var(--ee-r);
	background: color-mix(in srgb, var(--ee-pale) 40%, #fff);
	border: 1px solid var(--ee-border);
}

.ee-pay-full h3 {
	margin-top: 0 !important;
}

/* Price match: full-width banner above the footer, red like the logo. */
.ee-price-match {
	--ee-red: #a91f23;
	margin: 3rem 0 0;
	border-block: 2px solid var(--ee-red);
	background: #fdf4f4;
}

.ee-price-match__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.5rem 1.25rem;
}

.ee-price-match__icon {
	flex: none;
	width: 3.4rem;
	height: 3.4rem;
	color: var(--ee-red);
}

.ee-price-match__text {
	flex: 1 1 320px;
}

.ee-price-match__title {
	margin: 0 0 0.3rem;
	font-size: 1.35rem;
	line-height: 1.25;
	color: var(--ee-blue);
}

.ee-price-match__text p {
	margin: 0;
	line-height: 1.5;
}

.ee-price-match__text .ee-price-match__small {
	margin-top: 0.35rem;
	font-size: 0.82rem;
	color: var(--wp--preset--color--accent-6, #6b6b6b);
}

.ee-price-match__link {
	flex: none;
	padding: 0.6rem 1.2rem;
	border: 2px solid var(--ee-red);
	border-radius: 999px;
	color: var(--ee-red);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.ee-price-match__link:hover,
.ee-price-match__link:focus-visible {
	background: var(--ee-red);
	color: #fff;
}

/* Key figures: the price match links to its conditions. */
.ee-stats__link {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	color: inherit;
	text-decoration: none;
}

.ee-stats__link:hover span {
	text-decoration: underline;
}

/* Breadcrumbs (Seo\Breadcrumbs): small, muted, directly under the photo header or at the top of the content. Links keep a
   24 px tap target; long names are cut with an ellipsis (CSS only); the list wraps to a second line instead of overflowing. */
.ee-breadcrumbs {
	font-size: 0.875rem;
	line-height: 1.4;
	margin-block: 0 0.25rem;
	color: var(--wp--preset--color--accent-6, #6b6b6b);
}

.wp-block-group > .ee-breadcrumbs + * {
	margin-block-start: 0.75rem;
}

.ee-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ee-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	max-width: 100%;
	margin: 0;
}

.ee-breadcrumbs li + li::before {
	content: "›";
	content: "›" / "";
	flex: none;
	margin-inline: 0.35rem;
	color: color-mix(in srgb, currentColor 70%, transparent);
}

.ee-breadcrumbs a,
.ee-breadcrumbs [aria-current] {
	display: inline-block;
	min-height: 1.5rem;
	max-width: 22ch;
	padding-block: 0.1rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.3;
}

.ee-breadcrumbs a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-underline-offset: 0.2em;
}

.ee-breadcrumbs a:hover {
	color: var(--wp--preset--color--accent-4, #243b4a);
	text-decoration-color: currentColor;
}

.ee-breadcrumbs [aria-current] {
	max-width: 34ch;
	color: var(--wp--preset--color--accent-4, #243b4a);
	font-weight: 600;
}

@media (min-width: 782px) {
	.ee-breadcrumbs a {
		max-width: 28ch;
	}

	.ee-breadcrumbs [aria-current] {
		max-width: 48ch;
	}
}

/* Articles: the text is a narrower column in the middle, the breadcrumbs start at its left edge. */
.single-post .ee-breadcrumbs.alignwide {
	max-width: var(--wp--style--global--content-size, 720px);
}