/**
 * =============================================================================
 * KS-Semilla Nutriente: SLIDER CAROUSEL - custom-slides.css
 * -----------------------------------------------------------------------------
 * @author     Guillermo Arturo Shikina Zapata
 * @since      2025
 * @copyright  KhamaleonLab 
 * @license    See LICENSE.md for details.
 * @version    1.0.0
 * update      20250626
 * -----------------------------------------------------------------------------
 * This is the CUSTOMIZATION file for the Slider Carousel text overlays.
 *
 * --- HOW TO USE ---
 * 1. DO NOT edit 'nt-slider-carousel.css'. That is the core file.
 * 2. Edit THIS FILE to change the position, alignment, and style of the
 * text on each slide.
 * 3. Use the generated slide classes (.nt-slide-1, .nt-slide-2, etc.) to style
 * each slide individually.
 *
 * NOTE ON FONT SIZES:
 * The fluid font sizes (using clamp()) are generated dynamically in the
 * `slider-carousel.php` template file. This file handles the layout and
 * positioning of the text.
 * =============================================================================
 */

/*
 * -----------------------------------------------------------------------------
 * 1. Base Styles for ALL Slide Overlays
 * -----------------------------------------------------------------------------
 * These styles apply to every slide.
 */
.nt-slide-1,
.nt-slide-2,
.nt-slide-3 {
    position: relative; /* This is crucial for absolute positioning of the overlay. */
}

:root {
    --slider-safe-side: clamp(5.5rem, 9vw, 11rem);
}

.slide-text-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    color: #ffffff;
    pointer-events: none;
}

.slide-title {
    max-width: min(820px, 86vw);
}

.slide-title span {
    display: block;
    font-family: 'Poppins', sans-serif;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.48);
}

.slide-title .span-txt-1 {
    font-size: clamp(2.8rem, 5.5vw, 6rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.045em;
}

.slide-title .span-txt-2 {
    font-size: clamp(4rem, 8vw, 8.5rem);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.055em;
}

.slide-title .span-txt-3 {
    max-width: 720px;
    margin-top: 1.25rem;
    font-size: clamp(1.05rem, 1.8vw, 1.65rem);
    font-weight: 300;
    line-height: 1.35;
    letter-spacing: -0.015em;
    text-transform: none;
    opacity: 0.94;
}

/*
 * =============================================================================
 * 2. Slide-Specific Modifiers
 * -----------------------------------------------------------------------------
 * Each slide has its own generated class (e.g., .nt-slide-1) to allow for
 * unique layouts.
 *
 * IMPORTANT:
 * Font sizes are generated dynamically by the slider template using
 * NtClampCalculatorHelper. Do not define font-size here unless you intentionally
 * want to override the calculated values.
 * =============================================================================
 */

:root {
    --slider-safe-side: clamp(5.5rem, 9vw, 12rem);
}

/* --- Slide 1: Left / Center --- */

.nt-slide-1 .slide-text-overlay {
    align-items: center;
    justify-content: flex-start;
}

.nt-slide-1 .slide-title {
    margin-left: var(--slider-safe-side);
    transform: translateY(clamp(-1rem, -2vw, 0rem));
    text-align: left;
}

.nt-slide-1 .span-txt-1 {
    font-weight: 700;
    line-height: 0.95;
}

.nt-slide-1 .span-txt-2 {
    font-weight: 700;
    line-height: 0.92;
}

.nt-slide-1 .span-txt-3 {
    font-weight: 300;
    line-height: 1.35;
    margin-top: 1.1rem;
    text-transform: none;
    opacity: 0.94;
}

/* --- Slide 2: Left / Center --- */

.nt-slide-2 .slide-text-overlay {
    align-items: center;
    justify-content: flex-start;
}

.nt-slide-2 .slide-title {
    margin-left: var(--slider-safe-side);
    transform: translateY(clamp(2rem, 5vw, 5rem));
    text-align: left;
}

.nt-slide-2 .span-txt-1 {
    font-weight: 300;
    line-height: 0.98;
}

.nt-slide-2 .span-txt-2 {
    font-weight: 700;
    line-height: 0.92;
}

.nt-slide-2 .span-txt-3 {
    font-weight: 500;
    line-height: 1.35;
    margin-top: 1.1rem;
    text-transform: none;
    opacity: 0.94;
}

/* --- Slide 3: Right / Center --- */

.nt-slide-3 .slide-text-overlay {
    align-items: center;
    justify-content: flex-end;
}

.nt-slide-3 .slide-title {
    margin-right: var(--slider-safe-side);
    margin-top: 16rem;
    transform: translateY(clamp(3rem, 7vw, 8rem));
    text-align: right;
}

.nt-slide-3 .span-txt-1 {
    font-weight: 300;
    line-height: 0.98;
}

.nt-slide-3 .span-txt-2 {
    font-weight: 700;
    line-height: 0.92;
}

.nt-slide-3 .span-txt-3 {
    margin-left: auto;
    font-weight: 500;
    line-height: 1.35;
    margin-top: 1.1rem;
    text-transform: none;
    opacity: 0.94;
}

.nt-slide-3 .span-txt-1 {
  font-size: clamp(2rem, 3.33vw, 7.1rem) !important;
}

.nt-slide-3 .span-txt-2 {
  font-size: clamp(3.6rem, 4.5vw, 13.8rem) !important;
}

.nt-slide-3 .span-txt-3 {
  font-size: clamp(2.8rem, 1.7vw, 5.6rem) !important;
}


/*
 * =============================================================================
 * 3. Configuration Guide
 * =============================================================================
 * The active slides are styled above using the generated Core classes.
 */

/*
 * -----------------------------------------------------------------------------
 * 4. Fine-tuning for Small Screens (Optional)
 * -----------------------------------------------------------------------------
 * With clamp() and vw units, media queries are often not needed.
 * However, you can use them for very specific adjustments on small devices.
 */
@media (max-width: 480px) {
    .nt-slide-1 .span-txt-3 {
        margin-top: -1.2em;
    }

    .nt-slide-2 .slide-title {
        margin-left: 10vw;
    }
}

/*
 * -----------------------------------------------------------------------------
 * 3. Responsive
 * -----------------------------------------------------------------------------
 */

@media (max-width: 768px) {
    :root {
        --slider-safe-side: 1.5rem;
    }

    .nt-slide-1 .slide-title,
    .nt-slide-2 .slide-title,
    .nt-slide-3 .slide-title {
        margin-left: var(--slider-safe-side);
        margin-right: var(--slider-safe-side);
        margin-top: 0;
        text-align: left;
    }

    .nt-slide-1 .slide-text-overlay,
    .nt-slide-2 .slide-text-overlay,
    .nt-slide-3 .slide-text-overlay {
        align-items: center;
        justify-content: flex-start;
    }

    .nt-slide-1 .slide-title,
    .nt-slide-2 .slide-title,
    .nt-slide-3 .slide-title {
        transform: none;
    }

    .nt-slide-3 .span-txt-3 {
        margin-left: 0;
    }
}