/* ==========================================================================
   Alice Academy — homepage components.

   Everything here is a component the base theme does not already cover: the
   hero slider, the page H1 strip, the promo strip, the section headers and
   rails, the light/dark product campaigns, the who-we-are block, the category
   circles, the SEO/FAQ block and the mid-page/footer banners.

   Colour comes from the --aa-* tokens in theme.css. The only literal colours
   are the near-black #16121a (as rgba scrims) and the two campaign gradient
   stops — everything else stays token-driven so a palette change is central.
   Where a display face is needed on a non-heading element it is set as
   var(--aa-font-display, "Archivo", …) so it works with or without the token.
   ========================================================================== */

/* ---------------------------------------------------------- shared button modifiers */

/* The base .aa-btn (shape, Archivo uppercase, ink→rose) lives in theme.css;
   these add the two other Alice button skins the home sections need. */
.aa-btn--rose {
	background: var(--aa-rose);
	border-color: var(--aa-rose);
	color: var(--aa-surface);
}
.aa-btn--rose:hover,
.aa-btn--rose:focus-visible {
	background: var(--aa-surface);
	border-color: var(--aa-surface);
	color: var(--aa-ink);
}

.aa-btn--outline {
	background: transparent;
	border: 1.5px solid var(--aa-ink);
	color: var(--aa-ink);
}
.aa-btn--outline:hover,
.aa-btn--outline:focus-visible {
	background: var(--aa-ink);
	border-color: var(--aa-ink);
	color: var(--aa-surface);
}

/* White pill with a lifted shadow, for CTAs sitting on dark photography. */
.aa-btn--light {
	background: var(--aa-surface);
	border-color: var(--aa-surface);
	color: var(--aa-ink);
	box-shadow: 0 10px 30px rgba(22, 18, 26, .3);
}
.aa-btn--light:hover,
.aa-btn--light:focus-visible {
	background: var(--aa-rose);
	border-color: var(--aa-rose);
	color: var(--aa-surface);
}

/* Campaign and who-we-are CTAs use the standard (small) radius rather than the
   base button's pill; the hero/promo/banner CTAs keep the pill. */
.aa-campaign__cta,
.aa-whoweare__cta { border-radius: var(--aa-radius, .375rem); }

/* Trailing chevron in a CTA reads as a forward arrow. */
.aa-hero__cta svg,
.aa-campaign__cta svg,
.aa-promo__cta svg,
.aa-banner__cta svg {
	width: 1em;
	height: 1em;
	margin-inline-start: .1em;
}

/* -------------------------------------------------------------------- hero */

.aa-hero {
	position: relative;
	background: var(--aa-dark);
	overflow: hidden;
}

.aa-hero__viewport { position: relative; }

.aa-hero__track {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	scroll-behavior: smooth;
}
.aa-hero__track::-webkit-scrollbar { display: none; }
.aa-hero__track:focus-visible { outline: 2px solid var(--aa-surface); outline-offset: -2px; }

.aa-hero__slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

.aa-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Bottom-up on a phone so the copy sits legibly on the dark base. */
.aa-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(22, 18, 26, .25) 0%, rgba(22, 18, 26, .78) 100%);
}

.aa-hero__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding-block: 1.75rem;
}

.aa-hero__copy { max-width: 34rem; }

.aa-hero__title {
	margin: 0;
	font-family: var(--aa-font-display, "Archivo", "Segoe UI", system-ui, sans-serif);
	font-weight: 800;
	font-size: clamp(2.125rem, 6vw, 4rem);
	line-height: .98;
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--aa-surface);
	text-shadow: 0 4px 30px rgba(22, 18, 26, .35);
	text-wrap: balance;
}

.aa-hero__sub {
	margin: .9rem 0 0;
	max-width: 42ch;
	font-size: .9rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, .85);
}

.aa-hero__ctas { margin-block-start: 1.5rem; }

/* --- hero controls --- */

