/* Responsive enhancements for .bg-img1
    Image mapping:
    - Mobile (<=480px): ../images/bg01@-2x.png
    - Tablet (481px - 1023px): ../images/bg01.png
    - Desktop (>=1024px): ../images/bg01@2x.png
*/

/* Base: mobile-first defaults (mobile image) */
.bg-img1 {
     min-height: 100vh;
     max-height: 100vh;
     padding: 1rem;
     --bg-image: url("../images/bg01@-2x.png");
     background-image: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15)), var(--bg-image);
     background-position: center center;
     background-size: contain;
     background-repeat: no-repeat;
     background-attachment: scroll;
     overflow-y: auto;
     overflow-x: hidden;
     box-sizing: border-box;
}

/* Fluid typography */
.bg-img1 h1 {
     font-size: clamp(1.25rem, 4vw, 3rem);
     line-height: 1.05;
     margin: 0;
}
.bg-img1 p {
     font-size: clamp(0.9rem, 2.2vw, 1.125rem);
     margin: 0.5rem 0 0;
}

/* Small devices: tighten vertical space and stronger overlay */
@media (max-width: 480px) {
     .bg-img1 {
          min-height: 100vh;
          max-height: 100vh;
          padding: 0.75rem;
          background-position: center center;
          background-size: contain;
          /* mobile image already set as default; keep for clarity */
          --bg-image: url("../images/bg01@-2x.png");
     }
     .bg-img1::before {
          background: rgba(0,0,0,0.45);
     }
}

/* Medium devices (tablet): use standard-resolution tablet image */
@media (min-width: 481px) and (max-width: 1023px) {
     .bg-img1 {
          min-height: 100vh;
          max-height: 100vh;
          padding: 1rem 1.5rem;
          background-position: center center;
          background-size: contain;
          --bg-image: url("../images/bg01.png");
     }
     .bg-img1 > * {
          max-width: 92%;
     }
}

/* Desktop and larger: use high-res desktop image */
@media (min-width: 1024px) {
     .bg-img1 {
          min-height: 100vh;
          max-height: 100vh;
          padding: 3rem;
          background-position: center center;
          background-size: contain;
          /* prefer the desktop @2x asset */
          --bg-image: url("../images/bg01@2x.png");
          background-attachment: fixed; /* optional parallax on large screens */
     }
     .bg-img1 > * {
          max-width: 66%;
     }
}

/* If you want to serve @2x to high-DPI smaller screens as well,
    uncomment the following block to prefer @2x where available */
/*
@media (min-resolution: 2dppx) {
     .bg-img1 {
          --bg-image: url("../images/bg01@2x.png");
     }
}
*/

/* Respect reduced-motion preference by disabling fixed attachment */
@media (prefers-reduced-motion: reduce) {
     .bg-img1 {
          background-attachment: scroll !important;
     }
}

/* Override simpleslide100 animation when there's only one slide item */
.simpleslide100 .simpleslide100-item:only-child {
     animation: none !important;
     -webkit-animation: none !important;
     opacity: 1 !important;
}

/* Alternative: If you want to target when there's only one slide programmatically */
.simpleslide100.single-slide .simpleslide100-item {
     animation: none !important;
     -webkit-animation: none !important;
     opacity: 1 !important;
}