/* ========================================
   LAYOUTS.CSS
   Template Factory — Layout System
   
   Structure:
   1. Section System (spacing, structure)
   2. Container Variants
   3. Layout Patterns
   4. Layout Slots
   5. Responsive Behavior
   
   Architecture:
   SECTION → CONTAINER → LAYOUT → SLOTS → COMPONENTS
   
   ======================================== */

/* ----------------------------------------
   CSS VARIABLES — Layout Tokens
   ---------------------------------------- */

:root {
  /* Section Spacing Scale */
  --section-spacing-xs: var(--space-8);
  /* 32px */
  --section-spacing-sm: var(--space-12);
  /* 48px */
  --section-spacing-md: var(--space-16);
  /* 64px */
  --section-spacing-lg: var(--space-24);
  /* 96px */
  --section-spacing-xl: var(--space-32);
  /* 128px */
  --section-spacing-2xl: calc(var(--space-32) * 1.5);
  /* 192px — для особо крупных hero */

  /* Container Widths */
  --container-narrow: 42rem;
  /* 672px — for text-heavy content */
  --container-default: 75rem;
  /* 1200px — standard */
  --container-wide: 87.5rem;
  /* 1400px — for galleries, dashboards */
  --container-full: 100%;
  /* Full width with padding */
  --container-padding: var(--space-6);
  /* 24px side padding */

  /* Layout Gaps */
  --layout-gap-sm: var(--space-6);
  /* 24px */
  --layout-gap-md: var(--space-8);
  /* 32px */
  --layout-gap-lg: var(--space-12);
  /* 48px */
  --layout-gap-xl: var(--space-16);
  /* 64px */

  /* Content Max Widths (for text inside layouts) */
  --content-max-width-xs: 32rem;
  /* 512px — captions, small text */
  --content-max-width-sm: 40rem;
  /* 640px — paragraphs */
  --content-max-width-md: 48rem;
  /* 768px — articles */
  --content-max-width-lg: 56rem;
  /* 896px — wide articles */

  /* Split Ratios */
  --split-50: 50%;
  --split-40: 40%;
  --split-60: 60%;
  --split-33: 33.333%;
  --split-67: 66.667%;
}

/* Tablet adjustments */
@media (max-width: 1024px) {
  :root {
    --section-spacing-sm: var(--space-10);
    /* 40px */
    --section-spacing-md: var(--space-12);
    /* 48px */
    --section-spacing-lg: var(--space-16);
    /* 64px */
    --section-spacing-xl: var(--space-20);
    /* 80px */
    --section-spacing-2xl: var(--space-32);
    /* 128px */
    --layout-gap-lg: var(--space-10);
    /* 40px */
    --layout-gap-xl: var(--space-12);
    /* 48px */
  }
}

/* Mobile adjustments */
@media (max-width: 640px) {
  :root {
    --section-spacing-xs: var(--space-6);
    /* 24px */
    --section-spacing-sm: var(--space-8);
    /* 32px */
    --section-spacing-md: var(--space-10);
    /* 40px */
    --section-spacing-lg: var(--space-12);
    /* 48px */
    --section-spacing-xl: var(--space-16);
    /* 64px */
    --section-spacing-2xl: var(--space-20);
    /* 80px */
    --container-padding: var(--space-4);
    /* 16px */
    --layout-gap-sm: var(--space-4);
    /* 16px */
    --layout-gap-md: var(--space-6);
    /* 24px */
    --layout-gap-lg: var(--space-8);
    /* 32px */
    --layout-gap-xl: var(--space-10);
    /* 40px */
  }
}


/* ========================================
   1. SECTION SYSTEM
   ======================================== */

/* Base Section
   - Full width wrapper
   - Applies background and spacing
   - Does NOT constrain content width (container does that)
   ---------------------------------------- */

.section {
  position: relative;
  width: 100%;
  padding-block: var(--section-spacing-md);
}

/* Section Spacing Variants */

.section--spacing-none {
  padding-block: 0;
}

.section--spacing-xs {
  padding-block: var(--section-spacing-xs);
}

