/*
 * Roxty Framework — Components CSS
 * Post cards, paginación, badges, navegación, formularios, comentarios.
 * Se carga solo en páginas que no son canvas/plugin.
 *
 * Objetivo: < 4kb minificado
 */

/* ── POST CARD ─────────────────────────────────────────────────────────── */

.rxty-post-card {
    background: var(--rxty-surface);
    border-radius: var(--rxty-radius-lg);
    overflow: hidden;
    border: 1px solid var(--rxty-border);
    display: flex;
    flex-direction: column;
    transition: transform var(--rxty-transition), box-shadow var(--rxty-transition);
}

.rxty-post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--rxty-shadow);
}

.rxty-post-card__thumb {
    display: block;
    overflow: hidden;
    background: var(--rxty-surface-alt, var(--rxty-surface));
}

.rxty-post-card__thumb img {
    transition: transform var(--rxty-transition-slow);
}

.rxty-post-card:hover .rxty-post-card__thumb img {
    transform: scale(1.04);
}

.rxty-post-card__body {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.rxty-post-card__title {
    font-size: var(--rxty-text-lg);
    font-weight: var(--rxty-font-weight-bold, 700);
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.rxty-post-card__title a {
    color: var(--rxty-text);
    transition: color var(--rxty-transition-fast);
}

.rxty-post-card__title a:hover {
    color: var(--rxty-accent);
}

.rxty-post-card__excerpt {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Container Query: layout horizontal opt-in.
   Uso: agregar clase .rxty-post-card--auto al article.
   Cuando su celda de grid (rxty-card) sea >= 420px la card gira a horizontal.
   Útil en rxty-grid-2 o listas full-width; nunca se activa en grids de 3/4 col. */
@container rxty-card (min-width: 420px) {
    .rxty-post-card--auto {
        flex-direction: row;
    }
    .rxty-post-card--auto .rxty-post-card__thumb {
        width: 220px;
        flex-shrink: 0;
    }
}

/* CSS Subgrid — alineación perfecta entre cards (Baseline 2023).
   Sin subgrid: si card A tiene título de 3 líneas y card B solo 1,
   el excerpt de B arranca más arriba → aspecto desalineado.
   Con subgrid: thumb y body de todas las cards en la misma fila comparten
   los mismos row tracks del parent grid → alineación de baseline perfecta.
   Fallback: el layout flex original (lines 11-19) se mantiene sin cambios. */
@supports (grid-template-rows: subgrid) {
    .rxty-grid-2 > .rxty-post-card,
    .rxty-grid-3 > .rxty-post-card,
    .rxty-grid-4 > .rxty-post-card,
    .rxty-grid-auto > .rxty-post-card {
        display: grid;
        grid-row: span 2;            /* ocupa 2 tracks en el parent grid */
        grid-template-rows: subgrid; /* thumb = row 1, body = row 2 */
        gap: 0;
    }

    /* Asegurar que cada sección se estira para llenar su track */
    .rxty-post-card__thumb,
    .rxty-post-card__body { align-self: stretch; }
}

/* ── BADGES (categorías, etiquetas) ────────────────────────────────────── */

.rxty-cat-badge,
.rxty-tag-badge {
    display: inline-block;
    padding: 0.2em 0.65em;
    font-size: var(--rxty-text-xs);
    font-weight: var(--rxty-font-weight-medium, 500);
    border-radius: var(--rxty-radius);
    transition: background-color var(--rxty-transition-fast), color var(--rxty-transition-fast);
    text-decoration: none;
}

.rxty-cat-badge {
    background: rgba(235, 27, 27, 0.15);
    background: color-mix(in srgb, var(--rxty-accent) 15%, transparent);
    color: var(--rxty-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rxty-cat-badge:hover {
    background: var(--rxty-accent);
    color: #fff;
}

.rxty-tag-badge {
    background: var(--rxty-surface);
    color: var(--rxty-text-muted);
    border: 1px solid var(--rxty-border);
}

.rxty-tag-badge:hover {
    border-color: var(--rxty-accent);
    color: var(--rxty-accent);
}

/* ── PAGINACIÓN ─────────────────────────────────────────────────────────── */

.rxty-pagination .nav-links,
.navigation .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.rxty-pagination .page-numbers,
.navigation .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.75rem;
    border-radius: var(--rxty-radius);
    font-size: var(--rxty-text-sm);
    font-weight: var(--rxty-font-weight-medium, 500);
    color: var(--rxty-text);
    border: 1px solid var(--rxty-border);
    background: var(--rxty-surface);
    transition: all var(--rxty-transition-fast);
    text-decoration: none;
}

.rxty-pagination .page-numbers:hover,
.navigation .page-numbers:hover {
    border-color: var(--rxty-accent);
    color: var(--rxty-accent);
}

.rxty-pagination .page-numbers.current,
.navigation .page-numbers.current {
    background: var(--rxty-accent);
    border-color: var(--rxty-accent);
    color: #fff;
}

.rxty-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    cursor: default;
}

/* ── NAVEGACIÓN PREV/NEXT ──────────────────────────────────────────────── */

.rxty-post-nav .nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.rxty-post-nav .nav-previous,
.rxty-post-nav .nav-next {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rxty-post-nav .nav-next { text-align: right; }

.rxty-post-nav a {
    color: var(--rxty-text-muted);
    transition: color var(--rxty-transition-fast);
}

.rxty-post-nav a:hover { color: var(--rxty-accent); }

.rxty-nav-label {
    display: block;
    font-size: var(--rxty-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rxty-accent);
    font-weight: var(--rxty-font-weight-medium, 500);
}

.rxty-nav-title {
    font-size: var(--rxty-text-sm);
    font-weight: var(--rxty-font-weight-bold, 700);
}

/* ── FORMULARIO DE BÚSQUEDA ─────────────────────────────────────────────── */

.search-form {
    display: flex;
    gap: 0.5rem;
}

.search-form label {
    display: none; /* La accesibilidad la da el placeholder */
}

.search-form .search-field {
    flex: 1;
    padding: 0.65rem 1rem;
    border: 1px solid var(--rxty-border);
    border-radius: var(--rxty-radius);
    background: var(--rxty-surface);
    color: var(--rxty-text);
    font-family: var(--rxty-font-main);
    font-size: var(--rxty-text-sm);
    transition: border-color var(--rxty-transition-fast);
}

.search-form .search-field:focus {
    outline: none;
    border-color: var(--rxty-accent);
}

.search-form .search-submit {
    padding: 0.65rem 1.25rem;
    background: var(--rxty-accent);
    color: #fff;
    border: none;
    border-radius: var(--rxty-radius);
    font-family: var(--rxty-font-main);
    font-size: var(--rxty-text-sm);
    font-weight: var(--rxty-font-weight-medium, 500);
    cursor: pointer;
    transition: background-color var(--rxty-transition-fast);
    white-space: nowrap;
}

.search-form .search-submit:hover {
    background: var(--rxty-accent-hover, var(--rxty-accent));
}

/* ── COMENTARIOS ────────────────────────────────────────────────────────── */

.rxty-comments .comments-title {
    font-size: var(--rxty-text-xl);
    font-weight: var(--rxty-font-weight-bold, 700);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rxty-border);
}

.comment-list {
    list-style: none;
    padding: 0;
}

.comment-body {
    padding: 1.25rem;
    background: var(--rxty-surface);
    border-radius: var(--rxty-radius-lg);
    border: 1px solid var(--rxty-border);
    margin-bottom: 1rem;
}

.comment-author .fn {
    font-weight: var(--rxty-font-weight-bold, 700);
    font-style: normal;
}

.comment-meta {
    font-size: var(--rxty-text-xs);
    color: var(--rxty-text-muted);
    margin-bottom: 0.75rem;
}

.reply a {
    font-size: var(--rxty-text-xs);
    color: var(--rxty-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--rxty-font-weight-medium, 500);
}

#respond {
    background: var(--rxty-surface);
    border-radius: var(--rxty-radius-lg);
    border: 1px solid var(--rxty-border);
    padding: 1.5rem;
    margin-top: 2rem;
}

#respond .comment-reply-title {
    font-size: var(--rxty-text-lg);
    font-weight: var(--rxty-font-weight-bold, 700);
    margin-bottom: 1.25rem;
}

#respond .comment-form label {
    display: block;
    font-size: var(--rxty-text-sm);
    font-weight: var(--rxty-font-weight-medium, 500);
    margin-bottom: 0.35rem;
    color: var(--rxty-text);
}

