/* ==========================================================================
   CG-2026 Layout System - Desktop First (max-width only)
   ========================================================================== */

:root {
  /* Page gutters (auto-resize, no hard px) */
  --layout-padding: clamp(12px, 5vw, 92px);
  --section-pad-block: clamp(30px, 5.5px + 2.2vw, 48px);
  --gap-xl: 74px;
  --gap-l: 40px;
  --gap-m: 32px;
  --gap-s: 20px;

  /* Colors */
  --light-bg: var(--neutral10);
}

/* Utility classes - keep !important for override utilities */
.col-no-padding-top-bottom {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.col-no-padding-top {
  padding-top: 0 !important;
}

.col-no-padding-bottom {
  padding-bottom: 0 !important;
}

/* ==========================================================================
   Base Styles (Desktop First - 1920px+)
   ========================================================================== */

.layout__region--left-column,
.layout__region--right-column {
  flex: 1;
}

.layout__region img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 620px;
}

/* Landing page container */
.page-node-type-landing-page .layout-content {
  padding-inline: var(--page-padding, var(--layout-padding));
}

/* Background utilities */
.col-light-bg {
  background-color: var(--light-bg);
}

.col-light-bg--full-width {
  background: var(--light-bg);
  box-shadow: 0 0 0 100vmax var(--light-bg);
  clip-path: inset(0 -100vmax);
}

.layout-builder__section .col-light-bg--full-width {
  --page-padding: 1.5rem;
}

/* ==========================================================================
   One Column Layout (Desktop Default)
   ========================================================================== */

.layout--one-column {
  padding-block: var(--section-pad-block);
  padding-inline: var(--layout-padding);
}

/* ==========================================================================
   Two Columns Layout (Desktop Default)
   ========================================================================== */

.two-columns {
  display: flex;
  flex-wrap: wrap;
  padding-block: var(--section-pad-block);
  padding-inline: var(--layout-padding);
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-xl);
}

.two-columns > .layout__region {
  width: 100%;
}

/* Two columns desktop variants (1920px+) */
.two-columns.two-columns--50-50 > .layout__region--first,
.two-columns.two-columns--50-50 > .layout__region--second {
  width: 46%;
}

.two-columns.two-columns--47-53 > .layout__region--first,
.two-columns.two-columns--53-47 > .layout__region--second {
  width: 43%;
}

.two-columns.two-columns--47-53 > .layout__region--second,
.two-columns.two-columns--53-47 > .layout__region--first {
  width: 49%;
}

.two-columns.two-columns--27-73 > .layout__region--first,
.two-columns.two-columns--73-27 > .layout__region--second {
  width: 23%;
}

.two-columns.two-columns--27-73 > .layout__region--second,
.two-columns.two-columns--73-27 > .layout__region--first {
  width: 69%;
}

/* ==========================================================================
   Three Columns Layout (Desktop Default)
   ========================================================================== */

.layout--three-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-block: var(--section-pad-block);
  padding-inline: var(--layout-padding);
  gap: var(--gap-l);
}

.layout--three-columns .layout__region {
  width: 30%;
  min-width: 300px;
}

.layout--three-columns--normal {
  gap: 40px;
}

/* Medium variant */
.layout--three-columns.layout--three-columns--medium {
  padding-block: clamp(28px, 4vw, 80px);
  padding-inline: 10%;
}

/* Narrow variant */
.layout--three-columns.layout--three-columns--narrow {
  gap: 32px;
  padding-inline: clamp(44px, 8vw, 200px);
}

/* ==========================================================================
   Four Columns Layout (Desktop Default)
   ========================================================================== */

.layout--four-columns {
  display: flex;
  flex-wrap: wrap;
  padding-block: var(--section-pad-block);
  padding-inline: var(--layout-padding);
  justify-content: space-between;
  gap: var(--gap-s);
}

.layout--four-columns .layout__region {
  width: 23%;
  min-width: 196px;
}

/* Four columns padding variant */
.layout--four-columns.layout--four-columns--padding {
  padding-inline: clamp(44px, 8vw, 112px);
}

/* ==========================================================================
   Below Large Desktop (max-width: 1919px)
   ========================================================================== */

@media screen and (max-width: 1919px) {
  .layout--three-columns.layout--three-columns--medium {
    padding-block: clamp(24px, 3.5vw, 70px);
  }

  .layout--three-columns.layout--three-columns--narrow {
    padding-inline: clamp(44px, 7vw, 200px);
  }
}

/* ==========================================================================
   Below Standard Desktop (max-width: 1439px)
   ========================================================================== */

