/*
Theme Name: ArtSalon
Theme URI: https://artsalonbudapest.hu/
Author: ArtSalon Budapest
Description: Visual layer for artsalonbudapest.hu. Child of Twenty Twenty-Five: keeps the parent's block styles and accessibility work, replaces the design system. "Chrome & Bone" - ink, bone and brass, photography-led, booking-first.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: artsalon
Tags: block-patterns, full-site-editing, one-column
*/

/* ==========================================================================
   Tokens that theme.json cannot express
   ========================================================================== */

:root {
	--asb-r-sm: 2px;
	--asb-r-md: 3px;
	--asb-r-lg: 8px;

	--asb-t-fast: 160ms cubic-bezier(0.2, 0, 0.2, 1);
	--asb-t-slow: 320ms cubic-bezier(0.2, 0, 0.2, 1);

	--asb-shadow-1: 0 1px 2px rgb(14 14 14 / 6%), 0 2px 8px rgb(14 14 14 / 4%);
	--asb-shadow-2: 0 2px 4px rgb(14 14 14 / 8%), 0 12px 32px rgb(14 14 14 / 10%);

	--asb-header-h: 68px;

	/* Semantic aliases so components read cleanly. */
	--asb-ink: var(--wp--preset--color--contrast);
	--asb-bone: var(--wp--preset--color--base);
	--asb-brass: var(--wp--preset--color--accent-1);
	--asb-paper: var(--wp--preset--color--accent-2);
	--asb-charcoal: var(--wp--preset--color--accent-3);
	--asb-muted: var(--wp--preset--color--accent-4);
	--asb-sand: var(--wp--preset--color--accent-5);
	--asb-line: var(--wp--preset--color--accent-6);
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Anchor targets must clear the sticky header. */
:where(main) [id] {
	scroll-margin-top: calc(var(--asb-header-h) + 16px);
}

/* One visible focus treatment everywhere. Never removed. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--asb-ink);
	outline-offset: 3px;
	border-radius: var(--asb-r-sm);
}

:is(.asb-dark,.is-style-asb-dark) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.asb-header :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--asb-brass);
}

/* Body links: underline that thickens rather than appears, so nothing shifts. */
.wp-block-post-content a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: var(--asb-brass);
	transition: text-decoration-thickness var(--asb-t-fast), color var(--asb-t-fast);
}

.wp-block-post-content a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 2px;
}

/* ==========================================================================
   Dark scope
   Brass is a surface on light and a colour only on dark - 2.6:1 as text on bone.
   ========================================================================== */

:is(.asb-dark,.is-style-asb-dark) {
	background-color: var(--asb-ink);
	color: color-mix(in srgb, var(--asb-bone) 82%, transparent);
}

:is(.asb-dark,.is-style-asb-dark) :is(h1, h2, h3, h4, h5),
:is(.asb-dark,.is-style-asb-dark) .wp-block-heading {
	color: var(--asb-bone);
}

:is(.asb-dark,.is-style-asb-dark) h6,
:is(.asb-dark,.is-style-asb-dark) .asb-eyebrow {
	color: var(--asb-brass);
}

:is(.asb-dark,.is-style-asb-dark) hr,
:is(.asb-dark,.is-style-asb-dark) .wp-block-separator {
	border-color: rgb(242 239 234 / 16%);
	color: rgb(242 239 234 / 16%);
}

:is(.asb-dark,.is-style-asb-dark) a:where(:not(.wp-element-button)) {
	color: var(--asb-bone);
	text-decoration-color: var(--asb-brass);
}

.is-style-asb-sand {
	background-color: var(--asb-sand);
}

/* ==========================================================================
   Section chrome
   ========================================================================== */

.asb-eyebrow {
	font-family: var(--wp--preset--font-family--asb-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--asb-muted);
	margin-bottom: 0.75rem;
}

.asb-rule {
	border: 0;
	border-top: 1px solid var(--asb-line);
	margin-block: var(--wp--preset--spacing--50);
}

/* ==========================================================================
   Header
   ========================================================================== */

.asb-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--asb-ink);
	color: var(--asb-bone);
	border-bottom: 1px solid rgb(242 239 234 / 10%);
}

/* Fixed, not min-height: TranslatePress renders an inert spacer plus an
   absolutely positioned overlay, and the spacer alone is 74px, which stretched
   the bar to 118px and left every #anchor scrolling 50px short. The spacer is
   invisible, so letting it overflow a fixed 68px bar costs nothing. */
