/**
 * Elucio Theme – Homepage Stylesheet
 *
 * Implementiert: Figma "Desktop – Startseite (FNL)" Node 2:5
 * Wird nur auf der Startseite geladen (is_front_page()).
 *
 * Sections:
 *   1. Shared: CTA Link, Section Topline, Section Headline
 *   2. Hero Section
 *   3. Section: OUR PHILOSOPHY (Content 1)
 *   4. Section: PRIVAT ACCESS (Content 2)
 *   5. Section: CHAPTER I / SPRING 2027 (Content 3)
 *   6. Section: THE STANDARD (Content 4)
 *   7. Section: CRAFT SLIDER (Content 5)
 *   8. Section: CRAFT VALUES (Content 6)
 *   9. Responsive
 *
 * @package Elucio
 */

/* =========================================================================
   Shared: Typografie-Tokens für Homepage-Sections
========================================================================= */

/* CTA-Link — wiederverwendet in allen Sections */
.cta-link {
	display:         inline-flex;
	align-items:     center;
	gap:             0.75rem;
	font-family:     var(--font-body);
	font-size:       1rem;
	font-weight:     400;
	letter-spacing:  0.1em;
	color:           var(--color-dark);
	text-transform:  uppercase;
	text-decoration: none;
	border-bottom:   1px solid var(--color-dark);
	padding-bottom:  0.25rem;
	transition:      opacity 0.2s ease;
}

.cta-link:hover {
	opacity: 0.6;
}

/* Helle CTA-Variante (über dunklem Hintergrund) */
.cta-link--light {
	color:        #FFFCCB;
	border-color: rgba(255, 252, 203, 0.6);
}

.cta-link--light:hover {
	opacity: 0.8;
}

/* CTA-Pfeil-Icon */
.cta-link__arrow {
	display:     flex;
	align-items: center;
}

/* Section Topline — Kategorie-Label + Sand-Linie */
.section-topline {
	display:     flex;
	align-items: center;
	gap:         1.25rem;
	margin-bottom: 1.5rem;
}

.section-topline__text {
	font-family:    var(--font-body);
	font-weight:    500;
	font-size:      1.25rem;    /* Figma: 20px */
	letter-spacing: 0.1em;      /* Figma: tracking 2px on 20px */
	color:          var(--color-gray);
	text-transform: uppercase;
	white-space:    nowrap;
}

.section-topline__line {
	display:          block;
	width:            105px;   /* Figma: exactly 105px */
	height:           1px;
	background-color: var(--color-sand);
	flex-shrink:      0;
}

/* Section Headline — Silk Serif Text, 64px in Figma */
.section-headline {
	font-family:    var(--font-headline);
	font-size:      clamp(2.5rem, 4.44vw, 4rem);  /* 64px @ 1440px */
	line-height:    1.125;                         /* Figma: 72px leading on 64px */
	font-weight:    400;
	color:          var(--color-dark);
	margin-bottom:  1.75rem;
}

/* Section Body Copy — Silk Serif Text, 18px in Figma */
.section-body {
	font-family:    var(--font-headline);
	font-size:      1.125rem;         /* 18px */
	line-height:    1.78;             /* Figma: 32px on 18px */
	letter-spacing: 0.06em;           /* Figma: tracking 1.08px on 18px */
	color:          var(--color-dark);
	margin-bottom:  2.5rem;
	max-width:      32ch;
}

/* =========================================================================
   1. HERO SECTION
   Figma: 1920 × 1080 · full-bleed image · text bottom-left
   margin-top: -88px → slides behind sticky header (compensated by padding-top)
========================================================================= */
.site-main {
	/* Kein min-height auf Startseite */
}

.hero-section {
	position:    relative;
	min-height:  100svh;
	margin-top:  -88px; /* Hinter Sticky-Header schieben */
	overflow:    hidden;
	display:     flex;
	align-items: flex-end;
}

.hero-section__bg {
	position: absolute;
	inset:    0;
}

.hero-section__bg img {
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: center top;
	display:         block;
}

