/* Warwick Doctors: mobile responsiveness fixes. Loaded last on every page (see functions.php). */

/* 1. Never allow sideways scroll / right-hand white space */
html{max-width:100%;overflow-x:clip}
body{max-width:100%;overflow-x:clip}
main{overflow-x:clip}
header{width:100%;max-width:100%;box-sizing:border-box}
img,video,iframe,canvas,table{max-width:100%}

/* 2. Single-column grids: "1fr" can't shrink below its content (nowrap tab rows,
      long words), which widened the page. minmax(0,1fr) lets the track shrink. */
@media(max-width:980px){
  .crewsec .crewgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:900px){
  .sx,.stgrid,.whgrid,.gsplit,.pcards,.csg{grid-template-columns:minmax(0,1fr)!important}
  .sx>*,.stgrid>*,.whgrid>*,.gsplit>*,.pcards>*,.csg>*{min-width:0;max-width:100%}
  .stcol,.stabs,.spanels{min-width:0;max-width:100%}
}
@media(max-width:560px){
  .crewsec .crewgrid,.crewsec .cgm{grid-template-columns:minmax(0,1fr)}
  .crewgrid>*,.cgm>*{min-width:0}
}

/* 3. Preloader: always exactly the visible screen, content dead centre */
.loader{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100vh;height:100dvh;
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden}
.loader .inner{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;max-width:100%;margin:0 auto;text-align:center}
.loader svg{margin-left:auto;margin-right:auto}
.loader .count,.loader small{text-align:center}
.loader .lg{margin-left:auto;margin-right:auto;max-width:70vw}

/* 4. Small phones */
@media(max-width:480px){
  h1,h2,h3{overflow-wrap:break-word}
  p,li{overflow-wrap:break-word}
}

/* 5. Header "Book an Appointment" pill: never squeeze below its content
      (HotDoc chip + text + padding), so it fits like the other pills */
header .hbook{flex:0 0 auto;width:max-content;max-width:none;justify-content:center}
header .hbook .hdchip,header .hbook .hdchip img{flex:none;max-width:none}
header .hbook .hdt{white-space:nowrap;flex:none}

/* 6. Header logo: the image carries a pulse line under the wordmark, so box-centring
      makes the wordmark sit high. Nudge it so the wordmark lines up with the menu text. */
header .brand{display:flex;align-items:center}
header .brand .logo{transform:translateY(21%)}

/* 7. Root cause of squeezed booking pills site-wide: the HotDoc logo had max-width:100%
      inside a shrink-wrapped chip, which understated the pill's minimum width. */
.hdchip{flex:none}
.hdchip img{max-width:none;flex:none}

/* 8. GP carousel: no native image/link drag ghost (Firefox/Safari), no text selection while dragging */
.drag,.drag a,.drag img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
.drag{-webkit-tap-highlight-color:transparent}

/* 9. Home hero subtitle: "Now Accepting New Patients." in bold yellow, a little larger */
.hero .kicker{max-width:none;opacity:1;font-size:clamp(1.2rem,2.1vw,1.75rem);line-height:1.2;text-wrap:balance}
.hero .kicker b{color:#FFD25A;font-weight:800;letter-spacing:.005em;text-shadow:0 2px 14px rgba(10,25,18,.55)}

/* 10. Mobile hero: Medicare plaque must never sit on top of the hero text.
       The plaque stays bottom-right; the hero copy is kept to the left of it and the
       decorative photo caption (already hidden behind the Book button) is removed. */
.hero{--plw:120px}
@media(max-width:520px){.hero{--plw:108px}}
@media(max-width:360px){.hero{--plw:96px}}
@media(max-width:860px){
  .hero .plaque{width:var(--plw)}
  .hero .reveal-copy{right:auto;max-width:none;width:calc(100% - 20px - var(--plw) - 12px - 14px)}
  .hero .reveal-copy p{font-size:clamp(1.05rem,4.9vw,1.35rem);overflow-wrap:break-word}
  .hero .reveal-copy a{font-size:.95rem}
  .hero .pcap{display:none}
}

/* 11. Mobile / tablet header logo: bigger and never squeezed (the "scale-down pass" cut it to 26px) */
header .brand{flex:none}
header .logo{width:auto;max-width:none;object-fit:contain}
@media(max-width:1100px){header .logo{height:clamp(38px,10.5vw,46px)}}

/* 12. Home page: more breathing room between sections */
.home-main{--secgap:clamp(44px,5vw,76px)}
.home-main>.statement,.home-main>.team,.home-main>.crewsec,.home-main>.bb,.home-main>.women,
.home-main>.services,.home-main>.mym,.home-main>.gal,.home-main>.mapsec,.home-main>.journal,.home-main>.social2{
  padding-top:var(--secgap)!important;padding-bottom:var(--secgap)!important}
.home-main>.bb{padding-bottom:0!important}

/* 13. Phones: one GP card per screen in the home carousel, slide / swipe for the next */
@media(max-width:640px){
  .team .drag{gap:24px}
  .team .drag .doc{flex:0 0 calc(100vw - 2*var(--gut,20px))!important;width:calc(100vw - 2*var(--gut,20px))}
  .team .doc .ph{height:min(calc((100vw - 2*var(--gut,20px))*1.02),60vh)!important}
  .team .doc p{max-width:none}
}