/*
 * Aspire Shop — institution storefronts and the platform directory.
 * Reads entirely from tokens.css, so an institution's colour overrides restyle all of it.
 */

/* --- Shared section furniture ------------------------------------------ */

.section { padding-block: var(--sp-7); }
.section--tinted { background: var(--c-surface-alt); }

.section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-bottom: var(--sp-5);
}

.section__title { font-size: var(--fs-2xl); }
.section__title--centred { text-align: center; }

.section__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

.section__link-icon {
	width: 1em;
	height: 1em;
	fill: currentColor;
	transition: transform var(--transition);
}

/* Nudge the arrow instead of underlining — keeps the link clean but still responsive. */
.section__link:hover .section__link-icon { transform: translateX(3px); }

.section__lede {
	margin-bottom: var(--sp-5);
	text-align: center;
	color: var(--c-muted);
}

@media (min-width: 768px) {
	.section { padding-block: var(--sp-8); }
	.section__title { font-size: var(--fs-3xl); }
}

/* --- Banners ------------------------------------------------------------ */

.inst-banners { position: relative; }

.inst-banners__track {
	display: flex;
	overflow: hidden;
}

.inst-banner {
	position: relative;
	flex: 0 0 100%;
	display: flex;
	align-items: flex-end;
	min-height: 380px;
	padding-block: var(--sp-7) var(--sp-8);
	background: var(--c-brand);
	color: #fff;
	overflow: hidden;
}

.inst-banner__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/*
 * Scrim over the image: weighted at the bottom where the panel and search bar sit, fading
 * out entirely before the top so the photo reads clean up there.
 */
.inst-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.45) 35%, rgba(0, 0, 0, 0) 75%);
}
.inst-banner--empty::after { background: none; }

.inst-banner__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

/*
 * The panel the heading, paragraph and button sit in.
 *
 * Only drawn when there is an image to sit against — over the plain brand background it
 * would be a block of the same colour on itself, so it stays invisible there.
 */
.inst-banner__box {
	max-width: 620px;
	padding: var(--sp-5);
	border-radius: var(--radius-lg);
	/* Same bottom-left cut as the buttons and image boxes. */
	border-bottom-left-radius: 0;
}

.inst-banner--has-image .inst-banner__box {
	/* Solid first as the fallback; browsers with color-mix get the translucent version. */
	background: var(--c-brand);
	background: color-mix(in srgb, var(--c-brand) 82%, transparent);
	box-shadow: var(--shadow);
}

@supports (backdrop-filter: blur(1px)) {
	.inst-banner--has-image .inst-banner__box { backdrop-filter: blur(8px); }
}

/* Nothing behind it, so drop the inset too and let the text sit on the banner. */
.inst-banner:not(.inst-banner--has-image) .inst-banner__box {
	padding-inline: 0;
}

.inst-banner__heading {
	max-width: 20ch;
	color: #fff;
	font-size: var(--fs-2xl);
	margin-bottom: var(--sp-3);
}

.inst-banner__sub {
	max-width: 50ch;
	margin-bottom: var(--sp-4);
	color: rgba(255, 255, 255, 0.92);
	font-size: var(--fs-base);
}

.inst-banner__cta { margin: 0; }

/*
 * The headline CTAs. Capitalised in CSS rather than in the content so the casing holds
 * however an editor happens to type the label.
 */
.inst-banner__cta .button,
.intro__cta .button,
.cta__action .button {
	font-weight: var(--fw-medium);
	text-transform: capitalize;
}

@media (min-width: 768px) {
	.inst-banner { min-height: 540px; }
	.inst-banner__box { padding: var(--sp-6); }
	.inst-banner__heading { font-size: var(--fs-3xl); }
	.inst-banner__sub { font-size: var(--fs-lg); }
}

@media (min-width: 1024px) {
	/* A shade under the 4xl step — the full size crowds the panel. */
	.inst-banner__heading { font-size: clamp(2rem, 3.2vw, 2.6rem); }
}

/* --- Inner-page hero ------------------------------------------------------ */

/*
 * The storefront banner reduced to its essentials: same block, same corner treatment,
 * same inset from the screen edges — just no image and a fraction of the height.
 */
.page-hero { padding-inline: 15px; }

.page-hero__block {
	padding-block: var(--sp-5) var(--sp-6);
	background: var(--c-brand);
	border-radius: calc(var(--radius-lg) * 1.5);
	border-bottom-left-radius: 0;
	color: #fff;
}

