/**
 * @file
 * Columns component styles.
 */

/* Base: outer container is full-width for backgrounds */
.columns {
  width: 100%;
}

/* Inner wrapper is the grid; max-width + centering come from .container in layout.css */
.columns__wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

/* 2-column layout */
@media (min-width: 768px) {
  .columns--cols-2 .columns__wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*
 * Video band (Taking DAWNZERA): flex-1 chapters + fixed 800px player column.
 * Figma 23789:86975 — full 1200px row, chapters left, video+transcript right.
 * Opt in via Columns → Background class: columns--ratio-video-band
 */
@media (min-width: 900px) {
  .columns--cols-2.columns--ratio-video-band .columns__wrapper {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .columns--cols-2.columns--ratio-video-band .columns__col:last-child > * {
    inline-size: 100%;
    max-inline-size: none;
  }

  .columns--cols-2.columns--ratio-video-band .video-player--constrained,
  .columns--cols-2.columns--ratio-video-band .transcript--width-constrained {
    max-inline-size: none;
    margin-inline: 0;
  }
}

/* The 800px player column only fits once the row can still give the chapter
 * column a readable width; below this it starves to a few characters wide. */
@media (min-width: 1200px) {
  .columns--cols-2.columns--ratio-video-band .columns__wrapper {
    grid-template-columns: minmax(0, 1fr) 800px;
  }
}

/* 3- and 4-column: 2-up at tablet */
@media (min-width: 768px) {
  .columns--cols-3 .columns__wrapper,
  .columns--cols-4 .columns__wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3- and 4-column: full count at desktop */
@media (min-width: 1024px) {
  .columns--cols-3 .columns__wrapper {
    grid-template-columns: repeat(3, 1fr);
  }

  .columns--cols-4 .columns__wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Gap modifiers (desktop) */
.columns--gap-0  .columns__wrapper { gap: 0; }
.columns--gap-4  .columns__wrapper { gap: var(--gap-size-xs); }   /*  4px */
.columns--gap-8  .columns__wrapper { gap: var(--gap-size-sm); }   /*  8px */
.columns--gap-16 .columns__wrapper { gap: var(--gap-size-md); }   /* 16px */
.columns--gap-24 .columns__wrapper { gap: var(--gap-size-lg); }   /* 24px */
.columns--gap-32 .columns__wrapper { gap: var(--gap-size-xl); }   /* 32px */
.columns--gap-40 .columns__wrapper { gap: var(--space-2xl); }    /* 40px */
.columns--gap-48 .columns__wrapper { gap: var(--gap-size-2xl); }  /* 48px */
.columns--gap-64 .columns__wrapper { gap: 4rem; }                 /* 64px – no design token exists */

/* Desktop padding modifiers */
.columns--pt-8   { padding-top: var(--padding-size-xs); }
.columns--pt-16  { padding-top: var(--padding-size-sm); }
.columns--pt-20  { padding-top: var(--padding-size-md); }
.columns--pt-32  { padding-top: var(--padding-size-lg); }
.columns--pt-48  { padding-top: var(--padding-size-xl); }
.columns--pt-64  { padding-top: var(--padding-size-2xl); }
.columns--pt-80  { padding-top: var(--padding-size-3xl); }
.columns--pt-96  { padding-top: var(--padding-size-4xl); }
.columns--pt-128 { padding-top: var(--padding-size-5xl); }

.columns--pb-8   { padding-bottom: var(--padding-size-xs); }
.columns--pb-16  { padding-bottom: var(--padding-size-sm); }
.columns--pb-20  { padding-bottom: var(--padding-size-md); }
.columns--pb-32  { padding-bottom: var(--padding-size-lg); }
.columns--pb-48  { padding-bottom: var(--padding-size-xl); }
.columns--pb-64  { padding-bottom: var(--padding-size-2xl); }
.columns--pb-80  { padding-bottom: var(--padding-size-3xl); }
.columns--pb-96  { padding-bottom: var(--padding-size-4xl); }
.columns--pb-128 { padding-bottom: var(--padding-size-5xl); }

/* Desktop margin modifiers */
.columns--mt-8   { margin-top: var(--padding-size-xs); }
.columns--mt-16  { margin-top: var(--padding-size-sm); }
.columns--mt-20  { margin-top: var(--padding-size-md); }
.columns--mt-32  { margin-top: var(--padding-size-lg); }
.columns--mt-40  { margin-top: var(--space-2xl); }
.columns--mt-48  { margin-top: var(--padding-size-xl); }
.columns--mt-64  { margin-top: var(--padding-size-2xl); }
.columns--mt-80  { margin-top: var(--padding-size-3xl); }
.columns--mt-96  { margin-top: var(--padding-size-4xl); }
.columns--mt-128 { margin-top: var(--padding-size-5xl); }

.columns--mb-8   { margin-bottom: var(--padding-size-xs); }
.columns--mb-16  { margin-bottom: var(--padding-size-sm); }
.columns--mb-20  { margin-bottom: var(--padding-size-md); }
.columns--mb-32  { margin-bottom: var(--padding-size-lg); }
.columns--mb-40  { margin-bottom: var(--space-2xl); }
.columns--mb-48  { margin-bottom: var(--padding-size-xl); }
.columns--mb-64  { margin-bottom: var(--padding-size-2xl); }
.columns--mb-80  { margin-bottom: var(--padding-size-3xl); }
.columns--mb-96  { margin-bottom: var(--padding-size-4xl); }
.columns--mb-128 { margin-bottom: var(--padding-size-5xl); }

/* Stretch content — flex columns for bottom-aligned items */
.columns--stretch .columns__col {
  display: flex;
  flex-direction: column;
}

/* Vertical alignment modifiers */
.columns--valign-center .columns__wrapper { align-items: center; }
.columns--valign-bottom .columns__wrapper { align-items: end; }

/* Mobile overrides (< 640px) */
@media (max-width: 639px) {

  /* Column reversal */
  .columns--reverse-mobile .columns__wrapper {
    display: flex;
    flex-direction: column-reverse;
  }

  /* Mobile gap */
  .columns--mobile-gap-0  .columns__wrapper { gap: 0; }
  .columns--mobile-gap-4  .columns__wrapper { gap: var(--gap-size-xs); }
  .columns--mobile-gap-8  .columns__wrapper { gap: var(--gap-size-sm); }
  .columns--mobile-gap-16 .columns__wrapper { gap: var(--gap-size-md); }
  .columns--mobile-gap-24 .columns__wrapper { gap: var(--gap-size-lg); }
  .columns--mobile-gap-32 .columns__wrapper { gap: var(--gap-size-xl); }
  .columns--mobile-gap-40 .columns__wrapper { gap: var(--space-2xl); }
  .columns--mobile-gap-48 .columns__wrapper { gap: var(--gap-size-2xl); }
  .columns--mobile-gap-64 .columns__wrapper { gap: 4rem; }

  /* Mobile padding top */
  .columns--mobile-pt-0   { padding-top: 0; }
  .columns--mobile-pt-8   { padding-top: var(--padding-size-xs); }
  .columns--mobile-pt-16  { padding-top: var(--padding-size-sm); }
  .columns--mobile-pt-20  { padding-top: var(--padding-size-md); }
  .columns--mobile-pt-32  { padding-top: var(--padding-size-lg); }
  .columns--mobile-pt-48  { padding-top: var(--padding-size-xl); }
  .columns--mobile-pt-64  { padding-top: var(--padding-size-2xl); }
  .columns--mobile-pt-80  { padding-top: var(--padding-size-3xl); }
  .columns--mobile-pt-96  { padding-top: var(--padding-size-4xl); }
  .columns--mobile-pt-128 { padding-top: var(--padding-size-5xl); }

  /* Mobile padding bottom */
  .columns--mobile-pb-0   { padding-bottom: 0; }
  .columns--mobile-pb-8   { padding-bottom: var(--padding-size-xs); }
  .columns--mobile-pb-16  { padding-bottom: var(--padding-size-sm); }
  .columns--mobile-pb-20  { padding-bottom: var(--padding-size-md); }
  .columns--mobile-pb-32  { padding-bottom: var(--padding-size-lg); }
  .columns--mobile-pb-48  { padding-bottom: var(--padding-size-xl); }
  .columns--mobile-pb-64  { padding-bottom: var(--padding-size-2xl); }
  .columns--mobile-pb-80  { padding-bottom: var(--padding-size-3xl); }
  .columns--mobile-pb-96  { padding-bottom: var(--padding-size-4xl); }
  .columns--mobile-pb-128 { padding-bottom: var(--padding-size-5xl); }

  /* Mobile margin top */
  .columns--mobile-mt-0   { margin-top: 0; }
  .columns--mobile-mt-8   { margin-top: var(--padding-size-xs); }
  .columns--mobile-mt-16  { margin-top: var(--padding-size-sm); }
  .columns--mobile-mt-20  { margin-top: var(--padding-size-md); }
  .columns--mobile-mt-32  { margin-top: var(--padding-size-lg); }
  .columns--mobile-mt-40  { margin-top: var(--space-2xl); }
  .columns--mobile-mt-48  { margin-top: var(--padding-size-xl); }
  .columns--mobile-mt-64  { margin-top: var(--padding-size-2xl); }
  .columns--mobile-mt-80  { margin-top: var(--padding-size-3xl); }
  .columns--mobile-mt-96  { margin-top: var(--padding-size-4xl); }
  .columns--mobile-mt-128 { margin-top: var(--padding-size-5xl); }

  /* Mobile margin bottom */
  .columns--mobile-mb-0   { margin-bottom: 0; }
  .columns--mobile-mb-8   { margin-bottom: var(--padding-size-xs); }
  .columns--mobile-mb-16  { margin-bottom: var(--padding-size-sm); }
  .columns--mobile-mb-20  { margin-bottom: var(--padding-size-md); }
  .columns--mobile-mb-32  { margin-bottom: var(--padding-size-lg); }
  .columns--mobile-mb-40  { margin-bottom: var(--space-2xl); }
  .columns--mobile-mb-48  { margin-bottom: var(--padding-size-xl); }
  .columns--mobile-mb-64  { margin-bottom: var(--padding-size-2xl); }
  .columns--mobile-mb-80  { margin-bottom: var(--padding-size-3xl); }
  .columns--mobile-mb-96  { margin-bottom: var(--padding-size-4xl); }
  .columns--mobile-mb-128 { margin-bottom: var(--padding-size-5xl); }

}

/**
 * Pipe divider — `pipe-divider` in the Background class field.
 *
 * The neon strip between the two promo cards on Why DAWNZERA. The class was
 * already placed on that row before this rule existed, so styling it here turns
 * the existing placement on with no content change.
 *
 * 🔴 ONE ASSET, TWO ORIENTATIONS — and the horizontal one is the original.
 * `neon-rule-343x35.png` is drawn horizontally (343×35, rounded end caps). It
 * runs across the row on mobile, and at desktop the SAME strip is rotated a
 * quarter turn to divide the two columns. It is a fixed 270px tube centred on
 * the gap, NOT a rule stretched to the row's height: the end caps distort the
 * moment it is scaled on one axis, so the aspect ratio is preserved in both
 * orientations and the length is declared.
 *
 * Drawn as a `::after` background rather than an `<img>` because it carries no
 * information: a pseudo-element is invisible to assistive technology by
 * construction, so there is no `alt` to get wrong and no `aria-hidden` to
 * remember.
 *
 * Two-column rows only. `.columns__wrapper` is a grid, so the mobile rule is a
 * real row between the stacked columns (hence the explicit `grid-row`s — the
 * pseudo-element is last in box order and would otherwise land after both), and
 * the desktop rule is taken out of flow onto the centre line.
 */
.columns--cols-2.pipe-divider .columns__wrapper::after {
  content: '';
  background: url("../../images/decorative/neon-rule-343x35.png") center / contain
    no-repeat;
  pointer-events: none;
}

/* Mobile: horizontal, between the two stacked cards. */
@media (max-width: 767px) {
  .columns--cols-2.pipe-divider .columns__col:first-child { grid-row: 1; }

  .columns--cols-2.pipe-divider .columns__wrapper::after {
    grid-row: 2;
    block-size: 35px;
  }

  .columns--cols-2.pipe-divider .columns__col:last-child { grid-row: 3; }
  
  .columns--cols-2.pipe-divider.pipe-divider-desktop .columns__wrapper::after {
    display: none;
  }
}

/* Desktop: the same strip, quarter-turned onto the column gap. */
@media (min-width: 768px) {
  .columns--cols-2.pipe-divider .columns__wrapper {
    position: relative;
  }

  .columns--cols-2.pipe-divider .columns__wrapper::after {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: var(--columns-divider-length, 275px);
    block-size: 28px;
    transform: translate(-50%, -50%) rotate(-90deg);
  }

  .columns--cols-2.pipe-divider.pipe-reduced-block-start .columns__wrapper::after {
    inset-block-start: 49%;
  }
}