/* 상세 페이지용 풀 와이드 Hero */
.hero-wide {
    position: relative;
    width: 100%;
    height: clamp(200px, 22vw, 500px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    background-color: var(--brand-primary);
    background-size: cover;
    background-position: center;
    margin-bottom: 50px;
}

/* 페이지별 배경 이미지 */
.hero-about {
    background-image: url('../img/hero-about-image.webp');
}

.hero-treatments {
    background-image: url('../img/hero-treatment-image.webp');
}

.hero-location {
    background-image: url('../img/hero-location-image.webp');
}

.hero-wide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-dark);
    z-index: 1;
}

.hero-wide-content {
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

.hero-wide-subtitle {
    font-size: clamp(0.75rem, 2vw, 0.9rem);
    letter-spacing: 3px;
    opacity: 0.8;
    margin-bottom: 10px;
    font-weight: 500;
}

.hero-wide-title {
    font-size: clamp(1.4rem, 4.5vw, 2.8rem);
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.hero-wide-sub {
    font-size: clamp(0.9rem, 2.5vw, 1.25rem);
    opacity: 0.9;
    font-weight: 400;
}

@media (max-width: 768px) {
    /* Mobile-specific title sizing to prevent line breaks */
    .hero-wide-title {
        font-size: clamp(1.35rem, 5.5vw, 2rem);
        letter-spacing: -0.5px;
        white-space: nowrap;
    }

    .hero-wide-sub {
        font-size: clamp(0.9rem, 3vw, 1.2rem);
    }
}

/* For very small screens (< 360px) */
@media (max-width: 360px) {
    .hero-wide-title {
        font-size: 1.25rem;
        letter-spacing: -0.3px;
    }
}