/* Resources library page */
.res-section{ padding-top:44px; }
.res-toolbar{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.res-search{
  flex:1 1 320px; display:flex; align-items:center; gap:10px; padding:0 16px;
  background:var(--panel); border:1px solid rgba(142,181,198,.25); border-radius:14px; color:var(--primary-200);
  transition:border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.res-search:focus-within{ border-color:var(--primary-300); box-shadow:0 0 0 4px rgba(28,108,143,.25); }
.res-search input{ flex:1; min-width:0; height:52px; border:0; outline:0; background:transparent; color:#fff; font:inherit; font-size:16px; }
.res-search input::placeholder{ color:var(--primary-200); opacity:.8; }
#res-product{
  flex:0 1 230px; height:54px; padding:0 16px; border-radius:14px; font:inherit; font-size:16px;
  background:var(--panel); color:#fff; border:1px solid rgba(142,181,198,.25); cursor:pointer;
}
#res-product:focus-visible{ outline:3px solid var(--primary-300); outline-offset:2px; }

.res-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.res-chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--primary-100);
  background:transparent; border:1px solid rgba(142,181,198,.3);
  transition:background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.res-chip span{ font-size:13px; padding:1px 8px; border-radius:999px; background:rgba(142,181,198,.15); }
.res-chip:hover{ border-color:var(--primary-100); color:#fff; }
.res-chip[aria-pressed="true"]{ background:var(--primary); border-color:var(--primary); color:#fff; }
.res-chip[aria-pressed="true"] span{ background:rgba(255,255,255,.2); }
.res-count{ margin:0 0 18px; color:var(--primary-200); font-size:15px; }

.res-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:20px; }
.res-card{
  display:flex; flex-direction:column; gap:10px; padding:26px; border-radius:22px;
  background:var(--panel); border:1px solid rgba(142,181,198,.2);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  animation:resIn .7s var(--ease-out) both;
}
@keyframes resIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.res-card:hover{ transform:translateY(-4px); border-color:rgba(142,181,198,.5); box-shadow:0 0 34px rgba(28,108,143,.3); }
.res-card-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px; }
.res-icon{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--primary); color:#fff;
  transition:transform .4s var(--ease); }
