/* ================================================================
   responsive.css v4 — SDB+D mobile layer, HOMEPAGE ONLY
   10-photo Ken Burns rotation, 9s per photo (90s cycle).
   Pure CSS, no JavaScript. Desktop/tablet (768px+) unaffected.

   v4 FIX: v3 shipped corrupted animation delays (duplicates plus
   three dead windows) which let the base image show through between
   slides. Delays are now generated as an exact arithmetic sequence,
   and each slide HOLDS at full opacity until the next has finished
   fading in on top of it — so the base is never exposed mid-cycle.
   ================================================================ */

@media only screen and (max-width: 767px) {

    /* ---- Hero stage ---- */
    .slider_bg {
        top: 0 !important;
        height: 55vw !important;
        max-height: 280px;
        background: url(../images/slider_1.jpg) center center / cover no-repeat !important;
        overflow: hidden !important;
        position: relative !important;
    }
    .slider_bg .slider,
    .slider_bg #nav,
    .slider_bg .banner { display: none !important; }

    /* ---- Ken Burns layers ---- */
    .kb { display: block !important; position: absolute; inset: 0; }
    .kb-s {
        position: absolute; inset: 0;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0;
        animation-duration: 90s, 90s;
        animation-timing-function: linear, linear;
        animation-iteration-count: infinite, infinite;
        animation-fill-mode: both, both;
        will-change: opacity, transform;
    }
    .kb-s1  { background-image: url(../images/slider_1.jpg); animation-name: kbFade, kbZoomIn; animation-delay: 0s, 0s; }
    .kb-s2  { background-image: url(../images/slider_2.jpg); animation-name: kbFade, kbZoomOut; animation-delay: 9s, 9s; }
    .kb-s3  { background-image: url(../images/slider_3.jpg); animation-name: kbFade, kbZoomIn; animation-delay: 18s, 18s; }
    .kb-s4  { background-image: url(../images/slider_4.jpg); animation-name: kbFade, kbZoomOut; animation-delay: 27s, 27s; }
    .kb-s5  { background-image: url(../images/slider_5.jpg); animation-name: kbFade, kbZoomIn; animation-delay: 36s, 36s; }
    .kb-s6  { background-image: url(../images/slider_6.jpg); animation-name: kbFade, kbZoomOut; animation-delay: 45s, 45s; }
    .kb-s7  { background-image: url(../images/slider_7.jpg); animation-name: kbFade, kbZoomIn; animation-delay: 54s, 54s; }
    .kb-s8  { background-image: url(../images/slider_8.jpg); animation-name: kbFade, kbZoomOut; animation-delay: 63s, 63s; }
    .kb-s9  { background-image: url(../images/slider_9.jpg); animation-name: kbFade, kbZoomIn; animation-delay: 72s, 72s; }
    .kb-s10 { background-image: url(../images/slider_10.jpg); animation-name: kbFade, kbZoomOut; animation-delay: 81s, 81s; }

    /* Fade in over 2.0% (1.8s), hold through the NEXT slide's
       fade-in (10.0% + 2.0%), then fade out while fully covered. */
    @keyframes kbFade {
        0%      { opacity: 0; }
        2.0%   { opacity: 1; }
        12.0%  { opacity: 1; }
        14.0%  { opacity: 0; }
        100%    { opacity: 0; }
    }
    @keyframes kbZoomIn {
        0%      { transform: scale(1)    translateX(0); }
        14.0%  { transform: scale(1.12) translateX(-2%); }
        100%    { transform: scale(1.12) translateX(-2%); }
    }
    @keyframes kbZoomOut {
        0%      { transform: scale(1.12) translateX(2%); }
        14.0%  { transform: scale(1)    translateX(0); }
        100%    { transform: scale(1)    translateX(0); }
    }
    @media (prefers-reduced-motion: reduce) {
        .kb-s { animation-name: kbFade; transform: none; }
    }

    /* ---- Close the old slider's spacing gap ---- */
    #page1 #content { padding-top: 24px !important; }

    /* ---- Fluid widths for modern phones ---- */
    .main { width: 94% !important; }
    .container_12 { width: 100% !important; }
    .container_12 .grid_1, .container_12 .grid_2, .container_12 .grid_3,
    .container_12 .grid_4, .container_12 .grid_5, .container_12 .grid_6,
    .container_12 .grid_7, .container_12 .grid_8, .container_12 .grid_9,
    .container_12 .grid_10, .container_12 .grid_11, .container_12 .grid_12 {
        width: 100% !important;
    }
    #content img, footer img { max-width: 100%; height: auto; }

    /* ---- Category tiles: pin to original size ----
       The template's mobile rule (figure img{width:100%}) sized the
       circles against the old 260px column; the fluid column let
       them balloon. Pin to the template's own 250px and center. */
    .homepage .grid_3 .aligncenter { max-width: 250px; margin: 0 auto; }
    .homepage .grid_3 figure img,
    .aligncenter figure img { width: 250px !important; height: auto; }
    /* Center the orange MORE button under each circle (template
       left-padded it against the old fixed column) */
    .homepage .button2_wr {
        padding-left: 0 !important;
        width: 88px;
        margin: -44px auto 0 !important;
        position: relative;
    }
}

@media only screen and (max-width: 479px) {
    .main { width: 94% !important; }
    .container_12,
    .container_12 .grid_1, .container_12 .grid_2, .container_12 .grid_3,
    .container_12 .grid_4, .container_12 .grid_5, .container_12 .grid_6,
    .container_12 .grid_7, .container_12 .grid_8, .container_12 .grid_9,
    .container_12 .grid_10, .container_12 .grid_11, .container_12 .grid_12 {
        width: 100% !important;
    }
}