/* AIIMS redesign · shared fixes for static inner pages (Services, Halo, Creator Hub, About …), 8 Oct 2026.
   Loaded after theme.css, design-consistency.css, header.css and footer.css. Body has .ahp-page. */

/* Breadcrumb: one treatment on every inner page, matching Services.
   Home (and any middle level) stays grey with an orange chevron; the current page is brand orange
   #F5412C at regular weight. Halo printed its current item bold grey; Creator Hub's light hero
   turned it #CC2F1D. */
.ahp-page nav[aria-label="Breadcrumb"] ol > li:last-child,
.ahp-page nav[aria-label="Breadcrumb"] ol > li:last-child a{color:#F5412C!important;font-weight:400!important}
.ahp-page nav[aria-label="Breadcrumb"] ol > li > a{transition:color .3s}
.ahp-page nav[aria-label="Breadcrumb"] ol > li:not(:last-child) > a:hover{color:#F5412C!important}

/* In-page tab bars (Services, About): stick just under the compact header (64px once scrolled) instead of
   behind it, and only across the sections they control (build_page.py wraps them in .ahp-tabs-scope). */
.ahp-page .ahp-tabs-scope > section.sticky{top:var(--ahx-bar-h-compact)}

/* "Discover the Halo" video lightbox (Halo, About): z-50 put it under the fixed header (1000), the mobile
   menu (1001) and back-to-top (999), so the header covered its close button. Page modals sit at 1002, under
   the focused skip link (1003). The 16:9 frame is also capped by the viewport height, so on short or
   landscape screens the close button (40px above the frame) and the player controls stay on screen. */
.ahp-page [x-data] > .fixed.inset-0.bg-black{z-index:1002}
.ahp-page [x-data] > .fixed.inset-0.bg-black > .max-w-4xl{max-width:min(56rem,calc((100vh - 7rem) * 16 / 9));max-width:min(56rem,calc((100dvh - 7rem) * 16 / 9))}

/* Services: the 'Web design specialist' / '#1 SEO agency' stickers hang 48px outside an image block that
   starts at the container edge (every section below 1024; SEM and Innovate, whose sticker is on the outer
   side, at 1024+), so wherever the side space was under 48px the screen edge cut them. They now hang out
   by at most that space, never less than the 24px gutter: unchanged wherever they already fitted, and
   1440+ is untouched. --ahp-gap is the space beside the container (main is the size container, so 100cqw
   is the page width without a scrollbar; the steps follow the theme's .container max-widths). */
.page-template-services main{container-type:inline-size}
.page-template-services{--ahp-gap:1.5rem}
@media (min-width:640px){.page-template-services{--ahp-gap:calc((100cqw - min(640px, 100cqw)) / 2 + 1.5rem)}}
@media (min-width:768px){.page-template-services{--ahp-gap:calc((100cqw - min(768px, 100cqw)) / 2 + 1.5rem)}}
@media (min-width:1024px){.page-template-services{--ahp-gap:calc((100cqw - min(1024px, 100cqw)) / 2 + 1.5rem)}}
@media (min-width:1280px){.page-template-services{--ahp-gap:calc((100cqw - min(1280px, 100cqw)) / 2 + 1.5rem)}}
@media (max-width:1023px){
  .page-template-services [id$="-scrollsection"] .absolute.top-32.-left-12{left:max(-3rem, calc(-1 * var(--ahp-gap)))}
  .page-template-services [id$="-scrollsection"] .absolute.top-32.-right-12{right:max(-3rem, calc(-1 * var(--ahp-gap)))}
}
@media (min-width:1024px) and (max-width:1439px){
  .page-template-services #sem-scrollsection .absolute.top-32.-left-12{left:max(-3rem, calc(-1 * var(--ahp-gap)))}
  .page-template-services #innovate-scrollsection .absolute.top-32.-right-12{right:max(-3rem, calc(-1 * var(--ahp-gap)))}
}

/* Halo banner (section 2): the 375px mobile artwork stayed at its natural width, left-aligned, from 376px
   up. It now fills the width up to 639; from 640 the desktop banner takes over a step early, rather than
   stretching the mobile artwork past 1.7x. */
.page-template-haloMarketing main section > .block.md\:hidden img{width:100%;height:auto}
@media (min-width:640px) and (max-width:767px){
  .page-template-haloMarketing main section > .hidden.md\:block{display:block}
  .page-template-haloMarketing main section > .block.md\:hidden{display:none}
}

/* Halo, Great value / High impact: below 1024 the 682px collages sat left-aligned in the wider column.
   Centre them, and keep them inside the column on narrow screens. */
@media (max-width:1023px){
  .page-template-haloMarketing main .lg\:w-1\/2 > img,
  .page-template-haloMarketing main .lg\:w-1\/2 > .relative{margin-inline:auto;max-width:min(100%,682px)}
}