/*
  /static/css/linkify.css
  Auto-link styles, related products block, related guides block
  Load in every layout that uses these partials.
*/

/* ── AUTO-LINKS (blog body text) ─────────────────────────── */
.auto-link {
  color: var(--brand);
  font-weight: 700;
  border-bottom: 1px solid rgba(126,8,130,.3);
  transition: border-color .2s, color .2s;
  text-decoration: none;
}
.auto-link:hover {
  color: var(--brand-dark);
  border-bottom-color: var(--brand);
}
.auto-link--hub     { /* internal links — slightly muted */ }
.auto-link--product { /* affiliate links — same style, rel handled in JS */ }


/* ── RELATED PRODUCTS BLOCK (blog posts) ─────────────────── */
.rp-block {
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: 28px 24px;
  margin: 40px 0;
}
.rp-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.rp-block__title {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--gray-900);
}
.rp-block__see-all {
  font-size: .85rem;
  font-weight: 800;
  color: var(--brand);
  text-decoration: none;
  transition: color .2s;
}
.rp-block__see-all:hover { color: var(--brand-dark); }
.rp-block__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.rp-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
}
.rp-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.rp-card__img {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--gray-200);
}
.rp-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.rp-card:hover .rp-card__img img { transform: scale(1.05); }
.rp-card__body {
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.rp-card__name {
  font-size: .875rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 4px;
  line-height: 1.3;
}
.rp-card__price {
  font-size: .825rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 10px;
}
.rp-card__cta {
  display: block;
  background: var(--brand);
  color: #fff;
  text-align: center;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 800;
  margin-top: auto;
  transition: background .2s;
}
.rp-card:hover .rp-card__cta { background: var(--brand-dark); }


/* ── RELATED GUIDES BLOCK (hub + pSEO pages) ─────────────── */
.rg-block {
  margin: 48px 0;
}
.rg-block__title {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--gray-900);
  margin-bottom: 20px;
}
.rg-block__title span { color: var(--brand); }
.rg-block__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.rg-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
}
.rg-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.rg-card__img {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--gray-200);
}
.rg-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.rg-card:hover .rg-card__img img { transform: scale(1.04); }
.rg-card__body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.rg-card__cat {
  display: inline-block;
  background: var(--brand-pale);
  color: var(--brand);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.rg-card__title {
  font-size: .975rem;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.35;
  margin-bottom: 7px;
}
.rg-card__desc {
  font-size: .85rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 12px;
  flex: 1;
}
.rg-card__link {
  font-size: .85rem;
  font-weight: 800;
  color: var(--brand);
  margin-top: auto;
}
.rg-card:hover .rg-card__link { text-decoration: underline; }


/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .rp-block__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .rg-block__grid { grid-template-columns: 1fr; }
}