/*
Theme Name: GayRoomies
Theme URI: https://gayroomies.net
Description: Child theme of ComunityQ for GayRoomies.net — a room and rental directory for the LGBTQ+ community. Pairs with the GayRoomies Directory plugin.
Author: David Clouse
Author URI: https://clousedesigns.com
Template: comunityq
Version:           1.7.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: gayroomies
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/*
 * Brand tokens.
 *
 * The palette is applied through the parent's Customizer settings (see
 * functions.php), NOT by overriding --cq-* here. That distinction matters:
 * ComunityQ derives its whole surface ramp in PHP from the Customizer's
 * background and text colours. Overriding the colours in CSS while leaving the
 * settings untouched is what produced the half-converted palette on
 * MaturePride -- near-white text on a light-grey button at 1.16:1.
 *
 * So: colours go in theme mods, and this file only adds things the parent has
 * no opinion about.
 */
:root {
	--gr-violet: #7c3aed;
	--gr-violet-dark: #6d28d9;
	--gr-ink: #0f172a;
	--gr-page: #fffdf9;
	--gr-teal: #059669;
	--gr-amber: #d97706;

	/* Pride flag, used for the headline accent and section rules. */
	--gr-pride-red: #e40303;
	--gr-pride-orange: #ff8c00;
	--gr-pride-yellow: #ffc800;
	--gr-pride-green: #008026;
	--gr-pride-blue: #24408e;
	--gr-pride-purple: #732982;
}

/* The mockup pairs friendly rounded sans copy with crisp, weighty headings.
   These are progressive system fallbacks: no render-blocking font download. */
.gr-home {
	font-family: "Nunito Sans", "Avenir Next", Avenir, system-ui, sans-serif;
	background: var(--gr-page);
}

.gr-home h1,
.gr-home h2,
.gr-home h3,
.gr-home .btn {
	font-family: "Nunito Sans", "Avenir Next", Avenir, system-ui, sans-serif;
	font-weight: 700;
}

/* Primary calls to action follow the mockup's rich violet gradient; the
   stronger hover gives a clear response without changing the text colour. */
