/**
 * content.css — the WPBakery + Salient + core-WP content layer (spec §7).
 * Written FRESH against Corduroy tokens, not vendored: this covers exactly
 * the classes the vendored vc_templates (vendor/salient/vc_templates/) and
 * the ported shortcodes (inc/content-support/shortcodes.php) emit, plus
 * WordPress core's own content markup. Loads last (see inc/enqueue.php
 * cascade order: tokens → base → chrome → listing → article → content), so
 * it can win narrow, deliberate overrides against article.css purely by
 * selector specificity and source order — no !important anywhere.
 *
 * THE GRID (spec §7): Salient overrode 8 of WPBakery's own core templates
 * (vc_row, vc_column, vc_row_inner, vc_column_inner, …) to emit its own
 * grid classes — `.wpb_row` / `.col.span_N` / `.wpb_column` — rather than
 * WPBakery's stock ones (vendor/salient/vc_templates/, re-registered by
 * inc/content-support/vc-support.php). We do not vendor Salient's grid CSS
 * (percentage widths with ~2% gutters); this re-expresses the same visible
 * result — span_12 = 100%, three span_4s = three columns — with CSS Grid
 * and token gaps. Below 768px every row collapses to a single stacked
 * column exactly as Salient's did.
 *
 * VISIBILITY: img.img-with-animation / .img-with-aniamtion-wrap is never
 * given an invisible or transformed state anywhere in this file — visible
 * is the ONLY state (see inc/content-support/shortcodes.php for why: we no
 * longer vendor or load Salient's CSS/JS, so there is no reveal script to
 * wait for). Same principle for `.not-loaded`/page-header reveal concerns —
 * inc/content-support/page-header.php doesn't emit that markup at all, so
 * there's nothing to force-visible here either. Nothing in this file is
 * gated on `html.js` / `html.no-js` — this theme's <html> carries neither
 * class, so such a rule would silently never match.
 *
 * additional-css.css (555 lines, the old Customizer CSS) was read in full.
 * Exactly ONE rule affects WPBakery content rendering: `.wpb_wrapper >div
 * {margin-bottom:0}` at max-width:640px (ported below, section 3). Every
 * other rule in that file is scoped to `#blog`, `#footer-widgets`,
 * `#dropdown-wrapper`, `.nectar-social`, `#passes`/`#shop-passes` —
 * Salient's native blog-listing/footer-widget chrome, which this theme
 * never renders (archive.php/home.php use the lc-card grid; footer.php is
 * Agent B's own component) — so nothing else applies.
 *
 * Contents:
 *   1. Grid — .row/.wpb_row/.vc_row, .col.span_1-12
 *   2. Row backgrounds — row-bg-wrap/row-bg/row-bg-overlay, full-width-*
 *   3. Column internals — column_container, column-bg-overlay, wpb_wrapper
 *   4. divider, vc_text_separator, vc_zigzag
 *   5. image_with_animation
 *   6. heading / text-with-icon / iwithtext
 *   7. fancy-ul
 *   8. nectar_single_testimonial
 *   9. split_line_heading
 *  10. nectar_cta
 *  11. nectar-button ([button])
 *  12. nectar-icon-list / nectar-icon-list-item
 *  13. nectar-fancy-box ([fancy_box])
 *  14. owl-carousel / carousel-item ([carousel]/[item])
 *  14b. vc_gallery — nectar slider, flickity, image grid, parallax grid
 *  15. Core WP — captions, alignment, galleries, blocks
 *  16. Third-party embeds — Instagram/Twitter/Spotify
 */

/* -------------------------------------------------------------------------
 * 1. Grid
 * ---------------------------------------------------------------------- */

.wpb_row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--ds-space-150);
	row-gap: var(--ds-space-150);
	margin-block: var(--ds-space-200);
}
@media (min-width: 1024px) {
	.wpb_row {
		column-gap: var(--ds-space-200);
		row-gap: var(--ds-space-200);
	}
}

/* js_composer.min.css clearfixes rows (`.vc_row::before, .vc_row::after
   { content: " "; display: table }`, same for .vc_row-fluid). In a grid
   container those pseudo-elements become grid items: two empty tracks plus
   two row-gaps added 32–48px above and below every row's content from 768px
   up (not on phones, where rows are block). That made the article head →
   body gap 88px at desktop vs 40px on phones, and rows ~96px apart. On a
   block row (below) the table-display pseudo also stopped margins collapsing.
   The row's clearfix has nothing to do: fractional columns float inside the
   span_12 wrapper, which as a grid item contains them, and full-width
   columns clear their own floats (.wpb_wrapper::after, below).
   (0,2,1) beats js_composer's (0,1,1), which loads after this file. */
.lc-main .wpb_row::before,
.lc-main .wpb_row::after {
	content: none;
}

.wpb_row > .col {
	position: relative;
	min-width: 0; /* let grid items shrink below their content's intrinsic width */
}