.page-hero__crumbs {
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.75);
}
.page-hero__crumbs a {
	color: #fff;
	font-weight: var(--fw-medium);
	text-decoration: none;
}
.page-hero__crumbs a:hover { color: #fff; text-decoration: underline; }

.page-hero__sep {
	margin-inline: 0.5em;
	opacity: 0.45;
}

.page-hero__title {
	margin-top: var(--sp-3);
	color: #fff;
	font-size: var(--fs-2xl);
}

@media (min-width: 768px) {
	.page-hero__block { padding-block: var(--sp-6) var(--sp-7); }
	.page-hero__title { font-size: var(--fs-3xl); }
}

/*
 * Single products: breadcrumb only, no block. The trail keeps working while the gallery
 * and buy box stay the first real thing on the page.
 */
.page-hero--plain .page-hero__block {
	padding-block: var(--sp-5) 0;
	background: none;
	border-radius: 0;
	color: inherit;
}
.page-hero--plain .page-hero__crumbs { color: var(--c-muted); }
.page-hero--plain .page-hero__crumbs a { color: var(--c-muted); }
.page-hero--plain .page-hero__crumbs a:hover { color: var(--c-accent-dark); }

/* --- Split banner layout -------------------------------------------------- */

/*
 * Content on a solid colour block, image alongside — no scrim and no translucency,
 * because nothing is sitting on top of the photo any more.
 *
 * Mobile stacks: the image is a static block first, then the panel. Desktop pins the
 * image to the right half of the viewport and lays the panel out in the left half of the
 * container, which lines up exactly because the container is centred.
 */
/* A narrow gutter either side so the rounded block reads as a shape against the page. */
.inst-banners--split .inst-banners__track {
	padding-inline: 15px;
}

.inst-banners--split .inst-banner {
	display: block;
	min-height: 0;
	padding-block: 0;
	background: var(--c-brand);
	/* Rounded on three corners; bottom left stays square, as everywhere else. */
	border-radius: calc(var(--radius-lg) * 1.5);
	border-bottom-left-radius: 0;
	/* Clips the image to the rounded shape so the corners belong to the section. */
	overflow: hidden;
}
.inst-banners--split .inst-banner::after { display: none; }

.inst-banners--split .inst-banner__bg {
	position: relative;
	inset: auto;
	width: 100%;
	height: 240px;
	object-position: center;
}

.inst-banners--split .inst-banner__inner {
	padding-block: var(--sp-6) var(--sp-8);
}

.inst-banners--split .inst-banner__box {
	max-width: none;
	padding: 0;
	background: none;
	box-shadow: none;
	backdrop-filter: none;
}

@media (min-width: 768px) {
	.inst-banners--split .inst-banner {
		position: relative;
		min-height: 460px;
	}

	.inst-banners--split .inst-banner__bg {
		position: absolute;
		top: 0;
		left: 50%;
		/*
		 * Explicit width and height, not auto: an <img> is a replaced element, so
		 * `height: auto` resolves to its intrinsic ratio rather than stretching between
		 * top and bottom, and the picture stops short of the bottom of the block.
		 */
		width: 50%;
		height: 100%;
		bottom: auto;
		right: auto;
		object-fit: cover;
		object-position: center;
		border-radius: 0;
	}

	.inst-banners--split .inst-banner__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		min-height: 460px;
		padding-block: var(--sp-7);
		background: none;
	}

	.inst-banners--split .inst-banner__box {
		grid-column: 1;
		/* Keeps the copy clear of the seam where the image starts. */
		padding-right: var(--sp-8);
	}
}

@media (min-width: 1024px) {
	.inst-banners--split .inst-banner,
	.inst-banners--split .inst-banner__inner { min-height: 540px; }
}

/* Search bar overlapping the bottom of the banner. */
.inst-banners__search {
	position: relative;
	z-index: 3;
	margin-top: calc(var(--sp-6) * -1);
}

/* --- Search bars -------------------------------------------------------- */

.product-search {
	position: relative;
	display: flex;
	gap: var(--sp-2);
}
.product-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border-bottom-right-radius: 0;
}

.product-search--overlay {
	padding: var(--sp-3);
	background: var(--c-surface);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow);
}

.product-search--large input[type="search"] { padding: var(--sp-4) var(--sp-5); }

/* --- Live search panel --------------------------------------------------- */

.live-search { position: relative; }

/* Subtle activity hint on the submit button while a request is in flight. */
.live-search.is-loading button[type="submit"] { opacity: 0.65; }

.live-search__panel {
	position: absolute;
	top: calc(100% + var(--sp-2));
	left: 0;
	right: 0;
	z-index: 60;
	max-height: min(70vh, 460px);
	overflow-y: auto;
	padding: var(--sp-2);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	text-align: left;
}
.live-search__panel[hidden] { display: none; }

