/*
Theme Name: Al Malik
Theme URI: https://almaliktours.com/
Author: Mohammad Sajid Ansari
Author URI: https://webmsconsultancy.com/
Description: Block theme (FSE) for Al Malik Tours, Unn, Surat. Built as a mobile-first lead-generation site for Umrah, Hajj and passport services. Every section is a block pattern so the whole site stays editable from the Site Editor.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: al-malik
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-menu, accessibility-ready
*/

/* -------------------------------------------------------------------------
   Al Malik — base styles

   theme.json owns all tokens (colour, type scale, spacing). This file only
   holds what theme.json cannot express: focus states, the arch motif, the
   sticky header/mobile bar, and the three permitted animations.

   Class prefix: .am-
   ------------------------------------------------------------------------- */

/* ---- 1. Foundations --------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Sticky header height, so #anchor links from Google Ads land correctly. */
	scroll-padding-top: 92px;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Room for the sticky Call/WhatsApp bar so it never covers the footer.

   Both this padding and the bar itself are derived from the same two custom
   properties. A hardcoded height here drifted out of sync with the real bar
   (72px reserved vs 85px actual) and buried the footer's copyright line. */
:root {
	/* Measured sticky header: the bar is 68px, and on mobile the top strip
	   sticks with it for 69px. One token so the anchor scroll offset on
	   the ad landing sections cannot drift away from the real header. */
	--am-header-h: 69px;
	--am-bar-btn: 48px;
	--am-bar-pad: 0.5rem;
	--am-bar-h: calc(var(--am-bar-btn) + (var(--am-bar-pad) * 2) + 1px);
}

@media (max-width: 781px) {
	body {
		padding-bottom: calc(var(--am-bar-h) + env(safe-area-inset-bottom));
	}
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
}

/* Reserve layout space while images decode — avoids CLS on slow connections. */
.wp-block-image img {
	display: block;
}

/* ---- 2. Accessibility ------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Non-mouse users on old Android browsers still get a ring. */
:where(a, button, input, select, textarea, summary):focus:not(:focus-visible) {
	outline: none;
}

.skip-link:focus {
	z-index: 999999;
}

.am-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- 3. Layout helpers ------------------------------------------------ */

/* Keeps body copy under ~70 characters.

   The constrained layout gives every child `margin-inline: auto`, which would
   centre a narrowed paragraph inside the 1200px container. Reset it so the
   text stays flush left unless it is explicitly centre-aligned. */
/* Caps line length only. Deliberately does NOT override margins: core's
   constrained layout centres its direct children with
   `margin-left/right: auto !important`, and fighting that pulls the block out
   to the padding edge instead of the 1200px content column. Where a narrowed
   paragraph must sit flush left, the pattern wraps it in a flow-layout group
   (see the CTA band) rather than forcing margins here. */
.am-measure {
	max-width: var(--wp--custom--measure, 68ch);
}

/* Small uppercase label with a gold rule — the only place gold leads. */
.am-eyebrow,
.is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-block-end: 0.75rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.am-eyebrow::before,
.is-style-eyebrow::before {
	content: "";
	flex: 0 0 28px;
	height: 2px;
	background: var(--wp--preset--color--gold);
	border-radius: 2px;
}

.am-eyebrow.has-text-align-center,
.is-style-eyebrow.has-text-align-center {
	justify-content: center;
}

/* ---- 4. The arch (mihrab) motif --------------------------------------- */

/* Every image slot on the site uses this shape. Nothing else is decorative. */
.am-arch,
.am-arch img,
.am-arch iframe {
	border-radius: var(--wp--custom--radius--arch, 999px 999px 14px 14px);
	overflow: hidden;
}

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

/* A hairline gold keyline inside the arch, used on the hero photo only. */
.am-arch--keyline {
	position: relative;
	isolation: isolate;
}

.am-arch--keyline::after {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1px solid rgba(230, 206, 138, 0.55);
	border-radius: var(--wp--custom--radius--arch, 999px 999px 14px 14px);
	pointer-events: none;
}

/* ---- 5. Cards --------------------------------------------------------- */

.am-card,
.is-style-card,
.is-style-card-lift {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card, 14px);
	height: 100%;
}

/* Desktop hover only — a lift, never a scale or a translate on mobile. */
@media (hover: hover) and (pointer: fine) {
	.am-card--lift,
	.is-style-card-lift {
		transition:
			border-color var(--wp--custom--transition, 180ms ease),
			box-shadow var(--wp--custom--transition, 180ms ease);
	}

	.am-card--lift:hover,
	.am-card--lift:focus-within,
	.is-style-card-lift:hover,
	.is-style-card-lift:focus-within {
		border-color: var(--wp--preset--color--gold-lt);
		box-shadow: var(--wp--preset--shadow--card);
	}
}