.section--spacing-sm {
  padding-block: var(--section-spacing-sm);
}

.section--spacing-md {
  padding-block: var(--section-spacing-md);
}

.section--spacing-lg {
  padding-block: var(--section-spacing-lg);
}

.section--spacing-xl {
  padding-block: var(--section-spacing-xl);
}

.section--spacing-2xl {
  padding-block: var(--section-spacing-2xl);
}

/* Asymmetric spacing (useful for hero, footer) */

.section--spacing-top-none {
  padding-block-start: 0;
}

.section--spacing-top-sm {
  padding-block-start: var(--section-spacing-sm);
}

.section--spacing-top-lg {
  padding-block-start: var(--section-spacing-lg);
}

.section--spacing-bottom-none {
  padding-block-end: 0;
}

.section--spacing-bottom-sm {
  padding-block-end: var(--section-spacing-sm);
}

.section--spacing-bottom-lg {
  padding-block-end: var(--section-spacing-lg);
}

/* Section with overflow visible (for decorative elements) */

.section--overflow-visible {
  overflow: visible;
}

/* Section stacking context */

.section--elevated {
  z-index: 1;
}


/* ========================================
   2. CONTAINER VARIANTS
   ======================================== */

/* Base Container (already in utilities, but enhanced here)
   - Centers content
   - Applies max-width
   - Adds horizontal padding
   ---------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-default);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Container Width Variants */

.container--narrow {
  max-width: var(--container-narrow);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--full {
  max-width: var(--container-full);
}

/* Container with no padding (for edge-to-edge content inside) */

.container--no-padding {
  padding-inline: 0;
}

/* Nested container reset (when container inside container) */

.container .container {
  padding-inline: 0;
}


/* ========================================
   3. LAYOUT PATTERNS
   ======================================== */

/* ----------------------------------------
   3.1 Layout: Centered
   - Content centered horizontally
   - Text aligned center
   - Ideal for: hero text, section headers, CTAs
   ---------------------------------------- */

.layout-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--layout-gap-md);
}

.layout-centered>* {
  width: 100%;
  max-width: var(--content-max-width-md);
}

/* Wider variant for centered layout */
.layout-centered--wide>* {
  max-width: var(--content-max-width-lg);
}

/* Narrow variant for centered layout */
.layout-centered--narrow>* {
  max-width: var(--content-max-width-sm);
}


/* ----------------------------------------
   3.2 Layout: Split
   - Two columns side by side
   - Content + Media pattern
   - Responsive: stacks on mobile
   ---------------------------------------- */

.layout-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--layout-gap-lg);
  align-items: center;
}

/* Split: Reversed (Media left, Content right) */
.layout-split--reverse > .slot--content {
  order: 2;
}

.layout-split--reverse > .slot--media {
  order: 1;
}

/* Split: 60/40 ratio */
.layout-split--60-40 {
  grid-template-columns: 1.5fr 1fr;
}

/* Split: 40/60 ratio */
.layout-split--40-60 {
  grid-template-columns: 1fr 1.5fr;
}

/* Split: 67/33 ratio (2/3 + 1/3) */
.layout-split--67-33 {
  grid-template-columns: 2fr 1fr;
}

/* Split: 33/67 ratio (1/3 + 2/3) */
.layout-split--33-67 {
  grid-template-columns: 1fr 2fr;
}

/* Split: Align items to top */
.layout-split--align-start {
  align-items: start;
}

/* Split: Align items to bottom */
.layout-split--align-end {
  align-items: end;
}

/* Split: Larger gap */
.layout-split--gap-xl {
  gap: var(--layout-gap-xl);
}

/* Split: Smaller gap */
.layout-split--gap-sm {
  gap: var(--layout-gap-sm);
}

/* Split: Responsive behavior */
@media (max-width: 768px) {
  .layout-split {
    grid-template-columns: 1fr;
  }

  /* On mobile, content always comes first */
  .layout-split>.layout__content {
    order: 1;
  }

  .layout-split>.layout__media {
    order: 2;
  }

  /* Unless explicitly media-first on mobile */
  .layout-split--mobile-media-first>.layout__media {
    order: 1;
  }

  .layout-split--mobile-media-first>.layout__content {
    order: 2;
  }
}


