/* app/static/css/variants/hero-carousel.css */
/*
 * Hero Carousel Variant
 *
 * Purpose: Makes the hero section visible AND enables carousel navigation controls.
 * This variant is typically used in conjunction with 'variant-hero', where
 * 'hero.css' might hide carousel navigation by default.
 *
 * Activation: Load this CSS file AFTER hero.css if 'hero.css' hides navigation.
 * Ensure the body tag has the 'variant-hero-carousel' class.
 *
 * Dependencies:
 * - Assumes 'hero.css' (if 'variant-hero' is also active) makes .hero-section visible
 * but might hide .carousel__navigation.
 * - Assumes 'carousel.css' defines the base styles for .carousel__navigation
 * (e.g., display: flex, button styling).
 * - Uses CSS variables from base/variables.css for spacing.
 */

/*
  Ensure the hero section itself is displayed when this variant is active.
  The !important flag is used to ensure this variant's intention (showing the hero)
  overrides other potential display rules (e.g., a layout might hide it by default).
*/
.variant-hero-carousel .hero-section {
  display: block !important; /* Ensure hero section is visible */
  margin-bottom: var(
    --spacing-lg,
    2rem
  ); /* Add space below hero, using base variable */
}

/*
  Show Carousel Navigation controls.
  This rule overrides any 'display: none' or 'visibility: hidden'
  that might be applied by other stylesheets (e.g., hero.css by default).
*/
.variant-hero-carousel .hero-section .carousel__navigation {
  display: flex; /* Re-enable display (assuming flex is the default from carousel.css) */
  visibility: visible; /* Make it visible */
  opacity: 1; /* Make it fully opaque */
  transition-delay: 0s; /* Apply visibility and opacity changes immediately */
  /* No !important needed if load order and specificity are correct.
     Carousel.css should define base display for .carousel__navigation.
     Hero.css might hide it. This variant explicitly shows it. */
}

/* --- Slot-Based Hero: Show Carousel Navigation --- */
.variant-hero-carousel .slot-hero .carousel__navigation {
  display: flex;
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}