/* Dark band (stats, CTA) */
.am-band {
	border-radius: var(--wp--custom--radius--band, 20px);
}

/* Price badge — gold as a small accent, never a fill. */
.am-badge {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--gold);
	background: rgba(230, 206, 138, 0.18);
	border: 1px solid var(--wp--preset--color--gold-lt);
	border-radius: var(--wp--custom--radius--pill, 999px);
}

.am-pill {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill, 999px);
}

/* ---- 6. Checkmark lists ----------------------------------------------- */

.am-checks,
.is-style-checks,
.is-style-checks-no {
	list-style: none;
	margin: 0;
	padding: 0;
}

.am-checks li,
.is-style-checks li,
.is-style-checks-no li {
	position: relative;
	padding-inline-start: 2rem;
	margin-block-end: 0.75rem;
}

.am-checks li::before,
.is-style-checks li::before,
.is-style-checks-no li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.42em;
	width: 1.05rem;
	height: 0.55rem;
	border-inline-start: 2.5px solid var(--wp--preset--color--gold);
	border-block-end: 2.5px solid var(--wp--preset--color--gold);
	transform: rotate(-45deg);
}

/* "Not included" variant — a cross, so the difference from an included item
   reads without relying on colour alone. */
.am-checks--no li::before,
.is-style-checks-no li::before {
	inset-block-start: 0.5em;
	width: 0.8rem;
	height: 0.8rem;
	color: var(--wp--preset--color--body);
	border: 0;
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-size: 100% 2.5px, 2.5px 100%;
	background-position: center, center;
	background-repeat: no-repeat;
	transform: rotate(45deg);
}

/* ---- 7. Animation — three moments only -------------------------------- */

.am-fade-in {
	animation: am-fade 520ms ease-out both;
}

@keyframes am-fade {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---- 8. Logo lockup --------------------------------------------------- */

.am-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	line-height: 1;
}

.am-logo__mark {
	flex: 0 0 auto;
	width: 37px;
	height: 40px;
}

.am-logo__word {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1.1875rem;
	letter-spacing: -0.3px;
}

.am-logo__sub {
	display: block;
	margin-block-start: 4px;
	font-size: 0.53rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--gold);
}

/* Dark surfaces: two custom properties instead of a second copy of the SVG. */
.am-on-dark .am-logo {
	color: var(--wp--preset--color--base);
	--am-logo-gold: var(--wp--preset--color--gold-lt);
}

.am-on-dark .am-logo__sub {
	color: var(--wp--preset--color--gold-lt);
}

/* ---- 9. Top strip ----------------------------------------------------- */

.am-topstrip {
	--am-topstrip-h: 38px;
	min-height: var(--am-topstrip-h);
	font-size: var(--wp--preset--font-size--x-small);
}

.am-topstrip a {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

.am-topstrip a:hover,
.am-topstrip a:focus-visible {
	text-decoration: underline;
}

/* On a phone the strip only repeats what the sticky bottom bar already
   offers, so it costs 38px of the first screen for nothing. */
@media (max-width: 781px) {
	.am-topstrip {
		display: none;
	}
}

/* ---- 10. Sticky header ------------------------------------------------ */

.am-site-header {
	position: sticky;
	z-index: 100;
	background: var(--wp--preset--color--base);
	border-block-end: 1px solid var(--wp--preset--color--line);
	/* Let the top strip scroll away while the main bar stays put. */
	top: -38px;
}

@media (max-width: 781px) {
	.am-site-header {
		top: 0;
	}
}

/* Animation moment 1 of 3: the header gains a shadow once the page scrolls.
   Scroll-driven CSS, so no JS and no scroll listener on a cheap phone.
   Browsers without scroll timelines simply never get the shadow. */
@supports (animation-timeline: scroll()) {
	.am-site-header {
		animation: am-header-shadow linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 110px;
	}
}

@keyframes am-header-shadow {
	to {
		box-shadow: var(--wp--preset--shadow--header);
	}
}

.am-header-bar {
	min-height: 68px;
	gap: 1rem;
}

/* On a phone the header is logo + menu only. The WhatsApp button here would
   overflow a 390px screen, and the sticky bottom bar already carries it. */
@media (max-width: 781px) {
	.am-header-cta {
		display: none !important;
		visibility: hidden !important;
		width: 0 !important;
		height: 0 !important;
	}
}

/* Navigation */
.am-nav .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.am-nav .wp-block-navigation-item__content:hover,
.am-nav .wp-block-navigation-item__content:focus-visible,
.am-nav .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink-2);
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--wp--preset--color--gold);
}

/* The overlay menu is a full-screen sheet — big tap targets, no tiny x. */
.am-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base);
	padding: var(--wp--custom--gutter) var(--wp--custom--gutter) 4rem;
}

.am-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	padding-block: 0.4rem;
}

