/* Tablet & phone polish (Phase 1).
   Loaded LAST on every page (after the inline <style> on the homepage),
   so these rules win over older breakpoint rules. */

/* ---------- Case study / MK-II hero ----------
   The hero shot is meant to overhang into the cream spacer below,
   but overflow:hidden on .cs-hero cut it off. Clip only the top and
   sides (for the orbit ring), let the bottom overhang. */
.cs-hero { overflow-x: clip; overflow-y: visible; clip-path: inset(0 0 -260px 0); }

/* ---------- Hero: always exactly one screen below the header ----------
   Fills the viewport on every device so the next section never peeks in;
   only grows (instead of clipping) when the content is taller than the screen. */
.hero {
  height: auto !important;
  max-height: none !important;
  min-height: calc(100vh - var(--header-h, 68px)) !important;
  min-height: calc(100svh - var(--header-h, 68px)) !important;
}

/* ---------- Tablet & narrow desktop windows ---------- */
@media (max-width: 1080px) {
  /* The hero used a fixed 100vh height and clipped its content in
     one-column layouts. Let it grow with its content instead. */
  .hero { padding: 40px 0; }

  .hero-visual { height: auto; margin-bottom: 0; }
  .hero-photo-wrap {
    width: clamp(220px, min(48vw, 36vh), 420px);
    height: clamp(220px, min(48vw, 36vh), 420px);
  }

  .about-photo-wrap { height: 240px !important; max-width: 260px !important; }

  .showcase .device-phone { width: 22%; }
}

/* Portrait tablets: one centered column (two columns cut the headline
   off at ~820px). Landscape keeps the two-column hero, which fits. */
@media (max-width: 1080px) and (orientation: portrait) {
  .hero-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 56px;
  }
  .hero-visual { order: -1; margin-top: 60px; } /* room for the outer orbit ring */
  .hero-copy { align-items: center !important; max-width: 640px !important; margin: 0 auto; }
  .hero .eyebrow { justify-content: center; }
  .hero-actions { justify-content: center !important; }
}

/* ---------- Services: three cards, centred ----------
   home-base.css (loaded after home.css) sets the old 4-column grid;
   with three cards that left an empty column on the right. */
@media (min-width: 1025px) {
  .features-compact-grid.services-grid { grid-template-columns: repeat(3, 1fr) !important; max-width: 1040px; margin-left: auto; margin-right: auto; }
}

/* ---------- Services: compact horizontal cards below desktop ----------
   style.css styles .feature-compact-* with !important, so these must too. */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-top: 40px;
  }
  .services-grid .feature-compact-card,
  .services-grid .feature-compact-card:hover {
    flex-direction: row !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 16px;
    background: var(--cream-card) !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    padding: 20px !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .services-grid .feature-compact-visual {
    flex: 0 0 64px;
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    margin: 0 !important;
  }
  .services-grid .feature-compact-body,
  .services-grid .feature-compact-idx,
  .services-grid .feature-compact-title,
  .services-grid .feature-compact-desc {
    align-items: flex-start !important;
    text-align: left !important;
    margin-left: 0 !important;
  }
  .services-grid .feature-compact-desc { max-width: none !important; }
  .services-also { margin-top: 20px; }
}