.col.span_1  { grid-column: span 1; }
.col.span_2  { grid-column: span 2; }
.col.span_3  { grid-column: span 3; }
.col.span_4  { grid-column: span 4; }
.col.span_5  { grid-column: span 5; }
.col.span_6  { grid-column: span 6; }
.col.span_7  { grid-column: span 7; }
.col.span_8  { grid-column: span 8; }
.col.span_9  { grid-column: span 9; }
.col.span_10 { grid-column: span 10; }
.col.span_11 { grid-column: span 11; }
.col.span_12 { grid-column: span 12; }

/* Below 768px every row stacks to a single column, matching Salient's own
   mobile behaviour ("Mobile <768: all cols 100%", spec §7) — reverting to
   normal block flow makes every .col's span class moot with no override
   needed on the columns themselves. */
@media (max-width: 767px) {
	.wpb_row {
		display: block;
	}
	.wpb_row > .col {
		margin-bottom: var(--ds-space-150);
	}
	.wpb_row > .col:last-child {
		margin-bottom: 0;
	}
}

/* From 768px, a row whose columns are all full width lays out exactly as it
   does on phones: block, with the column unfloated. Every row's only grid
   item is its span_12 wrapper, and js_composer floats even a 100%-wide
   .vc_col-sm-12. Both stop margins collapsing, so a margin at the top or
   bottom of a column ADDED to the row's instead of merging with it, on
   desktop only. A post opening with a heading started 48px lower than on
   phones, and trailing empty <p>s pushed the foot rule down by 24–32px.
   Rows with fractional columns (18 posts, 1 page) keep the grid and floats.
   No horizontal change: verified on 11 posts at 1024/1440, including the
   alignleft and multi-column ones.
   "Columns" means the row's OWN columns (`> .col > .wpb_column`, the path
   both vc_row templates emit), not any descendant: a full-width row that
   wraps a 2-up inner row is itself full width (3 posts). Same test as the
   article breakout (article.css §4), so a row is multi-column in both
   files or in neither. */
@media (min-width: 768px) {
	.wpb_row:not(:has(> .col > .wpb_column:not(.vc_col-sm-12))) {
		display: block;
	}
	.wpb_row .wpb_column.vc_col-sm-12 {
		float: none;
	}
}

/* With the column no longer a float, it no longer contains floats of its
   own (alignleft/alignright images, 8 docs). Clear them at the column's
   end. An empty clearing block only adds space when there is a float to
   clear, so margins still collapse through it everywhere else. */
.vc_column-inner > .wpb_wrapper::after {
	content: '';
	display: block;
	clear: both;
}

/* Fractional column widths. The rows above keep "grid and floats" for
   fractional columns, but the floats and widths themselves came from
   js_composer.min.css: Salient's columns carry WPBakery's `vc_col-sm-N`,
   never `span_N` (that is only the row's span_12 wrapper). The
   Salient-bundled WPBakery 9.x ships a hand-trimmed js_composer.min.css
   (40KB, down from 5.7's 139KB) with none of these rules, because current
   Salient styles columns itself. Without them every 2/3/4-up row stacked
   at full width (19 posts; a pair of portrait videos doubled one post's
   height). These are 5.7's Salient-build values verbatim (2.1% gutter,
   1000px breakpoint), so layout is identical on either WPBakery version;
   under 5.7 they duplicate its own rules. Full-width columns are left to
   the 768px rule above, which unfloats them. */
.wpb_column[class*='vc_col-'] {
	position: relative;
	min-height: 1px;
	margin-left: 2.1%;
	box-sizing: border-box;
}
.vc_row-fluid [class*='vc_col-']:first-child:not([class*='offset']) {
	margin-left: 0;
}
@media (min-width: 1000px) {
	.vc_row-fluid .wpb_column[class*='vc_col-sm-']:not(.vc_col-sm-12) {
		float: left;
	}
	.vc_row-fluid .vc_col-sm-1  { width: 6.382978723%; }
	.vc_row-fluid .vc_col-sm-2  { width: 14.89361702%; }
	.vc_row-fluid .vc_col-sm-3  { width: 23.404255317%; }
	.vc_row-fluid .vc_col-sm-4  { width: 31.914893614%; }
	.vc_row-fluid .vc_col-sm-5  { width: 40.425531911%; }
	.vc_row-fluid .vc_col-sm-6  { width: 48.936170208%; }
	.vc_row-fluid .vc_col-sm-7  { width: 57.446808505%; }
	.vc_row-fluid .vc_col-sm-8  { width: 65.957446802%; }
	.vc_row-fluid .vc_col-sm-9  { width: 74.468085099%; }
	.vc_row-fluid .vc_col-sm-10 { width: 82.978723396%; }
	.vc_row-fluid .vc_col-sm-11 { width: 91.489361693%; }
	.vc_row-fluid .vc_col-sm-12 { width: 100%; }
}

