/**
 * article.css — the article (single.php) and page (page.php) experience:
 * hero/figure/credit, title block, standfirst, meta, `.lc-prose` prose
 * typography, the article foot, the "more stories" band, and the page head/
 * banner. Loads after base.css (see inc/enqueue.php cascade order) and
 * before content.css.
 *
 * Rules this file obeys throughout (spec §0):
 *   - No !important, anywhere.
 *   - No literal colours/spacing/radii/shadows — everything traces to a
 *     --ds-* or --lc-* custom property. Font-FAMILY stacks are the one
 *     deliberate exception: Corduroy's own generated tokens bake the family
 *     into each font shorthand rather than tokenising it separately (see
 *     $ds-font-title-2-default etc. in ikonWeb.scss), and spec §1 hands us
 *     the literal composed body-font declaration verbatim — so the "no
 *     literal" rule here is about colour/space/radius magic numbers, not
 *     font-family lists.
 *
 * THE BREAKOUT DECISION — REWORKED (three browser-found defects fixed):
 *
 * v1 widened `.lc-article__body` to container width and narrowed
 * individual prose tags back down. That shipped three defects: (1) the
 * head (`.lc-container--measure`, width = measure + gutter padding) and
 * the body (width = container, no padding) had DIFFERENT box models, so
 * chips/H1/meta and body paragraphs landed on different left edges — a
 * whole `--lc-gutter` (48px at desktop) apart; (2) only `.wpb_text_column`
 * and a short list of direct-child tags were narrowed, so anything else
 * authored outside a `[vc_column_text]` — `.nectar-fancy-ul`,
 * `.nectar-cta`, `.divider`, raw HTML, the testimonial, icon lists,
 * `[heading]` — escaped the reading column entirely; (3) images sat at
 * full container width, too large.
 *
 * NARROW-BY-DEFAULT, WIDE-BY-EXCEPTION is what's implemented now:
 *
 *   1. `.lc-article__body` gets NO width override at all — it is exactly
 *      `.lc-container.lc-container--measure`, identical to
 *      `.lc-article__head`. Same classes, same box model, so the shared
 *      left edge falls out for free at every breakpoint; nothing below
 *      needs to know about it. This alone fixes defect 1 and, as a side
 *      effect, defect 2: everything not explicitly widened (section 4a)
 *      simply renders inside the measure column, INCLUDING
 *      `.nectar-fancy-ul`, `.nectar-cta`, `.divider`, raw HTML, the
 *      testimonial, icon lists and `[heading]`'s `<h2>` — there is no
 *      allow-list to fall through any more.
 *   2. A CLOSED list of components is widened back out, on purpose:
 *      (a) a `.wpb_row` whose own columns are fractional — tested with
 *          `:has(> .col > .wpb_column:not(.vc_col-sm-12))`. Every row's
 *          only child `.col` is the `span_12` wrapper, so the original
 *          `:has(> .col:not(.span_12))` never matched anything;
 *      (b) `.full-width-section` / `.full-width-content` rows, regardless
 *          of column count — that is their entire purpose;
 *      (c) `.owl-carousel` (the [carousel] track), `.gallery` (WP core)
 *          and `.wpb_gallery` (defensive — no vendored template currently
 *          emits this exact class; kept per the closed list in case one
 *          ever does, at zero cost since it then simply never matches).
 *   3. The breakout itself needs no viewport arithmetic and no transform
 *      hack: `.lc-main` gets `container-type: inline-size` (a query
 *      container), and each widened element sets
 *        --lc-wide: min(calc(var(--lc-container) - 2 * var(--lc-gutter)),
 *                        calc(100cqw - 2 * var(--lc-gutter)));
 *        width: var(--lc-wide);
 *        margin-inline: calc((100% - var(--lc-wide)) / 2);
 *      `100%` here resolves against the element's OWN immediate
 *      containing block (the measure column, or — for a nested inner row
 *      — whatever column it sits in), so explicit (possibly negative)
 *      margins re-centre a wider-than-parent box correctly regardless of
 *      nesting depth. `margin: auto` cannot do this: auto margins on a box
 *      wider than its containing block resolve to 0 and the box simply
 *      overflows one side instead of centring — which is why this uses an
 *      explicit calc() instead.
 *   4. `.wpb_row:has(...)` also matches nested/inner rows (`vc_row_inner`),
 *      because Salient's own vc_row_inner.php/vc_column_inner.php templates
 *      emit the SAME `wpb_row` > `col span_12` > `wpb_column` path as the
 *      outer ones — checked on every rendered doc — so no separate selector
 *      is needed for them.
 *   5. `.alignwide` is deliberately NOT in the wide list any more: the
 *      coordinator's closed list is (a)/(b)/(c) only, and no post in this
 *      corpus relies on Gutenberg's "wide" alignment structurally (9 posts
 *      use blocks, none exclusively) — noted as a scope decision, not an
 *      oversight, in case it needs revisiting.
 *   6. Images: nothing narrows them specially any more — being inside the
 *      now measure-width body caps them at ~44rem by default (fixing
 *      defect 3), and an image inside a widened row (2) simply fills its
 *      column, same as before. Salient's own inline `data-max-width`
 *      percentage rules (section 5, content.css) still apply on top and
 *      win whenever they are smaller. Plain/inline images get a
 *      `--ds-radius-default` corner; the full-bleed article hero
 *      (section 1) is untouched — it lives outside `.lc-article__body`
 *      entirely, in its own `<figure>`.
 *
 * page.php's `.lc-page__content` never gets `.lc-container--measure` at
 * all (spec §6 Page: container width, not measure — pages are WPBakery
 * layouts), so the wide/narrow distinction above is moot there; `.lc-prose`
 * TYPOGRAPHY (section 3) still applies equally to both.
 *
 * Contents:
 *   1. Article wrapper / hero / credit
 *   2. Article head (chips, title, standfirst, meta)
 *   3. .lc-prose typography (shared: article body + page content)
 *   4. Article body width/breakout (article-only)
 *   5. Inline image sizing (article-only)
 *   6. Article foot
 *   7. More stories band
 *   8. Page head / page header banner
 *   9. Lightbox (js/lightbox.js)
 */

