/* ==========================================================================
   Andy's Junior UI kit and the blocks shared by several pages.

   1. Buttons, tags, sliders, arrows, tabs, form fields
   2. Hero      on home and parties
   3. Marquee   on home and parties
   4. Location  on home and parties
   ========================================================================== */

/* ---------------------------------------------------------- Buttons ----- */

.aj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	border-radius: var(--aj-radius-pill);
	transition: background-color .2s, color .2s, transform .15s, box-shadow .2s;
	will-change: transform;
}

.aj-btn:hover {
	transform: translateY(-1px);
}

.aj-btn:active {
	transform: translateY(0);
}

.aj-btn--red {
	background: var(--aj-red);
	color: var(--aj-white);
}

.aj-btn--red:hover {
	background: var(--aj-red-dark);
}

.aj-btn--yellow {
	background: var(--aj-yellow);
	color: var(--aj-ink);
}

.aj-btn--yellow:hover {
	background: #f0c02c;
}

.aj-btn--white {
	background: var(--aj-white);
	color: var(--aj-ink);
	box-shadow: var(--aj-shadow-soft);
}

.aj-btn--ghost {
	background: transparent;
	color: var(--aj-ink);
	box-shadow: inset 0 0 0 1px var(--aj-line);
}

.aj-btn--sm {
	padding: 12px 26.5px;
	font-size: 16px;
}

.aj-btn--block {
	display: flex;
	width: 100%;
}

.aj-btn--grow {
	flex: 1;
}

/* ------------------------------------------------------------- Tags ----- */

/* Zone card chips are 14px in the design */
.aj-tag {
	display: inline-flex;
	align-items: center;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--aj-ink);
	/* In the design the tag sits on a darker fill than the card, not lighter */
	background: rgba(0, 0, 0, .07);
	border-radius: 100px;
}

/* ----------------------------------------------------------- Sliders ---- */

.aj-slider {
	position: relative;
	overflow: hidden;
	height: 100%;
	border-radius: 24px;
	background: var(--aj-beige);
}

.aj-slider__track {
	display: flex;
	height: 100%;
	transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.aj-slider__slide {
	flex: 0 0 100%;
	min-height: 100%;
}

.aj-slider__img {
	width: 100%;
	height: 100%;
	min-height: 240px;
	object-fit: cover;
}

/* Dots sit on the photo, the active one turns solid white */
.aj-slider__dots {
	position: absolute;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	display: flex;
	gap: 16px;
}

.aj-dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	transition: background-color .2s;
}

.aj-dot.is-active {
	background: var(--aj-white);
}

/* -------------------------------------------------------- Nav arrows ---- */

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

/* Circles are 48px and white with no shadow */
.aj-navbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	color: var(--aj-ink);
	background: var(--aj-white);
	transition: color .2s, background-color .2s;
}

.aj-navbtn:hover {
	color: var(--aj-white);
	background: var(--aj-red);
}

.aj-navbtn[disabled] {
	opacity: .4;
	cursor: default;
}

.aj-navbtn--prev .aj-icon {
	transform: rotate(180deg);
}

/* -------------------------------------------------------------- Tabs ---- */

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

/* Every tab has a fill, white when idle and beige when active */
.aj-tab {
	padding: 12px 24px;
	font-size: 16px;
	font-weight: 500;
	color: var(--aj-ink);
	background: var(--aj-white);
	border-radius: 100px;
	transition: color .2s, background-color .2s;
}

.aj-tab:hover {
	color: var(--aj-red);
}

.aj-tab.is-active {
	color: var(--aj-ink);
	background: var(--aj-beige);
}

/* ----------------------------------------------------- Form fields ------ */

.wpcf7-form-control {
	width: 100%;
	padding: 13px 16px;
	font: inherit;
	font-size: 15px;
	color: var(--aj-ink);
	background: var(--aj-white);
	border: 1px solid var(--aj-line);
	border-radius: var(--aj-radius-btn);
}

.wpcf7-form-control::placeholder {
	color: var(--aj-muted);
}

.wpcf7-form-control:focus {
	border-color: var(--aj-red);
	outline: none;
}

.wpcf7-submit {
	width: 100%;
	padding: 14px 26px;
	font-weight: 600;
	color: var(--aj-white);
	background: var(--aj-red);
	border: 0;
	cursor: pointer;
	transition: background-color .2s;
}

.wpcf7-submit:hover {
	background: var(--aj-red-dark);
}

.wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 12px;
	color: var(--aj-red);
}

.wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	font-size: 14px;
	border: 1px solid var(--aj-line);
	border-radius: var(--aj-radius-btn);
	background: var(--aj-white);
}

/* ------------------------------------------------------- Empty state --- */