.asb-header .wp-block-group.asb-header__inner {
	height: var(--asb-header-h);
	min-height: var(--asb-header-h);
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

/* TranslatePress themes its switcher from custom properties on the wrapper,
   still carrying the pre-overhaul palette. */
.asb-header .trp-shortcode-switcher__wrapper {
	--bg: transparent;
	--bg-hover: transparent;
	--text: #F2EFEA;
	--text-hover: #C08B3E;
	--border: 0;
	--border-color: transparent;
	display: flex;
	align-items: center;
}

.asb-header .wp-block-site-logo img {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: block;
}

.asb-header .wp-block-navigation {
	color: var(--asb-bone);
}

.asb-header .wp-block-navigation-item__content {
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
	text-decoration: none;
	transition: border-color var(--asb-t-fast), color var(--asb-t-fast);
}

.asb-header .wp-block-navigation-item__content:hover,
.asb-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--asb-brass);
	text-decoration: none;
}

/* Submenus */
.asb-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--asb-charcoal);
	border: 1px solid rgb(242 239 234 / 12%);
	border-radius: var(--asb-r-md);
	padding-block: 0.4rem;
	box-shadow: var(--asb-shadow-2);
	min-width: 15rem;
}

.asb-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-bottom: 0;
	padding: 0.6rem 1rem;
	width: 100%;
}

.asb-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: rgb(242 239 234 / 8%);
	color: var(--asb-brass);
}

/* Utility cluster on the right */
.asb-header__actions {
	gap: var(--wp--preset--spacing--30) !important;
}

.asb-header__actions .wp-block-button__link {
	padding: 0.7rem 1.15rem;
	font-size: 0.8125rem;
}

