/* APACPH front page slider. Overlay colours are supplied as custom properties by Slider Settings. */

.apacph-slider{--slider-navy:#082747;--slider-gold:#d99b2b;--slider-gold-hi:#f0bf58;--apacph-overlay-color:8 39 71;--apacph-overlay-from:.92;--apacph-overlay-to:.2;--apacph-overlay-angle:90deg;--apacph-slider-gutter:max(24px,calc((100% - 1200px) / 2));position:relative;isolation:isolate;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;background:var(--slider-navy);color:#fff}

/* Full-bleed without a stray horizontal scrollbar, and without a JS resize handler.
   The root element must carry this: overflow on body does not reach the viewport here.
   clip rather than hidden, so a sticky theme header keeps working. */
html:has(.apacph-slider),body:has(.apacph-slider){overflow-x:clip}

/* Slides share one grid cell: the viewport grows to the tallest slide instead of clipping it. */
.apacph-slider__viewport{display:grid;min-height:clamp(26rem,58vw,40rem)}
@media(min-width:1024px){.apacph-slider__viewport{min-height:min(82svh,44rem)}}
.apacph-slide{grid-area:1/1;display:grid;visibility:hidden;opacity:0;background:linear-gradient(120deg,#082747,#087f9f);transition:opacity .45s ease-out,visibility .45s}
.apacph-slide.is-active{z-index:1;visibility:visible;opacity:1}

.apacph-slide__media{position:absolute;z-index:0;inset:0;overflow:hidden}
.apacph-slide__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* Two layers. First a legibility scrim behind the copy, sized to fill whatever the configured
   overlay leaves behind: it is .72 when the overlay is off and fades to almost nothing when the
   overlay is already strong, so a low setting can never drop headline contrast below WCAG AA.
   Second, the configurable overlay itself. */
.apacph-slide__media{--apacph-scrim:calc(.8 * (1 - var(--apacph-overlay-from)))}

/* Ken Burns drift, matched to the apcph.cphm.my hero. Keyed to .is-active rather than an
   animation-delay cycle, so it restarts correctly when a visitor uses the dots, arrows or swipe.
   The duration runs slightly longer than the dwell time so the zoom never visibly settles. */
@keyframes apacph-kenburns{from{transform:scale(1.08)}to{transform:scale(1)}}
.apacph-slider--motion .apacph-slide__image{transform:scale(1.08)}
.apacph-slider--motion .apacph-slide.is-active .apacph-slide__image{will-change:transform;animation:apacph-kenburns var(--apacph-kb-duration,7700ms) ease-out forwards}
.apacph-slide__media::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--apacph-overlay-color)/var(--apacph-scrim)) 0%,rgb(var(--apacph-overlay-color)/calc(var(--apacph-scrim) * .45)) 46%,rgb(var(--apacph-overlay-color)/0) 70%),linear-gradient(var(--apacph-overlay-angle),rgb(var(--apacph-overlay-color)/var(--apacph-overlay-from)) 0%,rgb(var(--apacph-overlay-color)/calc((var(--apacph-overlay-from) + var(--apacph-overlay-to)) / 2)) 48%,rgb(var(--apacph-overlay-color)/var(--apacph-overlay-to)) 100%)}

