/* Oculoplasty treatment pages + general pages batch - 2026-08-28 */

/* ---- Single card per row on phones ---- */
@media (max-width: 700px) {
  /* ptosis (159): conditions + why-us both use .svc-conditions */
  .page-id-159 .svc-conditions { grid-template-columns: 1fr !important; }
  /* ptosis (159): treatments = a 2-col (prose | cards) wrapper with no class */
  .page-id-159 [style*='1.05fr 0.95fr'] { grid-template-columns: 1fr !important; }
  /* thyroid (160): treatments .svc-phases */
  .page-id-160 .svc-phases { grid-template-columns: 1fr !important; }
  /* digital-eye-strain (141): symptoms .svc-syms */
  .page-id-141 .svc-syms { grid-template-columns: 1fr !important; }
  /* comprehensive (140): tech + free-checkup card sections .rq-3 */
  .page-id-140 .rq-3 { grid-template-columns: 1fr !important; }
}

/* comprehensive (140): hero .rq-2 was not collapsing, so the long title/intro overflowed
   and were clipped by the hero section's overflow:hidden. Stack on mobile/tablet. */
@media (max-width: 960px) {
  .page-id-140 .rq-2 { grid-template-columns: 1fr !important; }
}

/* ---- Broken images: <img position:absolute; inset:0> inside a wrapper/box that
   collapsed to no height. Sources are valid; just make the container fill its box. ---- */
/* digital-eye-strain (141) doctor photo: box = .svc-doc>div:first-child (aspect 1/1),
   inner wrapper collapses. */
.page-id-141 .svc-doc > div:first-child { position: relative !important; padding: 0 !important; }
.page-id-141 .svc-doc > div:first-child > div { position: absolute !important; inset: 0 !important; padding: 0 !important; }
/* digital-eye-strain (141) hero image panel (aspect 4/3) inside .svc-hero */
.page-id-141 .svc-hero [style*='aspect-ratio: 4 / 3'] { position: relative !important; }
.page-id-141 .svc-hero [style*='aspect-ratio: 4 / 3'] > div { position: absolute !important; inset: 0 !important; padding: 0 !important; }
/* artificial-eye (147) doctor photo: img is a direct child of a position:relative box with
   no height. Give the box a height so the image shows. */
.page-id-147 div:has(> img[alt*='prosthesis']) { position: relative !important; aspect-ratio: 4 / 3 !important; }

/* ptosis (159) specialist card: centre the photo-card content on mobile. */
@media (max-width: 960px) {
  .page-id-159 .svc-doctor .svc-doc-photo { text-align: center !important; align-items: center !important; }
}
/* comprehensive (140) hero: grid children need min-width:0 so the text column can
   shrink to the viewport and wrap (was overflowing/clipping the title + intro on mobile). */
.page-id-140 .rq-2 > div { min-width: 0 !important; }

/* Cost page (93): remove the (non-functional) 'Search a procedure' box. */
.page-id-93 .ct-search label { display: none !important; }
/* Cost page (93): 4-up card rows single per row on phones (Four Things = .ct-three,
   Cashless Insurance/Schemes/EMI = .ct-band). */
@media (max-width: 700px) {
  .page-id-93 .ct-three,
  .page-id-93 .ct-band { grid-template-columns: 1fr !important; }
}

/* visitor-information (122) FAQ: rotate the + into an x when the item is open. */
.page-id-122 button[aria-expanded="true"] .dy-faq-ic { transform: rotate(45deg); }

/* international-patients (110): all card sections single per row on phones. */
@media (max-width: 700px) {
  .page-id-110 .svc-cards6,
  .page-id-110 .svc-journey,
  .page-id-110 .svc-here,
  .page-id-110 .svc-tech,
  .page-id-110 .svc-conc { grid-template-columns: 1fr !important; }
}
/* recognitions-accreditations (115): all card sections single per row on phones. */
@media (max-width: 700px) {
  .page-id-115 .rq-2s,
  .page-id-115 .rq-3,
  .page-id-115 .rq-2 { grid-template-columns: 1fr !important; }
}

/* international-patients (110): What We Treat (.svc-tiles) + after-hero stat strip (.svc-statband) => 2 per row on phones. */
@media (max-width: 700px) {
  .page-id-110 .svc-tiles,
  .page-id-110 .svc-statband { grid-template-columns: 1fr 1fr !important; }
}


/* EQUIPMENTS DIAGNOSTICS GRID (page 725) — per Pradeep 2026-08-31:
   single card per row on mobile, 3 per row on desktop. Desktop keeps the inline repeat(3,1fr);
   this forces 1-col below 960 (over the generic .rq-3 2-col rule via higher specificity). */
@media (max-width: 960px) {
  body.page-id-725 .rq-3 { grid-template-columns: 1fr !important; }
  body.page-id-725 .rq-3 > * { grid-column: auto !important; grid-row: auto !important; }
}