/* Article-specific styles moved from css/style.css */

/* ARTICLES LIST LAYOUT */
.articles__search { display:flex; gap:var(--spacing-sm); align-items:center; margin-bottom:var(--spacing-md); }
.articles-list { margin-top: var(--spacing-md); }
.article-row { display: grid; grid-template-columns: minmax(220px, 1fr) 240px minmax(300px, 2fr); gap: var(--spacing-md); align-items: start; padding: calc(var(--spacing-sm) + 4px) 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.article-row__link { display:block; }
.article-row__title { color: var(--color-neon-cyan); font-size:1.125rem; margin:0; }
.article-row__meta { color: var(--color-text-secondary); font-size:0.95rem; text-align:left; margin:0; }
.article-row__excerpt { color: var(--color-text-secondary); margin:0; }
.article-row:hover { background: linear-gradient(90deg, rgba(0,240,255,0.02), transparent); }

@media (max-width: 900px) {
    .article-row { grid-template-columns: 1fr; gap: var(--spacing-sm); padding: var(--spacing-sm) 0; }
    .article-row__meta { order: 3; }
    .article-row__excerpt { order: 2; }
    .article-row__title { font-size: 1rem; }
}

@media (max-width: 520px) {
    .article-row { gap: 0.5rem; }
    .article-row__title { font-size: 0.95rem; }
}

/* Additional article list / cards and page layout */
.articles-list { display:block; max-width:1100px; margin-left:auto; margin-right:auto; border-radius:8px; overflow:auto; }
.article-row { display: grid; grid-template-columns: minmax(220px, 1fr) 240px minmax(300px, 2fr); gap: var(--spacing-md); align-items: start; padding: calc(var(--spacing-sm) + 4px) 0; border-bottom: 1px solid rgba(255,255,255,0.02); }
.article-row__link { display:block; width:100%; color:inherit; text-decoration:none; }
.article-row__left { display:block; }
.article-row__title { font-size:1rem; color:var(--color-neon-cyan); margin:0; line-height:1.25; }
.article-row__excerpt { font-size:0.95rem; color:var(--color-text-secondary); margin:0; }
.article-row__right { display:block; }
.article-row__tag { font-size:0.8rem; color:var(--color-text-primary); padding:0.2rem 0.45rem; border-radius:6px; border:1px solid rgba(255,255,255,0.03); background:transparent; }
.article-card__link { color:inherit; text-decoration:none; display:flex; flex-direction:column; height:100%; }
.article-card:hover, .article-card:focus-within { border-color:var(--color-neon-cyan); box-shadow:var(--shadow-neon-cyan); transform:translateY(-4px); }
.article-card__title { color:var(--color-neon-cyan); margin-bottom:var(--spacing-xs); font-size:1.125rem; }
.article-card__excerpt { color:var(--color-text-secondary); font-size:0.95rem; margin-bottom:var(--spacing-sm); }
.article-card__meta { display:flex; gap:var(--spacing-xs); margin-top:auto; }
.article-card__tag { background:rgba(0,0,0,0.12); padding:0.25rem 0.5rem; border-radius:4px; font-size:0.85rem; color:var(--color-text-primary); border:1px solid rgba(255,255,255,0.03); }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Ensure heading hierarchy inside article pages: H1 > H2 > H3 */
.article-page .page__title { font-size: clamp(1.6rem,3.6vw,2.6rem); }
.article-page h2 { font-size: clamp(1.125rem,2.2vw,1.6rem); color: var(--color-neon-cyan); margin-top: var(--spacing-md); margin-bottom: var(--spacing-sm); }
.article-page h3 { font-size: clamp(1rem,1.8vw,1.25rem); color: var(--color-neon-magenta); margin-top: var(--spacing-sm); margin-bottom: var(--spacing-xs); }

/* Ensure article content uses site dark background and no unexpected white panels */
.article-page .content { background: transparent; color: var(--color-text-secondary); padding: 0; }

/* Articles page visual improvements */
.articles-page {
    /* Compact spacing overrides for articles list to reduce dead space */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1.25rem;
    --spacing-xl: 1.5rem;
    background: linear-gradient(180deg, rgba(10,14,39,0.98) 0%, rgba(19,24,54,0.95) 100%);
    padding-top: calc(var(--spacing-lg) + 1rem);
}
.articles-page .page__title { text-align:center; margin-bottom: var(--spacing-sm); font-size: clamp(1.6rem,3.2vw,2.4rem); color: var(--color-neon-green); text-shadow: 0 0 30px rgba(57,255,20,0.18); }
.articles-page .lead { max-width:900px; margin:0 auto var(--spacing-md); text-align:center; color:var(--color-text-secondary); }

.articles__search { align-items:center; padding:0.5rem; background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(0,240,255,0.01)); border-radius:12px; border:1px solid rgba(255,255,255,0.02); }
.articles__search::before { content: '🔎'; margin-right:0.5rem; font-size:1.15rem; }
.search-input { padding:0.85rem 1rem; border-radius:10px; background:transparent; border:1px solid rgba(255,255,255,0.04); }
.search-input::placeholder { color: rgba(168,170,190,0.45); }