/* ----------------------------------------
   3.3 Layout: Stacked
   - Vertical stack with consistent spacing
   - Ideal for: single-column content, articles
   ---------------------------------------- */

.layout-stacked {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-md);
}

.layout-stacked--gap-sm {
  gap: var(--layout-gap-sm);
}

.layout-stacked--gap-lg {
  gap: var(--layout-gap-lg);
}

.layout-stacked--gap-xl {
  gap: var(--layout-gap-xl);
}

/* Stacked with centered content */
.layout-stacked--centered {
  align-items: center;
  text-align: center;
}

/* Stacked with left-aligned content */
.layout-stacked--left {
  align-items: flex-start;
  text-align: left;
}


/* ----------------------------------------
   3.4 Layout: Grid (for cards)
   - Responsive card grid
   - Auto-fit with minimum card width
   ---------------------------------------- */

/* Base grid with auto-fit */
.layout-grid {
  display: grid;
  gap: var(--layout-gap-md);
}

/* Fixed column grids */
.layout-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.layout-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.layout-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Auto-fit grids (responsive without media queries) */
.layout-grid--auto-sm {
  /* Min card width: 200px */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.layout-grid--auto-md {
  /* Min card width: 280px */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.layout-grid--auto-lg {
  /* Min card width: 320px */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Grid gap variants */
.layout-grid--gap-sm {
  gap: var(--layout-gap-sm);
}

.layout-grid--gap-lg {
  gap: var(--layout-gap-lg);
}

/* Grid alignment variants */
.layout-grid--top {
  align-items: start;
}

/* Responsive: 2-col grid to 1-col on mobile */
@media (max-width: 640px) {
  .layout-grid--2 {
    grid-template-columns: 1fr;
  }
}

/* Responsive: 3-col → 2-col → 1-col */
@media (max-width: 1024px) {
  .layout-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .layout-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* Responsive: 4-col → 2-col → 1-col */
@media (max-width: 1024px) {
  .layout-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .layout-grid--4 {
    grid-template-columns: 1fr;
  }
}


/* ----------------------------------------
   3.5 Layout: Sidebar
   - Main content + sidebar
   - Sidebar can be left or right
   ---------------------------------------- */

.layout-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--layout-gap-lg);
  align-items: start;
}

/* Sidebar on left */
.layout-sidebar--left {
  grid-template-columns: 300px 1fr;
}

/* Wider sidebar */
.layout-sidebar--wide {
  grid-template-columns: 1fr 360px;
}

.layout-sidebar--left.layout-sidebar--wide {
  grid-template-columns: 360px 1fr;
}

/* Responsive: stack on tablet */
@media (max-width: 1024px) {

  .layout-sidebar,
  .layout-sidebar--left,
  .layout-sidebar--wide,
  .layout-sidebar--left.layout-sidebar--wide {
    grid-template-columns: 1fr;
  }

  .layout-sidebar>.layout__sidebar {
    order: 2;
  }

  .layout-sidebar>.layout__main {
    order: 1;
  }
}


/* ----------------------------------------
   3.6 Layout: Feature (alternating)
   - For features/services with alternating images
   - Each item is a split layout
   - Auto-reverses every other item
   ---------------------------------------- */

.layout-features {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-xl);
}

.layout-features>.layout-split:nth-child(even)>.layout__content {
  order: 2;
}

.layout-features>.layout-split:nth-child(even)>.layout__media {
  order: 1;
}

/* Disable alternating if needed */
.layout-features--no-alternate>.layout-split:nth-child(even)>.layout__content {
  order: 1;
}

.layout-features--no-alternate>.layout-split:nth-child(even)>.layout__media {
  order: 2;
}


/* ----------------------------------------
   3.7 Layout: Hero variants
   - Special layouts for hero sections
   ---------------------------------------- */

/* Hero: Full height (viewport) */
.layout-hero {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.layout-hero--full {
  min-height: 100vh;
}

.layout-hero--compact {
  min-height: 60vh;
}

/* Hero with bottom content (scroll indicator, etc.) */
.layout-hero--with-bottom {
  justify-content: space-between;
  padding-block-end: var(--section-spacing-md);
}

/* Hero overlay content positioning */
.layout-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--container-padding);
}

