/* =========================================================
   SERVICE HERO — Pagini individuale servicii
   ========================================================= */

.service-hero {
    background-color: var(--color-white);
    padding-block: var(--sp-12);
}

.service-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
    align-items: center;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--container-px);
}

.service-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.service-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    color: var(--color-navy-40);
}

.service-hero__breadcrumb a {
    color: var(--color-navy-40);
    transition: color var(--trans-fast);
}

.service-hero__breadcrumb a:hover {
    color: var(--color-pink);
}

.service-hero__breadcrumb-sep {
    color: var(--color-navy-15);
}

.service-hero__label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.25rem 0.875rem;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-pink);
    background-color: var(--color-pink-10);
    border: 1px solid var(--color-pink-20);
    border-radius: var(--radius-badge);
    width: fit-content;
}

.service-hero__title {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--weight-extrabold);
    color: var(--color-navy);
    line-height: var(--leading-snug);
}

.service-hero__desc {
    font-size: var(--text-lg);
    color: var(--color-navy-40);
    line-height: var(--leading-loose);
}

.service-hero__actions {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.service-hero__visual {
    border-radius: var(--radius-card-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: var(--color-bg);
}

.service-hero__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-hero__visual-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-pink-10) 0%, rgba(235, 45, 92, 0.04) 100%);
}

.service-hero__visual-placeholder svg {
    width: 120px;
    height: 120px;
    color: var(--color-pink);
    opacity: 0.35;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 768px) {
    .service-hero__inner {
        grid-template-columns: 1fr;
        gap: var(--sp-8);
    }

    .service-hero__title {
        font-size: var(--text-3xl);
    }
}

@media (max-width: 480px) {
    .service-hero__actions {
        flex-wrap: nowrap;
    }

    .service-hero__actions .btn {
        padding: 0.625rem 1.125rem;
        font-size: var(--text-sm);
    }
}