/* =============================================================
   Icarus Pictures — Custom Elementor widgets styles
   ============================================================= */

/* -------------------------------------------------------------
   0. Full-bleed sizing
   The child theme's page.php / front-page.php render the post content
   without a constraining `<main>` wrapper, so our widgets can simply take
   100% of the available width. Elementor's section/column wrappers around
   our widgets are reset (see main.css :has rules) to remove their default
   padding so widgets really fill the viewport.
   ------------------------------------------------------------- */
.icarus-hero-w,
.icarus-ts {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
}

/* -------------------------------------------------------------
   2. Triptych Scroll widget
   ------------------------------------------------------------- */
.icarus-ts {
	--ts-gap: 18px;
	width: 100%;
	height: var(--ts-height, 85vh);
	max-height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--ts-gap);
	overflow: hidden;
	position: relative;
	padding: var(--space-md);
}

/* Fade-out top/bottom edges for an elegant look */
.icarus-ts::before,
.icarus-ts::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	height: 80px;
	z-index: 2;
	pointer-events: none;
}
.icarus-ts::before {
	top: 0;
	background: linear-gradient(180deg, var(--color-overlay) 0%, transparent 100%);
}
.icarus-ts::after {
	bottom: 0;
	background: linear-gradient(0deg, var(--color-overlay) 0%, transparent 100%);
}

.icarus-ts__col {
	position: relative;
	overflow: hidden;
	height: 100%;
}
.icarus-ts__track {
	display: flex;
	flex-direction: column;
	gap: var(--ts-gap);
	will-change: transform;
	animation-duration: var(--ts-speed, 40s);
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.icarus-ts__col--up    .icarus-ts__track { animation-name: icarus-ts-scroll-up; }
.icarus-ts__col--down  .icarus-ts__track { animation-name: icarus-ts-scroll-down; }

.icarus-ts__item {
	margin: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-bg-soft);
}
/* Keep each image's natural aspect ratio. A landscape shot fills the column
   width and stays short; a portrait shot fills the width and stays tall.
   No object-fit, no forced aspect-ratio — the column adapts. */
.icarus-ts__item img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	object-fit: initial;
}

/* Pause on hover (opt-in) */
.icarus-ts--pausable:hover .icarus-ts__track { animation-play-state: paused; }

/* Pause when out of viewport for performance — toggled via JS */
.icarus-ts:not(.icarus-ts--in-view) .icarus-ts__track {
	animation-play-state: paused;
}

/* Keyframes — the track is twice as tall as the visible area because images
   are duplicated in markup; translating by -50% loops seamlessly. */
@keyframes icarus-ts-scroll-up {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}
@keyframes icarus-ts-scroll-down {
	from { transform: translateY(-50%); }
	to   { transform: translateY(0); }
}

/* All 3 columns always visible regardless of viewport size. */
.icarus-ts { grid-template-columns: 1fr 1fr 1fr; }

/* Reduce motion: stop the scroll for a11y. */
@media (prefers-reduced-motion: reduce) {
	.icarus-ts__track { animation: none !important; }
}

/* -------------------------------------------------------------
   3. Hero widget — full-bleed image + overlay + headline block
   ------------------------------------------------------------- */
.icarus-hero-w {
	height: var(--hero-h, 100vh);
	max-height: 100vh;
	overflow: hidden;
	color: var(--color-text);
	/* The hero image is set inline via background-image:url() so it can never
	   be hijacked by stray global "img" rules. */
	background-size: cover;
	background-position: var(--hero-bg-pos, center center);
	background-repeat: no-repeat;
	background-color: var(--color-bg);
	/* .icarus-main:has(.icarus-hero-w) removes the parent's top padding,
	   so the hero naturally starts at y=0 behind the transparent header. */
}
.icarus-hero-w__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: var(--hero-overlay, #0c0c0e);
	opacity: var(--hero-overlay-alpha, 0.45);
	pointer-events: none;
}
/* Optional bottom gradient for legibility */
.icarus-hero-w--gradient::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 55%;
	z-index: 3;
	background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
	pointer-events: none;
}