.hero-section__content {
	position:       relative;
	z-index:        1;
	padding-top:    88px; /* Platz für Header */
	padding-bottom: clamp(5rem, 9vw, 9rem);
	padding-inline: clamp(3rem, 10.6vw, 9.5rem); /* Figma x≈153 auf 1440px = 10.6% */
	max-width:      var(--section-max, 1440px);
}

.hero-section__tagline {
	font-family:    var(--font-body);
	font-weight:    300;
	font-size:      clamp(1.125rem, 2.2vw, 2rem); /* Figma: 32px */
	letter-spacing: 0.1em;
	color:          #ffffff;
	text-transform: capitalize;
	margin-bottom:  1.25rem;
}

.hero-section__headline {
	font-family:    var(--font-display);
	font-size:      clamp(4rem, 7.64vw, 6.875rem); /* Figma: 110px */
	line-height:    1.0;
	font-weight:    400;
	letter-spacing: 0.01em;
	color:          #ffffff;
	text-transform: uppercase;
	margin-bottom:  2.5rem;
}

.hero-cta {
	display:         inline-flex;
	align-items:     center;
	gap:             1.25rem;
	font-family:     var(--font-body);
	font-size:       clamp(1.125rem, 1.79vw, 1.609rem); /* Figma: 25.75px */
	letter-spacing:  0.1em;
	color:           #ffffff;
	text-transform:  uppercase;
	text-decoration: none;
	padding-bottom:  0.375rem;
	border-bottom:   1px solid rgba(255, 255, 255, 0.7);
	transition:      border-color 0.2s ease, opacity 0.2s ease;
}

.hero-cta:hover {
	border-color: #ffffff;
	opacity:      0.85;
}

.hero-cta__arrow img {
	height: auto;
	width:  clamp(22px, 2.5vw, 36px);
	filter: brightness(0) invert(1);
}

/* =========================================================================
   2. SECTION: OUR PHILOSOPHY (Content 1)
   Figma: 1440 × 760 · #FFFEF5
   Grid: left copy (~53%) · right plate image (~47%)
   Bottom: claim bar (lines + "CRAFT TAKES TIME." + logo icon + "ATELIER IN MOTION.")
========================================================================= */
.section-philosophy {
	background-color: var(--color-cream);
	overflow: hidden;
}

.section-philosophy__inner {
	display:         grid;
	grid-template-columns: 1fr 1fr;
	align-items:     center;
	min-height:      clamp(380px, 38vw, 540px); /* reduziert — Grid zentriert bereits vertikal */
	max-width:       var(--section-max, 1440px);
	margin-inline:   auto;
	padding-inline:  clamp(3.5rem, 3.89vw, 3.5rem); /* Figma: 56px on 1440px */
	gap:             3rem;
}

.section-philosophy__copy {
	padding-block: clamp(2rem, 3vw, 3rem); /* war clamp(4rem, 7vw, 8rem) — Grid-align-items:center zentriert bereits */
}

.section-philosophy__visual {
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding-block:   2rem;
}

.section-philosophy__visual img {
	max-width:  min(600px, 100%);
	height:     auto;
	object-fit: contain;
}

/* Claim Bar */
.claim-bar {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             2rem;
	padding-block:   clamp(1.5rem, 2.2vw, 2.2rem);
	max-width:       var(--section-max, 1440px);
	margin-inline:   auto;
	padding-inline:  clamp(3.5rem, 3.89vw, 3.5rem);
}

.claim-bar__line {
	display:          block;
	flex:             1;
	height:           1px;
	background-color: var(--color-sand);
}

.claim-bar__text {
	font-family:    var(--font-body);
	font-weight:    500;
	font-size:      1rem;
	letter-spacing: 0.12em;
	color:          var(--color-gray);
	text-transform: uppercase;
	white-space:    nowrap;
}

.claim-bar__logo-icon {
	flex-shrink: 0;
	width:       clamp(40px, 4.3vw, 62px);
	height:      auto;
}

