/* ==========================================================================
   HOT & COLD PARI LTD — Responsive Overrides
   Breakpoint-specific rules only. Base styles live in style.css.
   Breakpoints mirror Bootstrap 5.3: xl 1200, lg 992, md 768, sm 576.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet and up: restore wider container gutters
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	:root {
		--container-gutter: 40px;
	}
}

/* --------------------------------------------------------------------------
   Laptop (<= 1199.98px)
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	:root {
		--section-padding-y: 96px;
		--header-height: 80px;
	}

	.hero__title {
		max-width: 560px;
	}

	.process-step__desc {
		max-width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Tablet (<= 991.98px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	:root {
		--section-padding-y: 80px;
		--header-height: 72px;
	}

	/* Header: switch to off-canvas mobile nav */
	.site-header__nav-list,
	.site-header__cta {
		display: none;
	}

	.site-header__toggle {
		display: flex;
	}

	/* Hero: stack image below content */
	.hero__grid {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.hero__content {
		padding-left: var(--container-gutter);
		padding-top: var(--space-6);
		padding-bottom: var(--space-5);
	}

	.hero__figure {
		min-height: 360px;
		max-height: 55vh;
	}

	/* About: image on top, full width */
	.about__grid {
		grid-template-columns: 1fr;
		gap: var(--space-5);
	}

	.about__figure {
		max-width: 420px;
		margin-inline: auto;
	}

	.about__figure::before {
		display: none;
	}

	.about__body,
	.about__body h2,
	.about__body p {
		max-width: 100%;
	}

	.about__body {
		text-align: center;
	}

	.about__body .credential-list,
	.about__body .about__cta {
		justify-content: center;
	}

	/* Services / Why Us: 2-column */
	.services__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.why-us__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4);
	}

	/* Process: 2x2 grid, drop connecting line */
	.process__steps {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-5);
	}

	.process-step::after {
		display: none;
	}

	/* Projects: 2-column masonry */
	.projects-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 260px;
	}

	.project-tile--wide {
		grid-column: span 2;
	}

	/* Contact: stack details above form */
	.contact__grid {
		grid-template-columns: 1fr;
		gap: var(--space-5);
	}

	/* Footer: 2-column */
	.footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-5);
	}

	.footer__brand {
		grid-column: span 2;
	}
}

/* --------------------------------------------------------------------------
   Mobile (<= 767.98px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	:root {
		--section-padding-y: 64px;
		--header-height: 64px;
	}

	.hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hero__actions .btn-hc {
		width: 100%;
	}

	.hero__figure {
		min-height: 280px;
	}

	.services__grid {
		grid-template-columns: 1fr;
	}

	.why-us__grid {
		grid-template-columns: 1fr;
	}

	.process__steps {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	.projects-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: 320px;
	}

	.project-tile--wide,
	.project-tile--tall {
		grid-column: span 1;
		grid-row: span 1;
	}

	.cta-band__inner {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.cta-band .btn-hc {
		width: 100%;
		justify-content: center;
	}

	.contact-form-card {
		padding: var(--space-4);
	}

	.form-row {
		grid-template-columns: 1fr;
	}

	.map-embed {
		aspect-ratio: 4 / 5;
	}

	.footer__grid {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	.footer__brand {
		grid-column: span 1;
	}

	.footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --------------------------------------------------------------------------
   Small mobile (<= 575.98px)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
	.hero__title {
		max-width: 100%;
	}

	.hero__lead {
		max-width: 100%;
	}

	.section-header h2 {
		max-width: 100%;
	}

	.mobile-nav__list a {
		font-size: 1.5rem;
	}
}