/**
 * YA layout system
 *
 * Breakpoints:
 * - Mobile:     <480px
 * - Mobile L:   ≥480px
 * - Tablet:     ≥768px
 * - Tablet L:   ≥992px
 * - Desktop:    ≥1280px
 * - Big screen: ≥1920px
 *
 * Columns: 6 (Mobile/Mobile L) → 8 (Tablet) → 12 (Tablet L+)
 * Gutters: 12px → 16px → 24px, sourced from theme.json grid tokens.
 * Rows fill their parent; section margins and container width belong to the wrapper.
 *
 * Usage:
 *   <div class="row">
 *     <div class="col-6 col-md-8 col-lg-4">...</div>
 *   </div>
 */

body {
  padding-left: 0;
  padding-right: 0 !important;
  -webkit-font-smoothing: antialiased;
  background-color: var(--wp--preset--color--gray-300);
}

.row {
  --cols: 6;
  --gap: var(--wp--custom--grid--gutter--mobile);

  display: grid !important;
  gap: var(--gap);
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  width: 100%;
}

/* Beat WordPress block layout helpers (flex/flow) on the same element. */
.row.is-layout-flex,
.row.is-layout-flow,
.row.is-layout-constrained,
.wp-block-group.row {
  display: grid !important;
}

.row > * {
  --col-start: initial;
  --col-start-sm: initial;
  --col-start-md: initial;
  --col-start-tl: initial;
  --col-start-lg: initial;
  min-width: 0;
  max-width: none;
  margin-block-start: 0 !important;
}

/* Mobile — 6 columns */
.row > .col-1 {
  grid-column: var(--col-start, auto) / span 1;
}
.row > .col-2 {
  grid-column: var(--col-start, auto) / span 2;
}
.row > .col-3 {
  grid-column: var(--col-start, auto) / span 3;
}
.row > .col-4 {
  grid-column: var(--col-start, auto) / span 4;
}
.row > .col-5 {
  grid-column: var(--col-start, auto) / span 5;
}
.row > .col-6 {
  grid-column: var(--col-start, auto) / span 6;
}

.row > .col-start-1 {
  --col-start: 1;
}
.row > .col-start-2 {
  --col-start: 2;
}
.row > .col-start-3 {
  --col-start: 3;
}
.row > .col-start-4 {
  --col-start: 4;
}
.row > .col-start-5 {
  --col-start: 5;
}
.row > .col-start-6 {
  --col-start: 6;
}

/* Mobile L ≥480px — 6 columns */
@media (min-width: 480px) {
  .row > .col-sm-1 {
    grid-column: var(--col-start-sm, var(--col-start, auto)) / span 1;
  }
  .row > .col-sm-2 {
    grid-column: var(--col-start-sm, var(--col-start, auto)) / span 2;
  }
  .row > .col-sm-3 {
    grid-column: var(--col-start-sm, var(--col-start, auto)) / span 3;
  }
  .row > .col-sm-4 {
    grid-column: var(--col-start-sm, var(--col-start, auto)) / span 4;
  }
  .row > .col-sm-5 {
    grid-column: var(--col-start-sm, var(--col-start, auto)) / span 5;
  }
  .row > .col-sm-6 {
    grid-column: var(--col-start-sm, var(--col-start, auto)) / span 6;
  }

  .row > .col-start-sm-1 {
    --col-start-sm: 1;
  }
  .row > .col-start-sm-2 {
    --col-start-sm: 2;
  }
  .row > .col-start-sm-3 {
    --col-start-sm: 3;
  }
  .row > .col-start-sm-4 {
    --col-start-sm: 4;
  }
  .row > .col-start-sm-5 {
    --col-start-sm: 5;
  }
  .row > .col-start-sm-6 {
    --col-start-sm: 6;
  }
}

/* Tablet ≥768px — 8 columns */
@media (min-width: 768px) {
  .row {
    --cols: 8;
    --gap: var(--wp--custom--grid--gutter--tablet);
  }

  .row > .col-md-1 {
    grid-column: var(--col-start-md, var(--col-start-sm, var(--col-start, auto))) / span 1;
  }
  .row > .col-md-2 {
    grid-column: var(--col-start-md, var(--col-start-sm, var(--col-start, auto))) / span 2;
  }
  .row > .col-md-3 {
    grid-column: var(--col-start-md, var(--col-start-sm, var(--col-start, auto))) / span 3;
  }
  .row > .col-md-4 {
    grid-column: var(--col-start-md, var(--col-start-sm, var(--col-start, auto))) / span 4;
  }
  .row > .col-md-5 {
    grid-column: var(--col-start-md, var(--col-start-sm, var(--col-start, auto))) / span 5;
  }
  .row > .col-md-6 {
    grid-column: var(--col-start-md, var(--col-start-sm, var(--col-start, auto))) / span 6;
  }
  .row > .col-md-7 {
    grid-column: var(--col-start-md, var(--col-start-sm, var(--col-start, auto))) / span 7;
  }
  .row > .col-md-8 {
    grid-column: var(--col-start-md, var(--col-start-sm, var(--col-start, auto))) / span 8;
  }

  .row > .col-start-md-1 {
    --col-start-md: 1;
  }
  .row > .col-start-md-2 {
    --col-start-md: 2;
  }
  .row > .col-start-md-3 {
    --col-start-md: 3;
  }
  .row > .col-start-md-4 {
    --col-start-md: 4;
  }
  .row > .col-start-md-5 {
    --col-start-md: 5;
  }
  .row > .col-start-md-6 {
    --col-start-md: 6;
  }
  .row > .col-start-md-7 {
    --col-start-md: 7;
  }
  .row > .col-start-md-8 {
    --col-start-md: 8;
  }
}