/* -------------------------------------------------------------------------
 * 2. Row backgrounds
 *
 * DELIBERATE SIMPLIFICATION: Salient's `.full-width-section` bled its
 * BACKGROUND to the viewport edge while keeping content container-width;
 * `.full-width-content` bled both. Here both cap at `--lc-container`
 * instead of true 100vw edge-to-edge bleed — the WIDTH side of that (which
 * rows get widened at all, and by how much) is a closed, explicit opt-in
 * list in css/article.css section 4 (multi-column rows, full-width-section/
 * content, carousel/gallery), using a `container-type: inline-size` query
 * container plus `cqw` units rather than viewport-relative `100vw`/
 * transform arithmetic — see that file's header for the full reasoning.
 * `.lc-article__body` itself is measure-width by default now (narrow-by-
 * default, wide-by-exception), so an ordinary single-column row is simply
 * never widened at all. This file only owns the background-layer plumbing
 * below, which is unconditional — it applies at whatever width the row
 * ends up rendered.
 * ---------------------------------------------------------------------- */

.row-bg-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}
.row-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.row-bg-overlay {
	position: absolute;
	inset: 0;
}

/* -------------------------------------------------------------------------
 * 3. Column internals
 * ---------------------------------------------------------------------- */

.column_container {
	position: relative;
}
.column-bg-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.wpb_wrapper {
	position: relative;
	z-index: 1;
}

.wpb_wrapper > *:last-child {
	margin-bottom: 0;
}


/* additional-css.css, ported: on small screens a direct <div> child of
   wpb_wrapper (a divider, an image wrap, a CTA) doubled up its own bottom
   margin with the next row's top margin. Kept at the original 640px
   breakpoint rather than our 768px token breakpoint, since that is the
   value the rule shipped with and re-tuning it changes behaviour the
   Customizer CSS never asked for. */
@media (max-width: 640px) {
	.wpb_wrapper > div {
		margin-bottom: 0;
	}
}

/* WPBakery content elements (text columns, single images…) are separated by
   one paragraph gap at every width. js_composer.min.css sets 35px but loads
   after this file, and the 640px rule above zeroed it on phones, where
   consecutive text blocks ran together with 0px between them. (0,3,0) beats
   both; the last element is left to the row's own margin. */
.lc-prose .wpb_content_element:not(:last-child) {
	margin-bottom: var(--ds-space-150);
}

/* -------------------------------------------------------------------------
 * 4. divider ([divider] — 147 docs, 987 uses)
 * ---------------------------------------------------------------------- */

.divider-wrap[data-alignment='center'] {
	text-align: center;
}
.divider-wrap[data-alignment='right'] {
	text-align: right;
}

.divider {
	height: 20px; /* pure spacer — matches Salient's own default */
}
.divider-border {
	margin: var(--ds-space-200) auto;
	height: 1px;
	background: var(--ds-color-border-default);
}
.divider-small-border {
	display: inline-block;
	margin: var(--ds-space-150) 0;
	width: 20%;
	height: 1px;
	background: var(--ds-color-border-default);
}
.divider-wrap[data-alignment='center'] .divider-small-border {
	margin-inline: auto;
}

/* WPBakery's own text separator ([vc_text_separator], 4 posts) and zigzag
   ([vc_zigzag], 1 post): a heading between two rules. Same story as the
   fractional columns in section 1: js_composer 5.7 styled these and the
   trimmed 9.x stylesheet does not, which left a bare heading and two empty
   spans. 5.7's rules, with the line in the divider colour above rather than
   WPBakery's #EBEBEB so both separators match. Specificity (0,1,1) ties
   `.lc-prose h4` and wins on order, as js_composer's did. */
.vc_separator {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}
.vc_separator h4 {
	flex: 0 1 auto;
	margin: 0;
	font-size: 100%;
	line-height: 1em;
	overflow-wrap: break-word;
}
.vc_separator .vc_sep_holder {
	position: relative;
	flex: 1 1 auto;
	min-width: 10%;
	height: 1px;
}
.vc_separator .vc_sep_holder .vc_sep_line {
	position: relative;
	top: 1px;
	display: block;
	width: 100%;
	height: 1px;
	border-top: 1px solid var(--ds-color-border-default);
}
.vc_separator.vc_sep_border_width_2 .vc_sep_holder .vc_sep_line {
	border-top-width: 2px;
}
.vc_separator.vc_separator_align_left .vc_sep_holder_l,
.vc_separator.vc_separator_align_right .vc_sep_holder_r {
	display: none;
}
.vc_separator.vc_separator_align_center h4 {
	padding: 0 0.8em;
}
.vc_separator.vc_separator_align_left h4 {
	padding: 0 0.8em 0 0;
}
.vc_separator.vc_separator_align_right h4 {
	padding: 0 0 0 0.8em;
}
.vc_sep_pos_align_left {
	margin-right: auto;
	margin-left: 0;
}
.vc_sep_pos_align_center {
	margin-inline: auto;
}
.vc_sep_pos_align_right {
	margin-right: 0;
	margin-left: auto;
}
.vc-zigzag-wrapper {
	text-align: center;
}
.vc-zigzag-wrapper.vc-zigzag-align-left {
	text-align: left;
}
.vc-zigzag-wrapper.vc-zigzag-align-right {
	text-align: right;
}
.vc-zigzag-inner {
	display: inline-block;
}