.am-nav .wp-block-navigation__responsive-container-open,
.am-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
	padding: 0.5rem;
	/* Core ships this at 40x40. It is the only way into the menu on a phone,
	   and this audience is on cheap Androids with big thumbs. */
	min-width: 44px;
	min-height: 44px;
}

/* ---- 11. Call / WhatsApp buttons -------------------------------------- */

.am-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	/* 48px minimum: this is the button the whole site exists to get tapped. */
	min-height: 48px;
	padding: 0.75rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.am-cta__icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.am-cta--whatsapp {
	background: var(--wp--preset--color--whatsapp);
	color: var(--wp--preset--color--base);
}

.am-cta--solid {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.am-cta--outline {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--line);
}

.am-cta--light {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

.am-cta--full {
	display: flex;
	width: 100%;
}

@media (hover: hover) and (pointer: fine) {
	.am-cta {
		transition: background-color var(--wp--custom--transition, 180ms ease),
			border-color var(--wp--custom--transition, 180ms ease);
	}

	.am-cta--whatsapp:hover {
		background: #1a6a41;
	}

	.am-cta--solid:hover {
		background: var(--wp--preset--color--ink-2);
	}

	.am-cta--outline:hover {
		border-color: var(--wp--preset--color--gold);
	}

	.am-cta--light:hover {
		background: var(--wp--preset--color--sand);
	}
}

/* ---- 12. Sticky mobile Call / WhatsApp bar ---------------------------- */

/* The primary conversion driver. Always visible, never covering content —
   body has matching bottom padding. */
.am-mobile-bar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 200;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	padding: var(--am-bar-pad) 0.75rem calc(var(--am-bar-pad) + env(safe-area-inset-bottom));
	background: var(--wp--preset--color--base);
	border-block-start: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 -4px 20px rgba(15, 58, 44, 0.10);
}

/* The bar is a 2-column grid, but its block markup still carries
   is-layout-flow, so core's blockGap gives the second button a 20px top
   margin and inflates the bar past the space reserved for it. */
.am-mobile-bar > * {
	margin-block: 0;
}

.am-mobile-bar .am-cta {
	width: 100%;
	/* Fixed height keeps the bar a known size (still a 48px tap target). */
	height: var(--am-bar-btn);
	min-height: var(--am-bar-btn);
	padding-block: 0;
	padding-inline: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 782px) {
	.am-mobile-bar {
		display: none;
	}
}

/* ---- 13. Footer ------------------------------------------------------- */

/* :not(.am-cta) — a blanket link colour here would beat the CTA button's own
   colour variants (same specificity, this rule comes later), which is how
   the white "Call" button in the footer ended up white-on-white. */
.am-footer a:not(.am-cta) {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.am-footer a:not(.am-cta):hover,
.am-footer a:not(.am-cta):focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.am-footer .am-footer__heading {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-lt);
	margin-block-end: 0.9rem;
}

.am-footer__legal {
	border-block-start: 1px solid rgba(230, 206, 138, 0.22);
}

/* Top strip internals */
.am-topstrip__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
	min-height: var(--am-topstrip-h, 38px);
	margin: 0;
}

.am-topstrip__inner p {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.am-topstrip__contact {
	gap: 1rem;
}

.am-topstrip__place {
	color: var(--wp--preset--color--gold-lt);
}

/* Footer internals */
.am-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Text links in the footer were 19px tall — under half a thumb, and stacked
   close enough that the wrong one is easy to hit. Given away as a row height
   on the phone only; with a mouse the tighter list is fine. */
@media (max-width: 782px) {
	.am-footer__list a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		/* "Home" is 43.9px of text — the only one that misses on width. */
		min-width: 44px;
	}
}

.am-nap {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-style: normal;
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.am-nap__name {
	font-weight: 700;
}

.am-nap__phone {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	margin-block-start: 0.35rem;
}

.am-footer__copyright {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--gold-lt);
}

/* ---- 14. Package cards -------------------------------------------------- */

.am-package-card {
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Unclipped positioning context for the badge — the arch's dome corners cut
   away the top of the box, so a badge anchored there would sit outside the
   visible photo (or get clipped if this element also hid overflow). */
.am-package-card__media {
	position: relative;
}

.am-package-card__media-inner {
	aspect-ratio: 4 / 3;
}

/* Says what to do rather than sitting there as an anonymous green dome —
   the client has to know a package photo is missing. */
.am-package-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 1rem;
	text-align: center;
	background: linear-gradient(155deg, var(--wp--preset--color--ink-2), var(--wp--preset--color--ink));
	color: var(--wp--preset--color--gold-lt);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
}

.am-package-card__body {
	padding: var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1;
}

/* Packages have descriptions of different lengths, so the buttons landed at
   three different heights across the row. Pushing the CTA down puts them on
   one line however much copy sits above. */
