/* =========================================================================
   Homepage hero + counters — National port of Florida's plugin-free replica
   (css/home-page.css there). Shared by the EN homepage (slug "home" →
   auto-linked by the {slug}-page.css convention) and the Spanish homepage
   (sp/sp-page.php links it explicitly — its slug would look for sp-page.css).

   Hero slider — replica of the original LayerSlider #1: 4 slides, 5s each,
   crossfade, slide-up text reveal. Backgrounds span the full width; the
   1140x550 layer stage inside each slide is centered and scaled
   proportionally by the inline JS in the content file, matching the original
   slider's fullwidth behavior (shrinks, never grows). No plugin involved.
   ========================================================================= */
#eko4-hero-slider {
    position: relative;
    width: 100%;
    height: 550px;
    overflow: hidden;
}
.eko4-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity .9s ease;
}
.eko4-hero-slide.active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}
.eko4-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
/* Slide 1 replicates the original's bgsize:contain on a white stage
   (1920x798 banner letterboxed inside 1140x550); slides 2-4 were cover,
   anchored to the bottom edge. */
.eko4-hero-slide-1 { background-color: #ffffff; }
.eko4-hero-slide-1 .eko4-hero-bg { object-fit: contain; object-position: 50% 50%; }
.eko4-hero-slide-2 .eko4-hero-bg,
.eko4-hero-slide-3 .eko4-hero-bg,
.eko4-hero-slide-4 .eko4-hero-bg { object-position: 50% 100%; }

/* Layer stage: the 1140x550 content box the text layers are positioned in,
   centered over the fullwidth background; the JS scales it down on narrower
   screens. */
.eko4-hero-stage {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1140px;
    height: 550px;
    margin-left: -570px;
    transform-origin: top center;
}

/* Layer positioning — same math as the original slider: a percentage places
   the layer at that fraction of the REMAINING space, which top:X% combined
   with translateY(-X%) reproduces exactly. width:max-content stops absolute
   centering from shrink-wrapping the text early; the wrapper also clips the
   slide-up reveal. No width cap: the title box sizes to its text (the longer
   Spanish lines are wider than the 1140 stage); the stage scaling still
   shrinks it proportionally on narrow screens. */
.eko4-hero-pos {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: none;
    overflow: hidden;
}
.eko4-hero-pos-title1 { top: 40%; transform: translate(-50%, -40%); }
.eko4-hero-pos-title2 { top: 120px; }
.eko4-hero-pos-title3 { top: 30%; transform: translate(-50%, -30%); }
.eko4-hero-pos-title4 { top: 30%; transform: translate(-50%, -30%); }
.eko4-hero-pos-btn1   { top: 310px; }

#eko4-hero-slider .eko4-hero-title {
    margin: 0;
    text-transform: none; /* slides 2-4 are h2 (single-H1 page); keep h1/h2 identical */
    letter-spacing: 1.6px;
    background-color: rgba(0, 0, 0, 0.41);
    font-size: 38px;
    line-height: normal;
    white-space: nowrap;   /* lines break only at the explicit <br>, like the original */
    color: #ffffff;
    text-align: center;
    font-weight: 700;
    font-family: Oxygen, sans-serif;
    padding: 20px;
}
#eko4-hero-slider .eko4-hero-btn {
    display: inline-block;
    font-weight: 700;
    padding: 15px 60px;
    font-family: Oxygen, sans-serif;
    font-size: 14px;
    background: #b61f24;
    color: #fff;
    border-radius: 1px;
    text-decoration: none;
}

/* Layer entrance: rise from below the clip line (900ms after a 100ms delay),
   replayed every time a slide becomes active — like the original
   offsetyin:100% / durationin:900 / delayin:100. */
.eko4-hero-slide .eko4-hero-title,
.eko4-hero-slide .eko4-hero-btn {
    transform: translateY(110%);
}
.eko4-hero-slide.active .eko4-hero-title,
.eko4-hero-slide.active .eko4-hero-btn {
    animation: eko4HeroLayerIn .9s ease .1s both;
}
@keyframes eko4HeroLayerIn {
    from { transform: translateY(110%); }
    to   { transform: translateY(0); }
}

/* =========================================================================
   Counters — fully our own (markup in the content file, cloned onto the
   slider bottom by the inline JS). Same band the theme used to overlay on
   the LayerSlider, with National's palette from style.css: navy
   rgba(0,13,102,.85) band (.counters-subrow), 34px white digits with a
   50x2 red #b61f24 underline (.counter-line), 16px bold two-line labels.
   Desktop only, like the original.
   ========================================================================= */
.eko4-counters-src { display: none; }

.eko4-counters-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 5;
}
.eko4-counters-band {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    background-color: rgba(0, 13, 102, 0.85);
}
.eko4-counter {
    margin: 0 12px;
    padding: 35px 10px 25px;
    font-family: "Open Sans", Arial, Tahoma, sans-serif;
    color: #ffffff;
    text-align: center;
    line-height: 50px;
}
.eko4-counter-number {
    display: inline-block;
    font-size: 34px;
    line-height: 50px;
    white-space: nowrap;
}
.eko4-counter-line {
    display: block;
    width: 50px;
    height: 2px;
    margin: 0 auto;
    background-color: #b61f24;
}
.eko4-counter-label {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    text-align: left;
    margin-left: 10px;
}
.eko4-counter-label span { display: block; }
@media (max-width: 991px) {
    .eko4-counters-bar { display: none; }
}