/* ==========================================================================
   Vet Fixer, LLC: mobile.css
   Phone-only tightening, loaded after site.css on every page.
   Goal: less chrome above the fold, less scrolling, bigger tap targets.
   Desktop is untouched (everything sits inside max-width queries).
   ========================================================================== */

@media (max-width: 47.99rem) {
  /* --- Top of page: three bars collapse to one slim line ----------------- */
  .topbar { display: none; }                         /* email/phone live in menu + footer */
  .announce__inner { padding-block: 0.45rem; gap: 0.35rem 0.75rem; }
  .announce p { display: none; }
  .announce__tag { font-size: 0.62rem; padding: 0.25rem 0.55rem; }
  .announce a.announce__cta { font-size: 0.85rem; }
  .hiring-strip { font-size: 0.82rem; }
  .hiring-strip__inner { padding: 0.4rem 0; gap: 0.35rem 0.75rem; }
  .hiring-strip p { display: none; }
  .hiring-strip__tag { font-size: 0.62rem; }

  /* --- Section rhythm ---------------------------------------------------- */
  .section { padding-block: 2.75rem; }
  .head { margin-bottom: 1.5rem; }
  .head--split { gap: 0.75rem; }
  .closer { padding-block: 2.75rem !important; }
  .cover { min-height: 0; padding-block: 3rem 2rem; }
  .cover--tall { min-height: 0; padding-block: 4rem 2.25rem; }
  .cover .lead, .section .lead { font-size: 1.02rem; }
  .btn-row { gap: 0.6rem; }
  .btn-row .btn { width: 100%; justify-content: center; }

  /* --- Forms: tighter, still 16px text so iOS does not zoom -------------- */
  .form-shell { padding: 1.25rem; }
  .field { margin-bottom: 0.85rem; }
  .field label { font-size: 0.88rem; margin-bottom: 0.3rem; }
  .field input, .field select { padding: 0.7rem 0.85rem; font-size: 16px; min-height: 46px; }
  .field textarea { min-height: 84px; font-size: 16px; }
  .field .hint { font-size: 0.8rem; }

  /* --- Footer: two compact columns, drop the blog thumbnails ------------- */
  .site-footer { padding-top: 2.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid > div:nth-child(3) { display: none; }   /* "For families" article cards */
  .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-grid ul { gap: 0; }
  .footer-grid li a { display: block; padding: 0.4rem 0; font-size: 0.92rem; }
  .footer-grid .hours li { padding-block: 0.3rem; font-size: 0.88rem; }
  .footer-bottom { flex-direction: column; gap: 0.35rem; font-size: 0.8rem; }

  /* --- Floating "Day Program: Apply now" tab: smaller on phones ---------- */
  .vfdp-tab { left: 10px; bottom: 10px; padding: 8px 12px; font-size: 0.75rem; }

  /* --- Events page -------------------------------------------------------- */
  .ev-hero { padding: 2.5rem 0 2.25rem !important; }
  .ev-hero h1 { font-size: 2.35rem !important; margin: 0.8rem 0 0.5rem !important; }
  .ev-hero .lead { font-size: 1rem; }
  .ev-facts { gap: 0.4rem !important; margin: 1rem 0 1.25rem !important; }
  .ev-facts li { padding: 0.45rem 0.7rem !important; font-size: 0.85rem !important; border-radius: 10px !important; }
  .ev-count { grid-template-columns: repeat(4, 1fr) !important; gap: 0.4rem !important; margin-top: 1.25rem !important; }
  .ev-count div { padding: 0.55rem 0 0.45rem !important; border-radius: 12px !important; }
  .ev-count b { font-size: 1.45rem !important; }
  .ev-pillars { gap: 0.6rem !important; margin-top: 1rem !important; }
  .ev-pillar { display: grid !important; grid-template-columns: 44px 1fr; gap: 0 0.85rem; padding: 1rem !important; border-radius: 16px !important; }
  .ev-pillar__icon { width: 44px !important; height: 44px !important; border-radius: 12px !important; margin: 0 !important; grid-row: span 2; }
  .ev-pillar h3 { font-size: 1.05rem !important; margin: 0 0 0.2rem !important; }
  .ev-pillar p { font-size: 0.9rem; line-height: 1.45; }
  .ev-forms { margin-top: 1rem !important; gap: 0 !important; }
  .ev-card { border-radius: 20px !important; }
  .ev-card__head { padding: 1.1rem 1.25rem 1rem !important; }
  .ev-card__head h2 { font-size: 1.4rem !important; margin-top: 0.4rem !important; }
  .ev-card__head p { font-size: 0.9rem; }
  .ev-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; margin: 1rem 0 0.9rem;
    background: rgba(251, 249, 245, 0.08); border: 1px solid rgba(251, 249, 245, 0.16); border-radius: 999px; }
  .ev-tabs button { appearance: none; border: 0; border-radius: 999px; min-height: 46px; font: inherit; font-weight: 800; font-size: 0.92rem;
    background: transparent; color: var(--on-ink); cursor: pointer; }
  .ev-tabs button[aria-selected="true"] { background: var(--gold); color: var(--plum-deep); }
  .ev-card.is-tab-hidden { display: none; }
}

@media (min-width: 48rem) { .ev-tabs { display: none; } }

/* --- v2: footer grid fix + home page density ---------------------------- */
@media (max-width: 47.99rem) {
  .footer-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .footer-grid > div { min-width: 0; width: auto !important; flex: none !important; }

  /* Image cards (services, guides): shorter photos, tighter text */
  .card__media { aspect-ratio: 16 / 8 !important; }
  .card__body { padding: 1rem 1.1rem 1.15rem !important; }
  .card__body h3 { font-size: 1.12rem !important; margin-bottom: 0.3rem !important; }
  .card__body p { font-size: 0.92rem; line-height: 1.5; }
  .cards { gap: 0.85rem !important; }

  /* "Why choose Vet Fixer" icon boxes: icon beside the text instead of on top */
  .icon-box { display: grid !important; grid-template-columns: 44px 1fr; gap: 0 0.85rem; padding: 1rem !important; align-items: start; }
  .icon-box__i { width: 44px !important; height: 44px !important; margin: 0 !important; grid-row: span 2; }
  .icon-box__i svg { width: 20px; height: 20px; }
  .icon-box h3 { font-size: 1.05rem !important; margin: 0 0 0.2rem !important; }
  .icon-box p { font-size: 0.9rem; line-height: 1.45; margin: 0; }

  /* Day program steps and numbered lists */
  .steps { gap: 0.75rem !important; }
  .step { padding-block: 0.9rem !important; }
  .step p { font-size: 0.92rem; }
  .numbered > li { padding-block: 1rem !important; }

  /* Family portal: drop the decorative example card on phones */
  .mock-update { display: none !important; }
  .portal-feats { gap: 0.7rem; margin-top: 1.1rem; }
  .hire-band { padding-top: 1.75rem; }
  .hire-band__card { padding: 1.4rem 1.2rem; }
  .hire-band__roles li { padding: 0.55rem 0.85rem; font-size: 0.92rem; }
}

@media (max-width: 47.99rem) {
  /* v3: footer links in two columns */
  .footer-grid > div { grid-column: 1 / -1 !important; }
  .footer-grid > div:nth-child(2) ul { columns: 2; column-gap: 1.25rem; }
  .footer-grid > div:nth-child(2) li { break-inside: avoid; }
  .footer-grid h2 { margin-bottom: 0.6rem; }
}

@media (max-width: 47.99rem) {
  .footer-grid > div:nth-child(2) ul { display: block !important; columns: 2 !important; }
}