/* 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); }

/* ── 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; }

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

/* ── 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); }