/* ===== PAGECARDS: fully namespaced, safe alongside legacy CSS ===== */
:root{
  --pc-font:"Monda",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,ui-sans-serif;
  --pc-bg:#f6f7f9;
  --pc-card:#ffffff;
  --pc-text:#111827;
  --pc-muted:#6b7280;
  --pc-border:#e5e7eb;
  --pc-brand:#950b0b;
  --pc-ink:#ffffff;
  --pc-radius:16px;
  --pc-shadow:0 10px 24px rgba(16,24,40,.08), 0 2px 8px rgba(16,24,40,.06);
}

/* Light global baseline — safe to keep. Remove if you want zero-global variant */
body{ margin:0; background:var(--pc-bg); color:var(--pc-text); font-family:var(--pc-font); }

/* Shell */
.pc-wrap{ background:var(--pc-bg); width:100%; }
.pc-main{ padding:24px 0 48px; width:100%; }
.pc-content{ width:100%; max-width:100%; margin:0; padding:0 12px; box-sizing:border-box; }
.pc-content-top{ margin:12px 0; }

/* Breadcrumbs */
.pc-breadcrumb{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  padding:.5rem 1rem; margin:0 0 8px;
  list-style:none; background:#fff; border:1px solid var(--pc-border); border-radius:.375rem;
}
.pc-breadcrumb-item{ font-size:.875em; color:#374151; font-weight:700; display:flex; align-items:center; }
.pc-breadcrumb-item a{ color:#6b7280; text-decoration:none; }
.pc-breadcrumb-item a:hover{ color:#003580; text-decoration:underline; }
.pc-breadcrumb-separator{ color:#9ca3af; padding:0 6px; }
@media (max-width:768px){
  .pc-breadcrumb{ overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
}

/* CTA bar */
.pc-cta-bar{ text-align:center; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:8px 0 4px; }

/* Grid */
.pc-grid{
  width:100%; margin:0; padding:clamp(12px,2.5vw,24px);
  background:var(--pc-bg); display:grid; box-sizing:border-box;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(12px,2vw,22px);
}
@media (max-width:1500px){ .pc-grid{ grid-template-columns:repeat(5,1fr);} }
@media (max-width:1180px){ .pc-grid{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:920px) { .pc-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:660px) { .pc-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:400px){ .pc-grid{ grid-template-columns:1fr;} }

/* Card */
.pc-card{
  background:var(--pc-card);
  border:1px solid var(--pc-border);
  border-radius:var(--pc-radius);
  box-shadow:var(--pc-shadow);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  min-height:100%;
}
.pc-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(16,24,40,.10),0 6px 14px rgba(16,24,40,.08);
  border-color:#d9dde3;
}

/* Media */
.pc-media{ display:block; position:relative; background:#fff; border-bottom:1px solid var(--pc-border); }
.pc-img{
  display:block; width:100%; height:auto;
  aspect-ratio:1/1; object-fit:contain; background:#fff;
}

/* Lazy fade */
.pc-lazy{ opacity:0; transition:opacity .35s ease; }
.pc-lazy.pc-loaded{ opacity:1; }

/* Body */
.pc-body{ padding:14px 14px 16px; text-align:center; }
.pc-title{ margin:10px 0 8px; font-size:clamp(16px,2.2vw,18px); line-height:1.3; font-weight:800; color:#111827; }
.pc-mute{ color:var(--pc-muted); font-weight:700; }

/* Actions / Buttons */
.pc-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
.pc-btn{
  display:inline-block; padding:.6rem 1rem; border-radius:9999px;
  border:2px solid var(--pc-brand); background:#fff; color:var(--pc-brand);
  font-weight:800; text-decoration:none;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .04s ease, box-shadow .2s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.pc-btn:hover{
  background:var(--pc-brand); color:var(--pc-ink); border-color:var(--pc-brand);
  box-shadow:0 6px 16px rgba(0,128,96,.25);
}
.pc-btn:active{ transform:translateY(1px); }
.pc-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(0,128,96,.35); }
.pc-btn--solid{ background:var(--pc-brand); color:var(--pc-ink); border-color:var(--pc-brand); }
