/* Section Grid Layout Utilities (opt-in via Section Metadata -> Style) */

/*
 * Usage:
 * - Select one layout preset (e.g., grid-6-6, grid-3-9, grid-4-4-4)
 * - Optionally combine with gap/alignment/padding/mobile classes
 * - Mobile stacks vertically by default (< 992px)
 * - Works both as direct children of <main> and inside .fragment-wrapper
 */

:is(main, .fragment-wrapper) > .section:is(
  .grid-12,
  .grid-6-6,
  .grid-6-6-reverse,
  .grid-4-8,
  .grid-4-8-reverse,
  .grid-zigzag-4-8,
  .grid-zigzag-3-9,
  .grid-8-4,
  .grid-3-9,
  .grid-3-9-reverse,
  .grid-9-3,
  .grid-repeat-4-8,
  .grid-repeat-8-4,
  .grid-repeat-6-6,
  .grid-repeat-3-9,
  .grid-repeat-equal-4,
  .grid-repeat-equal-3,
  .grid-repeat-equal-6,
  .grid-5-7,
  .grid-7-5,
  .grid-2-10,
  .grid-10-2,
  .grid-1-11,
  .grid-11-1,
  .grid-4-4-4,
  .grid-3-3-6,
  .grid-3-6-3,
  .grid-6-3-3,
  .grid-2-5-5,
  .grid-5-2-5,
  .grid-5-5-2,
  .grid-3-3-3-3
) {
  --grid-layout-gap: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-layout-gap);
  align-items: var(--grid-layout-align-items, start);
  justify-items: var(--grid-layout-justify-items, stretch);
}

:is(main, .fragment-wrapper) > .section:is(
  .grid-12,
  .grid-6-6,
  .grid-6-6-reverse,
  .grid-4-8,
  .grid-4-8-reverse,
  .grid-zigzag-4-8,
  .grid-zigzag-3-9,
  .grid-8-4,
  .grid-3-9,
  .grid-3-9-reverse,
  .grid-9-3,
  .grid-repeat-4-8,
  .grid-repeat-8-4,
  .grid-repeat-6-6,
  .grid-repeat-3-9,
  .grid-repeat-equal-4,
  .grid-repeat-equal-3,
  .grid-repeat-equal-6,
  .grid-5-7,
  .grid-7-5,
  .grid-2-10,
  .grid-10-2,
  .grid-1-11,
  .grid-11-1,
  .grid-4-4-4,
  .grid-3-3-6,
  .grid-3-6-3,
  .grid-6-3-3,
  .grid-2-5-5,
  .grid-5-2-5,
  .grid-5-5-2
) > div {
  min-width: 0;
}

/* Gap utilities */
:is(main, .fragment-wrapper) > .section.grid-gap-none { --grid-layout-gap: 0; }
:is(main, .fragment-wrapper) > .section.grid-gap-sm { --grid-layout-gap: 12px; }
:is(main, .fragment-wrapper) > .section.grid-gap-md { --grid-layout-gap: 16px; }
:is(main, .fragment-wrapper) > .section.grid-gap-lg { --grid-layout-gap: 24px; }
:is(main, .fragment-wrapper) > .section.grid-gap-xl { --grid-layout-gap: 32px; }

/* Grid item alignment utilities (section-wide) */
:is(main, .fragment-wrapper) > .section.grid-items-start { --grid-layout-align-items: start; }
:is(main, .fragment-wrapper) > .section.grid-items-center { --grid-layout-align-items: center; }
:is(main, .fragment-wrapper) > .section.grid-items-center picture > img { margin-inline: auto; }
:is(main, .fragment-wrapper) > .section.grid-items-end { --grid-layout-align-items: end; }
:is(main, .fragment-wrapper) > .section.grid-items-stretch { --grid-layout-align-items: stretch; }

:is(main, .fragment-wrapper) > .section.grid-justify-start { --grid-layout-justify-items: start; }
:is(main, .fragment-wrapper) > .section.grid-justify-center { --grid-layout-justify-items: center; }
:is(main, .fragment-wrapper) > .section.grid-justify-end { --grid-layout-justify-items: end; }
:is(main, .fragment-wrapper) > .section.grid-justify-stretch { --grid-layout-justify-items: stretch; }

/* Optional inner spacing per column wrapper */
:is(main, .fragment-wrapper) > .section.grid-col-pad-sm > div { padding: 12px; }
:is(main, .fragment-wrapper) > .section.grid-col-pad-md > div { padding: 16px; }
:is(main, .fragment-wrapper) > .section.grid-col-pad-lg > div { padding: 24px; }

