/**
 * @file
 * Frontend styles for Advanced Container component.
 *
 * This CSS uses custom properties (CSS variables) for dynamic styling.
 * Variables are set inline by CKEditor during content creation and
 * are inherited by child elements.
 *
 * Uses !important on responsive rules to override inline styles from
 * content saved with older versions of the module.
 */

/* ============================================
   CONTAINER
   ============================================ */
.advanced-container {
  /* Declared here, not just as a var() fallback: custom properties inherit,
     so a container nested inside a column would otherwise pick up the OUTER
     container's width and gap and size itself against those. Setting them on
     the element stops the inheritance; an inline style still wins. */
  --container-width: 100%;
  --container-gap: 0;
  --adv-gap: 0px;
  --adv-cols: 1;

  display: flex;
  flex-wrap: wrap;
  width: var(--container-width, 100%);
  gap: var(--container-gap, 0);
  margin: 0 auto 1rem;
  box-sizing: border-box;
}

/* Vertical rhythm: containers behave like other block elements
   (paragraphs, lists, blockquotes) and leave space before the next
   sibling. The previous container leaving 1rem of bottom margin lets
   any standalone heading or text that follows breathe — heading top
   margin stays at 0 (single-direction margin pattern, the convention
   used by Drupal core, CKEditor, Bootstrap, Tailwind, etc.). */
.advanced-container .advanced-container {
  /* Avoid double spacing when nested. */
  margin-bottom: 0;
}

.advanced-container:last-child {
  /* No tail margin at the end of a field/block. */
  margin-bottom: 0;
}

/* Container background from data attribute (set as CSS variable by frontend JS) */
.advanced-container[data-background] {
  background-color: var(--container-background, transparent);
}

/* Container alignment - controls how columns are distributed */
.advanced-container[data-align="start"] {
  justify-content: flex-start;
}

.advanced-container[data-align="center"] {
  justify-content: center;
}

.advanced-container[data-align="end"] {
  justify-content: flex-end;
}

.advanced-container[data-align="stretch"] {
  align-items: stretch;
  justify-content: flex-start;
}

/* ============================================
   CONTAINER RESPONSIVE WIDTHS
   ============================================ */

/* Mobile-first: container with mobile width setting */
.advanced-container[data-width-mobile] {
  width: var(--container-width-mobile, 100%);
  max-width: var(--container-width-mobile, 100%);
}

