/* ============================================================
   Blaze Bioscience — Responsive Stylesheet
   Breakpoints:
     Mobile  : max-width 767px
     Tablet  : 768px – 1023px
     Desktop : 1024px+ (base styles, no overrides needed)
   
   This file is additive — all base desktop styles live in
   each page's inline <style> block. This file only overrides.
   Applied to all pages via <link rel="stylesheet" href="responsive.css">
   ============================================================ */


/* ── GLOBAL: Images never overflow ── */
img { max-width: 100%; height: auto; }

/* Prevent Android Chrome font size inflation */
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* ============================================================
   NAVIGATION — Hamburger menu
   ============================================================ */

/* Hamburger button (hidden on desktop) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin: -8px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #163138;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 767px) {
  /* Show hamburger */
  .nav-toggle { display: flex; }

  /* Collapse nav links into a vertical dropdown */
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 3px solid #163138;
    padding: 8px 16px 20px;
    gap: 0;
    z-index: 99;
    box-shadow: 0 8px 24px rgba(22,49,56,0.12);
    list-style: none;
  }
  .nav-links.open { display: flex; }

  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 13px 0;
    font-size: 15px;
    border-bottom: 1px solid #eef2f3;
    letter-spacing: 0.06em;
  }
  .nav-links li:last-child a { border-bottom: none; }

  /* Contact Us — now lives inside .nav-links as the last <li>.
     Style it as a full-width orange button inside the mobile dropdown. */
  .nav-links li:last-child {
    margin-top: 8px;
    padding-top: 8px;
    border-bottom: none !important;
  }
  .nav-links .btn-contact {
    display: block;
    text-align: center;
    padding: 13px 22px;
    width: 100%;
    box-sizing: border-box;
    border-bottom: none !important;
  }
}


/* ============================================================
   GLOBAL: Container & nav padding
   ============================================================ */

@media (max-width: 767px) {
  .container,
  .nav-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .container,
  .nav-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}


/* ============================================================
   GLOBAL: Section vertical padding
   ============================================================ */

@media (max-width: 767px) {
  section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  /* Hero sections keep a bit more breathing room */
  .hero {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
  }
}


/* ============================================================
   GLOBAL: Footer
   ============================================================ */

@media (max-width: 767px) {
  .footer-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }
  .footer-links {
    justify-content: flex-start !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}


/* ============================================================
   GLOBAL: Hero — shared across homepage, technology, clinical
   ============================================================ */