.am-package-card__body > .am-cta {
	margin-top: auto;
}

.am-package-card__title {
	margin: 0;
}

.am-package-card__title a {
	color: inherit;
	text-decoration: none;
}

.am-package-card__title a:hover,
.am-package-card__title a:focus-visible {
	text-decoration: underline;
}




.am-package-card__excerpt p {
	margin: 0;
}

/* Seat-status badge, floated over the photo. Anchored to the bottom-left,
   where the arch has only a small 14px corner radius — the top corners
   are cut away by the dome curve, so a badge there would float off the
   visible photo. */
.am-status-badge {
	position: absolute;
	inset-block-end: 0.75rem;
	inset-inline-start: 0.75rem;
	max-width: calc(100% - 1.5rem);
	padding: 0.3rem 0.8rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 800;
	letter-spacing: 0.02em;
	border-radius: var(--wp--custom--radius--pill, 999px);
	box-shadow: 0 2px 10px rgba(15, 58, 44, 0.28);
}

/* "Filling Fast" was light gold on ink text — the quietest of the three, when
   it is the one meant to create urgency. Solid gold, white text, like the
   few-seats badge, so both read as a warning at a glance. */
.am-status-badge--filling_fast {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--base);
}

.am-status-badge--few_seats {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--base);
}

.am-status-badge--sold_out {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

/* Sold-out cards stay legible but visually recede — no colour is removed
   from the palette, the card is just quieter than an open one. */
.am-package-card--sold {
	opacity: 0.72;
}

.am-package-card--sold .am-package-card__media-inner {
	filter: grayscale(65%);
}

/* The package grid is CSS, not the block's saved layout attribute.
   Every save from the block editor resets post-template's layout back to
   {"type":"default"}, which stacked all three cards at full width. Restoring
   the attribute only survives until the next save, so the columns live here
   instead — where an editor save cannot reach them. */
.wp-block-post-template {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--30, 1.25rem);
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

.wp-block-post-template > li {
	margin: 0;
}

@media (min-width: 600px) {
	.wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.wp-block-post-template {
		grid-template-columns: repeat(3, 1fr);
	}
}

.am-social {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--wp--preset--font-size--x-small);
}

/* ---- 15. Photo placeholders -------------------------------------------- */

/* Used in patterns until the client uploads a real photo. Self-hosted CSS,
   not a hotlinked placeholder service — those go down (via.placeholder.com
   is dead as of this build) and shouldn't be a runtime dependency anyway. */
.am-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 220px;
	background: linear-gradient(155deg, var(--wp--preset--color--ink-2), var(--wp--preset--color--ink));
	color: var(--wp--preset--color--gold-lt);
	text-align: center;
	padding: 1rem;
}

.am-photo-placeholder span {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* Airline row.
   Deliberately NOT the airlines' own logos. Air India, Akasa Air and IndiGo are
   registered trademarks; redrawing them — and recolouring them to this site's
   green — breaks every one of their brand guidelines and implies an official
   partnership that does not exist. Official, unmodified logo files from each
   airline's press kit can replace these pills; drawing our own cannot. */
/* Bare logos need far more air than pills did: without a border there is
   nothing to separate one mark from the next, and Air India's swoosh runs
   right up to the following logo at the old 0.5rem. Row gap stays smaller
   than column gap so a wrapped second line reads as the same group. */
.am-airlines {
	display: flex;
	align-items: center;
	gap: 0.75rem 1.75rem;
	flex-wrap: wrap;
}

.am-airlines__label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body);
	/* The label is a caption, not a peer of the logos — a touch more space
	   after it stops it reading as the first item in the row. */
	margin-inline-end: 0.25rem;
}

.am-airline {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

/* Gold on the mark only — a small accent, never a fill. */
.am-airline svg {
	color: var(--wp--preset--color--gold);
	flex: 0 0 auto;
}


/* The floating stat card on the hero. Absolutely positioned elements with
   only an inset-end set (no inset-start/width) stretch to fill the nearest
   positioned ancestor under WP's block-library flex defaults — pin a max
   width so it stays a small floating card, not a full-width bar. */
.am-hero-stat {
	width: max-content;
	max-width: 220px;
}

/* ---- 16. Hero media ---------------------------------------------------- */

/* .am-card sets height:100% so cards match heights in a grid. On the
   absolutely-positioned floating stat card that resolved to the full height
   of the arch, stretching it into a tall empty box. */
.am-hero-stat {
	position: absolute;
	inset-block-end: 8%;
	inset-inline-end: -1.5rem;
	width: max-content;
	max-width: 230px;
	height: auto;
}

@media (max-width: 781px) {
	.am-hero-stat {
		inset-inline-end: 0;
	}
}

/* Positioning context for the floating stat card. Kept in CSS because
   core/group's position support only accepts "sticky" — declaring
   position:relative as a block style attribute makes the saved markup
   disagree with what save() emits, which the editor flags as invalid. */
.am-hero-media {
	position: relative;
}

.am-hero-media .wp-block-image {
	margin: 0;
}

/* Shadow lives here for the same reason: a boxShadow block attribute must be
   mirrored in the saved inline style or the block fails validation. */
.am-hero-stat {
	box-shadow: var(--wp--preset--shadow--float);
}

/* Quote cards: make the gold rule explicit rather than relying on the core
   quote block's own indentation, which reads as unexplained whitespace. */
.am-card blockquote.wp-block-quote {
	margin: 0;
	padding-inline-start: 1rem;
	border-inline-start: 3px solid var(--wp--preset--color--gold-lt);
}

.am-card blockquote.wp-block-quote p {
	margin-block: 0 0.75rem;
}

.am-card blockquote.wp-block-quote cite {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--body);
	font-style: italic;
}