/* Content block */
.icarus-hero-w__content {
	position: absolute;
	inset: 0;
	z-index: 4;
	padding: calc(var(--header-height) + var(--space-lg)) var(--container-pad) var(--space-2xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	max-width: 56ch;
}
.icarus-hero-w__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 7vw, 5.5rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hero-title-color, var(--color-text));
}
/* Gradient-filled word/group within the hero title. */
.icarus-hero-w__title-accent {
	background-image: linear-gradient(
		var(--hero-grad-angle, 45deg),
		var(--hero-grad-c1, #AA42D6),
		var(--hero-grad-c2, #E13293)
	);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}
.icarus-hero-w__subtitle {
	margin: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	color: var(--hero-subtitle-color, var(--color-accent));
	line-height: 1.2;
}
.icarus-hero-w__text {
	margin: var(--space-xs) 0 0;
	max-width: 48ch;
	color: var(--hero-text-color, rgba(244, 241, 236, 0.88));
	font-size: clamp(1rem, 1.3vw, 1.1rem);
	line-height: 1.55;
}
.icarus-hero-w__cta {
	align-self: flex-start;
	margin-top: var(--space-md);
}

/* Text positions — driven by the modifier class. */
.icarus-hero-w--top-left    .icarus-hero-w__content { align-items: flex-start; justify-content: flex-start; text-align: left; }
.icarus-hero-w--top-center  .icarus-hero-w__content { align-items: center;     justify-content: flex-start; text-align: center; margin-left: auto; margin-right: auto; }
.icarus-hero-w--top-right   .icarus-hero-w__content { align-items: flex-end;   justify-content: flex-start; text-align: right; margin-left: auto; }
.icarus-hero-w--center-left   .icarus-hero-w__content { align-items: flex-start; justify-content: center; text-align: left; }
.icarus-hero-w--center-center .icarus-hero-w__content { align-items: center;     justify-content: center; text-align: center; margin-left: auto; margin-right: auto; }
.icarus-hero-w--center-right  .icarus-hero-w__content { align-items: flex-end;   justify-content: center; text-align: right; margin-left: auto; }
.icarus-hero-w--bottom-left   .icarus-hero-w__content { align-items: flex-start; justify-content: flex-end; text-align: left; }
.icarus-hero-w--bottom-center .icarus-hero-w__content { align-items: center;     justify-content: flex-end; text-align: center; margin-left: auto; margin-right: auto; }
.icarus-hero-w--bottom-right  .icarus-hero-w__content { align-items: flex-end;   justify-content: flex-end; text-align: right; margin-left: auto; }

/* On centered text positions, allow the block to be wider/centered. */
.icarus-hero-w--top-center .icarus-hero-w__cta,
.icarus-hero-w--center-center .icarus-hero-w__cta,
.icarus-hero-w--bottom-center .icarus-hero-w__cta { align-self: center; }
.icarus-hero-w--top-right .icarus-hero-w__cta,
.icarus-hero-w--center-right .icarus-hero-w__cta,
.icarus-hero-w--bottom-right .icarus-hero-w__cta { align-self: flex-end; }

/* On mobile, keep the headline readable */
@media (max-width: 600px) {
	.icarus-hero-w__title { letter-spacing: 0.04em; }
	.icarus-hero-w__content { max-width: 100%; }
}

/* -------------------------------------------------------------
   3.5. Gradient Heading widget — title with a gradient-fill word
   ------------------------------------------------------------- */
.icarus-grad {
	/* Defaults — Playfair Display, bold italic, centered, white.
	   Every property is overridable by Elementor's per-widget typography
	   group control (which outputs higher-specificity inline CSS). */
	font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
	font-weight: 700;
	font-style: italic;
	font-size: 32px; /* fallback for p / div tags */
	line-height: 1.15;
	text-align: center;
	color: #ffffff;
	margin: 0;
}

/* Per-HTML-tag default sizes, decreasing from h1.
   Specificity (h*.class = 0,0,1,1) beats the global `body h*` rule from
   main.css (0,0,0,2) and the parent theme's reset. Elementor's per-widget
   typography control still wins because it outputs a longer selector chain. */
h1.icarus-grad { font-size: 48px; }
h2.icarus-grad { font-size: 40px; }
h3.icarus-grad { font-size: 32px; }
h4.icarus-grad { font-size: 26px; }
h5.icarus-grad { font-size: 22px; }
h6.icarus-grad { font-size: 18px; }

/* Gradient applied to the text itself via background-clip:text. */
.icarus-grad__accent {
	background-image: linear-gradient(
		var(--grad-angle, 45deg),
		var(--grad-c1, #AA42D6),
		var(--grad-c2, #E13293)
	);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	/* Inherit every typography property so the accent word looks identical
	   to the main text — only its fill becomes a gradient. */
	font: inherit;
	letter-spacing: inherit;
}

/* -------------------------------------------------------------
   3.5. Lightbox (shared) — opened by .icarus-lb-trigger elements
   ------------------------------------------------------------- */
.icarus-lb {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(8, 8, 10, 0.96);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 300ms var(--ease-out);
	-webkit-tap-highlight-color: transparent;
}
.icarus-lb.is-open { opacity: 1; }
.icarus-lb[hidden] { display: none; }

.icarus-lb__figure {
	margin: 0;
	padding: 0;
	max-width: min(92vw, 1600px);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.icarus-lb__img {
	display: block;
	max-width: 100%;
	max-height: 82vh;
	height: auto;
	width: auto;
	object-fit: contain;
	border-radius: 4px;
	/* Anti-download hardening — visually invisible but blocks selection
	   and drag-to-save. The JS also cancels contextmenu / dragstart. */
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	pointer-events: auto;
}
.icarus-lb__caption {
	color: var(--color-muted);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 0.95rem;
	max-width: 60ch;
	text-align: center;
}

.icarus-lb__close,
.icarus-lb__nav {
	position: absolute;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.18);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.icarus-lb__close:hover,
.icarus-lb__nav:hover {
	background: rgba(0, 0, 0, 0.75);
	transform: scale(1.05);
}
.icarus-lb__close { top: 20px; right: 20px; }
.icarus-lb__prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.icarus-lb__next  { right: 20px; top: 50%; transform: translateY(-50%); }
.icarus-lb__prev:hover { transform: translateY(-50%) scale(1.05); }
.icarus-lb__next:hover { transform: translateY(-50%) scale(1.05); }

body.icarus-lb-open { overflow: hidden; }

@media (max-width: 600px) {
	.icarus-lb__close { top: 12px; right: 12px; }
	.icarus-lb__prev  { left: 8px;  }
	.icarus-lb__next  { right: 8px; }
}

/* -------------------------------------------------------------
   3.55. Photo Gallery widget — grid or masonry
   ------------------------------------------------------------- */
.icarus-gal {
	width: 100%;
}

/* Grid mode — uniform cells, aspect-ratio controlled. */
.icarus-gal--grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gal-gap, 12px);
}
@media (min-width: 640px) {
	.icarus-gal--grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.icarus-gal--grid {
		grid-template-columns: repeat(var(--gal-cols, 3), 1fr);
	}
}
.icarus-gal--grid .icarus-gal__item {
	display: block;
	aspect-ratio: var(--gal-ratio, 1) / 1;
	overflow: hidden;
	border-radius: var(--gal-radius, 6px);
	background: var(--color-bg-soft);
	cursor: zoom-in;
}
.icarus-gal--grid .icarus-gal__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 600ms var(--ease-out), filter 300ms var(--ease-out);
}
@media (hover: hover) {
	.icarus-gal--grid .icarus-gal__item:hover img {
		transform: scale(1.04);
		filter: brightness(0.92);
	}
}

/* Masonry mode — CSS columns, variable heights. */
.icarus-gal--masonry {
	column-count: 1;
	column-gap: var(--gal-gap, 12px);
}
@media (min-width: 640px) {
	.icarus-gal--masonry { column-count: 2; }
}
@media (min-width: 1024px) {
	.icarus-gal--masonry { column-count: var(--gal-cols, 3); }
}
.icarus-gal--masonry .icarus-gal__item {
	display: block;
	margin: 0 0 var(--gal-gap, 12px);
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	overflow: hidden;
	border-radius: var(--gal-radius, 6px);
	background: var(--color-bg-soft);
	cursor: zoom-in;
}
.icarus-gal--masonry .icarus-gal__item img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 600ms var(--ease-out), filter 300ms var(--ease-out);
}
@media (hover: hover) {
	.icarus-gal--masonry .icarus-gal__item:hover img {
		transform: scale(1.03);
		filter: brightness(0.92);
	}
}

/* Caption when lightbox is OFF (figure fallback). */
.icarus-gal__item figcaption {
	padding: 6px 4px 0;
	color: var(--color-muted);
	font-size: 0.85rem;
	font-style: italic;
}

/* -------------------------------------------------------------
   3.56. Image + Text widget
   ------------------------------------------------------------- */
.icarus-it {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	align-items: center;
	width: 100%;
}
@media (min-width: 768px) {
	.icarus-it { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
	.icarus-it--right .icarus-it__image { order: 2; }
	.icarus-it--right .icarus-it__body  { order: 1; }
}

.icarus-it--valign-top    .icarus-it__body { align-self: start; }
.icarus-it--valign-center .icarus-it__body { align-self: center; }
.icarus-it--valign-bottom .icarus-it__body { align-self: end; }

.icarus-it__image {
	display: block;
	width: 100%;
	aspect-ratio: var(--it-ratio, 1.33) / 1;
	overflow: hidden;
	border-radius: var(--it-radius, 6px);
	background: var(--color-bg-soft);
	cursor: zoom-in;
}
.icarus-it__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 600ms var(--ease-out), filter 300ms var(--ease-out);
}
@media (hover: hover) {
	.icarus-it__image:hover img {
		transform: scale(1.04);
		filter: brightness(0.92);
	}
}

.icarus-it__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}
.icarus-it__title {
	margin: 0;
	line-height: 1.15;
}
/* Gradient-filled word/group within the Image+Text title (3-part structure). */
.icarus-it__title-accent {
	background-image: linear-gradient(
		var(--it-grad-angle, 45deg),
		var(--it-grad-c1, #AA42D6),
		var(--it-grad-c2, #E13293)
	);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	font: inherit;
	letter-spacing: inherit;
}
.icarus-it__text {
	font-size: 1rem;
	line-height: 1.6;
}
.icarus-it__text p { margin: 0 0 0.8em; }
.icarus-it__text p:last-child { margin-bottom: 0; }
.icarus-it__cta {
	align-self: flex-start;
	margin-top: var(--space-sm);
}

/* -------------------------------------------------------------
   3.57. FAQ widget — exclusive accordion + animated slide-down
   ------------------------------------------------------------- */
.icarus-faq {
	width: 100%;
	border-top: 1px solid var(--faq-sep, rgba(244, 241, 236, 0.12));
}

.icarus-faq__item {
	border-bottom: 1px solid var(--faq-sep, rgba(244, 241, 236, 0.12));
}

/* Question — full-width clickable bar with icon on the right.
   Hover uses a subtle transparent-white background (no aggressive color
   change); the active state matches the rest of the text by default — the
   visual cue for "open" comes from the rotated icon and the unfolded panel.
   Mouse click does NOT keep a background: we only react to :hover (pointer)
   and :focus-visible (keyboard) so the bar returns to neutral after click. */
.icarus-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: var(--faq-item-padding, 18px) 0;
	margin: 0;
	background-color: transparent;
	border: 0;
	color: var(--faq-q-color, #f4f1ec);
	text-align: left;
	cursor: pointer;
	border-radius: 6px;
	transition: background-color 250ms var(--ease-out), color 250ms var(--ease-out);
	font: inherit;
}
.icarus-faq__q:hover {
	background-color: var(--faq-q-hover-bg, rgba(255, 255, 255, 0.05));
}
/* Suppress the sticky pink/blue focus background that browsers and parent
   themes can apply after a click. Keep a discreet outline for keyboard a11y. */
.icarus-faq__q:focus           { outline: none; background-color: transparent; }
.icarus-faq__q:focus-visible   { outline: 2px solid currentColor; outline-offset: 2px; background-color: transparent; }
.icarus-faq__q:active          { background-color: transparent; }

.icarus-faq__item.is-open .icarus-faq__q {
	color: var(--faq-q-active, var(--faq-q-color, #f4f1ec));
}
.icarus-faq__q-text {
	flex: 1 1 auto;
	/* !important here defends against any higher-specificity rule from
	   Elementor / Hello Elementor that might keep min-width: auto and
	   prevent the text from wrapping. With min-width:0 + overflow-wrap,
	   long question titles wrap onto multiple lines instead of pushing
	   the icon out of the row. */
	min-width: 0 !important;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
	white-space: normal;
	line-height: 1.3;
}

/* Icon — visually rendered via CSS pseudo-elements so we don't ship SVG
   per item. Style changes (+ / chevron / arrow) come from the modifier
   class on the parent .icarus-faq. */
.icarus-faq__icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--faq-icon-color, #E13293);
	transition: transform 300ms var(--ease-out), color 250ms var(--ease-out);
}

/* "+" icon: two crossing bars, vertical one rotates away on open. */
.icarus-faq--plus .icarus-faq__icon::before,
.icarus-faq--plus .icarus-faq__icon::after {
	content: "";
	position: absolute;
	display: block;
	background: currentColor;
	border-radius: 1px;
}
.icarus-faq--plus .icarus-faq__icon {
	position: relative;
}
.icarus-faq--plus .icarus-faq__icon::before { width: 16px; height: 2px; }
.icarus-faq--plus .icarus-faq__icon::after  { width: 2px;  height: 16px; transition: transform 300ms var(--ease-out); }
.icarus-faq--plus .icarus-faq__item.is-open .icarus-faq__icon::after {
	transform: rotate(90deg);
}

/* Chevron and arrow versions reuse the same SVG concept via background. */
.icarus-faq--chevron .icarus-faq__icon::before {
	content: "";
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 300ms var(--ease-out);
}
.icarus-faq--chevron .icarus-faq__item.is-open .icarus-faq__icon::before {
	transform: rotate(225deg) translate(-2px, -2px);
}

.icarus-faq--arrow .icarus-faq__icon::before {
	content: "→";
	font-size: 18px;
	line-height: 1;
	transition: transform 300ms var(--ease-out);
}
.icarus-faq--arrow .icarus-faq__item.is-open .icarus-faq__icon::before {
	transform: rotate(90deg);
}

/* Answer — collapsed by default, animates open with two parallel tricks:
   - grid-template-rows: 0fr → 1fr (smooth height tied to actual content)
   - max-height: 0 → large value (safety net for browsers where `0fr` falls
     back to `auto` in auto-sized containers — observed in Elementor cells)
   Both run on the same easing/duration so they stay visually in sync. */
.icarus-faq__a {
	display: grid;
	grid-template-rows: 0fr;
	max-height: 0;
	overflow: hidden;
	transition: grid-template-rows 380ms var(--ease-out),
				max-height 380ms var(--ease-out);
}
.icarus-faq__item.is-open .icarus-faq__a {
	grid-template-rows: 1fr;
	max-height: 1500px;
}
.icarus-faq__a-content {
	min-height: 0;
	overflow: hidden;
	color: var(--faq-a-color, rgba(244, 241, 236, 0.78));
	padding: 0 0 var(--faq-item-padding, 18px);
	line-height: 1.6;
}
.icarus-faq__a-content p { margin: 0 0 0.8em; }
.icarus-faq__a-content p:last-child { margin-bottom: 0; }
.icarus-faq__a-content a { color: var(--faq-q-active, var(--color-accent)); text-decoration: underline; }

/* -------------------------------------------------------------
   3.58. CTA widget — image-backed call-to-action section
   ------------------------------------------------------------- */
.icarus-cta {
	position: relative;
	overflow: hidden;
	min-height: var(--cta-min-h, 320px);
	background-color: var(--cta-bg-color, #15151a);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: var(--cta-radius, 16px);
	isolation: isolate;
	display: flex;
}

.icarus-cta__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--cta-overlay, #0c0c0e);
	opacity: var(--cta-overlay-alpha, 0.55);
	pointer-events: none;
	z-index: 0;
}

.icarus-cta__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 14px;
	justify-content: center;
	align-items: var(--cta-flex-align, center);
	text-align: var(--cta-align, center);
	color: #ffffff;
}

.icarus-cta__eyebrow {
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-accent, #E13293);
}

.icarus-cta__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 3.5vw, 2.8rem);
	font-weight: 500;
	line-height: 1.15;
	color: #ffffff;
	max-width: 30ch;
}