/* Tablet L ≥992px — 12 columns */
@media (min-width: 992px) {
  .row { --cols: 12; }

  .row > .col-tl-1 {
    grid-column: var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto)))) / span 1;
  }
  .row > .col-tl-2 {
    grid-column: var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto)))) / span 2;
  }
  .row > .col-tl-3 {
    grid-column: var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto)))) / span 3;
  }
  .row > .col-tl-4 {
    grid-column: var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto)))) / span 4;
  }
  .row > .col-tl-5 {
    grid-column: var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto)))) / span 5;
  }
  .row > .col-tl-6 {
    grid-column: var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto)))) / span 6;
  }
  .row > .col-tl-7 {
    grid-column: var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto)))) / span 7;
  }
  .row > .col-tl-8 {
    grid-column: var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto)))) / span 8;
  }
  .row > .col-tl-9 {
    grid-column: var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto)))) / span 9;
  }
  .row > .col-tl-10 {
    grid-column: var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto)))) / span 10;
  }
  .row > .col-tl-11 {
    grid-column: var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto)))) / span 11;
  }
  .row > .col-tl-12 {
    grid-column: var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto)))) / span 12;
  }

  .row > .col-start-tl-1 {
    --col-start-tl: 1;
  }
  .row > .col-start-tl-2 {
    --col-start-tl: 2;
  }
  .row > .col-start-tl-3 {
    --col-start-tl: 3;
  }
  .row > .col-start-tl-4 {
    --col-start-tl: 4;
  }
  .row > .col-start-tl-5 {
    --col-start-tl: 5;
  }
  .row > .col-start-tl-6 {
    --col-start-tl: 6;
  }
  .row > .col-start-tl-7 {
    --col-start-tl: 7;
  }
  .row > .col-start-tl-8 {
    --col-start-tl: 8;
  }
  .row > .col-start-tl-9 {
    --col-start-tl: 9;
  }
  .row > .col-start-tl-10 {
    --col-start-tl: 10;
  }
  .row > .col-start-tl-11 {
    --col-start-tl: 11;
  }
  .row > .col-start-tl-12 {
    --col-start-tl: 12;
  }
}

/* Desktop ≥1280px — 12 columns */
@media (min-width: 1280px) {
  .row {
    --cols: 12;
    --gap: var(--wp--custom--grid--gutter--desktop);
  }

  .row > .col-lg-1 {
    grid-column: var(--col-start-lg, var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto))))) / span 1;
  }
  .row > .col-lg-2 {
    grid-column: var(--col-start-lg, var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto))))) / span 2;
  }
  .row > .col-lg-3 {
    grid-column: var(--col-start-lg, var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto))))) / span 3;
  }
  .row > .col-lg-4 {
    grid-column: var(--col-start-lg, var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto))))) / span 4;
  }
  .row > .col-lg-5 {
    grid-column: var(--col-start-lg, var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto))))) / span 5;
  }
  .row > .col-lg-6 {
    grid-column: var(--col-start-lg, var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto))))) / span 6;
  }
  .row > .col-lg-7 {
    grid-column: var(--col-start-lg, var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto))))) / span 7;
  }
  .row > .col-lg-8 {
    grid-column: var(--col-start-lg, var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto))))) / span 8;
  }
  .row > .col-lg-9 {
    grid-column: var(--col-start-lg, var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto))))) / span 9;
  }
  .row > .col-lg-10 {
    grid-column: var(--col-start-lg, var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto))))) / span 10;
  }
  .row > .col-lg-11 {
    grid-column: var(--col-start-lg, var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto))))) / span 11;
  }
  .row > .col-lg-12 {
    grid-column: var(--col-start-lg, var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto))))) / span 12;
  }

  .row > .col-start-lg-1 {
    --col-start-lg: 1;
  }
  .row > .col-start-lg-2 {
    --col-start-lg: 2;
  }
  .row > .col-start-lg-3 {
    --col-start-lg: 3;
  }
  .row > .col-start-lg-4 {
    --col-start-lg: 4;
  }
  .row > .col-start-lg-5 {
    --col-start-lg: 5;
  }
  .row > .col-start-lg-6 {
    --col-start-lg: 6;
  }
  .row > .col-start-lg-7 {
    --col-start-lg: 7;
  }
  .row > .col-start-lg-8 {
    --col-start-lg: 8;
  }
  .row > .col-start-lg-9 {
    --col-start-lg: 9;
  }
  .row > .col-start-lg-10 {
    --col-start-lg: 10;
  }
  .row > .col-start-lg-11 {
    --col-start-lg: 11;
  }
  .row > .col-start-lg-12 {
    --col-start-lg: 12;
  }
}

/* Starts also apply when a span is inherited from an earlier breakpoint. */
.row > [class*="col-start-"] {
  grid-column-start: var(--col-start-lg, var(--col-start-tl, var(--col-start-md, var(--col-start-sm, var(--col-start, auto)))));
}

/* AUB / VUX archive page shells (course grid styles live on ya-plugin/card-grid). */
.ya-archive-aub,
.ya-archive-vux {
  background-color: var(--wp--preset--color--gray-200);
}

/*
 * Single AUB: post content matches hero-split width (wide-size + outer padding),
 * so accordion and other blocks align with the hero card — not the 720px contentSize.
 */
.ya-single-aub > main > .wp-block-post-content {
  box-sizing: border-box;
  width: 100%;
  margin-block: 0;
  padding-inline: 0;
}

@media (min-width: 768px) {
  .ya-single-aub > main > .wp-block-post-content {
    padding-inline: var(--ya-spacing-40);
  }
}

/* Big screen ≥1920px inherits the desktop grid and gutter. */