.live-search__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.live-search__link {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-2);
	border-radius: var(--radius);
	color: var(--c-ink);
	text-decoration: none;
}
.live-search__link:hover,
.live-search__link.is-active {
	background: var(--c-surface-alt);
	color: var(--c-ink);
}

.live-search__media {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	border-bottom-left-radius: 0;
	background: var(--c-surface-alt);
	overflow: hidden;
}
.live-search__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.live-search__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.live-search__title {
	font-weight: var(--fw-medium);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.live-search__meta {
	color: var(--c-muted);
	font-size: var(--fs-xs);
}
.live-search__price {
	flex: 0 0 auto;
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);
	white-space: nowrap;
}

.live-search__more {
	display: block;
	margin-top: var(--sp-2);
	padding: var(--sp-3);
	border-top: 1px solid var(--c-line);
	color: var(--c-accent-dark);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	text-align: center;
	text-decoration: none;
}
.live-search__more:hover { background: var(--c-surface-alt); border-radius: var(--radius); }

.live-search__empty {
	margin: 0;
	padding: var(--sp-4);
	color: var(--c-muted);
	font-size: var(--fs-sm);
	text-align: center;
}

/* --- Carousels ---------------------------------------------------------- */

.carousel__nav {
	display: flex;
	gap: var(--sp-2);
}

.carousel__arrow {
	width: 40px;
	height: 40px;
	padding: 0;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: 50%;
	color: var(--c-ink);
	font-size: var(--fs-xl);
	line-height: 1;
	cursor: pointer;
}
.carousel__arrow:hover { background: var(--c-surface-alt); color: var(--c-ink); }
.carousel__arrow[disabled] { opacity: 0.35; cursor: default; }

.carousel__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--sp-6);
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: var(--sp-2);
}

.carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
}
.carousel__dot.is-active { background: #fff; }

/* Horizontal scroll-snap rails — no JS needed for the scrolling itself. */
.cat-carousel,
.inst-carousel {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	gap: var(--sp-4);
	margin: 0;
	padding: 0 0 var(--sp-3);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}
.cat-carousel > *,
.inst-carousel > * { scroll-snap-align: start; }

@media (min-width: 600px) {
	.cat-carousel, .inst-carousel { grid-auto-columns: 42%; }
}
@media (min-width: 1024px) {
	/*
	 * Sized off the gap so a full row lands flush with the container edges. A percentage
	 * leaves a ragged strip on the right whenever the item count matches the columns.
	 */
	.cat-carousel { grid-auto-columns: calc((100% - (var(--sp-4) * 3)) / 4); }
	.inst-carousel { grid-auto-columns: calc((100% - (var(--sp-4) * 2)) / 3); }
}

/* --- Category cards ----------------------------------------------------- */

.cat-card__link {
	display: block;
	text-decoration: none;
	color: var(--c-ink);
}

.cat-card__media {
	display: block;
	/* Square — taller than a landscape crop, without going full portrait. */
	aspect-ratio: 1 / 1;
	margin-bottom: var(--sp-3);
	border-radius: var(--radius);
	border-bottom-left-radius: 0;
	background: var(--c-surface-alt);
	overflow: hidden;
}
.cat-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition);
}
.cat-card__link:hover .cat-card__media img { transform: scale(1.04); }

.cat-card__name {
	display: block;
	font-weight: var(--fw-medium);
}
.cat-card__count {
	display: block;
	color: var(--c-muted);
	font-size: var(--fs-sm);
}

/* --- Intro -------------------------------------------------------------- */

.intro { display: grid; gap: var(--sp-6); }

@media (min-width: 900px) {
	.section--intro-split .intro {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: var(--sp-8);
	}
}

.intro__body { color: var(--c-body); }

/* A little more air under the heading before the paragraph. */
.section--intro .section__title { margin-bottom: var(--sp-4); }

.intro__cta { margin: var(--sp-5) 0 0; }

/*
 * Fixed 4:3 frame with the corner cut. The radius and overflow sit on the container
 * rather than the media itself, because an object-fit image overflowing its box ignores
 * a border-radius set directly on it.
 */
.intro__media {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	border-bottom-left-radius: 0;
	overflow: hidden;
	background: var(--c-surface);
}

.intro__media img,
.intro__media video,
.intro__media iframe {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

/* --- Footer CTA --------------------------------------------------------- */

.cta {
	position: relative;
	padding-block: var(--sp-8);
	background: var(--c-brand);
	color: #fff;
	overflow: hidden;
	text-align: center;
}

.cta__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.cta--image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.55);
}

