/* PF Resource Hub - frontend styles */
.pfhub-wrap{
  --pfhub-accent:#4f46e5;
  --pfhub-accent-2:color-mix(in srgb, var(--pfhub-accent) 16%, transparent);
  --pfhub-bg:#ffffff;
  --pfhub-card:#ffffff;
  --pfhub-head-bg:#f8fafc;
  --pfhub-card-2:#fbfcff;
  --pfhub-new-badge-bg:#16a34a;
  --pfhub-new-badge-text:#ffffff;
  --pfhub-access-free-bg:#dcfce7;
  --pfhub-access-free-text:#166534;
  --pfhub-access-premium-bg:#ede9fe;
  --pfhub-access-premium-text:#5b21b6;
  --pfhub-access-chip-size:12px;
  --pfhub-access-chip-weight:700;
  --pfhub-access-chip-radius:999px;
  --pfhub-filter-chip-radius:999px;
  --pfhub-meta-chip-radius:999px;
  --pfhub-text:#111827;
  --pfhub-muted:#6b7280;
  --pfhub-border:rgba(17,24,39,.10);
  --pfhub-border-strong:rgba(17,24,39,.16);
  --pfhub-shadow:0 18px 50px rgba(0,0,0,.06);
  --pfhub-radius:18px;
  --pfhub-radius-sm:14px;
  --pfhub-gap:16px;
  --pfhub-img-ratio:16/9;
  --pfhub-max-width:1200px;
  --pfhub-body-padding:14px;
  --pfhub-h2-size:28px;
  --pfhub-h2-weight:700;
  --pfhub-h2-color:var(--pfhub-text);
  --pfhub-sub-size:16px;
  --pfhub-sub-weight:400;
  --pfhub-sub-color:var(--pfhub-muted);
  --pfhub-card-title-size:16px;
  --pfhub-card-title-weight:700;
  --pfhub-card-title-color:var(--pfhub-text);
  --pfhub-card-text-size:14px;
  --pfhub-card-text-weight:400;
  --pfhub-card-text-color:var(--pfhub-muted);
  --pfhub-meta-size:12px;
  --pfhub-meta-weight:500;
  --pfhub-meta-color:var(--pfhub-muted);

  max-width:var(--pfhub-max-width);
  margin:0 auto;
  padding:28px 12px;
  color:var(--pfhub-text);
}

.pfhub-wrap[data-theme="dark"]{
  --pfhub-bg:#0b1220;
  --pfhub-card:#0f172a;
  --pfhub-card-2:#131d33;
  --pfhub-text:#e5e7eb;
  --pfhub-muted:rgba(229,231,235,.74);
  --pfhub-border:rgba(229,231,235,.12);
  --pfhub-border-strong:rgba(229,231,235,.18);
  --pfhub-shadow:0 18px 50px rgba(0,0,0,.35);
}

@media (prefers-color-scheme: dark){
  .pfhub-wrap[data-theme="auto"]{
    --pfhub-bg:#0b1220;
    --pfhub-card:#0f172a;
    --pfhub-card-2:#131d33;
    --pfhub-text:#e5e7eb;
    --pfhub-muted:rgba(229,231,235,.74);
    --pfhub-border:rgba(229,231,235,.12);
    --pfhub-border-strong:rgba(229,231,235,.18);
    --pfhub-shadow:0 18px 50px rgba(0,0,0,.35);
  }
}

.pfhub-wrap *{box-sizing:border-box}
.pfhub-wrap a{color:inherit;text-decoration:none}

.pfhub-head{
  position:relative;
  display:flex;
  gap:20px;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:16px;
  padding:24px;
  border:1px solid var(--pfhub-border);
  border-radius:calc(var(--pfhub-radius) + 4px);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--pfhub-accent) 8%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--pfhub-head-bg) 96%, #ffffff), color-mix(in srgb, var(--pfhub-head-bg) 88%, var(--pfhub-bg)));
  box-shadow:var(--pfhub-shadow);
  overflow:hidden;
}
.pfhub-head::after{
  content:"";
  position:absolute;
  inset:auto -60px -80px auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:color-mix(in srgb, var(--pfhub-accent) 7%, transparent);
  filter:blur(10px);
  pointer-events:none;
}
.pfhub-title{max-width:760px; position:relative; z-index:1}
.pfhub-h2{
  margin:0;
  font-size:clamp(22px,2.5vw,var(--pfhub-h2-size));
  font-weight:var(--pfhub-h2-weight);
  color:var(--pfhub-h2-color);
  line-height:1.05;
  letter-spacing:-.03em;
}
.pfhub-sub{
  margin:10px 0 0;
  color:var(--pfhub-sub-color);
  font-size:var(--pfhub-sub-size);
  font-weight:var(--pfhub-sub-weight);
  line-height:1.6;
  max-width:62ch;
}