/* -------------------------------------------------------------------------
 * 5. image_with_animation ([image_with_animation] — 77 docs, 286 uses)
 * ---------------------------------------------------------------------- */

.img-with-aniamtion-wrap {
	line-height: 0;
	margin-block: 0;
}
.img-with-aniamtion-wrap.center {
	text-align: center;
}
.img-with-aniamtion-wrap.right {
	text-align: right;
}
.img-with-aniamtion-wrap.right img {
	display: inline-block;
}

/* Always visible — see file header. No opacity/transform of any kind. */
img.img-with-animation {
	display: inline-block;
	max-width: 100%;
	height: auto;
	opacity: 1;
}

/* border_radius attribute — a fixed set of author-chosen px values from
   Salient's own control, not a decorative constant, so (like the inline
   `style` attributes the shortcode itself already emits for margins) these
   stay literal rather than mapped to a --ds-radius-* token; none of
   Corduroy's four radii (0/4/10/24px) matches Salient's picker steps. */
.img-with-aniamtion-wrap[data-border-radius='3px']  .img-with-animation { border-radius: 3px; }
.img-with-aniamtion-wrap[data-border-radius='5px']  .img-with-animation { border-radius: 5px; }
.img-with-aniamtion-wrap[data-border-radius='10px'] .img-with-animation { border-radius: 10px; }
.img-with-aniamtion-wrap[data-border-radius='15px'] .img-with-animation { border-radius: 15px; }
.img-with-aniamtion-wrap[data-border-radius='20px'] .img-with-animation { border-radius: 20px; }

/* max_width attribute — same reasoning: author-chosen content data. */
.img-with-aniamtion-wrap[data-max-width='90%'] img { max-width: 90%; }
.img-with-aniamtion-wrap[data-max-width='80%'] img { max-width: 80%; }
.img-with-aniamtion-wrap[data-max-width='75%'] img { max-width: 75%; }
.img-with-aniamtion-wrap[data-max-width='70%'] img { max-width: 70%; }
.img-with-aniamtion-wrap[data-max-width='60%'] img { max-width: 60%; }
.img-with-aniamtion-wrap[data-max-width='50%'] img { max-width: 50%; }
.img-with-aniamtion-wrap[data-max-width='40%'] img { max-width: 40%; }
.img-with-aniamtion-wrap[data-max-width='30%'] img { max-width: 30%; }
.img-with-aniamtion-wrap[data-max-width='25%'] img { max-width: 25%; }

/* -------------------------------------------------------------------------
 * 6. heading ([heading] — 13 docs) / text-with-icon ([text-with-icon] —
 *    11 docs) / iwithtext (its wrapper markup)
 * ---------------------------------------------------------------------- */

.section-title {
	text-align: center;
	padding-bottom: var(--ds-space-200);
	margin-bottom: var(--ds-space-200);
	border-bottom: 1px solid var(--ds-color-border-default);
}
.section-title h2 {
	margin: 0 0 var(--ds-space-050);
	font: var(--ds-font-title-1-default);
	color: var(--ds-color-text-headline);
}
.section-title p {
	margin: 0;
	color: var(--ds-color-text-subdued);
}

