/* Home page sections. */

/* ---------- Hero ---------- */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--yellow);
	padding-block: clamp(2.5rem, 2rem + 4vw, 5.5rem) clamp(3rem, 2rem + 5vw, 6.5rem);
	border-bottom: 2px solid var(--ink);
}

.hero::before {
	/* faint diagonal "menu card" stripes */
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(-35deg, transparent 0 46px, rgb(35 31 32 / 0.035) 46px 48px);
	pointer-events: none;
}

.hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: center;
	gap: clamp(2rem, 4vw, 4rem);
}

.hero__copy {
	display: grid;
	justify-items: start;
	gap: var(--sp-5);
}

.hero .eyebrow {
	padding: 0.3em 0.9em;
	border: 2px solid var(--ink);
	border-radius: var(--r-pill);
	background: var(--paper);
}

.hero__title {
	font-size: var(--fs-3xl);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.03em;
}

.hero__title .hero__pill {
	display: inline-block;
	margin-top: 0.08em;
	padding: 0.02em 0.22em 0.1em;
	background: var(--ink);
	color: var(--yellow);
	border-radius: 0.28em;
	rotate: -1.5deg;
}

.hero__lede {
	max-width: 33rem;
	font-size: var(--fs-lg);
	line-height: 1.55;
}

.hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.hero__note {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-size: var(--fs-sm);
	font-weight: 700;
}

.hero__art {
	position: relative;
	will-change: transform;
	aspect-ratio: 1 / 0.95;
}

.hero__ph {
	position: absolute;
	overflow: hidden;
	border: 3px solid var(--ink);
	border-radius: var(--r-lg);
	background: var(--ink);
	box-shadow: 8px 8px 0 var(--ink);
}

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

.hero__ph--a {
	left: 0;
	top: 6%;
	width: 52%;
	height: 78%;
	rotate: -3deg;
}

.hero__ph--b {
	right: 2%;
	top: 0;
	width: 44%;
	height: 52%;
	rotate: 3deg;
}

.hero__ph--c {
	right: 6%;
	bottom: 0;
	width: 40%;
	height: 42%;
	rotate: -2deg;
	box-shadow: 8px 8px 0 var(--teal);
}

.tag {
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 0.3em 0.85em;
	border-radius: var(--r-pill);
	background: var(--ink);
	color: var(--paper);
	font-family: var(--f-head);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.hero__flame {
	position: absolute;
	left: 44%;
	bottom: 2%;
	width: 22%;
	height: auto;
	padding: 10px 12px;
	border: 3px solid var(--ink);
	border-radius: var(--r-md);
	background: var(--yellow);
	rotate: 4deg;
}

@media (prefers-reduced-motion: no-preference) {
	.hero__ph {
		animation: deal 0.7s var(--ease) backwards;
	}
	.hero__ph--b {
		animation-delay: 0.1s;
	}
	.hero__ph--c {
		animation-delay: 0.2s;
	}
	.hero__flame {
		animation: deal 0.7s 0.3s var(--ease) backwards;
	}
}

@keyframes deal {
	from {
		opacity: 0;
		translate: 0 40px;
	}
}

@media (max-width: 860px) {
	.hero__grid {
		grid-template-columns: 1fr;
	}
	.hero__art {
		width: min(100%, 520px);
		margin-inline: auto;
	}
}

@media (max-width: 520px) {
	.hero__ctas .btn {
		flex: 1 1 100%;
	}
	.hero__ph {
		box-shadow: 5px 5px 0 var(--ink);
	}
}

/* ---------- Live branch strip ---------- */
.strip {
	background: var(--ink);
	color: var(--cream);
}

.strip__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.strip__list a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em 0.6em;
	padding: var(--sp-4) var(--sp-3);
	text-decoration: none;
	font-size: var(--fs-sm);
	border-left: 1px solid rgb(255 252 238 / 0.15);
}

.strip__list li:first-child a {
	border-left: 0;
}

.strip__list strong {
	color: var(--yellow);
	font-family: var(--f-head);
	font-size: var(--fs-md);
}

