/*
Layer: 02-layout
Datei: sections.css
*/

.section {
  padding-block: 4rem;
}

@media (max-width: 768px) {
  .section {
    padding-block: 2.5rem;
  }
}

@media (max-width: 480px) {
  .section {
    padding-block: 2rem;
  }
}

/* ============================
   SECTION STYLE VARIANTS (Adiumento) – Mit sanften Übergängen
   ============================ */

/* Grundlayout: Fullbleed aus schmalem .container (100% = Elternbreite) */
.wp-block-group.is-style-section-light,
.wp-block-group.is-style-section-dark,
.wp-block-group.is-style-section-accent,
.wp-block-group.is-style-section-accent-light,
.wp-block-group.is-style-section-neutral,
.wp-block-group.is-style-section-secondary {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc((100% - 100vw) / 2);
  left: auto;
  right: auto;
  box-sizing: border-box;
  padding-block: clamp(2.75rem, 4.5vw, 3.75rem);
  overflow: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* adiumento/cards-grid: Fullbleed am Section-Wrapper, Inhalt in .adiumento-section__inner */
.wp-block-group.adiumento-cards-grid[class*="is-style-section-"] > .adiumento-section__inner {
  width: min(var(--page-width, 85%), var(--max-width, 1200px));
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

.wp-block-group.adiumento-cards-grid > .adiumento-section__inner > :where(*) {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

/* ==========================================================
   ✨ OPTION 1: Sanfte Schatten/Gradient-Übergänge (Subtil)
   ========================================================== */

/* Schatten oben für sanften Übergang zur vorherigen Sektion */
.wp-block-group.is-style-section-light::before,
.wp-block-group.is-style-section-dark::before,
.wp-block-group.is-style-section-accent::before,
.wp-block-group.is-style-section-accent-light::before,
.wp-block-group.is-style-section-neutral::before,
.wp-block-group.is-style-section-secondary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.15;
}

/* Schatten unten für sanften Übergang zur nächsten Sektion */
.wp-block-group.is-style-section-light::after,
.wp-block-group.is-style-section-dark::after,
.wp-block-group.is-style-section-accent::after,
.wp-block-group.is-style-section-accent-light::after,
.wp-block-group.is-style-section-neutral::after,
.wp-block-group.is-style-section-secondary::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.15;
}

/* Gradient für helle Sektionen */
.is-style-section-light::before {
  background: linear-gradient(to bottom, rgba(0,0,0,0.08), transparent);
}
.is-style-section-light::after {
  background: linear-gradient(to top, rgba(0,0,0,0.08), transparent);
}

/* Gradient für dunkle Sektionen */
.is-style-section-dark::before {
  background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
}
.is-style-section-dark::after {
  background: linear-gradient(to top, rgba(255,255,255,0.1), transparent);
}

/* Gradient für Akzent-Sektionen */
.is-style-section-accent::before,
.is-style-section-accent-light::before {
  background: linear-gradient(to bottom, rgba(0,0,0,0.12), transparent);
}
.is-style-section-accent::after,
.is-style-section-accent-light::after {
  background: linear-gradient(to top, rgba(0,0,0,0.12), transparent);
}

/* Gradient für neutrale Sektionen */
.is-style-section-neutral::before {
  background: linear-gradient(to bottom, rgba(0,0,0,0.05), transparent);
}
.is-style-section-neutral::after {
  background: linear-gradient(to top, rgba(0,0,0,0.05), transparent);
}

/* Gradient für Sekundär-Sektionen */
.is-style-section-secondary::before {
  background: linear-gradient(to bottom, rgba(0,0,0,0.15), transparent);
}
.is-style-section-secondary::after {
  background: linear-gradient(to top, rgba(0,0,0,0.15), transparent);
}

/* Verschachtelte Sections: kein zweites 100vw-Breakout (sonst rutscht Inhalt nach rechts) */
.wp-block-group[class*="is-style-section-"] .wp-block-group[class*="is-style-section-"] {
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important;
  right: auto !important;
  margin-inline: 0 !important;
}

.wp-block-group[class*="is-style-section-"] .wp-block-group[class*="is-style-section-"]::before,
.wp-block-group[class*="is-style-section-"] .wp-block-group[class*="is-style-section-"]::after {
  display: none;
}

/* Inhalt zentriert halten (ohne "alles breiter machen"):
   - Fullbleed bleibt die Section selbst (100vw)
   - Inhalt wird auf Containerbreite begrenzt
   - Nur alignfull bleibt unberührt (alignwide soll hier NICHT ausbrechen) */
.wp-block-group.is-style-section-light:not(.adiumento-cards-grid) > :where(:not(.alignfull):not(.adiumento-section__inner):not(.adiumento-icon-cards-grid-section__inner):not(.adiumento-service-grid-section__inner):not(.case-snapshot__inner):not(.example-cards__inner)),
.wp-block-group.is-style-section-dark:not(.adiumento-cards-grid) > :where(:not(.alignfull):not(.adiumento-section__inner):not(.adiumento-icon-cards-grid-section__inner):not(.adiumento-service-grid-section__inner):not(.case-snapshot__inner):not(.example-cards__inner)),
.wp-block-group.is-style-section-accent:not(.adiumento-cards-grid) > :where(:not(.alignfull):not(.adiumento-section__inner):not(.adiumento-icon-cards-grid-section__inner):not(.adiumento-service-grid-section__inner):not(.case-snapshot__inner):not(.example-cards__inner)),
.wp-block-group.is-style-section-accent-light:not(.adiumento-cards-grid) > :where(:not(.alignfull):not(.adiumento-section__inner):not(.adiumento-icon-cards-grid-section__inner):not(.adiumento-service-grid-section__inner):not(.case-snapshot__inner):not(.example-cards__inner)),
.wp-block-group.is-style-section-neutral:not(.adiumento-cards-grid) > :where(:not(.alignfull):not(.adiumento-section__inner):not(.adiumento-icon-cards-grid-section__inner):not(.adiumento-service-grid-section__inner):not(.case-snapshot__inner):not(.example-cards__inner)),
.wp-block-group.is-style-section-secondary:not(.adiumento-cards-grid) > :where(:not(.alignfull):not(.adiumento-section__inner):not(.adiumento-icon-cards-grid-section__inner):not(.adiumento-service-grid-section__inner):not(.case-snapshot__inner):not(.example-cards__inner)) {
  width: min(var(--page-width, 85%), var(--max-width, 1200px));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
  position: relative;
  z-index: 2;
}

/* alignwide innerhalb von Sections: gleiche Containerbreite wie andere Inhalte (nicht 100vw) */
.wp-block-group[class*="is-style-section-"] > .alignwide {
  width: min(var(--page-width, 85%), var(--max-width, 1200px));
  max-width: min(var(--page-width, 85%), var(--max-width, 1200px));
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
  left: auto !important;
  right: auto !important;
}

/* Blöcke direkt im schmalen .container (zwischen Fullbleed-Sections) */
.site-main > .container > :is(.alignwide, .adiumento-carousel-focus, .adiumento-testimonials-section) {
  width: min(var(--page-width, 85%), var(--max-width, 1200px));
  max-width: min(var(--page-width, 85%), var(--max-width, 1200px));
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
  left: auto !important;
  right: auto !important;
}

/* Falls Gutenberg einen inner container rendert: ebenfalls begrenzen */
.wp-block-group.is-style-section-light > .wp-block-group__inner-container,
.wp-block-group.is-style-section-dark > .wp-block-group__inner-container,
.wp-block-group.is-style-section-accent > .wp-block-group__inner-container,
.wp-block-group.is-style-section-accent-light > .wp-block-group__inner-container,
.wp-block-group.is-style-section-neutral > .wp-block-group__inner-container,
.wp-block-group.is-style-section-secondary > .wp-block-group__inner-container {
  width: min(var(--page-width, 85%), var(--max-width, 1200px));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
  position: relative;
  z-index: 2;
}

/* ===== Farbvarianten ===== */

/* Helle Standardfläche (weiß) */
.is-style-section-light {
  background-color: var(--color-white);
  color: var(--color-text);
}

/* Dunkler Kontrastabschnitt */
.is-style-section-dark {
  background-color: var(--color-dark);
  color: var(--color-text-light);
}

/* Leuchtendes Akzentblau */
.is-style-section-accent {
  background-color: var(--color-accent);
  color: var(--color-text-light);
}

/* Dezentes helles Orange – CTA/Highlights (ehem. Hellblau) */
.is-style-section-accent-light {
  background: linear-gradient(
    180deg,
    rgba(240, 90, 40, 0.94) 0%,
    rgba(240, 90, 40, 0.82) 55%,
    rgba(240, 90, 40, 0.92) 100%
  );
  color: var(--color-text-light);
}

.is-style-section-accent-light :where(h1, h2, h3, h4, p, li, .wp-block-heading) {
  color: var(--color-text-light);
}

.is-style-section-accent-light h2.wp-block-heading::after {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.55)
  );
}

