/* ==========================================================================
   Andy's Junior home page sections.
   The hero, marquee and location blocks live in kit.css because
   the parties page uses them too.
   ========================================================================== */

/* ============================================================= Features == */

.aj-features__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.aj-fcard {
	display: flex;
	flex-direction: column;
	/* 524px from the design, 216px of copy over a 308px image */
	height: 524px;
	overflow: hidden;
	border-radius: 24px;
	background: var(--aj-beige);
	color: var(--aj-ink);
}

.aj-fcard--red    { background: var(--aj-red);    color: var(--aj-white); }
.aj-fcard--yellow { background: var(--aj-yellow); }
.aj-fcard--orange { background: var(--aj-orange); }
.aj-fcard--sage   { background: var(--aj-sage); }
.aj-fcard--blue   { background: var(--aj-blue); }

.aj-fcard__copy {
	padding: 32px;
}

/* Card headings are 32/32 and copy is 16/24 */
.aj-fcard__title {
	font-size: 32px;
	line-height: 1;
	font-weight: 600;
}

.aj-fcard__text {
	margin-top: 16px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--aj-ink-soft);
}

.aj-fcard--red .aj-fcard__text {
	color: rgba(255, 255, 255, .88);
}

.aj-fcard__media {
	flex: 1;
	min-height: 0;
}

.aj-fcard__img {
	width: 100%;
	height: 100%;
	max-height: 308px;
	object-fit: cover;
}

/* ========================================================== Formats ===== */

.aj-formats__list {
	display: grid;
	gap: 16px;
}

.aj-frow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px;
	background: var(--aj-white);
	border-radius: 32px;
	box-shadow: var(--aj-shadow-soft);
}

.aj-frow__title {
	font-size: 24px;
	line-height: 1.333;
	font-weight: 700;
}

.aj-frow__text {
	margin-top: 4px;
	font-size: 16px;
	color: var(--aj-muted);
}

.aj-frow__btn {
	flex: 0 0 auto;
	min-width: 180px;
}

/* ============================================================ Zones ===== */

.aj-zones__bento {
	display: grid;
	gap: 20px;
}

.aj-zrow {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}

.aj-zrow--cards_right .aj-zrow__cards {
	order: 2;
}

.aj-zrow__cards {
	display: grid;
	gap: 16px;
	align-content: start;
}

.aj-zrow__media {
	min-height: 260px;
}

.aj-zcard {
	padding: 24px;
	border-radius: var(--aj-radius);
	background: var(--aj-beige);
}

.aj-zcard--yellow { background: var(--aj-yellow); }
.aj-zcard--orange { background: var(--aj-orange); }
.aj-zcard--red    { background: var(--aj-red); color: var(--aj-white); }
.aj-zcard--sage   { background: var(--aj-sage); }
.aj-zcard--blue   { background: var(--aj-blue); }

/* Label and copy are not muted, they use the same ink as the heading */
.aj-zcard__label {
	display: block;
	font-size: 18px;
	font-weight: 500;
	color: var(--aj-ink);
}

.aj-zcard--red .aj-zcard__label {
	color: rgba(255, 255, 255, .75);
}

.aj-zcard__title {
	margin-top: 8px;
	font-size: 32px;
	line-height: 1;
	font-weight: 600;
}

.aj-zcard__text {
	margin-top: 16px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--aj-ink);
}

.aj-zcard--red .aj-zcard__text {
	color: rgba(255, 255, 255, .88);
}

.aj-zcard__age {
	margin-top: 4px;
	font-size: 16px;
	font-weight: 500;
}

.aj-zcard__age span {
	font-weight: 400;
	color: var(--aj-ink);
}

.aj-zcard__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

/* A full width bar rather than a normal button */
.aj-zones .aj-btn--block {
	margin-top: 40px;
	padding-block: 16px;
}

/* ======================================================== Restaurant ==== */

.aj-rest__tabs {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px 12px;
}

.aj-rest__nav {
	display: flex;
	gap: 8px;
}

.aj-rest__panel {
	grid-column: 1 / -1;
}

/* A scroller rather than a grid, the photo count is not fixed */
.aj-rest__grid {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.aj-rest__grid::-webkit-scrollbar {
	display: none;
}

.aj-rest__cell {
	flex: 0 0 calc((100% - 32px) / 3);
	scroll-snap-align: start;
	overflow: hidden;
	border-radius: var(--aj-radius);
	background: var(--aj-beige);
}

/* Restaurant tiles are square (412x416), not 4:3 */
.aj-rest__img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.aj-rest__actions {
	display: flex;
	gap: 8px;
	margin-top: 40px;
}

/* Two buttons split the container in half at 56px tall */
.aj-rest__actions .aj-btn {
	padding-block: 18px;
}

/* ============================================================= Parties == */

/* Every gap in this block is 16px instead of the usual 20px */
.aj-parties__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}