.asb-header__link {
	font-family: var(--wp--preset--font-family--asb-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: color-mix(in srgb, var(--asb-bone) 78%, transparent);
	white-space: nowrap;
	transition: color var(--asb-t-fast);
}

.asb-header__link:hover {
	color: var(--asb-bone);
	text-decoration: none;
}

/* Language switcher, ported out of the retired Global Styles custom CSS. */
.asb-header .trp-language-switcher,
.asb-header .trp-language-switcher * {
	font-family: var(--wp--preset--font-family--asb-display);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.language-switcher {
	text-decoration: none;
	border-bottom: none;
}

.language-switcher:hover {
	border-bottom: none;
	text-decoration: underline;
}

/* TranslatePress ships its own switcher styling, which paints a light panel.
   Repaint it for the ink bar and shrink it to a utility control. */
.asb-header .trp-language-switcher,
.asb-header .trp-language-switcher .trp-current-language-item__wrapper,
.asb-header .trp-switcher-dropdown-list {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.asb-header .trp-language-switcher .trp-language-item {
	background: transparent;
	color: color-mix(in srgb, var(--asb-bone) 78%, transparent);
	padding: 0.35rem 0.5rem;
	text-decoration: none;
	white-space: nowrap;
}

.asb-header .trp-language-switcher .trp-language-item:hover {
	color: var(--asb-brass);
	background: transparent;
}

/* TranslatePress collapses the dropdown to zero height. Painting it (or adding
   padding) in the closed state leaks a visible strip under the header, so the
   panel is only styled once the switcher is actually open. */
.asb-header .trp-language-switcher:hover .trp-switcher-dropdown-list,
.asb-header .trp-language-switcher:focus-within .trp-switcher-dropdown-list {
	background-color: var(--asb-charcoal);
	border: 1px solid rgb(242 239 234 / 12%);
	border-radius: var(--asb-r-md);
	box-shadow: var(--asb-shadow-2);
}

.asb-header .trp-flag-image {
	width: 15px;
	height: auto;
	margin-right: 0.4rem;
	vertical-align: -2px;
}

/* Mobile overlay uses core's navigation block JS: focus trap and Escape are
   handled there, so nothing custom is layered on top of it. */
.asb-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--asb-ink);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.asb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.25rem;
	border-bottom: 0;
}

.asb-header .wp-block-navigation__responsive-container-open,
.asb-header .wp-block-navigation__responsive-container-close {
	color: var(--asb-bone);
}

@media (max-width: 899px) {
	.asb-header__desktop-only {
		display: none !important;
	}

	/* Logo | CTA | hamburger. Core renders the toggle inside the navigation
	   block, which sits before the actions in the DOM, so reorder visually. */
	.asb-header .wp-block-navigation { order: 3; }
	.asb-header__actions { order: 2; }

	.asb-header .wp-block-site-logo img { width: 40px; height: 40px; }
	.asb-header__actions .wp-block-button__link { padding: 0.6rem 0.9rem; font-size: 0.75rem; }
}

@media (min-width: 900px) {
	.asb-header__mobile-only {
		display: none !important;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */

.asb-hero {
	position: relative;
	isolation: isolate;
	min-height: min(78svh, 660px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background-color: var(--asb-ink);
}

/* Core's constrained layout clamps every direct child to contentSize and
   centres it (`.is-layout-constrained > :where(:not(.alignfull)...)`, 0-2-0).
   The media layer has to span the whole band, and the copy should run from the
   wide container's left edge rather than being centred at 720px. This file
   loads after the layout styles, so a matching 0-2-0 selector wins. */
.asb-hero > .asb-hero__media {
	max-width: none;
	margin-inline: 0;
}

/* Core's layout container sets `margin-left/right: auto !important` on every
   constrained child, which centres anything that has a max-width. The hero copy
   is a left-anchored column, so the margins have to be answered in kind; the
   measures below stay. */
.asb-hero .asb-hero__inner > * {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

.asb-hero__media,
.asb-hero__media img,
.asb-hero__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.asb-hero__media video {
	opacity: 0;
	transition: opacity 700ms ease-out;
}

.asb-hero__media video.is-ready {
	opacity: 1;
}

/* Scrim: strongest where the text sits, so contrast holds on any frame. */
.asb-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgb(14 14 14 / 88%) 0%, rgb(14 14 14 / 62%) 38%, rgb(14 14 14 / 22%) 70%, rgb(14 14 14 / 45%) 100%);
}

.asb-hero__inner {
	position: relative;
	width: 100%;
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.asb-hero h1 {
	color: var(--asb-bone);
	text-wrap: balance;
	max-width: 20ch;
}

.asb-hero__sub {
	color: color-mix(in srgb, var(--asb-bone) 88%, transparent);
	max-width: 46ch;
}

.asb-hero .asb-eyebrow {
	color: var(--asb-brass);
	text-shadow: 0 1px 3px rgb(14 14 14 / 55%);
}

/* The scrim is vertical, but the copy sits left: darken that side too so the
   text holds contrast over a bright frame. */
.asb-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to right, rgb(14 14 14 / 82%) 0%, rgb(14 14 14 / 55%) 42%, rgb(14 14 14 / 10%) 78%);
}

/* Trust row */
.asb-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	color: color-mix(in srgb, var(--asb-bone) 78%, transparent);
}

.asb-facts li {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.asb-facts a {
	color: inherit;
	text-decoration-color: var(--asb-brass);
}

.asb-facts svg {
	flex: none;
	width: 16px;
	height: 16px;
	stroke: var(--asb-brass);
	fill: none;
	stroke-width: 1.7;
}

/* Outline buttons inherit the button element colour, which is ink -- invisible
   on the hero and on any dark band. */
.asb-hero .is-style-outline > .wp-block-button__link,
.is-style-asb-dark .is-style-outline > .wp-block-button__link,
.asb-dark .is-style-outline > .wp-block-button__link {
	color: var(--asb-bone);
	border-color: color-mix(in srgb, var(--asb-bone) 50%, transparent);
	background-color: transparent;
}

.asb-hero .is-style-outline > .wp-block-button__link:hover,
.is-style-asb-dark .is-style-outline > .wp-block-button__link:hover,
.asb-dark .is-style-outline > .wp-block-button__link:hover {
	color: var(--asb-bone);
	border-color: var(--asb-brass);
	background-color: rgb(192 139 62 / 16%);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.asb-card {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	background-color: var(--asb-paper);
	border: 1px solid var(--asb-line);
	border-radius: var(--asb-r-md);
	padding: var(--wp--preset--spacing--40);
	text-decoration: none;
	color: inherit;
	transition: transform var(--asb-t-fast), box-shadow var(--asb-t-fast), border-color var(--asb-t-fast);
}

a.asb-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--asb-shadow-2);
	border-color: color-mix(in srgb, var(--asb-brass) 55%, transparent);
	text-decoration: none;
}

.asb-card__title {
	font-family: var(--wp--preset--font-family--asb-display);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
}

.asb-card__meta {
	font-size: 0.9375rem;
	color: var(--asb-muted);
	margin: 0;
}

.asb-card__price {
	font-family: var(--wp--preset--font-family--asb-display);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	margin: 0.35rem 0 0;
}

/* Media tile: an image card that degrades to a typographic panel when the
   photograph does not exist yet. */
.asb-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--asb-r-md);
	background-color: var(--asb-charcoal);
	aspect-ratio: 3 / 4;
	text-decoration: none;
}