/* Optional content alignment inside each column wrapper */
:is(main, .fragment-wrapper) > .section.grid-col-content-start > div,
:is(main, .fragment-wrapper) > .section.grid-col-content-center > div,
:is(main, .fragment-wrapper) > .section.grid-col-content-end > div {
  display: flex;
  flex-direction: column;
}

:is(main, .fragment-wrapper) > .section.grid-col-content-start > div { justify-content: flex-start; }
:is(main, .fragment-wrapper) > .section.grid-col-content-center > div { justify-content: center; }
:is(main, .fragment-wrapper) > .section.grid-col-content-end > div { justify-content: flex-end; }

/* Mobile behavior */
@media (max-width: 991px) {
  :is(main, .fragment-wrapper) > .section.grid-mobile-reverse {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--grid-layout-gap, 24px);
  }

  :is(main, .fragment-wrapper) > .section.grid-mobile-reverse > div {
    width: 100%;
  }
}

/* Desktop/tablet layouts (12-column grid base) */
@media (min-width: 992px) {
  :is(main, .fragment-wrapper) > .section:is(
    .grid-12,
    .grid-6-6,
    .grid-6-6-reverse,
    .grid-4-8,
    .grid-4-8-reverse,
    .grid-zigzag-4-8,
    .grid-zigzag-3-9,
    .grid-8-4,
    .grid-3-9,
    .grid-3-9-reverse,
    .grid-9-3,
    .grid-repeat-4-8,
    .grid-repeat-8-4,
    .grid-repeat-6-6,
    .grid-repeat-3-9,
    .grid-repeat-equal-4,
    .grid-repeat-equal-3,
    .grid-repeat-equal-6,
    .grid-5-7,
    .grid-7-5,
    .grid-2-10,
    .grid-10-2,
    .grid-1-11,
    .grid-11-1,
    .grid-4-4-4,
    .grid-3-3-6,
    .grid-3-6-3,
    .grid-6-3-3,
    .grid-2-5-5,
    .grid-5-2-5,
    .grid-5-5-2,
    .grid-3-3-3-3
  ) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  :is(main, .fragment-wrapper) > .section.grid-12 > div {
    grid-column: span 12;
  }

  :is(main, .fragment-wrapper) > .section.grid-6-6 > div:nth-child(1) { grid-column: span 6; }
  :is(main, .fragment-wrapper) > .section.grid-6-6 > div:nth-child(2) { grid-column: span 6; }

  /* Reverse: swap visual order so 1st child renders right, 2nd child renders left */
  :is(main, .fragment-wrapper) > .section.grid-6-6-reverse > div:nth-child(1) { grid-column: 7 / span 6; grid-row: 1; }
  :is(main, .fragment-wrapper) > .section.grid-6-6-reverse > div:nth-child(2) { grid-column: 1 / span 6; grid-row: 1; }

  :is(main, .fragment-wrapper) > .section.grid-4-8 > div:nth-child(1) { grid-column: span 4; }
  :is(main, .fragment-wrapper) > .section.grid-4-8 > div:nth-child(2) { grid-column: span 8; }
  :is(main, .fragment-wrapper) > .section.grid-4-8-reverse > div:nth-child(1) { grid-column: 9 / span 4; grid-row: 1; }
  :is(main, .fragment-wrapper) > .section.grid-4-8-reverse > div:nth-child(2) { grid-column: 1 / span 8; grid-row: 1; }

  /*
   * Reusable zig-zag pairs: 4/8, then 8/4, then 4/8...
   * Content is authored in pairs and the visual alternation is handled
   * by explicit column placement without changing DOM order.
   */
  :is(main, .fragment-wrapper) > .section.grid-zigzag-4-8 {
    grid-auto-flow: dense;
  }

  :is(main, .fragment-wrapper) > .section.grid-zigzag-4-8 > :nth-child(4n+1) { grid-column: 1 / 5; }
  :is(main, .fragment-wrapper) > .section.grid-zigzag-4-8 > :nth-child(4n+2) { grid-column: 5 / 13; }
  :is(main, .fragment-wrapper) > .section.grid-zigzag-4-8 > :nth-child(4n+3) { grid-column: 9 / 13; }
  :is(main, .fragment-wrapper) > .section.grid-zigzag-4-8 > :nth-child(4n) { grid-column: 1 / 9; }

  /* Fallback for an incomplete trailing pair */
  :is(main, .fragment-wrapper) > .section.grid-zigzag-4-8 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  :is(main, .fragment-wrapper) > .section.grid-zigzag-3-9 {
    grid-auto-flow: dense;
  }

  :is(main, .fragment-wrapper) > .section.grid-zigzag-3-9 > :nth-child(4n+1) { grid-column: 1 / 4; }
  :is(main, .fragment-wrapper) > .section.grid-zigzag-3-9 > :nth-child(4n+2) { grid-column: 4 / 13; }
  :is(main, .fragment-wrapper) > .section.grid-zigzag-3-9 > :nth-child(4n+3) { grid-column: 10 / 13; }
  :is(main, .fragment-wrapper) > .section.grid-zigzag-3-9 > :nth-child(4n) { grid-column: 1 / 10; }
  :is(main, .fragment-wrapper) > .section.grid-zigzag-3-9 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  :is(main, .fragment-wrapper) > .section.grid-8-4 > div:nth-child(1) { grid-column: span 8; }
  :is(main, .fragment-wrapper) > .section.grid-8-4 > div:nth-child(2) { grid-column: span 4; }

  :is(main, .fragment-wrapper) > .section.grid-3-9 > div:nth-child(1) { grid-column: span 3; }
  :is(main, .fragment-wrapper) > .section.grid-3-9 > div:nth-child(2) { grid-column: span 9; }
  :is(main, .fragment-wrapper) > .section.grid-3-9-reverse > div:nth-child(1) { grid-column: 10 / span 3; grid-row: 1; }
  :is(main, .fragment-wrapper) > .section.grid-3-9-reverse > div:nth-child(2) { grid-column: 1 / span 9; grid-row: 1; }

  :is(main, .fragment-wrapper) > .section.grid-9-3 > div:nth-child(1) { grid-column: span 9; }
  :is(main, .fragment-wrapper) > .section.grid-9-3 > div:nth-child(2) { grid-column: span 3; }

  :is(main, .fragment-wrapper) > .section.grid-5-7 > div:nth-child(1) { grid-column: span 5; }
  :is(main, .fragment-wrapper) > .section.grid-5-7 > div:nth-child(2) { grid-column: span 7; }

  :is(main, .fragment-wrapper) > .section.grid-7-5 > div:nth-child(1) { grid-column: span 7; }
  :is(main, .fragment-wrapper) > .section.grid-7-5 > div:nth-child(2) { grid-column: span 5; }

  :is(main, .fragment-wrapper) > .section.grid-2-10 > div:nth-child(1) { grid-column: span 2; }
  :is(main, .fragment-wrapper) > .section.grid-2-10 > div:nth-child(2) { grid-column: span 10; }

  :is(main, .fragment-wrapper) > .section.grid-10-2 > div:nth-child(1) { grid-column: span 10; }
  :is(main, .fragment-wrapper) > .section.grid-10-2 > div:nth-child(2) { grid-column: span 2; }

  :is(main, .fragment-wrapper) > .section.grid-1-11 > div:nth-child(1) { grid-column: span 1; }
  :is(main, .fragment-wrapper) > .section.grid-1-11 > div:nth-child(2) { grid-column: span 11; }

  :is(main, .fragment-wrapper) > .section.grid-11-1 > div:nth-child(1) { grid-column: span 11; }
  :is(main, .fragment-wrapper) > .section.grid-11-1 > div:nth-child(2) { grid-column: span 1; }

  :is(main, .fragment-wrapper) > .section.grid-4-4-4 > div:nth-child(1) { grid-column: span 4; }
  :is(main, .fragment-wrapper) > .section.grid-4-4-4 > div:nth-child(2) { grid-column: span 4; }
  :is(main, .fragment-wrapper) > .section.grid-4-4-4 > div:nth-child(3) { grid-column: span 4; }

  :is(main, .fragment-wrapper) > .section.grid-3-3-6 > div:nth-child(1) { grid-column: span 3; }
  :is(main, .fragment-wrapper) > .section.grid-3-3-6 > div:nth-child(2) { grid-column: span 3; }
  :is(main, .fragment-wrapper) > .section.grid-3-3-6 > div:nth-child(3) { grid-column: span 6; }

  :is(main, .fragment-wrapper) > .section.grid-3-6-3 > div:nth-child(1) { grid-column: span 3; }
  :is(main, .fragment-wrapper) > .section.grid-3-6-3 > div:nth-child(2) { grid-column: span 6; }
  :is(main, .fragment-wrapper) > .section.grid-3-6-3 > div:nth-child(3) { grid-column: span 3; }

  :is(main, .fragment-wrapper) > .section.grid-6-3-3 > div:nth-child(1) { grid-column: span 6; }
  :is(main, .fragment-wrapper) > .section.grid-6-3-3 > div:nth-child(2) { grid-column: span 3; }
  :is(main, .fragment-wrapper) > .section.grid-6-3-3 > div:nth-child(3) { grid-column: span 3; }

  :is(main, .fragment-wrapper) > .section.grid-2-5-5 > div:nth-child(1) { grid-column: span 2; }
  :is(main, .fragment-wrapper) > .section.grid-2-5-5 > div:nth-child(2) { grid-column: span 5; }
  :is(main, .fragment-wrapper) > .section.grid-2-5-5 > div:nth-child(3) { grid-column: span 5; }

  :is(main, .fragment-wrapper) > .section.grid-5-2-5 > div:nth-child(1) { grid-column: span 5; }
  :is(main, .fragment-wrapper) > .section.grid-5-2-5 > div:nth-child(2) { grid-column: span 2; }
  :is(main, .fragment-wrapper) > .section.grid-5-2-5 > div:nth-child(3) { grid-column: span 5; }

  :is(main, .fragment-wrapper) > .section.grid-5-5-2 > div:nth-child(1) { grid-column: span 5; }
  :is(main, .fragment-wrapper) > .section.grid-5-5-2 > div:nth-child(2) { grid-column: span 5; }
  :is(main, .fragment-wrapper) > .section.grid-5-5-2 > div:nth-child(3) { grid-column: span 2; }

  :is(main, .fragment-wrapper) > .section.grid-3-3-3-3 > div:nth-child(1) { grid-column: span 3; }
  :is(main, .fragment-wrapper) > .section.grid-3-3-3-3 > div:nth-child(2) { grid-column: span 3; }
  :is(main, .fragment-wrapper) > .section.grid-3-3-3-3 > div:nth-child(3) { grid-column: span 3; }
  :is(main, .fragment-wrapper) > .section.grid-3-3-3-3 > div:nth-child(4) { grid-column: span 3; }

  :is(main, .fragment-wrapper) > .section.grid-repeat-4-8 > :nth-child(odd) { grid-column: span 4; }
  :is(main, .fragment-wrapper) > .section.grid-repeat-4-8 > :nth-child(even) { grid-column: span 8; }
  :is(main, .fragment-wrapper) > .section.grid-repeat-8-4 > :nth-child(odd) { grid-column: span 8; }
  :is(main, .fragment-wrapper) > .section.grid-repeat-8-4 > :nth-child(even) { grid-column: span 4; }
  :is(main, .fragment-wrapper) > .section.grid-repeat-6-6 > :nth-child(odd) { grid-column: span 6; }
  :is(main, .fragment-wrapper) > .section.grid-repeat-6-6 > :nth-child(even) { grid-column: span 6; }
  :is(main, .fragment-wrapper) > .section.grid-repeat-3-9 > :nth-child(odd) { grid-column: span 3; }
  :is(main, .fragment-wrapper) > .section.grid-repeat-3-9 > :nth-child(even) { grid-column: span 9; }
  :is(main, .fragment-wrapper) > .section.grid-repeat-equal-4 > * { grid-column: span 4; }
  :is(main, .fragment-wrapper) > .section.grid-repeat-equal-3 > * { grid-column: span 3; }
  :is(main, .fragment-wrapper) > .section.grid-repeat-equal-6 > * { grid-column: span 6; }

  /*
   * Any wrappers beyond the defined preset count become full-width rows.
   * This prevents overlap and avoids breaking existing content.
   */
  :is(main, .fragment-wrapper) > .section:is(
    .grid-6-6,
    .grid-6-6-reverse,
    .grid-4-8,
    .grid-4-8-reverse,
    .grid-8-4,
    .grid-3-9,
    .grid-3-9-reverse,
    .grid-9-3,
    .grid-5-7,
    .grid-7-5,
    .grid-2-10,
    .grid-10-2,
    .grid-1-11,
    .grid-11-1
  ) > div:nth-child(n+3),
  :is(main, .fragment-wrapper) > .section:is(
    .grid-4-4-4,
    .grid-3-3-6,
    .grid-3-6-3,
    .grid-6-3-3,
    .grid-2-5-5,
    .grid-5-2-5,
    .grid-5-5-2
  ) > div:nth-child(n+4) {
    grid-column: 1 / -1;
  }

  .section.grid-items-stretch:is(.grid-zigzag-4-8, .grid-zigzag-3-9) > .default-content-wrapper {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .section.grid-items-stretch:is(.grid-zigzag-4-8, .grid-zigzag-3-9) > .default-content-wrapper > p {
    flex: 1;
    margin: 0;
    min-height: 0;
    overflow: hidden;
  }

  .section.grid-items-stretch:is(.grid-zigzag-4-8, .grid-zigzag-3-9) picture,
  .section.grid-items-stretch:is(.grid-zigzag-4-8, .grid-zigzag-3-9) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}