.aj-parties__left {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 16px;
}

.aj-parties__hero {
	overflow: hidden;
	border-radius: 24px;
	background: var(--aj-yellow);
}

/* The tile is 632x256, noticeably wider than 16:9 */
.aj-parties__hero-img {
	width: 100%;
	aspect-ratio: 632 / 256;
	object-fit: cover;
}

.aj-parties__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.aj-pcard {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px;
	border-radius: 24px;
	background: var(--aj-beige);
}

.aj-pcard__label {
	font-size: 18px;
	color: var(--aj-muted);
}

.aj-pcard__title {
	margin-top: 8px;
	font-size: 32px;
	line-height: 1;
	font-weight: 600;
}

.aj-pcard__text {
	margin-top: 16px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--aj-ink-soft);
}

/* The button fills the card width at 48px tall */
.aj-pcard__btn {
	align-self: stretch;
	margin-top: auto;
	padding-block: 14px;
}

.aj-pcard__text + .aj-pcard__btn {
	margin-top: 16px;
}

.aj-slider--tall {
	min-height: 100%;
}

/* The left column sets the row height, the slider has none of its own */
@media (min-width: 1025px) {
	.aj-parties__right {
		position: relative;
	}

	.aj-parties__right .aj-slider {
		position: absolute;
		inset: 0;
	}
}

/* ================================================================ Quiz == */

.aj-quiz {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 64px;
	margin-block: 64px;
	background: var(--aj-blue-deep);
}

/* Tiled the way the hero does it - 1440 keeps the stars at their drawn size
   and the pattern repeats down a tall block instead of stretching. Same
   opacity as the hero. */
.aj-quiz__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	opacity: .4;
	background-image: var(--aj-quiz-bg);
	background-repeat: repeat;
	background-position: top center;
	background-size: auto;
}

/* The characters are large and sit in the vertical middle of the section */
.aj-quiz__deco {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: -1;
	width: clamp(160px, 33vw, 468px);
	pointer-events: none;
}

/* Anchored to the container so they stay near the content on wide screens */
.aj-quiz__deco--left  { left: -60px; }
.aj-quiz__deco--right { right: -60px; }

/* The mobile photo is a separate field and desktop does not use it */
.aj-quiz__deco--mobile { display: none; }

.aj-quiz__deco-img {
	width: 100%;
	height: auto;
}

.aj-quiz__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* 380px keeps the two line break of the heading */
.aj-quiz__title {
	max-width: 380px;
	font-size: 48px;
	line-height: 1;
	font-weight: 700;
}

.aj-quiz__text {
	margin-top: 8px;
	font-size: 18px;
	color: var(--aj-ink-soft);
}

.aj-quiz__form {
	width: 100%;
	max-width: 470px;
	margin-top: 22px;
}

.aj-quiz__options {
	display: grid;
	gap: 8px;
}

.aj-quiz__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* A 48px pill, 16px text at line-height 1.5 plus 12px above and below */
.aj-quiz__label {
	display: block;
	padding: 12px 16px;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	background: var(--aj-white);
	border: 1px solid transparent;
	border-radius: var(--aj-radius-pill);
	transition: border-color .2s, background-color .2s, color .2s;
}

.aj-quiz__label:hover {
	border-color: rgba(225, 81, 44, .4);
}

.aj-quiz__radio:checked + .aj-quiz__label {
	color: var(--aj-red-dark);
	background: #fbdfd6;
	border-color: var(--aj-red);
}

.aj-quiz__radio:focus-visible + .aj-quiz__label {
	outline: 2px solid var(--aj-red);
	outline-offset: 2px;
}

.aj-quiz__submit {
	width: 100%;
	margin-top: 24px;
	padding-block: 14px;
}

/* =========================================================== Why us ===== */

.aj-why__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.aj-wcard {
	position: relative;
	padding: 24px;
	border-radius: var(--aj-radius);
	background: var(--aj-beige);
}

.aj-wcard--yellow { background: var(--aj-yellow); }
.aj-wcard--orange { background: var(--aj-orange); }
.aj-wcard--red    { background: var(--aj-red); color: var(--aj-white); }
.aj-wcard--sage   { background: var(--aj-sage); }
.aj-wcard--blue   { background: var(--aj-blue); }

/* Just a white glyph in the corner with no circle behind it */
.aj-wcard__icon {
	position: absolute;
	top: 26px;
	right: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--aj-white);
}

.aj-wcard__icon svg {
	width: 32px;
	height: 32px;
}

/* Only the heading clears the icon, the copy runs the full card width */
.aj-wcard__title {
	padding-right: 52px;
	font-size: 24px;
	line-height: 1.333;
	font-weight: 700;
}