/* ---- 17. Single package page ------------------------------------------- */

.am-pkg-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	margin-block-start: var(--wp--preset--spacing--40);
}

/* On the single page the status badge sits in the flow, not over a photo. */
.am-status-badge--inline {
	position: static;
	margin: 0;
}

.am-pkg-meta__price {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.am-pkg-meta__note,
.am-pkg-meta__disclaimer {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--body);
}

.am-pkg-meta__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	margin: 0.5rem 0 0;
	padding: 1rem 0 0;
	border-block-start: 1px solid var(--wp--preset--color--line);
	width: 100%;
}

.am-pkg-meta__fact dt {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

.am-pkg-meta__fact dd {
	margin: 0.15rem 0 0;
	font-weight: 600;
}

.am-pkg-meta .am-cta {
	margin-block-start: 0.5rem;
}

/* The featured-image block renders nothing at all when a package has no photo
   yet, which left half the single-package layout blank. The wrapper keeps the
   arch shape and shows the placeholder gradient until a photo is uploaded. */
.am-pkg-figure {
	aspect-ratio: 4 / 5;
	background:
		linear-gradient(155deg, var(--wp--preset--color--ink-2), var(--wp--preset--color--ink));
	position: relative;
}

.am-pkg-figure .wp-block-post-featured-image,
.am-pkg-figure .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.am-pkg-figure:not(:has(img))::after {
	content: "Package photo — add one in Packages → Featured image";
	position: absolute;
	inset: auto 1.5rem 2rem;
	text-align: center;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: var(--wp--preset--color--gold-lt);
}

/* ---- 18. Top-level layout seams ---------------------------------------- */

/* WordPress applies the global blockGap to top-level children of
   .wp-site-blocks (`:where(.wp-site-blocks) > * { margin-block-start: 1.25rem }`),
   which inserts a 20px stripe of page background between the header and main,
   and again between the CTA band and the footer. Sections here own their own
   vertical padding, so these seams must be flush. Inner blocks keep the normal
   blockGap — this only zeroes the outermost level. */
.wp-site-blocks > *,
.wp-site-blocks > main > .entry-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---- 19. Service cards -------------------------------------------------- */

.am-service {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.am-service__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-block-end: 0.35rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--sand);
	border: 1px solid var(--wp--preset--color--line);
	/* Small arch, echoing the mihrab motif at icon scale. */
	border-radius: 999px 999px 10px 10px;
}

.am-service h3 {
	margin: 0;
}

.am-service p {
	margin: 0;
}

.am-service a {
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--ink-2);
	border-block-end: 2px solid var(--wp--preset--color--gold-lt);
	padding-block-end: 2px;
}

.am-service a:hover,
.am-service a:focus-visible {
	border-block-end-color: var(--wp--preset--color--gold);
}

/* ---- 20. Stats band ----------------------------------------------------- */

.am-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--40);
	margin: 0;
}

.am-stats__item {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.am-stats__item dt {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	letter-spacing: -0.6px;
	line-height: 1;
	color: var(--wp--preset--color--gold-lt);
}

.am-stats__item dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

@media (max-width: 781px) {
	.am-stats__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}
}

/* ---- 21. Contact + map -------------------------------------------------- */

