/*
 * OpenHoods theme stylesheet.
 *
 * The one place front-end CSS goes for this theme - see CLAUDE.md.
 * Linked from extensions/themes/openhoods/views/layouts/master.blade.php,
 * after every BeDigit-generated stylesheet, so rules here win on source
 * order without needing extra specificity or !important. Served as a
 * plain static file (published to public/themes/openhoods/css/ by
 * `php artisan theme:publish openhoods`), not built through Vite.
 */

/* Payment step: hide the "Upgrade" badge next to Standard Listing
   (plan id 6). Not a BeDigit-owned view we're rewriting - this is a
   real page-wide stylesheet rule, so it belongs here regardless of
   which blade renders the badge. See PATCHES.md. */
tr:has(#planId-6) .badge.bg-success {
	display: none;
}

/* Homepage hero: let the box grow with its content instead of clipping it.
   extensions/themes/default/assets/css/style.css (BeDigit's default theme,
   which ours inherits from since openhoods has no base style.css of its
   own) hardcodes `.hero-wrap { height: 450px; }`. Since v19's hero now
   carries a lot more content than that default theme ever anticipated
   (the "Sell My Car" CTA, free-listings counter, prize-draw line, 1/2/3
   steps, plus hoon-banner/demerit-links right after it), a fixed height
   clipped the box well short of its actual content - the overflow wasn't
   hidden, so it rendered *below* the blue background instead, landing on
   the page's plain white background where white "text-white" copy became
   invisible. `min-height` alone (set per-section via the admin's height
   field, in front-homepage.blade.php's generated CSS) can't fix this on
   its own: min-height only raises the floor over a *smaller* height, it
   doesn't override a *fixed* height into auto-growing. Overriding back to
   `height: auto` here - loaded after the default theme's stylesheet, so
   it wins on source order at equal specificity - is what actually lets
   the box grow to fit. See PATCHES.md. */
.hero-wrap {
	height: auto;
	/* On live, the hero is a fixed-height flexbox (align-items: center)
	   whose content is a little shorter than the box, leaving a ~9px gap
	   below the last row (the 1/2/3 steps) for free. Here the box is
	   content-driven (height: auto, see above) so that slack doesn't
	   exist - the steps row sits flush against the box's bottom edge
	   without this. See PATCHES.md. */
	padding-bottom: 10px;
}

/* Hero headline, mobile only: one step down from the default heading
   size. At exactly 375px-wide phones, "Open your hood. Open your
   history." was landing right on the edge of wrapping to a 3rd line
   (confirmed: intrinsic width of each sentence vs. the hero's actual
   content width at 375px leaves only fractional headroom before the
   greedy line-wrap adds a 3rd line) - this isn't reproducible on every
   375px-class render (browser/font-metric-dependent right at that
   margin), but a real phone hit it. Shrinking to 1.5rem here gives
   comfortable headroom for both sentences to each fit on their own
   line regardless of minor rendering differences. See PATCHES.md. */
@media (max-width: 767.98px) {
	.hero-wrap h1 {
		font-size: 1.5rem;
	}
}

/* Unified primary CTA button - brand orange, ported from live 18.2.0's
   public/dist/front/custom.css. Text is dark brown rather than white -
   white-on-orange fails WCAG AA (contrast ~2.3:1); this dark brown gives
   ~6.6:1. Used by the "Sell My Car" nav button (menu_items row, see
   PATCHES.md), the hero CTA, and the choose-a-city CTA. */
.btn-cta-primary {
	--bs-btn-color: #3D1F00;
	--bs-btn-bg: #F7941D;
	--bs-btn-border-color: #F7941D;
	--bs-btn-hover-color: #3D1F00;
	--bs-btn-hover-bg: #FFA83D;
	--bs-btn-hover-border-color: #FFA83D;
	--bs-btn-focus-shadow-rgb: 247, 148, 29;
	--bs-btn-active-color: #3D1F00;
	--bs-btn-active-bg: #E08415;
	--bs-btn-active-border-color: #E08415;
	--bs-btn-disabled-color: #3D1F00;
	--bs-btn-disabled-bg: #F7941D;
	--bs-btn-disabled-border-color: #F7941D;
	font-weight: 600;
}
.btn-cta-primary.btn-cta-primary,
.btn-cta-primary.btn-cta-primary:hover,
.btn-cta-primary.btn-cta-primary:focus,
.btn-cta-primary.btn-cta-primary:active,
.btn-cta-primary.btn-cta-primary:disabled {
	color: #3D1F00 !important;
}