/* Hero with background image */
.layout-hero--bg-image {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* ========================================
   4. LAYOUT SLOTS
   ======================================== */

/* Slots are containers within layouts where components go.
   Components should NOT set their own width or outer margins.
   ---------------------------------------- */

/* Content slot (text, headings, buttons) */
.layout__content {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-sm);
}

/* Constrain text width within content slot */
.layout__content>p,
.layout__content>.text-block {
  max-width: var(--content-max-width-md);
}

/* Media slot (images, videos) */
.layout__media {
  position: relative;
  width: 100%;
}

.layout__media img,
.layout__media video {
  width: 100%;
  height: auto;
  display: block;
}

/* Media with aspect ratio */
.layout__media--aspect-16-9 {
  aspect-ratio: 16 / 9;
}

.layout__media--aspect-4-3 {
  aspect-ratio: 4 / 3;
}

.layout__media--aspect-1-1 {
  aspect-ratio: 1 / 1;
}

.layout__media--aspect-3-4 {
  aspect-ratio: 3 / 4;
}

.layout__media img,
.layout__media video,
.layout__media--aspect-16-9 img,
.layout__media--aspect-4-3 img,
.layout__media--aspect-1-1 img,
.layout__media--aspect-3-4 img {
  object-fit: cover;
}

/* Cards slot (grid of cards) */
.layout__cards {
  width: 100%;
}

/* Main content slot (for sidebar layout) */
.layout__main {
  min-width: 0;
  /* Prevent flex/grid overflow */
}

/* Sidebar slot */
.layout__sidebar {
  position: sticky;
  top: var(--section-spacing-sm);
}

/* Header slot (for section headers) */
.layout__header {
  margin-block-end: var(--layout-gap-lg);
}

.layout__header--centered {
  text-align: center;
  max-width: var(--content-max-width-md);
  margin-inline: auto;
}

/* Footer slot (for section footers, CTAs) */
.layout__footer {
  margin-block-start: var(--layout-gap-lg);
}

.layout__footer--centered {
  text-align: center;
}


/* ========================================
   5. UTILITY MODIFIERS FOR LAYOUTS
   ======================================== */

/* Text alignment within layouts */
.layout--text-left {
  text-align: left;
}

.layout--text-center {
  text-align: center;
}

.layout--text-right {
  text-align: right;
}

/* Gap overrides */
.layout--gap-none {
  gap: 0;
}

.layout--gap-sm {
  gap: var(--layout-gap-sm);
}

.layout--gap-md {
  gap: var(--layout-gap-md);
}

.layout--gap-lg {
  gap: var(--layout-gap-lg);
}

.layout--gap-xl {
  gap: var(--layout-gap-xl);
}


/* ========================================
   6. SECTION + LAYOUT COMBINATIONS
   ======================================== */

/* Common pattern: Section with centered header + grid of cards */
.section-with-cards>.container>.layout__header {
  text-align: center;
  max-width: var(--content-max-width-md);
  margin-inline: auto;
  margin-block-end: var(--layout-gap-xl);
}

/* Common pattern: Section with split intro */
.section-intro-split>.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--layout-gap-xl);
  align-items: end;
  margin-block-end: var(--layout-gap-xl);
}

@media (max-width: 768px) {
  .section-intro-split>.container {
    grid-template-columns: 1fr;
  }
}


/* ========================================
   7. DEBUG MODE (development only)
   ======================================== */

/* Add .debug class to see layout boundaries */
.debug .section {
  outline: 2px dashed red;
}

.debug .container {
  outline: 2px dashed blue;
}

.debug [class*="layout-"] {
  outline: 2px dashed green;
}

