/* ============================================
   NEWS PAGE — Estilos exclusivos
   Requiere: forms.css, site-nav.css
============================================ */

/* El icono de cabecera usa emoji en lugar de SVG */
.news-page .brand-icon {
    font-size: 18px;
    line-height: 1;
}

/* ============================================
   BARRA DE FILTROS POR MARCA
============================================ */
.filter-bar {
    border-bottom: 1px solid var(--border-subtle);
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.filter-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-faint);
    flex-shrink: 0;
}

.brand-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.update-stamp {
    margin-left: auto;
    font-family: "DM Mono", monospace;
    font-size: 0.68rem;
    color: var(--text-faint);
}

/* ============================================
   ESTADOS (cargando / error / vacío)
============================================ */
.state-msg {
    text-align: center;
    padding: 64px 24px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.state-msg a {
    color: var(--accent);
}

.state-err {
    color: var(--err-color);
}

/* ============================================
   GRID DE NOTICIAS
============================================ */
.main-content,
.news-feed-main {
    padding-top: 24px;
    padding-bottom: 64px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media (max-width: 1200px) {
    .news-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 800px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   TARJETA DE NOTICIA
============================================ */
.news-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 11px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition:
        box-shadow 0.18s,
        border-color 0.18s;
    animation: fadeIn 0.25s ease both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (hover: hover) {
    .news-card:hover {
        border-color: var(--accent);
        box-shadow:
            0 0 0 1px var(--accent),
            0 4px 16px rgba(0, 0, 0, 0.25);
    }
}

/* Scoped para no colisionar con .card-header de las tarjetas de cámara */
.news-card .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* ============================================
   CHIPS DE MARCA (por fabricante)
============================================ */
/* Chips de marca: usan .ac-pill/.ac-pill--xs (components.css) para la forma
   base; aquí solo se define la paleta por marca. Igual que los pills de
   filtro/etiqueta (--neutral/--accent), los de marca no llevan punto de
   estado, de ahí la supresión de ::before. */
.ac-pill--brand-fujifilm  { background: rgba(48, 209, 88, 0.16);  color: #7adb95; }
.ac-pill--brand-canon     { background: rgba(255, 69, 58, 0.16);  color: #ff8579; }
.ac-pill--brand-nikon     { background: rgba(255, 214, 10, 0.16); color: #ffd97a; }
.ac-pill--brand-sigma     { background: rgba(100, 210, 255, 0.16); color: #9be3ff; }
.ac-pill--brand-ricoh     { background: rgba(191, 90, 242, 0.16); color: #d693f5; }
.ac-pill--brand-photolari { background: rgba(64, 203, 224, 0.16); color: #8ce0ef; }
.ac-pill--brand-sony      { background: rgba(255, 159, 10, 0.16); color: #ffbf66; }
.ac-pill--brand-leica     { background: rgba(255, 55, 95, 0.16);  color: #ff87a0; }
/* Tonos de systemIndigo y systemBrown de Apple: los únicos de la paleta que
   no chocan con los ocho de arriba. Sin ellos las dos caían al gris de
   «otras», que es donde acaba cualquier marca sin entrada aquí. */
.ac-pill--brand-panasonic { background: rgba(94, 92, 230, 0.16);  color: #a5a3f5; }
.ac-pill--brand-omsystem  { background: rgba(172, 142, 104, 0.18); color: #d0b48f; }
.ac-pill--brand-other     { background: rgba(var(--ac-overlay-white), 0.10); color: #b8b8bd; }

.ac-pill--brand-fujifilm::before,
.ac-pill--brand-canon::before,
.ac-pill--brand-nikon::before,
.ac-pill--brand-sigma::before,
.ac-pill--brand-ricoh::before,
.ac-pill--brand-photolari::before,
.ac-pill--brand-sony::before,
.ac-pill--brand-leica::before,
.ac-pill--brand-panasonic::before,
.ac-pill--brand-omsystem::before,
.ac-pill--brand-other::before {
    display: none;
}

/* ============================================
   CONTENIDO DE TARJETA
============================================ */
.card-source {
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.card-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: "DM Mono", monospace;
    font-size: 0.66rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.card-date::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.6;
    flex-shrink: 0;
}

.card-title {
    font-size: 0.80rem;
    font-weight: 600;
    line-height: 1.4;
    min-height: calc(2 * 1.4em);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.card-title a {
    color: var(--text-main);
    text-decoration: none;
    transition: color 0.12s;
}

.card-title a:hover {
    color: var(--accent);
}

.card-summary {
    font-size: 0.65rem;
    color: var(--text-muted);
    line-height: 1.5;
    max-height: calc(4 * 1.5em);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.card-footer {
    margin-top: auto;
    padding-top: 4px;
}

/* La fecha está antes del título en el DOM; la movemos al fondo
   para que quede alineada en todas las tarjetas de la misma fila */
.news-card time.card-date {
    order: 10;
}
.news-card .card-footer {
    order: 11;
    margin-top: 0;
}

/* Toda la tarjeta abre el artículo (delegado en news.js al <a> del título) */
.news-card--linked {
    cursor: pointer;
}

.card-link {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: opacity 0.12s;
    /* Área táctil digna por sí sola (la tarjeta entera también es enlace,
       pero este CTA no debe ser un objetivo de 14px de alto). */
    padding: 8px 10px 8px 0;
    margin-bottom: -8px;
}

.card-link:hover {
    opacity: 0.75;
    text-decoration: underline;
}

/* ============================================
   ICONOS DE TEMA (luna / sol)
============================================ */
.theme-icon-light {
    display: none;
}


/* ============================================
   INVENTARIO + PANEL DE NOTICIAS (index)
============================================ */

.news-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: var(--radius-pill);
    background: var(--err-color, #ff453a);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    pointer-events: none;
}

/* Layout de paneles: ver assets/css/site-nav.css (sidebar + un panel a la vez). */

/* ============================================
   MOBILE / TABLET (≤1080px)
============================================ */
@media (max-width: 1080px) {
    .news-sidebar .update-stamp {
        display: block;
        margin-left: 0;
        width: 100%;
        text-align: left;
        margin-top: 4px;
    }

    .news-sidebar .filter-bar {
        flex-wrap: wrap;
    }
}

/* Movimiento reducido: sin entrada animada de tarjetas */
@media (prefers-reduced-motion: reduce) {
    .news-card {
        animation: none;
    }
}