#respond .comment-form input[type="text"],
#respond .comment-form input[type="email"],
#respond .comment-form input[type="url"],
#respond .comment-form textarea {
    width: 100%;
    padding: 0.65rem 1rem;
    border: 1px solid var(--rxty-border);
    border-radius: var(--rxty-radius);
    background: var(--rxty-bg);
    color: var(--rxty-text);
    font-family: var(--rxty-font-main);
    font-size: var(--rxty-text-sm);
    transition: border-color var(--rxty-transition-fast);
    margin-bottom: 1rem;
}

#respond .comment-form input:focus,
#respond .comment-form textarea:focus {
    outline: none;
    border-color: var(--rxty-accent);
}

#respond .comment-form textarea {
    min-height: 140px;
    resize: vertical;
}

#respond .form-submit .submit {
    background: var(--rxty-accent);
    color: #fff;
    border: none;
    padding: 0.7rem 1.75rem;
    border-radius: var(--rxty-radius);
    font-family: var(--rxty-font-main);
    font-weight: var(--rxty-font-weight-medium, 500);
    cursor: pointer;
    transition: background-color var(--rxty-transition-fast);
}

#respond .form-submit .submit:hover {
    background: var(--rxty-accent-hover, var(--rxty-accent));
}

/* ── WIDGETS ─────────────────────────────────────────────────────────────── */

.rxty-widget {
    margin-bottom: 2rem;
}

.rxty-widget-title {
    font-size: var(--rxty-text-base);
    font-weight: var(--rxty-font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--rxty-accent);
}

/* ── ARCHIVE HEADER ─────────────────────────────────────────────────────── */