.iwithtext {
	position: relative;
	padding-left: 3rem;
	margin-bottom: var(--ds-space-150);
}
.iwithtext .iwt-icon {
	position: absolute;
	left: 0;
	top: 0;
	width: 2rem;
}
.iwithtext .iwt-icon img {
	width: 2rem;
	height: auto;
}
.iwithtext .iwt-text > *:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * 7. fancy-ul ([fancy-ul] — 7 docs, the "Tips Up" series). The list-item
 *    wrapper (`<i class="icon-default-style ...">`) is injected server-side
 *    by lc_sc_fancy_list() in shortcodes.php, but it is otherwise EMPTY —
 *    Salient drew the "+" from its own icon font (`icon-plus`'s glyph),
 *    which we correctly never vendored (no icon font is loaded anywhere in
 *    this theme). Left as-is it rendered as an invisible box. Drawn here
 *    with a plain CSS ::before instead, so it needs no font file at all.
 * ---------------------------------------------------------------------- */

.nectar-fancy-ul {
	margin-block: var(--ds-space-200);
}

.nectar-fancy-ul ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.nectar-fancy-ul ul li {
	display: flex;
	align-items: flex-start; /* icon aligns to the first text line, not a multi-line block */
}
.nectar-fancy-ul ul li + li {
	margin-top: var(--ds-space-075);
}
/* The <li> is a flex row, so the link beside the icon is a flex item, and a
   flex item never shrinks below its longest unbreakable string: the Tips Up
   lists are bare URLs as link text, and instagram.com/MammothMountain/ was
   320px against a 328px column at 360, pushing the page 4px wide. Let it
   shrink so the prose-link overflow-wrap (article.css §3) can break it.
   The icon is flex-shrink: 0, so it keeps its size. */
.nectar-fancy-ul ul li > * {
	min-width: 0;
}
.nectar-fancy-ul[data-alignment='center'] ul li {
	justify-content: center;
}
.nectar-fancy-ul[data-alignment='right'] ul li {
	justify-content: flex-end;
}

.nectar-fancy-ul li > i.icon-default-style {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	margin-inline-end: var(--ds-space-050);
	background: var(--ds-color-background-accent);
	color: var(--ds-color-text-button-accent);
	border-radius: var(--ds-radius-circle);
	font-style: normal;
	line-height: 1;
}
.nectar-fancy-ul li > i.icon-default-style::before {
	content: '+';
	font: var(--ds-font-body-bold);
	line-height: 1;
}

/* -------------------------------------------------------------------------
 * 8. nectar_single_testimonial ([nectar_single_testimonial] — 8 docs, the
 *    "My Ikon" profile series). Simplified to one consistent card look
 *    rather than Salient's several `data-style` layout variants — this file
 *    is a fresh reimplementation, not a vendor of Salient's CSS.
 * ---------------------------------------------------------------------- */

.nectar_single_testimonial {
	position: relative;
	margin-block: var(--ds-space-200);
	padding: var(--ds-space-200);
	background: var(--ds-color-background-secondary);
	border-radius: var(--ds-radius-emphasis);
}
.nectar_single_testimonial .inner > *:last-child {
	margin-bottom: 0;
}
.nectar_single_testimonial p {
	margin: 0 0 var(--ds-space-150);
	font: var(--ds-font-subtitle-default);
	color: var(--ds-color-text-headline);
}
.nectar_single_testimonial .open-quote {
	display: none; /* decorative glyph only; the card styling carries the quote */
}
.nectar_single_testimonial .image-icon {
	width: 4rem;
	height: 4rem;
	margin-bottom: var(--ds-space-100);
	background-size: cover;
	background-position: center;
	border-radius: var(--ds-radius-circle);
}
/* The shortcode always emits the attribution wrap — `<span class="wrap">
   <span>NAME</span><span class="title">SUBTITLE</span></span>` — even when
   both are empty, as in most of the My Ikon series. That empty wrap was the
   .inner's last child, so the quote kept its 24px bottom margin and the card
   sat 56px deep at the bottom against 32px at the top. The quote now ends
   flush, the wrap carries its own gap, and an empty wrap is not rendered. */
.nectar_single_testimonial .inner > p:last-of-type {
	margin-bottom: 0;
}
.nectar_single_testimonial .wrap {
	display: block;
	margin-top: var(--ds-space-150);
	font: var(--ds-font-body-bold);
	color: var(--ds-color-text-headline);
}
.nectar_single_testimonial .wrap:not(:has(> :not(:empty))) {
	display: none;
}
/* With a portrait (2 quotes, /ikon-pass-spotify-channel/) the order is
   quote → .image-icon → .wrap; keep the old 24px / 16px rhythm there. */
.nectar_single_testimonial .inner > p + .image-icon {
	margin-top: var(--ds-space-150);
}
.nectar_single_testimonial .image-icon + .wrap {
	margin-top: 0;
}
.nectar_single_testimonial .wrap .title {
	display: block;
	margin-top: var(--ds-space-025);
	font: var(--ds-font-utility-2-default);
	color: var(--ds-color-text-subdued);
}

/* -------------------------------------------------------------------------
 * 9. split_line_heading ([split_line_heading] — 3 docs). No scroll-reveal
 *    (spec §1: no scroll-reveal animation anywhere) — each line is simply
 *    stacked and always visible.
 * ---------------------------------------------------------------------- */

.nectar-split-heading {
	margin-block: var(--ds-space-200);
}
.nectar-split-heading .heading-line {
	display: block;
}
.nectar-split-heading .heading-line > div {
	display: block;
	font: var(--ds-font-title-1-default);
	color: var(--ds-color-text-headline);
}
.nectar-split-heading h1 {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * 10. nectar_cta ([nectar_cta] — 4 docs)
 * ---------------------------------------------------------------------- */

.nectar-cta {
	margin-block: var(--ds-space-200);
}
.nectar-cta[data-alignment='center'] { text-align: center; }
.nectar-cta[data-alignment='right']  { text-align: right; }

.nectar-cta h1, .nectar-cta h2, .nectar-cta h3,
.nectar-cta h4, .nectar-cta h5, .nectar-cta h6,
.nectar-cta > div, .nectar-cta > p, .nectar-cta > span {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ds-space-150);
	margin: 0;
	font: var(--ds-font-title-2-default);
	color: var(--ds-color-text-headline);
}
.nectar-cta[data-alignment='center'] * { justify-content: center; }
.nectar-cta[data-alignment='right']  * { justify-content: flex-end; }

.nectar-cta .text {
	margin: 0;
}
.nectar-cta .link_wrap {
	display: inline-flex;
}
.nectar-cta .link_text {
	display: inline-flex;
	align-items: center;
	gap: var(--ds-space-050);
	padding-bottom: 2px;
	border-bottom: 2px solid var(--ds-color-border-accent);
	font: var(--ds-font-button-2);
	color: var(--ds-color-text-link-default);
	text-decoration: none;
}
.nectar-cta .link_text:hover {
	color: var(--ds-color-text-link-hover);
}
/* The old font-icon chevron/circle is not reproduced (no icon font is
   loaded); the underline alone communicates the link affordance. */
.nectar-cta .arrow,
.nectar-cta .circle {
	display: none;
}

/* -------------------------------------------------------------------------
 * 11. nectar-button ([button] — post 7760 only, a single "Buy Now" CTA)
 * ---------------------------------------------------------------------- */

.nectar-button {
	display: inline-flex;
	align-items: center;
	gap: var(--ds-space-050);
	margin-block: var(--ds-space-100);
	padding: var(--ds-space-100) var(--ds-space-150);
	background: var(--ds-color-background-button-default);
	color: var(--ds-color-text-button-default);
	border-radius: var(--ds-radius-button-default);
	font: var(--ds-font-button-1);
	text-decoration: none;
}
.nectar-button:hover {
	background: var(--ds-color-background-button-hover);
	color: var(--ds-color-text-button-default);
}
.nectar-button.small {
	padding: var(--ds-space-050) var(--ds-space-100);
	font: var(--ds-font-button-2);
}

/* -------------------------------------------------------------------------
 * 12. nectar-icon-list / nectar-icon-list-item ([nectar_icon_list] /
 *     [nectar_icon_list_item] — post 8290 only)
 * ---------------------------------------------------------------------- */

.nectar-icon-list {
	margin-block: var(--ds-space-200);
}
.nectar-icon-list-item {
	position: relative;
	padding-left: 3.5rem;
	margin-bottom: var(--ds-space-200);
}
.nectar-icon-list-item:last-child {
	margin-bottom: 0;
}
.nectar-icon-list-item .list-icon-holder {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background: var(--ds-color-background-secondary);
	border-radius: var(--ds-radius-circle);
	font: var(--ds-font-title-3-uppercase);
	color: var(--ds-color-text-default);
}
.nectar-icon-list-item .content h4 {
	margin: 0 0 var(--ds-space-050);
	font: var(--ds-font-title-3-default);
	color: var(--ds-color-text-headline);
}
.nectar-icon-list-item .content {
	color: var(--ds-color-text-subdued);
}
.nectar-icon-list-item .content > *:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * 13. nectar-fancy-box ([fancy_box] — post 8140 only). Simplified port
 *     (default branch only, no parallax) per shortcodes.php's own note.
 * ---------------------------------------------------------------------- */

.nectar-fancy-box {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 16rem;
	margin-block: var(--ds-space-200);
	overflow: hidden;
	border-radius: var(--ds-radius-emphasis);
}
.nectar-fancy-box .box-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.nectar-fancy-box .box-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--ds-color-overlay-default);
}
.nectar-fancy-box .inner {
	position: relative;
	z-index: 1;
	padding: var(--ds-space-200);
	color: var(--ds-color-text-on-dark);
}
.nectar-fancy-box .inner > *:last-child {
	margin-bottom: 0;
}
.nectar-fancy-box .fancy-box-link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* -------------------------------------------------------------------------
 * 14. owl-carousel / carousel-item ([carousel]/[item] — page 7031
 *     road-icons only, 16 carousels / 53 items). Scroll-snap replaces
 *     owl-carousel; js/carousel.js adds prev/next controls and refines the
 *     column count per-breakpoint from the shortcode's own data attributes.
 *     These defaults (3/2/1, spec §7 + CLAUDE.md "Carousel") are what
 *     render before JS runs and what remain if JS is disabled entirely —
 *     the CSS-only scroll-snap strip is independently usable by swipe,
 *     trackpad and keyboard with no JS at all.
 * ---------------------------------------------------------------------- */

