/* About hero — slider-with-introduction. EXACT values from saved hero-section.html, scoped (no Tailwind). */
/* home.css (loaded for shared components) kills the site-wide main padding-top with
   `body > main{padding-top:0 !important}` — re-assert the fixed-header offset for this page. */
body > main.ab{padding-top:92px !important;}
@media (max-width:900px){body > main.ab{padding-top:84px !important;}}

.swi-hero{margin:0;}
/* fit the whole hero within one screen on desktop (below the 92px fixed header) */
@media (min-width:1024px){
  .swi-hero{min-height:calc(100vh - 92px);display:flex;align-items:center;}
}
.swi-hero-inner{max-width:1372px;margin:0 auto;padding:24px;display:flex;align-items:stretch;width:100%;}
@media (max-width:1023px){.swi-hero-inner{flex-direction:column;align-items:stretch;gap:24px;padding:24px 20px 8px;}}

/* text column (~36%, slider takes 64%) — pr-32; content top-aligned (matches source) */
.swi-hero-text{flex:1 1 auto;min-width:0;padding-right:32px;align-self:stretch;}
@media (max-width:1023px){.swi-hero-text{padding-right:0;}}
/* h1 = swi-title heading1 (+pb-8) — sized down per request */
.swi-hero-text h1{font-family:'Sumana',Georgia,serif;color:#004485;font-size:38px;font-weight:400;line-height:1.15;margin:0;padding-bottom:8px;}
@media (max-width:1279px){.swi-hero-text h1{font-size:34px;}}
@media (max-width:1023px){.swi-hero-text h1{font-size:30px;}}
@media (max-width:767px){.swi-hero-text h1{font-size:28px;}}
/* subtitle = heading3 text-blue-700 */
.swi-hero-text .swi-sub{font-family:var(--font-family,'Open Sans'),Arial,sans-serif;font-size:21px;font-weight:600;line-height:1.3;color:#004484;margin:0;}
@media (max-width:1023px){.swi-hero-text .swi-sub{font-size:19px;}}
@media (max-width:767px){.swi-hero-text .swi-sub{font-size:18px;}}
/* prose: each p margin 0 0 16px; pt-16 gap above the first paragraph */
.swi-hero-text p{font-size:16px;line-height:1.7;color:#3b3c3d;margin:0 0 14px;}
.swi-hero-text .swi-sub + p{margin-top:16px;}
.swi-hero-text p a{color:#005eb8;text-decoration:underline;}
/* CTA button */
.swi-hero-cta{display:inline-block;margin-top:8px;padding:14px 30px;background:#005eb8;color:#fff;font-size:15px;font-weight:600;line-height:1;text-decoration:none;border:2px solid #005eb8;transition:background .18s ease,border-color .18s ease;}
.swi-hero-cta:hover{background:#003e7e;border-color:#003e7e;}

/* slider column = w-[64%] flex-none relative min-768:min-h-[400px], with 1px white divider (w-1 bg-white) */
.swi-hero-slider-col{flex:0 0 64%;position:relative;min-width:0;}
@media (min-width:768px){.swi-hero-slider-col{min-height:400px;}}
@media (max-width:1023px){.swi-hero-slider-col{flex:0 0 auto;width:100%;}}
.swi-hero-slider-col::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:#fff;z-index:10;}
@media (max-width:1023px){.swi-hero-slider-col::before{display:none;}}

/* swi-slider — #e9f2fb stage matches the 4:3 images so they fill the box (no empty side space);
   sized by height + aspect-ratio, viewport-capped so the whole hero fits one screen. */
.swi-slider{position:relative;width:100%;aspect-ratio:4/3;max-height:calc(100vh - 140px);background:#e9f2fb;overflow:hidden;}
.swi-slider>.swi-slide{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease;pointer-events:none;}
.swi-slider>.swi-slide.is-active{opacity:1;pointer-events:auto;z-index:1;}
.swi-slide picture{display:block;width:100%;height:100%;padding:18px;}
@media (max-width:767px){.swi-slide picture{padding:12px;}}
.swi-slide img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;}

/* dots — 12px round (#005eb84d) → active 24px blue sparkle mark */
.swi-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;align-items:center;gap:8px;justify-content:center;z-index:6;}
.swi-dot{width:12px;height:12px;border-radius:50%;border:none;background:#005eb84d;cursor:pointer;padding:0;transition:all .3s;}
.swi-dot.active{width:24px;height:24px;border-radius:0;background:url("/assets/images/swi-dot-active.svg") center/contain no-repeat;}

/* dark mode (keep light-blue stage; only text adapts) */
body:not(.light) .swi-hero-text h1{color:#e8e4dc;}
body:not(.light) .swi-hero-text .swi-sub{color:#60a5fa;}
body:not(.light) .swi-hero-text p{color:#c4bfb6;}
body:not(.light) .swi-hero-text p a{color:#60a5fa;}
body:not(.light) .swi-hero-cta{background:#60a5fa;border-color:#60a5fa;color:#13121a;}
body:not(.light) .swi-hero-cta:hover{background:#3b82f6;border-color:#3b82f6;}