@media (max-width: 1023px) {
  .hero-content {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .hero h1 { font-size: 38px !important; }
  .hero-sub { max-width: 100% !important; font-size: 16px !important; }
  .hero-stats {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 767px) {
  .hero-content {
    padding: 48px 16px !important;
    gap: 32px !important;
  }
  .hero h1       { font-size: 30px !important; line-height: 1.2 !important; }
  .hero-sub      { font-size: 15px !important; }
  .hero-right    { display: none !important; }  /* hide hero image on small phones */
  .hero-ctas     { flex-direction: column !important; gap: 12px !important; }
  .hero-ctas > * { text-align: center !important; width: 100% !important; box-sizing: border-box !important; }
  .hero-stats    { grid-template-columns: 1fr !important; gap: 12px !important; }
  .hero-stat-card { padding: 16px !important; }
}


/* ============================================================
   GLOBAL: Split grid (technology, clinical, about)
   ============================================================ */

@media (max-width: 1023px) {
  .split-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    direction: ltr !important;   /* un-reverse reversed rows */
  }
  .split-grid > * { direction: ltr !important; }
  .split-visual img {
    width: 100% !important;
    max-height: 320px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }
}


/* ============================================================
   HOMEPAGE (index.html)
   ============================================================ */

/* Pillars: 3-col → 1-col */
@media (max-width: 767px) {
  .pillars-grid {
    grid-template-columns: 1fr !important;
  }
  .pillar {
    border-right: none !important;
    border-bottom: 1px solid #eef2f3 !important;
    padding: 32px 16px !important;
  }
  .pillar:last-child { border-bottom: none !important; }
}

/* Technology spotlight: 2-col → 1-col */
@media (max-width: 1023px) {
  .tech-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* Milestones: 3-col → 1-col */
@media (max-width: 767px) {
  .milestones-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .milestones-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mission inner: 2-col → 1-col */
@media (max-width: 1023px) {
  .mission-inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* News grid: 3-col → 1-col */
@media (max-width: 767px) {
  .news-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ============================================================
   TECHNOLOGY PAGE (technology.html)
   ============================================================ */

/* Pillars grid — same class as homepage */
/* .pillars-grid already handled above */

/* Tech sections: padding */
@media (max-width: 767px) {
  .tech-section { padding: 52px 0 !important; }
}


/* ============================================================
   CLINICAL PAGE (clinical.html)
   ============================================================ */

/* Indication grid: repeat(4,1fr) → 2-col → 1-col */
@media (min-width: 768px) and (max-width: 1023px) {
  .indications-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 767px) {
  .indications-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Safety/stats grid: repeat(3,1fr) → 1-col */
@media (max-width: 767px) {
  .safety-grid,
  .stats-highlights {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Program history track — switch to flex on mobile so inline
   grid-column/grid-row attributes on child cells are ignored entirely */
@media (max-width: 767px) {
  .program-track {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Column header labels (Safety & First Imaging, etc.) — hide on mobile */
  .program-track .ph-label { display: none !important; }

  /* Row divider between breast and brain sections */
  .program-track .ph-row-header { display: none !important; }

  /* The ph-row-current "Current Lead Program" label — keep visible */
  .program-track .ph-row-current {
    width: 100% !important;
    text-align: left !important;
  }

  /* The flex wrapper for breast cancer current cards — stack vertically */
  .program-track > div {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .program-track > div[style*="display:flex"],
  .program-track > div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .program-track > div[style*="display:flex"] > .program-card,
  .program-track > div[style*="display: flex"] > .program-card {
    flex: none !important;
    width: 100% !important;
  }

  /* Remove fixed min-heights — let content set height */
  .program-card {
    min-height: auto !important;
    padding: 16px !important;
  }

  /* The nested flex column (brain cancer col1 with 2 stacked cards) */
  .program-track > div[style*="flex-direction:column"],
  .program-track > div[style*="flex-direction: column"] {
    gap: 10px !important;
  }
}

/* Canvas bar: flex row → column */
@media (max-width: 767px) {
  .canvas-bar-inner {
    flex-direction: column !important;
    gap: 24px !important;
    align-items: flex-start !important;
  }
}


/* ============================================================
   ABOUT PAGE (about.html)
   ============================================================ */

/* Story/mission grid: 1fr 1fr → 1-col */
@media (max-width: 1023px) {
  .story-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* Team grid: repeat(2,1fr) → 1-col on mobile */
@media (min-width: 768px) and (max-width: 1023px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}
@media (max-width: 767px) {
  .team-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Photo left, text right on mobile cards */
  .team-card {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 20px !important;
  }
  .team-card img {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
  }
  .team-name { font-size: 15px !important; }
  .team-title { font-size: 12px !important; }
  .team-bio { font-size: 13px !important; margin-top: 6px !important; }
}

/* Board/advisors grid: repeat(4,1fr) → 2-col → 1-col */
@media (min-width: 768px) and (max-width: 1023px) {
  .board-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 767px) {
  .board-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* Founder grid: 280px 1fr → 1-col */
@media (max-width: 1023px) {
  .founder-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .founder-grid img {
    max-width: 260px !important;
  }
}


/* ============================================================
   NEWS PAGE (news.html)
   ============================================================ */

/* News cards: repeat(3,1fr) → 2-col → 1-col */
/* .news-grid already handled under homepage above — same class */

/* Media / coverage grid: repeat(3,1fr) → 2-col → 1-col */
@media (max-width: 767px) {
  .media-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .media-section {
    padding: 52px 0 !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .media-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .media-section {
    padding: 72px 0 !important;
  }
}

/* Publications list: 2-col (year | content) → 1-col stacked */
@media (max-width: 767px) {
  .pub-item {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .pub-year {
    font-size: 12px !important;
  }
}


/* ============================================================
   CAREERS PAGE (careers.html)
   ============================================================ */

/* Benefits/values grid: 1fr 1fr → 1-col */
@media (max-width: 767px) {
  .values-grid,
  .benefits-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .values-grid,
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* CTA banner: flex row → column */
@media (max-width: 767px) {
  .cta-banner-inner,
  .cta-inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 20px !important;
    align-items: center !important;
  }
  .cta-banner .btn-primary,
  .cta-inner .btn-primary {
    width: 100% !important;
    text-align: center !important;
  }
}


/* ============================================================
   PRIVACY PAGE (privacy.html)
   ============================================================ */

/* policy-grid & TOC: already handled inline at 700px.
   Extend breakpoint to 767px for consistency. */
@media (max-width: 767px) {
  .policy-grid {
    grid-template-columns: 1fr !important;
  }
  .policy-toc { display: none !important; }
}


/* ============================================================
   GLOBAL: Typography scale
   ============================================================ */

@media (max-width: 767px) {
  /* Page hero headlines (non-full-bleed heroes) */
  .page-hero h1,
  .page-hero .hero-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  /* Section headings */
  h2 { font-size: 26px !important; }

  /* Ensure body text readable */
  p { font-size: 15px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero h1 { font-size: 38px !important; }
  h2 { font-size: 30px !important; }
}


/* ============================================================
   UTILITY: Touch targets
   Minimum 44px height for all interactive elements on mobile
   ============================================================ */

@media (max-width: 767px) {
  .btn-primary,
  .btn-secondary,
  .btn-contact,
  button {
    min-height: 44px;
  }
}


/* ============================================================
   NEWS PAGE — press card mobile fix
   ============================================================ */

@media (max-width: 767px) {
  .press-card {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 24px 20px !important;
  }
  .press-date-col {
    width: auto !important;
    flex-shrink: 1 !important;
  }
  .press-body h3 {
    font-size: 17px !important;
  }
}


/* ============================================================
   PRIVACY PAGE — mobile spacing fix
   ============================================================ */

@media (max-width: 767px) {
  .policy-body {
    padding: 32px 0 48px !important;
  }
  .policy-content section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 28px !important;
    scroll-margin-top: 24px !important;
  }
}


/* ============================================================
   ABOUT PAGE — Scientific Advisory Board cards mobile fix
   ============================================================ */

@media (max-width: 767px) {
  .sab-card {
    flex-direction: row !important;
    align-items: flex-start !important;
  }
  .sab-card > div:first-child {
    width: 80px !important;
    min-width: 80px !important;
    height: 100px !important;
  }
  .sab-card > div:last-child {
    padding: 14px 16px !important;
  }
  .sab-card p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  .sab-card > div:last-child > div:first-child {
    font-size: 13px !important;
  }
  .sab-card > div:last-child > div:nth-child(2) {
    font-size: 9px !important;
    margin-bottom: 6px !important;
  }
}