/**
 * @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;
  box-sizing: border-box;
}

/* 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;
  overflow: hidden;
  /* Prevent long unbreakable strings from overflowing the column */
  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"
   ============================================ */

/* ============================================
   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
   ============================================ */
.advanced-column > *:first-child {
  margin-top: 0;
}

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

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

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

  .advanced-column {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    flex: none;
    page-break-inside: avoid;
  }
}