/* mobile-fellowship.css — fellowship page mobile overrides (linked after fellowship.css)
   Breakpoint: 768px. Structural fixes for 390px that fellowship.css 680px/900px don't cover. */

@media (max-width: 768px) {

  /* ── HERO ─────────────────────────────────────────────────── */
  .fp-hero-org  { font-size: 32px; }
  .fp-hero-prog { font-size: 32px; }

  /* Recalibrate dot for 32px cap (~22px cap-height) */
  .fp-hero-org::before {
    top: -8px;
    left: -10px;
    width: 28px;
    height: 28px;
  }

  .fp-hero-illus {
    width: 100%;
    max-width: 100%;
    height: clamp(200px, 55vw, 280px);
    margin: 0;
  }

  .fp-hero-bullets li { font-size: 18px; }

  /* ── NOMINATIONS pills ────────────────────────────────────── */
  /* 680px already stacks pills; connector stays rotated fine */
  .fp-noms-intro { font-size: 18px; }
  .fp-pill-label { font-size: 14px; }
  .fp-pill-date  { font-size: 18px; }

  /* ── SUBNAV: horizontal scroll (already overflow-x: auto) ── */
  .fp-snav-item { font-size: 13px; padding: 8px 6px; }
  .fp-snav-icon { width: 20px; height: 20px; }

  /* ── OBJECTIVES ───────────────────────────────────────────── */
  .fp-text-bullets li { font-size: 18px; }

  /* ── BENEFITS circles: stack vertically ──────────────────── */
  .fp-circles-row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .fp-circ {
    width: min(260px, 78%);
  }

  .fp-circ-body { font-size: 18px; }

  /* ── EXPECTATIONS ─────────────────────────────────────────── */
  /* 900px already stacks; make photo full width on mobile */
  .fp-exp-photo {
    max-width: 100%;
    width: 100%;
    min-height: 200px;
  }

  .fp-exp-text { font-size: 18px; padding-left: 40px; }

  /* ── ELIGIBILITY ──────────────────────────────────────────── */
  /* 680px stacks; just reduce font */
  .fp-elig-box { font-size: 18px; }

  /* ── REVIEW PROCESS ───────────────────────────────────────── */
  /* 680px already stacks review row; shrink circle size */
  .fp-rcirc { width: min(270px, 82%); }
  .fp-rcirc-body { font-size: 17px; }

  /* ── TIMELINE ─────────────────────────────────────────────── */
  .fp-tl-wrap {
    grid-template-columns: 130px 22px 1fr;
    column-gap: 10px;
    row-gap: 28px;
  }

  /* Reposition amber line to match date col: 130 + 10 + 22/2 = 151px */
  .fp-tl-wrap::before {
    left: 151px;
    top: 11px;
    bottom: 11px;
  }

  /* Figma: dates left-aligned, not right; 16px keeps labels uncrowded */
  .fp-tl-date  { font-size: 16px; text-align: left; }
  .fp-tl-label { font-size: 18px; }

  /* Left edge of triangle covers amber line: col start(140px) + 8px = 148px (= line_center 151 - 3px) */
  .fp-tl-dot-play { justify-self: start; margin-left: 8px; }

  /* ── APPLICATION ──────────────────────────────────────────── */
  .fp-app-banner {
    width: auto;
    border-radius: 0 16px 16px 0;
  }
  .fp-app-banner p {
    white-space: normal;
    font-size: 18px;
  }

  .fp-app-intro { font-size: 18px; }

  .fp-app-box {
    border-radius: 16px;
    padding: 20px 16px;
  }

  .fp-doc-text { font-size: 18px; }
  .fp-doc-tip  { font-size: 18px; }

  /* Disclaimer: switch from absolute layout to simple flow */
  .fp-disclaimer {
    width: 100%;
    max-width: 340px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .fp-disclaimer-rocket {
    position: static;
    width: 100px;
    height: auto;
  }

  .fp-disclaimer-text {
    position: static;
    width: 100%;
    height: auto;
  }

  .fp-cta-btn {
    width: 100%;
    max-width: 260px;
    font-size: 17px;
    padding: 12px 20px;
  }
}