/**
 * @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 {
  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);
  }
}

/* ============================================
   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 */

  /* Custom properties with fallbacks */
  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);
}

/* ============================================
   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.
   ============================================ */

/* ============================================
   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;
  }

  .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;
  }
}

/* ============================================
   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;
  }
}

/* ============================================
   CONTENT SPACING
   Flexbox does not collapse margins between siblings the way normal block
   flow does. Without these rules an h2 followed by a <p> would produce
   h2.margin-bottom + p.margin-top (e.g. 0.83em + 1em = 1.83em) instead
   of the collapsed 1em that a reader would expect.
   Fix: keep only margin-bottom as the spacing source by zeroing margin-top
   on every child that has a preceding sibling, and strip the outer dead
   space on the first and last children.
   ============================================ */
.advanced-column > *:first-child {
  margin-top: 0;
}

.advanced-column > *:last-child {
  margin-bottom: 0;
}

/* Prevent double-stacking: remove margin-top from every non-first child so
   spacing comes only from the preceding element's margin-bottom. */
.advanced-column > * + * {
  margin-top: 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).
   ============================================ */
.advanced-column .align-center,
.advanced-column [data-align="center"],
.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 */
  }
}