/**
 * Underwater Scooter Rentals — responsive behaviour.
 *
 * The clamp() values in main.css already scale type and spacing smoothly, so
 * this file is reserved for real layout changes: column counts, the navigation
 * mode switch, the process timeline flip, and the bento stack.
 *
 * Breakpoints: 1600 / 1440 / 1366 / 1280 / 1199 / 1024 / 900 / 768 / 680 /
 * 600 / 480 / 390 / 360
 */

/* ===========================================================================
   1600px — large desktop
   =========================================================================== */

@media (max-width: 1600px) {
	.site-header__inner {
		gap: clamp(14px, 1.2vw, 26px);
	}
}

/* ===========================================================================
   1440px / 1366px — laptops
   =========================================================================== */

@media (max-width: 1440px) {
	.main-nav__list {
		gap: clamp(16px, 2vw, 30px);
	}

	.hero__title {
		max-width: 1200px;
	}

	.hero__description {
		max-width: 900px;
	}
}

@media (max-width: 1366px) {
	.site-header__cta {
		min-width: 0;
		padding: 15px 26px;
	}

	.about__grid {
		gap: clamp(28px, 2.4vw, 44px);
	}
}

/* ===========================================================================
   1280px — small laptop
   =========================================================================== */

@media (max-width: 1280px) {
	.main-nav__list {
		gap: 18px;
	}

	.main-nav__list a {
		font-size: 14px;
	}

	.steps__list {
		gap: 12px;
	}
}

/* ===========================================================================
   1199px — navigation switches to the off-canvas menu
   =========================================================================== */

@media (max-width: 1199px) {
	:root {
		--header-height: clamp(88px, 11vw, 132px);
		--header-height-scrolled: clamp(76px, 8.5vw, 100px);
	}

	.main-nav,
	.site-header__cta {
		display: none;
	}

	.nav-toggle {
		display: flex;
	}

	.site-logo img,
	.site-logo .custom-logo {
		width: clamp(112px, 13vw, 156px);
		max-height: clamp(86px, 10vw, 122px);
	}

	.site-header.is-scrolled .site-logo img,
	.site-header.is-scrolled .site-logo .custom-logo {
		width: clamp(104px, 11vw, 132px);
		max-height: clamp(78px, 8.4vw, 102px);
	}
}

/* ===========================================================================
   1024px — tablet landscape
   =========================================================================== */

@media (max-width: 1024px) {
	:root {
		--container-gutter: 32px;
	}

	/* Two-column section stacks: image first, then content. */
	.about__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(28px, 4vw, 44px);
	}

	.about__content {
		padding-top: 0;
	}

	.about__media {
		max-width: 720px;
		margin-inline: auto;
	}

	.about__text,
	.feature__text {
		font-size: 17px;
	}

	.about__title {
		font-size: 34px;
	}

	.feature__title {
		font-size: 24px;
	}

	/* Adventure cards: two up, with the third centred underneath. */
	.adventures__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.adventures__grid > .rental-card:last-child:nth-child(3) {
		grid-column: 1 / -1;
		max-width: calc(50% - 12px);
		margin-inline: auto;
	}

	/* Process steps become a vertical timeline. */
	.steps {
		--step-size: clamp(64px, 9vw, 92px);
		max-width: 520px;
		margin-inline: auto;
	}

	.steps__connector {
		top: calc(var(--step-size) / 2);
		bottom: calc(var(--step-size) / 2);
		left: calc(var(--step-size) / 2);
		right: auto;
		width: 1px;
		height: auto;
	}

	.steps__list {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(18px, 3vw, 28px);
		max-width: none;
	}

	.step {
		flex-direction: row;
		align-items: center;
		gap: 20px;
		text-align: left;
	}

	.step__circle {
		width: var(--step-size);
		border-width: 5px;
		flex-shrink: 0;
	}

	.step__circle svg {
		width: 28px;
	}

	.step__title {
		margin: 0;
		justify-content: flex-start;
		font-size: 22px;
	}

	.section-heading__description {
		font-size: 17px;
	}

	.action__cta-text {
		font-size: 30px;
	}
}

/* ===========================================================================
   900px — bento mosaic stacks
   =========================================================================== */

@media (max-width: 900px) {
	.bento {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		height: auto;
		gap: 18px;
	}

	.bento__tile--large {
		grid-row: auto;
		aspect-ratio: 1193 / 807;
	}

	.bento__tile--small {
		aspect-ratio: 584 / 391;
	}

	.bento__title,
	.bento__tile--small .bento__title {
		font-size: 24px;
	}

	.bento__text,
	.bento__tile--small .bento__text {
		font-size: 16px;
	}

	.bento__content,
	.bento__tile--large .bento__content {
		padding: 24px;
	}

	/* Footer: brand on its own row, link columns side by side. */
	.site-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}

	.site-footer__col {
		padding-top: 0;
	}
}

/* ===========================================================================
   768px — tablet portrait
   =========================================================================== */

