/*
 * Shared card-grid balancing
 * Keeps four-card groups in a complete 2 × 2 layout and prevents card
 * content from forcing uneven or overflowing columns.
 */

:is(
  .flagship-grid,
  .programs-grid,
  .online-card-grid,
  .compact-option-grid,
  .event-grid,
  .program-options,
  .eligibility-grid,
  .output-grid,
  .why-grid,
  .trust-grid
) > * {
  min-width: 0;
}

@media (min-width: 981px) {
  .programs-grid,
  .flagship-grid:has(> :last-child:nth-child(4)),
  .program-options:has(> :last-child:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .online-card-grid:has(> :last-child:nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 721px) and (max-width: 980px) {
  :is(.flagship-grid, .programs-grid, .online-card-grid, .program-options) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  :is(.flagship-grid, .programs-grid, .online-card-grid, .program-options) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Symbolic online-event backgrounds
 * Each card receives a thematic image while a strong navy veil protects
 * text contrast and keeps the artwork appropriately subtle.
 */

:is(.online-card-grid > .online-card, .compact-option-grid > .compact-option) {
  --card-symbol: url("/assets/online-symbol-governance-20260723.webp");
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  border-color: rgba(143, 186, 215, 0.34);
  background-color: #0b2947;
  background-image:
    linear-gradient(
      90deg,
      rgba(7, 26, 49, 0.97) 0%,
      rgba(7, 26, 49, 0.92) 44%,
      rgba(7, 26, 49, 0.76) 100%
    ),
    var(--card-symbol);
  background-position: center;
  background-size: cover;
  box-shadow: 0 18px 38px rgba(2, 13, 26, 0.2);
}

.page-ar :is(.online-card-grid > .online-card, .compact-option-grid > .compact-option) {
  background-image:
    linear-gradient(
      270deg,
      rgba(7, 26, 49, 0.97) 0%,
      rgba(7, 26, 49, 0.92) 44%,
      rgba(7, 26, 49, 0.76) 100%
    ),
    var(--card-symbol);
}

:is(.online-card-grid, .compact-option-grid) > :nth-child(4n + 1) {
  --card-symbol: url("/assets/online-symbol-flow-20260723.webp");
}

:is(.online-card-grid, .compact-option-grid) > :nth-child(4n + 2) {
  --card-symbol: url("/assets/online-symbol-measurement-20260723.webp");
}

:is(.online-card-grid, .compact-option-grid) > :nth-child(4n + 3) {
  --card-symbol: url("/assets/online-symbol-governance-20260723.webp");
}

:is(.online-card-grid, .compact-option-grid) > :nth-child(4n + 4) {
  --card-symbol: url("/assets/online-symbol-transformation-20260723.webp");
}

:is(.online-card, .compact-option) :is(h3, p, .event-date) {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

:is(.online-card, .compact-option) .status-badge {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.9);
  color: #0b2947;
}

.online-card .button--navy {
  border: 1px solid rgba(214, 166, 43, 0.65);
  background: rgba(7, 26, 49, 0.88);
  color: #fff;
  backdrop-filter: blur(4px);
}

.compact-option .text-link {
  color: #e5bd57;
}