.articles-grid { margin-top: var(--spacing-md); }
.article-card { position:relative; overflow:visible; }
.article-card::after { content:''; position:absolute; inset:0; border-radius:var(--radius-lg); padding:2px; background:linear-gradient(90deg, rgba(0,240,255,0.06), rgba(178,38,255,0.04)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events:none; }
.article-card__body { min-height:100px; }
.article-card__title { display:block; font-size:1.2rem; letter-spacing:0.02em; }
.article-card__excerpt { color:var(--color-text-secondary); }
.article-card__meta { margin-top:1rem; }
.article-card__tag { background:transparent; border:1px solid rgba(255,255,255,0.03); padding:0.25rem 0.5rem; color:var(--color-text-primary); }

.article-card:hover, .article-card:focus-within { transform:translateY(-6px) scale(1.01); box-shadow: 0 10px 40px rgba(0,240,255,0.06), 0 2px 8px rgba(0,0,0,0.6); }

@media (max-width:720px) {
    .articles__search { flex-direction:column; align-items:stretch; }
    .article-card__body { min-height:auto; }
}

/* Responsive rules for article pages */
@media (max-width: 980px) {
    .article-page .container { width: 94%; padding: 0 1rem; }
    .article-page .content { font-size: 1rem; line-height: 1.6; }
    .articles-page .page__title { font-size: clamp(1.6rem, 6vw, 2.6rem); }
    .search-input { font-size: 0.95rem; }
}

@media (max-width: 600px) {
    .article-row { grid-template-columns: 1fr; gap: 0.75rem; }
    .article-row__meta { font-size: 0.9rem; }
    .article-row__excerpt { font-size: 0.95rem; }
    .article-page .content { padding: 0 0; }
}

/* Make media inside articles scale responsively */
.article-page img, .article-page video, .article-page iframe {
    max-width: 100%;
    height: auto;
}

/* Compact example and glossary on small screens */
.article-page .example-body { padding: 0.75rem; }
.glossary dt { font-size: 1rem; }
.glossary dd { font-size: 0.95rem; }

/* Improve readability on very small devices */
@media (max-width: 420px) {
    .article-page .content { font-size: 0.98rem; }
    .articles-page .lead { font-size: 0.95rem; }
    .article-row__title { font-size: 0.95rem; }
}

/* Fix mobile paginator layout: stack controls, center pagination, compact buttons */
@media (max-width: 520px) {
    .articles-controls-top, .articles-controls-bottom {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0;
        width: 100%;
    }

    .articles-controls-top .articles-pagination,
    .articles-controls-bottom .articles-pagination {
        justify-content: center;
        order: 1;
        margin: 0.25rem 0;
        gap: 0.35rem;
    }

    .articles-controls-top .articles-page-size,
    .articles-controls-bottom .articles-page-size {
        order: 2;
        text-align: center;
        margin: 0;
    }

    .articles-pagination .page-btn {
        padding: 0.28rem 0.45rem;
        min-width: 30px;
        margin: 0 0.12rem;
        font-size: 0.92rem;
        border-radius: 6px;
    }

    .articles-page-size { display: flex; align-items: center; gap: 0.35rem; }
    .articles-page-size select { padding: 0.2rem 0.4rem; }

    .articles-pagination { margin: 0.6rem 0; }
}

/* Top controls wrapper: pagination left, page-size right */
.articles-controls-top { display:flex; justify-content:space-between; align-items:center; gap:1rem; max-width:1100px; margin:1rem auto; }
.articles-controls-top .articles-pagination { display:flex; gap:0.5rem; align-items:center; }
.articles-controls-top .articles-page-size { text-align:right; }

/* Bottom pagination centered */
.articles-pagination--bottom { display:flex; justify-content:center; margin:1.25rem 0; gap:0.5rem; }

/* Bottom controls wrapper: pagination centered, page-size on the right */
.articles-controls-bottom { display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:1100px; margin:0.75rem auto 1.5rem; }
.articles-controls-bottom .articles-pagination { display:flex; gap:0.5rem; align-items:center; order:1; justify-content:flex-start; }
.articles-controls-bottom .articles-page-size { margin-left:1rem; order:2; text-align:right; }

/* Ensure top and bottom have identical ordering */
.articles-controls-top .articles-pagination, .articles-controls-bottom .articles-pagination { order:1; }
.articles-controls-top .articles-page-size, .articles-controls-bottom .articles-page-size { order:2; }

/* Page button styles */
.page-btn { background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--color-text-primary); padding:0.45rem 0.6rem; border-radius:8px; cursor:pointer; min-width:36px; }
.page-btn:hover { border-color: rgba(0,240,255,0.12); box-shadow: 0 6px 18px rgba(0,240,255,0.03); }
.page-btn[disabled] { opacity:0.45; cursor:default; }
.page-btn.active { background:var(--color-neon-cyan); color: #001; border-color: rgba(0,240,255,0.18); }

/* Page-size select compact */
.page-size-select { padding:0.3rem 0.5rem; border-radius:6px; background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--color-text-primary); }
.articles-page-size { font-size:0.95rem; color:var(--color-text-primary); }

/* Reduce H1 size on individual article pages to keep content compact */
.article-page .page__title { font-size: clamp(1.6rem,3.6vw,2.6rem); margin-bottom: var(--spacing-sm); }

/* Examples: standardizar diseño del botón y el contenedor "Show example" */
.example { margin: 1rem 0; }
.toggle-example {
    display: inline-block;
    padding: 0.55rem 0.9rem;
    border-radius: 8px;
    border: 1px solid rgba(0,240,255,0.12);
    background: transparent;
    color: var(--color-neon-cyan);
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s ease-in-out;
    box-shadow: 0 6px 20px rgba(0,240,255,0.03);
}
.toggle-example:hover { transform: translateY(-1px); background: rgba(0,240,255,0.03); border-color: rgba(0,240,255,0.18); }
.toggle-example:focus { outline: none; box-shadow: 0 0 0 6px rgba(0,240,255,0.06); }

.example-body {
    margin-top: 0.75rem;
    padding: 1rem;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));
    border: 1px solid rgba(255,255,255,0.03);
    color: var(--Color-text-primary, var(--color-text-primary));
}
.example-body[hidden] { display: none; }

@media (max-width: 600px) {
    .toggle-example { width: 100%; text-align: center; }
}