.asb-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--asb-t-slow);
}

a.asb-tile:hover img {
	transform: scale(1.03);
}

.asb-tile__label {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.5rem 1rem 1rem;
	background: linear-gradient(to top, rgb(14 14 14 / 85%), transparent);
	color: var(--asb-bone);
	font-family: var(--wp--preset--font-family--asb-display);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.asb-tile__label span {
	display: block;
	font-family: var(--wp--preset--font-family--asb-body);
	font-weight: 400;
	font-size: 0.875rem;
	color: color-mix(in srgb, var(--asb-bone) 72%, transparent);
	letter-spacing: 0;
}

/* Grid helper: auto-fit so a missing item never leaves a hole. */
.asb-grid {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.asb-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.asb-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

/* ==========================================================================
   Price table
   ========================================================================== */

.asb-prices {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.asb-prices caption {
	text-align: left;
	font-family: var(--wp--preset--font-family--asb-display);
	font-weight: 700;
	font-size: 1.125rem;
	padding-bottom: 0.6rem;
}

.asb-prices th {
	text-align: left;
	font-family: var(--wp--preset--font-family--asb-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--asb-muted);
	padding: 0 0 0.6rem;
	border-bottom: 1px solid var(--asb-line);
}

.asb-prices td {
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--asb-line);
	vertical-align: baseline;
}

.asb-prices tr:last-child td {
	border-bottom: 0;
}

.asb-prices .asb-prices__name {
	font-weight: 600;
}

.asb-prices .asb-prices__amount,
.asb-prices .asb-prices__dur {
	text-align: right;
	white-space: nowrap;
}

.asb-prices .asb-prices__dur {
	color: var(--asb-muted);
	font-size: 0.9375rem;
}

@media (max-width: 599px) {
	.asb-prices .asb-prices__dur { display: none; }
	.asb-prices th.asb-prices__dur { display: none; }
}

/* ==========================================================================
   Sections

   Every section body is an `alignwide` constrained group, so core clamps each
   child to contentSize and centres it with `margin: auto !important`. Copy
   should keep that measure but start at the wide container's left edge, and
   the grids should span the container outright.
   ========================================================================== */

.asb-section > * {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

.asb-section > .asb-grid,
.asb-section > .asb-gallery,
.asb-section > .asb-split,
.asb-section > .asb-barber,
.asb-section > .asb-reel,
.asb-section > .asb-shots {
	max-width: none !important;
	width: 100%;
}

/* ==========================================================================
   Split section: copy beside a photo collage
   ========================================================================== */

.asb-split {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 900px) {
	.asb-split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--wp--preset--spacing--60);
	}
}

.asb-split__text > :first-child { margin-top: 0; }
.asb-split__text > :last-child { margin-bottom: 0; }

.asb-split__text h2 {
	font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
	margin: 0 0 0.75rem;
}

.asb-nap {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.7rem 1.25rem;
	margin: 1.5rem 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--asb-line);
}

.asb-nap dt {
	font-family: var(--wp--preset--font-family--asb-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--asb-muted);
	padding-top: 0.15rem;
}

.asb-nap dd { margin: 0; }

/* Collage: one tall lead photograph, two supporting ones beside it. Each cell
   has a fixed aspect ratio so the grid holds its shape before the lazy images
   arrive - no layout shift, and no hole if one is ever removed. */
.asb-collage {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: var(--wp--preset--spacing--30);
}

.asb-collage figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--asb-r-md);
	background-color: var(--asb-sand);
	aspect-ratio: 4 / 3;
}

.asb-collage__lead {
	grid-row: span 2;
	aspect-ratio: 3 / 4 !important;
}

