/* Dr Ana Borges — responsive layer: home. Loaded after main.css + responsive-shell.css. Everything inside @media (max-width:1023px) so desktop stays untouched. Rules: .claude/memory/responsive_playbook.md */

@media (max-width:1023px){
  /* vertical rhythm: desktop 110px section padding scaled down */
  .statement{padding:84px 0 24px;}
  .about{padding-bottom:80px;}
  .about-grid{gap:40px;padding-top:40px;padding-bottom:0;}
  .procedures{padding:80px 0 72px;}
  .carousel-block{margin-top:52px;}
  .patient-stories.patient-cards{padding:80px 0 72px;}
  .stories-head{margin-bottom:40px;}
  .faq{padding:80px 0;}
  .faq-image{margin-bottom:8px;}
  .faq-image img{width:100%;height:340px;object-fit:cover;}
  .reviews-module{padding:80px 0 72px;}
  .reviews-summary{margin-bottom:36px;}
  .news{padding:80px 0;}
  .news-head{margin-bottom:36px;}
  .locations{padding:80px 0;}
  .locations .carousel{margin-top:36px;}
  .contact{padding:80px 0;}
  .contact-grid{gap:44px;}
  .trust-bar{padding:48px 0 32px;}

  /* headings: tighter leading than body 1.6 so wrapped titles don't look gappy */
  .statement h2,.about-copy h2,.procedures>.container>h2,.carousel-head h3,.stories-head h2,.faq-copy h2,
  .reviews-module h2,.news-head h2,.locations>.container>h2,.contact-copy h2{line-height:1.2;}
  .carousel-head h3{font-size:clamp(22px,3.4vw,28px);}

  /* about portrait: cap height, keep the face */
  .about-image img{max-height:460px;object-position:center 20%;}

  /* story cards: equal heights per row instead of ragged bottoms */
  .story-cards{align-items:stretch;}
  .story-card figcaption{flex:1;}

  /* news cards: tidy a 2-column grid with 3 posts (third spans full width as a horizontal card) */
  .news .blog-card img{height:190px;}
}

@media (min-width:700px) and (max-width:1010px){
  .news .blog-card:last-child:nth-child(3){grid-column:1/-1;flex-direction:row;}
  .news .blog-card:last-child:nth-child(3) img{width:46%;height:auto;min-height:220px;flex:none;}
  .news .blog-card:last-child:nth-child(3) .blog-card-body{align-self:center;}
}

@media (min-width:700px) and (max-width:1023px){
  /* "Practising at": 6 logos as 3 + 3 instead of 5 + 1 orphan */
  .trust-bar-row+.trust-bar-label+.trust-bar-row{max-width:580px;margin-left:auto;margin-right:auto;}
}

@media (max-width:699px){
  .statement{padding:64px 0 16px;}
  .statement .lead{font-size:17px;}
  .about{padding-bottom:56px;}
  .about-grid{gap:32px;padding-top:32px;}
  .about-image img{max-height:420px;}
  .procedures{padding:60px 0 56px;}
  .procedures>.container>h2{font-size:clamp(26px,7.4vw,32px);}
  .carousel-block{margin-top:40px;}
  .carousel-head{margin-bottom:18px;gap:10px 16px;}
  .carousel-head h3{flex:1 1 100%;}   /* consistent: title on its own line, arrows underneath, for every carousel */
  .carousel{gap:16px;scroll-snap-type:x proximity;}
  .proc-card,.location-card,.reviews-carousel .review-card{scroll-snap-align:start;}
  .patient-stories.patient-cards{padding:56px 0 48px;}
  .stories-head h2{font-size:clamp(26px,7.4vw,34px);}
  .stories-head p{font-size:16px;}
  .story-doctify{margin-top:36px;}
  .faq{padding:56px 0;}
  .faq-image img{height:240px;}
  .faq-copy h2{font-size:clamp(26px,7.4vw,32px);}
  .accordion{margin:24px 0;}
  .accordion-trigger{padding:18px 0;font-size:16px;gap:16px;min-height:44px;}
  .reviews-module{padding:56px 0 52px;}
  .reviews-module h2{font-size:clamp(24px,6.8vw,30px);}
  .reviews-carousel .review-card{flex:0 0 min(300px,82vw);}
  .module-note{padding:0 4px;}
  .news{padding:56px 0;}
  .news .blog-grid{grid-template-columns:minmax(0,1fr);}   /* main.css minmax(300px,1fr) overflowed the 280px viewport */
  .news-head h2{font-size:clamp(26px,7.4vw,32px);}
  .news .blog-card img{height:180px;}
  .blog-card-body{padding:22px;}
  .locations{padding:56px 0;}
  .locations>.container>h2{font-size:clamp(26px,7.4vw,32px);}
  .location-card{flex:0 0 min(260px,78vw);}
  .contact{padding:56px 0;}
  .contact-copy h2{font-size:clamp(26px,7.4vw,32px);}
  .contact-grid{gap:32px;}
  .contact-form{padding:24px 20px;}
  .contact-form input,.contact-form textarea{font-size:16px;min-height:44px;}
  .contact-form label{font-size:14px;}
  .trust-bar{padding:40px 0 24px;}
}

@media (max-width:479px){
  .hero-photo .hero-content h1{font-size:clamp(32px,9.6vw,38px);}
  .proc-card{flex:0 0 min(260px,74vw);}
  .logo-chip-disc,.logo-chip.has-caption .logo-chip-disc{width:min(136px,calc((100vw - 2*var(--hgutter,20px) - 12px)/2));padding:10px 14px;}
  .trust-bar-row{gap:12px;}
  .contact-form{padding:22px 16px;}
}

/* wide screens: the right-anchored hero portrait ends in a hard left edge once the viewport is much wider than the photo; blend it into the dark panel */
@media (min-width:2200px){
  .hero-photo .hero-overlay{background:linear-gradient(90deg,rgba(28,25,22,.98) 0%,rgba(28,25,22,.98) 71%,rgba(28,25,22,.75) 74%,rgba(28,25,22,.3) 78%,rgba(28,25,22,0) 84%);}
}