/* PF Resource Hub - styles are intentionally encapsulated */
.pfhub-wrap{
  --pfhub-accent: #4f46e5;
  --pfhub-bg: #ffffff;
  --pfhub-card: #ffffff;
  --pfhub-text: #111827;
  --pfhub-muted: #6b7280;
  --pfhub-border: rgba(17,24,39,.10);
  --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;

  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 10px;
  color: var(--pfhub-text);
}

.pfhub-wrap[data-theme="dark"]{
  --pfhub-bg: #0b1220;
  --pfhub-card: #0f172a;
  --pfhub-text: #e5e7eb;
  --pfhub-muted: rgba(229,231,235,.70);
  --pfhub-border: rgba(229,231,235,.12);
  --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-text: #e5e7eb;
    --pfhub-muted: rgba(229,231,235,.70);
    --pfhub-border: rgba(229,231,235,.12);
    --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{
  display: flex;
  gap: 14px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
}

.pfhub-h2{
  margin: 0;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.1;
}
.pfhub-sub{
  margin: 6px 0 0 0;
  color: var(--pfhub-muted);
  line-height: 1.4;
}

.pfhub-search{
  min-width: 240px;
  width: min(360px, 40vw);
}
.pfhub-search-input{
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--pfhub-border);
  border-radius: 999px;
  background: var(--pfhub-card);
  color: var(--pfhub-text);
  outline: none;
}
.pfhub-search-input:focus{
  border-color: color-mix(in srgb, var(--pfhub-accent) 60%, var(--pfhub-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pfhub-accent) 18%, transparent);
}

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

.pfhub-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 16px 0;
}

.pfhub-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--pfhub-border);
  background: color-mix(in srgb, var(--pfhub-card) 92%, var(--pfhub-bg));
  color: var(--pfhub-text);
  font-size: 14px;
}
.pfhub-chip.is-active{
  border-color: color-mix(in srgb, var(--pfhub-accent) 70%, var(--pfhub-border));
  box-shadow: 0 10px 22px 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{
  background: var(--pfhub-card);
  border: 1px solid var(--pfhub-border);
  border-radius: var(--pfhub-radius);
  box-shadow: var(--pfhub-shadow);
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.pfhub-card:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--pfhub-accent) 24%, var(--pfhub-border));
}
.pfhub-card-link{ display: block; height: 100%; }

.pfhub-media{
  position: relative;
  width: 100%;
}
.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));
}
.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: 6px 10px;
  font-size: 12px;
  border-radius: 999px;
  color: #fff;
  background: var(--pfhub-accent);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--pfhub-accent) 28%, transparent);
}

.pfhub-body{
  padding: 14px 14px 16px 14px;
}
.pfhub-h4{
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}
.pfhub-excerpt{
  margin: 8px 0 0 0;
  color: var(--pfhub-muted);
  line-height: 1.45;
  font-size: 14px;
}
.pfhub-meta{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--pfhub-muted);
  font-size: 12px;
}
.pfhub-meta-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--pfhub-border);
  background: color-mix(in srgb, var(--pfhub-card) 90%, var(--pfhub-bg));
}

.pfhub-empty{
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed var(--pfhub-border);
  border-radius: var(--pfhub-radius);
  background: color-mix(in srgb, var(--pfhub-card) 86%, var(--pfhub-bg));
  color: var(--pfhub-muted);
}

.pfhub-pagination{
  margin-top: 16px;
  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: color-mix(in srgb, var(--pfhub-card) 92%, var(--pfhub-bg));
}
.pfhub-page{ color: var(--pfhub-muted); font-size: 13px; }

.pfhub-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 14px;
  border: 1px solid var(--pfhub-border);
  background: var(--pfhub-card);
}
.pfhub-btn:hover{
  border-color: color-mix(in srgb, var(--pfhub-accent) 24%, var(--pfhub-border));
}
.pfhub-btn.is-disabled{
  opacity: .45;
  pointer-events: none;
}

.pfhub-section{ margin-top: 18px; }
.pfhub-section-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 10px 0 10px 0;
}
.pfhub-h3{
  margin: 0;
  font-size: 18px;
}
.pfhub-link{
  color: var(--pfhub-accent);
  font-size: 13px;
  font-weight: 600;
}

.pfhub-footnote{
  margin: 16px 0 0 0;
  font-size: 12px;
  color: var(--pfhub-muted);
}