.owl-carousel {
	--lc-carousel-cols: 3;
	--lc-carousel-gap: var(--ds-space-100);
	display: flex;
	gap: var(--lc-carousel-gap);
	margin: 0 0 var(--ds-space-200);
	padding: 0 0 var(--ds-space-100);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--lc-carousel-gap);
}
@media (max-width: 1024px) {
	.owl-carousel { --lc-carousel-cols: 2; }
}
@media (max-width: 768px) {
	.owl-carousel { --lc-carousel-cols: 1; }
}

.owl-carousel > .carousel-item {
	flex: 0 0 calc((100% - (var(--lc-carousel-cols) - 1) * var(--lc-carousel-gap)) / var(--lc-carousel-cols));
	min-width: 0;
	scroll-snap-align: start;
}
.owl-carousel > .carousel-item img {
	width: 100%;
	height: auto;
}

.lc-carousel-nav {
	display: flex;
	justify-content: flex-end;
	gap: var(--ds-space-050);
	margin-bottom: var(--ds-space-100);
}
.lc-carousel-nav[hidden] {
	display: none;
}
.lc-carousel-prev,
.lc-carousel-next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--ds-color-background-secondary);
	color: var(--ds-color-text-default);
	border: 0;
	border-radius: var(--ds-radius-circle);
	cursor: pointer;
	transition: background-color var(--lc-speed) var(--lc-ease);
}
.lc-carousel-prev:hover,
.lc-carousel-next:hover {
	background: var(--ds-color-background-input-hover);
}
.lc-carousel-prev:disabled,
.lc-carousel-next:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Width/breakout for .owl-carousel itself lives in css/article.css's
   closed opt-in list (section 4) alongside the other wide exceptions, not
   here — this file only owns the track/item mechanics. */