.res-icon svg{ width:62%; height:62%; }
.res-card:hover .res-icon{ transform:rotate(-8deg) scale(1.06); }
.res-type{ font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--primary-200); }
.res-card h3{ margin:0; font-size:19px; line-height:1.3; color:#fff; transition:transform .4s var(--ease), color .4s var(--ease); }
.res-card:hover h3{ transform:translateX(4px); color:var(--primary-100); }
.res-product{ margin:0; font-size:14px; font-weight:700; color:var(--primary-300); }
.res-desc{ margin:0; font-size:15.5px; line-height:1.55; color:var(--primary-200); }
.res-foot{ margin-top:auto; padding-top:14px; border-top:1px solid rgba(142,181,198,.18); display:flex; flex-direction:column; gap:12px; }
.res-meta{ font-size:14px; color:var(--primary-200); }
.res-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.res-btn{ padding:11px 18px; gap:8px; }

.res-empty{ text-align:center; padding:48px 20px; border:1px dashed rgba(142,181,198,.3); border-radius:22px; color:var(--primary-200); }
.res-empty h3{ color:#fff; margin:12px 0 6px; }
.res-empty-actions{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:16px; }

.cta-inner{ text-align:center; max-width:720px; margin-inline:auto; }
.res-cta-actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:22px; }
@media (prefers-reduced-motion:reduce){ .res-card{ animation:none; } }

/* ---------- Cards with a real cover ---------- */
.res-card.has-cover{ padding:0; overflow:hidden; gap:0; }
.res-body{ display:flex; flex-direction:column; gap:10px; flex:1; }
.res-card.has-cover .res-body{ padding:22px 24px 24px; }
.res-cover{
  position:relative; display:block; width:100%; aspect-ratio:16/10; padding:0; border:0; cursor:pointer; overflow:hidden;
  background:linear-gradient(180deg, #123e57, #0b2440);
}
.res-cover img{
  position:absolute; left:50%; top:18px; width:58%; height:auto; transform:translateX(-50%);
  border-radius:6px; box-shadow:0 18px 40px -12px rgba(0,0,0,.6);
  transition:transform .6s var(--ease-out);
}
.res-card:hover .res-cover img{ transform:translateX(-50%) translateY(-6px) rotate(-1.5deg) scale(1.03); }
.res-type-badge{ position:absolute; top:12px; left:12px; padding:4px 10px; border-radius:999px; background:rgba(8,26,56,.85); color:var(--primary-100); }
.res-cover-hint{
  position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
  background:var(--primary); color:#fff; font-family:var(--font-display); font-weight:600; font-size:14px;
  opacity:0; transform:translateY(6px); transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.res-card:hover .res-cover-hint, .res-cover:focus-visible .res-cover-hint{ opacity:1; transform:none; }
.res-cover:focus-visible{ outline:3px solid var(--primary-300); outline-offset:-3px; }

/* ---------- Page viewer ---------- */
html.rv-open{ overflow:hidden; }
.res-viewer{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:2vh 2vw; }
.res-viewer[hidden]{ display:none; }
.rv-backdrop{ position:absolute; inset:0; background:rgba(4,12,28,.88); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .3s var(--ease-out); }
.rv-panel{
  position:relative; width:min(1100px, 100%); height:100%; display:flex; flex-direction:column; gap:12px;
  opacity:0; transform:translateY(18px) scale(.98); transition:opacity .35s var(--ease-out), transform .45s var(--ease-out);
}
.res-viewer.is-open .rv-backdrop, .res-viewer.is-open .rv-panel{ opacity:1; transform:none; }
.rv-bar{ display:flex; align-items:center; gap:14px; color:#fff; }
.rv-bar h2{ flex:1; min-width:0; margin:0; font-size:18px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rv-count{ color:var(--primary-200); font-size:15px; white-space:nowrap; }
.rv-close{ width:44px; height:44px; flex:none; border-radius:12px; border:1px solid rgba(142,181,198,.35); background:transparent; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.rv-close:hover{ background:rgba(255,255,255,.1); }
.rv-stage{ position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; gap:12px; }
.rv-page{ height:100%; flex:1; min-width:0; display:flex; align-items:center; justify-content:center; }
.rv-page img{ max-width:100%; max-height:100%; border-radius:8px; box-shadow:0 30px 70px -20px rgba(0,0,0,.8); background:#fff; }
.rv-page img.rv-in{ animation:rvSlide .45s var(--ease-out); }
@keyframes rvSlide{ from{ opacity:0; transform:translateX(calc(var(--dir,1) * 28px)); } to{ opacity:1; transform:none; } }
.rv-nav{ flex:none; width:52px; height:52px; border-radius:50%; border:1px solid rgba(142,181,198,.35); background:rgba(14,36,56,.8); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .25s, opacity .25s; }
.rv-nav:hover:not(:disabled){ background:var(--primary); }
.rv-nav:disabled{ opacity:.3; cursor:default; }
.rv-thumbs{ display:flex; gap:8px; overflow-x:auto; padding:4px 2px 6px; scrollbar-width:thin; justify-content:safe center; }
.rv-thumb{ flex:none; width:58px; padding:0; border:2px solid transparent; border-radius:6px; overflow:hidden; cursor:pointer; background:#fff; opacity:.55; transition:opacity .25s, border-color .25s; }
.rv-thumb img{ display:block; width:100%; height:auto; }
.rv-thumb:hover{ opacity:.9; }
.rv-thumb[aria-current="page"]{ opacity:1; border-color:var(--primary-300); }
@media (max-width:640px){
  .rv-nav{ display:none; }
  .rv-count{ display:none; }
  .rv-bar .rv-dl{ padding:10px 12px; font-size:0; gap:0; }
  .rv-bar .rv-dl svg{ width:20px; height:20px; }
}
@media (prefers-reduced-motion:reduce){ .rv-page img.rv-in{ animation:none; } }

/* ---------- Tighter page header (2026-10-08) ----------
   The generic page hero leaves 150px above / 64px below and wraps the title onto two lines; on a library page
   the toolbar is the point, so the heading block is compact and the toolbar sits right under it. */
.res-hero{ padding:112px 0 14px; }
.res-hero .breadcrumb{ margin-bottom:10px; }
.res-hero .eyebrow{ margin-bottom:8px; }
.res-hero h1{ max-width:none; font-size:clamp(1.7rem, 3vw, 2.4rem); margin-bottom:10px; }
.res-hero .lead{ max-width:760px; margin-bottom:0; }
@media (max-width:640px){
  .res-hero{ padding:96px 0 6px; }
}