/**
 * Block-specific styling (front-end + editor)
 *
 * Container/Card group styles:
 * - Light, Dark, Primary background choices
 * - Default rounded border radius
 * - Same padding rules as the 2-column Content block (`content-container`)
 */

:root {
  /* Sensible fallbacks if theme variables are missing in some contexts */
  --ata-container-padding-base: var(--content-container-spacing-base, 1rem);
  --ata-container-padding-mult: var(--content-container-padding-mult, 3);
  --ata-container-radius: var(--card-border-radius, 10px);
}

.wp-block-group.is-style-ata-container-light,
.wp-block-group.is-style-ata-container-dark,
.wp-block-group.is-style-ata-container-primary,
.wp-block-group.is-style-ata-container-transparent {
  padding: calc(var(--ata-container-padding-base) * 1);
  border-radius: var(--ata-container-radius);
}

@media screen and (min-width: 1200px) {
  .wp-block-group.is-style-ata-container-light,
  .wp-block-group.is-style-ata-container-dark,
  .wp-block-group.is-style-ata-container-primary,
  .wp-block-group.is-style-ata-container-transparent {
    padding: calc(var(--ata-container-padding-base) * var(--ata-container-padding-mult));
  }
}

.wp-block-group.is-style-ata-container-light {
  background: var(--color-lightest, #f7f7f7);
  color: var(--color-dark, #111);
}

.wp-block-group.is-style-ata-container-dark {
  background: var(--color-dark, #111);
  color: var(--color-white, #fff);
}

.wp-block-group.is-style-ata-container-primary {
  background: var(--color-primary, #0b5fff);
  color: var(--color-white, #fff);
}

.wp-block-group.is-style-ata-container-transparent {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
}

/* Keep common text elements readable on dark backgrounds */
.wp-block-group.is-style-ata-container-dark :where(h1, h2, h3, h4, h5, h6, p, li, blockquote),
.wp-block-group.is-style-ata-container-primary :where(h1, h2, h3, h4, h5, h6, p, li, blockquote) {
  color: inherit;
}

.wp-block-group.is-style-ata-container-dark a,
.wp-block-group.is-style-ata-container-primary a {
  color: inherit;
  text-decoration-color: currentColor;
}