/* -------------------------------------------------------------------------
 * 14b. vc_gallery ([vc_gallery] — 36 docs). Salient laid out every gallery
 *     type in JavaScript (Swiper, Flickity, isotope), none of which this
 *     theme loads. Without this section the sliders collapsed into 24px
 *     strips inside an empty 700px box, and the grids stacked one image per
 *     row. Markup is the vendored vc_templates/vc_gallery.php, unmodified.
 *       nectarslider_style    7 docs  scroll-snap slider, one per view
 *       flickity_style        4 docs  scroll-snap slider, data-*-columns
 *       image_grid           24 docs  CSS grid from data-col-num
 *       parallax_image_grid   1 doc   CSS grid
 *     js/carousel.js adds prev/next buttons to both sliders, as it does
 *     for .owl-carousel; without JS they still scroll by swipe/trackpad.
 *     Width comes from the .wpb_gallery breakout in css/article.css.
 * ---------------------------------------------------------------------- */

/* Both slider tracks are the same scroll-snap strip as .owl-carousel, and
   js/carousel.js sets --lc-carousel-cols on them the same way. */
.nectar-slider-wrap .swiper-wrapper,
.nectar-flickity .flickity-slider {
	--lc-carousel-cols: 1;
	--lc-carousel-gap: var(--ds-space-100);
	display: flex;
	gap: var(--lc-carousel-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
}

.nectar-slider-wrap .swiper-slide,
.nectar-flickity .flickity-slider > .cell {
	flex: 0 0 calc((100% - (var(--lc-carousel-cols) - 1) * var(--lc-carousel-gap)) / var(--lc-carousel-cols));
	min-width: 0;
	scroll-snap-align: start;
}

/* nectarslider_style: each slide is a background image on .image-bg, sized
   by Salient's script. Salient writes the box height inline (700 or
   1000px) on .nectar-slider-wrap and .swiper-container; max-height beats an
   inline height without !important, and caps the box at 3:2 of the
   gallery's own width, so a phone gets a 358×239 slide, not a 358×700
   sliver. The authored height still applies wherever it is smaller. */
.wpb_gallery_slidesnectarslider_style {
	container-type: inline-size;
}
.nectar-slider-wrap,
.nectar-slider-wrap .swiper-container {
	max-height: calc(100cqw * 2 / 3);
}
.nectar-slider-wrap {
	position: relative;
	overflow: hidden;
	border-radius: var(--ds-radius-default);
	background: var(--ds-color-background-secondary);
}
.nectar-slider-wrap .swiper-wrapper {
	height: 100%;
	/* A scrollbar would sit over the bottom of the photo inside this fixed
	   box; the prev/next buttons and swipe cover navigation. */
	scrollbar-width: none;
}
.nectar-slider-wrap .swiper-wrapper::-webkit-scrollbar {
	display: none;
}
.nectar-slider-wrap .swiper-slide {
	position: relative;
}
.nectar-slider-wrap .image-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	font-size: 0; /* the template puts an &nbsp; inside */
}
.nectar-slider-wrap .swiper-slide[data-bg-alignment='top'] .image-bg {
	background-position: center top;
}
.nectar-slider-wrap .swiper-slide[data-bg-alignment='bottom'] .image-bg {
	background-position: center bottom;
}

/* Salient's own controls and chrome: icon-font arrows inside href=""
   links (a click reloaded the page; their slide counters rendered as stray
   "1"s), bullets, a loading spinner, and a whole-slide link to the raw
   image file, which is empty to assistive tech. js/carousel.js supplies
   the controls. */
.nectar-slider-wrap .slider-prev,
.nectar-slider-wrap .slider-next,
.nectar-slider-wrap .slider-pagination-wrap,
.nectar-slider-wrap .nectar-slider-loading,
.nectar-slider-wrap .entire-slide-link,
.nectar-slider-wrap .ie-fix {
	display: none;
}

/* flickity_style: cells hold real <img>s (wrapped by js/lightbox.js), so
   they keep the article's image sizing and centre in their cell. Room
   under the track for its scrollbar, as on .owl-carousel. */
.nectar-flickity .flickity-slider {
	align-items: center;
	padding-bottom: var(--ds-space-100);
}

