/* ======================================================
   VIOLA - HOMEPAGE BANNERS SYSTEM (Clean & Responsive)
   Notes:
   - Keep this block at the END of your custom CSS
   - Targets are scoped to avoid affecting other sections
   ====================================================== */

/* ------------------------------------------------------
   0) Global small polish (optional)
------------------------------------------------------ */
:root{
  --viola-radius-lg: 18px;
  --viola-radius-md: 14px;
  --viola-gap: 12px;

  --viola-overlay-strong: rgba(0,0,0,.55);
  --viola-overlay-mid: rgba(0,0,0,.20);
  --viola-overlay-none: rgba(0,0,0,0);
}

/* ------------------------------------------------------
   1) FIXED BANNER #1: Full width ONLY
   Target: section.fixed-banner--1
------------------------------------------------------ */
section.fixed-banner--1{
  width: 100vw !important;
  max-width: 100vw !important;

  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}

section.fixed-banner--1 > .container{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

section.fixed-banner--1 a,
section.fixed-banner--1 img{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ------------------------------------------------------
   2) Remove space between announcement bar & first banner
------------------------------------------------------ */
section.animated-text,
section.animated-text-0,
.s-block--header-marquee,
.s-block--marquee{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

section.fixed-banner--1{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

section.animated-text + section,
section.s-block--header-marquee + section{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ------------------------------------------------------
   3) BANNERS GRID SECTION (Categories banners)
   Target: section.s-block--banners.container
   Layout:
     - Desktop: keep theme defaults (NO override)
     - Mobile/Tablet: 1 big + 4 (2x2)
------------------------------------------------------ */

/* ========== MOBILE (<= 640px) ========== */
@media (max-width: 640px){

  section.s-block.s-block--banners.container{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  section.s-block.s-block--banners.container > .grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: var(--viola-gap) !important;
  }

  section.s-block.s-block--banners.container .banner-entry{
    margin: 0 !important;
    width: 100% !important;
    border-radius: var(--viola-radius-lg) !important;
    overflow: hidden !important;
    position: relative !important;
    isolation: isolate !important; /* ensures overlay stays clean */
  }

  /* First banner full width */
  section.s-block.s-block--banners.container .banner-entry:nth-child(1){
    grid-column: 1 / -1 !important;
  }

  /* Banner clickable area */
  section.s-block.s-block--banners.container .banner-entry a{
    display: block !important;
    width: 100% !important;
  }

  /* The background block */
  section.s-block.s-block--banners.container .banner-entry .lazy_bg{
    width: 100% !important;
    border-radius: var(--viola-radius-lg) !important;
    overflow: hidden !important;

    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

    /* polish */
    filter: contrast(1.05) saturate(1.05) !important;
    transition: transform .35s ease, filter .35s ease !important;
  }

  /* Heights */
  section.s-block.s-block--banners.container .banner-entry:nth-child(1) .lazy_bg{
    height: 175px !important;
  }
  section.s-block.s-block--banners.container .banner-entry:nth-child(n+2) .lazy_bg{
    height: 135px !important;
  }

  /* Gradient overlay for text visibility */
  section.s-block.s-block--banners.container .banner-entry::after{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    border-radius: var(--viola-radius-lg) !important;
    background: linear-gradient(
      to top,
      var(--viola-overlay-strong) 0%,
      var(--viola-overlay-mid) 45%,
      var(--viola-overlay-none) 75%
    ) !important;
    z-index: 2 !important;
  }

  /* ✅ FIX: prevent “text inside image” cropping
     Instead of fake inherit hacks, we slightly zoom-out the bg safely */
  section.s-block.s-block--banners.container .banner-entry .lazy_bg{
    background-size: 92% auto !important; /* reduce crop */
    background-color: #fff !important;    /* subtle padding around */
  }

  /* Creative micro-interaction (safe) */
  section.s-block.s-block--banners.container .banner-entry:active .lazy_bg{
    transform: scale(0.99) !important;
  }
}

/* ========== TABLET (641px - 1024px) ========== */
@media (min-width: 641px) and (max-width: 1024px){

  section.s-block.s-block--banners.container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  section.s-block.s-block--banners.container > .grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  /* first banner spans 2 columns for nicer hierarchy */
  section.s-block.s-block--banners.container .banner-entry:nth-child(1){
    grid-column: 1 / span 2 !important;
  }

  section.s-block.s-block--banners.container .banner-entry{
    border-radius: var(--viola-radius-lg) !important;
    overflow: hidden !important;
    position: relative !important;
    isolation: isolate !important;
  }

  section.s-block.s-block--banners.container .banner-entry .lazy_bg{
    border-radius: var(--viola-radius-lg) !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
    filter: contrast(1.04) saturate(1.04) !important;
  }

  section.s-block.s-block--banners.container .banner-entry:nth-child(1) .lazy_bg{
    height: 220px !important;
  }
  section.s-block.s-block--banners.container .banner-entry:nth-child(n+2) .lazy_bg{
    height: 170px !important;
  }

  section.s-block.s-block--banners.container .banner-entry::after{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: var(--viola-radius-lg) !important;
    pointer-events: none !important;
    background: linear-gradient(
      to top,
      rgba(0,0,0,.45) 0%,
      rgba(0,0,0,.15) 45%,
      rgba(0,0,0,0) 78%
    ) !important;
    z-index: 2 !important;
  }
}

/* ------------------------------------------------------
   4) Optional: Desktop enhancement (NO layout change)
   Only subtle hover polish, safe for desktop
------------------------------------------------------ */
@media (min-width: 1025px){
  section.s-block.s-block--banners.container .banner-entry{
    border-radius: var(--viola-radius-lg) !important;
    overflow: hidden !important;
  }
  section.s-block.s-block--banners.container .banner-entry .lazy_bg{
    transition: transform .35s ease, filter .35s ease !important;
  }
  section.s-block.s-block--banners.container .banner-entry:hover .lazy_bg{
    transform: scale(1.02) !important;
    filter: contrast(1.06) saturate(1.06) !important;
  }
}