.asb-collage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   Gallery
   ========================================================================== */

.asb-gallery {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.asb-gallery figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--asb-r-md);
	background-color: var(--asb-sand);
	aspect-ratio: 3 / 4;
}

.asb-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--asb-t-slow);
}

.asb-gallery figure:hover img { transform: scale(1.03); }

/* ==========================================================================
   Barber page
   A barber page is that barber's booking landing page: who they are, what
   their work looks like, what it costs, and the form pinned to them.
   ========================================================================== */

/* Name, introduction and booking call beside the portrait. On a phone the
   portrait leads as a head-and-shoulders band, so the first screen is a face
   and a name rather than two paragraphs of copy. */
.asb-barber {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

/* Two buttons side by side are wider than a phone; let them stack. */
.asb-barber .wp-block-buttons { flex-wrap: wrap; }

.asb-barber__photo {
	order: -1;
	margin: 0;
	overflow: hidden;
	border-radius: var(--asb-r-md);
	background-color: var(--asb-sand);
	aspect-ratio: 4 / 3;
}

.asb-barber__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 58%;
	display: block;
}

.asb-barber__text > :first-child { margin-top: 0; }
.asb-barber__text > :last-child { margin-bottom: 0; }

.asb-barber__text h1 {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.05;
	margin: 0 0 1.25rem;
	text-wrap: balance;
}

@media (min-width: 900px) {
	.asb-barber {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		gap: var(--wp--preset--spacing--60);
	}

	.asb-barber__photo {
		order: 0;
		aspect-ratio: 2 / 3;
	}

	.asb-barber__photo img { object-position: 50% 50%; }
}

/* Video reel. A swipeable strip on a phone, with the next clip peeking in so
   the strip reads as scrollable; three fixed columns on desktop, capped so a
   9:16 tile never grows taller than the viewport. */
.asb-reel {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(64vw, 300px);
	gap: var(--wp--preset--spacing--30);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: 0.75rem;
	margin-bottom: var(--wp--preset--spacing--50);
}

@media (min-width: 900px) {
	.asb-reel {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 300px));
		overflow: visible;
		padding-bottom: 0;
	}
}

.asb-reel figure,
.asb-shots figure {
	margin: 0;
	scroll-snap-align: start;
}

.asb-reel__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--asb-r-md);
	background-color: var(--asb-charcoal);
	aspect-ratio: 9 / 16;
}

.asb-reel video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Pause/play for a loop that starts on its own (WCAG 2.2.2). aria-pressed
   "true" means paused, so the icon shows what a press will do next. */
.asb-reel__toggle {
	position: absolute;
	right: 0.6rem;
	bottom: 0.6rem;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgb(242 239 234 / 45%);
	border-radius: 50%;
	background-color: rgb(14 14 14 / 60%);
	color: var(--asb-bone);
	cursor: pointer;
}

.asb-reel__toggle::before {
	content: "";
	box-sizing: border-box;
	width: 12px;
	height: 14px;
	border-left: 4px solid currentColor;
	border-right: 4px solid currentColor;
}

.asb-reel__toggle[hidden] { display: none; }

.asb-reel__toggle[aria-pressed="true"]::before {
	width: 0;
	height: 0;
	margin-left: 3px;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent currentColor;
}

/* Captioned photographs. Two up on a phone rather than auto-fit's one, so four
   shots cost two rows of scrolling instead of four. */
.asb-shots {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
	.asb-shots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.asb-shots__media {
	overflow: hidden;
	border-radius: var(--asb-r-md);
	background-color: var(--asb-sand);
	aspect-ratio: 3 / 4;
}

.asb-shots img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Muted text is 4.68:1 on bone but only 4.13:1 on sand, so captioned media
   belongs on the bone background. */
.asb-reel figcaption,
.asb-shots figcaption {
	margin-top: 0.55rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	color: var(--asb-muted);
}

/* Question-and-answer pairs. */
.asb-faq h3 {
	font-size: var(--wp--preset--font-size--large);
	margin: var(--wp--preset--spacing--50) 0 0.5rem;
}

.asb-faq h3:first-of-type { margin-top: 0; }
.asb-faq p { margin-top: 0; }

/* ==========================================================================
   Interior page head + breadcrumbs
   ========================================================================== */

/* Breadcrumb-only bar. The template deliberately emits no post-title: every
   interior page already carries its own keyword-bearing H1 in post_content
   (Wave 6), and rendering the title as well produced two H1s per page. */
.asb-pagehead {
	line-height: 1;
}

.asb-pagehead > * { margin-block: 0; }

/* The content's own H1 leads the page, so give it hero-like weight. */
.wp-block-post-content > h1:first-child,
.wp-block-post-content > .wp-block-heading:first-child:is(h1) {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--40);
	text-wrap: balance;
}

