/* =======================================================
   POCG.NET — GUIDES SURFACE
   Guides hub, article guides, and How to Play system guides.
   Loaded only when one of those surfaces renders.
   ======================================================= */

.pocg-guides-wrap,
.pocg-guide-single,
.pocg-htp-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--pocg-max-width);
  margin: 0 auto;
  padding: 32px 20px 72px;
}

.pocg-guides-wrap *,
.pocg-guide-single *,
.pocg-htp-wrap * {
  box-sizing: border-box;
}

/* Shared open lead composition. */
.pocg-guides-wrap .pocg-ci-header {
  max-width: 820px;
  margin: 0 0 40px;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--pocg-divider);
}

.pocg-guides-wrap .pocg-ci-eyebrow,
.pocg-guide-eyebrow,
.pocg-htp-eyebrow {
  margin: 0 0 12px;
  color: var(--fam, var(--pocg-teal-hi, var(--pocg-teal)));
  font: 700 12px/1.35 var(--pocg-font-mono);
  letter-spacing: .13em !important;
  text-transform: uppercase;
}

.pocg-guides-wrap .pocg-ci-h1,
.pocg-guide-h1,
.pocg-htp-h1 {
  margin: 0;
  color: var(--pocg-text-heading);
  font-family: var(--pocg-font-ui);
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.035em !important;
  text-transform: none;
  text-wrap: balance;
}

.pocg-guides-wrap .pocg-ci-desc,
.pocg-guide-deck,
.pocg-htp-lead {
  max-width: 820px;
  margin: 20px 0 0;
  color: var(--pocg-text-soft);
  font: 400 20px/1.6 var(--pocg-font-body);
}

