/* ============================================================
   THE STUDENT LIFE — mobile polish layer
   Loaded LAST on every page, after styles.css / city.css / wf.css.
   Scope: touch + small screens only. Desktop layout is left untouched.
   Everything here is additive: behaviour-only rules apply everywhere
   (no visual change on desktop), layout changes are inside media queries.
   ============================================================ */

/* ------------------------------------------------------------
   1. Native tap feel (behaviour only, all viewports)
   Removes the grey iOS tap flash and the 300ms double-tap delay,
   so taps feel instant and app-like. No effect on how things look.
   ------------------------------------------------------------ */
a, button, summary, label,
.btn, .tab, .qa button, .map-toggle, .nav-burger,
.sw-fab, .sw-row, .comm-card, .citycard, .ev-card, .pkg-feature,
[role="button"], input, textarea, select {
  -webkit-tap-highlight-color: transparent;
}
a, button, summary,
.btn, .tab, .qa button, .map-toggle, .nav-burger, .sw-fab,
[role="button"] {
  touch-action: manipulation;
}

/* ------------------------------------------------------------
   2. Overflow safety (behaviour only)
   Long words, emails, handles and headlines wrap instead of
   pushing the layout sideways on narrow screens.
   ------------------------------------------------------------ */
p, li, h1, h2, h3, h4, h5,
.lead, .val, .pkg-sub, .ev-desc,
.detail-row .v, .cost-row .v, .comm-card .desc {
  overflow-wrap: break-word;
}

/* ============================================================
   PHONE + SMALL TABLET  (<= 768px)
   ============================================================ */
@media (max-width: 768px){

  /* iOS notch: keep the sticky nav clear of the status bar / side notch.
     max() is a no-op on phones with no inset, so normal spacing is kept. */
  .nav-in{
    padding-top: max(12px, env(safe-area-inset-top));
    padding-left: max(22px, env(safe-area-inset-left));
    padding-right: max(22px, env(safe-area-inset-right));
  }

  /* Buttons: guaranteed comfortable tap height, and long labels now WRAP
     to a second line instead of forcing an over-wide pill or clipping. */
  .btn{
    min-height: 48px;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.15;
  }

  /* Smaller interactive bits get a real 44px+ hit area. */
  .tab{ min-height: 44px; }
  .nav-links.open a{ min-height: 48px; }
  .qa button{ min-height: 56px; }
  .footer a{ min-height: 44px; display: flex; align-items: center; }
}

/* ============================================================
   PHONE  (<= 560px) — phone-specific tightening
   ============================================================ */
