/* ============================================================
   Content / Guías — Santo Café
   Long-form article + archive hub styles.
   ============================================================ */

/* ---- Article wrapper ---- */
.sc-article {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--spacing-xl) 0 var(--spacing-2xl);
    color: var(--color-texto);
}

/* ---- Article header ---- */
.sc-article__header {
    margin-bottom: var(--spacing-xl);
}

.sc-article__kicker {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-dorado-suave);
    margin-bottom: var(--spacing-sm);
}

.sc-article__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.15;
    color: var(--color-oscuro);
    margin-bottom: var(--spacing-md);
}

.sc-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-texto-suave);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-borde);
    margin-bottom: var(--spacing-lg);
}

.sc-article__meta time { font-weight: 500; }
.sc-article__read-time::before { content: '·'; margin-right: var(--spacing-md); }

/* ---- Featured image ---- */
.sc-article__featured-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-card);
    margin-bottom: var(--spacing-xl);
}

/* ---- Body typography ---- */
.sc-article__body {
    font-size: var(--font-size-base);
    line-height: 1.8;
}

.sc-article__body h2 {
    font-size: var(--font-size-xl);
    color: var(--color-oscuro);
    margin: var(--spacing-2xl) 0 var(--spacing-md);
    line-height: 1.25;
    padding-top: var(--spacing-md);
    border-top: 2px solid var(--color-beige);
}

.sc-article__body h3 {
    font-size: var(--font-size-lg);
    color: var(--color-oscuro);
    margin: var(--spacing-xl) 0 var(--spacing-sm);
}

.sc-article__body p {
    margin-bottom: var(--spacing-md);
    text-wrap: pretty; /* evita viudas en texto largo */
}

.sc-article__body ul {
    list-style: disc;
    margin: 0 0 var(--spacing-md) var(--spacing-lg);
    padding: 0;
}
.sc-article__body ol {
    list-style: decimal;
    margin: 0 0 var(--spacing-md) var(--spacing-lg);
    padding: 0;
}

.sc-article__body li { margin-bottom: var(--spacing-xs); }

.sc-article__body a {
    color: var(--color-dorado-suave);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sc-article__body a:hover { color: var(--color-dorado); }

.sc-article__body strong {
    color: var(--color-oscuro);
    font-weight: 600;
}

.sc-article__body img,
.sc-article__body .wp-block-image img {
    border-radius: var(--radius-card);
}

.sc-article__body blockquote {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    border-left: 4px solid var(--color-dorado);
    background: var(--color-beige);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
    color: var(--color-oscuro);
}

/* ---- Table (Gutenberg wp:table, usado en guías de referencia rápida) ---- */
.sc-article__body .wp-block-table {
    margin: var(--spacing-lg) 0 var(--spacing-xl);
    overflow-x: auto; /* tablas anchas no rompen el layout en mobile */
}

.sc-article__body table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.sc-article__body th {
    background: var(--color-oscuro);
    color: var(--color-crema);
    font-weight: 600;
    text-align: left;
    padding: var(--spacing-sm) var(--spacing-md);
    white-space: nowrap;
}
.sc-article__body th:first-child { border-top-left-radius: var(--radius-sm); }
.sc-article__body th:last-child  { border-top-right-radius: var(--radius-sm); }

.sc-article__body td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-borde);
    vertical-align: top;
}

.sc-article__body tbody tr:nth-child(even) td { background: var(--color-beige); }
.sc-article__body tbody tr:last-child td { border-bottom: none; }

/* Info box (used inside guides for tips / tools) */
.sc-article__body .sc-infobox {
    background: var(--color-beige);
    border-radius: var(--radius-card);
    padding: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}
.sc-article__body .sc-infobox p:last-child { margin-bottom: 0; }

/* ---- CTA block — link to products ---- */
.sc-article__cta {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--color-oscuro);
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}
.sc-article__cta-text {
    color: var(--color-crema);
    font-size: var(--font-size-lg);
    font-weight: 600;
}
.sc-article__cta .btn { flex-shrink: 0; }