.strip__list span:last-child {
	opacity: 0.8;
	width: 100%;
	padding-left: calc(10px + 0.6em);
}

.strip__list a:hover strong {
	text-decoration: underline;
}

@media (max-width: 860px) {
	.strip__list {
		grid-template-columns: repeat(2, 1fr);
	}
	.strip__list li:nth-child(3) a {
		border-left: 0;
	}
	.strip__list li:nth-child(n + 3) a {
		border-top: 1px solid rgb(255 252 238 / 0.15);
	}
}

/* ---------- Course cloud ---------- */
.course-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.course-cloud a {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.55em 0.65em 0.55em 1.2em;
	border-radius: var(--r-pill);
	background: var(--ink);
	color: var(--paper);
	font-family: var(--f-head);
	font-size: var(--fs-lg);
	font-weight: 800;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.course-cloud a span {
	display: grid;
	place-items: center;
	min-width: 32px;
	height: 32px;
	padding: 0 6px;
	border-radius: var(--r-pill);
	background: var(--yellow);
	color: var(--ink);
	font-family: var(--f-body);
	font-size: var(--fs-xs);
	letter-spacing: 0;
}

.course-cloud a:hover {
	transform: translate(-2px, -2px) rotate(-1deg);
	box-shadow: 4px 4px 0 var(--teal);
}

/* ---------- How ordering works ---------- */
.how__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: var(--sp-7);
	align-items: center;
}

.how__copy {
	display: grid;
	justify-items: start;
	gap: var(--sp-4);
}

.how__copy h2 {
	font-size: var(--fs-2xl);
}

.how__copy p:not(.pill-title) {
	font-size: var(--fs-lg);
	opacity: 0.9;
}

.how__steps {
	display: grid;
	gap: var(--sp-3);
}

.how__steps li {
	display: flex;
	gap: var(--sp-4);
	align-items: flex-start;
	padding: var(--sp-4) var(--sp-5);
	border: 2px solid rgb(255 255 255 / 0.25);
	border-radius: var(--r-lg);
	background: rgb(0 0 0 / 0.12);
}

.how__steps li > span {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--yellow);
	color: var(--ink);
	font-family: var(--f-head);
	font-weight: 900;
	font-size: var(--fs-lg);
}

.how__steps strong {
	font-family: var(--f-head);
	font-size: var(--fs-lg);
}

.how__steps p {
	opacity: 0.88;
}

.how__rider {
	position: absolute;
	left: 0;
	bottom: calc(-1 * var(--sp-8) + 8px);
	width: 220px;
	color: var(--yellow);
	opacity: 0.95;
}

@media (prefers-reduced-motion: no-preference) {
	.how__rider {
		animation: ride 3.5s ease-in-out infinite alternate;
	}
}

@keyframes ride {
	to {
		translate: 24px 0;
	}
}

@media (max-width: 860px) {
	.how__grid {
		grid-template-columns: 1fr;
		gap: var(--sp-6);
	}
	.how__rider {
		position: static;
		width: 160px;
		order: -1;
	}
}

/* ---------- Rooms gallery ---------- */
.rooms__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: clamp(140px, 16vw, 210px);
	gap: var(--sp-3);
}

.rooms__grid figure {
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--ink-2);
}

.rooms__grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.rooms__grid figure:hover img {
	transform: scale(1.05);
}

.rooms__a {
	grid-column: span 3;
	grid-row: span 2;
}

.rooms__b {
	grid-column: span 3;
}

.rooms__c,
.rooms__d,
.rooms__e {
	grid-column: span 1;
}

.rooms__c {
	grid-column: span 1;
}

.rooms__d {
	grid-column: span 2;
}

.rooms__e {
	display: none;
}

@media (max-width: 700px) {
	.rooms__grid {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 150px;
	}
	.rooms__a {
		grid-column: span 2;
		grid-row: span 2;
	}
	.rooms__b {
		grid-column: span 2;
	}
	.rooms__c,
	.rooms__d {
		grid-column: span 1;
	}
	.rooms__e {
		display: block;
		grid-column: span 2;
	}
}

.hero__ph--c .tag {
	left: auto;
	right: 12px;
}