/* Hero Carousel – film strip border, zero gap (HERO_CAROUSEL_IMPLEMENTATION.md) */

.hero-carousel-container {
  width: 100%;
  max-width: 1438px;
  height: 400px;
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  margin: 0 auto;
  padding: 0;
}

/* Zero gap: no spacing between frames so black film strip border is continuous */
/* Track starts hidden to prevent flash of hardcoded placeholder names;
   dynamic-content.js sets visibility:visible after injecting DB content */
.hero-carousel-track {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  font-size: 0;
  letter-spacing: 0;
  animation: hero-scroll-left 60s linear infinite;
  width: max-content;
  visibility: hidden;
}

.hero-carousel-track:hover {
  animation-play-state: paused;
}

.hero-carousel-slide {
  flex-shrink: 0;
  width: 280px;
  height: 400px;
  min-width: 280px;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* Overlap slides to cancel border image’s built-in edge / sub-pixel gaps */
.hero-carousel-slide:not(:first-child) {
  margin-left: -12px;
}

/* Film strip border (clean: no baked-in text) in front of images */
.hero-carousel-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url('../images/Filmstrip_border_clean.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  z-index: 2;
  pointer-events: none;
}

/* Dynamic film strip text: tall Arial Narrow, orange (#f88e24), 2 sizes up */
.hero-carousel-frame-top,
.hero-carousel-frame-bottom {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  color: #f88e24 !important;
  font-family: "Arial Narrow", "Arial Condensed", Arial, sans-serif;
  font-size: 14px;
  font-stretch: condensed;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  pointer-events: none;
}

/* Top line: moved up 12px to correct alignment after global padding changes */
.hero-carousel-frame-top {
  top: calc(4% - 12px);
}

/* Bottom line: pet name centered in frame; triangle to the left of the centered name */
.hero-carousel-frame-bottom {
  bottom: calc(4% - 10px);
  text-align: center;
}

/* Wrapper is only as wide as the pet name, so it centers; triangle sits left of name */
.hero-carousel-frame-bottom-inner {
  display: inline-block;
  position: relative;
  color: #f88e24 !important;
}

/* Right-pointing triangle (3:1 ratio), positioned left of the centered pet name */
.hero-carousel-frame-bottom-inner::before {
  content: '';
  position: absolute;
  right: 100%;
  margin-right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 3.6px solid transparent;
  border-bottom: 3.6px solid transparent;
  border-left: 28.8px solid #f88e24;
}

/* Inner frame: shifted left/up to close gaps; 2% larger to fill film strip frame */
.hero-carousel-slide-inner {
  position: absolute;
  top: 8%;
  left: calc(6% - 12px);
  right: 6%;
  bottom: 8%;
  overflow: hidden;
  z-index: 1;
  border-radius: 0;
  transform: translate(-6px, -4px); /* shift left; photos up 6px from previous */
}

/* Images: fill frame; 99% scale so image stays inside film strip border */
.hero-carousel-slide-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  transform: scale(0.99);
}

/* One full loop = 15 slides minus overlap (12px per join × 14 joins) */
@keyframes hero-scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-280px * 15 + 14 * 12px));
  }
}

.hero-carousel-container::before,
.hero-carousel-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.hero-carousel-container::before {
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.9) 0%, transparent 100%);
}

.hero-carousel-container::after {
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,0.9) 0%, transparent 100%);
}

/* No mobile overrides — carousel stays consistent across all screen sizes */

@media (prefers-reduced-motion: reduce) {
  .hero-carousel-track {
    animation: none;
  }
}

/* Hero section: reduce vertical padding by 25% to save vertical space */
.hero-section .w-layout-blockcontainer,
.hero-section .w-container {
  padding-top: 1.2rem !important;
  padding-bottom: 1.5rem !important;
}

.hero-section .hero-section-contents {
  margin-bottom: 0.75rem !important;
}

.hero-section .hero-logo {
  margin-bottom: 1rem !important;
}

/* Hero logo + diagonal paw trails (two trails, one each side, using White_paw_svg) */
.hero-logo-and-paws {
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
}

.hero-paws {
  position: absolute;
  top: 0;
  width: 100px;
  height: 55%;
  pointer-events: none;
}

.hero-paws-left {
  right: 100%;
  margin-right: 8px;
}

.hero-paws-right {
  left: 100%;
  margin-left: 8px;
}

/* 400% larger than original 22px = 88px */
/* Dark brown from logo outline for paw stroke */
.hero-paws .hero-paw {
  position: absolute;
  width: 88px;
  height: 88px;
  object-fit: contain;
  opacity: 0.92;
  /* 1px stroke in dark brown via drop-shadow outline (0.5px was invisible on mobile) */
  filter: drop-shadow(-1px -1px 0 #4a3728) drop-shadow(0 -1px 0 #4a3728) drop-shadow(1px -1px 0 #4a3728) drop-shadow(1px 0 0 #4a3728) drop-shadow(1px 1px 0 #4a3728) drop-shadow(0 1px 0 #4a3728) drop-shadow(-1px 1px 0 #4a3728) drop-shadow(-1px 0 0 #4a3728);
}

/* Left: two paws, high up; outer (higher) paw farther from logo (-40px on x) */
.hero-paws-left .hero-paw:nth-child(1) { left: 55%; top: 5%; transform: translateX(-100px) translateY(-20px) rotate(-28deg); }
.hero-paws-left .hero-paw:nth-child(2) { left: 25%; top: 25%; transform: rotate(-22deg); }

/* Right: two paws, high up; outer (higher) paw farther from logo (+40px on x) */
.hero-paws-right .hero-paw:nth-child(1) { right: 55%; left: auto; top: 5%; transform: translateX(100px) translateY(-20px) rotate(28deg); }
.hero-paws-right .hero-paw:nth-child(2) { right: 25%; left: auto; top: 25%; transform: rotate(22deg); }

.hero-section .primary-button {
  margin-top: 0.675rem !important;
}