/* =========================================================================
   RepaRose home hero — "the apothecary label"

   A full-bleed photograph with a cream card offset over it, the way a label
   is pasted onto a bottle. The photograph is a real <img> (Elementor image
   widget #rr-hero-media) rather than a section background, so it can be
   scaled independently of the card and object-fit can handle every viewport.

   Stacking: photo (z 0) → scrim (::after) → card and proof strip (z 1).
   ========================================================================= */

.rr-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* 88vh, but never so tall that the sticky header pushes the proof strip below
   the fold — the CTAs and the proof line have to be visible on first paint */
@media (min-width: 768px) {
  .rr-hero { min-height: min(88vh, calc(100vh - 130px)) !important; }
}
/* The section is stretched and full width; let its container fill it.
   content_position "middle" makes Elementor centre the column at its own
   content height, which would leave the photograph short of the section
   edges — the card is centred inside the stage instead. */
.rr-hero > .elementor-container {
  width: 100%;
  max-width: none;
  min-height: inherit !important;
  /* beats .elementor-section-items-middle, which would centre the column at
     its content height and leave the photograph short of the section edges */
  align-items: stretch !important;
}

/* ---------- the photograph ---------------------------------------------- */
#rr-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0 !important;
  width: auto;
}
#rr-hero-media > .elementor-widget-container,
#rr-hero-media .elementor-image,
#rr-hero-media figure {
  height: 100%;
  margin: 0;
  line-height: 0;
}
#rr-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 0;
  max-width: none;
  will-change: transform;
}
/* a left-weighted scrim: it stops the photograph fighting the card edge and
   darkens the right so the cream proof band reads as a band */
#rr-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(24, 18, 14, .60) 0%,
    rgba(24, 18, 14, .42) 34%,
    rgba(24, 18, 14, .10) 62%,
    rgba(24, 18, 14, .26) 100%);
  pointer-events: none;
}
body.rtl #rr-hero-media::after {
  background: linear-gradient(260deg,
    rgba(24, 18, 14, .60) 0%,
    rgba(24, 18, 14, .42) 34%,
    rgba(24, 18, 14, .10) 62%,
    rgba(24, 18, 14, .26) 100%);
}

/* ---------- the stage: card centred, proof strip on the bottom edge ----- */
/* .elementor-element-populated is position:relative, so it is the containing
   block the absolute photograph resolves against; it therefore has to be the
   element that spans the section's full height. */
.rr-hero .rr-hero-stage { z-index: 1; }
.rr-hero .rr-hero-stage > .elementor-element-populated {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  padding: 0;
}
.rr-hero .rr-hero-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  width: 100%;
}
.rr-hero .rr-hero-body > .elementor-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
  width: 100%;
}

/* ---------- the card ----------------------------------------------------- */
.rr-hero .rr-hero-card > .elementor-element-populated {
  max-width: 560px;
  border-radius: 3px;
}
.rr-hero .rr-hero-card .elementor-heading-title { letter-spacing: 0; }
.rr-hero .rr-hero-card .elementor-widget-text-editor p { margin: 0; }

/* the CTA row: primary, then a ghost link with a moving arrow */
.rr-hero .rr-hero-ctas > .elementor-container { align-items: center; }
.rr-hero .rr-hero-ctas .elementor-widget-button { margin-bottom: 0; }
.rr-hero .rr-hero-ctas .elementor-column:last-child .elementor-button {
  border: 0 !important;
  padding: 15px 4px !important;
  background: transparent !important;
  color: var(--rr-ink, #2B2B2B) !important;
  position: relative;
}
.rr-hero .rr-hero-ctas .elementor-column:last-child .elementor-button::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-inline-start: 10px;
  vertical-align: middle;
  background: currentColor;
  transition: width .25s ease;
}
.rr-hero .rr-hero-ctas .elementor-column:last-child .elementor-button:hover {
  color: var(--rr-rose, #A4535B) !important;
}
.rr-hero .rr-hero-ctas .elementor-column:last-child .elementor-button:hover::after { width: 34px; }

/* ---------- the sprig hairline ------------------------------------------- */
.rr-hero-sprig { display: block; }
.rr-hero-sprig svg {
  display: block;
  width: 120px;
  height: 18px;
  overflow: visible;
}

/* ---------- the proof strip --------------------------------------------- */
.rr-hero .rr-hero-proof {
  flex: 0 0 auto;
  margin-top: auto;
  width: 100%;
  border-top: 1px solid rgba(201, 166, 107, .30);
  backdrop-filter: saturate(120%) blur(2px);
}
.rr-hero .rr-hero-proof > .elementor-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
  width: 100%;
}
.rr-hero .rr-hero-proof .elementor-widget-heading { margin-bottom: 0; }
.rr-hero .rr-hero-proof .elementor-column + .elementor-column {
  border-inline-start: 1px solid rgba(201, 166, 107, .30);
}

