/* Modern treatment for the Slider Revolution hero.
 *
 * The headline shipped inside a translucent grey slab (rgba(58,58,58,.66) on a
 * fixed 1050px box), which reads as dated and fights whatever photo is behind
 * it. This replaces that with a full-width gradient scrim plus a text shadow:
 * contrast now comes from the image treatment rather than a box, so it holds
 * up across all four slides regardless of how busy each photo is.
 *
 * Slider Revolution writes its layer styling inline, and inline wins over any
 * selector, so the overrides here need !important. They are deliberately
 * narrow — only the properties being replaced.
 *
 * Layering: rs-sbg-wrap (the photo) sits at z-index 0 and rs-layer at 5, so the
 * scrim goes between them at 2. Sizing and transforms are left to Slider
 * Revolution, which computes them in JS; fighting that misaligns the layers.
 */

rs-module {
  position: relative;
}

rs-module::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(12, 16, 22, .38) 0%,
    rgba(12, 16, 22, .05) 40%,
    rgba(12, 16, 22, .30) 72%,
    rgba(12, 16, 22, .68) 100%
  );
}

/* ---- headline ---- */

/* The original flat grey slab looked dated, but it was earning its keep: these
 * photos are busy, and white text over them is unreadable without a backing.
 * Dropping it entirely and relying on a scrim was tried and failed on mobile,
 * where the headline sits mid-image rather than at the bottom. This keeps a
 * panel but makes it a frosted one — darker, blurred, softly bordered — which
 * reads as current while preserving the contrast the slab was providing.
 */
rs-module rs-layer {
  background-color: rgba(10, 14, 20, .34) !important;
  -webkit-backdrop-filter: blur(9px) saturate(115%) !important;
  backdrop-filter: blur(9px) saturate(115%) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  border-radius: 18px !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .55),
               0 10px 34px rgba(0, 0, 0, .45) !important;
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .7) !important;
}

/* Brand rule under the headline, tying the hero to the gold used sitewide.
 *
 * Absolutely positioned on purpose. rs-layer is already absolutely positioned
 * by Slider Revolution, so this anchors to it without entering the flow. An
 * earlier version used margin and display:block, which grew the layer after
 * Slider Revolution had measured it and pushed the headline off the right edge
 * of the viewport. Nothing here may change the layer's box: no padding, no
 * width, no border-width — only colour, radius and shadow.
 */
rs-module rs-layer::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  width: 92px;
  height: 4px;
  background: #b0903b;
  border-radius: 2px;
}

/* ---- navigation arrows ---- */

rs-module-wrap rs-arrow {
  border-radius: 50% !important;
  backdrop-filter: blur(3px);
  background-color: rgba(12, 16, 22, .38) !important;
  transition: background-color .2s ease, transform .2s ease;
}

rs-module-wrap rs-arrow:hover {
  background-color: rgba(176, 144, 59, .9) !important;
  transform: scale(1.06);
}

/* ---- tablet ---- */

@media (max-width: 1024px) {
  rs-module rs-layer::after {
    width: 72px;
    height: 3px;
    bottom: -18px;
  }
}

/* ---- mobile ----
 * Slider Revolution scales every layer down from its 1920px design width, so
 * at 390px the headline lands at 13px, which is unreadable. The size is reset
 * here in ch units against a comfortable measure, and the scrim is deepened
 * because the text sits over a much smaller crop of the photo.
 */

@media (max-width: 767px) {
  rs-module rs-layer {
    font-size: 19px !important;
    line-height: 1.32 !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
    border-radius: 14px !important;
    background-color: rgba(10, 14, 20, .46) !important;
  }

  rs-module rs-layer::after {
    width: 58px;
    height: 3px;
    bottom: -15px;
  }

  rs-module::after {
    background: linear-gradient(
      180deg,
      rgba(12, 16, 22, .40) 0%,
      rgba(12, 16, 22, .16) 38%,
      rgba(12, 16, 22, .58) 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  rs-module-wrap rs-arrow {
    transition: none;
  }
}