.aa-hero__dots {
	position: absolute;
	inset-block-end: 1.1rem;
	inset-inline: 0;
	display: flex;
	justify-content: center;
	gap: .4rem;
	z-index: 3;
}

.aa-hero__dot {
	width: 1.5rem;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: var(--aa-radius-pill, 999px);
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
	transition: background .2s ease, width .2s ease;
}
.aa-hero__dot[aria-selected="true"] { width: 1.75rem; background: var(--aa-surface); }

.aa-hero__nav {
	position: absolute;
	inset-block-start: 50%;
	translate: 0 -50%;
	z-index: 3;
	display: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	background: color-mix(in srgb, var(--aa-ink) 35%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--aa-surface);
	opacity: 0;
	transition: opacity .2s ease, background .2s ease;
	cursor: pointer;
}
.aa-hero__nav svg { width: 1.15rem; height: 1.15rem; }
.aa-hero__nav--prev { inset-inline-start: 1rem; }
.aa-hero__nav--next { inset-inline-end: 1rem; }
.aa-hero__nav:hover { background: color-mix(in srgb, var(--aa-ink) 60%, transparent); }

.aa-hero__viewport:hover .aa-hero__nav,
.aa-hero__nav:focus-visible { opacity: 1; }

@media (min-width: 640px) {
	.aa-hero__slide { aspect-ratio: 16 / 10; }
	.aa-hero__scrim {
		background: linear-gradient(90deg, rgba(22, 18, 26, .62) 0%, rgba(22, 18, 26, .06) 100%);
	}
	.aa-hero__overlay { align-items: center; }
}

@media (min-width: 768px) {
	.aa-hero__slide { aspect-ratio: auto; height: 700px; }
}

@media (min-width: 1024px) {
	.aa-hero__nav { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
	.aa-hero__track { scroll-behavior: auto; }
	.aa-hero__dot { transition: none; }
	.aa-hero__nav { transition: none; }
}

/* -------------------------------------------------------------- page H1 strip */

.aa-home-h1 {
	margin: 0;
	padding-block: 1.5rem .25rem;
	font-family: var(--aa-font-display, "Archivo", "Segoe UI", system-ui, sans-serif);
	font-weight: 700;
	font-size: .9375rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-align: center;
	color: var(--aa-muted);
}
@media (min-width: 640px) { .aa-home-h1 { font-size: 1.0625rem; } }

/* ----------------------------------------------------------------- section header */

/* The home rails centre their header and stack the eyebrow, title and a
   "View all" link. .aa-sechead itself is defined in theme.css. */
.aa-sechead--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
}

.aa-sechead__eyebrow {
	margin: 0 0 .6rem;
	font-family: var(--aa-font-display, "Archivo", "Segoe UI", system-ui, sans-serif);
	font-weight: 800;
	font-size: .6875rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--aa-rose);
}

.aa-sechead--center .aa-sechead__intro { margin: 0; }

.aa-sechead__accent { color: var(--aa-rose); }

/* The "View all" link, as a centred outline pill under the heading. */
.aa-sechead--center .aa-sechead__link {
	display: inline-flex;
	align-items: center;
	padding: .7rem 1.4rem;
	border: 1.5px solid var(--aa-hairline-strong);
	border-radius: var(--aa-radius-pill, 999px);
	font-family: var(--aa-font-display, "Archivo", "Segoe UI", system-ui, sans-serif);
	font-weight: 700;
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--aa-ink);
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.aa-sechead--center .aa-sechead__link:hover,
.aa-sechead--center .aa-sechead__link:focus-visible {
	border-color: var(--aa-ink);
	background: var(--aa-ink);
	color: var(--aa-surface);
}

/* Soft-toned section ground for the Featured rail. */
.aa-section--soft { background: var(--aa-surface-soft); }

/* On rails the card is borderless and transparent — the editorial look.
   Two classes beat card.css's single-class rules on specificity. */
