/* Guides & Comparisons hub + related-pages card grids, matching the
   site's existing bordered-card idiom (see .legal-infos / .use-grid). */

/* .legal-copy a{text-decoration:underline} outranks a bare class selector
   here, and an ancestor's underline still draws through non-anchor
   descendants — so this has to out-specify that rule on the anchor
   itself, not just reset text-decoration on the children. */
.legal-copy a.hub-card,
.legal-copy a.hub-card:hover,
.legal-copy a.related-card,
.legal-copy a.related-card:hover,
.legal-copy a.hub-cta,
.legal-copy a.hub-cta:hover {
  text-decoration: none;
}

.hub-group {
  max-width: 1216px;
  margin: 0 auto;
}

.hub-group + .hub-group {
  margin-top: 64px;
}

.hub-group h2 {
  font-size: 30px;
  line-height: 38px;
  letter-spacing: -0.3px;
  font-weight: 600;
  padding-bottom: 20px;
}

.hub-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 168px;
  padding: 24px 44px 24px 24px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--cream);
  transition: background-color .15s ease;
}

.hub-card:hover {
  background: #f0ead8;
}

.hub-card-badge {
  display: inline-block;
  align-self: flex-start;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  background: #fdd9c2;
  color: #be4a06;
}

.hub-card h3 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  margin-top: 12px;
}

.hub-card p {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  margin-top: 8px;
}

.hub-card-arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  font-size: 20px;
  color: var(--muted);
}

/* Compact 3-up "Related pages" / "Compare more VPNs" grid on the 20 sub-pages. */
.related-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}

.related-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--border);
  background: var(--cream);
  transition: background-color .15s ease, border-color .15s ease;
}

.related-card:hover {
  background: #f0ead8;
  border-color: #d8d0ba;
}

.related-card-badge {
  display: inline-block;
  align-self: flex-start;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  background: #f0ead8;
  color: #6b5c3a;
}

.related-card h3 {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  margin-top: 10px;
}

.related-card p {
  font-size: 13px;
  line-height: 19px;
  color: var(--muted);
  margin-top: 6px;
}

.hub-cta-row {
  margin-top: 20px;
}

.hub-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid var(--navy);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
}

.hub-cta:hover {
  background: var(--navy);
  color: #fff;
}

.hub-cta:after {
  content: "›";
  font-size: 18px;
  line-height: 0;
}

@media (max-width: 1024px) {
  .hub-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .related-card-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .hub-card-grid {
    grid-template-columns: 1fr;
  }
  .hub-card {
    border-right: 1px solid var(--border);
  }
  .related-card-grid {
    grid-template-columns: 1fr;
  }
}