/* ==========================================================================
   Columns Block - 12-Column Grid System
   ========================================================================== */

/* Base styles - mobile first (stacked) */
.columns > div {
  display: flex;
  flex-direction: column;
}

.columns picture {
  display: inline-block;
  width: min(100%, var(--columns-image-width, 100%));
  max-width: min(100%, var(--columns-image-width, 100%));
  height: var(--columns-image-height, auto);
  max-height: var(--columns-image-height, none);
  vertical-align: top;
}

/* Legacy percentage widths for existing content */
.columns.width-1 { --columns-image-width: 10%; }
.columns.width-2 { --columns-image-width: 20%; }
.columns.width-3 { --columns-image-width: 30%; }
.columns.width-4 { --columns-image-width: 40%; }
.columns.width-5 { --columns-image-width: 50%; }
.columns.width-6 { --columns-image-width: 60%; }
.columns.width-7 { --columns-image-width: 70%; }
.columns.width-8 { --columns-image-width: 80%; }
.columns.width-9 { --columns-image-width: 90%; }
.columns.width-10 { --columns-image-width: 100%; }

.columns img {
  width: 100%;
  height: var(--columns-image-height, auto);
  max-height: var(--columns-image-height, none);
  object-fit: contain;
  border-radius: var(--corner-radius-cr-2);
}

/* Fixed WxH presets — fill the authored box */
.columns[class*="img-"] img {
  object-fit: cover;
}

.columns > div > div {
  order: 1;
  min-width: 0;
}

.columns > div > .columns-img-col {
  order: 0;
}

.columns > div > .columns-img-col img {
  display: block;
}

.columns.align-center > div > div {
  text-align: center;
}

.columns.align-right > div > div {
  text-align: right;
}

.columns h1, .columns h2, .columns h3, .columns h4, .columns h5, .columns h6 {
  margin-top: 0;
}

main .columns.block .button-container .button:not(.primary, .secondary) {
  text-wrap: pretty;
  white-space: normal;
  text-align: left;
  position: relative;
  cursor: pointer;
  background: none;
  color: var(--color-blue-link);
  padding: var(--size-8) 0 0 0;
  font-weight: var(--font-weight-semibold);
  gap: var(--size-4);
  border: none;
  text-decoration: none;
}

main .columns.block .button-container .button:not(.primary, .secondary)::after {
  display: inline-block;
  content: "";
  width: var(--size-18);
  height: var(--size-18);
  mask-image: url("../../icons/arrow-outward.svg");
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: var(--color-blue-link);
  flex-shrink: 0;
  position: relative;
  top: var(--size-4);
}

main .columns.block .button-container .button:not(.primary, .secondary)::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: var(--size-2);
  width: calc(100% - 24px);
  background: #00D4A6;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

main .columns.block .button-container .button:not(.primary, .secondary):hover {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

main .columns.block .button-container .button:not(.primary, .secondary):focus {
  border-radius: 0;
  box-shadow: none;
}

main .columns.block .button-container .button:not(.primary, .secondary):hover::before {
  transform: scaleX(1);
}

/* DARK background → White button */
main .section[data-text-color="section-text-light"] .columns.block .button-container a.button:not(.primary, .secondary) {
  color: var(--color-white);
}

main .section[data-text-color="section-text-light"] .columns.block .button-container a.button:not(.primary, .secondary)::after {
  filter: brightness(0) invert(1);
}

@media (width < 900px) {
  .columns.columns-list-only > div {
    gap: 0;
  }

  .columns.columns-list-only > div > div:first-child > ul {
    margin-bottom: 0;
  }

  .columns.columns-list-only > div > div:last-child > ul {
    margin-top: 0;
  }
}

/* ==========================================================================
   Desktop Grid System (900px+)
   ========================================================================== */

@media (width >= 900px) {
  /* 12-column grid container */
  .columns > div {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-system-gutter, 24px);
    align-items: flex-start;
  }

  .columns > div > div {
    order: unset;
  }

  .columns > div > div > p:first-child {
    margin-top: 0;
  }

  /* --------------------------------------------------------------------------
     Default Equal Distribution
     -------------------------------------------------------------------------- */

  /* 2 columns: 6-6 */
  .columns.columns-2-cols > div > div {
    grid-column: span 6;
  }

  /* 3 columns: 4-4-4 */
  .columns.columns-3-cols > div > div {
    grid-column: span 4;
  }

  /* 4 columns: 3-3-3-3 */
  .columns.columns-4-cols > div > div {
    grid-column: span 3;
  }

  /* 6 columns: 2-2-2-2-2-2 */
  .columns.columns-6-cols > div > div {
    grid-column: span 2;
  }

  /* --------------------------------------------------------------------------
     Asymmetric Layouts (variants via block classes)
     -------------------------------------------------------------------------- */

  /* Layout: 4-8 (1/3 - 2/3) */
  .columns.layout-4-8 > div > div:first-child {
    grid-column: span 4;
  }

  .columns.layout-4-8 > div > div:last-child {
    grid-column: span 8;
  }

  /* Layout: 8-4 (2/3 - 1/3) */
  .columns.layout-8-4 > div > div:first-child {
    grid-column: span 8;
  }

  .columns.layout-8-4 > div > div:last-child {
    grid-column: span 4;
  }

  /* Layout: 3-9 (1/4 - 3/4) */
  .columns.layout-3-9 > div > div:first-child {
    grid-column: span 3;
  }

  .columns.layout-3-9 > div > div:last-child {
    grid-column: span 9;
  }

  /* Layout: 9-3 (3/4 - 1/4) */
  .columns.layout-9-3 > div > div:first-child {
    grid-column: span 9;
  }

  .columns.layout-9-3 > div > div:last-child {
    grid-column: span 3;
  }

  /* Layout: 5-7 */
  .columns.layout-5-7 > div > div:first-child {
    grid-column: span 5;
  }

  .columns.layout-5-7 > div > div:last-child {
    grid-column: span 7;
  }

  /* Layout: 7-5 */
  .columns.layout-7-5 > div > div:first-child {
    grid-column: span 7;
  }

  .columns.layout-7-5 > div > div:last-child {
    grid-column: span 5;
  }

  /* Layout: 2-10 */
  .columns.layout-2-10 > div > div:first-child {
    grid-column: span 2;
  }

  .columns.layout-2-10 > div > div:last-child {
    grid-column: span 10;
  }

  /* Layout: 10-2 */
  .columns.layout-10-2 > div > div:first-child {
    grid-column: span 10;
  }

  .columns.layout-10-2 > div > div:last-child {
    grid-column: span 2;
  }
}