@media screen and (max-width: 1439px) {
  .page-node-type-landing-page .layout-content {
    --page-padding: 36px;
  }
}

/* ==========================================================================
   Below Desktop (max-width: 1023px) - Tablet
   ========================================================================== */

@media screen and (max-width: 1023px) {
  .layout--one-column,
  .two-columns,
  .layout--three-columns,
  .layout--four-columns {
    --layout-padding: 28px;
    padding-left: 28px;
    padding-right: 28px;
  }

  /* Four columns to centered */
  .layout--four-columns {
    justify-content: center;
  }

  /* Full width regions on tablet */
  .two-columns .layout__region,
  .layout--four-columns .layout__region,
  .layout--three-columns .layout__region {
    width: 100%;
    min-width: 300px;
  }

  /* Adjust two-columns variants for tablet */
  .two-columns.two-columns--50-50 > .layout__region--first,
  .two-columns.two-columns--50-50 > .layout__region--second {
    width: 44%;
  }

  .two-columns.two-columns--47-53 > .layout__region--first,
  .two-columns.two-columns--53-47 > .layout__region--second {
    width: 41%;
  }

  .two-columns.two-columns--47-53 > .layout__region--second,
  .two-columns.two-columns--53-47 > .layout__region--first {
    width: 47%;
  }

  .two-columns.two-columns--27-73 > .layout__region--first,
  .two-columns.two-columns--73-27 > .layout__region--second {
    width: 21%;
  }

  .two-columns.two-columns--27-73 > .layout__region--second,
  .two-columns.two-columns--73-27 > .layout__region--first {
    width: 67%;
  }

  /* Three columns centered on tablet */
  .layout--three-columns {
    justify-content: center;
  }

  .layout--three-columns.layout--three-columns--medium {
    padding-block: clamp(24px, 3vw, 28px);
    padding-inline: 8%;
  }

  .layout--three-columns.layout--three-columns--narrow,
  .layout--four-columns.layout--four-columns--padding {
    padding-inline: clamp(28px, 6vw, 44px);
  }
}

/* ==========================================================================
   Below Tablet (max-width: 767px) - Mobile
   ========================================================================== */

@media screen and (max-width: 767px) {
  .layout--one-column,
  .two-columns,
  .layout--three-columns,
  .layout--four-columns {
    --layout-padding: 0px;
    padding-left: var(--layout-padding);
    padding-right: var(--layout-padding);
  }

  .page-node-type-landing-page .layout-content {
    --page-padding: 16px;
  }

  .page-node-type-homepage main .layout-content {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Stack columns on mobile */
  .two-columns,
  .layout--four-columns {
    justify-content: center;
    gap: var(--gap-s);
  }

  .layout--three-columns {
    gap: var(--gap-l);
  }

  .layout--three-columns.layout--three-columns--medium {
    padding-block: clamp(20px, 5vw, 28px);
    padding-inline: 5%;
  }

  .layout--three-columns.layout--three-columns--narrow,
  .layout--four-columns.layout--four-columns--padding {
    padding-left: 20px;
    padding-right: 20px;
  }

  .two-columns.two-columns--50-50 > .layout__region,
  .two-columns.two-columns--47-53 > .layout__region,
  .two-columns.two-columns--53-47 > .layout__region,
  .two-columns.two-columns--27-73 > .layout__region,
  .two-columns.two-columns--73-27 > .layout__region {
    width: 100%;
  }

  .two-columns {
    flex-direction: column;
  }

  .two-columns .layout__region--first:has(.media__container),
  .two-columns .layout__region--second:has(.media__container),
  .two-columns .layout__region--first:has(img),
  .two-columns .layout__region--second:has(img),
  .two-columns .layout__region--first:has(.media),
  .two-columns .layout__region--second:has(.media) {
    order: 1;
  }

  .two-columns .layout__region--first:not(:has(.media__container)):not(:has(img)):not(:has(.media)),
  .two-columns .layout__region--second:not(:has(.media__container)):not(:has(img)):not(:has(.media)) {
    order: 2;
  }
}

/* ==========================================================================
   Extra Small Mobile (max-width: 374px)
   ========================================================================== */

@media screen and (max-width: 374px) {
  .layout--one-column,
  .two-columns,
  .layout--three-columns,
  .layout--four-columns {
    --layout-padding: 0px;
  }

  .layout--three-columns.layout--three-columns--medium {
    padding-block: clamp(16px, 6vw, 40px);
    padding-inline: 12px;
  }

  .layout--three-columns.layout--three-columns--narrow,
  .layout--four-columns.layout--four-columns--padding {
    padding-left: 12px;
    padding-right: 12px;
  }
}