.icarus-cta__desc {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
	max-width: 56ch;
}

/* Button — driven by --cta-btn-* custom properties from PHP. */
.icarus-cta__btn {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: var(--cta-btn-radius, 4px);
	border: 1px solid var(--cta-btn-bg, var(--color-accent));
	margin-top: 6px;
	cursor: pointer;
	transition: background 250ms var(--ease-out),
				color      250ms var(--ease-out),
				transform  250ms var(--ease-out),
				box-shadow 250ms var(--ease-out);
	text-decoration: none;
}
.icarus-cta__btn--small  { padding: 0.65rem 1.4rem; font-size: 0.78rem; }
.icarus-cta__btn--medium { padding: 0.9rem  1.9rem; font-size: 0.88rem; }
.icarus-cta__btn--large  { padding: 1.1rem  2.4rem; font-size: 0.98rem; }

.icarus-cta__btn--filled {
	background: var(--cta-btn-bg, var(--color-accent));
	color:      var(--cta-btn-color, #ffffff);
}
.icarus-cta__btn--filled:hover {
	filter: brightness(0.92);
}

.icarus-cta__btn--outlined {
	background: transparent;
	color:      var(--cta-btn-bg, var(--color-accent));
}
.icarus-cta__btn--outlined:hover {
	background: var(--cta-btn-bg, var(--color-accent));
	color:      var(--cta-btn-color, #ffffff);
}

.icarus-cta__btn--lift:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
}

/* -------------------------------------------------------------
   3.6. Icon Boxes widget — configurable grid of icon plaques
   ------------------------------------------------------------- */
.icarus-ib {
	background: var(--ib-bg, rgba(21, 21, 26, 0.55));
	border: var(--ib-border-width, 1px) solid var(--ib-border-color, rgba(244, 241, 236, 0.1));
	border-radius: var(--ib-radius, 16px);
}

/* Responsive grid: 1 col mobile, 2 col tablet, N col desktop. */
.icarus-ib__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 640px) {
	.icarus-ib__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.icarus-ib__grid {
		grid-template-columns: repeat(var(--ib-cols, 3), 1fr);
	}
}

