/* Pages CMS — public block styles. Blocks lean on Bootstrap (grid, cards,
   accordion, ratio, utilities); this file carries only what Bootstrap can't:
   the full-bleed breakout, the hero, the lightbox and Swiper accents.
   Color-mode aware — use --bs-* variables, not hard-coded colors. */
body { overflow-x: hidden; }
.cms-page .cms-block { width: 100vw; position: relative; left: 50%; margin-left: -50vw; }

/* ── Hero banner (full-viewport media + overlay — no Bootstrap equivalent) ── */
.cms-hero { height: 100vh; min-height: 420px; overflow: hidden; background: #111; }
.cms-hero--half { height: 55vh; }
.cms-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cms-hero picture { position: absolute; inset: 0; display: block; }
.cms-hero__swiper { position: absolute; inset: 0; height: 100%; }
.cms-hero .swiper-slide { position: relative; }
/* The overlay paints above the slider but must not swallow clicks meant for
   the arrows/dots underneath — only its own content stays interactive. */
.cms-hero__overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center;
	justify-content: center; text-align: center; background: rgba(0,0,0,.28); padding: 0 20px;
	pointer-events: none; }
.cms-hero__overlay .cms-hero__inner { pointer-events: auto; }
.cms-hero .swiper-button-prev, .cms-hero .swiper-button-next { color: #fff; z-index: 10;
	--swiper-navigation-size: 34px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.cms-hero .swiper-button-prev { left: clamp(20px, 4.5vw, 80px); }
.cms-hero .swiper-button-next { right: clamp(20px, 4.5vw, 80px); }
.cms-hero .swiper-pagination { z-index: 10; }
.cms-hero__heading { color: #fff; font-size: clamp(28px, 5vw, 56px); font-weight: 800; margin: 0 0 10px; }
.cms-hero__sub { color: #fff; opacity: .92; font-size: clamp(15px, 2vw, 22px); margin: 0 0 22px; }
.cms-hero .swiper-pagination-bullet { background: #fff; opacity: .55; }
.cms-hero .swiper-pagination-bullet-active { opacity: 1; }

/* ── Rich content body (authored HTML needs guardrails) ── */
.cms-rich__body { line-height: 1.75; }
.cms-rich__body img { max-width: 100%; height: auto; border-radius: var(--bs-border-radius); }
.cms-rich__body table { border-collapse: collapse; width: 100%; }
.cms-rich__body td, .cms-rich__body th { border: 1px solid var(--bs-border-color); padding: 8px 12px; }

/* ── Gallery lightbox ── */
.cms-lb-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.88);
	display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.cms-lb-overlay img { max-width: 94vw; max-height: 92vh; border-radius: 8px; }

/* ── Carousel (Swiper accents) ── */
.cms-car__swiper { padding-bottom: 34px; }
.cms-car .swiper-button-prev, .cms-car .swiper-button-next { color: var(--bs-primary); --swiper-navigation-size: 26px; }
.cms-car .swiper-pagination-bullet-active { background: var(--bs-primary); }

/* ── Image marquee (continuous loop) ──
   The track holds N identical copies of the image row and slides left by exactly
   one copy (--cms-mq-shift = -100/N %), so the wrap lands on an identical frame
   and the seam is invisible. Left-to-right is the same animation run backwards. */
.cms-mq__viewport { overflow: hidden; }
.cms-mq__track { display: flex; width: max-content;
	animation: cms-mq-scroll var(--cms-mq-dur, 24s) linear infinite; }
.cms-mq--ltr .cms-mq__track { animation-direction: reverse; }
.cms-mq--pause .cms-mq__viewport:hover .cms-mq__track { animation-play-state: paused; }
.cms-mq__group { display: flex; align-items: center; gap: var(--cms-mq-gap, 48px);
	padding-right: var(--cms-mq-gap, 48px); }
.cms-mq__item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.cms-mq__item--card { background: #fff; border-radius: 6px; padding: 14px 22px;
	box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.cms-mq__img { height: var(--cms-mq-h, 80px); width: auto; max-width: none; display: block;
	object-fit: contain; }
.cms-mq--gray .cms-mq__img { filter: grayscale(1); opacity: .75; transition: filter .25s, opacity .25s; }
.cms-mq--gray .cms-mq__item:hover .cms-mq__img { filter: grayscale(0); opacity: 1; }
@keyframes cms-mq-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(var(--cms-mq-shift, -50%), 0, 0); }
}
/* Motion off: no animation, but the row stays reachable by swipe/scroll. */
@media (prefers-reduced-motion: reduce) {
	.cms-mq__track { animation: none; }
	.cms-mq__viewport { overflow-x: auto; }
	.cms-mq__group[aria-hidden="true"] { display: none; }
}

/* ── Social feed: YouTube play badge over the thumbnail ── */
.cms-social__play { position: relative; display: block; }
.cms-social__play i { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px;
	display: flex; align-items: center; justify-content: center; font-size: 34px; color: #fff;
	text-shadow: 0 2px 10px rgba(0,0,0,.45); transition: transform .2s ease, color .2s ease; }
.cms-social__play:hover i { transform: scale(1.12); color: #ff0000; }

/* ── Embed (raw HTML can't be wrapped in .ratio reliably) ── */
.cms-embed__inner iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: var(--bs-border-radius); }

/* ── Hero variants (page banners) ── */
.cms-hero--short { height: 46vh; min-height: 360px; max-height: 560px; }
.cms-hero__overlay--left { justify-content: flex-start; text-align: left;
	padding-left: clamp(24px, 9vw, 160px); padding-right: 24px;
	background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 100%); }

/* ── Icon features ── */
/* FA7 gives icons a fixed box (width:1.25em), so text-align can't center them
   in the column — the box itself must center via auto margins. */
.cms-if__icon { height: 72px; width: auto; display: block; margin-left: auto; margin-right: auto; }
.cms-if__fa { font-size: 56px; display: block; margin-left: auto; margin-right: auto; }
.cms-if--left .cms-if__icon, .cms-if--left .cms-if__fa { margin-left: 0; margin-right: 0; }
/* "Zoom icon on hover" — the whole feature is the hover target, only the art scales. */
.cms-if--zoom .cms-if__icon, .cms-if--zoom .cms-if__fa { transition: transform .25s ease; }
.cms-if--zoom .cms-if__cell:hover .cms-if__icon, .cms-if--zoom .cms-if__cell:focus-visible .cms-if__icon,
.cms-if--zoom .cms-if__cell:hover .cms-if__fa, .cms-if--zoom .cms-if__cell:focus-visible .cms-if__fa {
	transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) {
	.cms-if--zoom .cms-if__icon, .cms-if--zoom .cms-if__fa { transition: none; transform: none !important; }
}
/* A linked feature colors itself from --cms-if-link (set inline by the block, from its
   Link color / Link hover color settings). Plain `color` — never a Bootstrap text
   utility — because those are !important and the hover state could not override them. */
.cms-if__cell--link { cursor: pointer; color: var(--cms-if-link, inherit); transition: color .2s ease; }
.cms-if__cell--link h3 { color: inherit; }
.cms-if__cell--link:hover, .cms-if__cell--link:focus-visible {
	color: var(--cms-if-link-hover, var(--brand-menu-hover, var(--bs-primary))); }

/* ── Career tiles ── */
.cms-career__tile { background: #3d454e; color: #fff; border-radius: 4px; min-height: 130px;
	transition: transform .15s, box-shadow .15s, background-color .15s; }
.cms-career__tile:hover, .cms-career__tile:focus-visible { transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0,0,0,.25);
	background: var(--brand-tile-hover, var(--bs-primary)); }