/* ---------- Phones ---------- */
@media (max-width: 768px) {
  /* Phone hero: orb, headline and button as one centered block
     (the old layout pinned the button to the bottom edge). */
  .hero {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: clamp(36px, 5svh, 48px) 0 clamp(24px, 4svh, 40px) !important;
    overflow: hidden;
  }
  .hero-inner {
    height: auto !important;
    flex: none !important;
    justify-content: flex-start !important;
    gap: clamp(26px, 6svh, 60px) !important;
  }
  .hero-visual { max-width: none !important; }
  .hero-photo-wrap {
    width: min(210px, 56vw, 25svh) !important;
    height: min(210px, 56vw, 25svh) !important;
  }
  .orbit-deco--1 { width: calc(min(210px, 56vw, 25svh) + 32px) !important; height: calc(min(210px, 56vw, 25svh) + 32px) !important; }
  .orbit-deco--2 { width: calc(min(210px, 56vw, 25svh) + 60px) !important; height: calc(min(210px, 56vw, 25svh) + 60px) !important; }
  .hero-copy { flex: none !important; margin: 0 !important; padding: 0 !important; }
  .hero h1 { margin: 6px 0 12px !important; }
  .hero-sub { font-size: 0.98rem !important; }
  .hero-actions {
    margin-top: clamp(16px, 3svh, 28px) !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }
  .btn-explore { padding: 11px 24px !important; font-size: 0.8rem !important; }

  .section, .cs-section { padding: 64px 0; }
  .about { padding: 56px 0; }
  .mk2-teaser { padding: 64px 0; }
  .about-us { padding: 64px 0; }

  .about-photo-wrap { height: 200px !important; max-width: 220px !important; margin-bottom: 20px !important; }
  .about-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px !important;
    width: 100%;
  }
  .about-stats .stat-num { font-size: 1.6rem; }
  .about-stats .stat-num[style] { font-size: 1rem !important; line-height: 2; white-space: nowrap; }
  .about-stats .stat-label { font-size: 0.66rem; }

  .services-grid { grid-template-columns: 1fr !important; }
  .services-head h2, .mk2-teaser h2 { font-size: clamp(1.8rem, 8vw, 2.4rem); }

  .showcase .device-phone { width: 26%; }

  /* "Where BOB is today" strip: stack instead of three squeezed columns */
  .impact-telemetry-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .telemetry-tags-row { flex-wrap: wrap; justify-content: flex-start; gap: 6px 10px; }
  .telemetry-tags-row > span:nth-child(2), .telemetry-tags-row > span:nth-child(4) { display: none; }

  /* Footer: brand on top, link columns side by side */
  .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 28px 20px; }
  .footer-inner .footer-brand { grid-column: 1 / -1; }
  .footer-inner .footer-col:last-child { grid-column: 1 / -1; }

  .cs-meta { grid-template-columns: 1fr 1fr; }
  .mk2-hero-shot, .cs-hero-shot { margin-bottom: -60px; }
  .cs-hero-spacer { height: 60px; }
}

/* Small phones: icon above the text so the copy gets the full width */
@media (max-width: 600px) {
  .services-grid .feature-compact-card,
  .services-grid .feature-compact-card:hover { flex-direction: column !important; gap: 10px; }
  .services-grid .feature-compact-visual {
    flex: 0 0 48px;
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
  }
  .services-grid .feature-compact-title { font-size: 1.1rem !important; }
}

@media (max-width: 340px) {
  .footer-inner { grid-template-columns: 1fr !important; }
  .about-stats .stat-label { font-size: 0.6rem; }
}

/* Render labels: readable on top of the image at any width */
.render-note {
  background: rgba(20, 17, 13, 0.7);
  padding: 3px 8px;
  border-radius: 6px;
  right: auto;
  max-width: calc(100% - 28px);
}
@media (max-width: 600px) {
  .render-note { font-size: 0.6rem !important; letter-spacing: 0.04em !important; }
}

/* ---------- Navigation: 7 items need the burger menu below 1080px ---------- */
.main-nav a { white-space: nowrap; }
@media (max-width: 1200px) and (min-width: 1081px) {
  .main-nav { gap: 22px; }
}
@media (max-width: 1080px) {
  .site-header { position: sticky; top: 0; z-index: 999; }
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .main-nav.is-open {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--cream, #f7f1e6) !important;
    border-bottom: 2px solid var(--line, #e2d7c5) !important;
    padding: 24px 28px !important;
    gap: 18px !important;
    margin: 0 !important;
    box-shadow: 0 24px 48px rgba(27, 23, 18, 0.25) !important;
    z-index: 9999 !important;
  }
  .main-nav.is-open a {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--ink, #1b1712) !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(27, 23, 18, 0.08) !important;
    display: block !important;
  }
}