.icarus-ib__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
}

/* The "plaque" containing the icon. Hover zoom applies to this whole
   element so the icon AND its colored background scale together. */
.icarus-ib__icon {
	width: var(--ib-icon-box-size, 72px);
	height: var(--ib-icon-box-size, 72px);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ib-icon-bg, rgba(120, 50, 130, 0.55));
	border: var(--ib-icon-border-width, 1px) solid var(--ib-icon-border-color, rgba(244, 241, 236, 0.18));
	border-radius: var(--ib-icon-box-radius, 12px);
	color: var(--ib-icon-color, #f4f1ec);
	font-size: var(--ib-icon-size, 28px);
	transition: transform 400ms var(--ease-out);
	will-change: transform;
}
.icarus-ib__icon svg,
.icarus-ib__icon i {
	width: 1em;
	height: 1em;
	font-size: inherit;
	color: inherit;
	fill: currentColor;
}

/* Hover: zoom the plaque (icon + bg) — value supplied by the widget. */
@media (hover: hover) {
	.icarus-ib__item:hover .icarus-ib__icon {
		transform: scale(var(--ib-zoom, 1.08));
	}
}

.icarus-ib__title {
	margin: 0;
	color: var(--ib-title-color, #f4f1ec);
	line-height: 1.2;
}
.icarus-ib__desc {
	margin: 0;
	color: var(--ib-desc-color, rgba(244, 241, 236, 0.7));
	max-width: 38ch;
	line-height: 1.55;
}

/* Mobile / single-column layout: each box becomes a self-contained card.
   - The outer container loses its background / border / padding.
   - Each item reuses the SAME background / border / radius as the desktop
     container (via the --ib-* variables).
   - Layout: icon on the LEFT (spans both rows), title above description on
     the right. Icon is shrunk a bit to suit the compact mobile card.
   Triggers at the 1-column breakpoint (≤640 px). */
@media (max-width: 639px) {
	.icarus-ib {
		background: transparent !important;
		border: 0 !important;
		padding: 0 !important;
		border-radius: 0 !important;
	}
	.icarus-ib__grid {
		gap: 14px;
	}
	.icarus-ib__item {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"icon title"
			"icon desc";
		column-gap: 18px;
		row-gap: 2px;
		align-items: center;
		text-align: left;
		padding: 16px 18px;
		background: var(--ib-bg, rgba(21, 21, 26, 0.55));
		border: var(--ib-border-width, 1px) solid var(--ib-border-color, rgba(244, 241, 236, 0.1));
		border-radius: var(--ib-radius, 12px);
	}
	.icarus-ib__icon {
		grid-area: icon;
		/* Shrink the icon plaque a bit for compact mobile cards. The CSS
		   variables override the inline ones set on the parent .icarus-ib. */
		--ib-icon-box-size: 52px;
		--ib-icon-size: 22px;
	}
	.icarus-ib__title {
		grid-area: title;
		margin: 0;
		align-self: end;       /* sit close to the desc below */
		text-align: left;
		max-width: none;
	}
	.icarus-ib__desc {
		grid-area: desc;
		margin: 0;
		align-self: start;     /* sit close to the title above */
		text-align: left;
		max-width: none;
	}
}

/* -------------------------------------------------------------
   4. Banner widget — full-width image strip with title + subtitle
   ------------------------------------------------------------- */
.icarus-banner-w {
	position: relative;
	width: 100%;
	/* Default height per breakpoint — overridden by Elementor's per-widget
	   responsive control (selectors output direct height on this element). */
	height: 30vh;
	overflow: hidden;
	color: var(--color-text);
	isolation: isolate;
}
@media (max-width: 1024px) {
	.icarus-banner-w { height: 25vh; }
}
@media (max-width: 767px) {
	.icarus-banner-w { height: 110px; }
}

/* Background image layer — isolated so we can apply filter:blur without
   blurring the title and subtitle. Scaled slightly so blurred edges don't
   show through.
   IMPORTANT: filter and transform create new stacking contexts that defeat
   `background-attachment: fixed` (the parallax effect). The CSS variable
   --banner-filter is "none" when no blur is set, and the transform is
   removed by the .icarus-banner-w--parallax modifier (see below). */
.icarus-banner-w__bg {
	position: absolute;
	inset: 0;
	background-image: var(--banner-image, none);
	background-size: cover;
	/* Position = base keyword (in %) + per-breakpoint pixel offsets.
	   --banner-pos-x/y come from the inline style (chosen keyword).
	   --banner-x-offset / --banner-y-offset come from Elementor's responsive
	   selectors and override automatically at each breakpoint. */
	background-position:
		calc(var(--banner-pos-x, 50%) + var(--banner-x-offset, 0px))
		calc(var(--banner-pos-y, 50%) + var(--banner-y-offset, 0px));
	background-repeat: no-repeat;
	background-color: var(--color-bg);
	filter: var(--banner-filter, none);
	transform: scale(1.04);
	z-index: 0;
}

/* Parallax mode — the background-image is translated vertically by JS
   (assets/js/banner-parallax.js) at a fraction of the scroll speed.
   The JS overrides the transform inline, applying scale(1.3) so the bg
   overflows the section by ~15% on each side, giving room for the
   translation without ever revealing empty area at the edges. */
.icarus-banner-w--parallax .icarus-banner-w__bg {
	will-change: transform;
}

/* Tint overlay sits on top of the image, below the text. */
.icarus-banner-w__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--banner-overlay, #0c0c0e);
	opacity: var(--banner-overlay-alpha, 0.4);
	z-index: 1;
	pointer-events: none;
}

