/**
 * Layout Grids CSS
 * Layout and grid fixes for Bootstrap Barrio migration
 */

/* ========================================
   GENERAL LAYOUTS
   ======================================== */

/* Spacing between layout sections */
.layout {
  margin-bottom: 1.5rem;
  clear: both;
}

.layout:last-child {
  margin-bottom: 0;
}

/* Layout container */
.layout .layout__region {
  position: relative;
}

/* ========================================
   ONE COLUMN LAYOUT
   ======================================== */

.layout--onecol .layout__region--content {
  width: 100%;
  max-width: 100%;
}

/* ========================================
   TWO COLUMN LAYOUT (50-50)
   ======================================== */

.layout--twocol-section {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.layout--twocol-section--50-50 > .layout__region {
  flex: 1 1 calc(50% - 0.75rem);
  min-width: 0;
  max-width: calc(50% - 0.75rem);
}

.layout--twocol-section--50-50 > .layout__region--first,
.layout--twocol-section--50-50 > .layout__region--second {
  flex-basis: calc(50% - 0.75rem);
  max-width: calc(50% - 0.75rem);
}

/* Force 2 columns on desktop for Elimination Facts */
@media (min-width: 768px) {
  .layout--twocol-section--50-50 > .layout__region {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
  }
}

/* ========================================
   THREE COLUMN LAYOUT (33-34-33)
   ======================================== */

.layout--threecol-section {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.layout--threecol-section--33-34-33 > .layout__region {
  flex: 1 1 calc(33.333% - 1rem);
  min-width: 0;
}

.layout--threecol-section--33-34-33 > .layout__region--first {
  flex-basis: calc(33.333% - 1rem);
}

.layout--threecol-section--33-34-33 > .layout__region--second {
  flex-basis: calc(33.334% - 1rem);
}

.layout--threecol-section--33-34-33 > .layout__region--third {
  flex-basis: calc(33.333% - 1rem);
}

/* ========================================
   CUSTOM THREE COLUMN LAYOUT (50-25-25)
   For Director/Acknowledgments/Full Report
   ======================================== */

.layout--threecol-section--50-25-25 {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}

/* Desktop: maintain 3 columns in a row */
@media (min-width: 768px) {
  .layout--threecol-section--50-25-25 {
    flex-wrap: nowrap;
    gap: 2rem;
  }

  .layout--threecol-section--50-25-25 > .layout__region--first {
    flex: 0 0 41%;
    max-width: 41%;
  }

  .layout--threecol-section--50-25-25 > .layout__region--second {
    flex: 0 0 37%;
    max-width: 37%;
  }

  .layout--threecol-section--50-25-25 > .layout__region--third {
    flex: 0 0 16%;
    max-width: 16%;
    padding-right: 1rem;
  }
}

/* Mobile: stack in single column */
@media (max-width: 767px) {
  .layout--threecol-section--50-25-25 > .layout__region {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ========================================
   CONTAINER AND ROW OVERRIDES
   ======================================== */

/* Ensure containers have full width */
.layout .container {
  width: 100%;
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

/* Ensure rows handle flexbox correctly */
.layout .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Regions inside rows */
.layout .row > [class*="layout__region"] {
  padding-left: 15px;
  padding-right: 15px;
}

/* ========================================
   CLEARFIX AND FLOATS
   ======================================== */

.clearfix::after,
.layout::after {
  content: "";
  display: table;
  clear: both;
}

/* ========================================
   CONTENT ADJUSTMENTS WITHIN LAYOUTS
   ======================================== */

/* Prevent blocks from overflowing their container */
.layout__region > .block {
  max-width: 100%;
  overflow: hidden;
}

/* Ensure block content respects boundaries */
.layout__region .block__content {
  max-width: 100%;
  overflow-wrap: break-word;
}