.aj-wcard__text {
	margin-top: 8px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--aj-ink-soft);
}

.aj-wcard--red .aj-wcard__text {
	color: rgba(255, 255, 255, .88);
}

/* =================================================== Gallery mosaic ===== */

/* Design layout with 308/200/308/92/308px columns and 234/166/234px rows */
.aj-gallery__mosaic {
	display: grid;
	grid-template-columns: 77fr 50fr 77fr 23fr 77fr;
	grid-auto-rows: 234px 166px 234px;
	grid-auto-flow: row dense;
	gap: 16px;
}

.aj-gallery__cell {
	overflow: hidden;
	border-radius: var(--aj-radius-sm);
	background: var(--aj-beige);
}

.aj-gallery__cell--1 { grid-column: 1; }
.aj-gallery__cell--2 { grid-column: 2; }
.aj-gallery__cell--3 { grid-column: 3; grid-row: span 2; }
.aj-gallery__cell--4 { grid-column: 4 / span 2; grid-row: span 2; }
.aj-gallery__cell--5 { grid-column: 1 / span 2; grid-row: span 2; }
.aj-gallery__cell--6 { grid-column: 3 / span 2; }
.aj-gallery__cell--7 { grid-column: 5; }

.aj-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================== Reviews ==== */

.aj-carousel {
	overflow: hidden;
}

/* On mobile the link becomes a button under the carousel */
.aj-reviews__btn {
	display: none;
}

.aj-reviews__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.aj-reviews__track::-webkit-scrollbar {
	display: none;
}

.aj-rcard {
	flex: 0 0 calc((100% - 48px) / 4);
	scroll-snap-align: start;
}

.aj-rcard__link {
	position: relative;
	display: block;
	aspect-ratio: 308 / 548;
	overflow: hidden;
	border-radius: var(--aj-radius);
	background: var(--aj-beige);
}

.aj-rcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}

.aj-rcard__link:hover .aj-rcard__img {
	transform: scale(1.04);
}

.aj-rcard__link::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 45%;
	background: linear-gradient(180deg, transparent, rgba(20, 30, 40, .62));
	pointer-events: none;
}

.aj-rcard__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	/* The triangle is muted grey with a soft halo around the circle */
	color: rgba(72, 68, 70, .5);
	background: rgba(255, 255, 255, .92);
	border-radius: 50%;
	box-shadow: 0 0 0 10px rgba(255, 255, 255, .2);
	transition: transform .2s;
}

.aj-rcard__play svg {
	width: 28px;
	height: 28px;
}

.aj-rcard__link:hover .aj-rcard__play {
	transform: translate(-50%, -50%) scale(1.08);
}

.aj-rcard__meta {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
	color: var(--aj-white);
}

.aj-rcard__name {
	font-size: 16px;
	font-weight: 600;
}

.aj-rcard__role {
	font-size: 14px;
	opacity: .8;
}

/* A white glyph with no circle behind it */
.aj-rcard__net {
	position: absolute;
	right: 24px;
	bottom: 24px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--aj-white);
}

.aj-rcard__net svg {
	width: 24px;
	height: 24px;
}

/* ======================================================= Responsive ===== */

@media (max-width: 1180px) {
	/* Keeps the characters clear of the 470px form */
	.aj-quiz__deco {
		width: min(468px, calc((100vw - 470px) / 2 - 24px));
	}

	.aj-fcard {
		height: auto;
		min-height: 430px;
	}

	.aj-rcard {
		flex: 0 0 calc((100% - 40px) / 3);
	}
}

