/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

/* Logo: el punto de la 'i' de 'agusthings' lleva el color de acento.
 * theme.css pinta todo el SVG del logo con .navbar-brand svg * { fill: var(--q2-text-strong) },
 * lo que sobreescribe el fill="#f09c00" del path original. Se marcó ese path con
 * class="logo-accent-dot" en el propio SVG para poder restaurarlo aquí con más especificidad. */
.navbar-brand svg .logo-accent-dot {
    fill: var(--q2-accent);
}

/* Antes de hacer scroll, theme.css fuerza el logo a blanco/negro sólido
 * (header-dark / header-light sobre el hero) con un selector que incluye
 * #header, más específico que la regla de arriba — así que el punto naranja
 * desaparecía hasta hacer scroll y que se quitara ese estado. Repetimos el
 * mismo selector con la clase del punto para ganarle en especificidad. */
body.header-dark:not(.scrolled) #header .navbar-brand svg path.logo-accent-dot,
body.header-light:not(.scrolled) #header .navbar-brand svg path.logo-accent-dot {
    fill: var(--q2-accent);
}

/* Preview de las entradas en la home: máximo 4 líneas de texto, con elipsis. */
.card-body {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Iconos SVG inline en el pie (Font Awesome no renderiza en este servidor,
 * ver nota en footer.html.twig) — alinearlos con el texto circundante. */
.icon-inline {
    display: inline-block;
    vertical-align: -2px;
}

/* Hero a pantalla completa (2026-07-31): theme.css usa padding-block con clamp,
 * no min-height:100vh. Se fuerza aquí para que el hero ocupe todo el viewport
 * al cargar la página. */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* Portada automática de posts nuevos (2026-08-15): la plantilla saca las
 * fotos de page.media y las apila justo bajo el título cuando el post lleva
 * `auto_cover_gallery: true` en el frontmatter — el texto respira con
 * padding-top tras la última foto. El selector de hermano adyacente hace que
 * esto SOLO aplique cuando existe la galería, así que los posts antiguos
 * (sin ese flag, con la imagen embebida a mano en el cuerpo) no cambian.
 *
 * Con 3+ fotos, la 1ª (portada) sale sola a ancho completo y el resto forma
 * una cuadrícula de 2 columnas recortada a cuadrado. Con exactamente 2, la
 * 2ª foto se queda simple debajo de la 1ª (una cuadrícula de una sola foto
 * no tiene sentido). */
.blog-item-cover-gallery > img + * {
    margin-top: 0.5rem;
}
.blog-item-cover-gallery + .e-content {
    padding-top: 20px;
}
/* Ficha del disco (2026-11-03): caja de datos bajo la portada, desde el
 * frontmatter `ficha:` (ver blog-item.html.twig). Dos columnas etiqueta/valor;
 * en móvil la etiqueta va encima del valor. */
.album-ficha {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1.25rem;
    margin: 1.25rem 0 0;
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    line-height: 1.45;
    background: var(--q2-bg-muted);
    border: 1px solid var(--q2-divider);
    border-radius: var(--q2-radius-md, 10px);
}
.album-ficha dt {
    margin: 0;
    font-weight: 600;
    color: var(--q2-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    padding-top: 0.15rem;
}
.album-ficha dd {
    margin: 0;
    color: var(--q2-text-strong);
}
.album-ficha + .e-content {
    padding-top: 20px;
}
@media (max-width: 480px) {
    .album-ficha {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
    .album-ficha dd + dt {
        margin-top: 0.5rem;
    }
}
/* Canciones de una lista (2026-11-05): caja bajo la portada con las
 * canciones como pastillas en línea, que se reparten solas en varias filas
 * (ver `canciones:` en blog-item.html.twig). */
.playlist-tracks {
    margin: 1.25rem 0 0;
    padding: 1rem 1.25rem;
    background: var(--q2-bg-muted);
    border: 1px solid var(--q2-divider);
    border-radius: var(--q2-radius-md, 10px);
}
.playlist-tracks-title {
    margin: 0 0 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--q2-text-muted);
}
.playlist-tracks ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.playlist-tracks li {
    margin: 0;
    padding: 0.2rem 0.65rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--q2-text-strong);
    background: var(--q2-bg);
    border: 1px solid var(--q2-divider);
    border-radius: var(--q2-radius-pill, 999px);
}
.playlist-tracks-artist {
    font-weight: 600;
}
.playlist-tracks-artist::after {
    content: " ·";
    font-weight: 400;
    color: var(--q2-text-muted);
}
.playlist-tracks-note {
    margin: 0.7rem 0 0;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--q2-text-muted);
}
.playlist-tracks + .e-content {
    padding-top: 20px;
}
.blog-item-cover-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}
.blog-item-cover-gallery-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* Menú de cabecera eliminado (2026-08-15): sin enlaces Home/Música/IA ni
 * hamburguesa/overlay en base.html.twig. theme.css seguía ocultando
 * .navbar-section.actions (el interruptor claro/oscuro) por debajo de 860px
 * porque antes solo era accesible dentro del overlay móvil — ahora que el
 * overlay ya no existe, se fuerza visible para no perder el interruptor en
 * móvil. */
@media (max-width: 860px) {
    .navbar-section.actions {
        display: flex;
    }
}