/* -------------------------------------------------------------------------
 * 1. Article wrapper / hero / credit
 * ---------------------------------------------------------------------- */

.lc-article {
	display: block;
}

.lc-article__hero {
	position: relative;
	margin: 0;
}

.lc-article__hero-img {
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 70vh;
	object-fit: cover;
	/* Set inline per-post by single.php from `_nectar_page_header_bg_alignment`
	   (top|center|bottom); defaults to a plain centre crop otherwise. */
	object-position: var( --lc-hero-focus, center );
}

@media (min-width: 1024px) {
	.lc-article__hero-img {
		aspect-ratio: 21 / 9;
	}
}

/* No text over the photo (spec §1) — the credit is a caption line below it,
   aligned under the measure column that the title/body use. */
.lc-article__credit {
	display: block;
	max-width: calc(var(--lc-measure) + 2 * var(--lc-gutter));
	margin-inline: auto;
	padding: var(--ds-space-050) var(--lc-gutter) 0;
	color: var(--ds-color-text-subdued);
	text-align: right;
}

/* -------------------------------------------------------------------------
 * 2. Article head
 * ---------------------------------------------------------------------- */

/* Hero → chips is a section gap. Head → body → foot are block gaps, set as
   MARGINS on the body and the foot rather than padding on the head, so they
   collapse with whatever margin the post's first or last element brings and
   the gap stays the same on every post (it varied by 26px with content). */
.lc-article__head {
	padding-top: var(--lc-space-section);
}

/* Chip → title and title → date are both ~14–18px optically (display-2's
   line box adds 6–10px around the caps), so the chip, headline and date
   read as one block, well clear of the body. The date was 35px under the
   title and, on phones, nearly halfway to the body. */
.lc-article__title {
	margin-top: var(--ds-space-050);
	color: var(--ds-color-text-headline);
}