.debug [class*="layout__"] {
  outline: 1px dashed orange;
}

/* ============================================================================
   SLOTS
   ============================================================================
   Slots are named areas within layouts that contain components.
   Each slot can hold one or multiple components.
   
   Architecture: LAYOUT → SLOTS → COMPONENTS
   ============================================================================ */

/* === Base Slot === */

.slot {
    /* Базовый контейнер для слота */
    /* Обычно spacing добавляется между слотами в layout, но можно и здесь */
}

/* Content slot — вертикальный ритм между компонентами через lobotomized owl.
   НЕ flex-контейнер — кнопки (inline-flex) идут в ряд естественно в потоке. */
.slot--content > * + * {
    margin-top: var(--space-5);
}

/* Первая кнопка — отступ от текста выше */
.slot--content > .btn:first-of-type {
    margin-top: var(--space-6);
}

/* Вторая кнопка рядом с первой — убираем вертикальный, добавляем горизонтальный */
.slot--content > .btn + .btn {
    margin-top: var(--space-6);
    margin-left: var(--space-3);
}

.slot:empty {
    display: none; /* Скрываем пустые слоты */
}


/* === Slot Types (by content behavior) === */

/* Actions slot - для кнопок и CTA элементов */
.slot--actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
}

/* Cards slot - для grid карточек */
.slot--cards {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(3, 1fr);
}

.slot--cards-2 {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(2, 1fr);
}

.slot--cards-4 {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(4, 1fr);
}

/* Media slot - для изображений и видео */
.slot--media {
    display: block;
}

/* Extra slot - для badges, icons, дополнительных элементов */
.slot--extra {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
}

/* List slot - для вертикальных списков элементов */
.slot--list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Stack slot - flex column с комфортным gap между компонентами */
.slot--stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    justify-content: center;
    align-items: flex-start;
}


/* === Slot Alignment Modifiers === */

.slot--start {
    justify-content: flex-start;
}

.slot--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}


.slot--end {
    justify-content: flex-end;
}

.slot--between {
    justify-content: space-between;
}

.slot--around {
    justify-content: space-around;
}


/* === Slot Spacing Modifiers === */

.slot--gap-sm {
    gap: var(--space-2);
}

.slot--gap-md {
    gap: var(--space-4);
}

.slot--gap-lg {
    gap: var(--space-6);
}

.slot--gap-xl {
    gap: var(--space-8);
}


/* === Responsive Behavior === */

