/* ==========================================================
   MOBILE / TABLET RESPONSIVE FIXES — loaded last on every page
   Prevents sideways overflow and removes oversized blank gaps.
   ========================================================== */
html{-webkit-text-size-adjust:100%}
body{max-width:100%;overflow-x:hidden}
img,video,iframe,svg,embed,object{max-width:100%}
img{height:auto}
table{max-width:100%}
pre,code{white-space:pre-wrap;word-break:break-word}
h1,h2,h3,h4,p,li,a{overflow-wrap:break-word}

/* grids must be allowed to shrink below content width */
.posts-grid-2col{grid-template-columns:repeat(2,minmax(0,1fr))}
.ngg-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.ngg-gallery-thumbnail img{width:100%;max-width:100%;height:163px}

@media (max-width:860px){
  .blog-layout,.gallery-content-layout{grid-template-columns:minmax(0,1fr)!important;row-gap:30px}
  .blog-sidebar,.gallery-sidebar{width:100%;max-width:100%;margin:0 auto}
  .gallery-sidebar{margin-top:0!important}
}
@media (max-width:768px){
  .touch-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .posts-grid-2col{grid-template-columns:minmax(0,1fr)}
  .ngg-gallery-thumbnail img{height:auto;aspect-ratio:237/163}
}
@media (max-width:480px){
  .ngg-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width: 100%;
        margin-left: auto;
        margin-right: auto;}
}

/* ---------- Homepage: remove desktop overlap spacing on small screens ---------- */
@media (max-width:900px){
  .testimonials-highlights{height:auto;min-height:0;overflow:hidden}
  .testimonials-highlights .section-bg,
  .testimonials-highlights .section-overlay{right:0;margin-top:0;height:100%}
  .testimonials-highlights>.two-col{display:block;height:auto;grid-template-columns:minmax(0,1fr)}
  .testimonials{padding:45px 20px 30px;margin-top:0;min-height:0}
  .highlights article,.highlights article+article{margin-top:20px}
  .highlights article:first-child{margin-top:0}
  .highlights{padding:20px 15px}
  .highlights article+article{height:auto;min-height:0;margin-top:20px;padding:35px 25px}
  .services{padding:50px 0}
  .section-kicker{font-size:48px}
  .doctor-section{min-height:0}
  .doctor-wrap{padding-top:0;min-height:0}
  .doctor-card{position:relative;top:auto;right:auto;height:auto;margin:30px auto;padding:30px 24px}
}

/* ---------- Inner-page banners: no empty space under the title ---------- */
@media (max-width:600px){
  .about-hero,.contact-banner,.services-page-hero{height:auto;min-height:0;padding:15px 0}
  .about-hero-card,.contact-banner .container,.services-page-hero-card{
    position:relative;left:auto;top:auto;width:calc(100% - 30px);height:auto;margin:0 auto;padding:28px 24px}
  .about-hero-card h1,.contact-banner h1,.services-page-hero-card h1{font-size:34px;line-height:1.1;margin:0 0 14px;white-space:normal}
  .blog-page-banner,.gallery-page-banner{min-height:0;height:auto;padding:45px 0}
  .video-gallery-banner{height:auto;min-height:0;padding:15px 0}
  .video-gallery-banner .container{position:relative;left:auto;top:auto;width:calc(100% - 30px);min-width:0;height:auto;margin:0 auto;padding:28px 24px}
  .video-gallery-banner h1{font-size:34px;padding-left:0;margin-bottom:14px}
  .video-gallery-banner .crumbs{padding-left:0}
}
/* ---------- Contact page ---------- */
@media (max-width:768px){
  .get-in-touch,.contact-us{padding:134px 0 51px}
  .get-in-touch h2,.contact-us h2{font-size:42px;line-height:1.15;margin-bottom:8px}
  .get-in-touch .sub,.contact-us .sub{font-size:24px;line-height:1.2;margin-bottom:25px}
  .contact-map-row,.contact-map-row .map{height:320px}
}
@media (max-width:600px){
  .contact-us form .row,.contact-us .form-row,.contact-us .form-grid{grid-template-columns:minmax(0,1fr)!important;flex-direction:column}
  .contact-us input,.contact-us textarea,.contact-us select{width:100%;max-width:100%}
}
/* ---------- Footer: tighter on phones ---------- */
@media (max-width:768px){
  .site-footer{padding-top:35px;min-height:0}
  .site-footer .footer-inner{width:calc(100% - 30px)!important;max-width:100%}
  .site-footer .footer-cards{grid-template-columns:minmax(0,1fr)!important;gap:16px;padding:0!important;        margin-left: 33px;}
  .site-footer .footer-cards article,.site-footer .footer-cards article:last-child:nth-child(odd){min-height:0!important;max-width:100%!important;padding:30px 20px!important}
  .site-footer .copyright{padding:25px 10px;line-height:1.7}
}

