/* ==============================================
   Foundry Labs Responsive Overhaul — WU-4
   Innovations listing + single + playgrounds
   ============================================== */

@media (max-width: 768px) {
  /* I-02: constrain the mobile filter drawer when open */
  .filter-sidebar.is-mobile-open {
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* I-13 (results bar layout): The sort dropdown and the Filters toggle
     live as siblings inside .results-toolbar-right on mobile. Lay them
     on one row, with the sort expanding and the Filters button as a
     compact square-ish trailing control. .results-view-toggle is
     hidden in I-12 below so we don't need to account for it here. */
  .results-bar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .results-toolbar-right {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
  }
  .filter-sort {
    flex: 1 1 auto;
    min-width: 0;
  }
  .filter-sort select {
    width: 100%;
    height: 44px;
  }
  /* Make the Filters toggle a square-ish sibling next to the sort: same
     height, auto width, slightly tighter corners, no longer full-width. */
  .results-toolbar-right .filter-sidebar-toggle {
    width: auto;
    flex: 0 0 auto;
    height: 44px;
    min-height: 44px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    gap: var(--space-2);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
  }
  .results-toolbar-right .filter-sidebar-toggle .filter-sidebar-toggle-label {
    font-size: 16px;
  }

  /* I-05: keep innovation cards comfortably tappable */
  .exp-card-link {
    min-height: 44px;
  }

  /* I-12: Hide grid/list view toggle — renders identically on single-col */
  .results-view-toggle {
    display: none;
  }

  /* I-11: Compact innovation cards on mobile — reduce visual weight
     so multiple cards are visible at once */
  .exp-card-canvas-wrap {
    height: 100px;
  }

  .exp-card-body {
    padding: var(--space-4);
  }

  .exp-card-meta {
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .exp-card-text h3 {
    font-size: var(--text-lg);
    line-height: 1.25;
    margin-bottom: 4px;
  }

  .exp-card-tagline {
    margin-bottom: var(--space-2);
  }

  .exp-card-desc {
    line-height: 1.55;
  }

  .exp-card-footer {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    gap: var(--space-3);
  }

  .exp-card-tag {
    padding: 2px 10px;
  }

  .exp-card-domain {
    padding: 2px 10px;
  }

  .exp-card-status {
    font-size: var(--text-xs);
  }

  /* Catalog grid — tighter gap between cards */
  .catalog-grid {
    gap: var(--space-4);
  }
}

@media (max-width: 480px) {
  /* I-01: keep results controls on one row even on phones — sort grows,
     Filters button stays compact on the right. Replaces the previous
     column-stack which split them onto two rows. */
  .results-toolbar-right {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
  }

  .filter-sort,
  .filter-sort select {
    width: 100%;
  }

  .results-view-toggle {
    justify-content: stretch;
    height: auto;
    gap: 4px;
  }

  .results-view-toggle .view-btn {
    flex: 1 1 0;
    width: auto;
    min-height: 44px;
  }

  /* I-03: let filter pills wrap instead of clipping */
  .filter-pills {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .filter-pill {
    width: auto;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    gap: 8px;
  }

  .pill-count {
    margin-left: 0;
  }

  /* I-04: reduce experiment card visuals on tiny screens */
  .exp-card-canvas-wrap,
  .catalog-grid.view-list .exp-card-canvas-wrap {
    height: 80px;
    max-height: 80px;
    min-height: 0;
  }

  .exp-card-body {
    padding: var(--space-3);
  }

  .exp-card-text h3 {
    font-size: var(--text-lg);
  }

  .exp-card-desc {
    font-size: var(--text-sm);
    /* Clamp to 3 lines on smallest screens */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* I-06: give the single innovation hero image an explicit mobile crop.
     v4 review note: previous max-height: 200px on the <img> conflicted with
     I-17's height: clamp(200px, 55vw, 280px) on the wrapper at ≤480 — the
     image would top out at 200px while the wrapper stretched to 280px,
     producing visible dark padding above/below. Removed the cap so the
     <img> fills its wrapper at every ≤480 width. */
  .bio-hero-visual {
    aspect-ratio: auto;
  }

  .bio-hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* I-07: make the Trellis mode toggle full-width with equal buttons */
  .trellis-pg-v2 .pg-mode-toggle {
    width: 100%;
    align-self: stretch;
  }

  .trellis-pg-v2 .pg-mode-btn {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    padding-inline: var(--space-3);
  }

  /* I-08: tighten Trellis parameter spacing on mobile */
  .trellis-pg-v2 .pg-params-body {
    padding: var(--space-4) var(--space-4) var(--space-2);
    gap: var(--space-4);
  }

  .trellis-pg-v2 .pg-param-block {
    gap: 4px;
  }

  /* I-09: reduce the Trellis result viewport height on mobile */
  .trellis-pg-v2 .result-viewport {
    aspect-ratio: 4 / 5;
    min-height: 220px;
    max-height: 280px;
  }

  /* I-10: stack BioEmu resolver inputs and buttons */
  .bioemu-pg-v1 .playground-id-row {
    flex-direction: column;
    gap: 8px;
  }

  .bioemu-pg-v1 .playground-lookup-btn {
    width: 100%;
  }

  /* I-13: Mobile body-text refinement
     Most about/explore layout rules moved to I-14..I-25 below (≤768 scope).
     This block retains only ≤480-specific overrides not covered there. */
  .bio-about-body p {
    margin-bottom: var(--space-3);
  }

  .bio-hero-desc {
    font-size: var(--text-sm);
  }
}

/* ============================================================
   I-14..I-25 — single-innovation mobile redesign
   Restructures hero, about, tech-strip and explore sections per
   `plan-phase7-innovation-mobile.md` (mockup-aligned). Applies to
   ALL innovation pages — static + interactive_bioemu + interactive_trellis
   share these sections (the playground partial only replaces the middle).
   Playground-internal UI (BioEmu resolver, Trellis mode toggle, etc.)
   stays governed by I-07..I-10 and 07-trellis-mobile.css.
   No new design tokens introduced — uses Phase 6 fluid --text-* / --space-*.
   ============================================================ */
@media (max-width: 768px) {
  /* I-14a: Left-align the hero on mobile (overrides _responsive-patches/
     01-global.css:103-126 G-11 which centers all .bio-hero descendants).
     Mockup shows back link, image, pills, title, tagline, stats and CTA
     all left-aligned.

     Padding strategy: G-11 adds padding-inline: 32px directly on .bio-hero,
     and style.css:6466 already adds padding-inline: var(--page-gutter) on
     .bio-hero-inner. To avoid a 52px double-gutter on the inner content,
     we zero .bio-hero's padding-inline and let .bio-hero-inner own the
     single 20px page-gutter (v4 review HIGH from GPT).

     Title note: .bio-hero h1 in G-11 has specificity (0,1,1); plain
     .bio-hero-title only (0,1,0). We use the chained selector
     .bio-hero .bio-hero-title to reach (0,2,0) and actually win the
     cascade (v4 review HIGH from Opus). */
  .bio-hero {
    text-align: left;
    padding-inline: 0;
  }
  .bio-hero-inner,
  .bio-hero-text,
  .bio-hero .bio-hero-title,
  .bio-hero .bio-hero-desc,
  .bio-back-link,
  .bio-stats,
  .bio-hero-cta-wrap {
    text-align: left;
    margin-inline: 0;
  }
  /* CTA pill is inline-flex; text-align: left on the block parent .bio-hero-text
     puts the inline-level element at the line start (visual left-align). The
     align-self / margin-inline-end rules below are a defensive no-op in case a
     future change makes .bio-hero-text a flex container. */
  .bio-hero-cta {
    align-self: flex-start;
    margin-inline-start: 0;
    margin-inline-end: auto;
  }

  /* I-14b: Mobile hero stacking order — image directly under back link,
     pills BELOW the image, then title/tagline/stats/CTA block.
     PHP markup is unchanged: bio-hero-inner contains [back-link, pill-bar,
     bio-hero-grid(text, visual)]. We promote bio-hero-grid's children to
     siblings of pill-bar via `display: contents`, then order each child. */
  .bio-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .bio-hero-grid { display: contents; }
  .bio-back-link   { order: 1; }
  .bio-hero-visual { order: 2; }
  .bio-pill-bar    { order: 3; }
  .bio-hero-text   { order: 4; }

  /* I-14: Back link — high-contrast, visible above any z-stack, with
     prominent tap target. Was getting lost under the hero padding-top. */
  .bio-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 2;
    color: rgba(240,242,247,0.85);
    font-size: var(--text-sm);
    font-weight: 500;
    padding-block: var(--space-2);
    margin-bottom: var(--space-5);
  }
  .bio-back-link:hover,
  .bio-back-link:focus { color: var(--text-2); }

  /* I-15: Pill bar — single-row horizontal scroll (was wrap → 2-3 lines).
     Bleeds past .bio-hero-inner page-gutter so pills can scroll edge-to-edge.
     Sits BELOW the hero image per I-14b reorder; small top margin separates
     it from the image bottom. */
  .bio-pill-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--page-gutter) * -1);
    padding-inline: var(--page-gutter);
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .bio-pill-bar::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .bio-pill-bar .bio-pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 5px 12px;
  }

  /* I-16: Hero grid — superseded by I-14b above (display: contents flattens
     the grid; ordering is handled by I-14b). Kept as a no-op for clarity. */
  .bio-hero-grid {
    /* display: contents applied in I-14b — leave empty so we don't reintroduce
       the flex column that conflicted with the new sibling-ordering scheme. */
  }

  /* I-17: Hero image — large explicit height so the visual dominates the
     above-the-fold per "image should occupy max size after gutter padding".
     Using `height` (not `aspect-ratio + max-height`) guarantees the image
     hits the 200–280px target even when content width is reduced by the
     G-11 global hero padding (32px) on top of --page-gutter. */
  .bio-hero-visual {
    width: 100%;
    height: clamp(200px, 55vw, 280px);
    aspect-ratio: auto;
    margin-bottom: var(--space-3);
  }
  .bio-hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* I-18: Hero title — bigger and bolder on mobile so it anchors the page
     under the now-prominent hero image. Overrides style.css :6470 clamp. */
  .bio-hero-title {
    font-size: clamp(32px, 9vw, 44px);
    line-height: 1.08;
    margin-bottom: var(--space-2);
  }
  .bio-hero-desc {
    margin-bottom: var(--space-4);
  }

  /* I-19: Stats — inline row with middle-dot separator. Switches from
     vertical num-over-label stack to a single horizontal line. */
  .bio-stats {
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
  }
  .bio-stat {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-2);
  }
  .bio-stat-num {
    font-size: var(--text-xl);
  }
  .bio-stat + .bio-stat::before {
    content: "·";
    margin-right: var(--space-2);
    color: rgba(240,242,247,0.4);
    font-weight: 600;
  }

  /* I-20: CTA — compact pill on mobile.
     Hero CTA renders both labels (full + short). Mobile hides the long copy
     and shows only the short one so the button is button-sized, not banner-
     sized. Desktop hides the short label (rule at the foot of this file). */
  .bio-hero-cta {
    padding: 10px 18px;
    width: fit-content;
    max-width: 100%;
  }
  .bio-hero-cta-label--full  { display: none !important; }
  .bio-hero-cta-label--short { display: inline; font-size: var(--text-sm); }

  /* I-21: About — drop heavy bordered-card frame on mobile; replace with
     a subtle border-top divider that hangs the section under the hero. */
  .bio-about {
    border-top: 1px solid var(--border);
    padding-block: var(--space-7);
  }
  .bio-about-grid {
    border: 0;
    background: transparent;
    padding: 0;
    border-radius: 0;
    gap: var(--space-6);
  }
  .bio-about-title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
  }

  /* I-22: Key Capabilities — match the about body text size and color so
     the side panel reads as a continuation of the about copy. Divider line
     removed: neither panel top-border nor per-item bottom-borders render
     on mobile.
     Spacing & arrow alignment (v6, per user feedback):
       - Tighter vertical rhythm: line-height 1.4 and per-item padding
         reduced from var(--space-2) (8px) to var(--space-1) (4px).
       - Arrow alignment: the desktop ::before uses top: var(--space-3)
         (12px) which doesn't match our mobile padding-top of 4px and
         leaves the "→" floating below the first text line. Override
         `top` to match the li padding-top and match the text line-height
         so the arrow shares a baseline with the first line. */
  .bio-about-side {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }
  .bio-capability-list li {
    font-size: var(--text-md);
    color: rgba(240,242,247,0.82);
    line-height: 1.4;
    border-bottom: 0;
    padding: var(--space-1) 0 var(--space-1) var(--space-5);
  }
  .bio-capability-list li::before {
    top: var(--space-1);
    line-height: 1.4;
  }

  /* I-23: Technology Stack — single-row horizontal scroll for the pill
     track (label stays put above). The desktop-only sibling
     `.bio-side-tech` (rendered inside .bio-about-side for the in-card
     layout) is hidden on mobile so the standalone .bio-tech-only strip
     remains the single visible source. */
  .bio-side-tech { display: none; }
  .bio-tech-only .playground-stack-pills {
    margin-inline: calc(var(--space-6) * -1);
    padding-inline: var(--space-6);
  }
  .bio-tech-only .playground-pill { flex: 0 0 auto; }

  /* I-24: Ready to Explore — single-column from ≤768 (was ≤600 in style.css)
     and tightened section padding. Matches mockup proportions. */
  .bio-explore {
    padding-block: var(--space-7);
  }
  .bio-explore-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .bio-explore-title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
  }
  .bio-explore-intro {
    font-size: var(--text-base);
    margin-bottom: var(--space-6);
    white-space: normal;
  }

  /* I-25: Resource cards — restructure to grid template-areas so the icon
     sits INLINE with the eyebrow ("⚙  PLATFORM" on one row), then title,
     description and CTA stack vertically below. No PHP wrapper required —
     existing 5 child spans are placed into named areas. */
  .bio-explore-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon eyebrow"
      "title title"
      "desc  desc"
      "cta   cta";
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    padding: var(--space-5);
  }
  .bio-explore-card-icon {
    grid-area: icon;
    width: 24px;
    height: 24px;
    margin-bottom: 0;
    align-self: center;
  }
  .bio-explore-card-eyebrow {
    grid-area: eyebrow;
    margin-bottom: 0;
    align-self: center;
  }
  .bio-explore-card-title {
    grid-area: title;
    margin-top: var(--space-2);
    margin-bottom: 0;
  }
  .bio-explore-card-desc {
    grid-area: desc;
    margin-bottom: 0;
  }
  .bio-explore-card-cta {
    grid-area: cta;
    margin-top: var(--space-3);
    color: rgba(122,143,255,0.92);
    text-transform: uppercase;
    letter-spacing: var(--ls-section-label);
    font-size: var(--text-xs);
    font-weight: 600;
  }
  .bio-explore-card:hover .bio-explore-card-cta { color: rgba(160,176,255,1); }

  /* I-26: Hero padding on mobile — must explicitly set BOTH sides because
     style.css:7082-7094 applies `padding-block: var(--space-9)` to
     `.bio-hero` at <=768 (a cross-section consolidation rule), which clobbers
     the desktop `padding-top: var(--hero-top-padding)` down to ~32px.
     With the navbar fixed at top with height var(--nav-height)=60px, that
     leaves the `.bio-back-link` covered. Force padding-top back up to
     `var(--hero-top-padding)` (= 60px nav + ~20-40px space-7 = 80-100px)
     so the back link clears the nav. */
  .bio-hero {
    padding-top: var(--hero-top-padding);
    padding-bottom: var(--space-7);
  }
}

/* Desktop guard — hide the mobile-only short CTA label everywhere above ≤768. */
@media (min-width: 769px) {
  .bio-hero-cta-label--short { display: none; }
}