/* Content layer.
   Top padding accounts for the fixed transparent header AND adds extra
   breathing room so the title never gets crowded by the menu. */
.icarus-banner-w__content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding:
		calc(var(--header-height) + var(--space-lg))
		var(--container-pad)
		var(--space-lg);
	max-width: var(--container-max);
	margin: 0 auto;
}
.icarus-banner-w__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	/* On mobile starts at 1.4rem (~22px) to fit comfortably in shorter banners. */
	font-size: clamp(1.4rem, 4vw, 3.6rem);
	line-height: 1.1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-text);
	/* Wrap on word boundaries only — no hyphenation (which was cutting words
	   like "ÉVÉNE-MENTS" / "PROFESSION-NELS" awkwardly mid-word). */
	max-width: 100%;
	overflow-wrap: break-word;
	white-space: normal;
}
.icarus-banner-w__subtitle {
	margin: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(0.95rem, 1.8vw, 1.4rem);
	color: var(--color-text);
	max-width: min(56ch, 100%);
	overflow-wrap: break-word;
}

/* Text positions — drive align/justify on the flex content container. */
.icarus-banner-w--top-left      .icarus-banner-w__content { align-items: flex-start; justify-content: flex-start; text-align: left;   }
.icarus-banner-w--top-center    .icarus-banner-w__content { align-items: center;     justify-content: flex-start; text-align: center; }
.icarus-banner-w--top-right     .icarus-banner-w__content { align-items: flex-end;   justify-content: flex-start; text-align: right;  }
.icarus-banner-w--center-left   .icarus-banner-w__content { align-items: flex-start; justify-content: center;     text-align: left;   }
.icarus-banner-w--center-center .icarus-banner-w__content { align-items: center;     justify-content: center;     text-align: center; }
.icarus-banner-w--center-right  .icarus-banner-w__content { align-items: flex-end;   justify-content: center;     text-align: right;  }
.icarus-banner-w--bottom-left   .icarus-banner-w__content { align-items: flex-start; justify-content: flex-end;   text-align: left;   }
.icarus-banner-w--bottom-center .icarus-banner-w__content { align-items: center;     justify-content: flex-end;   text-align: center; }
.icarus-banner-w--bottom-right  .icarus-banner-w__content { align-items: flex-end;   justify-content: flex-end;   text-align: right;  }