/* Phones step the H1s down to display-3's size (32px), Corduroy's next size
   down. At display-2's 40px a 14-letter caps word did not fit the column
   ("ACCOMMODATIONS" is 385px against 358px at 390), so the page panned
   sideways or the word split. At 32px the widest word in any title is
   308px, inside the 328px column at 360, so titles wrap between whole
   words. Pasted &nbsp;s that weld words together are made ordinary spaces
   in PHP (lc_breakable_title()), since CSS cannot break them. break-word
   is only a safety net for a future word too wide for a line of its own.
   From 768px display-2's larger sizes fit with room to spare. */
@media (max-width: 767px) {
	.lc-article__title,
	.lc-page-header__title {
		font: var(--ds-font-display-3-mobile);
		overflow-wrap: break-word;
	}
}

.lc-article__standfirst {
	margin-top: var(--ds-space-100);
	color: var(--ds-color-text-subdued);
}

.lc-article__meta {
	margin-top: var(--ds-space-075);
}

/* utility-1 (14px), not the cards' utility-2 (12px), which all but
   disappeared under a 64px headline. */
.lc-article__meta .lc-meta {
	font: var(--ds-font-utility-1-default);
}

.lc-article__body {
	margin-top: var(--lc-space-block);
}

/* -------------------------------------------------------------------------
 * 3. .lc-prose typography — shared by the article body and page content.
 *    Look only; width lives in section 4, scoped to the article body.
 * ---------------------------------------------------------------------- */

.lc-prose {
	color: var(--ds-color-text-default);
}

/* Composed body size — spec §1: the one deliberate non-named type style,
   for long-form legibility. Literal per spec; see file header note on
   font-family.
   Weight is Book (400), not Corduroy body's Medium (500): owner feedback
   2026-10-06 — Medium body with Bold emphasis read as "bold on bold" over
   long passages; the previous theme's Book was easier to read. */
.lc-prose p {
	font: var(--ds-core-font-weight-book) var(--ds-core-font-size-117)/var(--ds-core-font-line-height-150) 'Futura PT', futura-pt, sans-serif;
	margin: 0 0 var(--ds-space-150);
}
/* List items otherwise inherit body's Medium and sit heavier than the
   paragraphs around them. */
.lc-prose li {
	font-weight: var(--ds-core-font-weight-book);
}
/* Emphasis one step up at Demi (600) rather than the UA's `bolder` (700).
   The site's futura-pt webfont has no 700 face, so for visitors without
   Futura PT installed, 700 resolved to Extra Bold (800). */
.lc-prose strong,
.lc-prose b {
	font-weight: var(--ds-core-font-weight-demi);
}

.lc-prose h2,
.lc-prose h3,
.lc-prose h4,
.lc-prose h5,
.lc-prose h6 {
	margin-top: var(--ds-space-300);
	margin-bottom: var(--ds-space-100);
	color: var(--ds-color-text-headline);
}
.lc-prose h2 { font: var(--ds-font-title-1-default); }
.lc-prose h3 { font: var(--ds-font-title-2-default); }
.lc-prose h4,
.lc-prose h5,
.lc-prose h6 { font: var(--ds-font-title-3-default); }

.lc-prose > :first-child {
	margin-top: 0;
}