.aa-rail__track .aa-card {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}
.aa-rail__track .aa-card:hover { border-color: transparent; box-shadow: none; }

/* ---------------------------------------------------------------- campaign */

/* Tight vertical rhythm — the rails above and below already carry padding. */
.aa-campaign { padding-block: 1.5rem; }

.aa-campaign__panel {
	display: grid;
	overflow: hidden;
	border-radius: var(--aa-radius-lg);
}

.aa-campaign__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

.aa-campaign__img {
	width: 100%;
	max-width: 22.5rem;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
	scale: 1.08;
}

.aa-campaign__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 2rem 3rem;
}

.aa-campaign__eyebrow {
	margin: 0 0 .75rem;
	font-family: var(--aa-font-display, "Archivo", "Segoe UI", system-ui, sans-serif);
	font-weight: 800;
	font-size: .6875rem;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.aa-campaign__title {
	margin: 0;
	font-weight: 800;
	font-size: 1.875rem;
	line-height: 1.06;
	text-transform: uppercase;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.aa-campaign__desc {
	margin: 1rem 0 0;
	max-width: 44ch;
	font-size: .90625rem;
	line-height: 1.65;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.aa-campaign__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin-block-start: 1.75rem;
}

.aa-campaign__price {
	font-family: var(--aa-font-display, "Archivo", "Segoe UI", system-ui, sans-serif);
	font-weight: 800;
	font-size: 1.375rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --- light: warm gradient panel, product cutout multiplied into it --- */
.aa-campaign--light .aa-campaign__panel {
	background: linear-gradient(135deg, #f7f5f3 0%, #eee9e4 100%);
}
.aa-campaign--light .aa-campaign__img { mix-blend-mode: multiply; }
.aa-campaign--light .aa-campaign__eyebrow { color: var(--aa-rose); }
.aa-campaign--light .aa-campaign__title { color: var(--aa-ink); }
.aa-campaign--light .aa-campaign__desc { color: var(--aa-muted); }
.aa-campaign--light .aa-campaign__price { color: var(--aa-ink); }

/* --- dark: radial ink panel, product on flat white (no multiply) --- */
.aa-campaign--dark .aa-campaign__panel {
	background: radial-gradient(110% 130% at 75% 25%, var(--aa-ink-soft) 0%, var(--aa-ink) 60%);
}
.aa-campaign--dark .aa-campaign__media { padding: 2.5rem; }
.aa-campaign--dark .aa-campaign__img {
	background: var(--aa-surface);
	border-radius: var(--aa-radius-card);
	padding: 1.25rem;
	scale: 1;
}
.aa-campaign--dark .aa-campaign__eyebrow { color: var(--aa-rose-light); }
.aa-campaign--dark .aa-campaign__title { color: var(--aa-surface); }
.aa-campaign--dark .aa-campaign__desc { color: var(--aa-sand); }
.aa-campaign--dark .aa-campaign__price { color: var(--aa-surface); }

@media (min-width: 1024px) {
	.aa-campaign__panel { grid-template-columns: 1fr 1fr; }
	.aa-campaign__media { padding: 3rem; }
	.aa-campaign__copy { padding: 4rem 3rem; }
	.aa-campaign__title { font-size: 2.25rem; }

	/* Light: media on the right. */
	.aa-campaign--light .aa-campaign__media { order: 2; }
	.aa-campaign--light .aa-campaign__copy { order: 1; }
}

/* --------------------------------------------------------------- who we are */

.aa-whoweare__grid {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

.aa-whoweare__figure {
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--aa-radius-lg);
	background: var(--aa-surface-soft);
}
.aa-whoweare__img { width: 100%; height: 100%; object-fit: cover; }

.aa-whoweare__eyebrow {
	margin: 0 0 .75rem;
	font-family: var(--aa-font-display, "Archivo", "Segoe UI", system-ui, sans-serif);
	font-weight: 800;
	font-size: .6875rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--aa-rose);
}

.aa-whoweare__title {
	margin: 0;
	font-weight: 800;
	font-size: 1.875rem;
	line-height: 1.08;
	text-transform: uppercase;
	color: var(--aa-ink);
}
.aa-whoweare__accent { color: var(--aa-rose); }

.aa-whoweare__text {
	margin: 1.25rem 0 0;
	max-width: 52ch;
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--aa-muted);
}

.aa-whoweare__cta { margin-block-start: 1.75rem; }

@media (min-width: 1024px) {
	.aa-whoweare__grid { grid-template-columns: 380px 1fr; gap: 4rem; }
	.aa-whoweare--noimg .aa-whoweare__grid { grid-template-columns: 1fr; max-width: 60ch; }
	.aa-whoweare__title { font-size: 2.5rem; }
}

/* --------------------------------------------------------------- categories */

.aa-cats__list {
	display: flex;
	gap: 1.25rem;
	margin: 2.5rem 0 0;
	padding: 0 0 .25rem;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}
.aa-cats__list::-webkit-scrollbar { display: none; }

.aa-cats__item { flex: 0 0 auto; width: calc(50vw - 2.125rem); }

.aa-cats__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .85rem;
	text-decoration: none;
}

.aa-cats__disc {
	position: relative;
	display: block;
	width: 8.25rem;
	height: 8.25rem;
	border-radius: 50%;
	overflow: hidden;
	transition: transform .2s ease;
}
.aa-cats__disc--0 { background: var(--aa-surface-muted); }
.aa-cats__disc--1 { background: var(--aa-cream-warm, var(--aa-surface-strong)); }
.aa-cats__disc--2 { background: var(--aa-surface-strong); }
.aa-cats__disc--3 { background: var(--aa-surface-soft); }

.aa-cats__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: .75rem;
	mix-blend-mode: multiply;
	transition: transform .2s ease;
}