/* =========================================================================
   3. SECTION: PRIVAT ACCESS (Content 2)
   Figma: 1440 × 416 · full-bleed leather bg · rgba(78,67,52,0.24) overlay
   Centered: large headline + subtitle + CTA
========================================================================= */
.section-access {
	position:        relative;
	overflow:        hidden;
	min-height:      clamp(260px, 28.89vw, 416px); /* Figma: 416px */
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.section-access__bg {
	position: absolute;
	inset:    0;
}

.section-access__bg img {
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: center;
	display:         block;
}

/* Figma-Overlay: rgba(78,67,52,0.24) über das Bild */
.section-access__overlay {
	position:         absolute;
	inset:            0;
	background-color: rgba(78, 67, 52, 0.24);
}

.section-access__inner {
	position:   relative;
	z-index:    1;
	text-align: center;
	padding:    clamp(3rem, 5vw, 5rem) 2rem;
}

.section-access__headline {
	font-family:    var(--font-display);
	font-size:      clamp(2.5rem, 6.11vw, 5.5rem); /* Figma: 88px */
	font-weight:    500;
	line-height:    1.09;
	letter-spacing: 0.056em; /* Figma: tracking 4.9px on 88px */
	color:          #FFFCCB;
	text-transform: uppercase;
	margin-bottom:  0.75rem;
}

.section-access__sub {
	font-family:    var(--font-body);
	font-weight:    300;
	font-size:      clamp(1rem, 2.08vw, 1.875rem); /* Figma: 30px */
	letter-spacing: 0.1em;
	color:          #FFFCCB;
	text-transform: uppercase;
	margin-bottom:  2.5rem;
}

/* =========================================================================
   4. SECTION: CHAPTER I – SPRING 2027 (Content 3)
   Figma: 1440 × 760 · #FFFEF5
   Grid: left copy 430px (~30%) · right image 1179px (~82%)
   → approx. col ratio 4:10
========================================================================= */
.section-chapter {
	background-color: var(--color-cream);
	overflow: hidden;
}

.section-chapter__inner {
	display:               grid;
	grid-template-columns: 4fr 10fr;
	min-height:            clamp(520px, 52.78vw, 760px);
	/* Kein max-width — Grid geht full-viewport, Bild blutet rechts aus */
}

.section-chapter__copy {
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	padding-block:   clamp(3.5rem, 8vw, 10rem);
	padding-right:   clamp(2.5rem, 3.89vw, 3.5rem);
	/* Links: Text fluchtet mit anderen Sections (Container-Zentrierung + padding) */
	padding-left:    max(
		clamp(2.5rem, 3.89vw, 3.5rem),
		calc((100vw - var(--section-max, 1440px)) / 2 + clamp(2.5rem, 3.89vw, 3.5rem))
	);
}

.section-chapter__visual {
	overflow:        hidden;
	padding-top:     clamp(2.5rem, 4.44vw, 4rem);
	padding-bottom:  clamp(2.5rem, 4.44vw, 4rem);
	padding-left:    0;
	padding-right:   0; /* Bild bündig am rechten Seitenrand */
	display:         flex;
	flex-direction:  column;
}

.section-chapter__visual img {
	width:           100%;
	flex:            1;
	min-height:      0;
	object-fit:      cover;
	object-position: center;
	display:         block;
}

/* =========================================================================
   5. SECTION: THE STANDARD (Content 4)
   Figma: 1440 × 648 · sand border 1.5px #DEC7AB
   Grid: left image 816px (~57%) · right copy 484px (~34%)
   → approx. col ratio 8:5
========================================================================= */
.section-standard {
	background-color: var(--color-cream);
	overflow: hidden;
}

.section-standard__inner {
	display:       grid;
	grid-template-columns: 8fr 5fr;
	align-items:   stretch;
	min-height:    clamp(420px, 45vw, 648px); /* Figma: 648px */
	max-width:     var(--section-max, 1440px);
	margin-inline: auto;
	border:        1.5px solid var(--color-sand); /* Figma sand border */
}

.section-standard__visual {
	overflow:       hidden;
	padding:        clamp(2rem, 3.5vw, 3.5rem); /* allseitiger Innenabstand zum Rahmen */
	display:        flex;
	flex-direction: column;
}

.section-standard__visual img {
	width:           100%;
	flex:            1;
	min-height:      0;
	object-fit:      cover;
	object-position: center;
	display:         block;
}

.section-standard__copy {
	display:        flex;
	flex-direction: column;
	justify-content: center;
	padding:        clamp(2.5rem, 4.4vw, 4rem) clamp(2.5rem, 3.89vw, 3.5rem);
}

/* =========================================================================
   6. SECTION: CRAFT SLIDER (Content 5)
   Figma: 1440 × 648 · 3 slides
   Each slide: left copy 316px (~22%) · center image 854px (~59%)
   Right: vertical slide nav (01/02/03 + scroll indicator)
========================================================================= */
.craft-slider {
	position:         relative;
	background-color: var(--color-cream);
	overflow:         hidden;
	min-height:       clamp(420px, 45vw, 648px); /* Figma: 648px */
}

/* All slides hidden by default */
.craft-slider__slide {
	display:    none;
}

/* Active slide shown as grid */
.craft-slider__slide.is-active {
	display:       grid;
	grid-template-columns: 3fr 9fr; /* ~316:854 from Figma */
	min-height:    clamp(420px, 45vw, 648px);
	max-width:     var(--section-max, 1440px);
	margin-inline: auto;
}

.craft-slider__copy {
	display:        flex;
	flex-direction: column;
	justify-content: center;
	padding:        clamp(3rem, 6vw, 9rem) clamp(2.5rem, 3.89vw, 3.5rem);
}

.craft-slider__visual {
	overflow:        hidden;
	padding-block:   clamp(2.5rem, 4.44vw, 4rem);
	display:         flex;
	flex-direction:  column;
}

.craft-slider__visual img {
	width:           100%;
	flex:            1;
	min-height:      0; /* wichtig: Flex-Item darf kleiner als Intrinsic-Höhe werden */
	object-fit:      cover;
	object-position: center;
	display:         block;
	border-radius:   4px;
}

/* Right: Vertical slide navigation */
.craft-slider__nav {
	position:       absolute;
	right:          clamp(1rem, 3.47vw, 3rem); /* Figma: ~50px from right edge of 1440px section */
	top:            50%;
	transform:      translateY(-50%);
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0.5rem;
}

.craft-slider__dot {
	font-family:    var(--font-body);
	font-weight:    500;
	font-size:      1rem;         /* Figma: 16px */
	letter-spacing: 0.1em;
	color:          #BABABA;      /* Figma: inactive dots #bababa */
	background:     none;
	border:         none;
	cursor:         pointer;
	padding:        0.375rem 0;
	width:          66px;
	text-align:     center;
	transition:     color 0.25s ease;
}

.craft-slider__dot:hover {
	color: var(--color-gray);
}

.craft-slider__dot.is-active {
	color: var(--color-gray); /* Figma: active dot #676767 */
}

/* Vertical line between first active dot and the stack */
.craft-slider__dot-line {
	width:            1px;
	height:           clamp(40px, 5.56vw, 80px); /* Figma: 80px line */
	background-color: var(--color-divider);
}

/* Scroll label + arrow below the dots */
.craft-slider__scroll {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0.5rem;
	margin-top:     1.5rem;
}

.craft-slider__scroll-label {
	font-family:     var(--font-body);
	font-size:       0.875rem; /* Figma: 14px */
	letter-spacing:  0.1em;
	color:           var(--color-gray);
	text-transform:  uppercase;
	writing-mode:    vertical-rl;
	text-orientation: mixed;
}

.craft-slider__scroll img {
	height: 22px;
	width:  auto;
}

/* Slide transition */
.craft-slider__slide {
	transition: opacity 0.4s ease;
}

/* =========================================================================
   7. SECTION: CRAFT VALUES (Content 6)
   Figma: 1440 × 232 · horizontal borders top+bottom · 3 columns
   Each column: icon (left) + label/text (right) · vertical dividers between cols
========================================================================= */
.section-values {
	background-color: var(--color-cream);
	border-top:       1px solid var(--color-border);
	border-bottom:    1px solid var(--color-border);
}

.section-values__inner {
	display:       grid;
	grid-template-columns: 1fr 1fr 1fr;
	max-width:     var(--section-max, 1440px);
	margin-inline: auto;
}

.section-values__item {
	display:     flex;
	align-items: center;
	gap:         clamp(1rem, 2.2vw, 2rem);
	padding:     clamp(2rem, 4.72vw, 4.5rem) clamp(1.5rem, 3.89vw, 3.5rem);
}

/* Vertical dividers via border-left on 2nd + 3rd items */
.section-values__item + .section-values__item {
	border-left: 1px solid var(--color-border);
}

.section-values__icon {
	flex-shrink: 0;
	width:       clamp(48px, 6.1vw, 88px); /* Figma: 88px */
	height:      auto;
	object-fit:  contain;
}

.section-values__label {
	font-family:    var(--font-body);
	font-weight:    500;
	font-size:      1.25rem;  /* Figma: 20px */
	letter-spacing: 0.1em;
	color:          var(--color-dark);
	text-transform: uppercase;
	margin-bottom:  0.5rem;
}

.section-values__text {
	font-family:    var(--font-headline);
	font-size:      1.125rem; /* Figma: 18px */
	line-height:    1.33;
	letter-spacing: 0.06em;
	color:          var(--color-dark);
	max-width:      22ch;
}

/* =========================================================================
   Responsive — Tablet (≤ 1100px)
========================================================================= */
@media (max-width: 1100px) {

	/* Philosophy: stack vertically */
	.section-philosophy__inner {
		grid-template-columns: 1fr;
	}

	.section-philosophy__visual {
		order: -1; /* image first */
	}

	.section-philosophy__visual img {
		max-width: min(420px, 80%);
	}

	/* Chapter: stack vertically */
	.section-chapter__inner {
		grid-template-columns: 1fr;
	}

	.section-chapter__visual {
		min-height: 360px;
	}

	.section-chapter__copy {
		justify-content: flex-start;
		padding-top: 3.5rem;
	}

	/* Standard: stack vertically */
	.section-standard__inner {
		grid-template-columns: 1fr;
	}

	.section-standard__visual {
		min-height: 320px;
	}

	/* Slider: stack horizontally, wider copy */
	.craft-slider__slide.is-active {
		grid-template-columns: 1fr 1.5fr;
	}

	/* Slide nav: reposition */
	.craft-slider__nav {
		right: 1rem;
	}

}

/* =========================================================================
   Responsive — Mobile (≤ 768px)
========================================================================= */
@media (max-width: 768px) {

	/* Hero: compensate for 80px mobile header */
	.hero-section {
		margin-top: -80px;
	}

	.hero-section__content {
		padding-top:    80px;
		padding-inline: 1.5rem;
		padding-bottom: 4rem;
	}

	.hero-section__headline {
		font-size: clamp(3rem, 12vw, 4.5rem);
	}

	/* Slider: single column, nav below */
	.craft-slider__slide.is-active {
		grid-template-columns: 1fr;
		grid-template-rows:    auto auto;
	}

	.craft-slider__visual {
		padding: 0;
		min-height: 260px;
	}

	.craft-slider__nav {
		position:       relative;
		right:          auto;
		top:            auto;
		transform:      none;
		flex-direction: row;
		justify-content: center;
		padding:        1.5rem;
	}

	.craft-slider__dot-line {
		width:  60px;
		height: 1px;
	}

	.craft-slider__scroll {
		display: none;
	}

	/* Values: single column */
	.section-values__inner {
		grid-template-columns: 1fr;
	}

	.section-values__item + .section-values__item {
		border-left: none;
		border-top:  1px solid var(--color-border);
	}

	/* Claim bar: wrap without decorative lines */
	.claim-bar {
		flex-wrap:       wrap;
		gap:             0.75rem;
		justify-content: center;
	}

	.claim-bar__line {
		display: none;
	}

	/* Access section */
	.section-access__headline {
		font-size: clamp(2.25rem, 9vw, 3.5rem);
	}

}