@media (max-width: 768px) {
	:root {
		--container-gutter: 24px;
	}

	.section,
	.section--about,
	.section--action,
	.section--adventures,
	.section--how,
	.section--ways {
		padding-block: 56px;
	}

	.hero {
		min-height: min(78vh, 620px);
		padding-block: 90px 72px;
	}

	.hero__title {
		font-size: clamp(28px, 7.2vw, 46px);
		letter-spacing: -0.01em;
	}

	.hero__description {
		font-size: clamp(15px, 3.4vw, 21px);
		line-height: 1.35;
	}

	.section-heading__title,
	.section--action .section-heading__title,
	.section--how .section-heading__title {
		font-size: 30px;
	}

	.action__cta-text {
		font-size: 24px;
	}

	/* Footer bottom bar stacks and centres. */
	.site-footer__bottom {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: 14px;
		text-align: center;
	}

	.site-footer__legal,
	.site-footer__totop {
		justify-self: center;
	}
}

/* ===========================================================================
   680px — single column cards
   =========================================================================== */

@media (max-width: 680px) {
	.adventures__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.adventures__grid > .rental-card:last-child:nth-child(3) {
		grid-column: auto;
		max-width: none;
		margin-inline: 0;
	}

	.rental-card__title {
		font-size: 24px;
	}

	.rental-card__price {
		font-size: 24px;
	}

	.rental-card__text,
	.rental-card__duration {
		font-size: 16px;
	}
}

/* ===========================================================================
   600px — large phones
   =========================================================================== */

@media (max-width: 600px) {
	:root {
		--container-gutter: 20px;
	}

	.section,
	.section--about,
	.section--action,
	.section--adventures,
	.section--how,
	.section--ways {
		padding-block: 48px;
	}

	.about__title {
		font-size: 28px;
	}

	.feature__title {
		font-size: 20px;
	}

	.feature__icon {
		width: 44px;
		height: 48px;
	}

	/* Buttons go near full width where the design intends a strong CTA. */
	.hero__cta,
	.action__button,
	.about__cta {
		width: 100%;
		min-width: 0;
	}

	.btn--lg {
		padding: 18px 24px;
		font-size: 17px;
		line-height: 1.35;
	}

	.btn--sm {
		padding: 15px 26px;
	}

	.error-404__actions .btn {
		width: 100%;
	}

	.search-form {
		flex-direction: column;
	}

	.search-form__submit {
		width: 100%;
	}
}

/* ===========================================================================
   480px — phones
   =========================================================================== */

@media (max-width: 480px) {
	:root {
		--container-gutter: 16px;
	}

	.hero {
		min-height: min(76vh, 560px);
		padding-block: 76px 60px;
	}

	.hero__eyebrow {
		padding: 9px 16px;
	}

	.hero__eyebrow-text {
		font-size: 10px;
		letter-spacing: 0.05em;
	}

	.hero__title {
		font-size: clamp(26px, 8vw, 34px);
	}

	.hero__description {
		font-size: 15px;
	}

	.section-heading__title,
	.section--action .section-heading__title,
	.section--how .section-heading__title {
		font-size: 26px;
	}

	.section-heading__description {
		font-size: 16px;
	}

	.action__cta-text {
		font-size: 21px;
	}

	.bento__content,
	.bento__tile--large .bento__content {
		padding: 18px;
	}

	.bento__title,
	.bento__tile--small .bento__title {
		font-size: 20px;
	}

	.bento__text,
	.bento__tile--small .bento__text {
		font-size: 14px;
	}

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

	.site-footer__description,
	.site-footer__list a {
		font-size: 16px;
	}

	.step__title {
		font-size: 19px;
	}

	.mobile-nav {
		width: min(360px, 92vw);
	}
}

/* ===========================================================================
   390px / 375px / 360px — small phones
   =========================================================================== */

@media (max-width: 390px) {
	.hero__title {
		font-size: 26px;
		line-height: 1.22;
	}

	.rental-card__body {
		padding: 18px;
	}

	.site-footer__legal-list {
		gap: 12px;
	}

	.site-footer__legal-list .menu-item + .menu-item {
		padding-left: 12px;
	}
}

@media (max-width: 360px) {
	:root {
		--container-gutter: 14px;
	}

	.nav-toggle {
		width: 46px;
		height: 46px;
	}

	.step {
		gap: 14px;
	}

	.step__circle {
		width: 60px;
	}
}

/* ===========================================================================
   Landscape phones — keep the hero from swallowing the viewport
   =========================================================================== */

@media (max-height: 520px) and (orientation: landscape) {
	.hero {
		min-height: 460px;
		padding-block: 84px 48px;
	}
}

/* ===========================================================================
   Admin bar on small screens
   =========================================================================== */

@media (max-width: 782px) {
	body.admin-bar .site-header--sticky {
		top: 46px;
	}
}

/* ===========================================================================
   Print
   =========================================================================== */

@media print {
	.site-header,
	.site-header__spacer,
	.mobile-nav,
	.nav-overlay,
	.hero__media,
	.btn,
	.back-to-top {
		display: none !important;
	}

	.hero {
		min-height: 0;
		padding-block: 24px;
		color: #000;
	}

	body {
		color: #000;
		background: #fff;
	}
}