.am-contact-details {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.am-contact-row {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 1rem;
	align-items: start;
	padding-block-end: 1.25rem;
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.am-contact-row:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.am-contact-row__label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	padding-block-start: 0.2rem;
}

.am-contact-row__value {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

.am-contact-row__phone {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	letter-spacing: -0.4px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.am-contact-row__phone:hover,
.am-contact-row__phone:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.am-map {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--wp--custom--radius--card, 14px);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
}

.am-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.am-map__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 1.5rem;
	text-align: center;
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

@media (max-width: 781px) {
	.am-map {
		aspect-ratio: 3 / 2;
	}
}

/* ---- 22. Image slots are fixed, photos crop into them ------------------ */

/* Every image on this site sits in a slot of a fixed shape. Without that the
   uploaded photo's own proportions drive the layout: a portrait phone photo
   in the hero rendered ~1170px tall and pushed every CTA below the fold.
   The client swaps a photo, the layout must not move.

   !important is deliberate and is the whole point of the rule. WP's aspect
   ratio control writes style="aspect-ratio:..." straight onto the <img>, and
   it auto-fills that from the upload's own dimensions — an inline style no
   normal selector can outrank. The sanctioned way to change a slot's shape is
   the Styles list in the sidebar (Arch / Arch wide / Natural), not that
   control.

   Sizing lives on the <img>, not the <figure>, so a caption stays outside the
   cropped box instead of being clipped by it. */
.wp-block-image:not(.is-style-natural) img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--am-arch-ratio, 5 / 6) !important;
	object-fit: cover;
	object-position: center;
	border-radius: var(--wp--custom--radius--arch, 999px 999px 14px 14px);
}

/* Landscape slot — group photos, office interiors, anything wider than tall. */
.wp-block-image.is-style-arch-wide {
	--am-arch-ratio: 4 / 3;
}

/* The opt-out, for a diagram or a logo that must keep its own proportions. */
.wp-block-image.is-style-natural img {
	border-radius: var(--wp--custom--radius--card, 14px);
}

/* ---- 23. Inner pages ---------------------------------------------------- */

/* Page hero — smaller than the homepage hero, same sand ground. */
.am-page-hero {
	text-align: center;
}

.am-page-hero .am-measure {
	margin-inline: auto;
}

/* Google Ads deep-links land on #umrah, #hajj, #passport and friends. The
   header is sticky, so without this the heading the visitor clicked through
   for sits underneath it — on the exact page the click was paid for. */
[id="umrah"],
[id="hajj"],
[id="passport"],
[id="visa"],
[id="tickets"],
[id="faq"] {
	scroll-margin-top: calc(var(--am-header-h) + 1rem);
}

/* Documents-you-need list: plain, scannable, two columns where there is room. */
.am-docs {
	display: grid;
	gap: 0.6rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 782px) {
	.am-docs {
		grid-template-columns: 1fr 1fr;
	}
}

.am-docs li {
	position: relative;
	padding-inline-start: 1.6rem;
	color: var(--wp--preset--color--body);
}

.am-docs li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.55em;
	inset-inline-start: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--gold);
}

/* FAQ. <details> rather than JS: it is keyboard accessible for free, it works
   before any script parses, and Google can read the answers for rich results. */
.am-faq {
	max-width: 52rem;
	margin-inline: auto;
	border-top: 1px solid var(--wp--preset--color--line);
}

.am-faq details {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.am-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	cursor: pointer;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	list-style: none;
}

.am-faq summary::-webkit-details-marker {
	display: none;
}

.am-faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.6rem;
	height: 0.6rem;
	border-inline-end: 2px solid var(--wp--preset--color--gold);
	border-block-end: 2px solid var(--wp--preset--color--gold);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 160ms ease;
}

.am-faq details[open] summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.am-faq summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.am-faq details > p {
	margin: 0 0 1.1rem;
	padding-inline-end: 2rem;
	color: var(--wp--preset--color--body);
}

@media (prefers-reduced-motion: reduce) {
	.am-faq summary::after {
		transition: none;
	}
}

/* Wrapper for measure-capped body text inside a left-aligned constrained
   section. The group is what the constrained layout centres at the content
   width; the paragraph's line-length cap then applies inside it, so the text
   starts flush with the heading instead of being indented by the auto margin. */
.am-measure-block > .am-measure {
	margin-inline: 0;
}

/* A visible "the owner still has to fill this in" marker. Deliberately loud:
   a placeholder that blends into the page is a placeholder that ships. */
.am-note {
	margin-block: 1.25rem;
	padding: 0.9rem 1.1rem;
	border-inline-start: 4px solid var(--wp--preset--color--gold);
	border-radius: 0 var(--wp--custom--radius--card, 14px) var(--wp--custom--radius--card, 14px) 0;
	background: var(--wp--preset--color--sand-2);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
}

.am-note strong {
	display: block;
	margin-block-end: 0.2rem;
	color: var(--wp--preset--color--gold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--wp--preset--font-size--x-small);
}

/* Legal pages: one readable column, generous rhythm, nothing decorative. */
.am-legal h2 {
	margin-block: 2.4rem 0.6rem;
}

.am-legal h2:first-child {
	margin-block-start: 0;
}

.am-legal p,
.am-legal li {
	color: var(--wp--preset--color--body);
}

.am-legal ul {
	margin-block: 0.6rem 1.2rem;
	padding-inline-start: 1.2rem;
}