.asb-pagehead #breadcrumbs,
.asb-pagehead .yoast-breadcrumbs {
	font-family: var(--wp--preset--font-family--asb-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--asb-bone) 58%, transparent);
	margin: 0 0 0.9rem;
}

.asb-pagehead #breadcrumbs a,
.asb-pagehead .yoast-breadcrumbs a {
	color: var(--asb-brass);
	text-decoration: none;
}

.asb-pagehead #breadcrumbs a:hover,
.asb-pagehead .yoast-breadcrumbs a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}


/* ==========================================================================
   Mobile booking bar
   ========================================================================== */

.asb-bookbar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 90;
	display: none;
	gap: 1px;
	background-color: var(--asb-line);
	border-top: 1px solid rgb(14 14 14 / 12%);
	padding-bottom: env(safe-area-inset-bottom);
}

.asb-bookbar a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.95rem 0.5rem;
	font-family: var(--wp--preset--font-family--asb-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.asb-bookbar__primary { background-color: var(--asb-brass); color: var(--asb-ink); }
.asb-bookbar__secondary { background-color: var(--asb-ink); color: var(--asb-bone); }

.asb-bookbar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }

@media (max-width: 899px) {
	.asb-bookbar { display: flex; }
	body { padding-bottom: 56px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.asb-footer {
	background-color: var(--asb-ink);
	color: color-mix(in srgb, var(--asb-bone) 74%, transparent);
}

.asb-footer__cols {
	display: grid;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

.asb-footer h2,
.asb-footer .asb-footer__heading {
	font-family: var(--wp--preset--font-family--asb-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--asb-brass);
	margin: 0 0 1rem;
}

.asb-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.asb-footer a {
	color: inherit;
	text-decoration: none;
	transition: color var(--asb-t-fast);
}

.asb-footer a:hover {
	color: var(--asb-bone);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.asb-footer .asb-footer__sub {
	padding-left: 0.9rem;
	border-left: 1px solid rgb(242 239 234 / 14%);
	margin-top: 0.55rem;
	font-size: 0.9375rem;
}

.asb-footer dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.4rem 0.9rem;
	font-size: 0.9375rem;
}

.asb-footer dt { color: color-mix(in srgb, var(--asb-bone) 56%, transparent); }
.asb-footer dd { margin: 0; font-variant-numeric: tabular-nums; }

.asb-footer__brand {
	font-family: var(--wp--preset--font-family--asb-display);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--asb-bone);
	margin: 0 0 0.6rem;
}

.asb-footer__social {
	flex-direction: row !important;
	gap: 0.9rem !important;
	margin-top: 1.1rem !important;
}

.asb-footer__social a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgb(242 239 234 / 20%);
	border-radius: 50%;
	transition: border-color var(--asb-t-fast), background-color var(--asb-t-fast);
}

.asb-footer__social a:hover {
	border-color: var(--asb-brass);
	background-color: rgb(192 139 62 / 14%);
}

.asb-footer__social svg { width: 17px; height: 17px; fill: currentColor; }

.asb-footer__bottom {
	border-top: 1px solid rgb(242 239 234 / 12%);
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	font-size: 0.875rem;
}

.asb-footer__bottom ul {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
}

/* ==========================================================================
   Ported from the retired twentytwentyfive Global Styles `css` field.
   Wave 7 moved these two declarations out of the `responsive-controls` plugin,
   which injected them from a block attribute and dropped them on deactivation.
   The 768px breakpoint is that plugin's own, kept so /about-us/ renders
   unchanged. Do not fold this into a section pattern - the class is in the
   saved block markup of page 311.
   ========================================================================== */

.asb-section-pull-up {
	margin-top: -80px !important;
}

@media only screen and (max-width: 768px) {
	.asb-section-pull-up {
		margin-top: -40px !important;
	}
}

/* ==========================================================================
   Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.asb-hero__media video { display: none; }
}