/* ==========================================================================
   Devon Rex Adoption — Hero carousel

   Two shapes share one seamless CSS marquee (the track holds the set twice and
   translates -50%, no JS, free-tier safe):
     .dr-marquee        rounded cards
     .dr-marquee--bg    full-bleed filmstrip used as the hero background
   ========================================================================== */

.dr-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.dr-marquee__track {
  display: flex;
  width: max-content;
  gap: 16px;
  will-change: transform;
  animation: dr-marquee-slide 48s linear infinite;
}

.dr-marquee:hover .dr-marquee__track,
.dr-marquee:focus-within .dr-marquee__track {
  animation-play-state: paused;
}

.dr-marquee__item {
  flex: 0 0 auto;
  width: 244px;
  aspect-ratio: 3 / 4;
  border-radius: var(--dr-r-card);
  overflow: hidden;
  background: var(--dr-mist);
  box-shadow: var(--dr-shadow);
}

.dr-marquee__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}

@keyframes dr-marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   Full-bleed hero background
   ========================================================================== */

.dr-hero-bleed {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(540px, 74vh, 800px);
  display: flex;
  align-items: center;
  background-color: var(--dr-ink);
}

/* The carousel widget fills the whole section as the backdrop. Elementor
   nests the shortcode output inside .elementor-widget-container, so that
   wrapper must also be full height or the height:100% chain breaks and the
   filmstrip renders at the image's natural height instead. */
.dr-hero-bleed .elementor-widget-shortcode,
.dr-hero-bleed .dr-hero-carousel-w {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}
.dr-hero-bleed .dr-hero-carousel-w > .elementor-widget-container,
.dr-hero-bleed .dr-hero-carousel-w .elementor-shortcode {
  height: 100%;
}

.dr-hero-bleed .dr-marquee--bg {
  height: 100%;
  border-radius: 0;
}
.dr-hero-bleed .dr-marquee--bg .dr-marquee__track {
  height: 100%;
  gap: 0;
  /* A touch slower as a large background, so it reads as ambient motion */
  animation-duration: 60s;
}
.dr-hero-bleed .dr-marquee--bg .dr-marquee__item {
  width: auto;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  background: var(--dr-ink);
}
.dr-hero-bleed .dr-marquee--bg .dr-marquee__item img {
  width: auto;
  height: 100%;
  object-position: center 24%;
}

/* Scrim: darkest on the left where the text sits, lifting toward the right */
.dr-hero-bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(23,20,18,.86) 0%, rgba(23,20,18,.68) 40%, rgba(23,20,18,.42) 72%, rgba(23,20,18,.30) 100%),
    linear-gradient(180deg, rgba(23,20,18,.20) 0%, rgba(23,20,18,0) 30%, rgba(23,20,18,.35) 100%);
}

/* -------------------------------------------------------------- Content */

.dr-hero-bleed .dr-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.dr-hero-bleed .dr-hero-copy { max-width: 640px; }

.dr-hero-bleed .elementor-heading-title { color: #fff; }
.dr-hero-bleed .dr-accent { color: #ecb488; }

.dr-hero-bleed .elementor-widget-text-editor,
.dr-hero-bleed .elementor-widget-text-editor p { color: rgba(255,255,255,.9); }

/* Trust strip under the buttons */
.dr-hero-trust,
.dr-hero-trust p {
  color: rgba(255,255,255,.82);
  font-family: var(--dr-font-brand);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  margin: 0;
}

/* Secondary button reads on a dark ground */
.dr-hero-bleed .dr-el-btn-ghost .elementor-button {
  color: #fff !important;
  border-color: rgba(255,255,255,.5);
  background: transparent !important;
}
.dr-hero-bleed .dr-el-btn-ghost .elementor-button:hover {
  color: var(--dr-ink) !important;
  background: #fff !important;
  border-color: #fff;
}

/* -------------------------------------------------------- Responsive */

@media (max-width: 900px) {
  .dr-hero-bleed { min-height: clamp(480px, 82vh, 680px); }
}

@media (max-width: 600px) {
  /* Lift the left scrim to near-solid so the copy always passes contrast */
  .dr-hero-bleed::after {
    background:
      linear-gradient(180deg, rgba(23,20,18,.62) 0%, rgba(23,20,18,.72) 100%);
  }
}

/* -------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .dr-marquee__track { animation: none; }
  /* Keep the filmstrip still but filled; a static hero is a valid result */
  .dr-hero-bleed .dr-marquee--bg .dr-marquee__track { transform: none; }
}