/* ─────────────────────────────────────────────────────────────────────────────
 * PHASE 122 — Hub Home Page Responsive Layout Fixes
 *
 * Problems fixed:
 *
 *   1. Folder cards clipped / too short on resize
 *      renderHub()'s _updateGrid() dynamically sets grid.style.gridAutoRows to
 *      a calculated value. The formula subtracts topBar + dashBar heights but
 *      NOT the hero section (~231px), so at intermediate viewport widths
 *      (800–1200px) the computed row height can drop to 148 + 18 = 166px —
 *      below the 176px minimum the folder card needs (22px tab + 154px body).
 *      CSS `!important` overrides JS inline styles in the cascade, so setting
 *      grid-auto-rows: auto !important restores natural cell sizing.
 *
 *   2. Missing intermediate breakpoints (800–1200px)
 *      The existing CSS goes straight from full desktop (>760px) to mobile
 *      (≤760px) with only an 800px hero collapse and a 400px micro-fix.
 *      At 761–900px viewports the columns could be 3× with 220px min-width
 *      but the hub still had 28/36px padding meant for wide desktops.
 *
 *   3. Abrupt 760px transition
 *      At 760px the grid jumps from auto-fill(minmax 220px) → 2-col mobile.
 *      A 800px soft-collapse to 2-column auto-fill(minmax 180px) smooths it.
 *
 *   4. Folder tab width disproportionate at narrower cards
 *      Fixed 92px tab at 180px card width = 51% of the card; looks unbalanced.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── 1. FOLDER GRID: auto rows everywhere — overrides JS inline style ──── */
/* CSS !important beats a JS-set inline style in the CSS cascade.             */
/* Applied broadly (not just body.cbs-phase60) in case the class is missing. */
#hub-folder-grid {
  grid-auto-rows: auto !important;
  align-content: start !important;
}

/* ── 2. FOLDER CARD: guaranteed minimum height ──────────────────────────── */
/* folder-tab is 22px (absolute) + folder-body min-height 154px = 176px min.  */
/* Add 8px breathing room → 184px.                                            */
#hub-folder-grid .folder {
  min-height: 184px !important;
}
/* Ensure the folder-body never collapses below its designed minimum          */
#hub-folder-grid .folder-body {
  min-height: 154px !important;
}

/* ── 3. MEDIUM DESKTOP (1200px–901px): moderate padding + column sizing ── */
@media (max-width: 1200px) and (min-width: 901px) {
  body.cbs-phase60 #project-hub {
    padding: 22px 28px 22px !important;
  }
  body.cbs-phase60 #hub-folder-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 22px 16px !important;
  }
}

/* ── 4. TABLET / NARROW DESKTOP (900px–761px): compact layout ────────────── */
@media (max-width: 900px) and (min-width: 761px) {
  body.cbs-phase60 #project-hub {
    padding: 14px 18px 14px !important;
  }

  /* Tighter column min so 3 columns fit comfortably at 760–900px             */
  body.cbs-phase60 #hub-folder-grid {
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)) !important;
    gap: 16px 12px !important;
  }

  /* Folder tab: proportional at 175px+ card width                           */
  body.cbs-phase60 .folder-tab {
    width: 76px !important;
  }

  /* Hero: collapse to single column — 900px viewport means ~860px content,  */
  /* which is wide enough for 2 columns but the right panel (260px min) ends  */
  /* up cramped vs. the left copy column. Single column reads better here.   */
  body.cbs-phase60 #phase60-home-hero {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
    margin: 14px 0 16px !important;
  }
  body.cbs-phase60 .phase60-home-hero-visual {
    display: none !important;
  }
  body.cbs-phase60 .phase60-home-cta {
    min-width: 0 !important;
    width: auto !important;
    align-self: flex-start;
  }

  /* Hub top bar: tighten search width so it doesn't crowd sort select        */
  .hub-search-wrap {
    min-width: 130px !important;
    max-width: 220px !important;
  }
}

/* ── 5. SOFT COLLAPSE (800px–761px): start shifting toward mobile feel ──── */
/* This bridges the sharp jump when the grid transitions from 3-col auto-fill */
/* to 2-col mobile at 760px. Adding a 2-col auto-fill at ≤800px means the    */
/* visual change is gradual rather than a single sudden reflow.               */
@media (max-width: 800px) and (min-width: 761px) {
  body.cbs-phase60 #hub-folder-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 14px 10px !important;
  }
  body.cbs-phase60 #project-hub {
    padding: 12px 16px 12px !important;
  }
}

/* ── 6. HUB SEARCH BAR: allow expansion at wider viewports ─────────────── */
/* Inline style in _hubTopBarHTML caps the search wrap at max-width:320px.   */
/* At wide desktops the search can breathe a bit more.                       */
@media (min-width: 1400px) {
  .hub-search-wrap {
    max-width: 400px !important;
  }
}

/* ── 7. HERO SECTION: ensure CTA button always fits ────────────────────── */
/* At narrow hero widths the min-width:260px on the CTA can overflow         */
@media (max-width: 1000px) {
  body.cbs-phase60 .phase60-home-cta {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ── 8. DASHBOARD PILLS: wrap cleanly at medium widths ─────────────────── */
@media (max-width: 1100px) and (min-width: 761px) {
  #hub-dash-bar {
    flex-wrap: wrap !important;
    gap: 5px 8px !important;
  }
  .hub-dash-pill {
    font-size: .7rem !important;
    padding: 3px 9px !important;
  }
}

/* ── 9. OVERALL HUB CONTAINER: prevent content overflow ─────────────────── */
/* project-hub uses overflow-y:auto; ensure children don't horizontally      */
/* overflow causing a double scrollbar                                        */
#project-hub {
  overflow-x: hidden !important;
}
#hub-folder-grid,
#phase60-home-hero,
#hub-top-bar,
#hub-dash-bar {
  min-width: 0;
  max-width: 100%;
}