/* Hub families: broad editorial rows, not little dashboard tiles. */
.pocg-guides-families {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.pocg-guides-fc {
  min-width: 0;
  padding: 24px 24px 22px;
  border: 1px solid var(--pocg-border-subtle);
  border-top: 3px solid var(--fam, var(--pocg-teal));
  border-left-width: 1px;
  background: var(--pocg-surface-alt);
  box-shadow: none;
  transition: border-color .15s ease, background .15s ease;
}

.pocg-guides-fc:hover,
.pocg-guides-fc:focus-within {
  transform: none;
  border-color: var(--fam, var(--pocg-teal));
  background: var(--pocg-surface-mid);
}

.pocg-guides-fc-top {
  align-items: flex-start;
  gap: 16px;
}

.pocg-guides-fc-label {
  margin: 0;
  color: var(--pocg-text-heading);
  font-size: 24px;
  line-height: 1.15;
}

.pocg-guides-fc-label a {
  color: inherit;
  text-decoration: none;
}

.pocg-guides-fc-label a:hover,
.pocg-guides-fc-label a:focus-visible {
  color: var(--fam, var(--pocg-teal-hi, var(--pocg-teal)));
}

.pocg-guides-fc-count,
.pocg-guides-fc-all {
  color: var(--fam, var(--pocg-teal));
  font: 700 12px/1.35 var(--pocg-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pocg-guides-fc-all {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 2px;
  text-decoration: none;
}

.pocg-guides-fc-blurb {
  margin: 12px 0 18px;
  color: var(--pocg-text-soft);
  font: 400 16px/1.65 var(--pocg-font-body);
}

.pocg-guides-fc-list {
  gap: 0;
  margin: 0 0 18px;
  border-top: 1px solid var(--pocg-divider);
}

.pocg-guides-families > .pocg-guides-fc:only-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.pocg-guides-families > .pocg-guides-fc:only-child .pocg-guides-fc-list {
  align-self: stretch;
  margin: 0;
}

.pocg-guides-fc-item {
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--pocg-divider);
  color: var(--pocg-text);
  font-size: 15px;
  line-height: 1.45;
}

/* Filtered family view and article cards. */
.pocg-guides-filterhead {
  max-width: 820px;
  margin: 0 0 32px;
  padding: 0 0 24px;
  border: 0;
  border-bottom: 1px solid var(--pocg-divider);
  background: transparent;
}

.pocg-guides-clear,
.pocg-guide-back a {
  color: var(--pocg-text-soft);
  font: 700 13px/1.4 var(--pocg-font-mono);
  text-underline-offset: 4px;
}

.pocg-guides-filter-label {
  margin: 12px 0 8px;
  color: var(--pocg-text-heading);
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -.03em;
}

.pocg-guides-filter-blurb {
  max-width: 720px;
  color: var(--pocg-text-soft);
  font: 400 18px/1.6 var(--pocg-font-body);
}

.pocg-guides-grid,
.pocg-htp-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.pocg-guides-card,
.pocg-htp-card {
  min-width: 0;
  padding: 0 0 20px;
  overflow: hidden;
  border: 1px solid var(--pocg-border-subtle);
  border-top: 3px solid var(--fam, var(--pocg-teal));
  border-left-width: 1px;
  background: var(--pocg-surface-alt);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}

.pocg-guides-card:hover,
.pocg-guides-card:focus-visible,
.pocg-htp-card:hover,
.pocg-htp-card:focus-visible {
  transform: none;
  border-color: var(--fam, var(--pocg-teal));
  background: var(--pocg-surface-mid);
}

.pocg-guides-card-img,
.pocg-htp-card-art {
  height: 180px;
  margin: 0 0 18px;
  border: 0;
  border-bottom: 1px solid var(--pocg-divider);
  background-position: center;
  background-size: cover;
  filter: none;
}

.pocg-guides-card-fam,
.pocg-htp-card-kick {
  margin: 0;
  padding: 0 20px;
  color: var(--fam, var(--pocg-teal-hi, var(--pocg-teal)));
  font: 700 12px/1.35 var(--pocg-font-mono);
  letter-spacing: .1em !important;
  text-transform: uppercase;
}

.pocg-guides-card-title,
.pocg-htp-card-name {
  margin: 8px 0 0;
  padding: 0 20px;
  color: var(--pocg-text-heading);
  font: 800 23px/1.18 var(--pocg-font-ui);
  letter-spacing: -.015em;
  text-transform: none;
}

.pocg-guides-card-deck,
.pocg-htp-card-blurb {
  margin: 10px 0 0;
  padding: 0 20px;
  color: var(--pocg-text-soft);
  font: 400 16px/1.6 var(--pocg-font-body);
}

.pocg-guides-card-more,
.pocg-htp-card-cta {
  margin-top: auto;
  padding: 18px 20px 0;
  color: var(--fam, var(--pocg-teal-hi, var(--pocg-teal)));
  font: 700 12px/1.35 var(--pocg-font-mono);
  letter-spacing: .08em !important;
  text-transform: uppercase;
}

/* Article-guide single. */
.pocg-guide-single {
  max-width: var(--pocg-max-width);
}

.pocg-guide-meta,
.pocg-htp-meta {
  max-width: 820px;
  margin: 20px 0 28px;
  padding: 12px 0;
  border-top: 1px solid var(--pocg-divider);
  border-bottom: 1px solid var(--pocg-divider);
  color: var(--pocg-text-muted);
  font: 400 12px/1.5 var(--pocg-font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.pocg-guide-pick,
.pocg-htp-pick {
  max-width: 920px;
  margin: 0 0 28px;
  padding: 20px 22px;
  border: 1px solid var(--pocg-border-subtle);
  border-left: 4px solid var(--fam, var(--pocg-teal));
  background: var(--pocg-surface-alt);
}

.pocg-guide-pick-label,
.pocg-htp-pick-label {
  margin: 0 0 8px;
  color: var(--fam, var(--pocg-teal-hi, var(--pocg-teal)));
  font: 700 12px/1.35 var(--pocg-font-mono);
}

.pocg-guide-pick-body,
.pocg-htp-pick-body {
  color: var(--pocg-text-heading);
  font: 700 19px/1.55 var(--pocg-font-ui);
}

.pocg-guide-noaff {
  max-width: 920px;
  margin: 0 0 28px;
  padding: 13px 16px;
  border: 1px solid var(--pocg-teal-border);
  background: var(--pocg-teal-dim);
  color: var(--pocg-text);
  font-size: 15px;
  line-height: 1.55;
}

.pocg-guide-body {
  max-width: 780px;
  color: var(--pocg-text);
  font: 400 18px/1.82 var(--pocg-font-body);
}

.pocg-guide-body p {
  margin: 0 0 1.25em;
  color: var(--pocg-text);
  font-size: 18px;
  line-height: 1.82;
}

.pocg-guide-step,
.pocg-guide-rel {
  max-width: 920px;
}

.pocg-guide-step-title { font-size: 18px; }
.pocg-guide-step-text { color: var(--pocg-text); font-size: 16px; line-height: 1.7; }
.pocg-guide-rel-item { min-height: 44px; padding: 10px 12px; font-size: 15px; }

/* How to Play guide single. */
.pocg-htp-hero {
  height: clamp(220px, 34vw, 390px);
  margin: 0 0 32px;
  border: 1px solid var(--pocg-border-subtle);
  border-bottom: 3px solid var(--pocg-teal);
  background-position: center;
  filter: none;
}

.pocg-htp-h1 span { color: inherit; }

.pocg-htp-xlinks {
  margin: 24px 0 40px;
  gap: 10px;
}

.pocg-htp-xlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid var(--pocg-border-subtle);
  color: var(--pocg-teal-hi, var(--pocg-teal));
  font: 700 12px/1.3 var(--pocg-font-mono);
}

.pocg-htp-secbar {
  margin: 42px 0 0;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 2px solid var(--pocg-teal);
  background: transparent;
}

.pocg-htp-sectitle {
  color: var(--pocg-text-heading);
  font: 700 15px/1.35 var(--pocg-font-mono);
}

.pocg-htp-secmeta {
  color: var(--pocg-text-muted);
  font: 400 12px/1.35 var(--pocg-font-mono);
}

.pocg-htp-routes {
  gap: 20px;
  margin: 20px 0 36px;
  border: 0;
  background: transparent;
}

.pocg-htp-route {
  padding: 22px;
  border: 1px solid var(--pocg-border-subtle);
  border-top: 3px solid var(--pocg-htp-ac);
  background: var(--pocg-surface-alt);
}

.pocg-htp-route-h {
  margin: 0 0 12px;
  font-size: 14px;
}

.pocg-htp-route-body,
.pocg-htp-route-body p {
  color: var(--pocg-text);
  font: 400 17px/1.72 var(--pocg-font-body);
}

.pocg-htp-cmp-wrap,
.pocg-guide-cmp-wrap {
  margin: 20px 0 36px;
  border-color: var(--pocg-border-subtle);
}

.pocg-htp-cmp,
.pocg-guide-cmp { font-size: 15px; }
.pocg-htp-cmp th,
.pocg-guide-cmp th { font-size: 12px; padding: 12px; }
.pocg-htp-cmp td,
.pocg-guide-cmp td { padding: 13px 12px; line-height: 1.5; }

.pocg-htp-avoid {
  margin: 20px 0 36px;
  padding: 18px 20px;
  border-color: var(--pocg-border-subtle);
  border-left-color: var(--pocg-red-text);
  background: var(--pocg-surface-alt);
  color: var(--pocg-text);
  font: 400 17px/1.7 var(--pocg-font-body);
}

.pocg-htp-games,
.pocg-htp-related {
  margin: 20px 0 36px;
  border-color: var(--pocg-border-subtle);
  border-top: 1px solid var(--pocg-border-subtle);
}

.pocg-htp-g { min-height: 82px; }
.pocg-htp-g-title { font-size: 17px; line-height: 1.35; text-transform: none; }
.pocg-htp-g-route { color: var(--pocg-text-soft); font: 400 14px/1.55 var(--pocg-font-body); }
.pocg-htp-rel { min-height: 50px; padding: 13px 16px; }
.pocg-htp-rel-title { color: var(--pocg-text); font-size: 16px; line-height: 1.4; }
.pocg-htp-rel-date { font-size: 12px; }

@media (max-width: 760px) {
  .pocg-guides-wrap,
  .pocg-guide-single,
  .pocg-htp-wrap { padding: 24px 18px 56px; }

  .pocg-guides-families,
  .pocg-guides-grid,
  .pocg-htp-index,
  .pocg-htp-routes { grid-template-columns: 1fr; }

  .pocg-guides-families > .pocg-guides-fc:only-child {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .pocg-guides-wrap .pocg-ci-h1,
  .pocg-guide-h1,
  .pocg-htp-h1 { font-size: clamp(2.35rem, 12vw, 3.5rem); }

  .pocg-guides-wrap .pocg-ci-desc,
  .pocg-guide-deck,
  .pocg-htp-lead { font-size: 18px; }

  .pocg-guides-fc { padding: 20px 18px; }
  .pocg-guides-fc-top { display: block; }
  .pocg-guides-fc-count { display: block; margin-top: 8px; }

  .pocg-guides-card-img,
  .pocg-htp-card-art { height: 150px; }

  .pocg-htp-secbar { display: block; }
  .pocg-htp-secmeta { display: block; margin-top: 5px; }
  .pocg-htp-hero { height: 190px; }
  .pocg-htp-g { grid-template-columns: 48px 38px minmax(0, 1fr); }
  .pocg-htp-g-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pocg-guides-fc,
  .pocg-guides-card,
  .pocg-htp-card { transition: none; }
}