/* =============================================================
   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-cc,
.icarus-ts {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
}

/* -------------------------------------------------------------
   1. Category Carousel widget
   ------------------------------------------------------------- */
.icarus-cc {
	padding: var(--space-2xl) 0;
	color: var(--color-text);
	/* width / margins already set by the breakout rule above. */
}
.icarus-cc__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	align-items: center;
}
.icarus-cc__text { display: flex; flex-direction: column; gap: var(--space-md); }
.icarus-cc__title {
	font-size: clamp(2rem, 4vw, 3.2rem);
	letter-spacing: 0.02em;
	margin: 0;
}
.icarus-cc__desc {
	color: var(--color-muted);
	font-size: 1.05rem;
	margin: 0;
}

.icarus-cc__carousel {
	position: relative;
	overflow: hidden;
}
.icarus-cc__carousel .swiper {
	width: 100%;
	overflow: hidden;
	padding-bottom: 2px;
}

/* Slide.
   The slide height is driven by the Elementor "Format des images" control via
   the --cc-ratio CSS custom property (height-as-percentage-of-width). Default
   100% = perfect square. Children are position:absolute and fill the box.
   The image always covers 100% of the slide thanks to object-fit:cover. */
.icarus-cc__slide {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: var(--cc-ratio, 55%);
	overflow: hidden;
	background: var(--color-bg-soft);
	border-radius: var(--radius-md);
}
.icarus-cc__slide-link {
	position: absolute;
	inset: 0;
	display: block;
	color: inherit;
}
/* The image always covers 100% of the slide. !important defends against
   Elementor/Hello Elementor global img rules that sometimes set
   width:auto / max-width / object-fit:contain. */
.icarus-cc__img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	transition: transform 700ms var(--ease-out),
				filter   300ms var(--ease-out);
}

/* Overlay with title + description.
   At rest, the overlay sits at the bottom showing only the title. On hover,
   the description slides up from below the title, physically pushing the
   title upwards as the overlay grows. */
.icarus-cc__overlay {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: var(--space-sm) var(--space-md) var(--space-md);
	color: var(--color-text);
	/* Light scrim only on the bottom third — keeps the image breathing. */
	background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.0) 55%);
	z-index: 2;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}
.icarus-cc__slide-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	line-height: 1.1;
	letter-spacing: 0.02em;
	/* Title is "pushed" by the text appearing below; we add a small lift on
	   hover for a more polished feel. */
	transform: translateY(0);
	transition: transform 500ms var(--ease-out);
}
.icarus-cc__slide-text {
	margin: 0;
	color: rgba(244, 241, 236, 0.9);
	font-size: 0.9rem;
	line-height: 1.45;
	/* Collapsed state: takes no vertical space. */
	max-height: 0;
	opacity: 0;
	transform: translateY(8px);
	overflow: hidden;
	transition: max-height 500ms var(--ease-out),
				opacity     350ms var(--ease-out) 50ms,
				transform   500ms var(--ease-out);
}

/* Hover state — desktop / mouse pointer */
@media (hover: hover) {
	.icarus-cc__slide:hover .icarus-cc__img {
		transform: scale(1.05);
		filter: brightness(0.9);
	}
	.icarus-cc__slide:hover .icarus-cc__slide-title {
		/* Visible lift so the title clearly moves up. */
		transform: translateY(-6px);
	}
	.icarus-cc__slide:hover .icarus-cc__slide-text {
		max-height: 160px;
		opacity: 1;
		transform: translateY(0);
	}
}

/* Touch devices have no hover: keep title only, full description on tap
   would need extra JS. For now we expand a tiny bit for affordance. */
@media (hover: none) {
	.icarus-cc__slide-text {
		max-height: 80px;
		opacity: 0.85;
		transform: translateY(0);
	}
}

/* Navigation buttons */
.icarus-cc__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(12, 12, 14, 0.6);
	color: var(--color-text);
	border-radius: 50%;
	transition: background var(--dur-fast) var(--ease-out),
				transform   var(--dur-fast) var(--ease-out);
	backdrop-filter: blur(4px);
}
.icarus-cc__nav:hover { background: var(--color-accent); color: var(--color-bg); }
.icarus-cc__nav--prev { left: 8px; }
.icarus-cc__nav--next { right: 8px; }
.icarus-cc__nav.swiper-button-disabled { opacity: 0; pointer-events: none; }

/* Two-column layout on large screens */
@media (min-width: 1100px) {
	.icarus-cc__inner {
		grid-template-columns: 1fr 2fr;
		gap: var(--space-2xl);
	}
	.icarus-cc--reverse .icarus-cc__inner {
		grid-template-columns: 2fr 1fr;
	}
	.icarus-cc--reverse .icarus-cc__text  { order: 2; }
	.icarus-cc--reverse .icarus-cc__carousel { order: 1; }
}

/* -------------------------------------------------------------
   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;
	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);
}
.icarus-ts__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3/4;
	object-fit: cover;
}

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

/* Responsive — 2 columns on tablet, 3 on desktop */
@media (min-width: 768px) {
	.icarus-ts { grid-template-columns: 1fr 1fr; }
	/* Hide centre column to keep the brief's "2 cols on tablet" rule */
	.icarus-ts .icarus-ts__col:nth-child(2) { display: none; }
}
@media (min-width: 1100px) {
	.icarus-ts { grid-template-columns: 1fr 1fr 1fr; }
	.icarus-ts .icarus-ts__col:nth-child(2) { display: block; }
}

/* 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 {
	/* width / margins already set by the .icarus-hero-w/.icarus-cc/.icarus-ts
	   breakout rule above. Position is relative so absolute children stay scoped. */
	height: var(--hero-h, 100vh);
	max-height: 100vh;
	overflow: hidden;
	color: var(--color-text);
	/* .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__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-bg-pos, center center);
	z-index: 1;
}
.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;
}
.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(--color-accent);
	line-height: 1.2;
}
.icarus-hero-w__text {
	margin: var(--space-xs) 0 0;
	max-width: 48ch;
	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%; }
}