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

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

/* ============================================
   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: 1 1 0%;
  min-width: 0;
  box-sizing: border-box;

  /* 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 */
.advanced-column[data-valign="top"] {
  align-self: flex-start;
}

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

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

/* ============================================
   COLUMN RESPONSIVE WIDTHS
   
   Responsive widths are set per-column using data attributes.
   This approach allows different columns to have different
   responsive behaviors.
   ============================================ */

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

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

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

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

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