/**
 * Archivo : pages/resources.css
 * Scope   : Resources hub FE-02.
 * Función : Feed editorial con navegación lateral sticky y filtro por topics.
 */

.resource-browser { padding-block: clamp(2rem, 5vw, 4rem) clamp(4rem, 9vw, 7rem); }
.resource-browser__layout { display: grid; gap: var(--space-5); align-items: start; }
.resource-browser__sidebar { min-width: 0; }
.resource-browser__main { min-width: 0; }
.resource-navigation { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: linear-gradient(145deg, rgb(24 24 24 / 96%), rgb(9 9 9 / 98%)); }
.resource-navigation__branch + .resource-navigation__branch { border-block-start: 1px solid var(--color-border); }
.resource-navigation [data-resource-accordion] { display: flex; width: 100%; min-height: 3rem; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0.7rem 0; border: 0; background: transparent; color: var(--color-text); font-weight: 700; text-align: start; cursor: pointer; }
.resource-navigation [data-resource-accordion]::after { color: var(--color-accent); content: "+"; }
.resource-navigation [data-resource-accordion][aria-expanded="true"]::after { content: "−"; }
.resource-navigation [data-resource-accordion]:hover,
.resource-navigation [data-resource-accordion]:focus-visible { color: var(--color-accent); }
.resource-navigation ul { display: grid; gap: 0.2rem; margin: 0; padding: 0 0 var(--space-2); list-style: none; }
.resource-navigation li { min-width: 0; }
.resource-navigation a,
.resource-navigation__topic { display: inline-flex; min-height: 2.5rem; align-items: center; padding: 0.35rem 0; border: 0; background: transparent; color: var(--color-muted); font: inherit; font-size: 0.86rem; line-height: 1.35; text-align: start; text-decoration: none; cursor: pointer; }
.resource-navigation a:hover,
.resource-navigation a:focus-visible,
.resource-navigation__topic:hover,
.resource-navigation__topic:focus-visible,
.resource-navigation__topic.is-active,
.resource-navigation__topic[aria-pressed="true"] { color: var(--color-accent); }
.resource-navigation__topic.is-active,
.resource-navigation__topic[aria-pressed="true"] { font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.resource-navigation__family { margin: 0; padding: var(--space-2) 0 0; color: var(--color-text); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; }
.resource-navigation__nested { padding-inline-start: var(--space-3); border-inline-start: 1px solid var(--color-border); }
.resource-navigation .resource-navigation__family-toggle { min-height: 2.65rem; padding-block: 0.45rem; font-size: 0.9rem; }
.resource-navigation .resource-navigation__tool-list { padding-inline-start: var(--space-3); }
.resource-navigation__tool-list a { color: var(--color-accent); font-weight: 700; }
.resource-entry { position: relative; isolation: isolate; display: grid; min-height: clamp(18rem, 48vw, 25rem); align-content: end; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.resource-entry[hidden] { display: none; }
.resource-entry::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 20%) 5%, rgb(0 0 0 / 72%) 58%, rgb(0 0 0 / 96%) 100%); content: ""; }
.resource-entry__background,
.resource-entry__background-fallback { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; }
.resource-entry__background { object-fit: cover; transition: transform 260ms ease; }
.resource-entry__background-fallback { display: grid; place-items: center; background: radial-gradient(circle at 70% 18%, rgb(242 194 48 / 26%), transparent 36%), #111; color: var(--color-accent); }
.resource-entry__background-fallback svg { width: clamp(5rem, 14vw, 9rem); height: clamp(5rem, 14vw, 9rem); }
.resource-entry__content { display: grid; align-content: end; gap: var(--space-2); min-width: 0; padding: clamp(var(--space-4), 6vw, var(--space-6)); }
.resource-entry__content > * { margin: 0; }
.resource-entry :is(h2, h3) { max-width: 26ch; margin: 0; font-size: clamp(1.55rem, 4vw, 2.5rem); }
.resource-entry :is(h2, h3) a { color: var(--color-text); text-decoration-color: transparent; text-underline-offset: 0.16em; }
.resource-entry :is(h2, h3) a:hover,
.resource-entry :is(h2, h3) a:focus-visible { color: var(--color-accent); text-decoration-color: currentColor; }
.resource-entry__context { display: flex; flex-wrap: wrap; gap: 0.45rem; color: var(--color-accent); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.resource-entry__subtitle { max-width: 52rem; color: rgb(255 255 255 / 82%); font-size: clamp(1rem, 2vw, 1.12rem); font-weight: 600; }
.resource-entry__content .text-link { width: fit-content; }
.resource-entry:focus-within { border-color: var(--color-accent); }
.resource-entry:hover .resource-entry__background { transform: scale(1.025); }
.resource-filter__empty { color: var(--color-muted); }
.resource-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-block-start: var(--space-4); }
.resource-pagination[hidden] { display: none; }
.resource-pagination button { min-height: 2.75rem; padding: 0.55rem 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.resource-pagination button:hover:not(:disabled),
.resource-pagination button:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
.resource-pagination button:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 47.99rem) {
    .resource-browser__layout { display: block; }
    .resource-browser__sidebar { display: contents; }
    .resource-navigation {
        position: sticky;
        z-index: 3;
        align-self: start;
        margin-block-end: var(--space-5);
        inset-block-start: calc(var(--site-header-height) + env(safe-area-inset-top, 0px));
        max-height: calc(100vh - var(--site-header-height) - env(safe-area-inset-top, 0px) - var(--space-2));
        max-height: calc(100dvh - var(--site-header-height) - env(safe-area-inset-top, 0px) - var(--space-2));
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
    .resource-browser__advertising { margin-block-end: var(--space-5); }
}

@media (min-width: 48rem) {
    .resource-browser__layout { grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(var(--space-4), 4vw, var(--space-6)); }
    .resource-browser__main { grid-area: 1 / 1; }
    .resource-browser__sidebar {
        position: sticky;
        grid-area: 1 / 2;
        align-self: start;
        inset-block-start: calc(var(--site-header-height) + clamp(2rem, 5vw, 4rem));
        display: grid;
        gap: var(--space-4);
        max-height: none;
        overflow: visible;
    }
    .resource-browser__advertising { display: flex; justify-content: center; margin-block-start: 0; }
    .resource-entry { min-height: clamp(22rem, 42vw, 30rem); }
}

@media (prefers-reduced-motion: reduce) {
    .resource-entry__background { transition: none; }
    .resource-entry:hover .resource-entry__background { transform: none; }
}


@media (min-width: 75rem) {
    .resource-browser__layout { grid-template-columns: minmax(0, 1fr) 20rem; }
}