/*
 * Overlays (theme 0.18.0, global): enquiry popup, floating "Enquire" button, photo lightbox.
 * All use native <dialog> (focus trap, Escape, inert background) opened by main.js.
 */
@layer components {
	/* ------------------------------------------------------------ Shared dialog base */
	.enq-popup,
	.lightbox {
		max-width: none;
		max-height: none;
		margin: auto;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--color-text);
		overflow: visible;
	}
	.enq-popup::backdrop,
	.lightbox::backdrop {
		background: color-mix(in srgb, var(--palette-slate) 72%, transparent);
		backdrop-filter: blur(6px);
	}
	.enq-popup[open],
	.lightbox[open] { animation: gpipl-dialog-in 420ms var(--ease-out) both; }
	.enq-popup[open]::backdrop,
	.lightbox[open]::backdrop { animation: gpipl-fade-in 300ms ease-out both; }
	html:has(dialog[open]) { overflow: hidden; }

	/* ------------------------------------------------------------ Enquiry popup */
	.enq-popup { width: min(100% - 2rem, 58rem); }
	.enq-popup__card:focus { outline: none; }
	.enq-popup__card {
		position: relative;
		display: grid;
		overflow: hidden;
		border-radius: 1.25rem;
		background: var(--color-bg);
		box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.55);
	}
	@media (min-width: 52em) {
		.enq-popup__card { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); }
	}
	.enq-popup__close {
		position: absolute;
		top: 0.75rem;
		right: 0.75rem;
		z-index: 3;
		display: grid;
		place-items: center;
		width: var(--tap);
		height: var(--tap);
		border: 0;
		border-radius: 50%;
		background: color-mix(in srgb, var(--palette-slate) 8%, var(--color-bg));
		color: var(--color-text);
		cursor: pointer;
		transition: background-color 200ms var(--ease-out), transform 300ms var(--ease-out);
	}
	.enq-popup__close:hover { background: var(--palette-green); color: var(--on-brand); transform: rotate(90deg); }
	.enq-popup__close:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

	/* Side panel */
	.enq-popup__side {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		padding: var(--space-l) var(--space-l) var(--space-m);
		color: var(--palette-paper);
		background:
			radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--palette-green) 60%, transparent), transparent 65%),
			radial-gradient(60% 50% at 0% 100%, color-mix(in srgb, var(--palette-green) 30%, transparent), transparent 70%),
			var(--palette-slate);
	}
	.enq-popup__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
	.enq-popup__side.has-photo::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(180deg, color-mix(in srgb, var(--palette-slate) 55%, transparent), var(--palette-slate) 85%);
	}
	.enq-popup__grid {
		position: absolute;
		inset: 0;
		z-index: -1;
		background-image:
			linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
			linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
		background-size: 30px 30px;
		mask-image: radial-gradient(ellipse 90% 70% at 70% 10%, #000 20%, transparent 75%);
	}
	.enq-popup__side-inner { display: grid; gap: var(--space-s); height: 100%; align-content: start; }
	.enq-popup__eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		font-size: var(--step--2);
		font-weight: var(--wght-semibold);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: color-mix(in srgb, var(--accent-light) 70%, #fff);
	}
	.enq-popup__dot { position: relative; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent-light); }
	.enq-popup__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent-light); animation: gpipl-ping 1.8s ease-out infinite; }
	.enq-popup__title { font-size: var(--step-3); line-height: 1.12; color: inherit; }
	.enq-popup__title span { display: block; margin-top: 0.15em; color: color-mix(in srgb, var(--accent-light) 75%, #fff); }
	.enq-popup__text { color: rgb(255 255 255 / 0.78); line-height: 1.55; }
	.enq-popup__quick { display: grid; gap: var(--space-2xs); margin: var(--space-xs) 0 0; padding: 0; list-style: none; }
	.enq-popup__quick a {
		display: flex;
		align-items: center;
		gap: var(--space-s);
		min-height: var(--tap);
		padding: 0.6rem 0.8rem;
		border: 1px solid rgb(255 255 255 / 0.12);
		border-radius: 0.85rem;
		background: rgb(255 255 255 / 0.05);
		color: #fff;
		font-weight: var(--wght-semibold);
		text-decoration: none;
		overflow-wrap: anywhere;
		transition: background-color 250ms var(--ease-out), border-color 250ms var(--ease-out), transform 250ms var(--ease-out);
	}
	.enq-popup__quick a:hover { background: rgb(255 255 255 / 0.1); border-color: var(--accent-light); transform: translateX(3px); }
	.enq-popup__quick small { display: block; font-size: var(--step--2); font-weight: var(--wght-body); color: rgb(255 255 255 / 0.65); }
	.enq-popup__qi { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 0.7rem; background: var(--palette-green); color: var(--on-brand); }
	.enq-popup__qi .icon { width: 1.1rem; height: 1.1rem; }

	/* Form */
	.enq-popup__form { display: grid; gap: var(--space-s); align-content: start; padding: var(--space-l); }
	.enq-popup__label { display: block; margin-bottom: 0.35rem; font-size: var(--step--1); font-weight: var(--wght-semibold); color: var(--color-heading); }
	.enq-popup__label span { color: var(--palette-green); }
	.enq-popup__topics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; border: 0; padding-right: 2.5rem; }
	.enq-popup__topics legend { width: 100%; padding: 0; }
	.enq-chip { position: relative; }
	.enq-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
	.enq-chip span {
		display: inline-flex;
		align-items: center;
		min-height: 2.5rem;
		padding: 0 0.95rem;
		border: 1px solid var(--color-line-strong);
		border-radius: 999px;
		font-size: var(--step--1);
		font-weight: var(--wght-medium);
		color: var(--color-text);
		transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
	}
	.enq-chip:hover span { border-color: var(--palette-green); }
	.enq-chip input:checked + span { background: var(--palette-green); border-color: var(--palette-green); color: var(--on-brand); }
	.enq-chip input:focus-visible + span { outline: var(--focus-ring); outline-offset: 2px; }
	.enq-popup__row { display: grid; gap: var(--space-s); }
	@media (min-width: 30em) { .enq-popup__row { grid-template-columns: 1fr 1fr; } }
	.enq-popup__form .field { margin: 0; }
	.enq-popup__form .input,
	.enq-popup__form .textarea { width: 100%; border-radius: 0.6rem; }
	.enq-popup__form .textarea { min-height: 5.5rem; resize: vertical; }
	.enq-popup__form [aria-invalid="true"] { border-color: var(--color-attention-strong); box-shadow: 0 0 0 3px var(--color-attention-tint); }
	.enq-popup__consent { font-size: var(--step--1); }
	.enq-popup__error { margin: 0; padding: 0.6rem 0.8rem; border-radius: 0.6rem; background: var(--color-attention-tint); color: var(--color-attention-text); font-size: var(--step--1); }
	.enq-popup__submit { gap: 0.5rem; border-radius: 0.7rem; }
	.enq-popup__submit .icon { transition: transform 250ms var(--ease-out); }
	.enq-popup__submit:hover .icon { transform: translateX(4px); }
	.enq-popup__submit[aria-disabled="true"] { opacity: 0.7; cursor: progress; }

	/* Phones: a sheet from the bottom; compact side panel. */
	@media (max-width: 51.99em) {
		.enq-popup { width: 100%; margin: auto 0 0; }
		.enq-popup[open] { animation-name: gpipl-sheet-in; }
		.enq-popup__card { max-height: 92dvh; overflow-y: auto; border-radius: 1.25rem 1.25rem 0 0; overscroll-behavior: contain; }
		.enq-popup__side { padding: var(--space-m) var(--space-m) var(--space-s); }
		.enq-popup__title { font-size: var(--step-2); padding-right: 2.5rem; }
		.enq-popup__text { display: none; }
		.enq-popup__quick { grid-template-columns: 1fr; margin: 0; }
		.enq-popup__quick a { overflow-wrap: normal; word-break: normal; }
		.enq-popup__quick a { padding: 0.45rem 0.6rem; font-size: var(--step--1); }
		.enq-popup__quick small { display: none; }
		.enq-popup__qi { width: 2rem; height: 2rem; }
		.enq-popup__form { padding: var(--space-m); }
		.enq-popup__topics { padding-right: 0; }
		.enq-popup__close { background: rgb(255 255 255 / 0.12); color: #fff; }
	}

	/* Floating button */
	.enquire-fab {
		position: fixed;
		left: max(1rem, env(safe-area-inset-left));
		bottom: max(1rem, env(safe-area-inset-bottom));
		z-index: var(--z-overlay);
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 3rem;
		padding: 0 1.15rem 0 0.95rem;
		border: 0;
		border-radius: 999px;
		background: var(--palette-green);
		color: var(--on-brand);
		font: inherit;
		font-weight: var(--wght-semibold);
		box-shadow: 0 14px 30px -12px var(--glow-green, rgb(0 0 0 / 0.4));
		cursor: pointer;
		transform: translateY(150%);
		transition: transform 500ms var(--ease-out), background-color 200ms var(--ease-out);
	}
	.enquire-fab.is-shown { transform: none; }
	.enquire-fab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--palette-green); animation: gpipl-ping 2.6s ease-out infinite; pointer-events: none; }
	.enquire-fab:hover { background: color-mix(in srgb, var(--palette-green) 85%, var(--palette-slate)); }
	.enquire-fab:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
	.enquire-fab .icon { width: 1.2rem; height: 1.2rem; }

	/* ------------------------------------------------------------ Lightbox */
	.lightbox { width: 100vw; height: 100dvh; }
	.lightbox__stage { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 4rem 4.5rem 5rem; }
	.lightbox__img { max-width: min(100%, calc(100vw - 9rem)); max-height: calc(100dvh - 9rem); width: auto; height: auto; object-fit: contain; border-radius: 0.6rem; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.6); background: rgb(255 255 255 / 0.04); }
	.lightbox__img.is-in { animation: gpipl-dialog-in 380ms var(--ease-out) both; }
	.lightbox__btn {
		position: absolute;
		display: grid;
		place-items: center;
		width: 3rem;
		height: 3rem;
		border: 1px solid rgb(255 255 255 / 0.2);
		border-radius: 50%;
		background: rgb(0 0 0 / 0.35);
		color: #fff;
		cursor: pointer;
		transition: background-color 200ms var(--ease-out);
	}
	.lightbox__btn:hover { background: var(--palette-green); color: var(--on-brand); }
	.lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
	.lightbox__close { top: 1rem; right: 1rem; }
	.lightbox__prev { left: 1rem; top: 50%; translate: 0 -50%; }
	.lightbox__next { right: 1rem; top: 50%; translate: 0 -50%; }
	.lightbox__prev .icon { transform: scaleX(-1); }
	.lightbox__meta { position: absolute; left: 50%; bottom: 1.25rem; translate: -50% 0; display: flex; gap: var(--space-s); align-items: center; max-width: calc(100% - 2rem); color: rgb(255 255 255 / 0.85); font-size: var(--step--1); text-align: center; }
	.lightbox__count { font-variant-numeric: tabular-nums; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgb(0 0 0 / 0.4); white-space: nowrap; }
	@media (max-width: 40em) {
		.lightbox__stage { padding: 3.75rem 0.75rem 4.5rem; }
		.lightbox__img { max-width: calc(100vw - 1.5rem); max-height: calc(100dvh - 9rem); }
		.lightbox__prev, .lightbox__next { top: auto; bottom: 0.75rem; translate: none; }
	}

	@keyframes gpipl-dialog-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
	@keyframes gpipl-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
	@keyframes gpipl-fade-in { from { opacity: 0; } to { opacity: 1; } }
	@keyframes gpipl-ping { 0% { opacity: 0.7; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.6); } }

	@media (prefers-reduced-motion: reduce) {
		.enq-popup[open], .lightbox[open], .enq-popup[open]::backdrop, .lightbox[open]::backdrop, .lightbox__img.is-in { animation: none; }
		.enq-popup__dot::after, .enquire-fab::before { animation: none; display: none; }
		.enquire-fab { transition: none; }
	}
	@media (forced-colors: active) {
		.enq-popup__card, .lightbox__btn, .enquire-fab { border: 1px solid CanvasText; }
	}
	@media print { .enquire-fab, .enq-popup, .lightbox { display: none !important; } }
}