/* =========================================================================
   Groups & Events page — The Hoppy Monk
   =========================================================================
   Every rule is scoped to .hm-groups so nothing can affect the rest of the
   site. Paste into the CHILD THEME stylesheet, or Salient → Theme Options →
   Custom CSS/JS.

   The page background is set at page or row level in WordPress, not here —
   see the build guide.
   ====================================================================== */

.hm-groups {
		--ink:       #ffffff;
		--ink-soft:  rgba(255,255,255,0.60);
		--ink-faint: rgba(255,255,255,0.36);
		--page:      #000000;
		--line:      rgba(255,255,255,0.22);
		--line-lit:  rgba(255,255,255,0.55);
		--fill:      #ffffff;
		--fill-ink:  #000000;
		--track:     0.18em;
		--maxw:      68rem;

	color: var(--ink);
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* --- Defensive reset -------------------------------------------------------
   Salient styles headings and form controls with compound selectors such as
   `.container-wrap h2` — specificity (0,1,1). A single scope class ties with
   that, and ties are resolved by stylesheet order, which we do not control.
   Doubling the scope class gives (0,2,1) and wins outright.

   This is exactly the conflict that hid the press page title. Muted text is
   re-declared at the same specificity so the reset cannot flatten it.
   -------------------------------------------------------------------------- */

.hm-groups.hm-groups h1,
.hm-groups.hm-groups h2,
.hm-groups.hm-groups h3,
.hm-groups.hm-groups p,
.hm-groups.hm-groups figure {
	color: var(--ink);
	font-family: inherit;
	background: none;
	text-shadow: none;
}

.hm-groups.hm-groups h1::before, .hm-groups.hm-groups h1::after,
.hm-groups.hm-groups h2::before, .hm-groups.hm-groups h2::after,
.hm-groups.hm-groups h3::before, .hm-groups.hm-groups h3::after {
	content: none;
}

.hm-groups.hm-groups .lede,
.hm-groups.hm-groups .eyebrow,
.hm-groups.hm-groups .occasion,
.hm-groups.hm-groups .feature p,
.hm-groups.hm-groups .enquire > div > p,
.hm-groups.hm-groups .closing p,
.hm-groups.hm-groups label {
	color: var(--ink-soft);
}

.hm-groups.hm-groups .gallery-note,
.hm-groups.hm-groups .form-note,
.hm-groups.hm-groups .direct .label,
.hm-groups.hm-groups .req {
	color: var(--ink-faint);
}

.hm-groups.hm-groups input,
.hm-groups.hm-groups select,
.hm-groups.hm-groups textarea {
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--line);
	box-shadow: none;
	max-width: none;
	font-family: inherit;
}

.hm-groups.hm-groups a { text-decoration: none; }
.hm-groups.hm-groups .direct a { color: var(--ink); }
.hm-groups.hm-groups .btn { color: var(--ink); border-radius: 0; text-shadow: none; box-shadow: none; }
.hm-groups.hm-groups .btn--solid { color: var(--fill-ink); }

