/**
 * Public-site styles for HTML produced by Redactor / Arx (columns, grids).
 * The editor loads vendor/redactor CSS separately; this file is always included on the site profile.
 */

/* Arx/Redactor column blocks (legacy + current markup). */
[data-arx-type="columns"],
[data-block="layout"] {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* data-block uses explicit flex-basis percentages (e.g. 25%). */
[data-block="layout"] {
  gap: 0;
}

[data-arx-type="columns"] {
  gap: 1rem;
}

[data-arx-type="column"],
[data-block="layout"] > [data-block="column"] {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

/* Responsive images in Redactor content (columns, figures, page body). */
.content-body img,
[data-arx-type="columns"] img,
[data-arx-type="column"] img,
[data-block="layout"] img,
[data-block="column"] img,
.arx-grid-cols img,
.arx-grid-4 img {
  display: block;
  max-width: 100%;
  height: auto;
}

.content-body figure,
[data-block="layout"] figure,
[data-block="column"] figure,
[data-arx-type="column"] figure {
  max-width: 100%;
  margin: 0;
}

.content-body figure img,
[data-block="layout"] figure img,
[data-block="column"] figure img,
[data-arx-type="column"] figure img {
  max-width: 100%;
  height: auto;
}

/* Grid helpers added by page processing. */
.arx-grid-cols,
.arx-grid-4 {
  display: grid !important;
  width: 100%;
  gap: 1rem;
}

@media (max-width: 767.98px) {
  [data-arx-type="columns"],
  [data-block="layout"] {
    flex-direction: column;
  }
  [data-arx-type="column"],
  [data-block="layout"] > [data-block="column"] {
    flex: 1 1 100%;
    max-width: 100%;
    flex-basis: 100% !important;
  }
  .arx-grid-cols,
  .arx-grid-4 {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .arx-grid-cols-3,
  .arx-grid-cols-4,
  .arx-grid-cols-5,
  .arx-grid-cols-6,
  .arx-grid-cols-7,
  .arx-grid-cols-8,
  .arx-grid-cols-9,
  .arx-grid-cols-10,
  .arx-grid-cols-11,
  .arx-grid-cols-12,
  .arx-grid-cols-16,
  .arx-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Theme-aware helpers for Redactor / CMS markup (light + dark mode). */
main .text-primary,
main .text-primary-emphasis,
.content-body .text-primary,
.content-body .text-primary-emphasis {
  color: var(--bs-primary-text-emphasis, var(--bs-primary)) !important;
}

main .badge.bg-light,
main .badge.text-bg-light,
.content-body .badge.bg-light,
.content-body .badge.text-bg-light {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}

main .bg-primary.bg-opacity-10.text-primary,
main .badge.bg-primary.bg-opacity-10.text-primary,
.content-body .bg-primary.bg-opacity-10.text-primary,
.content-body .badge.bg-primary.bg-opacity-10.text-primary {
  background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
  color: var(--bs-primary-text-emphasis, var(--bs-primary)) !important;
}

main .bg-primary-subtle.text-primary-emphasis,
main .badge.bg-primary-subtle.text-primary-emphasis,
.content-body .bg-primary-subtle.text-primary-emphasis,
.content-body .badge.bg-primary-subtle.text-primary-emphasis {
  background-color: var(--bs-primary-bg-subtle, rgba(var(--bs-primary-rgb), 0.12)) !important;
  color: var(--bs-primary-text-emphasis, var(--bs-primary)) !important;
}

main .rounded-circle.bg-primary-subtle.text-primary-emphasis,
main .rounded-circle.bg-primary.bg-opacity-10.text-primary,
.content-body .rounded-circle.bg-primary-subtle.text-primary-emphasis,
.content-body .rounded-circle.bg-primary.bg-opacity-10.text-primary {
  background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
  color: var(--bs-primary-text-emphasis, var(--bs-primary)) !important;
}

main svg.text-primary,
main svg.text-primary-emphasis,
.content-body svg.text-primary,
.content-body svg.text-primary-emphasis {
  color: var(--bs-primary-text-emphasis, var(--bs-primary)) !important;
  fill: currentColor;
}