.lc-prose a {
	color: var(--ds-color-text-link-default);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.lc-prose a:hover {
	color: var(--ds-color-text-link-hover);
}
/* Bare URLs and emails as link text have no break opportunity, and Word
   paste glues them to their neighbours with &nbsp; ("Contact⍽reservas@…⍽to"),
   so on phones they ran past the column and the whole page panned. Scoped
   to links, not all prose: beside an alignleft/alignright photo on a phone,
   prose-wide break-word split ordinary words into the narrow strip
   ("generatio|n") instead of letting them drop below the float. */
.lc-prose a {
	overflow-wrap: break-word;
}

/* Pull-quote look. Excludes the testimonial shortcode and third-party
   embed blockquotes (Instagram/Twitter), which are their own components
   with their own appearance — see css/content.css. */
.lc-prose blockquote:not(.nectar_single_testimonial):not(.instagram-media):not(.twitter-tweet) {
	margin: var(--ds-space-200) 0;
	padding-left: var(--ds-space-150);
	border-left: 4px solid var(--ds-color-border-accent);
	font: var(--ds-font-title-1-default);
	color: var(--ds-color-text-headline);
}
.lc-prose blockquote:not(.nectar_single_testimonial):not(.instagram-media):not(.twitter-tweet) p {
	font: inherit;
	margin: 0;
}

/* Call-out: a paragraph the editor indented (inc/content-support/callouts.php
   swaps the inline indent for this class). Editors use it for practical
   details, such as the "Notable Events / Offer / Book / Redeem" lines under
   each resort. A grey panel rather than the pull-quote's gold rule, so it
   reads as reference information, not a quotation. It sits closer to the
   paragraph it belongs to than to the next one (16px above, 32px below). */
.lc-prose .lc-callout {
	margin: calc(-1 * var(--ds-space-050)) 0 var(--ds-space-200);
	padding: var(--ds-space-100) var(--ds-space-150);
	background: var(--ds-color-background-secondary);
	border-radius: var(--ds-radius-default);
	font-size: var(--ds-core-font-size-100); /* one step under the prose size: it is detail */
}
/* #007DB7 on #F4F4F4 is 4.14:1 and fails AA; #006695 is 5.73:1. */
.lc-prose .lc-callout a {
	color: var(--ds-color-text-link-hover);
}
.lc-prose .lc-callout a:hover {
	color: var(--ds-color-text-headline);
}
/* An indented block split across two paragraphs is one panel. */
.lc-prose .lc-callout:has(+ .lc-callout) {
	margin-bottom: 0;
	padding-bottom: 0;
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}
.lc-prose .lc-callout + .lc-callout {
	margin-top: 0;
	padding-top: 0;
	border-start-start-radius: 0;
	border-start-end-radius: 0;
}

.lc-prose ul,
.lc-prose ol {
	margin: 0 0 var(--ds-space-150);
	padding-left: 1.25em;
}
.lc-prose li + li {
	margin-top: var(--ds-space-075);
}

/* The one <pre> in the corpus (page 8445, /full-send/) is a pasted sentence,
   not code; unwrapped it was 807px wide on a phone. Wrap long lines and keep
   authored line breaks. */
.lc-prose pre {
	white-space: pre-wrap;
}

.lc-prose hr {
	margin-block: var(--ds-space-300);
	border: 0;
	border-top: 1px solid var(--ds-color-border-default);
}

.lc-prose table {
	width: 100%;
	margin-block: var(--ds-space-200);
	border-collapse: collapse;
	font: var(--ds-font-body-compact-default);
}
.lc-prose th,
.lc-prose td {
	padding: var(--ds-space-075) var(--ds-space-100);
	border-bottom: 1px solid var(--ds-color-border-default);
	text-align: left;
}
.lc-prose th {
	font: var(--ds-font-body-compact-bold);
	color: var(--ds-color-text-headline);
}

.lc-prose figure {
	margin: var(--ds-space-200) 0;
}
.lc-prose figcaption {
	font: var(--ds-font-utility-2-default);
	color: var(--ds-color-text-subdued);
	margin-top: var(--ds-space-050);
}
.lc-prose img {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * 4. Article body width / breakout — article-only. `.lc-article__body`
 *    itself carries NO override: it is `.lc-container.lc-container--measure`
 *    verbatim, exactly like `.lc-article__head`, so the two share a left
 *    edge automatically. Only the closed list below (a/b/c from the file
 *    header) opts back out to container width.
 * ---------------------------------------------------------------------- */

/* Query container for the `cqw` breakout math below. Scoped to article and
   page views only — chrome.css does not set container-type on .lc-main, so
   this is the only place it happens. `.lc-is-article` is added by
   inc/setup.php's body_class filter for is_singular('post'); `.page` is a
   core WordPress body class for is_page(). */
.lc-is-article .lc-main,
.page .lc-main {
	container-type: inline-size;
}

/* (a) a row with fractional columns (18 posts). Both vc_row templates wrap
       the columns in ONE `.col.span_12` (row_col_wrap_12), so the row's
       only child column is always span_12; the real columns are the
       `.wpb_column.vc_col-sm-N` inside it, with no span class. Testing the
       row's own columns (`> .col >`) rather than any descendant keeps a
       full-width row that merely wraps a 2-up inner row in the measure;
       the inner row matches and widens on its own. Same test as
       content.css §1's grid/block split.
   (b) full-width-section / full-width-content — wide regardless of column
       count; that IS what those two classes mean.
   (c) the carousel track and core/legacy gallery grids. */
.lc-article__body .wpb_row:has(> .col > .wpb_column:not(.vc_col-sm-12)),
.lc-article__body .full-width-section,
.lc-article__body .full-width-content,
.lc-article__body .owl-carousel,
.lc-article__body .gallery,
.lc-article__body .wpb_gallery {
	--lc-wide: min(calc(var(--lc-container) - 2 * var(--lc-gutter)), calc(100cqw - 2 * var(--lc-gutter)));
	width: var(--lc-wide);
	/* `100%` resolves against this element's own immediate containing
	   block (the measure column, or a narrower ancestor column for a
	   nested row), so this correctly re-centres a wider-than-parent box
	   at any nesting depth — margin:auto cannot do this: auto margins on
	   an over-wide box resolve to 0 and it only overflows one side. */
	margin-inline: calc((100% - var(--lc-wide)) / 2);
}

/* -------------------------------------------------------------------------
 * 5. Inline image sizing — article-only. Being inside the (now
 *    measure-width) body already caps a plain image at ~44rem; this only
 *    adds the rounded corner. Images inside a widened row (section 4) are
 *    unaffected — they still fill their column as before. Salient's own
 *    data-max-width percentage rules (content.css) apply on top of this
 *    and win whenever they ask for something smaller.
 * ---------------------------------------------------------------------- */

.lc-article__body img,
.lc-article__body .img-with-animation {
	border-radius: var(--ds-radius-default);
}

/* Inline images: column-width is the ceiling, but a portrait photo at column
   width runs ~1000px tall and fills the viewport (owner feedback, 2026-09-04).
   Cap height as well and let width follow the intrinsic ratio; the cap never
   bites on a 3:2 landscape at 704px (469px tall). Centred when narrower than
   the column. Author-set Salient max_width percentages still apply. */
.lc-article__body img:not(.lc-article__hero-img) {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: min(60vh, 32rem);
	margin-inline: auto;
}
/* Captioned figures shrink-wrap the (now possibly narrower) image so the
   caption sits centred under it instead of spanning the column. WordPress
   writes the full-size width as an inline style on .wp-caption; max-width is
   not set inline, so fit-content wins without !important. */
.lc-article__body .wp-caption,
.lc-article__body figure.wp-block-image {
	max-width: fit-content;
	margin-inline: auto;
}
.lc-article__body .wp-caption-text,
.lc-article__body figcaption {
	text-align: center;
}

/* content.css loads after this file and sets width:100% on captioned images;
   match its specificity+1 so the cap wins there too. */
.lc-article__body .wp-caption img,
.lc-article__body .lc-lightbox__trigger img {
	width: auto;
	max-width: 100%;
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
 * 6. Article foot
 * ---------------------------------------------------------------------- */

/* Body → rule is a block gap (a margin, so it collapses with the post's
   trailing margin — see .lc-article__head). The chips row hangs
   off the rule, and the article ends with a section gap before the band. */
.lc-article__foot {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ds-space-150);
	margin-top: var(--lc-space-block);
	padding-block: var(--ds-space-200) var(--lc-space-section);
}

/* The rule spans the text column only. As a border-top on this
   .lc-container it ran through the gutter padding, one gutter past the
   chips and the body text on each side. */
.lc-article__foot::before {
	content: '';
	position: absolute;
	top: 0;
	inset-inline: var(--lc-gutter);
	border-top: 1px solid var(--ds-color-border-default);
}

/* -------------------------------------------------------------------------
 * 7. More stories band (template-parts/more-stories.php)
 * ---------------------------------------------------------------------- */

.lc-more-stories__heading {
	margin-bottom: var(--ds-space-200);
	color: var(--ds-color-text-headline);
}

/* -------------------------------------------------------------------------
 * 8. Page head / page header banner (page.php, inc/content-support/page-header.php)
 * ---------------------------------------------------------------------- */

/* .lc-page-head itself (padding, title) is defined once, in listing.css.
   Page content sits a section gap below the banner and above the footer,
   or a block gap below a plain .lc-page-head (whose bottom padding is that
   gap). Margins, not padding, so they collapse with the first/last
   WPBakery row's own margin instead of stacking on it. Before, pages had no
   spacing of their own: content started 8px under the banner on phones. */
.lc-page__content {
	margin-block: var(--lc-space-section);
}
.lc-page-head + .lc-page__content {
	margin-top: 0;
}

.lc-page-header {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 20rem;
	overflow: hidden;
}
@media (min-width: 1024px) {
	.lc-page-header {
		min-height: 26rem;
	}
}

.lc-page-header__media {
	position: absolute;
	inset: 0;
	background: var(--ds-color-background-dark);
}
.lc-page-header__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var( --lc-hero-focus, center );
}
.lc-page-header__overlay {
	position: absolute;
	inset: 0;
	background: var(--ds-color-overlay-default);
}

.lc-page-header__inner {
	position: relative;
	padding-block: var(--ds-space-300);
	color: var(--ds-color-text-on-dark);
}
.lc-page-header__title {
	color: var(--ds-color-text-on-dark);
}
.lc-page-header__subtitle {
	margin-top: var(--ds-space-100);
	color: var(--ds-color-text-on-dark);
}

/* -------------------------------------------------------------------------
 * 9. Lightbox (js/lightbox.js — click-to-expand for body images).
 *    One shared <dialog class="lc-lightbox"> per page, built lazily by the
 *    script; the coordinator enqueues js/lightbox.js in inc/enqueue.php.
 * ---------------------------------------------------------------------- */

.lc-lightbox__trigger {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: inherit;
	cursor: zoom-in;
}
.lc-lightbox__trigger img {
	display: block;
	max-width: 100%;
}

.lc-lightbox {
	position: fixed;
	inset: 0;
	margin: auto;
	padding: var(--ds-space-200);
	max-width: 100vw;
	max-height: 100vh;
	width: 100%;
	height: 100%;
	background: transparent;
	color: var(--ds-color-text-on-dark);
	border: 0;
	display: none;
	align-items: center;
	justify-content: center;
}
.lc-lightbox[open] {
	display: flex;
}
.lc-lightbox::backdrop {
	background: var(--ds-color-overlay-dark);
}

.lc-lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ds-space-100);
	max-width: 100%;
	max-height: 100%;
	margin: 0;
}
.lc-lightbox__img {
	display: block;
	max-width: min(100vw - 2rem, 1600px);
	max-height: 90vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--ds-radius-default);
}
.lc-lightbox__caption {
	max-width: min(100vw - 2rem, 1600px);
	text-align: center;
	color: var(--ds-color-text-on-dark);
}
.lc-lightbox__caption[hidden] {
	display: none;
}

.lc-lightbox__close {
	position: fixed;
	top: var(--ds-space-150);
	right: var(--ds-space-150);
	background: var(--ds-color-overlay-default);
	color: var(--ds-color-text-on-dark);
}
.lc-lightbox__close:hover {
	background: var(--ds-color-overlay-dark);
}

/* Body scroll lock while the dialog is open (js/lightbox.js toggles this
   class on <body>). */
body.lc-lightbox-open {
	overflow: hidden;
}

/* Subtle entrance only when motion is not reduced — instant show/hide
   otherwise, which is what happens by simply not applying this block. */
@media (prefers-reduced-motion: no-preference) {
	.lc-lightbox[open] {
		animation: lc-lightbox-in 200ms var(--lc-ease);
	}
	.lc-lightbox::backdrop {
		animation: lc-lightbox-backdrop-in 200ms var(--lc-ease);
	}
}
@keyframes lc-lightbox-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes lc-lightbox-backdrop-in {
	from { opacity: 0; }
	to { opacity: 1; }
}