.am-legal li {
	margin-block-end: 0.45rem;
}

/* Two sections sharing a ground colour stack their vertical padding, so the
   invisible seam between them measures twice the section rhythm — the uneven
   gaps that show up as you scroll. Collapse the second one's top padding so a
   same-colour seam is one rhythm, like every other seam on the page. */
/* !important because each section carries its padding as an inline style from
   its block attributes, which no selector can outrank. Kept to this one
   adjacent-sibling case so it cannot leak anywhere else. */
.entry-content > .has-base-background-color + .has-base-background-color,
.entry-content > .has-sand-background-color + .has-sand-background-color {
	padding-top: 0 !important;
}

/* ---- 24. Accessibility pass -------------------------------------------- */

/* The hero figure reads as a heading but is not one semantically, so it takes
   its size from a class instead of from an <h3> that skipped a level. */
.am-hero-stat__figure {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: 1.1;
	color: var(--wp--preset--color--ink);
}

/* Text links that act as calls to action. Most of this audience is on a cheap
   Android phone; a 23px-high phone number is a link you miss twice before you
   hit it. The padding is vertical only, so the text stays where the design
   put it. */
.am-contact-row__phone,
.am-nap__phone,
.am-social,
.am-service p a,
.am-package-card__title a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.am-package-card__title {
	margin-block: 0;
}

/* The logo is the way back to the homepage from every page. */
.am-logo {
	min-height: 44px;
}

/* The pill is inline-block, so the constrained layout's auto margins do
   nothing for it — it lands at the section's left edge, outside the 1200px
   column everything else sits in. The wrapper is what gets centred; the pill
   then starts flush with the heading. */
.am-measure-block > .am-pill {
	margin-inline: 0;
}

/* ---- 25. Map facade and lazy images ------------------------------------ */

/* The still frame shown before anyone asks for the map. */
.am-map__facade {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	height: 100%;
	padding: 1.5rem;
	text-align: center;
	background:
		radial-gradient(circle at 30% 25%, rgba(230, 206, 138, 0.18), transparent 55%),
		var(--wp--preset--color--sand);
}

.am-map__pin {
	color: var(--wp--preset--color--gold);
}

.am-map__addr {
	margin: 0;
	max-width: 26ch;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.am-map__directions {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: var(--wp--preset--color--body);
}

/* A lazy image arriving mid-scroll snaps in hard. Fading it as it decodes
   costs nothing and is the only place this is used. */
img[data-am-lazy] {
	animation: am-img-in 300ms ease-out both;
}

@keyframes am-img-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	img[data-am-lazy] {
		animation: none;
	}
}

/* ---- 26. Mobile CTA rows ------------------------------------------------ */

/* When a pair of CTAs wraps onto two lines the buttons keep their natural
   widths, so the primary conversion element on the page ends up as two ragged
   pills (268px over 160px, measured). Full width once they stack: one column,
   both easy to hit with a thumb. The mobile bar is a grid of its own and the
   footer pair still fits side by side, so both are left alone. */
@media (max-width: 600px) {
	.wp-block-buttons > .am-cta,
	.wp-block-group.is-layout-flex > .am-cta {
		flex: 1 1 100%;
		justify-content: center;
	}

	.am-mobile-bar .am-cta,
	.am-footer__ctas > .am-cta {
		flex: 0 1 auto;
	}
}

/* The overlay menu's close button was 40px. It is the only way out of the
   menu, so it gets the same 44px as everything else. */
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
}

/* ---- 26a. Back to top -------------------------------------------------- */

/* The homepage runs to about 11,000px on a phone. The link works with no
   JavaScript — "#top" means the top of the document — and the script only
   decides when to reveal it, so it is hidden until it has a job to do.

   z-index sits below the sticky call bar's 200: the bar is the conversion
   driver and nothing may ever cover it. On a phone the button clears the bar
   rather than floating over it. */
.am-totop {
	position: fixed;
	z-index: 40;
	inset-block-end: calc(var(--am-bar-h) + env(safe-area-inset-bottom) + 1rem);
	inset-inline-end: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 2px 12px rgba(15, 58, 44, 0.16);
	opacity: 0;
	visibility: hidden;
	transition: opacity 180ms ease, visibility 180ms;
}

.am-totop.is-visible {
	opacity: 1;
	visibility: visible;
}

.am-totop:hover {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink-2);
}

@media (min-width: 782px) {
	/* No call bar on desktop, so it returns to the usual corner. */
	.am-totop {
		inset-block-end: 2rem;
		inset-inline-end: 2rem;
	}
}

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

@media print {
	.am-totop {
		display: none;
	}
}

/* ---- 26b. Not-found quick links ---------------------------------------- */