/* "Why demerit points?" text-area section - blue card, ported from live
   18.2.0's custom_css setting. Targets the literal `hoon-section` class
   hardcoded in text-area.blade.php (theme) - see PATCHES.md. */
.hoon-section .card {
	background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
	border: none !important;
}
.hoon-section .card-body,
.hoon-section .card-title,
.hoon-section p,
.hoon-section em,
.hoon-section strong,
.hoon-section div {
	color: #fff !important;
}
.hoon-section .card-title {
	border-bottom-color: rgba(255, 255, 255, 0.3) !important;
}

/* "Check Your Demerit Points" state-links row (demerit-links.blade.php,
   openhoods:: namespace) - ported from live 18.2.0's
   resources/views/front/sections/home/demerit-links.blade.php, which
   carries this same CSS in an inline <style> tag; kept here instead per
   CLAUDE.md's "one place front-end CSS goes" rule. See PATCHES.md. */
.demerit-section {
	background: linear-gradient(180deg, #f4f6fb 0%, #e9ecf5 100%);
	border-bottom: 1px solid #d5d9e2;
	padding: 36px 0;
}
.demerit-heading {
	font-size: 19px;
	font-weight: 800;
	color: #111827;
	margin-bottom: 4px;
	letter-spacing: -.4px;
}
.demerit-heading i {
	background: linear-gradient(135deg, #2563eb, #1d4ed8);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 22px;
}
.demerit-sub {
	font-size: 13.5px;
	color: #6b7280;
	margin-bottom: 0;
}
.dp-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.dp {
	display: inline-flex;
	align-items: stretch;
	border-radius: 10px;
	text-decoration: none;
	font-weight: 600;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .06);
	transition: all .25s cubic-bezier(.4, 0, .2, 1);
	border: 1px solid rgba(0, 0, 0, .06);
	position: relative;
	min-width: 150px;
}
.dp:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .14), 0 8px 30px rgba(0, 0, 0, .08);
	text-decoration: none;
}
.dp:active {
	transform: translateY(-1px);
}
.dp .tag {
	padding: 9px 14px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 1px;
	color: #fff;
	display: flex;
	align-items: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.dp .label {
	padding: 9px 16px 9px 12px;
	font-weight: 600;
	font-size: 13.5px;
	display: flex;
	align-items: center;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.dp-nsw .tag { background: linear-gradient(150deg, #dc2626, #b91c1c); }
.dp-nsw { background: rgba(254, 226, 226, .7); color: #991b1b; }
.dp-nsw:hover { color: #991b1b; }
.dp-vic .tag { background: linear-gradient(150deg, #16a34a, #15803d); }
.dp-vic { background: rgba(220, 252, 231, .7); color: #166534; }
.dp-vic:hover { color: #166534; }
.dp-qld .tag { background: linear-gradient(150deg, #881337, #6b0f2a); }
.dp-qld { background: rgba(252, 231, 243, .65); color: #6b0f2a; }
.dp-qld:hover { color: #6b0f2a; }
.dp-sa .tag { background: linear-gradient(150deg, #1d4ed8, #1e40af); }
.dp-sa { background: rgba(219, 234, 254, .7); color: #1e3a8a; }
.dp-sa:hover { color: #1e3a8a; }
.dp-wa .tag { background: linear-gradient(150deg, #ca8a04, #a16207); }
.dp-wa { background: rgba(254, 249, 195, .6); color: #713f12; }
.dp-wa:hover { color: #713f12; }
.dp-nt .tag { background: linear-gradient(150deg, #ea580c, #c2410c); }
.dp-nt { background: rgba(255, 237, 213, .7); color: #9a3412; }
.dp-nt:hover { color: #9a3412; }
.dp-tas .tag { background: linear-gradient(150deg, #0d9488, #0f766e); }
.dp-tas { background: rgba(204, 251, 241, .65); color: #115e59; }
.dp-tas:hover { color: #115e59; }
.dp-act .tag { background: linear-gradient(150deg, #4338ca, #3730a3); }
.dp-act { background: rgba(224, 231, 255, .7); color: #312e81; }
.dp-act:hover { color: #312e81; }
.demerit-disclaimer {
	font-size: 11px;
	color: #9ca3af;
	margin: 20px 0 0;
	letter-spacing: .1px;
}
@media (max-width: 576px) {
	.dp { min-width: 140px; border-radius: 8px; }
	.dp .tag { padding: 7px 10px; font-size: 10.5px; }
	.dp .label { padding: 7px 12px 7px 8px; font-size: 12.5px; }
	.dp-row { gap: 8px; }
}

/* Hero subline checklist chips ("The maintenance: Logbook" / "The
   history: PPSR" / "The owner: Demerit points") - white pill chips inside
   the hero's blue background, one row on desktop, stacked on mobile via
   the flex-column/flex-md-row classes on the wrapper in
   search-form.blade.php. See PATCHES.md. */
.hero-checklist-chip {
	display: inline-block;
	background: #fff;
	color: #1E3A5F;
	font-weight: 500;
	font-size: 0.9rem;
	border-radius: 0.375rem;
	padding: 0.375rem 0.9rem;
	text-decoration: none;
	transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.hero-checklist-chip:hover,
.hero-checklist-chip:focus {
	background: #E9EEF5;
	color: #1E3A5F;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

/* Listing cards: fixed image aspect ratio with cover-crop, so a portrait
   photo doesn't grow the card taller than its grid neighbours. `.main-image`
   is the shared wrapper class across every card template (grid, list,
   account/alerts) - see PATCHES.md. */
.main-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Card photo wrapper (grid/list templates): anchors the ribbon to the
   photo itself, not the card - `overflow: hidden` clips the ribbon's
   rotated corners to this box instead of letting them spill into the
   next card in the row. See PATCHES.md.

   `isolation: isolate` added defensively - see PATCHES.md: re-verified
   this clips correctly in Chromium at genuine mobile widths (hit-tested,
   not just eyeballed), but some WebKit/Safari versions are known to mis-
   clip `overflow: hidden` around a `transform`-rotated absolutely-
   positioned child unless the clipping ancestor has its own stacking
   context - this forces one, at no visual cost, in case that's what a
   real device is hitting. */
.openhoods-photo-wrap {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* SOLD ribbon: diagonal corner banner over a listing's main photo, on
   cards (grid/list templates, inside `.openhoods-photo-wrap`) and on the
   listing page itself (the pictures-slider wrapper, with the larger
   `--lg` modifier below). Same base class both places for one shared
   definition - see PATCHES.md. */
.openhoods-sold-ribbon {
	position: absolute;
	top: 18px;
	left: -44px;
	width: 170px;
	padding: 6px 0;
	background: #dc3545;
	color: #fff;
	font-weight: 800;
	font-size: 1rem;
	text-align: center;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	transform: rotate(-45deg);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
	z-index: 5;
	pointer-events: none;
}

/* Grid cards run 2-per-row from the smallest viewport up to `md` (768px)
   - `row-cols-{{$smCols}}` in grid.blade.php has no responsive infix, so
   it's the baseline that applies at every width below the `md` override,
   not just "small phones". At that 2-column width each
   `.openhoods-photo-wrap` is only ~150px wide - smaller than the
   170px-wide desktop ribbon even before its -45deg rotation. Still
   clips correctly (re-verified - see PATCHES.md), but shrinks it here
   anyway so it reads as a ribbon instead of most of the photo. See
   PATCHES.md. */
@media (max-width: 767.98px) {
	.openhoods-sold-ribbon {
		top: 10px;
		left: -32px;
		width: 130px;
		padding: 4px 0;
		font-size: 0.75rem;
		letter-spacing: 1px;
	}
}

/* Larger variant for the listing page's own main photo - much bigger
   than a card thumbnail, so the same ribbon size reads as too thin
   there. See PATCHES.md. */
.openhoods-sold-ribbon--lg {
	top: 32px;
	left: -84px;
	width: 320px;
	padding: 11px 0;
	font-size: 1.6rem;
	letter-spacing: 3px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

/* Sold listing card photo dimmed so it reads as sold before a click -
   see PATCHES.md. */
.openhoods-sold-dim {
	opacity: 0.6;
}

/* Compact card template has no photo to ribbon across - a small badge
   next to the title instead, same red as the ribbon. See PATCHES.md. */
.openhoods-sold-badge {
	display: inline-block;
	background: #dc3545;
	color: #fff;
	font-weight: 800;
	font-size: 0.7rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: 0.25rem;
	padding: 0.15rem 0.5rem;
	vertical-align: middle;
}

/* Hero "500 FREE ads" line: pale yellow accent on the word FREE - see
   PATCHES.md. */
.hero-free-accent {
	color: #FDE68A;
}

/* Description editor (TinyMCE 7, front context): hide the status bar
   (element path + word count) on the create/edit listing form - see
   PATCHES.md. TinyMCE's own "tox" skin, not something the site sets a
   custom class for, so this targets its stock status-bar class directly. */
.tox-statusbar {
	display: none !important;
}

/* Features (and any other checkbox_multiple custom field) on the
   create/edit listing form: 3 columns desktop (lg+), 2 tablet (md), 1
   mobile (below md). The `helpers.forms.fields.checklist` component (a
   BeDigit core file) only accepts one fixed `col-md-{n}` value with no
   per-breakpoint variation, so this overrides its emitted class directly
   via the `openhoods-checkbox-grid` wrapper class added in
   extensions/themes/openhoods/views/listing/createOrEdit/partials/
   fields.blade.php - see PATCHES.md. */
.openhoods-checkbox-grid .col-md-12 {
	width: 100%;
}
@media (min-width: 768px) {
	.openhoods-checkbox-grid .col-md-12 {
		width: 50%;
	}
}
@media (min-width: 992px) {
	.openhoods-checkbox-grid .col-md-12 {
		width: 33.3333%;
	}
}

/* ==========================================================================
   2026-09-22 - see extensions/openhoods/PATCHES.md
   ========================================================================== */

/* --- SOLD marker on the seller's own "My listings" rows -------------------
   Buyers already see a SOLD ribbon on the listing page's main photo
   (.openhoods-sold-ribbon--lg, listing/show/partials/pictures-slider.blade.php).
   The seller's own account/partials/listings-table.blade.php rows had no
   marker at all. `--sm` is the same ribbon scaled for the row thumbnail;
   `.openhoods-sold-thumb` is the positioned, clipped wrapper it needs. */
.openhoods-sold-thumb {
	position: relative;
	display: inline-block;
	overflow: hidden;
	max-width: 100%;
}

.openhoods-sold-ribbon--sm {
	top: 8px;
	left: -30px;
	width: 110px;
	padding: 3px 0;
	font-size: 0.65rem;
	letter-spacing: 1px;
}

/* The text badge next to the row title reuses the EXISTING
   `.openhoods-sold-badge` defined above (the one the compact search-card
   template already shows to buyers) - deliberately not redefined here, so
   the seller's badge and the buyer's badge can never drift apart. */

/* --- Auth pages: inline "please log in" notice ----------------------------
   Replaces the floating red PNotify toast that used to render over the
   hero logo. Rendered in normal document flow at the top of the form
   column (auth/layouts/master.blade.php), so it can never overlap the
   logo at any width. Neutral light-blue, not an error colour. */
.openhoods-auth-notice {
	background-color: #eaf0fe;
	border: 1px solid #c3d2fa;
	color: #1e3a5f;
	border-radius: 0.5rem;
	padding: 0.75rem 1rem;
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
	line-height: 1.5;
}

.openhoods-auth-notice a {
	color: #4263eb;
	text-decoration: underline;
}

/* --- Auth pages: logo size cap -------------------------------------------
   auth/layouts/master.blade.php emits an inline `max-width`/`max-height`
   on the hero logo (clamped 150-250px), which is far too large on a
   phone. Inline styles beat a stylesheet, so `!important` is required.
   Scoped to the auth hero only: the site header logo lives in
   `layouts.partials.header` OUTSIDE `#main-wrapper.auth-login-register`
   (it also carries a `.logo` class, which is why this scope matters) and
   is deliberately left alone. */
#main-wrapper.auth-login-register .hero-content .logo {
	text-align: center;
}

#main-wrapper.auth-login-register .hero-content .logo a {
	display: inline-block !important;
	max-width: 100%;
}

#main-wrapper.auth-login-register .hero-content .logo img {
	max-width: 280px !important;
	max-height: none !important;
	width: auto !important;
	height: auto !important;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 575.98px) {
	#main-wrapper.auth-login-register .hero-content .logo img {
		max-width: 220px !important;
	}
}

/* ==========================================================================
   2026-09-22 (follow-up to f0e0f86) - site header + footer on mobile
   See extensions/openhoods/PATCHES.md.

   Root cause of everything in this block: the auth layout
   (auth/layouts/master.blade.php) renders the site header and footer
   partials, but loads only `build/assets/auth-*.css`. It does NOT load
   `build/assets/theme-*.css`, `cache/css/front-style.css` or
   `dist/front/custom.css` - the three stylesheets every other page gets and
   that the header/footer markup depends on. Confirmed by diffing the
   stylesheet <link> lists of the rendered homepage vs the rendered login
   page: those three are homepage-only.

   Consequence, measured at 412px on the rendered login page:
     - BOTH logo variants render (the dark/light swap rules live in
       theme-*.css), so `.navbar-brand` is 976px wide;
     - `.main-logo { height: 40px }` (front-style.css) is absent, so each
       image falls back to its intrinsic 485x82;
     - the toggler is pushed onto a second row (navbar 149px tall instead
       of 75px);
     - the footer column headings compute to rgb(0,0,0) on the rgb(0,0,0)
       footer, i.e. invisible, leaving ~92px of apparently-empty black
       above the link lists.

   Fixed here rather than by loading the missing bundles on the auth layout:
   pulling in the full theme bundle there would restyle the login/register
   forms themselves (which is exactly what the separate auth-*.css bundle
   exists to style). These rules re-state only the header/footer behaviour
   the shared partials need, and are no-ops on pages that already load
   theme-*.css + front-style.css.
   ========================================================================== */

/* --- (a) One logo variant at a time --------------------------------------
   Mirrors the dark/light swap in build/assets/theme-*.css verbatim, so auth
   pages stop rendering the dark AND light logo side by side. */
html:not([data-bs-theme="dark"]) header .navbar .logo img.light-logo,
header:not([data-bs-theme="dark"]) .navbar .logo img.light-logo {
	display: none !important;
}

html:not([data-bs-theme="dark"]) header .navbar .logo img.dark-logo,
header:not([data-bs-theme="dark"]) .navbar .logo img.dark-logo {
	display: block !important;
}

html[data-bs-theme="dark"] header .navbar .logo img.light-logo,
header[data-bs-theme="dark"] .navbar .logo img.light-logo {
	display: block !important;
}

html[data-bs-theme="dark"] header .navbar .logo img.dark-logo,
header[data-bs-theme="dark"] .navbar .logo img.dark-logo {
	display: none !important;
}

/* --- (b) Header logo size -------------------------------------------------
   `!important` is unavoidable on two counts: header.blade.php emits an
   inline `max-width:485px; max-height:90px` on the <img> (an inline style
   beats a stylesheet), and front-style.css declares
   `.main-logo { max-height: 90px !important }`.

   The 40px baseline is not a change for normal pages: front-style.css
   already sets `.main-logo { height: 40px }` there, so the rendered height
   stays 40px and desktop is untouched. It only takes effect on the auth
   pages, which have no front-style.css and were therefore rendering the
   logo at its intrinsic 485x82. */
header .navbar .navbar-brand img.main-logo {
	max-height: 40px !important;
	height: auto !important;
	width: auto !important;
}

/* Below the `xl` navbar-expand breakpoint the toggler is visible and has to
   share the row with the logo. */
@media (max-width: 991.98px) {
	header .navbar .navbar-brand img.main-logo {
		max-height: 44px !important;
	}
}

@media (max-width: 399.98px) {
	header .navbar .navbar-brand img.main-logo {
		max-height: 38px !important;
	}
}

/* --- (c) Navbar toggler ---------------------------------------------------
   Vertically centred against the logo and pinned right (the navbar
   container is already `display:flex; justify-content:space-between;
   align-items:center`, so this mainly guards against the `float-end`
   class on the button, which is inert in a flex row). The stock border is
   `rgba(0,0,0,.15)`, which reads as a heavy dark box on a phone - swapped
   for a single hairline in the theme's own line colour, with the focus
   glow dropped. Deliberately NOT setting `flex-wrap: nowrap` on the
   container: the collapsing menu (#navbarNav) is a third flex item that
   must still wrap onto its own line when opened. */
header .navbar .navbar-toggler {
	align-self: center;
	margin-left: auto;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--bs-border-color, #dee2e6) !important;
}

header .navbar .navbar-toggler:focus,
header .navbar .navbar-toggler:focus-visible {
	box-shadow: none;
	outline: none;
}

/* --- (d) Footer column headings ------------------------------------------
   On the auth pages these computed to rgb(0,0,0) on the rgb(0,0,0) footer -
   black on black - because the `h4 { color: var(--bs-heading-color) }`
   resolution that theme-*.css supplies is missing there. `inherit` takes
   the colour from the footer wrapper's own `text-light text-opacity-75`,
   which is exactly what the links already use, so headings and links match
   on both the dark and the light footer variant. */
footer .container-fluid h4 {
	color: inherit;
}

/* ==========================================================================
   2026-09-23 - Auth pages (login + register) on phones: hero was eating the
   whole first screen. See extensions/openhoods/PATCHES.md.

   auth/layouts/master.blade.php builds the split-screen auth layout as two
   `.col-md-6` columns. Below the `md` breakpoint those columns stack, so the
   blue hero panel is no longer *beside* the form, it's *above* it - and the
   hero still carries Bootstrap's `min-vh-100` utility
   (`min-height: 100vh !important`) plus a `my-auto` row that vertically
   centres the cover text by absorbing all the leftover space as margin.
   Net effect on a phone: the hero is exactly one full viewport tall, so the
   email field and the Log In button start below the fold and a user sees a
   photo and no way to log in until they scroll.

   Measured before this block (real render, iframe at the phone's exact CSS
   viewport): at 375x667 the hero was 667px tall, the email field ended at
   y=926 and the Log In button at y=1174; at 412x915 the hero was 915px, the
   email field ended at y=1149 and the button at y=1397.

   Fix is height + spacing only, all of it inside this one media query, so
   desktop (>= 768px, where the two columns sit side by side and the hero
   SHOULD be full height) is not touched at all:
     - drop the 100vh floor and the `my-auto` centring that stretched with it
     - cap the panel with `max(45vh, 260px)` - a real ceiling that still
       leaves ~80px of headroom over the ~175-213px the logo + cover text
       actually occupy, and the 260px floor keeps that true on a short
       landscape viewport where 45vh alone would be too small to hold them
     - tighten the logo / heading / paragraph margins and the form column's
       `py-5`, which is the "reduce the padding" half

   After: the hero is 174-213px on every phone size tested and the Log In
   button is fully above the fold - 375x667, 375x812, 390x844, 412x915 and
   360x640 all verified. On /auth/register the hero shrinks identically and
   the email field comes above the fold, but the Sign Up button stays just
   below it: that form is simply longer than a phone viewport (name, email,
   password, confirm, terms), which is a form-length matter, not a hero one. */
@media (max-width: 767.98px) {
	#main-wrapper.auth-login-register .hero-content {
		/* Beats Bootstrap's `.min-vh-100 { min-height: 100vh !important }`. */
		min-height: 0 !important;
		max-height: max(45vh, 260px);
		overflow: hidden;
		justify-content: center;
	}

	/* `.my-auto` on the cover-text row is what pushed the text apart to fill
	   the 100vh box - with the floor gone it would otherwise still stretch. */
	#main-wrapper.auth-login-register .hero-content > .row.my-auto {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	#main-wrapper.auth-login-register .hero-content .logo {
		/* Blade sets `mt-5 mb-5` = 48px top and bottom. */
		margin-top: 0.5rem !important;
		margin-bottom: 0.5rem !important;
	}

	/* Tighter than the 220px cap the <576px rule above sets, and it applies
	   across the whole phone range rather than only the smallest widths. */
	#main-wrapper.auth-login-register .hero-content .logo img {
		max-width: 180px !important;
	}

	#main-wrapper.auth-login-register .hero-content h1 {
		margin-bottom: 0.35rem !important;
		font-size: 1.3rem;
	}

	#main-wrapper.auth-login-register .hero-content p {
		margin-bottom: 0.5rem !important;
		font-size: 0.875rem;
	}

	/* `.hero-wrap`'s 10px bottom padding exists for the homepage hero only. */
	#main-wrapper.auth-login-register .hero-wrap {
		padding-bottom: 0 !important;
	}

	/* The form column's own `py-5` (48px top and bottom). */
	#main-wrapper.auth-login-register > .container-fluid > .row > .col-md-6:last-child > .container {
		padding-top: 0.75rem !important;
		padding-bottom: 1.5rem !important;
	}
}