/* tag chips never break mid-word */
.tagcloud a,.widget-tagcloud a,.tag-cloud a{white-space:nowrap}
.tagcloud,.widget-tagcloud .tagcloud{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- 320px safety ---------- */
@media (max-width:600px){
  .video-profile{grid-template-columns:minmax(0,1fr)}
  .video-side,.profile-card{min-width:0;max-width:100%;width:100%;box-sizing:border-box}
  .profile-card{padding:40px 24px}
  .orig-crumb{flex-wrap:wrap;white-space:normal;max-width:100%}
  .orig-crumb span{white-space:normal;max-width:100%}
  .ngg-albumoverview{padding-left:0;padding-right:0}
  .ngg-album-compact{width:100%;max-width:260px}
}
@media (max-width:768px){
  .ngg-albumoverview{width:100%;margin-left:0;justify-items:center;row-gap:30px}
}
@media (max-width:480px){
  .ngg-albumoverview{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Navbar: laptop widths (header was ~1480px wide and clipped the buttons) ---------- */
@media (min-width:1025px) and (max-width:1480px){
  .common-location{display:none}
  .common-logo{width:230px;flex-basis:230px}
  .common-logo img{width:210px}
}
@media (min-width:1151px) and (max-width:1480px){
  .common-header-inner{padding-right:24px}
}

/* ---------- Article pages: sidebar fits on laptops/tablets ---------- */
@media (min-width:901px) and (max-width:1260px){
  .blog-layout,.blog-sidebar-layout,.orig-post-wrap.blog-sidebar-layout,.orig-blog-wrap.blog-sidebar-layout{
    grid-template-columns:minmax(0,1fr) 290px !important;column-gap:35px !important}
  .blog-sidebar,.orig-sidebar,.common-blog-sidebar{width:290px !important;min-width:0 !important;padding:30px 28px !important}
}

/* contact form: validation + status banner */
.contact-form .field{min-width:0}
.contact-form .field textarea{margin-bottom:0}
.contact-form .row-3{align-items:start}
.contact-form .field + .field{margin-top:0}
.contact-form>.field{margin-bottom:20px}
.form-error-text{display:none;color:#dc3545;font-size:14px;margin-top:5px;line-height:1.3}
.form-error-text.active{display:block}
.contact-form input.is-invalid,.contact-form textarea.is-invalid{border-color:#dc3545}
#contactAlert{max-width:760px;margin:0 auto 24px;padding:16px 18px;border:1px solid transparent;font-size:15px;line-height:1.6;font-weight:600;text-align:left}
#contactAlert[hidden]{display:none}
.contact-alert-success{color:#1b5e20;background:#e8f5e9;border-color:#b7dfb9}
.contact-alert-error{color:#7a1f1f;background:#fdecea;border-color:#f3c0bb}
@media (max-width:600px){.contact-form .row-3{grid-template-columns:minmax(0,1fr)}}

/* homepage appointment form: status banner + invalid state */
#appointmentAlert{margin:0 0 16px;padding:14px 16px;border:1px solid transparent;font-size:15px;line-height:1.5;font-weight:600}
#appointmentAlert[hidden]{display:none}
.af-form .is-invalid{border-color:#dc3545 !important}

/* ==========================================================================
   HOME — FLUID HERO SLIDER + DOCTOR CARD
   Loaded last, so these rules replace the older fixed-pixel geometry.
   ========================================================================== */

/* ---- Hero: height follows the width (same 2:1 composition as desktop),
        so the artwork + baked-in text are never cropped on narrower screens ---- */
.hero{height:auto;min-height:0;max-height:726px;aspect-ratio:1440/726;width: 100%;}
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-prev,.hero-next{width:clamp(30px,4vw,48px);height:clamp(48px,6vw,80px);font-size:clamp(26px,3.2vw,45px);line-height:1;padding:0}
.hero-dots{bottom:clamp(8px,1.8vw,25px);gap:clamp(8px,1.4vw,12px)}
.hero-dots button{position:relative;width:clamp(9px,1.2vw,12px);height:clamp(9px,1.2vw,12px)}
.hero-dots button::before{content:"";position:absolute;inset:-9px}   /* bigger touch target */
@media (max-width:900px){
  .hero{aspect-ratio:4/3;max-height:none}
  .hero-slide:first-child img{object-position:left center}        /* keep "Dr. Anupama R" text in view */
}
@media (max-width:600px){
  .hero-prev,.hero-next{display:none}                              /* swipe + dots on phones */
  .hero{touch-action:pan-y}
}

/* ---- Doctor section: the card now sits in the normal flow, so it can never
        collide with the section above/below at any width ---- */
.doctor-section{--doc-bg-h:clamp(300px,29.7vw,520px);height:auto;min-height:0;overflow:visible;position:relative;background:#fff}
.doctor-bg{top:0;left:0;right:0;bottom:auto;height:var(--doc-bg-h);background-size:cover;background-position:left center;background-repeat:no-repeat}
.doctor-section::after{top:0;left:0;right:0;bottom:auto;height:var(--doc-bg-h)}
.doctor-wrap{position:relative;z-index:2;display:flex;justify-content:flex-end;align-items:flex-start;width:100%;max-width:none;height:auto;min-height:0;margin:0;
  padding:calc(var(--doc-bg-h)*.17) 4.5% 40px}
.doctor-card{position:relative;top:auto;right:auto;z-index:5;box-sizing:border-box;width:min(780px,46vw);height:auto;min-height:0;margin:0;
  padding:clamp(26px,3vw,35px) clamp(24px,5.4vw,78px) clamp(26px,2.6vw,36px)}
.doctor-card h2{font-size:clamp(34px,3.8vw,72px);line-height:1.1;margin:0 0 10px}
.credentials,.position{font-size:clamp(15px,1.4vw,20px)}
.doctor-copy{max-width:none;padding-left:clamp(0px,2.3vw,33px);font-size:clamp(14px,1.05vw,15px)}
.stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.8vw,25px);margin-top:clamp(20px,2.2vw,30px)}
.stats strong{font-size:clamp(26px,3.4vw,48.5px);white-space:nowrap}
.stats span{font-size:clamp(12px,1.1vw,16px);line-height:1.3}

@media (max-width:1024px){
  .doctor-section{--doc-bg-h:clamp(220px,52vw,420px)}
  .doctor-wrap{display:block;padding:calc(var(--doc-bg-h) - 56px) 0 32px}   /* card overlaps the photo by 56px */
  .doctor-card{width:min(680px,calc(100% - 32px));margin:0 auto;padding:30px 26px 28px;box-shadow:0 8px 28px rgba(0,0,0,.16)}
  .doctor-card h2{font-size:clamp(30px,5.4vw,44px)}
  .doctor-copy{padding-left:0;padding-top:18px}
}
@media (max-width:480px){
  .doctor-section{--doc-bg-h:clamp(200px,56vw,260px)}
  .doctor-wrap{padding-bottom:26px}
  .doctor-card{width:calc(100% - 24px);padding:24px 18px 22px}
  .doctor-card h2{font-size:29px}
  .stats{gap:8px}
  .stats strong{font-size:clamp(23px,7.4vw,30px)}
  .stats span{font-size:11.5px}
}

/* ---- Appointment block: nothing may be wider than the phone ---- */
.appointment-grid>*{min-width:0}
.emergency,.emergency a,.appointment-form{max-width:100%;box-sizing:border-box}