/* Shown while Packages or Services have no entries yet */
.aj-wstub {
	padding: 13px 16px;
	font-size: 12.5px;
	color: var(--aj-muted);
	background: var(--aj-white);
	border: 1px dashed var(--aj-line);
	border-radius: var(--aj-radius-btn);
}

/* ============================================================= Hero ===== */

/* 64px сверху — по экспорту первого экрана 1440x640: заголовок начинается на 75 */
.aj-hero {
	position: relative;
	overflow: hidden;
	padding-top: 64px;
	background: linear-gradient(180deg, var(--aj-cream-hero) 0%, #ece4da 30%, var(--aj-cream) 62%);
}

/* Stars from the design. 1440px keeps their scale and the image tiles on taller blocks */
.aj-hero__sparkles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .4;
	background-image: url("../img/stars.png");
	background-repeat: repeat;
	background-position: top center;
	background-size: auto;
}

.aj-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"copy  video"
		"media media";
	align-items: start;
	gap: 24px;
}

.aj-hero__copy {
	grid-area: copy;
}

.aj-hero__title {
	/* Keeps the heading on two lines so it stays clear of the video card */
	max-width: 700px;
	/* 64/64 in the design, leading equals the size and tracking is zero */
	font-size: 64px;
	line-height: 1;
	font-weight: 600;
}

/* 380px keeps the same three lines as the design */
.aj-hero__text {
	margin-top: 24px;
	max-width: 380px;
	font-size: 20px;
	line-height: 1.6;
	color: var(--aj-ink-soft);
}

.aj-hero__video {
	grid-area: video;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 16px;
	margin-top: 16px;
	background: var(--aj-white);
	border-radius: 16px;
	box-shadow: var(--aj-shadow);
}

.aj-hero__video-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Desktop design uses 18 and 16, mobile uses 18 and 14 */
.aj-hero__video-label {
	font-size: 18px;
	line-height: 100%;
	font-weight: 700;
}

.aj-hero__video-text {
	font-size: 16px;
	line-height: 100%;
	color: var(--aj-muted);
}

.aj-hero__video-thumb {
	position: relative;
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--aj-beige);
}

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

/* The scrim is needed because a white icon disappears on a light thumbnail */
.aj-hero__video-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--aj-white);
	background: rgba(36, 56, 75, .28);
}

/* The 48/64 ratio from the design */
.aj-hero__video-play svg {
	width: 75%;
	height: auto;
}

/* The illustration rides up over the copy. The first 24px of this pull only
   cancels the grid gap, the rest is the actual overlap from the design */
/* Обрезаем только низ. В макете иллюстрация выходит за верх своей рамки
   (на «Праздниках» — на 43 из 1348 ширины: шарики и ухо монстра),
   поэтому overflow: hidden срезал бы ровно то, что должно быть видно. */
.aj-hero__media {
	grid-area: media;
	clip-path: inset(-1000px -1000px 0 -1000px);
	margin-top: -99px;
}

.aj-hero__img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* The animated version of the artwork. The clip is framed wider than the still
   - it shows the characters head to toe - so it is cropped back to the 1340x417
   the design gives the block, anchored to the top. video is inline-level by
   default, which would otherwise leave a baseline gap under it. */
/* Both the animated versions are framed taller than the still - the characters
   are in them head to toe - so each plays at its own ratio and the block clips
   the empty bottom. Cropping from the top instead would cut the horns off.
   The margin is the clip's own height minus the 404/1280 that stays visible. */
.aj-hero__clip {
	display: block;
	width: 100%;
	/* сбрасываем общий img { max-width: 100% } — клип шире своей колонки */
	max-width: none;
	height: auto;
	background: transparent;
	pointer-events: none;
}

/* Ширина и сдвиг сняты с макета: в нём иллюстрация шире колонки и уходит
   за правый край страницы, поэтому родитель режет только низ. */

/* Главная: рамка 1340 при 1280 колонки, левый край на 107.6 из 1440 */
.aj-hero__clip--hero {
	width: 104.6%;
	margin-left: 2.158%;
	margin-bottom: -32.369%;
}

/* Праздники: рамку клипа расширили вверх на 68 из 1360, чтобы шарики и ухо
   монстра не срезались растеризатором; этот запас уводим отрицательным верхним
   отступом, а видно остаётся тот же пояс 404/1280. */
.aj-hero__clip--hero-parties {
	width: 104.539%;
	margin-left: 3.36%;
	margin-top: -5.227%;
	margin-bottom: -41.538%;
}

/* 808/1226 of the width */
.aj-hero__clip--video {
	margin-bottom: -34.34%;
}

/* ========================================================= Marquee ====== */