@media (max-width: 991px) {
    .slot--cards,
    .slot--cards-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {
    .slot--cards,
    .slot--cards-2,
    .slot--cards-4 {
        grid-template-columns: 1fr;
    }
    
    .slot--actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .slot--actions > * {
        width: 100%; /* Кнопки на полную ширину на mobile */
    }
}


/* === Background Slot ===
   Слот 'background' рендерится абсолютно внутри section,
   вне container — занимает всю площадь секции.
   Используется для видео-фона (vid-bg). */

.section--has-bg-slot {
    position: relative;
    overflow: hidden;
}

/* Container и его содержимое — поверх фона */
.section--has-bg-slot > .container {
    position: relative;
    z-index: 1;
}

/* Слот фона — абсолютно, на всю секцию, под контентом */
.section--has-bg-slot > .slot--background {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Оверлей поверх фона (видео/изображения) — под контентом */
.section--has-bg-slot > .slot--background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

/* === Slot + Layout Integration === */

/* Spacing между слотами внутри layouts */
.layout-centered > .slot,
.layout-split-left > .slot,
.layout-split-right > .slot {
    margin-bottom: var(--space-6);
}

.layout-centered > .slot:last-child,
.layout-split-left > .slot:last-child,
.layout-split-right > .slot:last-child {
    margin-bottom: 0;
}

/* Grid layouts не нуждаются в margin между слотами (есть gap) */
.layout-grid-2 > .slot,
.layout-grid-3 > .slot,
.layout-grid-4 > .slot {
    margin-bottom: 0;
}


/* === Special Slot Behaviors === */

/* Eyebrow slot - маленький текст над заголовком */
.slot--eyebrow {
    margin-bottom: var(--space-2);
}

/* Subheading slot - после заголовка */
.slot--subheading {
    margin-top: var(--space-3);
}

/* Actions после текста */
.slot--actions + .slot--extra,
.slot--subheading + .slot--actions {
    margin-top: var(--space-6);
}


/* === Multi-column Grid Slots === */
/* Используется когда layout не поддерживает автоматические колонки.
   Например: layout-stacked с разбивкой контента на колонки.
   slot--col-2, slot--col-3 задают равноширокие колонки внутри слота. */

.slot--col-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.slot--col-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.slot--col-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

@media (max-width: 991px) {
    .slot--col-3,
    .slot--col-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {
    .slot--col-2,
    .slot--col-3,
    .slot--col-4 {
        grid-template-columns: 1fr;
    }
}


/* === Additional Slot Modifiers === */

/* compact — уменьшенные отступы между компонентами */
.slot--compact {
    gap: var(--space-2);
}

/* right — выравнивание по правому краю (для flex-слотов) */
.slot--right {
    justify-content: flex-end;
    text-align: right;
}

/* grow — слот растягивается, заполняя доступное пространство */
.slot--grow {
    flex: 1;
}

/* stretch — растягивает дочерние элементы поперёк основной оси */
.slot--stretch {
    align-items: stretch;
}

/* wrap — для слотов с множеством мелких элементов (badges, chips, tags) */
.slot--wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* full — компоненты занимают 100% ширины */
.slot--full > * {
    width: 100%;
}


/* === overflow-image — изображение выходит за границы слота ===
   Slot modifier для product/feature hero.
   Дочерний img/picture масштабируется за пределы слота вертикально,
   чтобы создать эффект "плавающего" продукта.

   Использование в JSON: "modifiers": ["overflow-image"]

   Секция ДОЛЖНА иметь overflow: visible (добавь section--overflow-visible)
   или убедись что контейнер не обрезает overflow.

   На мобильных overflow сбрасывается — изображение вписывается в слот. */

.slot--overflow-image {
    position: relative;
    overflow: visible;
}

/* image-wrapper внутри слота не должен обрезать картинку */
.slot--overflow-image .image-wrapper {
    overflow: visible;
    background: transparent;
}

/* Базовый эффект: картинка на 40% больше слота, симметрично */
.slot--overflow-image img,
.slot--overflow-image picture {
    display: block;
    width: 140%;
    height: auto;
    margin-left: -20%;
    filter: drop-shadow(0 32px 64px rgba(0, 0, 0, 0.3));
}

/* Выровнять снизу — продукт "стоит" на нижней границе */
.slot--overflow-image--bottom img,
.slot--overflow-image--bottom picture {
    vertical-align: bottom;
}

/* Выровнять вправо — продукт вылезает вправо и вверх */
.slot--overflow-image--right .image-wrapper {
    overflow: visible;
}

.slot--overflow-image--right img,
.slot--overflow-image--right picture {
    width: 150%;
    margin-left: 0;
    margin-right: -25%;
}

/* Без тени */
.slot--overflow-image--no-shadow img,
.slot--overflow-image--no-shadow picture {
    filter: none;
}

@media (max-width: 768px) {
    /* На мобильных — обычное поведение */
    .slot--overflow-image,
    .slot--overflow-image .image-wrapper {
        overflow: hidden;
    }

    .slot--overflow-image img,
    .slot--overflow-image picture,
    .slot--overflow-image--right img,
    .slot--overflow-image--right picture {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        filter: none;
    }
}


/* === section--halfcircle-left — фото-полукруг от левого края секции ===

   Механика: слот background рендерится вне container (стандартное поведение SectionRenderer).
   section--halfcircle-left переопределяет его размер/форму: только левые 45%, полукруг справа.
   Container сдвигается вправо через padding-left.

   Использование в JSON (settings):
     extra_classes: "section--halfcircle-left"
   Слот должен называться "background".
   Оверлей (::after) убирается — изображение не затемняется.

   На мобильных — изображение превращается в горизонтальную полосу сверху. */

/* Убираем тёмный оверлей поверх изображения */
.section--halfcircle-left > .slot--background::after {
    display: none;
}

/* Переопределяем размер и форму background-слота */
.section--halfcircle-left > .slot--background {
    inset: 0 auto 0 0;      /* прижат к левому краю */
    width: 55%;
    border-radius: 0 9999px 9999px 0;
    overflow: hidden;
    pointer-events: none;
}

/* Изображение внутри слота — cover на весь слот */
.section--halfcircle-left > .slot--background .image-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.section--halfcircle-left > .slot--background img,
.section--halfcircle-left > .slot--background picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Container: отступ слева освобождает место под полукруг.
   color: var(--on-primary) — принудительно правильный цвет текста
   независимо от каскада и дочерних компонентов. */
.section--halfcircle-left > .container {
    position: relative;
    z-index: 1;
    padding-left: 58%;
    min-height: 420px;
    display: flex;
    align-items: center;
    color: var(--on-primary);
}

@media (max-width: 768px) {
    .section--halfcircle-left > .slot--background {
        inset: 0 0 auto 0;
        width: 100%;
        height: 260px;
        border-radius: 0 0 var(--radius-full) var(--radius-full);
    }

    .section--halfcircle-left > .container {
        padding-left: var(--container-padding);
        padding-top: 300px;
        min-height: unset;
        color: var(--on-primary);
    }
}


/* === section--diagonal-split ===
   Вариант А: фото заполняет правую зону целиком — тот же clip-path что у ::after панели.
   Слева: фон секции + текст.
   Справа (~38%): фото вырезано диагональю — единая фигура с панелью.
   Слоёвка: фото (z-index 1) > container (z-index 3, текст всегда поверх).
   ::after панель убрана — фото само создаёт правую зону.

   slot background — изображение (рендерится вне container). */

.section--diagonal-split {
    overflow: hidden;
    position: relative;
    min-height: 520px;
}

/* Container поверх ВСЕГО */
.section--diagonal-split > .container {
    position: relative;
    z-index: 3;
    min-height: 520px;
    display: flex;
    align-items: center;
    padding-block: var(--section-spacing-lg);
}

/* Текст — в левых ~52% */
.section--diagonal-split .slot--content {
    width: 52%;
    flex-shrink: 0;
    margin-right: auto;
}

/* layout-centered — прижимаем к левому краю */
.section--diagonal-split .layout-centered {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

/* Фото: inset: 0, clip-path — фото заполняет правую зону целиком.
   z-index 1 — под container (текст поверх), но поверх фона секции.
   Все дочерние элементы должны получить height: 100% по цепочке. */
.section--diagonal-split > .slot--background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 38% 100%);
    display: block;
}

/* Убираем тёмный оверлей SlotRenderer */
.section--diagonal-split > .slot--background::after {
    display: none;
}

/* Вся цепочка от slot до img должна быть height:100% */
.section--diagonal-split > .slot--background,
.section--diagonal-split > .slot--background > .image-wrapper,
.section--diagonal-split > .slot--background > div {
    width: 100%;
    height: 100%;
}

.section--diagonal-split > .slot--background .image-wrapper {
    overflow: hidden;
}

.section--diagonal-split > .slot--background img,
.section--diagonal-split > .slot--background picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
    .section--diagonal-split {
        min-height: unset;
    }

    .section--diagonal-split > .container {
        min-height: unset;
        padding-block: var(--section-spacing-md);
    }

    /* На мобильном фото — полная ширина блоком под текстом, без clip-path */
    .section--diagonal-split > .slot--background {
        position: relative;
        inset: unset;
        clip-path: none;
        width: 100%;
        height: 240px;
        margin-top: var(--space-8);
    }

    .section--diagonal-split .slot--content {
        width: 100%;
        margin-right: 0;
    }

    .section--diagonal-split .layout-centered {
        justify-content: flex-start;
    }
}