/* Neurosalud - Resources library.
   Work item: resources-library-v1. Loads after professionals.css and reuses
   its tokens and the shared .nsx- page shell (hero, motif, CTA, footer);
   nothing here restyles the accepted Home, Professionals, header or footer.

   Proportions measured from prototype/refRecursos.png (1448x1086):
     filter panel      x 176-1254  y 304-408
     featured strip    x 176-1255  y 426-610   cards 451 / 296 / 302 + 16 gap
     main grid         x  87-1366  y 627-809   5 columns, ~6px gutters
     recommendation    x 211-1200  y 821-895
   The strip's 1.5 : 1 : 1 ratio and the 5-up grid are reproduced exactly. The
   reference draws the grid ~19% wider than the strip; that overhang cannot be
   reproduced on the accepted 1240px content measure (it would need 1471px), so
   both blocks share the 1240px measure already used by Home and Professionals. */

.nsr{
  --nsr-radius:18px;
  --nsr-card-radius:14px;
  --nsr-ink:var(--ns-text,#173F66);
  --nsr-blue:var(--ns-primary,#1764C0);
  --nsr-deep:var(--ns-primary-deep,#0B3D91);
  --nsr-teal:var(--ns-accent,#19A7D1);
  --nsr-line:var(--ns-line,#D9E8F2);
  --nsr-muted:var(--ns-muted,#667F96);
  --nsr-sans:var(--ns-sans,"Poppins",system-ui,sans-serif);
  --nsr-serif:"Lora",Georgia,serif;
  --nsr-action-h:44px;
  --nsr-grad:linear-gradient(94deg,var(--ns-cta-blue,#005FC3) 0%,#1487CE 58%,#31C1D0 100%);

  /* type tones, sampled from the reference pills */
  --nsr-tone:#5B7C9C;
  --nsr-tone-soft:rgba(91,124,156,.10);
}
.nsr-tone--book     { --nsr-tone:#1764C0; --nsr-tone-soft:rgba(23,100,192,.10); }
.nsr-tone--course   { --nsr-tone:#19A7D1; --nsr-tone-soft:rgba(25,167,209,.10); }
.nsr-tone--video    { --nsr-tone:#0B3D91; --nsr-tone-soft:rgba(11,61,145,.09); }
.nsr-tone--guide    { --nsr-tone:#0E7C93; --nsr-tone-soft:rgba(14,124,147,.10); }
.nsr-tone--podcast  { --nsr-tone:#31C1D0; --nsr-tone-soft:rgba(49,193,208,.12); }
.nsr-tone--technical{ --nsr-tone:#4A6FA5; --nsr-tone-soft:rgba(74,111,165,.10); }

.nsr .nsr-i{ width:18px; height:18px; flex:0 0 auto; }

.nsr .screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; margin:-1px; padding:0; border:0;
}

/* ==================== 1. FILTER PANEL ==================== */

.nsr-panel{
  background:#fff;
  border:1px solid var(--nsr-line);
  border-radius:var(--nsr-radius);
  box-shadow:0 10px 30px rgba(23,63,102,.05);
  padding:20px 24px 14px;
  margin:0 0 26px;
}

.nsr-panel__row{
  display:grid;
  /* Was a 5-column layout for search + 3 selects + actions; now just
     search, the one remaining "Tipo de recurso" select, and actions - so
     the search field gets more breathing room instead of the row reading
     lopsided with a lot of empty space on the right. */
  grid-template-columns:minmax(240px,1.6fr) minmax(180px,240px) auto;
  gap:16px 22px;
  align-items:end;
}

.nsr-field{ margin:0; display:flex; flex-direction:column; gap:7px; min-width:0; }

.nsr-field__label{
  font-family:var(--nsr-sans);
  font-size:13px;
  font-weight:500;
  color:var(--nsr-muted);
  line-height:1.2;
}
/* the search box carries its own placeholder, so its label is SR-only */
.nsr-field--search{ justify-content:flex-end; }
.nsr-field--search .nsr-field__label{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.nsr-search{ position:relative; display:block; }
.nsr-search .nsr-i{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  color:var(--nsr-blue); pointer-events:none; width:17px; height:17px;
}
.nsr .nsr-search__input,
.nsr-search__input{
  width:100%;
  font-family:var(--nsr-sans);
  font-size:14.5px;
  color:var(--nsr-ink);
  padding:12px 18px 12px 44px !important;
  border:1px solid var(--nsr-line);
  border-radius:999px;
  background:#fff;
  min-height:var(--nsr-action-h);
}
.nsr-search__input::placeholder{ color:#8FA6BC; }
/* Chrome's search clear affordance is inconsistent inside a pill; hide it and
   rely on the explicit Clear filters control. */
.nsr-search__input::-webkit-search-decoration,
.nsr-search__input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }

.nsr-select{ position:relative; display:block; }
.nsr-select .nsr-i{
  position:absolute; right:14px; top:50%;
  transform:translateY(-50%) rotate(90deg);
  color:var(--nsr-blue); pointer-events:none; width:15px; height:15px;
}
.nsr .nsr-select__input,
.nsr-select__input{
  width:100%;
  -webkit-appearance:none; appearance:none;
  font-family:var(--nsr-sans);
  font-size:14.5px;
  color:var(--nsr-ink);
  padding:12px 40px 12px 16px !important;
  border:1px solid var(--nsr-line);
  border-radius:10px;
  background:#fff;
  min-height:var(--nsr-action-h);
  cursor:pointer;
  text-overflow:ellipsis;
}

.nsr-panel__actions{
  margin:0;
  display:flex; align-items:center; gap:12px;
  align-self:end;
  min-height:var(--nsr-action-h);
}

/* No-JS submit. resources.js sets .nsr-panel--js once auto-submit is wired,
   which hides this control and reproduces the reference exactly; without JS
   the button stays and every filter remains operable. */
.nsr .nsr-apply{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--nsr-action-h); padding:0 20px;
  border:0; border-radius:999px;
  font-family:var(--nsr-sans); font-size:14px; font-weight:500; line-height:1;
  color:#fff; background:var(--nsr-grad); cursor:pointer;
  box-shadow:0 8px 20px rgba(0,95,195,.20);
}
.nsr-panel--js .nsr-apply{ display:none; }

.nsr-clear{
  display:inline-flex; align-items:center; gap:8px;
  min-height:var(--nsr-action-h); padding:0 6px;
  font-family:var(--nsr-sans); font-size:14px; font-weight:500;
  color:var(--nsr-blue); text-decoration:none; white-space:nowrap;
}
.nsr-clear .nsr-i{ width:16px; height:16px; }
.nsr-clear:hover,
.nsr-clear:focus-visible{ color:var(--nsr-deep); text-decoration:underline; }
/* Idle state: still reachable, but visibly not the active affordance. */
.nsr-clear.is-idle{ color:var(--nsr-muted); }

/* ---- type navigation: writes the same `tipo` value as the select ---- */

.nsr-types{ margin:16px 0 0; }
.nsr-types__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:stretch; gap:6px 26px;
}
.nsr-types__item{ margin:0; }
.nsr-types__link{
  display:inline-flex; align-items:center; gap:9px;
  min-height:var(--nsr-action-h); padding:0 2px;
  border-bottom:2px solid transparent;
  font-family:var(--nsr-sans); font-size:14.5px; font-weight:500;
  color:var(--nsr-muted); text-decoration:none;
  transition:color .2s ease, border-color .2s ease;
}
.nsr-types__link .nsr-i{ width:17px; height:17px; color:inherit; }
.nsr-types__link:hover{ color:var(--nsr-blue); }
.nsr-types__link.is-active{
  color:var(--nsr-blue);
  border-bottom-color:var(--nsr-blue);
}

/* ==================== 2. FEATURED STRIP ==================== */

.nsr-featured{ margin:0 0 20px; }
.nsr-featured__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;   /* measured 451 / 296 / 302 */
  gap:16px;
  align-items:stretch;
}

.nsr-feat{
  position:relative;
  overflow:hidden;
  border-radius:var(--nsr-radius);
  border:1px solid var(--nsr-line);
  min-height:208px;
  display:grid;
  background:linear-gradient(105deg,#EEF4FC 0%,#E7F0FA 100%);
}
.nsr-feat__body{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:24px 22px 20px;
  min-width:0;
}
.nsr-feat__kicker{
  font-family:var(--nsr-sans);
  font-size:11px; font-weight:600; letter-spacing:.11em;
  color:var(--nsr-blue);
  margin:0 0 10px;
}
.nsr-feat__title{
  font-family:var(--nsr-serif);
  font-size:20px; line-height:1.24; font-weight:500;
  color:var(--nsr-deep);
  margin:0 0 10px;
  overflow-wrap:anywhere;
  /* The reference sets 2-3 title lines per card. Clamping keeps the strip on
     one consistent band instead of letting the longest title set the height
     for all three; the full title is always the resource page's <h1>. */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}
.nsr-feat__summary{
  font-family:var(--nsr-sans);
  font-size:13px; line-height:1.58;
  color:var(--nsr-ink);
  margin:0 0 auto;
  max-width:34ch;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}
.nsr-feat__body .nsr-action,
.nsr-feat__body .nsr-action--static{ margin-top:16px; }

.nsr-feat__art{
  position:relative;
  min-width:0;
  overflow:hidden;
}

/* --- variant a: light background, artwork inset on the right --- */
.nsr-feat--light-split{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
.nsr-feat--light-split .nsr-feat__art{
  display:flex; align-items:center; justify-content:center;
  padding:18px 18px 18px 0;
}

/* --- variant b: content and media split edge to edge --- */
.nsr-feat--media-split{ grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr); }
.nsr-feat--media-split .nsr-feat__art{ padding:0; }

/* --- variant c: media fills the card, content sits over a scrim --- */
.nsr-feat--media-overlay{ grid-template-columns:100%; grid-template-rows:100%; }
.nsr-feat--media-overlay .nsr-feat__body,
.nsr-feat--media-overlay .nsr-feat__art{ grid-area:1/1; }
.nsr-feat--media-overlay .nsr-feat__art{ z-index:1; }
/* The scrim is unconditional, so white text stays legible over a light
   placeholder and over whatever image the client later uploads. */
.nsr-feat--media-overlay .nsr-feat__art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(11,38,66,.86) 0%,rgba(11,38,66,.66) 46%,rgba(11,38,66,.34) 100%);
}
.nsr-feat--media-overlay .nsr-feat__kicker{ color:#BFE0FF; }
.nsr-feat--media-overlay .nsr-feat__title{ color:#fff; }
.nsr-feat--media-overlay .nsr-feat__summary{ color:rgba(255,255,255,.88); }
.nsr-feat--media-overlay .nsr-action{ color:#fff; }
.nsr-feat--media-overlay .nsr-action:hover,
.nsr-feat--media-overlay .nsr-action:focus-visible{ color:#fff; }
.nsr-feat--media-overlay .nsr-action--static{ color:rgba(255,255,255,.82); }

.nsr-feat__play{
  position:absolute; z-index:2; right:22px; bottom:22px;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92);
  color:var(--nsr-deep);
  box-shadow:0 8px 22px rgba(11,38,66,.28);
}
.nsr-feat__play .nsr-i{ width:20px; height:20px; fill:currentColor; stroke:none; margin-left:2px; }

/* ==================== 3. ARTWORK ==================== */

.nsr-art{ position:relative; }
.nsr-art__img{
  display:block; width:100%; height:100%;
  object-fit:cover; border-radius:inherit;
}
.nsr-feat--light-split .nsr-art__img{ border-radius:12px; height:100%; }

/* Type-based placeholder shown until a featured image is assigned in wp-admin. */
.nsr-art__ph{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; min-height:72px;
  border-radius:12px;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 70%),
    var(--nsr-tone-soft);
  color:var(--nsr-tone);
  border:1px solid rgba(23,63,102,.06);
}
.nsr-art__ph .nsr-i{ width:34%; height:34%; max-width:44px; max-height:44px; opacity:.7; }
.nsr-feat--media-split .nsr-art__ph,
.nsr-feat--media-overlay .nsr-art__ph{ border-radius:0; border:0; }

/* ==================== 4. RESULTS + MAIN GRID ==================== */

.nsr-results{ margin:0; }
.nsr-results__count{
  font-family:var(--nsr-sans);
  font-size:13.5px; color:var(--nsr-muted);
  margin:0 0 14px;
}

.nsr-grid{
  list-style:none; margin:0 0 8px; padding:0;
  display:grid;
  /* Was a dense 5-up grid; the card itself is bigger now, so 4-up gives it
     room to breathe without the library feeling sparse. */
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}
.nsr-cell{ margin:0; display:flex; min-width:0; }

.nsr-card{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 120px;
  grid-template-rows:auto 1fr;
  column-gap:18px;
  padding:22px;
  min-height:250px;
  background:#fff;
  border:1px solid var(--nsr-line);
  border-radius:var(--nsr-card-radius);
  box-shadow:0 10px 26px rgba(23,63,102,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.nsr-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(23,63,102,.10);
}
.nsr-card__pill{
  grid-column:1; grid-row:1;
  justify-self:start;
  margin:0 0 12px;
  padding:5px 12px;
  border-radius:999px;
  font-family:var(--nsr-sans);
  font-size:11px; font-weight:600; letter-spacing:.08em; line-height:1.3;
  color:#fff; background:var(--nsr-tone);
  white-space:nowrap;
}
.nsr-card__art{
  grid-column:2; grid-row:1 / span 2;
  align-self:stretch;
  border-radius:14px;
  overflow:hidden;
  min-width:0;
}
.nsr-card__body{
  grid-column:1; grid-row:2;
  display:flex; flex-direction:column; align-items:flex-start;
  min-width:0;
}
.nsr-card__title{
  font-family:var(--nsr-serif);
  font-size:19px; line-height:1.3; font-weight:500;
  color:var(--nsr-deep);
  margin:0 0 6px;
  overflow-wrap:anywhere;
  /* the reference sets 2-line card titles */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.nsr-card__byline{
  font-family:var(--nsr-sans);
  font-size:12.5px; line-height:1.4; color:var(--nsr-muted);
  margin:0 0 9px;
}
.nsr-card__summary{
  font-family:var(--nsr-sans);
  font-size:13.5px; line-height:1.6; color:var(--nsr-ink);
  margin:0 0 auto;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;
}
.nsr-card__body .nsr-action,
.nsr-card__body .nsr-action--static{ margin-top:16px; }

/* ==================== 5. ACTION SYSTEM ====================
   One shared treatment for every destination mode, so a link, a download and a
   pending state are visually one family and every target clears 44px. */

.nsr-action{
  display:inline-flex; align-items:center; gap:8px;
  min-height:var(--nsr-action-h);
  font-family:var(--nsr-sans);
  font-size:13px; font-weight:500;
  color:var(--nsr-blue);
  text-decoration:none;
  overflow-wrap:anywhere;
}
.nsr-action .nsr-i{ width:16px; height:16px; transition:transform .22s ease; }
.nsr-action:hover,
.nsr-action:focus-visible{ color:var(--nsr-deep); text-decoration:underline; }
.nsr-action:hover .nsr-i--arrow{ transform:translateX(3px); }

.nsr-action__meta{
  font-size:11.5px; font-weight:400; color:var(--nsr-muted);
}
.nsr-feat--media-overlay .nsr-action__meta{ color:rgba(255,255,255,.75); }

/* Pending: honest, non-interactive, and never styled as a link. */
.nsr-action--static{
  display:inline-flex; align-items:center; gap:8px;
  min-height:var(--nsr-action-h);
  margin:0;
  font-family:var(--nsr-sans);
  font-size:13px; font-weight:500;
  color:var(--nsr-muted);
  cursor:default;
}
.nsr-action--static .nsr-i{ width:16px; height:16px; opacity:.75; }

/* ==================== 6. PAGINATION ==================== */

.nsr-pager{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:22px 0 0;
}
.nsr-pager__link,
.nsr-pager__num{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--nsr-action-h); min-width:var(--nsr-action-h);
  padding:0 16px;
  border:1px solid var(--nsr-line);
  border-radius:999px;
  background:#fff;
  font-family:var(--nsr-sans); font-size:14px; font-weight:500;
  color:var(--nsr-blue); text-decoration:none;
}
.nsr-pager__num{ padding:0 12px; }
.nsr-pager__link .nsr-i{ width:16px; height:16px; }
.nsr-pager__link:hover,
.nsr-pager__num:hover{ border-color:var(--nsr-blue); color:var(--nsr-deep); }
.nsr-pager__num.is-active{
  background:var(--nsr-grad);
  border-color:transparent;
  color:#fff;
}

/* ==================== 7. EMPTY STATE ==================== */

.nsr-empty{
  background:#fff;
  border:1px dashed var(--nsr-line);
  border-radius:var(--nsr-radius);
  padding:38px 28px;
  text-align:center;
}
.nsr-empty__title{
  font-family:var(--nsr-serif); font-size:19px; line-height:1.3; font-weight:500;
  color:var(--nsr-deep); margin:0 0 8px;
}
.nsr-empty__text{
  font-family:var(--nsr-sans); font-size:14.5px; line-height:1.6;
  color:var(--nsr-ink); margin:0 auto 18px; max-width:52ch;
}
.nsr-empty__clear{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--nsr-action-h); padding:0 22px;
  border-radius:999px;
  font-family:var(--nsr-sans); font-size:14px; font-weight:500;
  color:#fff; background:var(--nsr-grad); text-decoration:none;
  box-shadow:0 8px 20px rgba(0,95,195,.20);
}
.nsr-empty__clear:hover,
.nsr-empty__clear:focus-visible{ color:#fff; }

/* ==================== 8. PAGE SHELL (reuses .nsx-) ==================== */

/* The library sits on the same 1240px measure as Home and Professionals.
   Elementor pins .elementor-widget to max-width:100%, so the measure is applied
   as container padding rather than fought on the widget. */
.nsx-library{
  background:var(--ns-surface,#F5F6F8);
  --padding-block-start:8px;
  --padding-block-end:44px;
  --padding-inline-start:max(24px, calc((100% - 1240px) / 2));
  --padding-inline-end:max(24px, calc((100% - 1240px) / 2));
}

/* ==================== 9. FOCUS VISIBILITY ====================
   Blocksy forces outline-color:transparent !important on form controls, so the
   ring is drawn with box-shadow. */

.nsr a:focus-visible,
.nsr button:focus-visible{
  outline:2px solid var(--nsr-blue);
  outline-offset:3px;
  border-radius:6px;
}
.nsr .nsr-search__input:focus-visible,
.nsr .nsr-select__input:focus-visible,
.nsr .nsr-search__input:focus,
.nsr .nsr-select__input:focus{
  outline:none;
  border-color:var(--nsr-blue);
  box-shadow:0 0 0 3px rgba(23,100,192,.22);
}

/* ==================== 10. INDIVIDUAL RESOURCE ==================== */

.nsr-single{
  background:var(--ns-surface,#F5F6F8);
  padding:132px 24px 64px;
}
.nsr-single__inner{ max-width:920px; margin-inline:auto; }
.nsr-single__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  gap:32px;
  align-items:start;
  background:#fff;
  border:1px solid var(--nsr-line);
  border-radius:var(--nsr-radius);
  box-shadow:0 10px 30px rgba(23,63,102,.05);
  padding:30px 32px;
  margin:0 0 26px;
}
.nsr-single__pill{
  display:inline-block; margin:0 0 12px;
  padding:5px 12px; border-radius:999px;
  font-family:var(--nsr-sans); font-size:10.5px; font-weight:600; letter-spacing:.08em;
  color:#fff; background:var(--nsr-tone);
}
.nsr-single__title{
  font-family:var(--nsr-serif);
  font-size:clamp(26px,2.6vw,34px); line-height:1.2; font-weight:500;
  color:var(--nsr-deep); margin:0 0 10px;
  overflow-wrap:anywhere;
}
.nsr-single__byline{
  font-family:var(--nsr-sans); font-size:14px; color:var(--nsr-muted); margin:0 0 14px;
}
.nsr-single__summary{
  font-family:var(--nsr-sans); font-size:16px; line-height:1.62;
  color:var(--nsr-ink); margin:0 0 18px; max-width:52ch;
}
.nsr-single__art{
  border-radius:14px; overflow:hidden; aspect-ratio:3/4; min-height:0;
}
.nsr-single__body{
  background:#fff;
  border:1px solid var(--nsr-line);
  border-radius:var(--nsr-radius);
  padding:28px 32px;
  font-family:var(--nsr-sans); font-size:15.5px; line-height:1.7; color:var(--nsr-ink);
}
.nsr-single__body p{ margin:0 0 14px; }
.nsr-single__body p:last-child{ margin:0; }

.nsr-taxa{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:18px 0 0; padding:0; list-style:none;
}
.nsr-taxa__item{ margin:0; }
.nsr-taxa__link{
  display:inline-flex; align-items:center;
  min-height:32px; padding:0 12px;
  border:1px solid var(--nsr-line); border-radius:999px;
  font-family:var(--nsr-sans); font-size:12.5px; color:var(--nsr-blue);
  text-decoration:none; background:#fff;
}
.nsr-taxa__link:hover,
.nsr-taxa__link:focus-visible{ border-color:var(--nsr-blue); color:var(--nsr-deep); }

.nsr-single__back{
  display:inline-flex; align-items:center; gap:8px;
  min-height:var(--nsr-action-h);
  font-family:var(--nsr-sans); font-size:14px; font-weight:500;
  color:var(--nsr-blue); text-decoration:none;
  margin:0 0 18px;
}
.nsr-single__back:hover,
.nsr-single__back:focus-visible{ color:var(--nsr-deep); text-decoration:underline; }
.nsr-single__back .nsr-i{ width:16px; height:16px; }

/* Honest marker while the record is still demonstration content. */
.nsr-demo{
  display:flex; align-items:flex-start; gap:10px;
  margin:0 0 20px; padding:12px 16px;
  border:1px solid #E3D9B8; border-radius:12px;
  background:#FCF8EC;
  font-family:var(--nsr-sans); font-size:13.5px; line-height:1.5; color:#6B5B22;
}
.nsr-demo .nsr-i{ width:17px; height:17px; margin-top:2px; color:#A38B2F; }

.nsr-single a:focus-visible{ outline:2px solid var(--nsr-blue); outline-offset:3px; border-radius:6px; }

/* ==================== 11. RESPONSIVE ==================== */

/* --- 1024px: the strip drops to two rows, the grid to three columns --- */
@media (max-width:1160px){
  .nsr-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:1024px){
  .nsr-panel__row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 18px;
  }
  .nsr-field--search{ grid-column:1 / -1; }
  .nsr-panel__actions{ grid-column:1 / -1; justify-content:flex-start; }

  .nsr-featured__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .nsr-feat:first-child{ grid-column:1 / -1; }

  .nsr-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .nsr-card{ grid-template-columns:minmax(0,1fr) 96px; min-height:0; }

  .nsr-single__head{ grid-template-columns:minmax(0,1fr) 180px; }
  .nsr-single{ padding-top:116px; }
}

/* --- 767px and below: one column everywhere, nothing shrinks below target --- */
@media (max-width:767px){
  .nsr-panel{ padding:18px 16px 10px; }
  .nsr-panel__row{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .nsr-field--search,
  .nsr-panel__actions{ grid-column:auto; }
  .nsr-panel__actions{ flex-wrap:wrap; }

  /* horizontal type rail: scrolls inside itself, never widens the page */
  .nsr-types{ margin-top:12px; }
  .nsr-types__list{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:22px;
    padding-bottom:2px;
  }
  .nsr-types__list::-webkit-scrollbar{ display:none; }
  .nsr-types__link{ white-space:nowrap; }

  .nsr-featured__grid{ grid-template-columns:minmax(0,1fr); }
  .nsr-feat:first-child{ grid-column:auto; }
  .nsr-feat{ min-height:0; }
  .nsr-feat--light-split,
  .nsr-feat--media-split{ grid-template-columns:minmax(0,1fr); }
  .nsr-feat--light-split .nsr-feat__art,
  .nsr-feat--media-split .nsr-feat__art{ min-height:150px; padding:0 18px 18px; }
  .nsr-feat--media-split .nsr-feat__art{ padding:0; }
  .nsr-feat--media-overlay{ min-height:230px; }

  .nsr-grid{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .nsr-card{ grid-template-columns:minmax(0,1fr) 92px; padding:16px; }

  .nsr-single{ padding:104px 18px 52px; }
  .nsr-single__head{ grid-template-columns:minmax(0,1fr); gap:20px; padding:24px 20px; }
  .nsr-single__art{ aspect-ratio:16/10; }
  .nsr-single__body{ padding:22px 20px; }
}

@media (max-width:420px){
  .nsr-card{ grid-template-columns:minmax(0,1fr) 78px; }
  .nsr-feat__body{ padding:20px 18px 18px; }
}

/* ==================== 12. REDUCED MOTION ==================== */

@media (prefers-reduced-motion:reduce){
  .nsr .nsr-i,
  .nsr-action,
  .nsr-types__link{ transition:none !important; }
  .nsr-action:hover .nsr-i--arrow{ transform:none; }
}

/* ==================== 13. HERO AIR LINES ====================
   The Recursos hero adds the approved air-lines asset (media 31) on the right,
   which the Profesionales hero does not use. The shared .nsx-decor base tints
   the leaf art green-to-blue; the air lines are already blue, so the hue shift
   is neutralised here rather than changed on the shared rule. */

.nsx-hero > .nsx-decor--wind{
  right:-30px; top:58px;
  width:min(430px,31vw);
  aspect-ratio:1451/720;
  opacity:.40;
  filter:saturate(1.15) brightness(1.05);
  background-position:right center !important;
}
@media (max-width:1024px){
  .nsx-hero > .nsx-decor--wind{ width:min(330px,38vw); opacity:.3; }
}
@media (max-width:767px){
  .nsx-hero > .nsx-decor--wind{ display:none; }
}

/* ==================== PDF action pair + preview modal ====================
   Same pattern as Talleres: a "Ver PDF" trigger (opens an inline preview)
   alongside the existing plain download action, for download-mode
   resources only. */

.nsr-card__pdf{
  margin-top:16px; display:flex; flex-direction:column; align-items:flex-start; gap:11px;
}
.nsr-card__pdfaction{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--nsr-sans); font-size:14px; font-weight:600;
  border:0; background:none; padding:0; cursor:pointer;
  color:var(--nsr-blue);
  white-space:nowrap;
}
.nsr-card__pdfaction .nsr-i{ width:16px; height:16px; flex-shrink:0; }
.nsr-card__pdfaction:hover{ text-decoration:underline; color:var(--nsr-deep); }
.nsr-card__pdf .nsr-action--compact{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px;
  color:var(--nsr-blue); background:none; border:0; padding:0;
  min-height:0; box-shadow:none; border-radius:0;
  font-size:14px; font-weight:600;
  overflow-wrap:normal; word-break:normal;
}
.nsr-card__pdf .nsr-action--compact .nsr-action__meta{
  flex-basis:100%;
  font-weight:400; font-size:12px; color:var(--nsr-muted); white-space:nowrap;
}
.nsr-card__pdf .nsr-action--compact:hover{ color:var(--nsr-deep); text-decoration:underline; }

.nsr-modal{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.nsr-modal[hidden]{ display:none; }
.nsr-modal__overlay{
  position:absolute; inset:0;
  background:rgba(11,61,145,.55);
}
.nsr-modal__panel{
  position:relative; z-index:1;
  background:#fff; border-radius:16px;
  width:min(920px,100%); height:min(85vh,900px);
  box-shadow:0 30px 80px rgba(11,61,145,.35);
  overflow:hidden;
}
.nsr-modal__close{
  position:absolute; top:12px; right:12px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  background:#fff; border:1px solid var(--nsr-line);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--nsr-deep);
  box-shadow:0 6px 16px rgba(23,63,102,.14);
}
.nsr-modal__close .nsr-i{ width:16px; height:16px; }
.nsr-modal__close:hover{ background:var(--ns-surface,#F5F6F8); }
.nsr-modal__frame{ border:0; width:100%; height:100%; display:block; }

@media (max-width:600px){
  .nsr-modal{ padding:0; }
  .nsr-modal__panel{ width:100%; height:100%; border-radius:0; }
}

@media (prefers-reduced-motion:reduce){
  .nsr-card{ transition:none; }
  .nsr-card:hover{ transform:none; }
}