/* =============================================================================
   Harrison and Green - responsive layer
   -----------------------------------------------------------------------------
   main.css reproduces the 1920px artboard and scales with vw. This file handles
   the points where the artboard's layout has to change shape rather than shrink:
     1280px  tighter gutters
     1024px  services and about stack; cards go two-up
      782px  off-canvas navigation (matches the WP admin bar breakpoint)
      600px  single column cards, stacked footer
   ========================================================================== */

/* ---------- 1280px ------------------------------------------------------- */

@media (max-width: 1280px) {
	.hg-services__title { max-width: none; }
	.hg-services__text { max-width: 40ch; }
	.hg-about__body { grid-template-columns: 1fr clamp(5rem, 13vw, 10rem); }
}

/* ---------- 1024px: stack the two-column sections ------------------------ */

@media (max-width: 1024px) {
	.hg-services__inner {
		grid-template-columns: 1fr;
		gap: clamp(2.5rem, 5vw, 4rem);
	}
	.hg-services__intro { padding-right: 0; max-width: 46rem; }
	.hg-services__text { max-width: 52ch; }

	.hg-about { grid-template-columns: 1fr; }
	.hg-about__media img { min-height: clamp(16rem, 52vw, 28rem); }
	.hg-about__content {
		padding: clamp(2.5rem, 7vw, 4rem) 0;
		max-width: 46rem;
	}
	.hg-about__body {
		grid-template-columns: 1fr;
		padding-inline: var(--hg-gutter);
	}
	/* The botanical panel becomes a slim band under the copy */
	.hg-about__panel {
		border-left: 0;
		border-top: 1px solid rgba(37, 42, 30, 0.16);
		padding: clamp(1.5rem, 5vw, 2.5rem) 0;
		margin-inline: calc(var(--hg-gutter) * -1);
	}
	.hg-about__panel img { max-width: clamp(4.5rem, 16vw, 8rem); }

	.hg-hero__aside { display: none; }
}

/* ---------- 782px: off-canvas navigation --------------------------------- */

@media (max-width: 782px) {
	.hg-header__inner {
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.hg-header__logo { grid-column: 1; justify-self: start; }
	.hg-header__end { grid-column: 2; justify-self: end; }

	/* The desktop lists give way to the off-canvas panel */
	.hg-nav { display: none; }
	.hg-menu-toggle { margin-left: 0; }

	.hg-mobile-nav { display: block; }

	body.hg-nav-open { overflow: hidden; }
	body.hg-nav-open .hg-mobile-nav {
		transform: translateX(0);
		visibility: visible;
	}

	/* Toggle turns into a cross while the panel is open */
	body.hg-nav-open .hg-menu-dash { background-color: transparent; }
	body.hg-nav-open .hg-menu-dash::before,
	body.hg-nav-open .hg-menu-dash::after { opacity: 1; }
	body.hg-nav-open .hg-menu-dash::before { transform: translateY(7px) rotate(45deg); }
	body.hg-nav-open .hg-menu-dash::after { transform: translateY(-7px) rotate(-45deg); }

	.hg-menu-toggle { position: relative; z-index: 40; }
	body.hg-nav-open .hg-menu-toggle { color: var(--hg-light); }

	/* Hero */
	.hg-hero {
		min-height: min(88vh, 40rem);
		padding-top: clamp(8rem, 30vw, 11rem);
		padding-bottom: clamp(3rem, 10vw, 4.5rem);
		align-items: flex-end;
	}
	.hg-hero__title { max-width: 16ch; }
	.hg-hero::before {
		background: linear-gradient(0deg, rgba(10, 16, 10, 0.82) 0%, rgba(10, 16, 10, 0.5) 45%, rgba(10, 16, 10, 0.25) 100%);
	}

	/* Cards two-up */
	.hg-cards { grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 4vw, 1.875rem); }

	/* Footer stacks */
	.hg-footer__cols {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: clamp(2rem, 7vw, 3rem);
	}
	.hg-footer__col { padding-inline: 0; }
	.hg-footer__col + .hg-footer__col {
		border-left: 0;
		border-top: 1px solid rgba(244, 242, 230, 0.18);
		padding-top: clamp(2rem, 7vw, 3rem);
		width: 100%;
	}
	.hg-contact li { justify-content: center; }
	.hg-social { justify-content: center; }

	.hg-footer__bar {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: clamp(0.75rem, 3vw, 1rem);
	}
	.hg-footer__copyright,
	.hg-footer__legal { grid-column: 1; justify-self: center; }
}

/* ---------- 600px -------------------------------------------------------- */

@media (max-width: 600px) {
	.hg-cards { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
	.hg-card__media img { aspect-ratio: 3 / 4; }

	.hg-hero__title { font-size: clamp(2.25rem, 10.5vw, 3rem); max-width: 14ch; }
	.hg-cta__title { letter-spacing: 0.22em; line-height: 1.9; }

	.hg-services { padding-block: clamp(3rem, 12vw, 4rem); }
	.hg-footer__legal { flex-wrap: wrap; justify-content: center; }
}

/* ---------- 360px -------------------------------------------------------- */

@media (max-width: 360px) {
	/* Below this width two columns leave the captions too cramped to read. */
	.hg-cards { grid-template-columns: 1fr; max-width: 18rem; margin-inline: auto; }
	.hg-card__media img { aspect-ratio: 257 / 445; }
}

/* ---------- Print -------------------------------------------------------- */

@media print {
	.hg-header, .hg-hero__aside, .hg-cta, .hg-social { display: none !important; }
	body { background: #fff; color: #000; }
}