.aa-cats__label {
	font-family: var(--aa-font-display, "Archivo", "Segoe UI", system-ui, sans-serif);
	font-weight: 800;
	font-size: .75rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--aa-ink);
	text-align: center;
	transition: color .2s ease;
}

.aa-cats__link:hover .aa-cats__disc,
.aa-cats__link:focus-visible .aa-cats__disc { transform: scale(1.03); }
.aa-cats__link:hover .aa-cats__img,
.aa-cats__link:focus-visible .aa-cats__img { transform: scale(1.05); }
.aa-cats__link:hover .aa-cats__label,
.aa-cats__link:focus-visible .aa-cats__label { color: var(--aa-rose); }

@media (prefers-reduced-motion: reduce) {
	.aa-cats__disc, .aa-cats__img { transition: none; }
	.aa-cats__link:hover .aa-cats__disc,
	.aa-cats__link:hover .aa-cats__img { transform: none; }
}

@media (min-width: 640px) {
	.aa-cats__list {
		flex-wrap: wrap;
		justify-content: center;
		gap: 2.75rem;
		overflow: visible;
	}
	.aa-cats__item { width: auto; }
	.aa-cats__disc { width: 10rem; height: 10rem; }
	.aa-cats__img { padding: .875rem; }
}

/* ---------------------------------------------------------------- SEO / FAQ */

.aa-faqblock__title {
	margin: 0 0 1.25rem;
	font-weight: 800;
	font-size: 1.75rem;
	line-height: 1.12;
	text-transform: uppercase;
	color: var(--aa-ink);
	text-wrap: balance;
}

.aa-faq { border-block-start: 1px solid var(--aa-hairline); }
.aa-faq__item { border-block-end: 1px solid var(--aa-hairline); }

.aa-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 44px;
	padding-block: .95rem;
	font-family: var(--aa-font-display, "Archivo", "Segoe UI", system-ui, sans-serif);
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--aa-ink);
	cursor: pointer;
	list-style: none;
}
.aa-faq__q::-webkit-details-marker { display: none; }
.aa-faq__q::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
	color: var(--aa-subtle);
}
.aa-faq__item[open] .aa-faq__q::after { content: "\2013"; }
.aa-faq__q:hover { color: var(--aa-rose); }

