/* ==========================================================================
   Montealgos — resources directory pages (markup generated by
   montealgos-eng/src/main-seo.ts from src/content/<lang>/post/…/*.md).
   Loaded after style.css and built only from its tokens. The search box is
   hidden until its inline script runs; without JS the full list shows.
   ========================================================================== */

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

[hidden] { display: none !important; }

/* ---------- hero ---------- */
.rs-hero { min-height: auto; justify-content: flex-start; padding-bottom: clamp(40px, 8vh, 90px); }

.rs-crumbs ol { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; font: 500 10.5px var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.rs-crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--line-2); }
.rs-crumbs a { color: var(--muted); }
.rs-crumbs a:hover { color: var(--mint); }
.rs-crumbs [aria-current] { color: var(--text); }

.rs-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: clamp(28px, 5vw, 80px);
    align-items: center;
}
.rs-title {
    margin: .2em 0 .35em;
    font: 300 clamp(38px, 6.4vw, 96px)/.98 var(--f-display);
    letter-spacing: -.04em;
    background: linear-gradient(120deg, var(--text) 0%, var(--text) 45%, var(--cyan) 80%, var(--mint) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0;
    animation: fade 1.2s .1s forwards;
}
.rs-hero .hero-claim { max-width: 34ch; margin-bottom: .8em; }
.rs-hero-art { margin: 0; }
.rs-hero-art img {
    display: block;
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    filter: drop-shadow(0 30px 60px rgba(25, 211, 230, .12));
    opacity: 0;
    animation: fade 1.4s .35s forwards;
}

/* ---------- search ---------- */
.rs-tools {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 640px;
    margin: clamp(10px, 2vw, 24px) 0 clamp(26px, 4vw, 44px);
}
.rs-search {
    flex: 1;
    min-width: 0;
    padding: 14px 20px;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: var(--panel);
    color: var(--text);
    font: 400 15px var(--f-ui);
    outline: none;
    transition: border-color .3s, box-shadow .3s;
}
.rs-search::placeholder { color: var(--dim); }
.rs-search:focus-visible { border-color: rgba(62, 242, 176, .55); box-shadow: 0 0 0 4px rgba(62, 242, 176, .12); }
.rs-count { flex: 0 0 auto; font: 500 12px var(--f-mono); letter-spacing: .12em; color: var(--muted); }
.rs-empty { color: var(--muted); }

/* ---------- list ---------- */
.rs-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 26px);
}
.rs-list > li { display: flex; }
.rs-item { display: flex; flex-direction: column; width: 100%; scroll-margin-top: calc(var(--nav-h) + 24px); }
.rs-item:target::before { background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--grad) border-box; }
.rs-num { font: 500 12px var(--f-mono); letter-spacing: .12em; color: var(--dim); }
.rs-item h2 { margin: 0 0 .55em; font: 500 clamp(18px, 1.6vw, 21px)/1.25 var(--f-display); letter-spacing: -.01em; }
.rs-anchor { color: var(--text); }
.rs-anchor:hover { color: var(--mint); }
.rs-item p { color: var(--muted); font-size: 14.5px; }
.rs-item code { padding: 1px 6px; border-radius: 6px; background: rgba(120, 170, 255, .1); font: 400 .9em var(--f-mono); color: var(--text); }
.rs-item em { color: var(--text); }
.rs-visit {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin: auto 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.rs-item p.rs-visit { margin-top: auto; }
.rs-visit a { position: relative; z-index: 1; font-weight: 500; }
.rs-visit a i { display: inline-block; font-style: normal; transition: translate .4s var(--ease-out); }
.rs-visit a:hover i { translate: 3px -3px; }
.rs-host { font: 400 11.5px var(--f-mono); letter-spacing: .06em; color: var(--dim); overflow-wrap: anywhere; }

.rs-directory .disclaimer { margin-top: clamp(34px, 5vw, 60px); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .rs-hero-grid { grid-template-columns: 1fr; }
    .rs-hero-art { order: -1; }
    .rs-hero-art img { max-width: 200px; margin-inline: 0; }
    .rs-list { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .rs-tools { flex-direction: column; align-items: stretch; }
    .rs-count { align-self: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
    .rs-title, .rs-hero-art img { opacity: 1; animation: none; }
}