/* Enlace visual a YouTube sin embeber el reproductor (2026-08-18): tarjeta
 * con la miniatura real del vídeo (img.youtube.com, sin llamada a ninguna
 * API) y un botón de play superpuesto en SVG inline (Font Awesome no
 * renderiza en este servidor). Sigue siendo un <a> normal que abre YouTube
 * en pestaña nueva — no hay ningún <iframe> ni reproductor en la página. */
.youtube-link-card {
    display: block;
    max-width: 480px;
    margin: 1.5rem 0;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    background: var(--q2-surface-2, rgba(0, 0, 0, 0.03));
    border: 1px solid var(--q2-border, rgba(0, 0, 0, 0.1));
}
.youtube-link-card-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
}
.youtube-link-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.youtube-link-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
.youtube-link-card-label {
    display: block;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--q2-text-strong);
}


/* Vídeo propio en un post (2026-09-20): <video> nativo a ancho de columna,
 * alto máximo 80vh para que un vídeo vertical no ocupe varias pantallas en
 * escritorio (se ve con barras negras a los lados en ese caso). */
.blog-item-video {
    margin: 0 0 1.25rem;
}
.blog-item-video video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    background: #000;
    border-radius: 12px;
}
.blog-item-video-extra {
    margin: 2rem 0;
}
.blog-item-video-extra h2 {
    margin: 0 0 0.75rem;
}

/* Página 404 (2026-09-20): buscador centrado y botones en fila que envuelven en móvil. */
#error .error-search {
    max-width: 420px;
    margin: 1.5rem auto;
}
#error .error-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

/* ------------------------------------------------------------------
 * Estilo editorial por post (2026-11-06, primer uso: Chaf Melodies).
 * Frontmatter `estilo: editorial` → blog-item.html.twig añade la clase
 * .post-editorial a .e-content y carga Newsreader de Google Fonts solo
 * en ese post. Columna de texto estrecha (600px, igual que la portada
 * con cover_max_width: 600), cuerpo en serif, capitular en la primera
 * línea, ladillos centrados y citas destacadas con <blockquote>.
 * ------------------------------------------------------------------ */
.e-content.post-editorial {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-family: "Newsreader", Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    line-height: 1.7;
    font-optical-sizing: auto;
}
.post-editorial > p {
    margin: 0 0 1.15em;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.post-editorial > p:first-of-type {
    font-size: 1.12em;
    line-height: 1.6;
}
.post-editorial > p:first-of-type::first-letter {
    float: left;
    font-family: "Cal Sans", Inter, sans-serif;
    font-size: 3.6em;
    line-height: 0.82;
    margin: 0.08em 0.12em 0 0;
    color: var(--q2-accent);
}
.post-editorial h2 {
    text-align: center;
    font-size: 1.5rem;
    margin: 3rem 0 1.25rem;
}
.post-editorial h2::before {
    margin-left: auto;
    margin-right: auto;
}
.post-editorial blockquote {
    margin: 2.2rem 0;
    padding: 0.4rem 0 0.4rem 1.2rem;
    border-left: 3px solid var(--q2-accent);
    font-size: 1.35em;
    line-height: 1.4;
    font-style: italic;
    color: var(--q2-text-strong);
    background: none;
}
.post-editorial p,
.post-editorial li {
    font-size: inherit;
    line-height: inherit;
}
.post-editorial blockquote,
.post-editorial blockquote p {
    font-family: "Newsreader", Georgia, serif;
    font-style: italic;
}
.post-editorial blockquote p { margin: 0; }
.post-editorial > p:last-child em {
    display: block;
    text-align: center;
    font-size: 0.9em;
    color: var(--q2-text-muted);
    margin-top: 2rem;
}
@media (max-width: 480px) {
    .e-content.post-editorial { font-size: 1.1rem; }
}

/* Portada en móvil: botón «Ver más entradas» (js/blog-more.js, 2026-11-07) */
.blog-more-hidden { display: none !important; }
.blog-more-wrap { text-align: center; margin: 1.75rem 0 0.5rem; }
.blog-more-btn {
    font: inherit; font-weight: 600; font-size: 0.95rem;
    padding: 0.7rem 1.6rem; border-radius: 999px; cursor: pointer;
    background: transparent; color: inherit;
    border: 1px solid currentColor; opacity: 0.85;
}
.blog-more-btn:hover { opacity: 1; }

/* Botones «Escúchalo en Spotify / YouTube Music» (frontmatter `escuchar:`,
 * blog-item.html.twig, 2026-11-07) */
.listen-buttons {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;
    margin: 1.25rem 0 0;
}
.listen-btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.75rem 1.4rem; border-radius: 999px;
    font-weight: 700; font-size: 1rem; line-height: 1.2;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.listen-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); filter: brightness(1.05); }
.listen-btn svg { flex: none; }
.listen-btn-spotify, .listen-btn-spotify:hover { background: #1DB954; color: #000 !important; }
.listen-btn-ytmusic, .listen-btn-ytmusic:hover { background: #FF0000; color: #fff !important; }
.listen-buttons + .e-content { padding-top: 20px; }
@media (max-width: 480px) {
    .listen-btn { flex: 1 1 100%; justify-content: center; }
}