/* AIIMS redesign · About page fixes (8 Oct 2026) */

/* Hero: 400px tall on mobile like Services, Halo and Creator Hub (it was a fixed 600px), so the
   breadcrumb sits at the same height on every page. */
@media (max-width:767px){
  .ahp-page main article > section.h-\[600px\]:first-child{height:400px}
}

/* About Us collage, 1024-1279: the halves are 448px but the collage images keep their natural 517-609px
   widths, so the Throwback pair ran off the right edge and the Challenges hand covered the copy beside it.
   Scale both collages down in this band only (1280+ unchanged). */
@media (min-width:1024px) and (max-width:1279px){
  .ahp-page #about-us-scrollsection .relative.z-0{zoom:.78}
}

/* Values: the button box was centred with a translate, which made it the containing block of the
   "fixed inset-0" pop-ups, so a pop-up opened inside the 314px box and scrolled away with the page.
   Centre the box with inset + auto margins instead; the pop-ups then cover the viewport. */
.ahp-page section.relative.bg-light > .absolute.z-10{transform:none;inset:0;margin:auto}
/* The pop-up's own box is now see-through screen-wide (full width below 1024), so let taps outside the card
   reach the page: @click.away still closes it. */
.ahp-page section.relative.bg-light [x-data] > .fixed.inset-0{pointer-events:none}
.ahp-page section.relative.bg-light [x-data] > .fixed.inset-0 > *{pointer-events:auto}
/* While a pop-up is open (Alpine has dropped x-cloak and its display:none), lift only the pop-up to the
   page-modal layer (1002, as in pages.css), so on shorter screens the centred card is not cut by the header
   and the stuck tab bar. The box drops its z-index (no stacking context) instead of being lifted itself,
   so the rotated value buttons stay under the header. */
.ahp-page section.relative.bg-light > .absolute.z-10:has([x-show]:not([x-cloak]):not([style*="none"])){z-index:auto}
.ahp-page section.relative.bg-light [x-data] > .fixed.inset-0{z-index:1002}
/* Below 1280 the rotated value buttons overhung the screen edges and the next section: inset the box
   16px from each side and give the section room for the rotated corners (1280+ unchanged). */
@media (max-width:767px){
  .ahp-page main section.relative.bg-light{padding-top:80px;padding-bottom:80px}
  .ahp-page main section.relative.bg-light > .absolute.z-10{height:220px}
}
@media (min-width:768px) and (max-width:1279px){
  .ahp-page main section.relative.bg-light{padding-top:136px;padding-bottom:136px}
}
@media (max-width:1279px){
  .ahp-page main section.relative.bg-light > .absolute.z-10{width:calc(100% - 32px)}
}