/* ═══════════════════════════════════════════════════════════════════════════
   Cosmos V5 — Section Layouts
   Pure CSS layout system. The DOM structure never changes:
     <section data-layout="xxx">
       <header>…</header>            ← cosmos-header (rendered by header skin)
       <div class="cosmos-items">    ← items container
         <div class="cosmos-item">…</div>
         …
       </div>
     </section>
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Base / Reset ────────────────────────────────────────────────────────── */

/* Content width. Containers read --website-max-width (site-wide, set on the
   canvas root). A section with its own `contentWidth` re-sets that variable
   on the <section> itself (SectionRenderer), so every container below
   follows; layouts with an intrinsic cap (min(56rem, …) etc.) additionally
   read --section-max-width first so an explicit wider choice still wins. */
[data-layout] .cosmos-items {
  max-width: var(--website-max-width, 80rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

/* ─── 1. Cards 3-Column (default) ─────────────────────────────────────────
   Classic responsive grid: 1 → 2 → 3 columns.
   ──────────────────────────────────────────────────────────────────────── */

[data-layout="cards-3col"] .cosmos-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px) {
  [data-layout="cards-3col"] .cosmos-items { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  [data-layout="cards-3col"] .cosmos-items { grid-template-columns: repeat(3, 1fr); }
}

/* ─── 2. Cards 2-Column ───────────────────────────────────────────────────
   Two equal columns, great for wider cards.
   ──────────────────────────────────────────────────────────────────────── */

[data-layout="cards-2col"] .cosmos-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px) {
  [data-layout="cards-2col"] .cosmos-items { grid-template-columns: repeat(2, 1fr); }
}

/* ─── 3. Cards 4-Column ───────────────────────────────────────────────────
   Compact grid: 1 → 2 → 4 columns for dense content.
   ──────────────────────────────────────────────────────────────────────── */

[data-layout="cards-4col"] .cosmos-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  [data-layout="cards-4col"] .cosmos-items { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  [data-layout="cards-4col"] .cosmos-items { grid-template-columns: repeat(4, 1fr); }
}

/* ─── 4. Grid 2×2 ─────────────────────────────────────────────────────────
   Two-column matrix. Always two columns wide (never a third); more items add
   more rows. It used to hard-hide items past the 4th — that swallowed newly
   added items with no trace in the editor, so the cap is now the section's
   own `visibleItems` ("Read more") like every other layout.
   ──────────────────────────────────────────────────────────────────────── */

[data-layout="grid-2x2"] .cosmos-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: var(--section-max-width, min(56rem, var(--website-max-width, 56rem)));
}
@media (min-width: 640px) {
  [data-layout="grid-2x2"] .cosmos-items { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Visible items ("Read more") ─────────────────────────────────────────
   A section with `visibleItems` puts data-visible-items="N" on .cosmos-items;
   items past N stay hidden until cosmos-layouts.js sets data-items-expanded
   on the section (the "Read more" button). One rule per N up to
   VISIBLE_ITEMS_MAX (shared/types.ts) — keep the two in step.
   ──────────────────────────────────────────────────────────────────────── */

[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="1"] > :nth-child(n+2),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="2"] > :nth-child(n+3),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="3"] > :nth-child(n+4),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="4"] > :nth-child(n+5),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="5"] > :nth-child(n+6),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="6"] > :nth-child(n+7),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="7"] > :nth-child(n+8),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="8"] > :nth-child(n+9),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="9"] > :nth-child(n+10),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="10"] > :nth-child(n+11),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="11"] > :nth-child(n+12),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="12"] > :nth-child(n+13),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="13"] > :nth-child(n+14),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="14"] > :nth-child(n+15),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="15"] > :nth-child(n+16),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="16"] > :nth-child(n+17),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="17"] > :nth-child(n+18),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="18"] > :nth-child(n+19),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="19"] > :nth-child(n+20),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="20"] > :nth-child(n+21),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="21"] > :nth-child(n+22),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="22"] > :nth-child(n+23),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="23"] > :nth-child(n+24),
[data-section-id]:not([data-items-expanded]) .cosmos-items[data-visible-items="24"] > :nth-child(n+25) {
  display: none !important;
}

/* ─── 5. List ─────────────────────────────────────────────────────────────
   Single-column stacked list. Full width items.
   ──────────────────────────────────────────────────────────────────────── */

[data-layout="list"] .cosmos-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: var(--section-max-width, min(56rem, var(--website-max-width, 56rem)));
}