@media (max-width: 1024px) {
	/* Tablets switch to the mobile mosaic layout */
	.aj-gallery__mosaic {
		grid-template-columns: repeat(7, minmax(0, 1fr));
		grid-auto-rows: 26vw;
		gap: 12px;
	}

	.aj-gallery__cell--1,
	.aj-gallery__cell--5,
	.aj-gallery__cell--6 {
		grid-column: span 4;
		grid-row: auto;
	}

	.aj-gallery__cell--2,
	.aj-gallery__cell--4,
	.aj-gallery__cell--7 {
		grid-column: span 3;
		grid-row: auto;
	}

	.aj-gallery__cell--3 {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.aj-features__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aj-zrow {
		grid-template-columns: minmax(0, 1fr);
	}

	.aj-zrow--cards_right .aj-zrow__cards {
		order: 0;
	}

	.aj-rest__cell {
		flex: 0 0 calc((100% - 20px) / 2);
	}

	.aj-parties__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.aj-slider--tall .aj-slider__img {
		min-height: 380px;
	}

	.aj-why__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aj-rcard {
		flex: 0 0 calc((100% - 20px) / 2);
	}

	.aj-quiz {
		padding-block: 44px;
	}

	.aj-quiz__title {
		font-size: 40px;
	}
}

@media (max-width: 640px) {
	/* The quiz has no .aj-sec, so it gets its spacing here */
	.aj-quiz {
		padding-block: 32px;
	}

	/* The side characters give way to the photo from the mobile field */
	.aj-quiz__deco--left,
	.aj-quiz__deco--right {
		display: none;
	}

	.aj-quiz__deco--mobile {
		display: block;
		top: 0;
		left: 50%;
		right: auto;
		width: 100%;
		transform: translateX(-50%);
	}

	/* Room for the photo above the heading */
	.aj-quiz__inner {
		padding-top: 299px;
	}

	/* The form is 326px wide, 32px from each screen edge */
	.aj-quiz__form {
		max-width: 326px;
	}

	.aj-frow__title {
		font-weight: 600;
	}

	.aj-quiz {
		margin-block: 32px;
	}

	.aj-quiz__title {
		font-size: 32px;
		font-weight: 600;
	}

	.aj-quiz__text {
		font-size: 16px;
	}

	/* A carousel with one card in view and the next peeking past the screen edge */
	.aj-features__grid {
		display: flex;
		grid-template-columns: none;
		gap: 16px;
		margin-inline: calc(var(--aj-gutter) * -1);
		padding-inline: var(--aj-gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--aj-gutter);
		scroll-behavior: smooth;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.aj-features__grid::-webkit-scrollbar {
		display: none;
	}

	.aj-zones .aj-btn--block {
		margin-top: 32px;
	}

	.aj-fcard {
		flex: 0 0 308px;
		scroll-snap-align: start;
		height: auto;
		min-height: 380px;
		max-height: 524px;
	}

	.aj-frow {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.aj-frow__btn {
		width: 100%;
	}

	.aj-zrow,
	.aj-zrow__cards,
	.aj-parties__cards,
	.aj-parties__left,
	.aj-zones__bento {
		gap: 16px;
	}

	/* 32px between the card and the photo, 16px inside the column */
	.aj-parties__grid {
		gap: 32px;
	}

	/* The tile is 3:2 on mobile */
	.aj-parties__hero-img {
		aspect-ratio: 3 / 2;
	}

	/* An aspect ratio instead of min-height because there is no neighbouring column */
	.aj-slider--tall {
		height: auto;
		min-height: 0;
		aspect-ratio: 2 / 3;
	}

	.aj-parties__cards,
	.aj-why__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Tabs take the whole row now that the arrows are gone */
	.aj-rest__tabs {
		gap: 32px;
		grid-template-columns: minmax(0, 1fr);
	}

	/* Tabs scroll sideways and run past the screen edge */
	.aj-tabslist {
		flex-wrap: nowrap;
		margin-inline: calc(var(--aj-gutter) * -1);
		padding-inline: var(--aj-gutter);
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.aj-tabslist::-webkit-scrollbar {
		display: none;
	}

	.aj-tab {
		flex: 0 0 auto;
	}

	/* No arrows on mobile, the gallery is swiped */
	.aj-rest__nav {
		display: none;
	}

	/* One photo in view at the full container width */
	.aj-rest__cell {
		flex: 0 0 100%;
	}

	.aj-rest__actions {
		flex-direction: column;
		gap: 8px;
		margin-top: 32px;
	}

	/* Four rows of 200px with a 196px wide photo and a 150px narrow one */
	.aj-gallery__mosaic {
		grid-template-columns: repeat(7, minmax(0, 1fr));
		grid-auto-rows: 200px;
		gap: 8px 12px;
	}

	.aj-rest__actions .aj-btn {
		max-height: 48px;
	}

	/* Wide tiles span 4 of the seven columns, narrow ones 3, the third photo spans all */
	.aj-gallery__cell--1,
	.aj-gallery__cell--5,
	.aj-gallery__cell--6 {
		grid-column: span 4;
		grid-row: auto;
	}

	.aj-gallery__cell--2,
	.aj-gallery__cell--4,
	.aj-gallery__cell--7 {
		grid-column: span 3;
		grid-row: auto;
	}

	.aj-gallery__cell--3 {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	/* The track runs past the container, so the overflow wrapper needs the same bleed */
	.aj-rcard {
		flex: 0 0 308px;
	}

	.aj-reviews .aj-carousel {
		margin-inline: calc(var(--aj-gutter) * -1);
	}

	.aj-reviews__track {
		padding-inline: var(--aj-gutter);
		scroll-padding-inline: var(--aj-gutter);
	}

	/* No arrows or link in the head on mobile, there is a button below instead */
	.aj-reviews .aj-sec-head__aside {
		display: none;
	}

	.aj-reviews__btn {
		display: flex;
		margin-top: 32px;
		padding-block: 14px;
	}
}