/* ==========================================================================
   MAGRANIT — estilos exclusivos de Servicios
   1. Bloques de servicio — #services_kitchens, #services_bathrooms, #services_outdoor
   2. Piezas que fabricamos — #services_pieces
   ========================================================================== */


/* ==========================================================
   1. BLOQUES DE SERVICIO
   Los tres comparten componente: un solo bloque de reglas.
   ========================================================== */

:is(#services_kitchens, #services_bathrooms, #services_outdoor) {
    padding-block: clamp(3.25rem, 7vw, 6.5rem);
    border-top: 2px solid var(--border-color);
    scroll-margin-top: 9rem;
}

#services_bathrooms {
    background-color: var(--surface-color);
}

:is(#services_kitchens, #services_bathrooms, #services_outdoor) .services-detail__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.75rem, 5vw, 5rem);
    align-items: center;
    width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
    margin-inline: auto;
}

/* En el bloque de baños la fotografía va a la izquierda. */
#services_bathrooms .services-detail__media {
    grid-column: 1;
    grid-row: 1;
}

#services_bathrooms .services-detail__content {
    grid-column: 2;
    grid-row: 1;
}

:is(#services_kitchens, #services_bathrooms, #services_outdoor) .services-detail__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
}

:is(#services_kitchens, #services_bathrooms, #services_outdoor) .services-detail__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

:is(#services_kitchens, #services_bathrooms, #services_outdoor) .services-detail__number {
    font-size: 0.75rem;
    font-weight: var(--font-medium);
    letter-spacing: 0.18em;
    color: var(--muted-color);
}

:is(#services_kitchens, #services_bathrooms, #services_outdoor) .services-detail__head-rule {
    display: block;
    flex: none;
    width: 2.125rem;
    height: 2px;
    background-color: var(--accent-color);
}

:is(#services_kitchens, #services_bathrooms, #services_outdoor) .services-detail__icon {
    display: block;
    width: 26px;
    height: 26px;
    color: var(--primary-color);
}

:is(#services_kitchens, #services_bathrooms, #services_outdoor) .services-detail__title {
    max-width: 18ch;
}

:is(#services_kitchens, #services_bathrooms, #services_outdoor) .services-detail__description {
    max-width: 50ch;
    font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
    color: var(--body-color);
}

:is(#services_kitchens, #services_bathrooms, #services_outdoor) .services-detail__list {
    display: flex;
    flex-direction: column;
    gap: 0.6875rem;
}

:is(#services_kitchens, #services_bathrooms, #services_outdoor) .services-detail__item {
    display: flex;
    gap: 0.6875rem;
    font-size: 0.90625rem;
    line-height: 1.55;
    color: var(--body-color);
}

:is(#services_kitchens, #services_bathrooms, #services_outdoor) .services-detail__item-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: var(--primary-color);
}

:is(#services_kitchens, #services_bathrooms, #services_outdoor) .services-detail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2xs);
}

:is(#services_kitchens, #services_bathrooms, #services_outdoor) .services-detail__tag-text {
    display: inline-block;
    padding: 0.375rem 0.6875rem;
    font-size: 0.6875rem;
    font-weight: var(--font-medium);
    color: #403c37;
    background-color: var(--surface-color);
    border-radius: 2px;
}

#services_bathrooms .services-detail__tag-text {
    background-color: var(--background-color);
}

:is(#services_kitchens, #services_bathrooms, #services_outdoor) .services-detail__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5625rem;
    padding-bottom: var(--spacing-3xs);
    font-size: 0.75rem;
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    transition: color var(--transition-base), border-color var(--transition-base);
}

:is(#services_kitchens, #services_bathrooms, #services_outdoor) .services-detail__link:hover {
    color: var(--primary-dark);
    border-color: var(--primary-dark);
}

:is(#services_kitchens, #services_bathrooms, #services_outdoor) .services-detail__link-icon {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
}

:is(#services_kitchens, #services_bathrooms, #services_outdoor) .services-detail__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--text-color);
    border: 1px solid var(--border-color);
}

:is(#services_kitchens, #services_bathrooms, #services_outdoor) .services-detail__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1024px) {
    :is(#services_kitchens, #services_bathrooms, #services_outdoor) .services-detail__container {
        grid-template-columns: 1fr;
    }

    #services_bathrooms .services-detail__media,
    #services_bathrooms .services-detail__content {
        grid-column: auto;
        grid-row: auto;
    }
}


/* ==========================================================
   2. PIEZAS QUE FABRICAMOS — #services_pieces
   ========================================================== */

#services_pieces {
    padding-block: var(--section-padding-y-sm);
    background-color: var(--surface-color);
    border-top: 2px solid var(--border-color);
}

#services_pieces .services-pieces__container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
    margin-inline: auto;
}

#services_pieces .services-pieces__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

#services_pieces .services-pieces__eyebrow-rule {
    display: block;
    flex: none;
    width: 2.75rem;
    height: 2px;
    background-color: var(--accent-color);
}

#services_pieces .services-pieces__eyebrow-text {
    font-size: 0.6875rem;
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--primary-color);
}

#services_pieces .services-pieces__title {
    max-width: 20ch;
    margin-bottom: clamp(1rem, 2.4vw, 1.75rem);
}

/* El borde va en cada tarjeta y no en el contenedor: así una fila incompleta
   no deja celdas vacías dibujadas, que es lo que pasaba al pintar la rejilla
   con el fondo del contenedor y separarla con el `gap`. */
#services_pieces .services-pieces__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14.25rem, 1fr));
    gap: 2px;
}

#services_pieces .services-pieces__card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: clamp(1.375rem, 2.4vw, 1.875rem);
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
}

#services_pieces .services-pieces__icon {
    display: block;
    width: 24px;
    height: 24px;
    margin-bottom: var(--spacing-xs);
    color: var(--primary-color);
}

#services_pieces .services-pieces__card-description {
    font-size: 0.84375rem;
    line-height: 1.6;
    color: var(--body-color);
}