.hm-groups * { box-sizing: border-box; }.hm-groups .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 1.5rem; }.hm-groups .eyebrow {
		margin: 0;
		font-size: 0.6875rem;
		font-weight: 700;
		letter-spacing: var(--track);
		text-transform: uppercase;
		color: var(--ink-soft);
	}.hm-groups section { padding-block: clamp(3rem, 8vw, 5.5rem); }.hm-groups .rule { border-top: 1px solid var(--line); }.hm-groups /* ---------------- Hero ---------------- */

	.hero { text-align: center; padding: clamp(4rem, 11vw, 7rem) 0 clamp(2.5rem, 6vw, 3.5rem); }.hm-groups .hero h1 {
		margin: 1.5rem 0 0;
		font-size: clamp(2rem, 6.5vw, 3.75rem);
		font-weight: 300;
		line-height: 1.08;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
		text-transform: uppercase;
	}.hm-groups .lede {
		margin: 1.75rem auto 0;
		max-width: 44rem;
		font-size: clamp(1rem, 1.9vw, 1.125rem);
		color: var(--ink-soft);
	}.hm-groups .lede--center { text-align: center; }.hm-groups .actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
		justify-content: center;
		margin-top: 2.5rem;
	}.hm-groups /* ---------------- Buttons ---------------- */

	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		font: inherit;
		font-size: 0.6875rem;
		font-weight: 700;
		letter-spacing: var(--track);
		text-transform: uppercase;
		color: var(--ink);
		background: transparent;
		border: 1px solid var(--line);
		border-radius: 0;
		padding: 1rem 2rem;
		text-decoration: none;
		cursor: pointer;
		transition: color .2s ease, background-color .2s ease, border-color .2s ease;
	}.hm-groups .btn:hover, .hm-groups .btn:focus-visible {
		color: var(--fill-ink); background: var(--fill); border-color: var(--fill);
	}.hm-groups .btn--solid { color: var(--fill-ink); background: var(--fill); border-color: var(--fill); }.hm-groups .btn--solid:hover, .hm-groups .btn--solid:focus-visible {
		color: var(--ink); background: transparent; border-color: var(--line-lit);
	}.hm-groups .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }.hm-groups /* ---------------- Section heads ---------------- */

	.section-head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3rem); }.hm-groups .section-head h2 {
		margin: 0.9rem 0 0;
		font-size: clamp(1.5rem, 3.4vw, 2.125rem);
		font-weight: 300;
		line-height: 1.15;
		letter-spacing: 0.16em;
		text-indent: 0.16em;
		text-transform: uppercase;
	}.hm-groups /* ---------------- Occasions ---------------- */

	.occasions {
		display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center;
		max-width: 52rem; margin-inline: auto;
	}.hm-groups .occasion {
		font-size: 0.6875rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--ink-soft);
		border: 1px solid var(--line);
		padding: 0.65rem 1.1rem;
	}.hm-groups /* ---------------- Features ---------------- */

	.features { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.5rem, 4vw, 3rem); }.hm-groups .feature { padding-top: 1.5rem; border-top: 1px solid var(--line); }.hm-groups .feature h3 {
		margin: 0 0 0.75rem;
		font-size: 0.75rem; font-weight: 700;
		letter-spacing: var(--track); text-transform: uppercase;
	}.hm-groups .feature p { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); }.hm-groups /* ---------------- Gallery ---------------- */

	.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }.hm-groups .shot {
		position: relative;
		margin: 0;
		aspect-ratio: 1;
		overflow: hidden;
		background: #0d0d0d;
	}.hm-groups .shot img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		display: block;
		transition: transform .5s ease, opacity .3s ease;
	}.hm-groups .shot:hover img { transform: scale(1.04); }.hm-groups .shot--wide { grid-column: span 2; aspect-ratio: 2/1; }.hm-groups .gallery-note {
		margin: 1.5rem 0 0;
		text-align: center;
		font-size: 0.75rem;
		color: var(--ink-faint);
	}.hm-groups /* ---------------- Enquiry ---------------- */

	.enquire {
		display: grid;
		grid-template-columns: minmax(0,5fr) minmax(0,7fr);
		gap: clamp(2rem, 6vw, 4rem);
		align-items: start;
	}.hm-groups .enquire h2 {
		margin: 0.9rem 0 1.25rem;
		font-size: clamp(1.5rem, 3vw, 2rem);
		font-weight: 300; line-height: 1.15;
		letter-spacing: 0.16em; text-transform: uppercase;
	}.hm-groups .enquire > div > p { color: var(--ink-soft); font-size: 0.9375rem; }.hm-groups .direct { margin-top: 2rem; display: grid; gap: 1.5rem; }.hm-groups .direct .label {
		display: block;
		font-size: 0.625rem; font-weight: 700;
		letter-spacing: var(--track); text-transform: uppercase;
		color: var(--ink-faint); margin-bottom: 0.4rem;
	}.hm-groups .direct a {
		color: var(--ink); text-decoration: none;
		font-size: 1.0625rem;
		border-bottom: 1px solid var(--line);
		padding-bottom: 3px;
		transition: border-color .2s ease;
	}.hm-groups .direct a:hover, .hm-groups .direct a:focus-visible { border-color: var(--ink); }.hm-groups form { display: grid; gap: 1.25rem; }.hm-groups .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }.hm-groups .field { display: grid; gap: 0.5rem; }.hm-groups label {
		font-size: 0.625rem; font-weight: 700;
		letter-spacing: var(--track); text-transform: uppercase;
		color: var(--ink-soft);
	}.hm-groups .req { color: var(--ink-faint); }.hm-groups input, .hm-groups select, .hm-groups textarea {
		font: inherit; font-size: 0.9375rem;
		color: var(--ink); background: transparent;
		border: 1px solid var(--line); border-radius: 0;
		padding: 0.85rem 1rem; width: 100%;
		transition: border-color .2s ease;
	}.hm-groups input:hover, .hm-groups select:hover, .hm-groups textarea:hover { border-color: var(--line-lit); }.hm-groups input:focus, .hm-groups select:focus, .hm-groups textarea:focus { outline: none; border-color: var(--ink); }.hm-groups input::placeholder, .hm-groups textarea::placeholder { color: var(--ink-faint); }.hm-groups select {
		appearance: none;
		background-image:
			linear-gradient(45deg, transparent 50%, rgba(255,255,255,.55) 50%),
			linear-gradient(135deg, rgba(255,255,255,.55) 50%, transparent 50%);
		background-position: calc(100% - 20px) 1.3rem, calc(100% - 15px) 1.3rem;
		background-size: 5px 5px, 5px 5px;
		background-repeat: no-repeat;
	}.hm-groups select option { background: #111; color: #fff; }.hm-groups textarea { resize: vertical; min-height: 7rem; }.hm-groups .hp { position: absolute; left: -9999px; }.hm-groups .form-note { margin: 0; font-size: 0.75rem; color: var(--ink-faint); }.hm-groups .form-msg {
		margin: 0; padding: 0.9rem 1rem;
		border: 1px solid var(--line);
		font-size: 0.6875rem; font-weight: 700;
		letter-spacing: 0.1em; text-transform: uppercase;
		color: var(--ink-soft);
	}.hm-groups [hidden] { display: none !important; }.hm-groups /* ---------------- Closing ---------------- */

	.closing { text-align: center; }.hm-groups .closing p { max-width: 38rem; margin: 1.25rem auto 0; color: var(--ink-soft); }.hm-groups /* ---------------- Responsive ---------------- */

	@media (max-width: 900px) {
		.features, .enquire { grid-template-columns: 1fr; }
		.gallery { grid-template-columns: repeat(2, 1fr); }
	}@media (max-width: 560px) {.hm-groups .row { grid-template-columns: 1fr; }.hm-groups .actions .btn { width: 100%; }.hm-groups .hero h1 { letter-spacing: 0.13em; text-indent: 0.13em; }
	}@media (prefers-reduced-motion: reduce) {.hm-groups * { transition-duration: .01ms !important; }
	}