/* ==========================================================
   Renzo & Co. – Homepage image grid text scrim  (v3)
   Section: .widget-five-tiles (homepage section 1)

   v3: replaces the oval shades with soft edge-to-edge gradients
   that fade in from the tile edges where the words sit
   (heading at the top, Shop Now at the bottom). It is painted as
   a background on the text layer, so it stays inside each tile
   and needs no extra positioning.

   Default = Variant A (top & bottom fade).
   To switch, add ONE of these to the section's Section Class
   in pagebuilder (next to "default widget-five-tiles"):
     renzo-scrim-side   -> Variant B (fade from the left edge)
     renzo-scrim-light  -> Variant C (same as A, lighter touch)
   ========================================================== */

/* ---------- Variant A: top & bottom fade (default) ---------- */
.widget-five-tiles .widget-text-overlay {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.32) 12%,
    rgba(0, 0, 0, 0.12) 24%,
    rgba(0, 0, 0, 0) 36%,
    rgba(0, 0, 0, 0) 64%,
    rgba(0, 0, 0, 0.12) 76%,
    rgba(0, 0, 0, 0.32) 88%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* Large Summer Styles slider: its text sits low and centered,
   so it only needs a fade rising from the bottom */
.widget-five-tiles .autoplay .widget-text-overlay {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.15) 55%,
    rgba(0, 0, 0, 0.38) 75%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* ---------- Variant B: fade from the left edge ---------- */
.widget-five-tiles.renzo-scrim-side .widget-text-overlay {
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.3) 25%,
    rgba(0, 0, 0, 0.1) 45%,
    rgba(0, 0, 0, 0) 60%
  );
}
.widget-five-tiles.renzo-scrim-side .autoplay .widget-text-overlay {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.15) 55%,
    rgba(0, 0, 0, 0.38) 75%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* ---------- Variant C: lighter top & bottom fade ---------- */
.widget-five-tiles.renzo-scrim-light .widget-text-overlay {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.38) 0%,
    rgba(0, 0, 0, 0.18) 14%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0) 70%,
    rgba(0, 0, 0, 0.18) 86%,
    rgba(0, 0, 0, 0.38) 100%
  );
}
.widget-five-tiles.renzo-scrim-light .autoplay .widget-text-overlay {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.2) 72%,
    rgba(0, 0, 0, 0.42) 100%
  );
}