/* ============================================================
   Precious Jewels Foundation Corporation
   RESPONSIVE STYLES — tablet, phone & landscape refinements

   The base layout in styles.css is already fluid (clamp-based
   type, auto-fit grids). This file loads AFTER styles.css and
   polishes specific breakpoints so the experience feels
   deliberate and professional on every device — not merely
   "shrunk down."

   Breakpoints
     1024px  small laptop / large tablet
      860px  tablet portrait  (nav switches to the hamburger here)
      640px  large phone
      480px  phone
      380px  small phone
     + landscape-phone and touch/hover refinements
   ============================================================ */

/* ============================================================
   0. GLOBAL — safe areas, gutters & touch ergonomics
   Applies at every width so the site respects notches,
   rounded corners and coarse-pointer input everywhere.
   ============================================================ */
:root{
  /* Single source of truth for the horizontal page gutter. */
  --gutter: clamp(1.15rem, 5vw, 4rem);
}

/* Honour the device safe-area (notches / rounded corners) while
   never letting the gutter fall below its fluid minimum. */
.container{
  padding-left:  max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.site-header{
  padding-left:  max(clamp(1.25rem,5vw,4rem), env(safe-area-inset-left));
  padding-right: max(clamp(1.25rem,5vw,4rem), env(safe-area-inset-right));
}
.mobile-overlay{
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom:env(safe-area-inset-bottom);
}
.site-footer{ padding-bottom: max(clamp(1.75rem,4vw,2.5rem), env(safe-area-inset-bottom)); }

/* Coarse pointers (phones/tablets): guarantee comfortable tap
   targets and drop hover-only motion that can't be triggered. */
@media (hover:none){
  .btn,.nav-donate,.submit-btn,.copy-btn,.icon-btn,.menu-toggle,
  .carousel-btn,.events-link,.copy-btn{ min-height:44px; }
  .mobile-link{ padding:.35rem 1rem; }          /* bigger hit area */
  .value-card:hover{ transform:none; }          /* no sticky hover lift */
}

/* ============================================================
   1. ≤ 1024px — small laptop / large tablet
   ============================================================ */
@media (max-width: 1024px){
  .hero-grid{ gap:2.4rem; }
  .hero-collage{ min-height:300px; }

  /* Tighten the CTAs so all three share the narrower row cleanly
     (they stay on one line at every width from here down). */
  .hero-actions{ gap:.6rem; }
  .hero-actions .btn{ padding:.82rem .95rem; font-size:.8rem; letter-spacing:.03em; }

  /* Programs, values, cards & about all use auto-fit grids and
     reflow on their own — nothing to force here. */
}

/* ============================================================
   2. ≤ 860px — tablet portrait (nav becomes the hamburger)
   ============================================================ */
@media (max-width: 860px){
  /* Hero has stacked to one column (styles.css); centre the collage. */
  .hero-collage{ margin-inline:auto; width:100%; }
  .hero-copy{ text-align:left; }

  /* Calmer vertical rhythm once sections are full-width. */
  .section, .section-alt, .donate{ padding-block: clamp(3rem, 8vw, 4.5rem); }

  /* Ease the diagonal clip so it never shears off content. */
  .section-alt{ clip-path: polygon(0 1.2%, 100% 0, 100% 98.8%, 0 100%); }

  /* Events header stacks; keep the "become a volunteer" link readable. */
  .events-head{ flex-direction:column; align-items:flex-start; gap:.6rem; }

  /* Donate collapses to one column; cap & centre the QR panel. */
  .donate-grid{ grid-template-columns:1fr; }
  .donate-right{ max-width:420px; margin-inline:auto; }
}

/* ============================================================
   3. ≤ 640px — large phone
   ============================================================ */
@media (max-width: 640px){
  .hero-grid{ padding-block: 6rem 3rem; }
  .hero-divider{ max-width:100%; }

  /* Keep the three CTAs on a single row, sharing the width evenly. */
  .hero-actions{ flex-wrap:nowrap; gap:.5rem; align-items:stretch; }
  .hero-actions .btn{
    flex:1 1 0; min-width:0; justify-content:center; text-align:center;
    padding:.7rem .5rem; font-size:.72rem; letter-spacing:.03em;
    line-height:1.15; min-height:48px;
  }

  /* Long body copy: justification creates ugly "rivers" on narrow
     columns — switch to a clean left edge on phones. */
  .about-copy p,
  .mv-quote,
  .contact-grid .lead,
  .donate-text{ text-align:left; hyphens:none; }

  .about-stats{ gap:.6rem; }
  .about-stats .stat-num{ font-size:1.6rem; }

  .mv-grid{ grid-template-columns:1fr; gap:1.2rem; }
  .mv-card{ padding:1.5rem; }

  /* Donate: tighter stack, roomier chips. */
  .donate-grid{ gap:2rem; }
  .support-list{ gap:.5rem; }

  .contact-form{ padding:1.4rem; }
  .footer-bottom{ gap:1.1rem; }
}

/* ============================================================
   4. ≤ 480px — phone
   ============================================================ */
@media (max-width: 480px){
  /* Type is fluid via clamp(); these gentle nudges keep the hero
     from dominating the very first screen. */
  .hero-tagline{ margin-block:.9rem 1.6rem; }
  .hero-slogan{ line-height:1.05; }
  .hero-collage{ max-width:300px; min-height:250px; }

  .section-head{ margin-bottom:2rem; }

  /* Donate tiers + QR sit comfortably on the smallest phones. */
  .tier{ gap:.8rem; padding:.85rem 1rem; }
  .tier-amount{ width:3rem; height:3rem; font-size:1.2rem; }
  .qr-box{ width:clamp(150px,52vw,190px); }

  .cashtag{ font-size:1.1rem; }
  .involve-card{ padding:2.25rem 1.5rem 2rem; }
}

/* ============================================================
   5. ≤ 380px — small phone
   ============================================================ */
@media (max-width: 380px){
  /* Free up navbar space on the tightest screens. */
  .brand-sub{ display:none; }
  .brand-name{ font-size:1.7rem; }
  .brand.has-logo .brand-mark,
  .brand.has-logo .brand-logo{ height:42px; }

  /* Two balanced stat cards read better than three cramped ones. */
  .about-stats{ grid-template-columns:1fr 1fr; }
  .about-stats > div:last-child{ grid-column:span 2; }

  .hero-actions{ gap:.4rem; }
  .hero-actions .btn{ font-size:.66rem; padding:.7rem .35rem; letter-spacing:.02em; }
}

/* ============================================================
   6. Landscape phones (short viewports)
   A phone held sideways is wide but very short — the full-height
   hero and generous section padding would otherwise bury content.
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape){
  .hero-grid{ min-height:auto; padding-block:5.5rem 2.5rem; }
  .section, .section-alt, .donate{ padding-block: clamp(2.5rem,7vh,4rem); }

  /* Let the full-screen menu scroll if it can't fit its links. */
  .mobile-overlay{ justify-content:flex-start; padding-top:4.5rem; overflow-y:auto; gap:1.1rem; }
  .mobile-link{ font-size:1.25rem; }
}

/* ============================================================
   7. Reduced motion — respect the OS preference site-wide
   (complements the base rules in styles.css)
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}