/* the empty right-hand column exists only to hold the grid open */
.rr-hero .rr-hero-void > .elementor-element-populated { padding: 0; }

/* =========================================================================
   Motion — one slow settle on the photograph, one draw on the sprig.
   Both are opt-in: nothing animates when the visitor asks for less motion.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  #rr-hero-media img { animation: rr-ken 16s cubic-bezier(.22, .6, .28, 1) both; }
  @keyframes rr-ken {
    from { transform: scale(1.075); }
    to   { transform: scale(1); }
  }

  .rr-hero .rr-hero-card > .elementor-element-populated {
    animation: rr-card-rise .85s cubic-bezier(.2, .7, .3, 1) both;
  }
  @keyframes rr-card-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
  }

  .rr-hero-stem {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: rr-hero-draw .9s ease-out .45s forwards;
  }
  @keyframes rr-hero-draw { to { stroke-dashoffset: 0; } }

  .rr-hero-leaf {
    transform-box: fill-box;
    transform-origin: 0% 100%;
    transform: scale(0);
    animation: rr-hero-unfurl .42s cubic-bezier(.2, .8, .3, 1) forwards;
  }
  .rr-hero-leaf-1 { animation-delay: .95s; }
  .rr-hero-leaf-2 { animation-delay: 1.06s; }
  .rr-hero-leaf-3 { animation-delay: 1.17s; }
  @keyframes rr-hero-unfurl { to { transform: scale(1); } }
}

/* =========================================================================
   Tablet
   ========================================================================= */
@media (max-width: 991px) {
  .rr-hero .rr-hero-card > .elementor-element-populated { max-width: none; }
  .rr-hero .rr-hero-body > .elementor-container { padding-inline: 20px; }
  .rr-hero .rr-hero-proof > .elementor-container { padding-inline: 20px; }
}

/* =========================================================================
   Mobile — the photograph becomes a band and the card sits under it.
   Overlaying a card on a phone-sized photo leaves neither enough room.
   ========================================================================= */
@media (max-width: 767px) {
  .rr-hero { min-height: 0 !important; }
  .rr-hero > .elementor-container { min-height: 0; }
  .rr-hero .rr-hero-stage > .elementor-element-populated {
    display: block;
    min-height: 0;
  }

  #rr-hero-media {
    position: relative;
    inset: auto;
    width: 100%;
  }
  #rr-hero-media img {
    height: 42vh;
    min-height: 250px;
    max-height: 340px;
    object-position: 50% 38%;
  }
  #rr-hero-media::after {
    background: linear-gradient(180deg,
      rgba(24, 18, 14, 0) 58%,
      rgba(24, 18, 14, .30) 100%);
  }

  .rr-hero .rr-hero-body > .elementor-container { padding-inline: 0; }
  .rr-hero .rr-hero-card > .elementor-element-populated {
    border-radius: 0;
    box-shadow: none !important;
  }

  /* CTAs stack full width */
  .rr-hero .rr-hero-ctas > .elementor-container { flex-direction: column; }
  .rr-hero .rr-hero-ctas .elementor-column { width: 100%; padding: 0 !important; }
  .rr-hero .rr-hero-ctas .elementor-column:first-child { margin-bottom: 6px; }
  .rr-hero .rr-hero-ctas .elementor-button { width: 100%; text-align: center; }
  .rr-hero .rr-hero-ctas .elementor-column:last-child .elementor-button { padding: 12px 4px !important; }

  /* proof strip becomes a 2 x 2 grid */
  .rr-hero .rr-hero-proof > .elementor-container {
    flex-wrap: wrap;
    padding-inline: 14px;
  }
  .rr-hero .rr-hero-proof .elementor-column {
    width: 50%;
    padding: 9px 8px !important;
  }
  .rr-hero .rr-hero-proof .elementor-column + .elementor-column { border-inline-start: 0; }
  .rr-hero .rr-hero-proof .elementor-heading-title { font-size: 10.5px !important; letter-spacing: 1.5px !important; }

  /* the photograph no longer needs the settle; the card still rises */
  #rr-hero-media img { animation: none !important; }
}