/*
 * DANGO GENEROS — Carrusel de botones circulares (géneros).
 */

/* ── Wrap ──
   Sin max-width propio: ocupa el 100% del contenedor del tema, igual
   que las demás secciones del home (no lo angostamos nosotros). */
.dango-generos-wrap {
    width: 100%;
    padding: 28px 0;
}

/* ── Header (título con líneas decorativas) ── */
.dango-generos-header {
    text-align: center;
    margin-bottom: 24px;
}

.dango-generos-titulo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 640px;
    margin: 0 auto;
}

.dango-generos-line {
    flex: 1 1 60px;
    max-width: 140px;
    height: 1px;
    background: #d1121a;
    opacity: .5;
}

.dango-generos-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d1121a;
    flex-shrink: 0;
}

.dango-generos-titulo {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    white-space: nowrap;
}

.dango-generos-subtitulo {
    margin: 8px 0 0;
    color: #777;
    font-size: 14px;
}

/* ── Carousel container ──
   --dg-cols define cuántos géneros se ven completos a la vez (viene del
   panel admin, inyectado por media query inline). El ancho de cada
   círculo es siempre un porcentaje del track, nunca un px fijo, para
   que nunca se vea cortado a la mitad. */
.dango-generos-carousel {
    --dg-cols: 9;
    --dg-gap: 28px;
    --dg-height: 110px;
    position: relative;
    padding: 0 44px;
}

/* ── Track scrollable ── */
.dango-generos-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--dg-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 6px 2px 12px;
    margin: 0;
    list-style: none;
}
.dango-generos-track::-webkit-scrollbar { display: none; }

/* ── Cada botón circular ──
   flex-basis en % del track, calculado a partir de --dg-cols, para que
   siempre quepan N círculos completos por pantalla (sin cortes). */
.dango-generos-item-link {
    flex: 0 0 calc((100% - var(--dg-gap) * (var(--dg-cols) - 1)) / var(--dg-cols));
    width: auto;
    max-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    scroll-snap-align: start;
}

.dango-generos-circle {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    background: #eee;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    transition: transform .18s, box-shadow .18s;
}

.dango-generos-item-link:hover .dango-generos-circle {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}

.dango-generos-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dango-generos-label {
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: #222;
    line-height: 1.3;
}

/* ── Modo rectangular ──
   Cada elemento conserva el ancho natural de su imagen (logos de
   editoriales con anchos distintos entre sí); solo la altura es fija
   (--dg-height, configurable por dispositivo). Nunca se deforma: la
   imagen usa object-fit:contain dentro de esa altura. */
.dango-generos-carousel--rect .dango-generos-item-link {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

.dango-generos-carousel--rect .dango-generos-circle {
    width: auto;
    height: var(--dg-height);
    aspect-ratio: auto;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
}

.dango-generos-carousel--rect .dango-generos-circle img {
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

.dango-generos-carousel--rect .dango-generos-item-link:hover .dango-generos-circle {
    box-shadow: none;
}

/* ── Flechas de navegación ──
   top se fija por JS al alto real del círculo (varía según --dg-cols). */
.dango-generos-arrow {
    position: absolute;
    top: 50px;
    transform: translateY(-50%);
    z-index: 10;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    padding: 0;
    color: #333;
    transition: background .18s, box-shadow .18s;
}
.dango-generos-arrow:hover {
    background: #f5f5f5;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
.dango-generos-arrow--prev { left: 0; }
.dango-generos-arrow--next { right: 0; }
.dango-generos-arrow[disabled] {
    opacity: 0;
    pointer-events: none;
}

/* ── Responsive ──
   --dg-cols por breakpoint viene inyectado inline desde el admin.
   Acá solo ajustamos gap/paddings/tipografía. */
@media (max-width: 1024px) {
    .dango-generos-carousel { --dg-gap: 20px; }
}

@media (max-width: 768px) {
    .dango-generos-titulo { font-size: 20px; }
    .dango-generos-carousel { padding: 0 36px; --dg-gap: 14px; }
    .dango-generos-label { font-size: 12px; }
}

@media (max-width: 480px) {
    .dango-generos-wrap { padding: 20px 12px; }
    .dango-generos-line { display: none; }
    .dango-generos-carousel { padding: 0 30px; --dg-gap: 10px; }
    .dango-generos-arrow { width: 30px; height: 30px; top: 32px; }
}