.pfhub-search{min-width:260px;width:min(400px,42vw);position:relative;z-index:1}
.pfhub-search::before{
  content:"⌕";
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
  color:var(--pfhub-muted);
  pointer-events:none;
}
.pfhub-search-input{
  width:100%;
  padding:14px 16px 14px 42px;
  border:1px solid var(--pfhub-border);
  border-radius:999px;
  background:color-mix(in srgb, var(--pfhub-card) 88%, var(--pfhub-bg));
  color:var(--pfhub-text);
  outline:none;
  box-shadow:0 10px 30px rgba(0,0,0,.03);
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.pfhub-search-input::placeholder{color:color-mix(in srgb, var(--pfhub-muted) 88%, transparent)}
.pfhub-search-input:focus{
  border-color:color-mix(in srgb, var(--pfhub-accent) 62%, var(--pfhub-border));
  background:var(--pfhub-card);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--pfhub-accent) 14%, transparent), 0 16px 36px rgba(0,0,0,.06);
}

@media (max-width:720px){
  .pfhub-head{flex-direction:column;align-items:stretch;padding:20px}
  .pfhub-search{width:100%;min-width:0}
}

.pfhub-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:10px 0 20px;
  padding:4px 2px;
}
.pfhub-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:var(--pfhub-filter-chip-radius);
  border:1px solid var(--pfhub-border);
  background:linear-gradient(180deg, color-mix(in srgb, var(--pfhub-card) 96%, var(--pfhub-bg)), color-mix(in srgb, var(--pfhub-card) 90%, var(--pfhub-bg)));
  color:var(--pfhub-text);
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.pfhub-chip:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--pfhub-accent) 28%, var(--pfhub-border));
  box-shadow:0 12px 24px rgba(0,0,0,.04);
}
.pfhub-chip.is-active{
  border-color:color-mix(in srgb, var(--pfhub-accent) 72%, var(--pfhub-border));
  background:linear-gradient(180deg, color-mix(in srgb, var(--pfhub-accent) 16%, var(--pfhub-card)), color-mix(in srgb, var(--pfhub-accent) 9%, var(--pfhub-card)));
  box-shadow:0 12px 26px color-mix(in srgb, var(--pfhub-accent) 18%, transparent);
}

.pfhub-grid{display:grid;gap:var(--pfhub-gap);grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:560px){.pfhub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.pfhub-grid{grid-template-columns:repeat(var(--pfhub-cols,3),minmax(0,1fr))}}