/* image_grid: data-col-num is cols-2/3/4, or "elastic" for the fullwidth
   layout. Grid columns come from that rather than the items' span_N
   classes, because elastic items carry no span class. Phones stack. */
.wpb_gallery .portfolio-items {
	--lc-gallery-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--lc-gallery-cols), minmax(0, 1fr));
	gap: var(--ds-space-100);
	align-items: start;
}
.wpb_gallery .portfolio-items[data-col-num='cols-2'] {
	--lc-gallery-cols: 2;
}
.wpb_gallery .portfolio-items[data-col-num='cols-4'],
.wpb_gallery .portfolio-items[data-col-num='elastic'] {
	--lc-gallery-cols: 4;
}
/* (0,3,0) beats section 1's .col.span_N grid placement. */
.wpb_gallery .portfolio-items > .col {
	grid-column: auto;
	min-width: 0;
}
@media (max-width: 767px) {
	/* [data-col-num] matches the (0,3,0) column rules above, and wins by order. */
	.wpb_gallery .portfolio-items[data-col-num] {
		--lc-gallery-cols: 1;
	}
}

/* parallax_image_grid: real <img>s in a flat list of items. */
.wpb_gallery_slidesparallax_image_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--ds-space-100);
	align-items: start;
}

/* -------------------------------------------------------------------------
 * 15. Core WP — captions, float alignment, galleries, block-editor content
 * ---------------------------------------------------------------------- */

.wp-caption {
	max-width: 100%;
	margin-block: var(--ds-space-200);
}
.wp-caption img {
	display: block;
	width: 100%;
	height: auto;
}
.wp-caption-text {
	padding-top: var(--ds-space-050);
	font: var(--ds-font-utility-2-default);
	color: var(--ds-color-text-subdued);
}

.alignleft {
	float: left;
	margin: var(--ds-space-050) var(--ds-space-200) var(--ds-space-100) 0;
}
.alignright {
	float: right;
	margin: var(--ds-space-050) 0 var(--ds-space-100) var(--ds-space-200);
}
.aligncenter {
	display: block;
	margin-inline: auto;
}

/* WP core [gallery] shortcode (47 docs, shared with `caption`/`embed`) */
.gallery {
	display: grid;
	grid-template-columns: repeat(var(--lc-gallery-cols, 3), 1fr);
	gap: var(--ds-space-100);
	margin-block: var(--ds-space-200);
}
.gallery-columns-1 { --lc-gallery-cols: 1; }
.gallery-columns-2 { --lc-gallery-cols: 2; }
.gallery-columns-3 { --lc-gallery-cols: 3; }
.gallery-columns-4 { --lc-gallery-cols: 4; }
.gallery-columns-5 { --lc-gallery-cols: 5; }
.gallery-columns-6 { --lc-gallery-cols: 6; }
@media (max-width: 767px) {
	.gallery { --lc-gallery-cols: 2; }
}
.gallery-item {
	margin: 0;
}
.gallery-item img {
	width: 100%;
	height: auto;
}
.gallery-caption {
	font: var(--ds-font-utility-2-default);
	color: var(--ds-color-text-subdued);
}

/* Block-editor content — 9 posts use it, none exclusively (CLAUDE.md). */
.wp-block-image {
	margin-block: var(--ds-space-200);
}
.wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ds-space-100);
	margin-block: var(--ds-space-200);
	padding: 0;
	list-style: none;
}
@media (max-width: 767px) {
	.wp-block-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}
.blocks-gallery-item {
	margin: 0;
}
.blocks-gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Deliberately NOT in css/article.css's wide-breakout opt-in list (that
   closed list is .wpb_row-with->1-column / full-width-* / .owl-carousel /
   .gallery / .wpb_gallery only) — a Gutenberg gallery therefore now renders
   at the same measure width as everything else by default. No post in this
   corpus relies on it being wider; revisit by adding it to that list if one
   ever does. */

.wp-block-embed {
	margin-block: var(--ds-space-200);
}
.wp-block-embed__wrapper {
	position: relative;
}

.wp-block-quote {
	margin-block: var(--ds-space-200);
	padding-left: var(--ds-space-150);
	border-left: 4px solid var(--ds-color-border-accent);
}
.wp-block-quote cite {
	display: block;
	margin-top: var(--ds-space-075);
	font: var(--ds-font-utility-2-default);
	font-style: normal;
	color: var(--ds-color-text-subdued);
}

/* -------------------------------------------------------------------------
 * 16. Third-party embeds (inc/content-support/embeds.php wraps iframe
 *     embeds in .lc-embed; base.css defines .lc-embed / .lc-embed--spotify
 *     at 152px). Instagram/Twitter return a <blockquote>, not an iframe —
 *     deliberately left unwrapped per spec §7, centred here instead.
 * ---------------------------------------------------------------------- */

.lc-embed--spotify-tall {
	aspect-ratio: unset;
	height: 352px; /* playlist/album/show — a taller native tracklist view */
}

blockquote.instagram-media,
blockquote.twitter-tweet {
	max-width: 540px;
	margin-inline: auto;
}