/* Tablet (768px+) */
@media (min-width: 768px) {
  .advanced-container[data-width-tablet] {
    width: var(--container-width-tablet);
    max-width: var(--container-width-tablet);
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .advanced-container[data-width-desktop] {
    width: var(--container-width-desktop);
    max-width: var(--container-width-desktop);
  }
}

/* ============================================
   PER-DEVICE GAP / PADDING / MARGIN
   The general value is emitted as an inline style, so these overrides need
   !important to win — same reason the responsive column widths below do.
   Mobile-first: the mobile value is the base, tablet and desktop override it.
   ============================================ */

.advanced-container[data-gap-mobile] {
  gap: var(--container-gap-mobile) !important;
}

.advanced-container[data-padding-mobile] {
  padding: var(--container-padding-mobile) !important;
}

.advanced-container[data-margin-mobile] {
  margin-top: var(--container-margin-mobile) !important;
  margin-bottom: var(--container-margin-mobile) !important;
}

.advanced-column[data-padding-mobile] {
  padding: var(--column-padding-mobile) !important;
}

@media (min-width: 768px) {
  .advanced-container[data-gap-tablet] {
    gap: var(--container-gap-tablet) !important;
  }

  .advanced-container[data-padding-tablet] {
    padding: var(--container-padding-tablet) !important;
  }

  .advanced-container[data-margin-tablet] {
    margin-top: var(--container-margin-tablet) !important;
    margin-bottom: var(--container-margin-tablet) !important;
  }

  .advanced-column[data-padding-tablet] {
    padding: var(--column-padding-tablet) !important;
  }
}

@media (min-width: 1024px) {
  .advanced-container[data-gap-desktop] {
    gap: var(--container-gap-desktop) !important;
  }

  .advanced-container[data-padding-desktop] {
    padding: var(--container-padding-desktop) !important;
  }

  .advanced-container[data-margin-desktop] {
    margin-top: var(--container-margin-desktop) !important;
    margin-bottom: var(--container-margin-desktop) !important;
  }

  .advanced-column[data-padding-desktop] {
    padding: var(--column-padding-desktop) !important;
  }
}

/* ============================================
   COLUMN - Base styles
   ============================================ */
.advanced-column {
  /* Default: equal width columns, flex column for vertical alignment */
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-width: 0;
  box-sizing: border-box;
  /* min-width: 0 (above) prevents flex items from overflowing.
     overflow-wrap handles long strings. No overflow:hidden needed,
     which would clip focus outlines, dropdowns, and tooltips. */
  overflow-wrap: break-word;
  word-break: break-word; /* Safari fallback */

  /* Reset before use, for the same inheritance reason as the container: a
     nested column must not inherit its parent column's width or padding. */
  --column-width: auto;
  --column-padding: 0;
  --column-background: transparent;

  padding: var(--column-padding, 0);
  background-color: var(--column-background, transparent);
}

/* Column with explicit width */
.advanced-column[data-width] {
  flex: 0 0 var(--column-width, auto);
  max-width: var(--column-width, none);
}

/* ============================================
   PERCENTAGE WIDTHS AND THE GAP
   Two columns at 50% fill the row on their own, so the gap pushed the last
   one onto a new line. A percentage means "this share of the row", so each
   percentage column gives back its share of the gap. Widths in px/rem are
   left untouched: there the number is meant literally.

   The column count comes from :has() rather than from the markup, so adding
   or removing a column re-solves it with no re-render. Where :has() is not
   supported --adv-cols stays 1, the subtraction is zero, and the old
   behaviour applies.
   ============================================ */

.advanced-container:has(> .advanced-column:nth-child(2):last-child) {
  --adv-cols: 2;
}

.advanced-container:has(> .advanced-column:nth-child(3):last-child) {
  --adv-cols: 3;
}

.advanced-container:has(> .advanced-column:nth-child(4):last-child) {
  --adv-cols: 4;
}

.advanced-container:has(> .advanced-column:nth-child(5):last-child) {
  --adv-cols: 5;
}

.advanced-container:has(> .advanced-column:nth-child(6):last-child) {
  --adv-cols: 6;
}

.advanced-container:has(> .advanced-column:nth-child(7):last-child) {
  --adv-cols: 7;
}

.advanced-container:has(> .advanced-column:nth-child(8):last-child) {
  --adv-cols: 8;
}

.advanced-container:has(> .advanced-column:nth-child(9):last-child) {
  --adv-cols: 9;
}

.advanced-container:has(> .advanced-column:nth-child(10):last-child) {
  --adv-cols: 10;
}

.advanced-container:has(> .advanced-column:nth-child(11):last-child) {
  --adv-cols: 11;
}

.advanced-container:has(> .advanced-column:nth-child(12):last-child) {
  --adv-cols: 12;
}

.advanced-column[data-width-pct] {
  flex: 0 0 calc(var(--column-width) - var(--adv-gap, 0px) * (var(--adv-cols, 1) - 1) / var(--adv-cols, 1));
  max-width: calc(var(--column-width) - var(--adv-gap, 0px) * (var(--adv-cols, 1) - 1) / var(--adv-cols, 1));
}

/* ============================================
   COLUMN VERTICAL ALIGNMENT
   Uses both align-self (cross-axis in parent flex)
   and justify-content (content inside the column).
   ============================================ */
.advanced-column[data-valign="top"] {
  align-self: flex-start;
  justify-content: flex-start;
}

.advanced-column[data-valign="center"] {
  align-self: center;
  justify-content: center;
}

.advanced-column[data-valign="bottom"] {
  align-self: flex-end;
  justify-content: flex-end;
}

/* ============================================
   COLUMN RESPONSIVE WIDTHS

   Mobile-first approach:
   - Below 768px: mobile stacking (data-auto-stack)
   - 768px-1023px: tablet behavior (data-auto-stack-tablet)
   - 1024px and above: desktop layout

   Auto-stacking can be disabled with data-auto-stack="false"

   NOTE: !important is required here because the editor writes inline
   styles (style="flex:0 0 33%") directly on elements. Only !important
   can override inline styles from a stylesheet.  Themes that need to
   customise responsive behaviour should use the data-auto-stack
   attribute rather than trying to override these rules.
   ============================================ */

/* ============================================
   SHADOW FALLBACK
   Normally the shadow ships inline; these rules only matter when a text
   filter strips the style attribute. Values MUST match SHADOW_PRESETS in
   js/container.utils.js. No !important: an inline shadow always wins.
   ============================================ */
.advanced-container[data-shadow='soft'] {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.advanced-container[data-shadow='medium'] {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

.advanced-container[data-shadow='strong'] {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

/* ============================================
   MOBILE (<768px) - Auto-stack behavior
   ============================================ */
@media (max-width: 767px) {
  /* Auto-stack: columns with fixed width become full-width */
  .advanced-container[data-auto-stack="true"] .advanced-column[data-width],
  .advanced-container:not([data-auto-stack]) .advanced-column[data-width] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Columns without fixed width also stack */
  .advanced-container[data-auto-stack="true"] .advanced-column:not([data-width]):not([data-width-mobile]),
  .advanced-container:not([data-auto-stack]) .advanced-column:not([data-width]):not([data-width-mobile]) {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }

  /* If mobile width is explicitly set, use it */
  .advanced-column[data-width-mobile] {
    flex: 0 0 var(--column-width-mobile, 100%) !important;
    max-width: var(--column-width-mobile, 100%) !important;
  }

  /* Disable auto-stack if explicitly set to false */
  .advanced-container[data-auto-stack="false"] .advanced-column[data-width] {
    flex: 0 0 var(--column-width, auto) !important;
    max-width: var(--column-width, none) !important;
  }

  /* Opting out of stacking still has to give the gap back, or a 70/30 row
     inside a card overflows and wraps on the narrowest screens. */
  .advanced-container[data-auto-stack="false"] .advanced-column[data-width-pct] {
    flex: 0 0 calc(var(--column-width) - var(--adv-gap, 0px) * (var(--adv-cols, 1) - 1) / var(--adv-cols, 1)) !important;
    max-width: calc(var(--column-width) - var(--adv-gap, 0px) * (var(--adv-cols, 1) - 1) / var(--adv-cols, 1)) !important;
  }

  .advanced-container[data-auto-stack="false"] .advanced-column:not([data-width]) {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
}

/* ============================================
   TABLET (768px - 1023px) - Auto-stack-tablet behavior
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Auto-stack on tablet: columns with fixed width become full-width */
  .advanced-container[data-auto-stack-tablet="true"] .advanced-column[data-width] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Columns without fixed width also stack on tablet */
  .advanced-container[data-auto-stack-tablet="true"] .advanced-column:not([data-width]):not([data-width-tablet]) {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }

  /* If tablet width is explicitly set, use it (overrides auto-stack) */
  .advanced-column[data-width-tablet] {
    flex: 0 0 var(--column-width-tablet) !important;
    max-width: var(--column-width-tablet) !important;
  }

  .advanced-column[data-width-tablet-pct] {
    flex: 0 0 calc(var(--column-width-tablet) - var(--adv-gap, 0px) * (var(--adv-cols, 1) - 1) / var(--adv-cols, 1)) !important;
    max-width: calc(var(--column-width-tablet) - var(--adv-gap, 0px) * (var(--adv-cols, 1) - 1) / var(--adv-cols, 1)) !important;
  }
}

/* ============================================
   DESKTOP (1024px+)
   ============================================ */
@media (min-width: 1024px) {
  /* Use desktop width if defined, otherwise use general width */
  .advanced-column[data-width-desktop] {
    flex: 0 0 var(--column-width-desktop) !important;
    max-width: var(--column-width-desktop) !important;
  }

  .advanced-column[data-width-desktop-pct] {
    flex: 0 0 calc(var(--column-width-desktop) - var(--adv-gap, 0px) * (var(--adv-cols, 1) - 1) / var(--adv-cols, 1)) !important;
    max-width: calc(var(--column-width-desktop) - var(--adv-gap, 0px) * (var(--adv-cols, 1) - 1) / var(--adv-cols, 1)) !important;
  }
}

/* ============================================
   CONTENT SPACING
   Trim only the outer dead space at the column edges so padding is the
   single source of edge spacing. Spacing BETWEEN children is left to the
   theme: flexbox does not collapse margins, so themes that set both
   margin-top and margin-bottom render slightly larger gaps than collapsed
   block flow, but zeroing margin-top on intermediate children would remove
   ALL spacing on themes that space content with margin-top only
   (e.g. the "lobotomized owl" pattern).

   Trimming can be turned off per container with data-keep-spacing, for the
   cases where the theme's own edge spacing is what you actually want.
   ============================================ */
.advanced-container:not([data-keep-spacing]) > .advanced-column > *:first-child {
  margin-top: 0;
}

.advanced-container:not([data-keep-spacing]) > .advanced-column > *:last-child {
  margin-bottom: 0;
}

/* Responsive images */
.advanced-column img {
  max-width: 100%;
  height: auto;
}

/* ============================================
   MEDIA CONTAINMENT INSIDE COLUMNS
   Only max-width for overflow prevention.
   All other styles (display, float, margin, alignment)
   are left to Drupal's native behavior so we don't
   have to maintain overrides when Drupal core updates.
   Note: float is ignored inside flex columns (spec behavior),
   but Drupal's alignment also uses margins which work fine.
   ============================================ */
.advanced-column .drupal-media,
.advanced-column figure.drupal-media,
.advanced-column .media,
.advanced-column figure.align-of-image {
  max-width: 100% !important;
  box-sizing: border-box;
}

.advanced-column .drupal-media img,
.advanced-column figure.drupal-media img,
.advanced-column .media img {
  max-width: 100%;
  height: auto;
}

/* ============================================
   MEDIA ALIGNMENT INSIDE FLEX COLUMNS
   Drupal uses .align-center / .align-left / .align-right on
   rendered media and images.  margin:auto has no effect when
   the flex item stretches to full width, so align-self is needed.
   float is also disabled inside flex columns (ignored by spec,
   but clearing it avoids side-effects).
   ============================================ */
/* :not(.advanced-container) — nested containers also carry data-align
   (with different semantics: column distribution, not media alignment),
   so they must not be shrink-wrapped by this media rule. */
.advanced-column .align-center,
.advanced-column [data-align="center"]:not(.advanced-container),
.advanced-column .drupal-media-style-align-center,
.advanced-column figure.align-center {
  align-self: center;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

.advanced-column .align-left,
.advanced-column [data-align="left"],
.advanced-column .drupal-media-style-align-left,
.advanced-column figure.align-left {
  align-self: flex-start;
}

.advanced-column .align-right,
.advanced-column [data-align="right"],
.advanced-column .drupal-media-style-align-right,
.advanced-column figure.align-right {
  align-self: flex-end;
}

/* ============================================
   UTILITY: Full-width container variant
   ============================================ */
.advanced-container[data-container-width="100%"] {
  max-width: none;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .advanced-container {
    display: flex;
    flex-wrap: wrap;
  }

  .advanced-column {
    /* Keep flex-direction:column so vertical alignment (justify-content) still
       works in print.  display:block would break vertically centred content. */
    display: flex;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100%;
    page-break-inside: avoid;
    break-inside: avoid; /* Modern equivalent */
  }
}


/* Word-style "inside vertical border": divider between columns, driven by
   the container's border width/style/color via --adv-divider. */
.advanced-container[data-border-inside="true"] > .advanced-column + .advanced-column {
  border-left: var(--adv-divider, 1px solid #ccc);
}

/* When columns stack on mobile the divider rotates to horizontal. */
@media (max-width: 767px) {
  .advanced-container[data-border-inside="true"][data-auto-stack="true"] > .advanced-column + .advanced-column,
  .advanced-container[data-border-inside="true"]:not([data-auto-stack]) > .advanced-column + .advanced-column {
    border-left: 0;
    border-top: var(--adv-divider, 1px solid #ccc);
  }
}