.cta__inner { position: relative; z-index: 2; }
.cta__heading { color: #fff; margin-bottom: var(--sp-3); }
.cta__text {
	max-width: 55ch;
	margin: 0 auto var(--sp-5);
	color: rgba(255, 255, 255, 0.9);
}
.cta__action { margin: 0; }

/* --- Platform directory ------------------------------------------------- */

/* The hero and banners carry their own top spacing — don't double it. */
.site-main--platform { padding-block: 0; }
.single-aspire_institution .site-main { padding-block: 0; }

.platform-hero {
	padding-block: var(--sp-8);
	background: var(--c-surface-alt);
	text-align: center;
}
.platform-hero__lede {
	max-width: 55ch;
	margin: 0 auto var(--sp-5);
	color: var(--c-muted);
	font-size: var(--fs-lg);
}

.inst-finder {
	max-width: 560px;
	margin-inline: auto;
}
.inst-finder__input {
	font-size: var(--fs-lg);
	box-shadow: var(--shadow-sm);
}

.inst-card__link {
	display: block;
	height: 100%;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	border-bottom-left-radius: 0;
	background: var(--c-surface);
	text-decoration: none;
	color: var(--c-ink);
	overflow: hidden;
	transition: box-shadow var(--transition), border-color var(--transition);
}
.inst-card__link:hover {
	border-color: var(--c-accent);
	box-shadow: var(--shadow);
	color: var(--c-ink);
}

.inst-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--c-surface-alt);
}
.inst-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.inst-card__logo {
	position: absolute;
	left: var(--sp-4);
	bottom: calc(var(--sp-4) * -1);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	padding: var(--sp-2);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow-sm);
}
.inst-card__logo img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.inst-card__name {
	display: block;
	padding: var(--sp-6) var(--sp-4) var(--sp-2);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
}
.inst-card__cta {
	display: block;
	padding: 0 var(--sp-4) var(--sp-5);
	color: var(--c-accent-dark);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
}

.inst-card[hidden] { display: none; }

/* --- Institution footer ------------------------------------------------- */

.site-footer__cols { grid-template-columns: 1fr; }

@media (min-width: 768px) {
	.site-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.site-footer__logo {
	width: auto;
	height: auto;
	/* Same mark, same size as the header. */
	max-width: var(--logo-max-w);
	max-height: var(--logo-max-h);
	object-fit: contain;
	margin-bottom: var(--sp-4);
}
.site-footer__about { margin-bottom: var(--sp-4); }

.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer address { font-style: normal; }

/* --- FAQs ---------------------------------------------------------------- */

.section--faqs .section__title { margin-bottom: var(--sp-5); }

.faqs {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-3);
	/*
	 * Items size to their own content rather than stretching to the tallest in the row,
	 * so opening one answer does not drag its neighbour's box open with it.
	 */
	align-items: start;
}

@media (min-width: 768px) {
	.faqs {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-3) var(--sp-4);
	}
}

.faq {
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	border-bottom-left-radius: 0;
	background: var(--c-surface);
	overflow: hidden;
}
.faq[open] { border-color: var(--c-accent); }

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-5);
	color: var(--c-ink);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	list-style: none;
}
/* Hide the native disclosure triangle in both engines. */
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }

/* Hover invites a click to open — once open there is nothing left to invite, so drop it. */
.faq:not([open]) .faq__q:hover { background: var(--c-surface-alt); }

/* Plus that becomes a minus when open — drawn in CSS, so no icon font needed. */
.faq__marker {
	position: relative;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
}
.faq__marker::before,
.faq__marker::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: var(--c-accent);
	transition: transform var(--transition);
}
.faq__marker::after { transform: rotate(90deg); }
.faq[open] .faq__marker::after { transform: rotate(0deg); }

.faq__a {
	padding: 0 var(--sp-5) var(--sp-5);
	color: var(--c-body);
}

/* --- Footer link lists --------------------------------------------------- */

/* The institution footer uses plain lists, so strip markers and indent here. */
.site-footer__cols ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__cols li {
	margin-bottom: var(--sp-3);
}
.site-footer__cols li:last-child { margin-bottom: 0; }

.site-footer__cols a,
.site-footer__social a,
.site-footer__bottom a {
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

.site-footer__cols a:hover,
.site-footer__social a:hover,
.site-footer__bottom a:hover {
	text-decoration: underline;
}

/* --- Contact rows -------------------------------------------------------- */

.footer-contact__item {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
}
.footer-contact__item:last-child { margin-bottom: 0; }

/* Address can run to two lines — keep its badge level with the first one. */
.footer-contact__item:has( address ) { align-items: flex-start; }

.icon-badge {
	flex: 0 0 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	/* Fully round — the only element on the site that keeps all four corners. */
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.45);
	background: none;
}

.icon-badge svg {
	width: 15px;
	height: 15px;
	fill: #fff;
}