.apacph-slide__inner{position:relative;z-index:1;box-sizing:border-box;width:min(100% - 48px,1200px);margin:auto;padding:clamp(64px,9vw,116px) 0 clamp(104px,11vw,140px)}
.apacph-slide__copy{max-width:44rem}
.apacph-slide__eyebrow{margin:0 0 16px;color:var(--slider-gold-hi);font-size:.8125rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.apacph-slide h2{max-width:18ch;margin:0 0 22px;color:#fff;font-size:clamp(2.25rem,5.2vw,4.5rem);font-weight:700;line-height:1.07;letter-spacing:-.02em;text-shadow:0 2px 20px rgb(0 0 0/.35);text-wrap:balance}
.apacph-slide__summary{max-width:38rem;margin:0 0 30px;color:#dbe8f1;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.65;text-wrap:pretty}
.apacph-slide__button{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 26px;border:1px solid var(--slider-gold);background:var(--slider-gold);color:var(--slider-navy);font-weight:800;text-decoration:none;transition:background .2s ease,transform .2s ease}
.apacph-slide__button svg{width:18px;height:18px;flex:none}
.apacph-slide__button:hover,.apacph-slide__button:focus{background:var(--slider-gold-hi);color:var(--slider-navy);transform:translateY(-2px)}
.apacph-slide__button:active{transform:translateY(0) scale(.98)}

.apacph-slider__controls{position:absolute;z-index:4;right:var(--apacph-slider-gutter);bottom:26px;display:flex;align-items:center;gap:8px}
.apacph-slider__controls button{display:grid;padding:0;border:1px solid rgb(255 255 255/.45);border-radius:0;place-items:center;background:rgb(8 39 71/.64);color:#fff;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.apacph-slider__controls>button{width:44px;height:44px}
.apacph-slider__controls button:hover{border-color:#fff;background:rgb(8 39 71/.88)}
.apacph-slider__controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.apacph-slider__count{min-width:4.5ch;padding:0 4px;color:#dbe8f1;font-size:.8125rem;font-variant-numeric:tabular-nums;letter-spacing:.06em}

/* 28px visual bar inside a full 44x44 tap target. Buttons tile with no gap so there are no dead zones. */
.apacph-slider__dots{display:flex;align-items:center;gap:0;padding:0 4px}
.apacph-slider__dots button{width:44px;height:44px;padding:20px 8px;border:0;background:none;cursor:pointer}
.apacph-slider__dots button::before{content:'';display:block;height:4px;background:rgb(255 255 255/.4);transition:background .2s ease}
.apacph-slider__dots button:hover::before{background:rgb(255 255 255/.72)}
.apacph-slider__dots button[aria-current=true]::before{background:var(--slider-gold)}

.apacph-slider :focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px rgb(8 39 71/.7)}
.apacph-slider-empty{padding:24px;border:1px dashed #adc6d6;background:#f4f8fb;color:#17324d}

/* Banner layout: linked artwork at a fixed ratio, sized to its container rather than the viewport.
   No overlay and no copy - the graphic carries the message. */
.apacph-slider--banner{width:100%;max-width:100%;margin-left:0;border-radius:10px}
.apacph-slider--banner .apacph-slider__viewport{min-height:0;aspect-ratio:var(--apacph-banner-ratio,16/5)}
.apacph-slider--banner .apacph-slide{background:linear-gradient(120deg,#082747,#087f9f)}
.apacph-slider--banner .apacph-slide__media::after{content:none}
.apacph-banner__link{display:block;width:100%;height:100%;text-decoration:none}
.apacph-banner__image{display:block;width:100%;height:100%;object-fit:cover}
.apacph-banner__fallback{box-sizing:border-box;display:grid;width:100%;height:100%;padding:24px;place-items:center;color:#fff;font-size:clamp(1.1rem,2.4vw,1.7rem);font-weight:700;text-align:center}
.apacph-slider--banner .apacph-slider__controls{right:12px;bottom:12px;padding:4px;border-radius:999px;background:rgb(8 39 71/.55);backdrop-filter:blur(4px)}
.apacph-slider--banner .apacph-slider__controls>button{width:44px;height:44px;border-color:transparent;background:none}
.apacph-slider--banner .apacph-slider__count{display:none}
@media(max-width:680px){
.apacph-slider--banner .apacph-slider__viewport{aspect-ratio:var(--apacph-banner-ratio-mobile,4/3)}
.apacph-slider--banner .apacph-slider__controls{right:8px;bottom:8px;left:auto;justify-content:flex-end}
}

@media(max-width:680px){
.apacph-slider__viewport{min-height:clamp(30rem,104vw,38rem)}
.apacph-slide__media::after{background:linear-gradient(180deg,rgb(var(--apacph-overlay-color)/.35) 0%,rgb(var(--apacph-overlay-color)/.78) 55%,rgb(var(--apacph-overlay-color)/.92) 100%)}
.apacph-slide__inner{width:min(100% - 32px,1200px);padding:64px 0 116px}
.apacph-slide h2{max-width:none;font-size:clamp(2rem,9vw,3rem)}
.apacph-slider__controls{right:16px;bottom:20px;left:16px;justify-content:space-between}
.apacph-slider__dots{flex:1;justify-content:center}
.apacph-slider__count{display:none}
}
/* Only below 420px, where a full row of 44px dots cannot fit beside the other controls,
   narrow the tap target. 36x44 still clears WCAG 2.5.8. */
@media(max-width:420px){.apacph-slider__dots button{width:36px;padding:20px 6px}}

@media(prefers-reduced-motion:reduce){
.apacph-slide,.apacph-slide__button,.apacph-slider__controls button,.apacph-slider__dots button::before{transition:none}
.apacph-slider--motion .apacph-slide__image,.apacph-slider--motion .apacph-slide.is-active .apacph-slide__image{animation:none;transform:none;will-change:auto}
}