.pfhub-card{
  position:relative;
  background:linear-gradient(180deg, var(--pfhub-card), color-mix(in srgb, var(--pfhub-card) 92%, var(--pfhub-card-2)));
  border:1px solid var(--pfhub-border);
  border-radius:var(--pfhub-radius);
  box-shadow:var(--pfhub-shadow);
  overflow:hidden;
  transform:translateZ(0);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pfhub-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
  pointer-events:none;
}
.pfhub-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--pfhub-accent) 28%, var(--pfhub-border-strong));
  box-shadow:0 20px 44px rgba(0,0,0,.10);
}
.pfhub-card-link{display:block;height:100%}
.pfhub-media{position:relative;width:100%;overflow:hidden}
.pfhub-media::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:36%;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.12));
  pointer-events:none;
}
.pfhub-img{
  width:100%;
  aspect-ratio:var(--pfhub-img-ratio);
  object-fit:cover;
  display:block;
  background:color-mix(in srgb, var(--pfhub-bg) 80%, var(--pfhub-card));
  transition:transform .35s ease;
}
.pfhub-card:hover .pfhub-img{transform:scale(1.03)}
.pfhub-img--placeholder{
  background:
    radial-gradient(circle at 18% 30%, color-mix(in srgb, var(--pfhub-accent) 25%, transparent), transparent 50%),
    radial-gradient(circle at 70% 40%, rgba(0,0,0,.06), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--pfhub-card) 80%, var(--pfhub-bg)), var(--pfhub-card));
}
.pfhub-badge{
  position:absolute;
  top:12px;
  left:12px;
  padding:7px 11px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(180deg, color-mix(in srgb, var(--pfhub-accent) 92%, #fff), var(--pfhub-accent));
  box-shadow:0 10px 22px color-mix(in srgb, var(--pfhub-accent) 28%, transparent);
  z-index:1;
}

.pfhub-body{padding:calc(var(--pfhub-body-padding) + 2px) var(--pfhub-body-padding) calc(var(--pfhub-body-padding) + 4px)}
.pfhub-h4{
  margin:0;
  font-size:var(--pfhub-card-title-size);
  font-weight:var(--pfhub-card-title-weight);
  color:var(--pfhub-card-title-color);
  line-height:1.32;
  letter-spacing:-.02em;
}
.pfhub-card:hover .pfhub-h4{color:color-mix(in srgb, var(--pfhub-card-title-color) 78%, var(--pfhub-accent))}
.pfhub-excerpt{
  margin:9px 0 0;
  color:var(--pfhub-card-text-color);
  line-height:1.62;
  font-size:var(--pfhub-card-text-size);
  font-weight:var(--pfhub-card-text-weight);
}
.pfhub-meta{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  color:var(--pfhub-meta-color);
  font-size:var(--pfhub-meta-size);
  font-weight:var(--pfhub-meta-weight);
}
.pfhub-meta-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:var(--pfhub-meta-chip-radius);
  border:1px solid var(--pfhub-border);
  background:linear-gradient(180deg, color-mix(in srgb, var(--pfhub-card) 94%, var(--pfhub-bg)), color-mix(in srgb, var(--pfhub-card) 86%, var(--pfhub-bg)));
}

.pfhub-empty{
  grid-column:1 / -1;
  padding:22px;
  border:1px dashed var(--pfhub-border-strong);
  border-radius:var(--pfhub-radius);
  background:linear-gradient(180deg, color-mix(in srgb, var(--pfhub-card) 92%, var(--pfhub-bg)), color-mix(in srgb, var(--pfhub-card) 84%, var(--pfhub-bg)));
  color:var(--pfhub-muted);
}
.pfhub-empty p{margin:0;line-height:1.6}

.pfhub-pagination{margin-top:20px;display:flex;justify-content:center}
.pfhub-pagination-inner{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--pfhub-border);
  border-radius:999px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--pfhub-card) 96%, var(--pfhub-bg)), color-mix(in srgb, var(--pfhub-card) 90%, var(--pfhub-bg)));
  box-shadow:0 10px 26px rgba(0,0,0,.04);
}
.pfhub-page{color:var(--pfhub-muted);font-size:13px;font-weight:600;min-width:52px;text-align:center}
.pfhub-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  border:1px solid var(--pfhub-border);
  background:var(--pfhub-card);
  transition:border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.pfhub-btn:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--pfhub-accent) 24%, var(--pfhub-border));
  box-shadow:0 10px 20px rgba(0,0,0,.05);
}
.pfhub-btn.is-disabled{opacity:.45;pointer-events:none}

.pfhub-section{margin-top:26px}
.pfhub-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--pfhub-border);
}
.pfhub-h3{margin:0;font-size:19px;line-height:1.2;letter-spacing:-.02em}
.pfhub-link{color:var(--pfhub-accent);font-size:13px;font-weight:700}
.pfhub-link:hover{text-decoration:underline}
.pfhub-footnote{
  margin:20px 0 0;
  padding:14px 16px;
  border:1px solid var(--pfhub-border);
  border-radius:var(--pfhub-radius-sm);
  background:linear-gradient(180deg, color-mix(in srgb, var(--pfhub-card) 94%, var(--pfhub-bg)), color-mix(in srgb, var(--pfhub-card) 88%, var(--pfhub-bg)));
  color:var(--pfhub-muted);
  font-size:13px;
  line-height:1.6;
}


.pfhub-badge-row{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.pfhub-badge--type{left:12px;right:auto}
.pfhub-badge--new{background:var(--pfhub-new-badge-bg);color:var(--pfhub-new-badge-text);box-shadow:0 10px 22px color-mix(in srgb, var(--pfhub-new-badge-bg) 26%, transparent)}
.pfhub-badge--top-right{top:12px;right:12px;left:auto;bottom:auto}
.pfhub-badge--top-left{top:12px;left:12px;right:auto;bottom:auto}
.pfhub-badge--bottom-right{bottom:12px;right:12px;left:auto;top:auto}
.pfhub-badge--bottom-left{bottom:12px;left:12px;right:auto;top:auto}
.pfhub-badge--inline{position:static;display:inline-flex;box-shadow:none;padding:6px 10px;font-size:11px}

.pfhub-access-chip{font-size:var(--pfhub-access-chip-size);font-weight:var(--pfhub-access-chip-weight);border-radius:var(--pfhub-access-chip-radius);}
.pfhub-access-chip--free{background:var(--pfhub-access-free-bg);color:var(--pfhub-access-free-text);border-color:color-mix(in srgb, var(--pfhub-access-free-text) 14%, transparent);}
.pfhub-access-chip--premium{background:var(--pfhub-access-premium-bg);color:var(--pfhub-access-premium-text);border-color:color-mix(in srgb, var(--pfhub-access-premium-text) 14%, transparent);}