/* ---- Recomendados para esta preparación (guías) ---- */
.sc-article__products {
    margin: var(--spacing-xl) 0;
}

.sc-article__products-title {
    font-size: var(--font-size-lg);
    color: var(--color-oscuro);
    margin-bottom: var(--spacing-lg);
}

/* Por encima de 1024px, tope de 3 columnas siempre (en vez de las 4 de
   .catalog-section__grid) — con 2-3 recomendados por guía, 4 columnas
   dejaba espacio vacío o una sola tarjeta suelta en la fila. */
@media (min-width: 1025px) {
    .sc-article__products .catalog-section__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* El CTA "Explora nuestros cafés" vive dentro de la misma grilla cuando
   hay productos recomendados (ver single.php): en desktop ocupa el ancho
   completo como una barra debajo de las tarjetas. Sin margin propio — el
   espacio entre celdas ya lo da el gap de la grilla, igual que entre
   tarjetas (con el margin original quedaba descuadrado dentro de su celda). */
.sc-article__products .catalog-section__grid > .sc-article__cta {
    grid-column: 1 / -1;
    margin: 0;
}

/* ...y en el modo compacto de 2 columnas pasa a ser una celda más,
   cuadrada (mismo aspect-ratio 1/1 que .product-card-compact__image-zone,
   así el alto sale del mismo cálculo — ancho de columna — que las
   tarjetas, en vez de depender de cómo la grilla reparte el alto de la
   fila). Llena el hueco que deja un número impar de recomendados (ej. 3
   en 2 columnas) en vez de ir aparte, abajo de todo. */
@media (max-width: 1024px) {
    .sc-article__products .catalog-section__grid > .sc-article__cta {
        grid-column: auto;
        aspect-ratio: 1 / 1;
        height: auto;
        flex-direction: column;
        justify-content: center;
        gap: var(--spacing-sm);
        text-align: center;
        padding: var(--spacing-lg);
        overflow: hidden;
    }
    .sc-article__products .catalog-section__grid > .sc-article__cta .sc-article__cta-text {
        font-size: var(--font-size-sm);
        line-height: 1.3;
    }
    .sc-article__products .catalog-section__grid > .sc-article__cta .btn {
        width: 100%;
        justify-content: center;
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-sm);
    }
}

/* ---- Related posts ---- */
.sc-article__related {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-borde);
}

.sc-article__related-title {
    font-size: var(--font-size-lg);
    color: var(--color-oscuro);
    margin-bottom: var(--spacing-lg);
}

.sc-article__related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-md);
}

/* ---- Guide card (archive + related) ---- */
.sc-guide-card {
    background: var(--color-tarjeta);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-texto);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.sc-guide-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.sc-guide-card__thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--color-beige);
}

.sc-guide-card__body {
    padding: var(--spacing-md) var(--spacing-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.sc-guide-card__kicker {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-dorado-suave);
}

.sc-guide-card__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-oscuro);
    line-height: 1.35;
    margin: 0;
}

.sc-guide-card__excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-texto-suave);
    line-height: 1.5;
    margin-top: var(--spacing-xs);
    flex: 1;
}

.sc-guide-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-beige);
    font-size: var(--font-size-xs);
    color: var(--color-texto-suave);
}

/* ---- Archive hub ---- */
.sc-archive {
    padding: var(--spacing-xl) 0 var(--spacing-2xl);
}

.sc-archive__header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--spacing-2xl);
}

.sc-archive__kicker {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-dorado-suave);
    margin-bottom: var(--spacing-sm);
}

.sc-archive__title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    color: var(--color-oscuro);
    line-height: 1.15;
    margin-bottom: var(--spacing-md);
}

.sc-archive__desc {
    font-size: var(--font-size-lg);
    color: var(--color-texto-suave);
    line-height: 1.6;
}

.sc-archive__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .sc-article__title { font-size: 1.625rem; }
    .sc-article__cta {
        flex-direction: column;
        text-align: center;
    }
    .sc-article__cta .btn { width: 100%; justify-content: center; }
    .sc-archive__grid { grid-template-columns: 1fr; }
    .sc-article__related-grid { grid-template-columns: 1fr; }
}