/* A row on a wide screen, a stack on a phone. Each link carries its own 44px
   row height rather than relying on the list's line spacing, which put the
   footer links at 19px before. */
.am-quicklinks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 var(--wp--preset--spacing--40, 2rem);
}

.am-quicklinks a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

@media (max-width: 600px) {
	.am-quicklinks {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}
}

/* ---- 27. Package card, rebuilt around the decision ---------------------- */

/* The old card was a flat stack: badge, title, meta, note, excerpt, button —
   all at the same weight and the same 0.6rem apart, so nothing led. The price
   sat in a pale full-width pill, which made the most important number on the
   card the faintest thing on it, and put a broad gold wash where the design
   system asks for gold only as a small accent. This version has three levels:
   title, price, then the facts underneath. */
.am-package-card__body {
	gap: 0;
}

.am-package-card__title {
	margin-block: 0 0.5rem;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	letter-spacing: -0.4px;
}

/* Price is the answer to the second question anyone asks, so it is the
   largest thing in the body. Gold is on the tiny "from" label only. */
.am-package-card__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 0.4rem;
	margin-block: 0 1rem;
	padding-block-end: 1rem;
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.am-package-card__from {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--gold);
}

.am-package-card__amount {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	letter-spacing: -0.6px;
	color: var(--wp--preset--color--ink);
}

/* "per person" was its own orphaned paragraph. It belongs to the number. */
.am-package-card__per {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--body);
}

/* Facts as label/value pairs rather than a run-on grey line, so a reader can
   compare two packages by running their eye down one column. */
.am-facts {
	margin: 0 0 1.25rem;
	display: grid;
	gap: 0.55rem;
}

.am-facts__row {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 0.5rem;
	align-items: baseline;
}

.am-facts dt {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--body);
}

.am-facts dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
}

/* The distance from the Haram is the number people compare packages on, so it
   is a chip rather than more grey text. */
/* Distance from the Haram is the number people actually choose on, and in
   pale sand on a white card it read as decoration. Gold tint plus a gold
   keyline makes it the thing the eye lands on — still a small accent, which
   is the only way the design system allows gold to be used. */
.am-facts__dist {
	display: inline-block;
	margin-inline-start: 0.4rem;
	padding: 0.15rem 0.55rem;
	border: 1px solid var(--wp--preset--color--gold-lt);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: rgba(230, 206, 138, 0.22);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
}

/* Duration moves onto the photo, opposite the seat badge: it was repeated in
   the title and again in the meta line, and it belongs with the other
   at-a-glance facts rather than in the prose. */
/* Sits on a photograph, so it cannot rely on a translucent white that a pale
   sky washes straight through. Solid ink, white text, same pill and shadow as
   the seat badge on the opposite corner — the two read as a pair. */
.am-package-card__duration {
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-end: 0.75rem;
	z-index: 2;
	padding: 0.3rem 0.8rem;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--ink);
	box-shadow: 0 2px 10px rgba(15, 58, 44, 0.28);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--base);
}

/* The empty photo dome dominated the card. Shorter until a real photo lands. */
.am-package-card__media-inner {
	aspect-ratio: 16 / 10;
}

/* An uploaded logo is shown exactly as the airline publishes it — no filter,
   no recolour. A real logo carries its own shape and colour, so it needs no
   pill behind it: the white fill and border only competed with it. The pill
   stays for the name-only fallback, where there is nothing else to look at. */
.am-airline--logo {
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
}

/* --am-logo-h is set per logo in the block's render from the file's own
   proportions, so every mark covers roughly the same area rather than the
   same height. The unitless value lets mobile scale all of them together. */
.am-airline__logo {
	display: block;
	height: calc(var(--am-logo-h, 28) * 1px);
	width: auto;
	max-width: 148px;
	object-fit: contain;
}

/* On a phone the logos are wider than the space a wrapping flex row can give
   them, so they break one per line and the row reads as a ragged list. A grid
   lays them out in equal columns instead: the label takes a line of its own and
   the marks sit in a single tidy row, each scaled to its column rather than to
   a fixed height. The column count comes from the block, not from auto-fit. */
@media (max-width: 600px) {
	.am-airlines {
		display: grid;
		grid-template-columns: repeat(var(--am-airline-cols, 3), 1fr);
		gap: 0.6rem 0.75rem;
		align-items: center;
		justify-items: center;
	}

	.am-airlines__label {
		grid-column: 1 / -1;
		justify-self: start;
		margin-inline-end: 0;
	}

	.am-airline--logo {
		width: 100%;
	}

	/* Width-led inside the column, so the column decides the size. The height
	   ceiling still comes from the per-logo optical value, so a narrow mark
	   cannot grow taller than it would on desktop. */
	.am-airline__logo {
		width: 100%;
		height: auto;
		max-width: none;
		max-height: calc(var(--am-logo-h, 28) * 1px);
	}
}