/* ═══════════════════════════════════════════════════
   ARCO TV  ·  mediaIndex.css
   Estilos responsivos exclusivos para tablet y móvil
   NO modificar index.css para breakpoints
═══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   TABLET  (≤ 1024 px)
══════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* Layout en vivo: columna lateral más compacta */
    .live-grid {
        grid-template-columns: minmax(0, 1fr) 280px;
    }

    /* Notas: 2 columnas, nota destacada ancho completo */
    .notes-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .note-card--featured {
        grid-column: 1 / -1;
    }

    .note-card--featured .note-img-wrap { height: 260px; }

    /* Categorías: 2 columnas */
    .cats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════
   MÓVIL  (≤ 768 px)
══════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Sección en vivo: apilado vertical ── */
    .live-section { padding: 16px 0 0; }

    .live-grid {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 14px;
    }

    .live-side-col {
        align-self: auto;
        gap: 12px;
    }

    /* Carousel lateral: altura fija en móvil */
    .side-carousel-wrap {
        flex: none;
        height: 320px;
    }

    .side-carousel-wrap .carousel,
    .side-carousel-wrap .carousel-inner {
        height: 272px; /* 320px - 48px del header */
        min-height: unset;
        position: relative;
    }

    .side-carousel-wrap .carousel-item,
    .side-carousel-wrap .carousel-item.active {
        position: absolute !important;
        top: 0; left: 0;
        width: 100%; height: 272px;
    }

    .side-carousel-img {
        width: 100%; height: 272px;
        min-height: unset;
        object-fit: cover;
    }

    .side-ad-banner { height: 64px; }

    /* ── Ticker "Última Hora" ── */
    .ticker-bar {
        height: 44px;               /* un poco más alto para touch */
        border-radius: 0 0 14px 14px;
    }

    .ticker-label {
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        padding: 0 12px;
        min-width: 90px;
        justify-content: center;
    }

    .ticker-item {
        font-size: 0.80rem;
        font-weight: 600;
        padding: 0 14px;
        line-height: 1.3;
    }

    .ticker-sep {
        font-size: 0.5rem;
    }

    /* Ticker más lento en móvil (más fácil de leer) */
    .ticker-track {
        animation-duration: 35s;
    }

    /* ── Notas: 1 columna ── */
    .notes-section { padding: 24px 0; }

    .notes-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .note-card--featured { grid-column: 1 / -1; }

    .note-card--featured .note-img-wrap { height: 210px; }

    /* En móvil el body del featured va debajo de la imagen (no superpuesto) */
    .note-card--featured .note-body {
        position: relative;
        padding: 16px;
        background: var(--bg-card);
    }

    .note-card--featured .note-img-wrap::after { display: none; }

    .note-card--featured .note-title {
        font-size: 1.05rem;
        color: #e8edf2;
    }

    .note-card:not(.note-card--featured) .note-img-wrap { height: 160px; }

    /* ── Encabezados de sección ── */
    .section-header { margin-bottom: 18px; }
    .sh-title { font-size: 0.95rem; letter-spacing: 0.12em; }

    /* ── Ads ── */
    .ads-section { padding: 0 0 28px; }
    .ads-row { flex-direction: column; gap: 12px; }
    .ad-block { min-height: 90px; }

    /* ── Categorías ── */
    .cats-section { padding: 0 0 40px; }
    .cats-grid { grid-template-columns: 1fr; gap: 14px; }
    .cat-carousel-img { height: 170px; }
}

/* ══════════════════════════════════════════
   MÓVIL PEQUEÑO  (≤ 420 px)
══════════════════════════════════════════ */
@media (max-width: 420px) {

    .live-badge-row { padding: 8px 12px; }
    .live-channel { display: none; }   /* ocultar "ARCO TV" text en pantallas muy pequeñas */

    .side-carousel-wrap {
        height: 270px;
    }

    .side-carousel-wrap .carousel,
    .side-carousel-wrap .carousel-inner { height: 222px; }

    .side-carousel-wrap .carousel-item,
    .side-carousel-wrap .carousel-item.active {
        height: 222px;
    }

    .side-carousel-img { height: 222px; min-height: unset; }

    .side-carousel-caption h3 { font-size: 0.88rem; }

    .ticker-bar { height: 40px; }
    .ticker-label {
        font-size: 0.68rem;
        padding: 0 10px;
        min-width: 80px;
    }
    .ticker-item { font-size: 0.75rem; padding: 0 10px; }

    .note-card--featured .note-img-wrap { height: 180px; }
    .note-card:not(.note-card--featured) .note-img-wrap { height: 140px; }

    .note-title { font-size: 0.84rem; }
    .note-time  { font-size: 0.68rem; }

    .sh-title { font-size: 0.88rem; }

    .side-carousel-indicators { bottom: 48px !important; }
}