/* ==========================================================================
   board-collapse.css — Board Column Responsive Collapse
   ==========================================================================
   Collapses board columns into a stacked/carousel layout on small viewports.
   Activated by [data-responsive-board-columns] attribute on .board-columns.

   Breakpoints align with tokens.css / breakpoints.css:
     MOBILE        = ≤ 639px   (XS equiv)
     MOBILE LARGE  = 640-767px (SM equiv)
     TABLET        = 768-1023px
     DESKTOP       = 1024-1340px  (pass-through)
     CONTENT WIDE  = ≥ 1341px     (pass-through)

   Dependencies: board.css (.board-columns, .board-column, .board-column__*)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE STATE — full multi-column horizontal flex layout (default)
      .board-columns is already display:flex overflow-x:auto from board.css.
      .board-columns[data-responsive-board-columns] opts into responsive
      collapse behavior. Below this we only override for smaller breakpoints.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. MOBILE ≤ 639px & MOBILE LARGE 640-767px — vertical stack
      Columns stack vertically in a single column. .ep-grid forced to 1fr.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Opt-in: only columns with the responsive attribute get collapsed */
  .board-columns[data-responsive-board-columns] {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto;
    height: auto;
    gap: var(--space-3, 12px);
    padding: 0 0 16px 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  .board-columns[data-responsive-board-columns] > .board-column {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex-shrink: 1 !important;
  }

  /* !important cascade for .ep-grid to force single-column at XS/SM */
  .ep-grid {
    grid-template-columns: 1fr !important;
  }

  /* Hide scrollbar on collapsed container — it's a stacked layout */
  .board-columns[data-responsive-board-columns]::-webkit-scrollbar {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   3. TABLET 768-1023px — 2-column grid
      Columns arrange in a 2-column grid within the responsive container.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .board-columns[data-responsive-board-columns] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-3, 12px);
    overflow: visible !important;
    height: auto;
    padding: 0 0 16px 0;
  }

  .board-columns[data-responsive-board-columns] > .board-column {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   4. DESKTOP 1024-1340px & CONTENT WIDE ≥ 1341px — full multi-column
      Restore the original horizontal flex layout.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .board-columns[data-responsive-board-columns] {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    height: calc(100vh - 140px);
    gap: var(--space-3, 12px);
    padding: 0 4px 8px 4px;
  }

  .board-columns[data-responsive-board-columns] > .board-column {
    min-width: 280px;
    max-width: 320px;
    width: 280px;
    flex-shrink: 0;
  }
}