@media (max-width: 560px){

  /* Hero: keep the two CTAs side by side in ONE row instead of two big
     full-width pills. They share the width equally and stay compact,
     echoing the tidy stats pill above them. */
  /* The hero column must be allowed to shrink to the phone width. Two wide
     children (the stats pill and the photo collage) otherwise stretch it past
     the screen, and .hero{overflow:hidden} silently clips the right edge on
     small phones. min-width:0 lets the grid column collapse to the viewport. */
  .hero-copy, .hero-visual{ min-width: 0; }
  .collage{ max-width: min(340px, 100%); }

  /* Hero collage: on phones the "Welcome Week Festival" sticker sat at the very
     top of the top-right photo and covered the faces. Drop it down to the lower
     edge of that photo so the faces stay clear. */
  .sticker.s-y{ top: 40% !important; }

  /* "your family abroad" handwritten note: on phones it is hidden as a collage
     decoration; show it instead in the flow, just above the CTA buttons and
     sitting over the "Join the Community" side. */
  .hero-fam{
    display:block !important;
    position:static !important;
    opacity:1;
    width:max-content; max-width:100%;
    margin:0 4px 8px auto;
    transform:rotate(-5deg);
    font-size:25px;
    text-align:right;
    pointer-events:none;
  }

  /* Hero: smaller stats pill + lead on phones (keeps the hero compact and
     helps the pill fit comfortably on small screens). Scoped to the hero,
     so other sections' eyebrows and leads are unchanged. */
  .hero .eyebrow{ font-size: 11.5px; letter-spacing: .1em; padding: 7px 13px; gap: 7px; }
  .hero .lead{ font-size: 15.5px; line-height: 1.45; margin-top: 20px; }

  /* Section eyebrow pills a little smaller + tighter on phones
     (e.g. "FROM THE GROUP CHAT TO MEMORIES"). */
  .eyebrow{ font-size: 12px; letter-spacing: .1em; padding: 7px 13px; }

  .hero-actions{ flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  .hero-actions .btn{
    width: auto; flex: 1 1 0; min-width: 0;
    padding-left: 12px; padding-right: 12px;
    font-size: 15px; text-align: center;
    white-space: normal;          /* beat base .btn nowrap so labels wrap, not clip */
    overflow-wrap: break-word;
  }

  /* University logo marquee: smaller marks on phones so more fit per row
     and the scroll reads as a clean strip, not one giant logo cropped in half. */
  .uni-mark{ height: 32px; margin-right: 36px; }
  .uni-mark img{ max-width: 150px; }
  .uni-rows{ gap: 20px; }

  /* Contact: the "reasons to get in touch" pills sit cleaner and wrap
     into tidy rows instead of one long pill crowding the edge. */
  .ct-reasons{ gap: 9px; }
  .ct-reasons li{ font-size: 14px; padding: 9px 15px 9px 10px; }

  /* Floating support button stays bottom-LEFT on phones (it moves to the right
     on desktop). Clear the home indicator on notched phones. No-op without inset. */
  .sw-wrap{
    bottom: max(16px, env(safe-area-inset-bottom));
    left: max(16px, env(safe-area-inset-left));
    right: auto;
  }
}

/* ============================================================
   LANDSCAPE PHONE — side notch protection
   Height gate keeps this off tablets and desktops (which are taller).
   ============================================================ */
@media (orientation: landscape) and (max-height: 500px){
  .wrap{
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}

/* ============================================================
   STUDENT TESTIMONIALS  (<= 700px)
   The highlighted featured card stays exactly as it was (square, centered,
   on top). Every other story moves into ONE swipeable row below it, a bit
   smaller. Shared .vfeatured / .vstories.vscroll => applies to every page.
   ============================================================ */
@media (max-width: 700px){
  .vfeatured{ margin: 16px 0 18px; }
  .vfeatured .vbig-item{ width: 100%; max-width: 300px; }

  .vstories.vscroll{
    display: flex;
    grid-template-columns: none;     /* cancel the base grid */
    align-items: flex-start;
    gap: 12px;
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px;                 /* bleed the strip to the screen edges */
    padding: 4px 20px 14px;
    scrollbar-width: none;
  }
  .vstories.vscroll::-webkit-scrollbar{ display: none; }
  /* Narrower cards so the next one always peeks in at the right edge: this
     signals there are more videos (3rd, 4th...) to swipe through. */
  .vstories.vscroll .vitem{
    flex: 0 0 auto;
    width: 40%;
    max-width: 172px;
    scroll-snap-align: start;
  }
  /* Fade the right edge a touch to reinforce "there's more to scroll". */
  .vstories.vscroll{
    -webkit-mask-image: linear-gradient(to right, #000 90%, rgba(0,0,0,.35));
    mask-image: linear-gradient(to right, #000 90%, rgba(0,0,0,.35));
  }
}

/* ============================================================
   HANDWRITTEN NOTES ON PHONES  (<= 700px)
   On desktop these orange doodles ("93 and counting!", "Need answers?",
   etc.) sit in the side margins. Those margins don't exist on phones, so
   they were hidden. Instead show each one as a small accent in the normal
   flow, just above its section heading. (hero-fam + WF page decos keep
   their own bespoke handling.)
   ============================================================ */
@media (max-width: 700px){
  .hand-note[style]:not(.hero-fam):not(.wf-pgdeco){
    display: block;
    position: static;
    width: fit-content;
    max-width: calc(100% - 32px);
    margin: 6px auto 2px;          /* centered above the section heading */
    font-size: 22px;
    line-height: 1.05;
    text-align: center;
    opacity: 1;
    pointer-events: none;
  }
  /* the sideways arrows pointed at desktop side-margins; they read as "wrong way"
     when the note is centered above the heading on phones, so hide them. */
  .hand-note .note-arr{ display: none; }
}

/* Footer legal links (Privacy Policy / Terms and Conditions / Refund Policy):
   one tidy row on phones instead of stacking. */
@media (max-width: 560px){
  .footer-bot > span:last-child{ display: none !important; }                  /* legal moves into its own footer column on phones */
  .footer-legal-col{ display: block; }
  .footer-grid > div:nth-child(4){ grid-column: auto; }            /* Company sits beside Legal, not full width */
}