/**
 * Slide Content Styles for Hero Banner
 * Styles for banner content elements: title, description, subtitle, button
 * Supports variants: v2, v3, v4, v5
 */

/* Banner Container */
.hero-slide.banner {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0;
}

/* Slide Content Container */
.banner__content {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 20px;
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 clamp(20px, calc((80 / 1440) * 100vw), 80px);
    overflow: hidden;
}

/* Common Typography */
.banner__title,
.banner__description,
.banner__subtitle,
.banner__button {
    margin: 0;
    font-family: var(--wp--preset--font-family--sen);
}

/* Title */
.banner__title {
    font-size: clamp(20px, calc((64 / 1440) * 100vw), 64px);
    line-height: 100%;
    font-weight: 800;
    color: var(--wp--preset--color--neutral-000);
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

/* Description */
.banner__description {
    font-size: clamp(20px, calc((64 / 1440) * 100vw), 64px);
    font-weight: 800;
    color: var(--wp--preset--color--dark-900);
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

/* Subtitle */
.banner__subtitle {
    font-weight: 500;
    font-size: clamp(12px, calc((18 / 1440) * 100vw), 18px);
    line-height: 140%;
    color: var(--wp--preset--color--secondary-500);
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

/* Button */
.banner__button {
    cursor: pointer;
    font-size: clamp(12px, calc((26 / 1440) * 100vw), 26px);
    line-height: 100%;
    font-weight: 800;
    color: var(--wp--preset--color--accent-100);
    padding: clamp(10px, calc((21 / 1440) * 100vw), 21px) clamp(10px, calc((27 / 1440) * 100vw), 27px);
    border-radius: 7px;
    border: none;
    outline: none;
    background-color: var(--wp--preset--color--dark-900);
    transition: all 0.3s ease;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    text-decoration: none;
}

.banner__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Variant v2 Styles */
.hero-slide[data-variant="v2"].banner .banner__content {
    box-sizing: border-box;
    height: 100%;
    padding-bottom: 20px;
    padding-right: clamp(20px, calc((150 / 1440) * 100vw), 150px);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: right;
}

.hero-slide[data-variant="v2"].banner .banner__content > *:last-child {
    margin-top: 40px;
}

.hero-slide[data-variant="v2"].banner .banner__title {
    font-size: clamp(28px, calc((92 / 1440) * 100vw), 92px);
    line-height: 100%;
    font-weight: 800;
    color: var(--wp--preset--color--neutral-000);
}

/* Variant v3, v4, v5 - Content Styles */
/* Note: Background styles are in slider.css */
/* Note: padding-top is controlled via inline styles from slide-content.php */

.hero-slide[data-variant="v3"].banner .banner__content,
.hero-slide[data-variant="v4"].banner .banner__content,
.hero-slide[data-variant="v5"].banner .banner__content {
    z-index: 2;
    position: relative;
    height: 100%;
    box-sizing: border-box;
    color: var(--wp--preset--color--neutral-000);
    justify-content: center;
}

.hero-slide[data-variant="v3"].banner .banner__content > *:last-child,
.hero-slide[data-variant="v4"].banner .banner__content > *:last-child,
.hero-slide[data-variant="v5"].banner .banner__content > *:last-child {
    margin-top: 30px;
}

/* Variant v3 Specific */
.hero-slide[data-variant="v3"].banner .banner__title {
    color: var(--wp--preset--color--primary-500);
}

.hero-slide[data-variant="v3"].banner .banner__description {
    font-size: clamp(20px, calc((64 / 1440) * 100vw), 64px);
    font-weight: 800;
    color: var(--wp--preset--color--accent-100);
}

/* Variant v4 Specific */
/* Note: Background styles (background-size, background-position) are in slider.css */

.hero-slide[data-variant="v4"].banner .banner__content,
.hero-slide[data-variant="v5"].banner .banner__content {
    gap: 0px;
}

.hero-slide[data-variant="v4"].banner .banner__title {
    color: var(--wp--preset--color--danger-600);
}

.hero-slide[data-variant="v4"].banner .banner__description,
.hero-slide[data-variant="v5"].banner .banner__description {
    font-size: clamp(20px, calc((64 / 1440) * 100vw), 64px);
    font-weight: 800;
    color: var(--wp--preset--color--neutral-000);
    text-transform: uppercase;
}

/* Variant v5 Specific */
.hero-slide[data-variant="v5"].banner .banner__title {
    color: var(--wp--preset--color--warning-500);
}

.hero-slide[data-variant="v5"].banner .banner__description {
    color: var(--wp--preset--color--secondary-500);
}