.rxty-archive-header {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--rxty-border);
}

.rxty-archive-title {
    font-size: var(--rxty-text-2xl);
    font-weight: var(--rxty-font-weight-bold, 700);
    margin-bottom: 0.5rem;
}

.rxty-archive-description p {
    margin: 0;
    font-size: var(--rxty-text-base);
}

/* ── NO RESULTS ─────────────────────────────────────────────────────────── */

.rxty-no-results {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--rxty-surface);
    border-radius: var(--rxty-radius-lg);
    border: 1px solid var(--rxty-border);
}

.rxty-no-results h2 {
    font-size: var(--rxty-text-xl);
    margin-bottom: 1rem;
}

/* ── POPOVER API + @starting-style (Baseline 2024) ─────────────────────── */

/* Popover genérico: añadir .rxty-popover a cualquier [popover] para obtener
   animación de entrada/salida sin JS. El Popover API maneja open/close. */
[popover].rxty-popover {
    position: fixed;
    margin: 0;
    padding: 1.5rem;
    border: 1px solid var(--rxty-border);
    border-radius: var(--rxty-radius-lg);
    background: var(--rxty-surface);
    color: var(--rxty-text);
    box-shadow: var(--rxty-shadow);
    width: max-content;
    max-width: min(90vw, 400px);
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    transition:
        opacity   0.2s ease,
        transform 0.2s ease,
        display   0.2s allow-discrete,
        overlay   0.2s allow-discrete;
}

[popover].rxty-popover:popover-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@starting-style {
    [popover].rxty-popover:popover-open {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }
}

/* Panel de navegación mobile — se desliza desde la derecha.
   pointer-events: none en el estado base asegura que en browsers sin Popover
   API (donde el UA no aplica display:none automáticamente) el panel off-screen
   no intercepte clicks aunque sea visible en el DOM. */
[popover].rxty-nav-popover {
    position: fixed;
    inset: 0 0 0 auto;
    margin: 0;
    padding: 2rem 1.5rem;
    border: none;
    border-left: 1px solid var(--rxty-border);
    border-radius: 0;
    background: var(--rxty-surface);
    color: var(--rxty-text);
    width: min(320px, 85vw);
    max-width: none;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    opacity: 0;
    transform: translateX(100%);
    pointer-events: none;
    transition:
        opacity   0.3s ease,
        transform 0.3s ease,
        display   0.3s allow-discrete,
        overlay   0.3s allow-discrete;
}

[popover].rxty-nav-popover:popover-open {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

@starting-style {
    [popover].rxty-nav-popover:popover-open {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Backdrop animado detrás del panel mobile */
[popover].rxty-nav-popover::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition:
        opacity 0.3s ease,
        display 0.3s allow-discrete,
        overlay 0.3s allow-discrete;
}

[popover].rxty-nav-popover:popover-open::backdrop {
    opacity: 1;
}

@starting-style {
    [popover].rxty-nav-popover:popover-open::backdrop {
        opacity: 0;
    }
}

/* Botón cerrar (×) dentro del panel */
.rxty-nav-popover__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--rxty-text-muted);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    font-size: 1.5rem;
    transition: color var(--rxty-transition-fast);
}

.rxty-nav-popover__close:hover {
    color: var(--rxty-accent);
}

/* Lista de links dentro del panel */
.rxty-nav-popover .menu,
.rxty-nav-popover .rxty-nav-links {
    list-style: none;
    padding: 0;
    margin: 3rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rxty-nav-popover .menu a,
.rxty-nav-popover .rxty-nav-links a {
    display: block;
    padding: 0.8rem 0;
    color: var(--rxty-text);
    font-weight: var(--rxty-font-weight-medium, 500);
    border-bottom: 1px solid var(--rxty-border);
    text-decoration: none;
    transition: color var(--rxty-transition-fast);
}

.rxty-nav-popover .menu a:hover,
.rxty-nav-popover .rxty-nav-links a:hover {
    color: var(--rxty-accent);
}

/* ── HAMBURGER ──────────────────────────────────────────────────────────── */

.rxty-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.rxty-hamburger__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--rxty-text);
    border-radius: 2px;
    transition: transform var(--rxty-transition), opacity var(--rxty-transition);
}

/* ── @starting-style REVEAL ─────────────────────────────────────────────── */

/* Añadir .rxty-reveal a cualquier elemento para animarlo en su primer render.
   Sin JS ni Intersection Observer. El navegador transiciona desde @starting-style
   al estado final en cuanto pinta el elemento. (Baseline 2024) */
.rxty-reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

@starting-style {
    .rxty-reveal {
        opacity: 0;
        transform: translateY(16px);
    }
}

/* Variante: solo fade (sin desplazamiento) */
.rxty-reveal-fade {
    opacity: 1;
    transition: opacity 0.4s ease;
}

@starting-style {
    .rxty-reveal-fade {
        opacity: 0;
    }
}

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    [popover].rxty-popover,
    [popover].rxty-nav-popover,
    [popover].rxty-nav-popover::backdrop,
    .rxty-reveal,
    .rxty-reveal-fade {
        transition: none;
    }
}