/* ============================================
   PRODUCT SPECS
   ============================================ */

/* --- Especificaciones principales (grid de tarjetas) --- */

.specs-grid--principales {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.spec-card {
    display: flex;
    flex-direction: column;
    gap: 4px; /* separación interna label ↔ valor */
    padding: 12px 16px;
    background-color: var(--color-light-gray);
    border-radius: 16px;
}

.spec-card__label {
    /* Hereda del body. Si querés afinar tipografía, va acá */
}

.spec-card__value {
    /* <strong> ya viene en negrita por defecto */
}

/* --- Responsive --- */

@media (max-width: 768px) {
    .specs-grid--principales {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .specs-grid--principales {
        grid-template-columns: 1fr;
    }
}


/* --- Todas las especificaciones (lista de definición) --- */
.specs-list {
    margin: 0;
    padding: 0;
}

.specs-list__row:first-child {
    border-top: 1px solid #D2D2D2;
}

.specs-list__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #D2D2D2; /* color custom desde figma */
}

.specs-list__label {
    margin: 0;
    font-family:    var(--typo-caption-regular-font-family);
    font-size:      var(--typo-caption-regular-font-size);
    font-weight:    var(--typo-caption-regular-font-weight);
    line-height:    var(--typo-caption-regular-line-height);
    letter-spacing: var(--typo-caption-regular-letter-spacing);
    text-transform: var(--typo-caption-regular-text-transform);
    color: var(--color-gray);
}

.specs-list__value {
    margin: 0;
    font-family:    var(--typo-caption-bold-font-family);
    font-size:      var(--typo-caption-bold-font-size);
    font-weight:    var(--typo-caption-bold-font-weight);
    line-height:    var(--typo-caption-bold-line-height);
    letter-spacing: var(--typo-caption-bold-letter-spacing);
    text-transform: var(--typo-caption-bold-text-transform);
    color:          var(--typo-caption-bold-font-color);
    text-align: right;
}

/* --- Responsive --- */
@media (max-width: 767px) {
    .specs-list__row {
        grid-template-columns: auto 1fr;
    }

    .specs-list__value {
        text-align: right;
    }
}

/* --- Especificaciones principales, layout inline (listado) --- */

.specs-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;   /* fila ↕ · columna ↔ */
}

.specs-inline__item {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

/* Items largos (marcados desde PHP): solo en mobile apilamos etiqueta arriba y
   valor abajo, ambos a la izquierda. Es flex, así que basta con cambiar la
   dirección — no hay grid que sobreescribir. En desktop hay ancho de sobra,
   así que se mantienen en línea. */
@media (max-width: 767px) {
    .specs-inline__item--long {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

.specs-inline__label {
    font-family:    var(--typo-caption-regular-font-family);
    font-size:      var(--typo-caption-regular-font-size);
    font-weight:    var(--typo-caption-regular-font-weight);
    line-height:    var(--typo-caption-regular-line-height);
    letter-spacing: var(--typo-caption-regular-letter-spacing);
    text-transform: var(--typo-caption-regular-text-transform);
    color: var(--color-gray);
}

.specs-inline__value {
    font-family:    var(--typo-caption-bold-font-family);
    font-size:      var(--typo-caption-bold-font-size);
    font-weight:    var(--typo-caption-bold-font-weight);
    line-height:    var(--typo-caption-bold-line-height);
    letter-spacing: var(--typo-caption-bold-letter-spacing);
    text-transform: var(--typo-caption-bold-text-transform);
    color:          var(--typo-caption-bold-font-color);
}