/* ── Hero image-fit variants (after the height rules so they win) ── */
.cms-hero--contain .cms-hero__media { object-fit: contain; }
/* "Match image": banner height follows the artwork — desktop 1920x900, mobile 1080x1350. */
.cms-hero--ratio { height: auto; min-height: 0; max-height: none; aspect-ratio: 1920 / 900; }
@media (max-width: 767px) { .cms-hero--ratio { aspect-ratio: 1080 / 1350; } }

/* ── Per-block spacing overrides (Renderer wraps blocks that set them) ── */
.cms-pad[style*="--cms-pt"] > .cms-block { padding-top: var(--cms-pt) !important; }
.cms-pad[style*="--cms-pb"] > .cms-block { padding-bottom: var(--cms-pb) !important; }

/* ── Album gallery ── */
.cms-alb__cover { cursor: pointer; }
.cms-alb__title { position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px; color: #fff;
	font-weight: 600; font-size: 14px; letter-spacing: .02em;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%);
	opacity: 0; transition: opacity .2s; }
.cms-alb__cover:hover .cms-alb__title, .cms-alb__cover:focus .cms-alb__title { opacity: 1; }
@media (hover: none) { .cms-alb__title { opacity: 1; } }
.cms-alb__modal .modal-content { background: #23262b; color: #fff; }

/* lightbox chrome (counter, arrows, close) */
.cms-lb-count { position: fixed; left: 24px; bottom: 18px; color: #cfd3d9; font-size: 13px; }
.cms-lb-close { position: fixed; right: 20px; bottom: 10px; background: none; border: 0; color: #fff;
	font-size: 34px; line-height: 1; cursor: pointer; }
.cms-lb-nav { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.35);
	border: 0; color: #fff; font-size: 26px; width: 48px; height: 64px; cursor: pointer; border-radius: 6px; }
.cms-lb-prev { left: 14px; }
.cms-lb-next { right: 14px; }
.cms-lb-nav:hover { background: rgba(0,0,0,.6); }
.cms-lb-cap { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; color: #fff;
	font-size: 14px; max-width: 70vw; text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,.7); }

/* ── Heading-to-body gap: per-block "Space under heading" setting (--cms-hg) ── */
.cms-block .cms-heading, .cms-block h2.cms-heading { margin-bottom: var(--cms-hg, 24px); }

/* ── Icon features: optional narrower feature columns (2-3 item bands) ── */
.cms-if--w-md .cms-if__cell { max-width: 420px; }
.cms-if--w-sm .cms-if__cell { max-width: 320px; }

/* ── Heading color: per-block override (--cms-hc), hero overlay included ── */
.cms-pad[style*="--cms-hc"] .cms-heading, .cms-pad[style*="--cms-hc"] .cms-heading h2,
.cms-pad[style*="--cms-hc"] h2.cms-heading, .cms-pad[style*="--cms-hc"] .cms-hero__heading { color: var(--cms-hc) !important; }

/* ── Enquiry form styles: underline + material variants; intl-tel full width ── */
.cms-form .iti { width: 100%; }
.cms-form--line .form-control { border: 0; border-bottom: 1px solid var(--bs-border-color);
	border-radius: 0; background: transparent; padding-left: 0; }
.cms-form--line .form-control:focus { box-shadow: none; border-bottom-color: var(--bs-primary); }
.cms-form--line .form-label { font-size: 13px; color: var(--bs-secondary-color); }
.cms-form--material .form-floating > .form-control { border-radius: var(--bs-border-radius); }