/* Catalogue styles: school page only (summary card, photo/video slider, lightbox, course groups, accommodation list, reviews and review form, click-to-load map). Loaded after catalog-detail.css. */
/* School summary above the text */
.ee-intro {
	display: grid;
	gap: 1rem 2rem;
	margin-bottom: 2rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--ee-line);
	border-radius: var(--ee-radius);
	background: var(--ee-soft);
}

@media (min-width: 700px) {
	.ee-intro {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}
	.ee-intro__aside {
		text-align: right;
	}
}

.ee-intro__meta {
	margin: 0 0 0.75rem; /* course pages: stars + review count */
}

/* Key facts: label above value, wrapping with gaps (no separator characters, so a line never starts or ends with one). */
.ee-intro__flag {
	margin: 0 0 0.75rem;
}

.ee-intro__flag .ee-premium {
	margin: 0;
}

.ee-intro__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem 2rem;
	margin: 0;
}

.ee-intro__facts > div {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.ee-intro__facts dt {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #55626b;
}

.ee-intro__facts dd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	margin: 0;
	font-weight: 600;
	color: var(--ee-blue, #243b4a);
}

.ee-intro__rating {
	white-space: nowrap;
}

.ee-intro__main > :last-child {
	margin-bottom: 0;
}

.ee-intro__facts + .ee-highlights {
	margin-top: 1rem;
}

/* The school's message (badge, discount): a calm callout, only as wide as its text. */
.ee-intro__callout {
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	margin: 1rem 0 0;
	padding: 0.55rem 0.9rem;
	border-left: 4px solid var(--ee-green, #32936f);
	border-radius: 0 8px 8px 0;
	background: color-mix(in srgb, var(--ee-pale, #d3e5d7) 45%, #fff);
	color: var(--ee-blue, #243b4a);
	font-weight: 600;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.ee-intro__aside {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: flex-start;
}

@media (min-width: 700px) {
	.ee-intro__aside {
		align-items: flex-end;
	}
}

.ee-intro__aside .ee-item__price {
	font-size: 1.2em;
}

/* Accreditation chips: a list of links to the Accreditations block. */
.ee-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ee-chips li {
	margin: 0;
	padding: 0;
}

.ee-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.2em 0.75em;
	border: 1px solid color-mix(in srgb, var(--ee-green, #32936f) 45%, transparent);
	border-radius: 999px;
	background: var(--ee-pale, #d3e5d7);
	color: #1d5c44;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

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

a.ee-chip:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.ee-chip__icon {
	flex: none;
}

/* "Accreditations" block: one short explanation per label, a link to the official list, an optional logo. */
.ee-accred {
	display: grid;
	gap: 1rem 2rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.ee-accred {
		grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	}
}

.ee-accred__item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--ee-border, var(--ee-line));
	border-radius: var(--ee-r, 14px);
	background: var(--wp--preset--color--base, #fff);
}

.ee-accred__item h3 {
	margin: 0 0 0.35rem;
	font-size: 1.05em;
}

.ee-accred__item p {
	margin: 0 0 0.5rem;
}

.ee-accred__item p:last-child {
	margin-bottom: 0;
}

.ee-accred__logo {
	flex: none;
	width: auto;
	max-width: 5rem;
	height: 3rem;
	object-fit: contain;
}

/* School text and photos side by side (stacked on phones). Not an .ee-catalog box, so the school's own text keeps the
   theme's text styles. */
.ee-school-top {
	display: grid;
	gap: 1.5rem 2.5rem;
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto 2rem;
}

.ee-school-top__text > :first-child {
	margin-top: 0;
}

.ee-school-top__text > :last-child {
	margin-bottom: 0;
}

@media (min-width: 900px) {
	.ee-school-top:not(.ee-school-top--media) {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: start;
	}
}

/* "Why learn Spanish in …?" in the middle of the school text. */
.ee-subheading {
	margin-block: 1.75rem 0.75rem;
}

/* School photos and videos: one slide at a time (scroll-snap), arrows, counter and lightbox from catalog.js. All
   slides share one 3:2 frame, so nothing jumps while they change. */
.ee-slider {
	position: relative;
	margin-block: 2rem;
}

.ee-school-top .ee-slider {
	margin-block: 0;
}

.ee-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	border-radius: var(--ee-r, 14px);
	background: var(--ee-pale, #d3e5d7);
}

/* With the script: arrows and swipe instead of a scrollbar. Without it the scrollbar shows that there is more. */
.ee-slider.is-ready .ee-slider__track {
	scrollbar-width: none;
}

.ee-slider.is-ready .ee-slider__track::-webkit-scrollbar {
	display: none;
}

.ee-slider__slide {
	flex: 0 0 100%;
	aspect-ratio: 3 / 2;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	overflow: hidden;
}

.ee-slider__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The counter ("2 / 7") over the bottom right corner. */
.ee-slider__count {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	margin: 0;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: rgb(10 18 24 / 0.7);
	color: #fff;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

/* Video tile: our own poster (nothing from YouTube is loaded before the click). */
.ee-video__poster {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 1.5rem;
	background: linear-gradient(135deg, var(--ee-blue, #243b4a), color-mix(in srgb, var(--ee-blue, #243b4a) 70%, var(--ee-green, #32936f)));
	color: #fff;
	text-align: center;
	text-decoration: none;
}

.ee-video__play {
	display: grid;
	place-items: center;
	width: 4.25rem;
	height: 4.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-7, #b8492a);
	box-shadow: 0 8px 22px -8px rgb(0 0 0 / 0.6);
	transition: transform 0.15s;
}

.ee-video__play::before {
	content: "";
	margin-left: 0.3rem;
	border-style: solid;
	border-width: 0.8rem 0 0.8rem 1.3rem;
	border-color: transparent transparent transparent #fff;
}

.ee-video__poster:is(:hover, :focus-visible) .ee-video__play {
	transform: scale(1.08);
}

.ee-video__poster:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -6px;
}

.ee-video__title {
	font-weight: 700;
	font-size: 1.1rem;
}

.ee-video__note {
	font-size: 0.85rem;
	opacity: 0.9;
}

/* "Privacy policy" link under the note (a link cannot sit inside the poster link). */
.ee-video {
	position: relative;
}

.ee-video__privacy {
	position: absolute;
	right: 0;
	bottom: 0.6rem;
	left: 0;
	text-align: center;
	font-size: 0.85rem;
}

.ee-video__privacy a {
	color: #fff;
	text-decoration: underline;
}

.ee-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ee-video__play {
		transition: none;
	}
}

.ee-slider__btn,
.ee-lightbox__btn,
.ee-lightbox__close {
	position: absolute;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.92);
	color: #1c1c1c;
	font: 400 1.9rem/1 system-ui, sans-serif;
	cursor: pointer;
	box-shadow: 0 2px 10px rgb(0 0 0 / 0.2);
}

.ee-slider__btn {
	top: 50%;
	transform: translateY(-50%);
}

.ee-slider__btn--prev {
	left: 0.5rem;
}

.ee-slider__btn--next {
	right: 0.5rem;
}

.ee-slider__btn[hidden],
.ee-lightbox__btn[hidden] {
	display: none;
}

/* Lightbox */
.ee-lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.ee-lightbox::backdrop {
	background: rgb(10 18 24 / 0.92);
}

.ee-lightbox[open] {
	display: grid;
	place-items: center;
}

.ee-lightbox img {
	max-width: min(94vw, 1400px);
	max-height: 82dvh;
	width: auto;
	height: auto;
	border-radius: 6px;
}

.ee-lightbox__count {
	position: absolute;
	bottom: 1rem;
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
	color: #fff;
	font-size: 0.9rem;
}

.ee-lightbox__close {
	top: 1rem;
	right: 1rem;
}

.ee-lightbox__btn {
	top: 50%;
	transform: translateY(-50%);
}

.ee-lightbox__btn--prev {
	left: 1rem;
}

.ee-lightbox__btn--next {
	right: 1rem;
}

/* Our personal recommendation, right after the school's description */
.ee-our-take {
	/* Same column as the description above it, so the two read as one text. */
	max-width: var(--wp--style--global--content-size, 650px);
	box-sizing: border-box;
	margin: 2rem auto 2.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--ee-line);
	border-left: 4px solid currentColor;
	border-radius: 0 var(--ee-radius) var(--ee-radius) 0;
}

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

.ee-our-take p {
	margin: 0 0 0.75rem;
}

.ee-our-take p:last-child {
	margin-bottom: 0;
}

/* Review form: one fieldset per rated thing, five native radio stars in DOM order 1 to 5 (left to right).
   A star is filled when it or a later star is chosen (:has); without :has only the chosen star fills. */
.ee-review-form fieldset.ee-review-part {
	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	margin: 0 0 1rem;
	min-width: 0;
}

.ee-review-form fieldset.ee-review-part--error {
	border-color: var(--ee-error, #b3261e);
	border-width: 2px;
}

.ee-review-part legend {
	font-weight: 600;
	padding: 0 0.25rem;
}

.ee-review-scale {
	margin: 0 0 0.25rem;
}

.ee-review-form .ee-required {
	font-weight: 600;
}

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

.ee-review-errors {
	border: 2px solid var(--ee-error, #b3261e);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	margin: 0 0 1rem;
	color: var(--ee-error, #b3261e);
}

.ee-review-errors p {
	margin: 0 0 0.25rem;
}

.ee-review-errors ul {
	margin: 0;
	padding-left: 1.25rem;
}

.ee-review-errors a {
	color: inherit;
	font-weight: 600;
}

.ee-review-error {
	margin: 0.25rem 0 0;
	color: var(--ee-error, #b3261e);
	font-weight: 600;
}

.ee-rate {
	--ee-star-off: #6b6b6b; /* 5:1 on white, so empty stars pass the 3:1 rule for graphics */
	--ee-star-on: var(--wp--preset--color--accent-7, #b8492a);
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem;
}

.ee-rate input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

/* 44 px touch targets (WCAG 2.5.8 asks for 24). Five stars fit into 320 px. */
.ee-rate label {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 2.75rem;
	height: 2.75rem;
	cursor: pointer;
	font-size: 2rem;
	line-height: 1;
	color: var(--ee-star-off);
}

/* Empty star = outline glyph, filled star = solid glyph: the state is not shown by colour alone. */
.ee-rate label::before {
	content: "☆";
}

.ee-rate input:checked + label,
.ee-rate label:has(~ input:checked),
.ee-rate label:hover,
.ee-rate label:has(~ label:hover) {
	color: var(--ee-star-on);
}

.ee-rate input:checked + label::before,
.ee-rate label:has(~ input:checked)::before,
.ee-rate label:hover::before,
.ee-rate label:has(~ label:hover)::before {
	content: "★";
}

.ee-rate input:focus-visible + label {
	outline: 3px solid var(--wp--preset--color--contrast, #111);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Reviews */
.ee-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
}

.ee-review {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 1.25rem;
	border: 1px solid var(--ee-line);
	border-radius: var(--ee-radius);
}

.ee-review blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1em;
	font-style: normal;
}

.ee-review blockquote p {
	margin: 0 0 0.5rem;
}

.ee-review__title {
	font-weight: 600;
}

.ee-review figcaption {
	margin-top: auto;
	color: var(--ee-muted);
	font-size: 0.9em;
}

/* School map (loaded on click; has data-src – the map of Spain shares the class "ee-map"). */
.ee-map[data-src] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	box-sizing: border-box; /* the 16/9 box keeps its height when the padding is removed on load */
	aspect-ratio: 16 / 9;
	max-height: 26rem;
	border-radius: var(--ee-radius);
	background: var(--ee-soft);
	padding: 1rem;
	text-align: center;
}

.ee-map[data-src].is-loaded {
	padding: 0;
	overflow: hidden;
}

.ee-map[data-src] iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.ee-map__note {
	margin: 0;
	font-size: 0.85em;
	color: #55626b;
}

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

/* School key-facts card: a clear white card with the price and the button on the right. It starts below the breadcrumbs
   (they sit directly under the photo header), so it must not be pulled up over them: no negative margin, no z-index. */
.ee-intro {
	padding: 1.5rem 1.75rem;
	margin-top: 0.5rem;
	box-shadow: var(--ee-shadow-lg);
}

@media (max-width: 599px) {
	.ee-intro {
		padding: 1.15rem 1rem;
	}
}

.ee-intro__aside .ee-item__price {
	font-size: 1.45em;
	font-weight: 700;
}

/* Grouped course list on school pages */
.ee-list-note {
	margin: -0.25rem 0 1rem;
}

.ee-list-heading {
	margin: 2rem 0 0.75rem !important;
	font-size: 0.85em !important;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ee-green);
}

/* Reviews */
.ee-review {
	padding: 1.5rem;
}

@media print {
	.ee-more {
		display: none;
	}
	.ee-acc-list > [hidden] {
		display: block;
	}
}

/* School page: course types other than group courses as closed bars (accordion), clearly bigger than the course
   rows inside them so the two kinds of expander are not confused. */
.ee-course-group {
	margin: 1.25rem 0;
	border: 1px solid var(--ee-border, rgb(16 24 40 / 0.08));
	border-radius: var(--ee-r, 14px);
	background: color-mix(in srgb, var(--ee-pale, #d3e5d7) 45%, #fff);
}

.ee-course-group > summary {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.1rem 1.4rem;
	cursor: pointer;
	list-style: none;
}

.ee-course-group > summary::-webkit-details-marker {
	display: none;
}

.ee-course-group > summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
	border-radius: var(--ee-r, 14px);
}

.ee-course-group__title {
	font-weight: 700;
	font-size: 1.2em;
	color: var(--ee-blue, #243b4a);
}

.ee-course-group__count {
	padding: 0.1em 0.65em;
	border-radius: 999px;
	background: #fff;
	color: #1d5c44;
	font-size: 0.85em;
	font-weight: 600;
}

.ee-course-group > summary .ee-expand__icon {
	margin-left: auto;
	width: 0.75rem;
	height: 0.75rem;
	border-width: 3px;
}

.ee-course-group[open] > summary .ee-expand__icon {
	transform: rotate(225deg) translateY(-2px);
}

.ee-course-group__body {
	padding: 0 1rem 0.5rem;
}

.ee-course-group__body > .ee-expand:last-child {
	margin-bottom: 0.5rem;
}

/* "Show more accommodation (N)" */
.ee-more {
	margin: 0.25rem 0 0;
}

.ee-acc-list > [hidden] {
	display: none;
}