/* ─── 6. Slideshow ────────────────────────────────────────────────────────
   Full-width slides with smooth transitions, arrows, and dot indicators.
   Works without JS (CSS scroll-snap), enhanced with JS (nav + dots).
   ──────────────────────────────────────────────────────────────────────── */

[data-layout="slideshow"] .cosmos-items {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  gap: var(--slideshow-gap, 1.5rem);
  max-width: var(--section-max-width, none);
  padding: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
[data-layout="slideshow"] .cosmos-items::-webkit-scrollbar {
  display: none;
}
/* Items per slide. --spv starts from the configured count
   (section.slidesPerView → data-slides-per-view) and is reduced when the track
   is too narrow for cards of a reasonable width: cosmos-layouts.js measures the
   track and stamps data-slides-fit (authoritative); the container / media
   queries below are the no-JS fallback that still collapses phones to one.
   --slide-inset is the side padding of a plain (non-testimonial) cell, only
   wanted when a single card fills the row. */
[data-layout="slideshow"] { --spv: 1; --slide-inset: 2rem; }
[data-layout="slideshow"][data-slides-per-view="2"] { --spv: 2; --slide-inset: 0px; }
[data-layout="slideshow"][data-slides-per-view="3"] { --spv: 3; --slide-inset: 0px; }
@media (max-width: 639px) {
  [data-layout="slideshow"][data-slides-per-view] { --spv: 1; --slide-inset: 2rem; }
}
@supports (container-type: inline-size) {
  @container cosmos-preview (max-width: 639px) {
    [data-layout="slideshow"][data-slides-per-view] { --spv: 1; --slide-inset: 2rem; }
  }
}
[data-layout="slideshow"][data-slides-per-view][data-slides-fit="1"] { --spv: 1; --slide-inset: 2rem; }
[data-layout="slideshow"][data-slides-per-view][data-slides-fit="2"] { --spv: 2; --slide-inset: 0px; }

[data-layout="slideshow"] .cosmos-items > * {
  /* Each cell takes an equal share of the row minus the gaps between cells. */
  flex: 0 0 calc((100% - (var(--spv) - 1) * var(--slideshow-gap, 1.5rem)) / var(--spv));
  width: auto;
  scroll-snap-align: start;
  min-width: 0;
  box-sizing: border-box;
}
/* The cell IS the card element, so an inset here is the card's own padding.
   Plain cards get a side inset; testimonial cards keep the padding their box
   is given (--card-padding, cosmos-skins.css) — these selectors are stronger
   than that rule and used to zero it. */
[data-layout="slideshow"]:not([data-card-layout="testimonial"]) .cosmos-items > * {
  padding: 0 var(--slide-inset);
}
@media (min-width: 768px) {
  [data-layout="slideshow"][data-slides-per-view="1"]:not([data-card-layout="testimonial"]) .cosmos-items > * { padding: 0 4rem; }
}

/* ─── Slideshow Chrome (renderer + cosmos-layouts.js) ──────────────── */

.cosmos-slide-wrap {
  position: relative;
  overflow: hidden;
  /* .cosmos-items drops its padding for snap; keep a little air under the track. */
  padding-bottom: 2.5rem;
  /* Follows the section content width so the arrows hug the track. The
     explicit width matters: the section is a column flexbox, and auto margins
     alone would make the wrap shrink-to-fit its cards — whose width is a
     share of the wrap — so on narrow frames the track grew past the section. */
  width: 100%;
  max-width: var(--section-max-width, none);
  margin-left: auto;
  margin-right: auto;
}
.cosmos-slide-wrap .cosmos-items {
  padding-left: 0;
  padding-right: 0;
}

/* Arrows */
.cosmos-slide-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  color: #1d1d1f;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background 0.2s,
              box-shadow 0.2s;
  transform: translateY(-50%) scale(1);
  opacity: 1;
}
.cosmos-slide-arrow:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
  transform: translateY(-50%) scale(1.08);
}
.cosmos-slide-arrow:active {
  transform: translateY(-50%) scale(0.95);
}
.cosmos-slide-arrow[disabled] {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.85);
}
.cosmos-slide-arrow--prev { left: 1rem; }
.cosmos-slide-arrow--next { right: 1rem; }
@media (min-width: 768px) {
  .cosmos-slide-arrow { width: 3.5rem; height: 3.5rem; }
  .cosmos-slide-arrow--prev { left: 1.5rem; }
  .cosmos-slide-arrow--next { right: 1.5rem; }
}

