/* ═══════════════════════════════════════════════════════════════════════════
   RIDA RADIANCE — HERO MOBILE FIX
   File: hero-mobile-fix.css
   Load AFTER hero-section.php's <style> block
   Fixes: 2-col grid on mobile, image strip, badge overflow, text clipping
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   GLOBAL HERO OVERFLOW GUARD
   Prevents ANY horizontal scroll caused by hero children
═══════════════════════════════════════════════════════ */
.rr-hero,
.rr-slider,
.rr-slide,
.rr-slide--active {
  max-width: 100%;
  box-sizing: border-box;
}

.rr-hero {
  overflow-x: hidden !important;
}


/* ═══════════════════════════════════════════════════════
   TABLET + MOBILE  (≤ 991px)
   Root cause fix: grid must collapse to single column
═══════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* ── Slider track: let active slide drive height ── */
  .rr-slider {
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* ── All slides: stack, don't overlap ── */
  .rr-slide {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;   /* SINGLE column */
    grid-template-rows: 260px 1fr !important;
    min-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 100% !important;
  }

  /* ── Active slide: take up real space ── */
  .rr-slide--active {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* ── Image row: fixed height, image fills it ── */
  .rr-slide__image {
    grid-row: 1 !important;
    grid-column: 1 !important;
    order: 1 !important;
    height: 260px !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .rr-slide__image-inner {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center 25% !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Gradient fades image into content below */
  .rr-slide__image::before {
    background: linear-gradient(
      to bottom,
      rgba(250,248,243,0) 30%,
      rgba(250,248,243,0.70) 80%,
      rgba(250,248,243,1) 100%
    ) !important;
  }

  /* Hide decorative elements that break mobile layout */
  .rr-slide__image::after,
  .rr-slide__arc {
    display: none !important;
  }

  /* ── Content row: sits below image ── */
  .rr-slide__content {
    grid-row: 2 !important;
    grid-column: 1 !important;
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 32px 20px 88px !important;
    background: var(--rr-champagne, #FAF8F3) !important;
  }

  .rr-slide__content::after {
    display: none !important;
  }

  .rr-slide__content-inner {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

}


/* ═══════════════════════════════════════════════════════
   MOBILE ONLY  (≤ 767px)
═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Hero container: full width, no bleed ── */
  .rr-hero {
    min-height: 0 !important;
    width: 100% !important;
  }

  /* ── Image panel ── */
  .rr-slide__image {
    height: 240px !important;
  }

  .rr-slide__image-inner {
    background-position: center 20% !important;
  }

  /* ── Eyebrow ── */
  .rr-slide__eyebrow {
    font-size: 0.62rem !important;
    letter-spacing: 0.22em !important;
    margin-bottom: 14px !important;
  }

  /* ── Heading: responsive and contained ── */
  .rr-slide__heading {
    font-size: clamp(1.75rem, 7.8vw, 2.4rem) !important;
    line-height: 1.18 !important;
    margin-bottom: 16px !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  /* Gold accent: inline on mobile (no block) */
  .rr-gold-accent {
    display: inline !important;
    padding-bottom: 0 !important;
  }

  .rr-gold-accent::after {
    display: none !important;
  }

  /* ── Subheading ── */
  .rr-slide__sub {
    font-size: 0.875rem !important;
    line-height: 1.72 !important;
    max-width: 100% !important;
    margin-bottom: 22px !important;
    word-break: break-word !important;
  }

  /* ── Trust badges ── */
  .rr-badges {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
    padding-bottom: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Subtle fade-right hint that more badges exist */
    -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
    mask-image: linear-gradient(to right, black 70%, transparent 100%);
    scrollbar-width: none !important;
  }

  .rr-badges::-webkit-scrollbar {
    display: none !important;
  }

  .rr-badge {
    display: flex !important;
    flex: 0 0 auto !important;
    min-width: 112px !important;
    max-width: 140px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 12px !important;
    box-sizing: border-box !important;
  }

  .rr-badge__icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.75rem !important;
    flex-shrink: 0 !important;
  }

  .rr-badge__text {
    font-size: 0.66rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  /* ── Buttons: full-width stacked ── */
  .rr-slide__buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .rr-btn {
    width: 100% !important;
    justify-content: center !important;
    height: 52px !important;
    font-size: 0.76rem !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  /* ── Dots ── */
  .rr-dots {
    bottom: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    gap: 8px !important;
  }

  .rr-dot__bar {
    width: 20px !important;
  }

  .rr-dot--active .rr-dot__bar {
    width: 34px !important;
  }

  /* ── Counter: hide on mobile ── */
  .rr-counter {
    display: none !important;
  }

}


/* ═══════════════════════════════════════════════════════
   SMALL MOBILE  (≤ 430px)
═══════════════════════════════════════════════════════ */
@media (max-width: 430px) {

  .rr-slide__image {
    height: 210px !important;
  }

  .rr-slide__content {
    padding: 24px 16px 84px !important;
  }

  .rr-slide__heading {
    font-size: clamp(1.60rem, 8.5vw, 2.1rem) !important;
  }

  .rr-slide__sub {
    font-size: 0.84rem !important;
  }

  .rr-badges {
    /* Show 2 full badges + hint of 3rd */
    -webkit-mask-image: linear-gradient(to right, black 60%, transparent 95%);
    mask-image: linear-gradient(to right, black 60%, transparent 95%);
  }

  .rr-badge {
    min-width: 100px !important;
  }

  .rr-btn {
    height: 54px !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.10em !important;
  }

}