/* ============================================================
   Shared responsive stylesheet — mobile & tablet fixes.
   NOTE: this site is rendered through a small React-based runtime
   (support.js) that reads inline style="..." text and re-applies it
   via the DOM style API. The browser then re-serializes that
   attribute in a NORMALIZED form (shorthand-consolidated, spaced,
   rgb() colors) — so CSS attribute-substring selectors can't
   reliably match the original inline text. Every rule below
   therefore targets an explicit class added in the HTML.
   Breakpoints tested: 375, 390 (phone) / 768 (tablet) / 1024 (small desktop).
   ============================================================ */

/* ---------- Global safety net ---------- */
html { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }

/* Hero card description became a flex item (its parent is a flex column),
   so its fixed width:664px/height:78px are respected at any card width —
   let it size naturally instead, at every breakpoint. */
.ap-hero-desc { width: 100% !important; height: auto !important; max-width: none !important; }

/* Homepage shell was a hard-coded width:1360px, which overflows any viewport
   narrower than that (e.g. 1024px). Let it shrink fluidly at every breakpoint;
   the <=1023px rules further below add the single-column stack on top of this. */
.ap-shell { width: 100% !important; max-width: 1360px !important; }

/* ---------- Shared pill/arrow button style ----------
   One consistent size for every outline "Case study →" / "More here →" /
   "Full Archive →" / "The Flower Quiz →" style button, wherever it appears.
   Colors, borders and backgrounds stay per-instance (theme color); this only
   locks down the shape: height, padding, radius, type size, and label/arrow
   gap, and forces the label+arrow to sit centered as one unit. Uses
   !important because these attach alongside pre-existing inline styles. */
.site-pill-btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 44px !important;
  padding: 0 20px !important;
  font-family: 'Archivo', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border-radius: var(--r, 100px) !important;
  white-space: nowrap !important;
}
.site-pill-arrow {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* ---------- Touch-device equivalents for hover-only affordances ---------- */
@media (hover: none) {
  .ap-foil::after,
  .bee-foil::after,
  .cnn-foil::after {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   TABLET + PHONE  (<=820px) — covers 375, 390, 768
   ============================================================ */
@media (max-width: 820px) {
  /* Generic: any multi-column grid tagged for mobile collapse */
  .rz-collapse {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Sticky section-number labels: stop sticking once stacked full-width */
  .rz-sticky-label { position: static !important; }

  /* Oversized fixed-px headlines */
  .rz-h1-xl { font-size: 48px !important; }
  .rz-h2-section { font-size: 30px !important; }

  /* Small circular nav logos: bump toward a comfortable tap target */
  .rz-logo-sm { width: 44px !important; height: 44px !important; }

  /* Contact-row buttons (copy email / LinkedIn): taller tap target */
  .rz-row-btn { padding-top: 13px !important; padding-bottom: 13px !important; }

  /* Rows of two pill buttons side by side (e.g. Flower Quiz + Full Archive)
     can overflow a single narrow mobile column now that buttons are a fixed,
     consistent width — let them wrap instead of clipping. */
  .ap-pill-row { flex-wrap: wrap !important; gap: 12px !important; }

  /* Creative Lab photo grid: 6 columns -> 2 columns */
  .cl-photo-grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 160px !important; }
  #cl-1 { grid-column: span 2 !important; grid-row: span 2 !important; }
  #cl-2, #cl-3, #cl-4, #cl-5, #cl-6 { grid-column: span 1 !important; }

  /* Creative Lab "In Motion" videos: 4 columns -> 2 columns */
  .cl-video-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Homepage drawer: full-screen instead of a 640px side panel */
  .ap-drawer { width: 100% !important; }
  .ap-drawer-head { padding: 28px 24px 22px !important; }
  .ap-drawer-body { padding: 24px 24px 28px !important; }
  .ap-drawer-foot { padding: 16px 24px !important; }
  .ap-drawer-title { font-size: 30px !important; }
  .ap-drawer-close { width: 44px !important; height: 44px !important; }
}

/* ============================================================
   HOMEPAGE BENTO GRID (index.html) — collapses to a single
   stacked column at <=1023px in this priority order:
   CNN hero, IEP Tracker, NutriLearn, BeeFriendly, Creative Lab,
   About, Contact, Resume.
   ============================================================ */
@media (max-width: 1023px) {
  .ap-shell {
    width: 100% !important;
    margin: 16px auto !important;
    padding: 20px 16px 24px !important;
    border-radius: 20px !important;
  }
  .ap-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-template-areas:
      "head"
      "cnn"
      "iep"
      "nutri"
      "bee"
      "creative"
      "about"
      "contact"
      "resume" !important;
    border-width: 8px !important;
    padding: 10px !important;
    gap: 12px !important;
  }
}

/* ============================================================
   BELOW TABLET (<768px) — About page decorative illustration
   ============================================================ */
@media (max-width: 767px) {
  /* Small accent illustration pinned beside the first "Why UX" paragraph
     via a negative right offset — floats over body text once the column
     narrows. Purely decorative (aria-hidden, alt=""), so simplest fix is
     to drop it on mobile rather than compete with the daffodil below. */
  .about-fan-deco { display: none !important; }

  /* Daffodil illustration is positioned via a hard-coded top:1737px that
     assumes the desktop content height — at mobile that lands mid-
     paragraph in the "Why UX" list. Pull it out of that flow and pin it
     as a small, quiet corner decoration instead — desktop is untouched. */
  .about-daffodil-deco {
    position: fixed !important;
    left: 16px !important;
    top: auto !important;
    bottom: 16px !important;
    width: 56px !important;
    opacity: .85 !important;
    z-index: 1 !important;
    transform: rotate(-4deg) !important;
  }
}

/* ============================================================
   PHONE ONLY (<=599px) — covers 375, 390
   ============================================================ */
@media (max-width: 599px) {
  .rz-h1-xl { font-size: 40px !important; }
  .rz-h2-section { font-size: 26px !important; }
  .ap-drawer-title { font-size: 26px !important; }

  /* Site nav header: logo + name + 3-4 links doesn't fit at phone width.
     Drop the secondary title line and any nav CTA pill, and tighten gaps. */
  .site-header-inner { padding-left: 16px !important; padding-right: 16px !important; gap: 10px !important; }
  .site-brand-sub { display: none !important; }
  .site-cta-pill { display: none !important; }
  .site-nav, .bee-nav, .cnn-nav { gap: 14px !important; }
}