/*
 * Home — `.akb-section` system para bloques de productos.
 * Carga conditional (is_front_page() || is_page(210)).
 *
 * Selectores en uso por page 210:
 *   .akb-section           (wrapper genérico)
 *   .akb-section--alt      (variante con bg ligeramente distinto)
 *   .akb-preventas         (variante temática preventas)
 *   .akb-section__header   (h2 + link container)
 *   .akb-section__header h2
 *   .akb-section__header h2::before  (bullet rojo)
 *   .akb-section__sub      (subtitle pequeño)
 *   .akb-section__link     (link "Ver todos →")
 *
 * NOTA: hero configurable (.akb-hero) vive en akibara-business. Trust
 * (.akb-trust-section) está en trust.css.
 */

/* ─── Page wrapper reset (home only) ────────────────────────────
 * GP renderiza .inside-article con bg blanco + .entry-header vacío
 * (~17px) que crea franja blanca arriba del hero. En home queremos
 * que el hero pegue directo al header.
 */
body.home .inside-article {
    background: var(--aki-black);
    padding: 0;
    margin: 0;
    border: 0;
}

body.home .entry-header {
    display: none;
}

body.home .entry-content {
    margin: 0;
    padding: 0;
}

.akb-section {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    /* Padding lateral consistente: el wp:group es alignfull (sin margins
     * naturales), sin esto el contenido (h2, links "Ver todos →", grid de
     * productos) toca el viewport edge en mobile. La flecha "→" del link
     * "VER TODOS" quedaba flush al pixel del display sin gap. */
    padding-inline: clamp(14px, 4vw, 32px);
    background: var(--aki-black);
    color: var(--aki-gray-200);
}

.akb-section--alt {
    background: var(--aki-surface);
}

.akb-preventas {
    background: var(--aki-surface);
    border-top: 1px solid var(--aki-border);
    border-bottom: 1px solid var(--aki-border);
}

.akb-section__header {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--aki-border);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.akb-section__header h2 {
    margin: 0;
    font-family: var(--font-heading);
    letter-spacing: 0.04em;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1;
    color: var(--aki-white);
    flex: 1 1 auto;
    text-transform: uppercase;
}

.akb-section__header h2::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 0.85em;
    background: var(--aki-red);
    margin-right: 0.6rem;
    vertical-align: -2px;
}

.akb-section__sub {
    flex: 1 1 100%;
    margin: 0.25rem 0 0;
    color: var(--aki-gray-400);
    font-size: var(--text-sm);
}

.akb-section__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.45rem 0.85rem;
    margin-left: auto;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.72);
    font-family: var(--font-heading);
    font-size: 13px;
    /* Bebas no tiene 800 ni italic: ambos se sintetizaban (trazo engordado +
       slant falso). El dinamismo lo da un skew real del contenedor. */
    font-weight: 400;
    font-style: normal;
    font-synthesis: none;
    transform: skewX(-5deg);
    letter-spacing: 0.08em;
    /* #FF2738 = color-mix(--aki-red-bright 88%, white) → ~4.64:1 sobre el chip
       casi-negro: AA pleno (1.4.3). --aki-red-bright puro daba 3.95 a 13px. El
       borde/box-shadow del chip + la flecha → cubren 1.4.1 (uso de color). */
    color: #FF2738;
    color: color-mix(in srgb, var(--aki-red-bright, #FF0A1D) 88%, #fff);
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    transition:
        color 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        transform 220ms ease,
        text-shadow 220ms ease;
}

.akb-section__link:hover,
.akb-section__link:focus-visible {
    /* Fill ROJO (no amarillo — amarillo = solo precio). El color de acción de la
       casa es el rojo; el amarillo queda solo como anillo de foco abajo. */
    color: var(--aki-white);
    background: var(--aki-red);
    border-color: var(--aki-red);
    transform: translateX(5px) skewX(-5deg);
    text-shadow: none;
    box-shadow: 4px 4px 0 var(--aki-black);
    text-decoration: none;
}

/* Anillo de foco (amarillo permitido como indicador funcional de foco, no fill). */
.akb-section__link:focus-visible {
    outline: 3px solid var(--aki-yellow);
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .akb-section {
        padding-block: 2.5rem;
    }
}

/* WC products grid + card styling viven en loop.css con selectores
 * generales (.woocommerce ul.products) — single source of truth para
 * shop, archives, search y este home shortcode.
 */

/* ─── Neutralizar wrappers internos cuando viven dentro de .akb-section ──
 * El shortcode [akibara_brands_home] viene con su propio padding-block +
 * background + container (theme-agnostic). Cuando el page 210 lo envuelve
 * en un wp:group constrained (.akb-section), ese wrapper YA aplica
 * padding-block, background y max-width 1280px coherentes con las otras
 * secciones de la home — el styling interno duplica. Acá lo desactivamos
 * solo en ese contexto, preservando el componente standalone para
 * cualquier otra page que use el shortcode sin envoltorio.
 */
.akb-section > .akb-brands-home,
.akb-section .akb-brands-home {
    padding: 0;
    background: transparent;
    border-top: 0;
    border-bottom: 0;
}

.akb-section .akb-brands-home__container {
    width: 100%;
    max-width: none;
    margin: 0;
}