/*
 * KAI Native Section Library v1.
 *
 * Reusable, page-agnostic contracts only. Legacy page-specific CSS remains in
 * older layers until the corresponding Production content has been migrated.
 */

.kai-library-section {
  --kai-library-canvas: var(--wp--custom--kai--visual--canvas, var(--wp--preset--color--canvas, #fffdfd));
  --kai-library-surface: var(--wp--custom--kai--visual--surface, var(--wp--preset--color--surface, #fff));
  --kai-library-surface-2: var(--wp--custom--kai--visual--surface-2, var(--wp--preset--color--surface-2, #fff7f9));
  --kai-library-ink: var(--wp--custom--kai--visual--ink, var(--wp--preset--color--ink, #261d21));
  --kai-library-muted: var(--wp--custom--kai--visual--muted, var(--wp--preset--color--muted, #695d62));
  --kai-library-primary: var(--wp--custom--kai--visual--primary, var(--wp--preset--color--primary, #b20e2f));
  --kai-library-border: var(--wp--custom--kai--visual--border, rgba(111, 16, 38, .14));
  --kai-library-radius: var(--wp--custom--kai--radius--lg, 26px);
  --kai-library-radius-md: var(--wp--custom--kai--radius--md, 18px);
  --kai-library-shadow: var(--wp--custom--kai--shadow--1, 0 10px 30px rgba(56, 18, 31, .08));
  --kai-library-space: var(--wp--custom--kai--section--standard, clamp(3.5rem, 7vw, 6.5rem));
  margin-block: 0;
  color: var(--kai-library-ink);
  background: var(--kai-library-canvas);
}

.kai-library-section.is-style-kai-surface-light {
  background: var(--kai-library-canvas);
}

.kai-library-section.is-style-kai-surface-soft {
  background: var(--kai-library-surface-2);
}

.kai-library-section.is-style-kai-surface-dark {
  --kai-library-canvas: var(--wp--custom--kai--visual--dark-canvas, #0b0b0d);
  --kai-library-surface: var(--wp--custom--kai--visual--dark-surface, #151518);
  --kai-library-surface-2: var(--wp--custom--kai--visual--dark-surface-2, #1e1e22);
  --kai-library-ink: var(--wp--custom--kai--visual--dark-ink, #f7f5f6);
  --kai-library-muted: var(--wp--custom--kai--visual--dark-muted, #c9c2c5);
  --kai-library-border: var(--wp--custom--kai--visual--dark-border, rgba(255, 255, 255, .14));
  color: var(--kai-library-ink);
  background: var(--kai-library-canvas);
}

.kai-library-section :where(h1, h2, h3, h4, h5, h6) {
  color: var(--kai-library-ink);
}

.kai-library-section :where(p, li, figcaption, .kai-lead) {
  color: var(--kai-library-muted);
}

.kai-library-section .kai-section__inner {
  box-sizing: border-box;
  width: min(calc(100% - 2rem), var(--wp--style--global--wide-size, 1240px));
  max-width: var(--wp--style--global--wide-size, 1240px);
  margin-inline: auto;
  padding-block: var(--kai-library-space);
}

.kai-library-section .kai-section__inner.is-style-kai-density-compact {
  --kai-library-space: var(--wp--custom--kai--section--compact, clamp(2.5rem, 5vw, 4.5rem));
}

.kai-library-section .kai-section__inner.is-style-kai-density-standard {
  --kai-library-space: var(--wp--custom--kai--section--standard, clamp(3.5rem, 7vw, 6.5rem));
}

.kai-library-section .kai-section__inner.is-style-kai-density-spacious {
  --kai-library-space: var(--wp--custom--kai--section--spacious, clamp(5rem, 9vw, 8rem));
}

.kai-library-hero .kai-section__inner {
  display: grid;
  align-items: center;
  min-height: clamp(34rem, 66vh, 48rem);
}

.kai-library-hero .kai-lead {
  max-width: 44rem;
  font-size: var(--wp--preset--font-size--lg, 1.125rem);
}

.kai-library-section .kai-split.wp-block-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.75rem, 5vw, 4.5rem);
  direction: ltr;
}

.kai-library-section .kai-split > .wp-block-column {
  min-width: 0;
  direction: rtl;
}

.kai-library-section .kai-split :where(figure, img) {
  max-width: 100%;
}

.kai-library-section .kai-split figure {
  margin-block: 0;
}

.kai-library-section .kai-split img,
.kai-library-section .kai-media-grid img,
.kai-library-section .kai-media-gallery img {
  width: 100%;
  height: auto;
  border-radius: var(--kai-library-radius);
}

.kai-library-section .kai-media-grid,
.kai-library-section .kai-media-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.kai-library-section .kai-media-grid figure,
.kai-library-section .kai-media-gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--kai-library-radius);
  background: var(--kai-library-surface);
  box-shadow: var(--kai-library-shadow);
}

.kai-library-section .kai-card-grid.wp-block-columns,
.kai-library-section .kai-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.kai-library-section :where(.kai-library-card, .is-style-kai-library-card) {
  height: 100%;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--kai-library-border);
  border-radius: var(--kai-library-radius);
  background: var(--kai-library-surface);
  box-shadow: var(--kai-library-shadow);
}

.kai-library-section .kai-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.kai-library-section .kai-stat {
  padding: clamp(1.125rem, 2.5vw, 1.75rem);
  border: 1px solid var(--kai-library-border);
  border-radius: var(--kai-library-radius);
  background: var(--kai-library-surface);
  box-shadow: var(--kai-library-shadow);
}

.kai-library-section .kai-stat strong {
  display: block;
  margin-bottom: .5rem;
  color: var(--kai-library-primary);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
}

.kai-library-section .kai-process-rail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  counter-reset: kai-library-step;
}

.kai-library-section .kai-process-rail > * {
  counter-increment: kai-library-step;
  padding: clamp(1.125rem, 2.5vw, 1.75rem);
  border: 1px solid var(--kai-library-border);
  border-radius: var(--kai-library-radius);
  background: var(--kai-library-surface);
}

.kai-library-section .kai-process-rail > *::before {
  content: counter(kai-library-step, decimal-leading-zero);
  display: block;
  margin-bottom: .75rem;
  color: var(--kai-library-primary);
  font-size: 1.5rem;
  font-weight: 800;
}

.kai-library-section .wp-block-details,
.kai-library-section .is-style-kai-faq-item {
  margin-block: .75rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--kai-library-border);
  border-radius: var(--kai-library-radius-md);
  background: var(--kai-library-surface);
}

.kai-library-section .wp-block-details summary,
.kai-library-section .is-style-kai-faq-item summary {
  color: var(--kai-library-ink);
  font-weight: 800;
  cursor: pointer;
}

.kai-library-section .kai-library-query ul,
.kai-library-section .kai-library-query .wp-block-post-template {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding: 0;
}

.kai-library-section .kai-library-query li {
  overflow: hidden;
  border: 1px solid var(--kai-library-border);
  border-radius: var(--kai-library-radius);
  background: var(--kai-library-surface);
  box-shadow: var(--kai-library-shadow);
}

.kai-library-section .kai-library-query li > *:not(.wp-block-post-featured-image) {
  margin-inline: 1.25rem;
}

.kai-library-section .kai-library-query .wp-block-post-featured-image {
  margin: 0;
}

.kai-library-section .kai-library-query .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.kai-library-section .kai-library-cta {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

.kai-library-section .kai-library-cta .wp-block-buttons {
  justify-content: center;
}

.kai-library-section .kai-library-lead.wp-block-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

html[data-kai-theme="dark"] .kai-library-section:not(.is-style-kai-surface-dark) {
  --kai-library-canvas: var(--wp--custom--kai--visual--dark-canvas, #0b0b0d);
  --kai-library-surface: var(--wp--custom--kai--visual--dark-surface, #151518);
  --kai-library-surface-2: var(--wp--custom--kai--visual--dark-surface-2, #1e1e22);
  --kai-library-ink: var(--wp--custom--kai--visual--dark-ink, #f7f5f6);
  --kai-library-muted: var(--wp--custom--kai--visual--dark-muted, #c9c2c5);
  --kai-library-border: var(--wp--custom--kai--visual--dark-border, rgba(255, 255, 255, .14));
  color: var(--kai-library-ink);
  background: var(--kai-library-canvas);
}

@media (min-width: 700px) {
  .kai-library-section .kai-media-grid,
  .kai-library-section .kai-media-gallery,
  .kai-library-section .kai-card-grid.wp-block-columns,
  .kai-library-section .kai-card-grid,
  .kai-library-section .kai-library-query ul,
  .kai-library-section .kai-library-query .wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kai-library-section .kai-process-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .kai-library-section .kai-split.wp-block-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kai-library-section .kai-split.is-style-kai-split-media-left-50 > .wp-block-column:first-child {
    grid-column: 2;
  }

  .kai-library-section .kai-split.is-style-kai-split-media-left-50 > .wp-block-column:nth-child(2) {
    grid-column: 1;
    grid-row: 1;
  }

  .kai-library-section .kai-split.is-style-kai-split-media-right-50 > .wp-block-column:first-child {
    grid-column: 1;
  }

  .kai-library-section .kai-split.is-style-kai-split-media-right-50 > .wp-block-column:nth-child(2) {
    grid-column: 2;
  }

  .kai-library-section .kai-split.is-style-kai-split-media-left-40 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .kai-library-section .kai-split.is-style-kai-split-media-left-40 > .wp-block-column:first-child {
    grid-column: 2;
  }

  .kai-library-section .kai-split.is-style-kai-split-media-left-40 > .wp-block-column:nth-child(2) {
    grid-column: 1;
    grid-row: 1;
  }

  .kai-library-section .kai-split.is-style-kai-split-media-right-40 {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .kai-library-section .kai-split.is-style-kai-split-media-right-40 > .wp-block-column:first-child {
    grid-column: 1;
  }

  .kai-library-section .kai-split.is-style-kai-split-media-right-40 > .wp-block-column:nth-child(2) {
    grid-column: 2;
  }

  .kai-library-section .kai-media-grid,
  .kai-library-section .kai-media-gallery,
  .kai-library-section .kai-card-grid.wp-block-columns,
  .kai-library-section .kai-card-grid,
  .kai-library-section .kai-library-query ul,
  .kai-library-section .kai-library-query .wp-block-post-template {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kai-library-section .kai-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .kai-library-section .kai-process-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .kai-library-section .kai-library-lead.wp-block-columns {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}