.is-style-section-accent-light .wp-block-button.is-style-outline .wp-block-button__link {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.88) !important;
}

.is-style-section-accent-light .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: #fff !important;
}

/* Neutraler, heller Graubereich */
.is-style-section-neutral {
  background-color: var(--color-neutral-light, #f5f8fa);
  color: var(--color-text);
}

/* 🟠 Sekundärfarbe (Orange) */
.is-style-section-secondary {
  background-color: var(--color-secondary);
  color: var(--color-text-light);
}

/* ============================
   🎨 Gutenberg Editor-Vorschau
   ============================ */

.editor-styles-wrapper {
  --color-primary: #0066B3;
  --color-secondary: #F05A28;
  --color-accent: #00AEEF;
  --color-accent-light: #5FD6F9;
  --color-dark: #0E2A3C;
  --color-neutral-light: #f5f8fa;
  --color-white: #FFFFFF;
  --color-text: #1A1A1A;
  --color-text-light: #FFFFFF;
}

/* ===== Hintergrundfarben ===== */
.editor-styles-wrapper .is-style-section-light {
  background-color: var(--color-white);
  color: var(--color-text);
}

.editor-styles-wrapper .is-style-section-dark {
  background-color: var(--color-dark);
  color: var(--color-text-light);
}

.editor-styles-wrapper .is-style-section-accent {
  background-color: var(--color-accent);
  color: var(--color-text-light);
}

.editor-styles-wrapper .is-style-section-accent-light {
  background: linear-gradient(
    180deg,
    rgba(240, 90, 40, 0.94) 0%,
    rgba(240, 90, 40, 0.82) 55%,
    rgba(240, 90, 40, 0.92) 100%
  );
  color: var(--color-text-light);
}

.editor-styles-wrapper .is-style-section-neutral {
  background-color: var(--color-neutral-light);
  color: var(--color-text);
}

.editor-styles-wrapper .is-style-section-secondary {
  background-color: var(--color-secondary);
  color: var(--color-text-light);
}

/* ===== Layout im Editor korrigieren ===== */
.editor-styles-wrapper .wp-block-group.is-style-section-light,
.editor-styles-wrapper .wp-block-group.is-style-section-dark,
.editor-styles-wrapper .wp-block-group.is-style-section-accent,
.editor-styles-wrapper .wp-block-group.is-style-section-accent-light,
.editor-styles-wrapper .wp-block-group.is-style-section-neutral,
.editor-styles-wrapper .wp-block-group.is-style-section-secondary {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-block: 3rem;
  box-sizing: border-box;
  position: relative;
  left: auto;
  right: auto;
  margin-left: 0;
  margin-right: 0;
}

/* ============================
   🎨 Gutenberg Style Indicators
   ============================ */

/* Basis-Styling für Farbindikatoren im Style-Menü */
.components-block-style__item .components-flex__item > span:first-child::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

/* Weiß / Hell */
.components-block-style__item[aria-label*="Hell"] .components-flex__item > span:first-child::before {
  background-color: var(--color-white, #ffffff);
}

/* Dunkel */
.components-block-style__item[aria-label*="Dunkel"] .components-flex__item > span:first-child::before {
  background-color: var(--color-dark, #0E2A3C);
}

/* Akzent (Hellblau) */
.components-block-style__item[aria-label*="Akzent"] .components-flex__item > span:first-child::before {
  background-color: var(--color-accent, #00AEEF);
}

/* Akzent Hell (Orange dezent) */
.components-block-style__item[aria-label*="Accent Light"] .components-flex__item > span:first-child::before,
.components-block-style__item[aria-label*="Akzent hell"] .components-flex__item > span:first-child::before {
  background-color: var(--color-secondary, #F05A28);
}

/* Neutral */
.components-block-style__item[aria-label*="Neutral"] .components-flex__item > span:first-child::before {
  background-color: var(--color-neutral-light, #f5f8fa);
}

/* Sekundär (Orange) */
.components-block-style__item[aria-label*="Sekundär"] .components-flex__item > span:first-child::before {
  background-color: var(--color-secondary, #F05A28);
}