.btn.btn-primary {
	background: linear-gradient(135deg, #7c2bc4 0%, #9c3bd3 100%);
	border-color: transparent;
	color: #ffffff;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus-visible {
	background: linear-gradient(135deg, #6920ad 0%, #852bc0 100%);
	border-color: transparent;
	color: #ffffff;
}

.btn.btn-primary:focus-visible {
	box-shadow: 0 0 0 0.25rem rgba(124, 43, 196, 0.28);
}

/* --------------------------------------------------------------------------
   Call to action
   -------------------------------------------------------------------------- */

/*
 * One button style for every call to action on the site.
 *
 * This job was previously done by five different Bootstrap variants:
 * btn-primary in the hero and the community band, btn-outline-light over the
 * hero media, btn-success on the landlord card and btn-warning on the roommate
 * card. Three colours for three actions of equal weight read as three
 * different kinds of thing, and nobody had checked what the green and amber
 * ones measured. The journey cards keep their coloured icons and titles, which
 * is where that identity belongs -- the action itself is the same action.
 *
 * Standalone rather than a modifier on .btn on purpose: it has to look the
 * same whether or not the parent theme's Bootstrap is on the page, and
 * extending .btn means inheriting whatever padding and radius ComunityQ
 * happens to set for it.
 */
.gr-cta {
	--gr-cta-bg: linear-gradient(135deg, #7c2bc4 0%, #9c3bd3 100%);
	--gr-cta-bg-hover: linear-gradient(135deg, #6920ad 0%, #852bc0 100%);
	--gr-cta-fg: #ffffff;
	--gr-cta-border: transparent;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;

	/*
	 * 2.75rem is 44px, the smallest comfortable touch target. Expressed as a
	 * min-height rather than as vertical padding so that a button whose label
	 * wraps to two lines on a narrow screen still lines up with a single-line
	 * button beside it instead of growing past it.
	 */
	min-height: 2.75rem;
	padding: 0.625rem 1.5rem;
	border: 1px solid var(--gr-cta-border);
	border-radius: 0.55rem;
	background: var(--gr-cta-bg);
	color: var(--gr-cta-fg);
	font: inherit;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.gr-cta:hover,
.gr-cta:focus-visible {
	background: var(--gr-cta-bg-hover);
	color: var(--gr-cta-fg);
	text-decoration: none;
}

.gr-cta:focus-visible {
	/* The transparent outline is not decorative: it is what keeps a focus ring
	   visible in forced-colours mode, where box-shadow is dropped entirely. */
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 0.25rem rgba(124, 43, 196, 0.28);
}

.gr-cta:active {
	transform: translateY(1px);
}

/*
 * Secondary: same shape and size, no fill, for the lower-commitment action
 * sitting beside a primary one.
 *
 * This replaces btn-outline-light in the hero, which was a white-outlined
 * white-label button sitting on a cream background (--gr-page is #fffdf9) --
 * legible only where the hero photograph happened to run behind it, and on
 * narrow screens the media drops to 18% opacity so it was barely there at all.
 */
.gr-cta--secondary {
	--gr-cta-bg: transparent;
	--gr-cta-bg-hover: rgba(124, 43, 196, 0.09);
	--gr-cta-fg: #6920ad;
	--gr-cta-border: currentColor;
}

.gr-cta--lg {
	min-height: 3.25rem;
	padding: 0.8rem 1.9rem;
	font-size: 1.0625rem;
}

/* Fills its column -- the search panel's submit, which has to match the width
   of the field above it rather than its own label. */
.gr-cta--block {
	width: 100%;
}

/*
 * Rows of calls to action wrap rather than overflow. Every place two buttons
 * sit side by side is a place they have to stack on a phone.
 */
.gr-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   Rainbow headline accent
   -------------------------------------------------------------------------- */

/*
 * Per-letter spans rather than a gradient across the whole phrase: the mockup
 * colours each letter distinctly, and background-clip on a gradient cannot do
 * that. Falls back to the violet brand colour where background-clip is
 * unsupported, so the text is never invisible.
 */
.gr-rainbow {
	color: var(--gr-violet);
}

.gr-rainbow span:nth-child(6n + 1) { color: var(--gr-pride-red); }
.gr-rainbow span:nth-child(6n + 2) { color: var(--gr-pride-orange); }
.gr-rainbow span:nth-child(6n + 3) { color: var(--gr-pride-yellow); }
.gr-rainbow span:nth-child(6n + 4) { color: var(--gr-pride-green); }
.gr-rainbow span:nth-child(6n + 5) { color: var(--gr-pride-blue); }
.gr-rainbow span:nth-child(6n + 6) { color: var(--gr-pride-purple); }

.gr-pride-rule {
	height: 4px;
	border: 0;
	border-radius: 2px;
	background: linear-gradient(
		90deg,
		var(--gr-pride-red),
		var(--gr-pride-orange),
		var(--gr-pride-yellow),
		var(--gr-pride-green),
		var(--gr-pride-blue),
		var(--gr-pride-purple)
	);
}

/* --------------------------------------------------------------------------
   Community announcements
   -------------------------------------------------------------------------- */

.gr-announcements {
	display: grid;
	gap: 1.75rem;
	max-width: 48rem;
}

.gr-announcement {
	padding-bottom: 1.75rem;
	border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.gr-announcement:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/*
 * The date leads rather than trails. On a policy announcement it is the first
 * thing a reader needs -- "is this the change I was told about" is answered by
 * the date before it is answered by the headline.
 */
.gr-announcement__date {
	margin: 0 0 0.3rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--gr-violet-dark);
}

.gr-announcement__updated {
	margin-left: 0.6rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: #64748b;
}

.gr-announcement__title {
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	line-height: 1.25;
	margin: 0 0 0.5rem;
}

.gr-announcement__title a {
	color: inherit;
	text-decoration: none;
}

.gr-announcement__title a:hover {
	text-decoration: underline;
}

.gr-announcement__excerpt {
	margin-bottom: 0.9rem;
}

.gr-announcement__more,
.gr-announcement__back {
	margin: 0;
}

.gr-announcement__back {
	margin-top: 2rem;
}

.gr-announcement__body {
	max-width: 44rem;
}

/* --------------------------------------------------------------------------
   Section rhythm
   -------------------------------------------------------------------------- */

.gr-section {
	padding: 3.5rem 0;
}

.gr-section--tight {
	padding: 2rem 0;
}

.gr-section__title {
	text-align: center;
	margin: 0 0 0.5rem;
}

.gr-section__rule {
	width: 3.5rem;
	margin: 0 auto 2rem;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/*
 * How the hero and the search panel share one background.
 *
 * --gr-hero-overlap is the single number that ties them together: the hero
 * reserves that much extra bottom padding, and the search band is pulled up by
 * the same amount. Set it to roughly half the panel's height and the media
 * ends halfway down the panel, which is the effect being asked for.
 *
 * It has to be tuned per breakpoint because the panel reflows from one row to
 * four as the viewport narrows, and there is no CSS expression for "half the
 * height of a later sibling". The alternative -- measuring in JS -- would make
 * the layout depend on script and jump on load.
 *
 * Declared on :root, not on .gr-home, and that matters. It first lived on
 * .gr-home, which the template put on <main> via the parent's
 * comunityq_main_content_classes(). That helper discards the classes it is
 * given whenever Elementor is active on the page:
 *
 *     if ( comunityq_is_elementor_content_request() ) {
 *         return 'cq-main cq-elementor-full-width py-0';   // $base dropped
 *     }
 *
 * So on an Elementor page .gr-home never appeared, --gr-hero-overlap was
 * undefined, and every calc() referring to it became invalid -- collapsing the
 * hero's padding to 0 and the search band's negative margin with it. The hero
 * rendered 351px tall with no overlap at all.
 *
 * On :root the value cannot go missing, so the layout no longer depends on one
 * class surviving a helper it does not control.
 */
:root {
	--gr-hero-overlap: 8rem;
}

.gr-hero {
	position: relative;
	isolation: isolate;
	min-height: 31rem;
	padding: clamp(3.5rem, 7vw, 6rem) 0 calc(var(--gr-hero-overlap) + 3.5rem);
	color: var(--gr-ink);
	background: var(--gr-page);
	overflow: hidden;
}

/* No media selected: retain visual weight on the image side without turning
   the whole hero into a dark banner. */
.gr-hero--none {
	background: var(--gr-page);
}

.gr-hero--none .gr-hero__bg {
	background:
		radial-gradient(circle at 60% 35%, rgba(156, 59, 211, 0.38), transparent 34%),
		radial-gradient(circle at 72% 74%, rgba(0, 128, 38, 0.24), transparent 43%),
		linear-gradient(135deg, #f4edff, #fdf6eb);
}

.gr-hero__bg {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(56%, 58rem);
	z-index: -1;
	overflow: hidden;
	border-radius: 10rem 0 0 10rem;
}

.gr-hero__slides,
.gr-hero__slide,
.gr-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.gr-hero__slide {
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
}

.gr-hero__slide.is-active {
	opacity: 1;
}

.gr-hero__slide img,
.gr-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/*
 * Scrim over the media. Strength is set per-site in the Customizer, because
 * how dark it needs to be is entirely a property of the photograph. The
 * gradient is heavier at the bottom, where the search panel overlaps.
 */
.gr-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--gr-page) 0%, rgba(255, 253, 249, 0.62) 18%, transparent 48%);
}

.gr-hero__inner {
	position: relative;
}

.gr-hero__title {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
	max-width: 11ch;
	color: var(--gr-ink);
	font-weight: 800;
	text-shadow: none;
}

/* The rainbow letters sit on photography here, so they need the same lift as
   the rest of the headline or the yellow drops out against a light sky. */
.gr-hero__stop {
	color: var(--gr-ink);
}

.gr-hero__lead {
	font-size: 1.0625rem;
	max-width: 34rem;
	margin-bottom: 1.75rem;
	color: #334155;
}

/* Row behaviour comes from .gr-cta-row, which this element also carries;
   only the spacing below it is specific to the hero. */
.gr-hero__actions {
	margin-bottom: 2rem;
}

.gr-trust-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1.25rem;
}

.gr-trust {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
}

.gr-trust__icon {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--gr-violet);
}

.gr-trust__title {
	font-size: 0.875rem;
	font-weight: 700;
	margin: 0;
}

.gr-trust__text {
	font-size: 0.8125rem;
	margin: 0;
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Search panel
   -------------------------------------------------------------------------- */

/*
 * The dark panel sets its own foreground colours rather than inheriting. It is
 * a fixed dark surface on a page that may be light or dark, so deriving text
 * from the page palette would eventually put dark text on navy.
 */
/*
 * The band that lifts the panel into the hero. The negative margin is the
 * other half of the --gr-hero-overlap contract described above.
 */
.gr-searchband {
	position: relative;
	z-index: 2;
	margin-top: calc( var(--gr-hero-overlap) * -1 );
}

/*
 * Deep violet rather than the near-black navy this used to be. The navy was
 * borrowed from the mockup but sits outside the palette; violet-900 to
 * violet-800 belongs to the same family as the --gr-violet brand colour and
 * reads as part of the site rather than a slab dropped on top of it.
 *
 * White on #4c1d95 is 10.95:1 and on #5b21b6 is 8.98:1 -- both past AAA, which
 * matters because this panel now sits over photography that could be any
 * brightness.
 */
.gr-search-panel {
	background: linear-gradient(135deg, #0f1f3a 0%, #102744 100%);
	color: #ffffff;
	border-radius: 1rem;
	padding: 1.5rem;
	position: relative;
	box-shadow: 0 18px 40px rgba(15, 31, 58, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.10);
}

.gr-search-panel__title {
	color: #ffffff;
	font-size: 1.125rem;
	margin: 0 0 1rem;
}

.gr-search-panel label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
	margin-bottom: 0.25rem;
}

/*
 * min-height matches .gr-cta's 2.75rem. The submit button in this panel is a
 * .gr-cta, and at the browser default of 42px the fields sat 2px shorter than
 * the button beside them on the same row -- close enough to read as a mistake
 * rather than a choice. Aligning them also lifts every field to the 44px
 * touch target size.
 */
.gr-search-panel input,
.gr-search-panel select {
	min-height: 2.75rem;
	width: 100%;
	padding: 0.6rem 0.7rem;
	border-radius: 0.5rem;
	border: 1px solid #e2e8f0;
	background: #ffffff;
	color: #334155;
	font: inherit;
}

.gr-search-panel input::placeholder {
	color: #64748b;
}

/* Native select options render on a system-coloured menu, so the option text
   needs a dark colour of its own or it is white-on-white in some browsers. */
.gr-search-panel option {
	color: #0f172a;
	background: #ffffff;
}

.gr-search-panel__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	margin-top: 1rem;
	font-size: 0.875rem;
}

.gr-search-panel__chips a {
	display: inline-flex;
	align-items: center;
	color: #f8fafc;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	padding: 0.25rem 0.75rem;
	text-decoration: none;
}

.gr-search-panel__chips a:hover,
.gr-search-panel__chips a:focus-visible {
	border-color: #ffffff;
	background: rgba(255, 255, 255, 0.12);
}

/* --------------------------------------------------------------------------
   Journey cards
   -------------------------------------------------------------------------- */

.gr-journeys {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.25rem;
}

/*
 * Two across rather than auto-fit, for a set of four cards.
 *
 * auto-fit with a 16rem minimum is right for the home page's three journeys --
 * they fill a desktop row exactly. Four of them at the same setting also fit
 * on one row, at about 16rem each, which squeezes the text beside a 4.5rem
 * icon column into a four-word ribbon. Fixing the count instead gives a 2x2
 * block whose cards are wide enough to read.
 */
.gr-journeys--pairs {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767.98px) {
	.gr-journeys--pairs {
		grid-template-columns: minmax(0, 1fr);
	}
}

.gr-journey {
	border-radius: 0.9rem;
	padding: 1.5rem;
	border: 1px solid transparent;
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	column-gap: 1rem;
	align-items: start;
}

.gr-journey__icon {
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	grid-row: 1 / span 3;
}

.gr-journey__title {
	margin: 0 0 0.25rem;
	font-size: 1.125rem;
}

.gr-journey__text {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	opacity: 0.85;
}

.gr-journey .gr-cta {
	justify-self: start;
}

/*
 * Each journey card pairs a tinted panel with a saturated label of the same
 * hue. Both come from the same colour family so a theme change moves them
 * together instead of leaving readable text on an unreadable panel.
 */
.gr-journey--tenant {
	background: #f5f3ff;
	border-color: #ede9fe;
}
.gr-journey--tenant .gr-journey__icon { background: #ede9fe; color: var(--gr-violet); }
.gr-journey--tenant .gr-journey__title { color: var(--gr-violet-dark); }

.gr-journey--landlord {
	background: #ecfdf5;
	border-color: #d1fae5;
}
.gr-journey--landlord .gr-journey__icon { background: #d1fae5; color: var(--gr-teal); }
.gr-journey--landlord .gr-journey__title { color: #047857; }

.gr-journey--roommate {
	background: #fffbeb;
	border-color: #fef3c7;
}
.gr-journey--roommate .gr-journey__icon { background: #fef3c7; color: var(--gr-amber); }
.gr-journey--roommate .gr-journey__title { color: #b45309; }

/* --------------------------------------------------------------------------
   Community band
   -------------------------------------------------------------------------- */

.gr-community {
	background: linear-gradient(135deg, #faf5ff, #f8f4ff);
	border-radius: 1rem;
	padding: 2.5rem;
}

.gr-community__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

.gr-community__grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0.75rem;
	display: block;
	aspect-ratio: 4 / 3;
}

.gr-community__count {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.25rem;
	font-size: 0.875rem;
	opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Value row
   -------------------------------------------------------------------------- */

.gr-values {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1.75rem;
}

.gr-value__icon {
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.6rem;
}

.gr-value__title {
	font-size: 1rem;
	margin: 0 0 0.2rem;
}

.gr-value__text {
	font-size: 0.875rem;
	margin: 0;
	opacity: 0.78;
}

/* --------------------------------------------------------------------------
   Interior page header + prose
   -------------------------------------------------------------------------- */

/*
 * A compact version of the home hero for pages that are not the front page.
 * Same rainbow headline and the same tinted wash, but no media, no overlap and
 * no search panel to reserve room for -- so it can simply be a padded band.
 */
.gr-page-hero {
	position: relative;
	isolation: isolate;
	padding: clamp(2.5rem, 5vw, 4.5rem) 0;
	background:
		radial-gradient(circle at 78% 20%, rgba(156, 59, 211, 0.20), transparent 42%),
		radial-gradient(circle at 88% 88%, rgba(0, 128, 38, 0.14), transparent 46%),
		linear-gradient(135deg, #f7f1ff, #fdf6eb);
	color: var(--gr-ink);
	overflow: hidden;
}

.gr-page-hero__title {
	font-size: clamp(1.9rem, 4vw, 3rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	font-weight: 800;
	margin: 0 0 0.75rem;
	color: var(--gr-ink);
}

.gr-page-hero__lead {
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	line-height: 1.6;
	margin: 0;
	max-width: 44rem;
	opacity: 0.88;
}

/*
 * Body copy is capped at ~68 characters. Measured in ch rather than rem so the
 * limit follows the font size instead of drifting as the type scale changes.
 */
.gr-prose {
	max-width: 68ch;
}

.gr-prose p {
	line-height: 1.7;
	margin: 0 0 1rem;
}

.gr-prose p:last-child {
	margin-bottom: 0;
}

.gr-prose--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/*
 * Checklist. The marker is a pseudo-element rather than a list-style image so
 * it inherits colour, and the text indents off the marker via grid instead of
 * padding -- which keeps a wrapped second line aligned with the first rather
 * than sliding back under the tick.
 */
.gr-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.gr-checklist li {
	display: grid;
	grid-template-columns: 1.4rem minmax(0, 1fr);
	align-items: start;
	gap: 0.6rem;
	line-height: 1.55;
}

.gr-checklist li::before {
	content: "";
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 999px;
	background: #ede9fe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
}

/* The problems the site was built to solve are not achievements -- a row of
   ticks beside them would read as a feature list. */
.gr-checklist--plain li::before {
	background: #ede9fe;
}

.gr-section--wash {
	background: linear-gradient(135deg, #faf5ff, #f8f4ff);
}

/*
 * Overlap tuning. The search panel grows taller as its fields stack, so the
 * hero has to reserve more room for the media to still end halfway down it.
 * Values are half the panel's approximate height at each breakpoint.
 */
@media (max-width: 1199.98px) {
	:root {
		--gr-hero-overlap: 10rem;
	}
}

@media (max-width: 991.98px) {
	:root {
		--gr-hero-overlap: 13rem;
	}
}

@media (max-width: 767.98px) {
	:root {
		/*
		 * Below this the panel is four stacked fields and taller than the hero
		 * text above it. Overlapping any further would push the headline off
		 * screen, so the panel simply sits under the hero instead.
		 */
		--gr-hero-overlap: 0rem;
	}

	.gr-searchband {
		margin-top: 1.5rem;
	}

	.gr-hero {
		padding-bottom: 2.5rem;
		min-height: 0;
	}

	.gr-hero__bg {
		opacity: 0.18;
		width: 100%;
		border-radius: 0;
	}

	.gr-hero__title {
		max-width: 13ch;
	}

	.gr-journey {
		grid-template-columns: 3.5rem minmax(0, 1fr);
	}

	.gr-journey__icon {
		width: 3.25rem;
		height: 3.25rem;
	}
}

@media (max-width: 575.98px) {
	.gr-community {
		padding: 1.5rem;
	}

	/*
	 * Full-width calls to action below 576px. Two buttons side by side at this
	 * width leave each one narrow enough that a long label wraps to three
	 * lines; stacked and full width they stay one line and stay tappable.
	 */
	.gr-cta-row {
		flex-direction: column;
		align-items: stretch;
	}

	.gr-cta-row .gr-cta {
		width: 100%;
	}

	.gr-page-hero {
		padding: 2.25rem 0;
	}
}

/*
 * Honour reduced motion in CSS as well as JS. The script stops the slider
 * advancing; this makes sure no transition runs even if a class does change.
 */
/*
 * Touch targets.
 *
 * Measured at 375px: the popular-city chips render 31px tall. That clears the
 * WCAG 2.2 AA minimum of 24px, but it is well under the 44px that is reliable
 * under a thumb -- and these chips are one of the few things on the home page
 * a phone visitor is actually meant to tap.
 *
 * Scoped to coarse pointers rather than to a width, because the constraint is
 * the input device and not the viewport. A narrow desktop window has the same
 * 31px chips and does not need them any larger; a big tablet has a thumb and
 * does.
 */
@media (pointer: coarse) {
	.gr-search-panel__chips a {
		min-height: 2.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gr-hero__slide {
		transition: none;
	}
}