/* Dot indicators */
.cosmos-slide-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 0 0.5rem;
}
.cosmos-slide-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  border: none;
  padding: 0;
  background: #d1d5db;
  cursor: pointer;
  transition: background 0.3s, width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cosmos-slide-dot:hover {
  background: #9ca3af;
}
.cosmos-slide-dot--active {
  background: #1d1d1f;
  width: 1.5rem;
}

/* Dark backdrops (SectionRenderer stamps data-scheme from the palette, a
   colour override, or a darkened background photo): invert the chrome so
   dots and arrows stay visible instead of vanishing into the background. */
[data-scheme="dark"] .cosmos-slide-dot { background: rgba(255, 255, 255, 0.35); }
[data-scheme="dark"] .cosmos-slide-dot:hover { background: rgba(255, 255, 255, 0.6); }
[data-scheme="dark"] .cosmos-slide-dot--active { background: #ffffff; }
[data-scheme="dark"] .cosmos-slide-arrow {
  background: rgba(20, 20, 22, 0.6);
  color: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.12);
}
[data-scheme="dark"] .cosmos-slide-arrow:hover {
  background: rgba(20, 20, 22, 0.8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* ─── 7. Alternating (Zigzag) ─────────────────────────────────────────────
   Full-width rows. Even items reverse direction for a zigzag feel.
   Each item becomes a horizontal row with image + text side by side.
   ──────────────────────────────────────────────────────────────────────── */

[data-layout="alternating"] .cosmos-items {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  max-width: var(--section-max-width, min(72rem, var(--website-max-width, 72rem)));
}
[data-layout="alternating"] .cosmos-items > * {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  [data-layout="alternating"] .cosmos-items > * {
    flex-direction: row;
    align-items: center;
  }
  [data-layout="alternating"] .cosmos-items > * > * {
    flex: 1;
  }
  [data-layout="alternating"] .cosmos-items > :nth-child(even) {
    flex-direction: row-reverse;
  }
}

/* ─── 8. Split ────────────────────────────────────────────────────────────
   Header takes the left half, items stack on the right.
   ──────────────────────────────────────────────────────────────────────── */

[data-layout="split"] {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  [data-layout="split"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: var(--website-max-width, 80rem);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    gap: 3rem;
    align-items: start;
  }
  [data-layout="split"] > header,
  [data-layout="split"] > :first-child {
    position: sticky;
    top: 2rem;
  }
}
[data-layout="split"] .cosmos-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ─── 9. Masonry ──────────────────────────────────────────────────────────
   CSS columns masonry layout. Staggered card heights.
   ──────────────────────────────────────────────────────────────────────── */

[data-layout="masonry"] .cosmos-items {
  column-count: 1;
  column-gap: 1.5rem;
}
[data-layout="masonry"] .cosmos-items > * {
  break-inside: avoid;
  margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
  [data-layout="masonry"] .cosmos-items { column-count: 2; }
}
@media (min-width: 1024px) {
  [data-layout="masonry"] .cosmos-items { column-count: 3; }
}

/* ─── 10. Feature Rows ────────────────────────────────────────────────────
   Each item is a wide horizontal row: image on one side, text on other.
   ──────────────────────────────────────────────────────────────────────── */

[data-layout="feature-rows"] .cosmos-items {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: var(--section-max-width, min(72rem, var(--website-max-width, 72rem)));
}
[data-layout="feature-rows"] .cosmos-items > * {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  border-radius: 0.75rem;
  /* Card Style colour + opacity when set; otherwise the section palette's
     surface token — never a fixed light colour, which painted white rows
     with white text on dark palettes. */
  background: var(--card-bg, var(--cos-surface, transparent));
}
@media (min-width: 768px) {
  [data-layout="feature-rows"] .cosmos-items > * {
    flex-direction: row;
    align-items: center;
  }
  [data-layout="feature-rows"] .cosmos-items > * > * {
    flex: 1;
  }
}

/* ─── 11. Magazine ───────────────────────────────────────────────────────
   Edge-to-edge grid with zero gaps. Items flush against each other
   like a modern editorial/magazine spread. Works best with overlay cards.
   ──────────────────────────────────────────────────────────────────────── */

[data-layout="magazine"] .cosmos-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  max-width: var(--section-max-width, none);
}
@media (min-width: 480px) {
  [data-layout="magazine"] .cosmos-items { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  [data-layout="magazine"] .cosmos-items { grid-template-columns: repeat(3, 1fr); }
}
[data-layout="magazine"] .cosmos-items > * {
  border-radius: 0;
  overflow: hidden;
}
[data-layout="magazine"] .skin-card-vertical {
  border-radius: 0;
}
/* Square-cornered layouts: the testimonial box still honours an explicit
   corner radius (Card Layout panel / set_section_spacing cardRadius). */
[data-layout="magazine"][data-card-layout="testimonial"] .skin-card-vertical,
[data-layout="big-matrix"][data-card-layout="testimonial"] .skin-card-vertical {
  border-radius: var(--card-radius, 0);
}
[data-layout="magazine"] .skin-card-vertical .cosmos-card-visual img,
[data-layout="magazine"] .skin-card-vertical .cosmos-card-visual figure {
  border-radius: 0;
}
[data-layout="magazine"] .cosmos-card-body {
  padding: 1rem 1.25rem;
}
[data-layout="magazine"][data-card-layout="overlay"] .skin-card-vertical {
  min-height: 22rem;
  border-radius: 0;
}
[data-layout="magazine"][data-card-layout="overlay"] .skin-card-vertical .cosmos-card-body {
  min-height: 22rem;
}

/* ─── 12. Big Matrix ─────────────────────────────────────────────────────
   Large square tiles, no gaps, all same height as tallest, max 2 per row.
   ──────────────────────────────────────────────────────────────────────── */

[data-layout="big-matrix"] .cosmos-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  max-width: var(--section-max-width, none);
}
@media (min-width: 480px) {
  [data-layout="big-matrix"] .cosmos-items { grid-template-columns: repeat(2, 1fr); }
}
[data-layout="big-matrix"] .cosmos-items > * {
  border-radius: 0;
  overflow: hidden;
  min-height: 0;
}
[data-layout="big-matrix"] .skin-card-vertical {
  border-radius: 0;
  height: 100%;
}
[data-layout="big-matrix"] .skin-card-vertical .cosmos-card-visual {
  aspect-ratio: 1 / 1;
  min-height: 0;
}
[data-layout="big-matrix"] .skin-card-vertical .cosmos-card-visual figure {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
[data-layout="big-matrix"] .skin-card-vertical .cosmos-card-visual img,
[data-layout="big-matrix"] .skin-card-vertical .cosmos-card-visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
[data-layout="big-matrix"] .cosmos-card-body {
  padding: 1rem 1.25rem;
}
[data-layout="big-matrix"][data-card-layout="overlay"] .skin-card-vertical {
  min-height: 50vw;
  border-radius: 0;
}
@media (min-width: 480px) {
  [data-layout="big-matrix"][data-card-layout="overlay"] .skin-card-vertical { min-height: 25vw; }
}
[data-layout="big-matrix"][data-card-layout="overlay"] .skin-card-vertical .cosmos-card-body {
  min-height: inherit;
}

/* ─── 13. Slides ─────────────────────────────────────────────────────────
   Each item fills full viewport height and width. One item per view.
   ──────────────────────────────────────────────────────────────────────── */

[data-layout="slides"] .cosmos-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  max-width: var(--section-max-width, none);
}
[data-layout="slides"] .cosmos-items > * {
  min-height: 100vh;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
[data-layout="slides"] .skin-card-vertical {
  min-height: 100vh;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative !important;
}
[data-layout="slides"] .skin-card-vertical .cosmos-card-visual {
  width: 100%;
  max-height: 60vh;
  overflow: hidden;
}
[data-layout="slides"] .skin-card-vertical .cosmos-card-visual figure {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
[data-layout="slides"] .skin-card-vertical .cosmos-card-visual img,
[data-layout="slides"] .skin-card-vertical .cosmos-card-visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
[data-layout="slides"] .cosmos-card-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}
[data-layout="slides"][data-card-layout="overlay"] .skin-card-vertical .cosmos-card-visual {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none;
}
[data-layout="slides"][data-card-layout="overlay"] .skin-card-vertical .cosmos-card-body {
  min-height: 100vh;
  justify-content: center;
}
[data-layout="slides"][data-card-layout="testimonial"] .skin-card-vertical {
  justify-content: center;
  align-items: center;
  /* Card box knobs win over the full-screen slide look (see cosmos-skins.css). */
  padding: var(--card-padding, 3rem 2rem);
  border-radius: var(--card-radius, 0);
}
[data-layout="slides"][data-card-layout="testimonial"] .skin-card-vertical .cosmos-card-visual {
  max-height: none;
}
[data-layout="slides"][data-card-layout="testimonial"] .cosmos-card-body {
  flex: none;
  max-width: 40rem;
}