/* 72px tall in the design, 18px text with 25px above and below */
.aj-marquee {
	overflow: hidden;
	padding-block: 25px;
	background: #F5A550;
	margin-bottom: 64px;
}

/* Light variant used on the parties page. Only the background changes,
   the text and stars stay the same as on the home page */
.aj-marquee--light {
	background: var(--aj-sage);
}

.aj-marquee__track {
	display: flex;
	width: max-content;
	animation: aj-marquee 34s linear infinite;
}

.aj-marquee__list {
	display: flex;
	align-items: center;
}

.aj-marquee__item {
	display: flex;
	align-items: center;
	gap: 32px;
	padding-right: 32px;
}

/* The design mixes case, uppercase here is a content decision */
.aj-marquee__text {
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--aj-white);
	white-space: nowrap;
}

/* Fill uses currentColor so the light marquee variant can recolour it below */
.aj-marquee__sep {
	display: inline-flex;
	color: var(--aj-cream);
}

@keyframes aj-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* =========================================================== Location == */

/* This block spaces its head wider than the rest, same as the design */
.aj-loc .aj-sec-head {
	margin-bottom: 43px;
}

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

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

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

.aj-loc__card--phone {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.aj-loc__label {
	display: block;
	font-size: 16px;
	color: var(--aj-muted);
}

.aj-loc__val {
	margin-top: 3px;
	font-size: 24px;
	line-height: 1.333;
	font-weight: 600;
}

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

.aj-chat {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	color: var(--aj-white);
	/* All four circles share one colour in the design */
	background: var(--aj-red);
	border-radius: 50%;
	transition: transform .2s, filter .2s;
}

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

.aj-chat:hover {
	transform: translateY(-2px);
	filter: brightness(1.05);
}

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

.aj-loc__map {
	overflow: hidden;
	min-height: 280px;
	border-radius: var(--aj-radius);
	background: var(--aj-beige);
}

.aj-loc__map iframe,
.aj-loc__maplink,
.aj-loc__mapimg {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 280px;
	border: 0;
	object-fit: cover;
}

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

/* Middle step, the designs only cover 1440 and 390 */
@media (max-width: 1180px) {
	.aj-hero__title {
		font-size: 56px;
	}
}

@media (max-width: 1024px) {
	.aj-hero {
		padding-top: 32px;
	}

	.aj-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"copy"
			"video"
			"media";
		gap: 32px;
	}

	/* 48px comes from mobile and holds all the way down */
	.aj-hero__title {
		font-size: 48px;
	}

	.aj-hero__video {
		justify-self: start;
	}

	.aj-hero__media {
		margin-top: 0;
	}

	/* Одна колонка — иллюстрация просто по ширине блока, без вылета вправо */
	.aj-hero__clip {
		width: 100%;
		margin-left: 0;
	}

	.aj-hero__clip--hero {
		margin-bottom: -29.557%;
	}

	.aj-hero__clip--hero-parties {
		margin-top: -5%;
		margin-bottom: -38.364%;
	}

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

@media (max-width: 640px) {
	/* Gradient from the design, beige on top going cream by 36.5% of the height */
	.aj-hero {
		background: linear-gradient(0deg, var(--aj-cream) 63.5%, var(--aj-cream-hero) 100%);
	}

	/* Widths keep the design line breaks, four lines for the heading and three for the subtitle */
	.aj-hero__title {
		max-width: 280px;
		margin-inline: auto;
		font-size: 48px;
	}

	/* Hero is centred on mobile */
	.aj-hero__copy {
		text-align: center;
	}

	.aj-hero__text {
		margin-top: 16px;
		margin-inline: auto;
		max-width: 326px;
		font-size: 18px;
		line-height: 1.333;
	}

	.aj-marquee {
		margin-bottom: 32px;
	}

	.aj-hero__video-text {
		font-size: 14px;
	}

	/* Card is 326x96 with 32px margins and the thumbnail pinned right */
	.aj-hero__video {
		width: auto;
		justify-self: stretch;
		justify-content: space-between;
		margin-top: 0;
		gap: 16px;
		margin-inline: 16px;
	}

	/* Illustration is 1.5 screens wide and centred, overflow trims the rest */
	.aj-hero__media {
		width: 150vw;
		max-width: none;
		margin-inline: calc(50% - 75vw);
	}

	.aj-loc__card--phone {
		flex-direction: column;
		align-items: flex-start;
	}

	/* On mobile this head spaces like every other one, 32px instead of 43 */
	.aj-loc .aj-sec-head {
		margin-bottom: 32px;
	}

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

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

	/* Map is 356px in the design against the 280px default */
	.aj-loc__map,
	.aj-loc__map iframe,
	.aj-loc__maplink,
	.aj-loc__mapimg {
		min-height: 356px;
	}
}