/**
 * Block: tr-fields/structural-hero-service
 * Fully contained block CSS
 * Auto-generated by cr-generate-blocks.php
 */

/* CSS Custom Properties */
:root {
            --coral: #FF385C;
            --coral-dark: #E31C5F;
            --coral-light: #FF5A7D;
            --teal: #008489;
            --teal-light: #00A699;
            --black: #222222;
            --gray-900: #484848;
            --gray-700: #717171;
            --gray-500: #B0B0B0;
            --gray-300: #DDDDDD;
            --gray-100: #F7F7F7;
            --white: #FFFFFF;
            --success: #008A05;
            --warning: #FFB400;
            --star: #FF385C;
            --font-primary: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            --section-padding: clamp(3rem, 6vw, 6rem);
            --container-max: 1280px;
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 24px;
            --radius-full: 9999px;
        }

/* Component: structural-hero-service */
/* Service Hero */
        .service-hero {
    position: relative; padding: 64px 0 80px; background: linear-gradient(135deg, var(--black) 0%, #1a1a2e 100%); overflow: hidden;
}

.service-hero::before {
    content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: 0.5;
}

.service-hero__breadcrumb {
    display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 14px; color: rgba(255, 255, 255, 0.7); position: relative; z-index: 1;
}

.service-hero__breadcrumb a {
    color: rgba(255, 255, 255, 0.7); text-decoration: none;
}

.service-hero__breadcrumb a:hover {
    text-decoration: underline; color: var(--white);
}

.service-hero__breadcrumb svg {
    width: 16px; height: 16px;
}

.service-hero__grid {
    display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; position: relative; z-index: 1;
}

@media (min-width: 950px) {
    .service-hero__grid {
        grid-template-columns: 1fr 400px;
    }
}

.service-hero__content {
    color: var(--white);
}

.service-hero__badge {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(255, 56, 92, 0.15); border: 1px solid rgba(255, 56, 92, 0.3); border-radius: var(--radius-full); font-size: 13px; font-weight: 600; color: var(--coral-light); margin-bottom: 20px;
}

.service-hero__badge-dot {
    width: 8px; height: 8px; background: var(--coral); border-radius: 50%; animation: pulse 2s infinite;
}

.service-hero__title {
    font-size: clamp(32px, 5vw, 52px); font-weight: 700; line-height: 1.1; margin-bottom: 16px; color: var(--white);
}

.service-hero__title-accent {
    color: var(--coral);
}

.service-hero__description {
    font-size: 18px; color: rgba(255, 255, 255, 0.8); line-height: 1.6; margin-bottom: 24px; max-width: 560px;
}

.service-hero__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-bottom: 32px;
}

.service-hero__rating {
    display: flex; align-items: center; gap: 8px;
}

.service-hero__rating svg {
    width: 16px; height: 16px; fill: var(--coral);
}

.service-hero__rating-text {
    font-weight: 600; color: var(--white);
}

.service-hero__reviews {
    color: rgba(255, 255, 255, 0.7); text-decoration: underline; cursor: pointer;
}

.service-hero__divider {
    color: rgba(255, 255, 255, 0.3);
}

.service-hero__stats {
    display: flex; gap: 32px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.service-hero__stat {
    text-align: left;
}

.service-hero__stat-value {
    font-size: 28px; font-weight: 700; color: var(--white);
}

.service-hero__stat-label {
    font-size: 14px; color: rgba(255, 255, 255, 0.6);
}

/* Sticky booking card */
        .service-hero__card {
    background: var(--white); border-radius: var(--radius-xl); padding: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

@media (min-width: 950px) {
    .service-hero__card {
        position: sticky; top: 104px;
    }
}

.service-hero__card-header {
    text-align: center; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--gray-300);
}

.service-hero__card-title {
    font-size: 20px; font-weight: 700; margin-bottom: 4px;
}

.service-hero__card-subtitle {
    font-size: 14px; color: var(--gray-700);
}

.service-hero__card-price {
    display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-bottom: 20px;
}

.service-hero__card-price-label {
    font-size: 14px; color: var(--gray-700);
}

.service-hero__card-price-value {
    font-size: 28px; font-weight: 700;
}

.service-hero__card-price-unit {
    font-size: 14px; color: var(--gray-700);
}

.service-hero__card-cta {
    margin-bottom: 16px;
}

.service-hero__card-note {
    text-align: center; font-size: 14px; color: var(--gray-700); margin-bottom: 20px;
}

.service-hero__card-features {
    padding-top: 20px; border-top: 1px solid var(--gray-300);
}

.service-hero__card-features h4 {
    font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--gray-900);
}

.service-hero__card-list {
    list-style: none; display: flex; flex-direction: column; gap: 10px;
}

.service-hero__card-list li {
    display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--gray-900);
}

.service-hero__card-list svg {
    width: 18px; height: 18px; color: var(--teal); flex-shrink: 0; margin-top: 2px;
}

.container {
    max-width: var(--container-max); margin: 0 auto; padding-left: 24px; padding-right: 24px;
}

@media (min-width: 744px) {
    .container {
        padding-left: 40px; padding-right: 40px;
    }
}

@media (min-width: 1128px) {
    .container {
        padding-left: 80px; padding-right: 80px;
    }
}

/* Buttons */
        .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; font-family: var(--font-primary); font-size: 16px; font-weight: 600; text-decoration: none; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease;
}

.contact-form__footer .btn {
    display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 320px;
}

.btn--primary {
    background: linear-gradient(to right, var(--coral), var(--coral-dark)); color: var(--white);
}

.btn--primary:hover {
    transform: scale(1.02); box-shadow: 0 4px 14px rgba(255, 56, 92, 0.4);
}

.btn--large {
    padding: 16px 32px; font-size: 18px;
}

.btn--pill {
    border-radius: var(--radius-full);
}

.btn--full {
    width: 100%;
}