/* =========================================================================
   The Olive House — v2 responsive refinements
   ========================================================================= */

/* Laptops ----------------------------------------------------------------- */
@media (max-width: 1080px) {
	.oh-footer-grid { grid-template-columns: 1fr 1fr; }

	.oh-cards--index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.oh-cards--index .oh-card--featured { grid-column: 1 / -1; grid-row: auto; }
}

/* Tablets ------------------------------------------------------------------ */
@media (max-width: 920px) {

	/* Header: logo + Register + toggle. Nav becomes a dark overlay. */
	.oh-header-actions { display: inline-flex; }

	.oh-nav {
		position: fixed;
		inset: 0;
		z-index: 120;
		background: var(--olive-deep);
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: 1.25rem clamp(1.5rem, 7vw, 3rem) 3rem;
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-14px);
		pointer-events: none;
		transition:
			opacity 340ms var(--ease),
			transform 400ms var(--ease),
			visibility 0s linear 400ms;
	}

	.oh-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		transition:
			opacity 340ms var(--ease),
			transform 400ms var(--ease),
			visibility 0s;
	}

	body.oh-menu-open { overflow: hidden; }

	/* Overlay chrome: "Menu" label and a real close button. */
	.oh-nav-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 56px;
		margin-bottom: clamp(1.5rem, 6vh, 3rem);
		border-bottom: 1px solid rgba(247, 244, 237, 0.14);
		padding-bottom: 1rem;
	}

	.oh-nav-label {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: 0.8rem;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--olive-gold);
	}

	.oh-nav-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		border-radius: 50%;
		border: 1.5px solid rgba(247, 244, 237, 0.6);
		background: transparent;
		color: var(--ivory);
		cursor: pointer;
		transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition);
	}

	.oh-nav-close:hover {
		border-color: var(--olive-gold);
		background: var(--olive-gold);
		color: #241c07;
		transform: rotate(90deg);
	}

	.oh-nav-list { flex-direction: column; gap: 0; }

	.oh-nav-list a {
		display: block;
		font-size: clamp(1.45rem, 5.5vw, 1.9rem);
		font-weight: 800;
		letter-spacing: -0.01em;
		padding: 1rem 0;
		border-bottom: 1px solid rgba(247, 244, 237, 0.12);
	}

	.oh-nav-list a::after { content: none; }

	/* Items rise in one after another once the overlay is visible. */
	.oh-nav-list li,
	.oh-nav .oh-nav-cta {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 420ms var(--ease), transform 460ms var(--ease);
	}

	.oh-nav.is-open .oh-nav-list li,
	.oh-nav.is-open .oh-nav-cta {
		opacity: 1;
		transform: none;
	}

	.oh-nav.is-open .oh-nav-list li:nth-child(1) { transition-delay: 90ms; }
	.oh-nav.is-open .oh-nav-list li:nth-child(2) { transition-delay: 150ms; }
	.oh-nav.is-open .oh-nav-list li:nth-child(3) { transition-delay: 210ms; }
	.oh-nav.is-open .oh-nav-list li:nth-child(4) { transition-delay: 270ms; }
	.oh-nav.is-open .oh-nav-list li:nth-child(5) { transition-delay: 330ms; }
	.oh-nav.is-open .oh-nav-list li:nth-child(6) { transition-delay: 390ms; }
	.oh-nav.is-open .oh-nav-cta { transition-delay: 440ms; }

	.oh-nav-cta {
		margin-top: 2.25rem;
		align-self: flex-start;
	}

	/* Hero stacks: panel first (message before media), then the doorway. */
	.oh-hero-layout { grid-template-columns: 1fr; min-height: 0; }

	.oh-hero-panel { padding-block: clamp(2.5rem, 6vw, 3.5rem) 0; }

	.oh-hero-panel-inner {
		max-width: 640px;
		margin-inline: auto;
		padding-inline-end: 0;
	}

	.oh-hero-media {
		padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1.25rem, 4.5vw, 2.5rem) clamp(2.5rem, 6vw, 3.5rem);
	}

	.oh-hero-frame { min-height: 340px; }

	.oh-sechead { grid-template-columns: 1fr; gap: 0.5rem; }

	.oh-intro-grid,
	.oh-heritage-grid,
	.oh-page-hero-grid,
	.oh-welcome-grid,
	.oh-contact-grid,
	.oh-register-grid,
	.oh-programme-grid,
	.oh-about-cols { grid-template-columns: 1fr; }

	.oh-intro-media { justify-self: center; }

	.oh-arch--page { justify-self: center; }

	.oh-cards--index { grid-template-columns: 1fr; }
}

/* Large phones ---------------------------------------------------------------- */
@media (max-width: 760px) {
	.oh-brand img,
	.oh-brand .custom-logo { height: 52px; }

	.oh-header-inner { min-height: 76px; }

	.oh-form-grid { grid-template-columns: 1fr; gap: 0; }

	.oh-newsletter-fields { grid-template-columns: 1fr; align-items: stretch; }
	.oh-newsletter-fields .oh-btn { width: 100%; }

	.oh-gallery-strip { border-radius: 160px 160px var(--radius-m) var(--radius-m); }
	.oh-gallery-strip img { aspect-ratio: 4 / 3; }

	.oh-footer-bottom { justify-content: center; text-align: center; }

	.oh-hero-actions { align-items: stretch; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
	.oh-hero-actions .oh-btn { width: 100%; }
}

/* Small phones ------------------------------------------------------------------- */
@media (max-width: 560px) {
	.oh-footer-grid { grid-template-columns: 1fr; }

	.oh-center-actions .oh-btn { width: 100%; }

	.oh-hero-heading { font-size: clamp(2rem, 9vw, 2.6rem); }

	.oh-hero-slidenav { gap: 1rem; }

	.oh-menu-label { display: none; }
	.oh-menu-toggle { padding: 0.6rem 0.75rem; }

	.oh-announce p { padding-inline: 2.6rem; font-size: 0.74rem; }

	.oh-container { padding-inline: 1.1rem; }

	.oh-hero-frame { min-height: 300px; }
}

/* 360px baseline -------------------------------------------------------------------- */
@media (max-width: 380px) {
	.oh-header-register { padding: 0.75rem 1rem; font-size: 0.82rem; }

	.oh-brand img,
	.oh-brand .custom-logo { height: 46px; }
}

/* Wide desktops ----------------------------------------------------------------------- */
@media (min-width: 1700px) {
	.oh-hero-layout { min-height: 680px; }
}