.aa-faq__a { padding-block-end: 1.1rem; }
.aa-faq__a p { margin: 0; max-width: 68ch; color: var(--aa-muted); line-height: 1.65; }

.aa-faqblock__foot {
	margin-block-start: 1.5rem;
	max-width: 68ch;
	color: var(--aa-muted);
	line-height: 1.65;
}

@media (min-width: 900px) {
	.aa-faqblock {
		display: grid;
		grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
		column-gap: 3rem;
		align-items: start;
	}
	.aa-faqblock__title { grid-column: 1; grid-row: 1; margin: 0; padding-block-start: .95rem; }
	.aa-faq { grid-column: 2; grid-row: 1; border-block-start: 0; }
	.aa-faq__item:first-child { border-block-start: 1px solid var(--aa-hairline); }
	.aa-faqblock__foot { grid-column: 2; grid-row: 2; }
}

/* -------------------------------------------------------- promo / banners */

/* Full-width dark promo strip. */
.aa-promo {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 10rem;
	background: var(--aa-dark);
	overflow: hidden;
}
.aa-promo[hidden] { display: none !important; }

.aa-promo__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.aa-promo__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(22, 18, 26, .72) 0%, rgba(22, 18, 26, .2) 100%);
}
.aa-promo .aa-wrap { position: relative; z-index: 1; width: 100%; }

.aa-promo__copy { max-width: 40rem; }
.aa-promo__title {
	margin: 0;
	font-family: var(--aa-font-display, "Archivo", "Segoe UI", system-ui, sans-serif);
	font-weight: 800;
	font-size: 1.375rem;
	line-height: 1.08;
	text-transform: uppercase;
	color: var(--aa-surface);
}
.aa-promo__sub {
	margin: .5rem 0 0;
	font-size: .875rem;
	color: rgba(255, 255, 255, .85);
}
.aa-promo__cta { margin-block-start: 1rem; }

.aa-promo__close {
	position: absolute;
	inset-block-start: .85rem;
	inset-inline-end: .85rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: var(--aa-surface);
	cursor: pointer;
}
.aa-promo__close[hidden] { display: none !important; }
.aa-promo__close:hover { background: rgba(255, 255, 255, .28); }
.aa-promo__close svg { width: 1rem; height: 1rem; }

@media (min-width: 640px) { .aa-promo { min-height: 12.5rem; } .aa-promo__title { font-size: 1.75rem; } }
@media (min-width: 1024px) { .aa-promo { min-height: 15rem; } .aa-promo__title { font-size: 2.125rem; } }

/* Mid-page / footer banner panel. */
.aa-banner__inner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 21.875rem;
	overflow: hidden;
	border-radius: var(--aa-radius-lg);
	background: var(--aa-dark);
	text-decoration: none;
}
.aa-banner--footer .aa-banner__inner { min-height: 15.625rem; }

.aa-banner__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.aa-banner__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(22, 18, 26, .7) 0%, rgba(22, 18, 26, .15) 100%);
}
.aa-banner__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	max-width: 34rem;
	padding: 2rem;
}
.aa-banner__title {
	font-family: var(--aa-font-display, "Archivo", "Segoe UI", system-ui, sans-serif);
	font-weight: 800;
	font-size: 1.75rem;
	line-height: 1.06;
	text-transform: uppercase;
	color: var(--aa-surface);
}
.aa-banner__sub { font-size: .9375rem; color: rgba(255, 255, 255, .85); }

@media (min-width: 640px) {
	.aa-banner__inner { min-height: 31.25rem; }
	.aa-banner--footer .aa-banner__inner { min-height: 21.875rem; }
	.aa-banner__copy { padding: 3rem; }
	.aa-banner__title { font-size: 3rem; }
}