/*
 * Murphy – Prana Cycles: related articles ("Související články").
 * Namespace: .mpr-*  ·  Consumes --hv-* / --cf-font-family--* tokens with standalone fallbacks.
 * Mobile-first: single column, 2 columns from 640px.
 */

.mpr-root {
  display: grid;
  gap: var(--hv-space-l, 1.5rem);
  max-width: 900px;
  margin-inline: auto;
  margin-block-start: var(--hv-space-2xl, 3rem);
  font-family: var(--cf-font-family--mulish, 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  color: var(--hv-text-primary, hsla(193, 9%, 19%, 1));
}
.mpr-root *, .mpr-root *::before, .mpr-root *::after { box-sizing: border-box; }

/* Inside the landing grid the parent gap already spaces sections. */
.mpc-root > .mpr-root { margin-block-start: 0; }

.mpr-heading,
.mpr-group-title {
  margin: 0;
  font-family: var(--cf-font-family--lora, 'Lora', Georgia, 'Times New Roman', serif);
  color: var(--hv-text-heading, hsla(221, 47%, 21%, 1));
  text-wrap: balance;
}
.mpr-heading { font-size: var(--hv-text-3xl, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.mpr-group-title { font-size: var(--hv-text-xl, 1.25rem); font-weight: 500; line-height: 1.3; }

.mpr-group { display: grid; gap: var(--hv-space-s, .75rem); }

.mpr-root .mpr-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hv-space-s, .75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mpr-item { margin: 0; }

/* Doubled class beats host rules like .page-body-content a / ul (0,1,1). */
.mpr-root .mpr-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "kind lock" "title title";
  align-items: center;
  align-content: start; /* equal-height cards in a row: keep content at the top */
  gap: var(--hv-space-3xs, .25rem) var(--hv-space-s, .75rem);
  height: 100%;
  padding: var(--hv-card-space, 1.25rem);
  border: 1px solid var(--hv-border-secondary, rgba(121, 140, 115, .08));
  border-radius: var(--hv-radius-m, 12px);
  background: var(--hv-bg-sand, #E8E0D4);
  box-shadow: var(--hv-shadow-s, 0 2px 8px rgba(23, 33, 54, .12));
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease;
}
.mpr-root .mpr-card:hover { transform: translateY(-2px); box-shadow: var(--hv-shadow-m, 0 6px 18px rgba(23, 33, 54, .16)); }
.mpr-root .mpr-card:active { transform: translateY(0); }
.mpr-root .mpr-card:focus-visible { outline: 2px solid var(--hv-border-focus, #5a8c90); outline-offset: 3px; }

.mpr-kind {
  grid-area: kind;
  font-size: var(--hv-text-xs, .75rem);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hv-olive, hsla(106, 23%, 33%, 1));
}
.mpr-title {
  grid-area: title;
  font-family: var(--cf-font-family--lora, 'Lora', Georgia, 'Times New Roman', serif);
  font-size: var(--hv-text-l, 1.125rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--hv-text-heading, hsla(221, 47%, 21%, 1));
}
.mpr-card:hover .mpr-title { color: var(--hv-teal, #3f7a80); }

.mpr-lock {
  grid-area: lock;
  display: inline-flex;
  align-items: center;
  gap: var(--hv-space-3xs, .25rem);
  padding: var(--hv-space-4xs, .15rem) var(--hv-space-xs, .5rem);
  border-radius: var(--hv-radius-full, 999rem);
  background: var(--hv-olive, hsla(106, 23%, 33%, 1));
  color: var(--hv-text-inverse, #F5F2ED);
  font-size: var(--hv-text-xs, .75rem);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
}
.mpr-lock-ico { flex: none; }
.mpr-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (min-width: 640px) {
  .mpr-root .mpr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .mpr-root .mpr-card { transition: none; }
  .mpr-root .mpr-card:hover { transform: none; }
}