/* Hero (Split Screen) */
/* Hero (Split Screen) */
.hero {
  max-width: var(--page-max);
  margin: 0 auto;
  /* Relaxed min-height so padding defines the spacing ('keep distance') */
  min-height: clamp(300px, 40vh, 600px);
  display: flex;
  align-items: center;
  /* Padding dictates the 'distance' with content more directly */
  padding: clamp(2rem, 5vh, 5rem) 5%;
  /* Increased horizontal padding */
}

.hero-content {
  display: grid;
  /* Adjusted ratio: Text (0.8fr) vs Slider (1.2fr) to make slider larger */
  grid-template-columns: 0.8fr 1.2fr;
  gap: 4rem;
  /* Increased horizontal gap for breathing room */
  width: 100%;
  align-items: center;
}

/* Text Side */
.hero-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 540px;
  /* Slightly wider text area */
}

.hero-text span:first-child {
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  /* Increased Green Text Size further */
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-green);
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
}

.hero-text h1 {
  /* Reduced size and enforced no-wrap as requested */
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.4;
  /* Increased line-height */
  color: var(--text-dark);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
  /* Prevent wrapping */
  width: 100%;
}

.hero-text p {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  /* Responsive body text */
  line-height: 1.6;
  color: var(--text-gray, #666);
  max-width: 48ch;
  margin-bottom: 1.5rem;
}

.hero-shop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  background-color: var(--text-dark);
  color: white;
  text-decoration: none;
  font-weight: 600;
  border-radius: 50px;
  align-self: flex-start;
  transition: all 0.2s ease;
}

.hero-shop-btn:hover {
  background-color: var(--accent-green);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Slider Side (Right) */
.hero-slider-wrapper {
  position: relative;
  width: 100%;
  /* aspect-ratio: 4/3;  REMOVED to enable content-based height (Image 4/3 + Text) */
  height: auto;
  min-height: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  background: white;
  /* Cap height to viewport to ensure responsiveness on shorter screens */
  /* max-height: 80vh; REMOVED to prevent clipping on tablet where vertical stack might be tall */
}

/* Instead of group, we use usage of :hover on wrapper to show buttons if desired, 
   but for better UX on mobile we might just leave them visible or only visible on hover for desktop. */

.hero-slider {
  width: 100%;
  height: 100%;
  position: relative;
  display: grid;
  grid-template-areas: "stack";
  /* Grid stacking allows container to grow to tallest slide */
}

/* Individual Slide */
.hero-slide {
  grid-area: stack;
  position: relative;
  /* Changed from absolute to allow content flow */
  width: 100%;
  height: auto;
  min-height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  background: white;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  z-index: 1;
  pointer-events: none;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  pointer-events: auto;
}

/* Slide Image */
.hero-slide-img-box {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  /* Fixed ratio, ensuring it keeps size */
  flex-shrink: 0;
  /* Never shrink */
  overflow: hidden;
}

.hero-slide-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 6s ease;
}

.hero-slide.active .hero-slide-img-box img {
  transform: scale(1.05);
}

/* Slide Info (Bottom) */
.hero-slide-info {
  height: auto;
  /* Was fixed 25%, now auto to fit content */
  min-height: 25%;
  /* Ensure at least 25% logic is kept */
  flex-shrink: 0;
  /* Prevent shrinking */
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Align to top (near image) as requested */
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 3;
  /* Ensure text is above potentially overlapping elements */
}

.slide-tag {
  font-size: clamp(0.85rem, 2vw, 1rem);
  /* Increased from 0.75rem but responsive */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-green);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* On very small screens, hide tag to ensure title has space - REVERTED per user request to extend info box instead */

.slide-title {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 5vw, 1.5rem);
  /* Responsive scaling (Updated: Larger on mobile per user request) */
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
  transition: color 0.2s ease;
  /* Text Truncation: Removed strict limit per user request */
  /* Allow full title display; tag will be hidden if space is tight on mobile */
}

/* Interactive Hover */
.slide-title:hover {
  color: var(--accent-green);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Navigation Buttons */
.hero-nav {
  position: absolute;
  top: 37.5%;
  /* Center vertically relative to the image part (75% height) */
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  opacity: 0;
  /* Hidden by default */
}

/* Show when JS adds nav-visible class (hovering img or buttons) */
.hero-slider-wrapper.nav-visible .hero-nav {
  opacity: 1;
}

.hero-nav:hover {
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-50%) scale(1.1);
}

.hero-nav.prev {
  left: 1rem;
}

.hero-nav.next {
  right: 1rem;
}

/* On touch devices, always show navigation or rely on swipe (not implemented yet), 
   let's make them always visible on touch/mobile if we can distinguish, 
   or just always visible on smaller screens? 
   Actually, for simplicity and usability, let's keep them visible on hover for desktop 
   and maybe always visible on mobile? Or just hover is fine for now as mobile users tap.
   Let's make them always visible for now to be safe, or just opacity 1.
   Wait, the user wants "Previous/Next buttons", so maybe always visible is better for discoverability.
*/

.hero-nav {
  opacity: 0;
  /* Let's try hover first as it's cleaner */
}

@media (hover: none) {
  .hero-nav {
    opacity: 1;
    /* Always visible on touch devices */
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .hero-content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    text-align: center;
    min-height: auto;
  }

  /* Slider on TOP (REVERTED: Now standard flow, Text First) */
  .hero-slider-wrapper {
    order: 2;
    /* Explicitly place slider AFTER text */
    width: 100%;
    /* aspect-ratio: 4/3; -> Removed strict ratio to allow growing */
    height: auto;
  }

  .hero-text {
    order: 1;
    /* Explicitly place text FIRST */
    align-items: center;
    margin: 0 auto;
    max-width: 100%;
    padding-inline: 0;
    /* Removed extra padding side padding (1rem -> 0) */
  }

  /* Typography Scaling for Tablet/Mobile */
  .hero-text h1 {
    font-size: clamp(1.5rem, 7vw, 2.8rem);
    /* Main title: Bigger base (1.5rem) so it pops */
    white-space: nowrap;
    width: 100%;
    overflow: visible;
  }

  .hero-text h1 span {
    display: block;
    font-size: clamp(0.9rem, 4vw, 1.3rem);
    /* Subtitle: Significantly smaller to maintain hierarchy */
    margin-top: 0.2rem;
  }


  .hero-text p {
    font-size: 1.25rem;
    /* Larger body text */
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    /* Utilise full width */
  }

  .hero-shop-btn {
    align-self: center;
    padding: 1.25rem 3rem;
    font-size: 1.1rem;
    /* Larger button on mobile/tablet */
    width: 100%;
    /* Full width on mobile for easier tap */
    max-width: 300px;
  }

  /* Slider Info Text Scaling */


  /* .slide-tag font size inherits global 1rem now */

  .hero {
    padding-top: 2rem;
    padding-bottom: 3rem;
    min-height: auto;
  }

  /* Make sure buttons are visible on mobile */
  .hero-nav {
    opacity: 1;
    width: 44px;
    /* Larger touch target */
    height: 44px;
  }
}