/* ==========================================================================
   Mantle Realty — Related Links component (Phase 3R)
   Shortcode: [mantle_related_links]  ·  Root class: .mtl-related-links
   Loads on: county / suburbs / subdivision / schools singles only.
   Conventions: 3M interaction system. All var() carry hex fallbacks.
   All motion is transform / box-shadow / border-color only and is
   disabled by the scoped reduced-motion block at the bottom
   (per docs/ai-instructions/mantle-realty-design-motion-standards.md).
   ========================================================================== */

.mtl-related-links {
  margin: 48px auto;
  padding: 0 20px;
  max-width: 1140px;
}

.mtl-related-links .mtl-rl-heading {
  color: var(--mantle-c-text, #1c2b33);
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 0 0 6px;
}

.mtl-related-links .mtl-rl-kicker {
  color: var(--mantle-gray, #718a94);
  font-size: 1rem;
  margin: 0 0 24px;
  max-width: 60ch;
}

/* Group label — small, quiet, does the wayfinding job and nothing else */
.mtl-related-links .mtl-rl-group {
  margin: 0 0 22px;
}

.mtl-related-links .mtl-rl-group-label {
  color: var(--mantle-gray, #718a94);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

/* Card grid */
.mtl-related-links .mtl-rl-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

/* Card */
.mtl-related-links .mtl-rl-card {
  background: var(--mantle-white, #ffffff);
  border: 2px solid rgba(113, 138, 148, 0.35); /* gray @35% — rest state */
  border-radius: 8px;
  transition:
    transform var(--mantle-speed, 0.18s) var(--mantle-ease, ease),
    box-shadow var(--mantle-speed, 0.18s) var(--mantle-ease, ease),
    border-color var(--mantle-speed, 0.18s) var(--mantle-ease, ease);
}

.mtl-related-links .mtl-rl-card > a {
  display: block;
  padding: 14px 16px;
  min-height: 44px;            /* tap target */
  color: var(--mantle-c-link, #0a76b6);   /* 4.91:1 on white */
  font-weight: 600;
  text-decoration: none;
  word-break: break-word;
}

/* Hover / focus: -4px lift, soft bloom, warm orange border glow.
   Orange is a hover BORDER here, never text on white (3M rule). */
.mtl-related-links .mtl-rl-card:hover,
.mtl-related-links .mtl-rl-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(12, 44, 66, 0.16);
  border-color: rgba(246, 147, 32, 0.5);
}

.mtl-related-links .mtl-rl-card:hover > a,
.mtl-related-links .mtl-rl-card:focus-within > a {
  color: var(--mantle-c-link-hover, #085a8f); /* 7.32:1 on white */
  text-decoration: underline;                  /* not color-only */
}

.mtl-related-links .mtl-rl-card:active {
  transform: translateY(-1px); /* pressed state, 3M convention */
}

/* CTA — fully self-contained 3M-system button. Deliberately NOT dependent
   on .mantle-button (components.css), so it renders identically regardless
   of that file's state and can never double-style. Filled brand blue
   (white on #0a76b6 = 4.91:1; hover #085a8f = 7.32:1), orange shine sweep
   on ::after (transform-only), lift, press. All motion is covered by the
   scoped reduced-motion block below. */
.mtl-related-links .mtl-rl-cta-row {
  margin-top: 26px;
}

.mtl-related-links .mtl-rl-cta {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 14px 28px;
  min-height: 44px;            /* tap target */
  background: var(--mantle-dark-blue, #0a76b6);
  color: var(--mantle-white, #ffffff);
  font-weight: 700;
  text-decoration: none;
  border: 0;
  border-radius: 8px;
  transition:
    background-color var(--mantle-speed, 0.18s) var(--mantle-ease, ease),
    transform var(--mantle-speed, 0.18s) var(--mantle-ease, ease),
    box-shadow var(--mantle-speed, 0.18s) var(--mantle-ease, ease);
}

.mtl-related-links .mtl-rl-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(246, 147, 32, 0.35), transparent);
  transform: translateX(-130%) skewX(-20deg);
  transition: transform 0.6s var(--mantle-ease, ease);
  pointer-events: none;
}

.mtl-related-links .mtl-rl-cta:hover,
.mtl-related-links .mtl-rl-cta:focus-visible {
  background: var(--mantle-c-link-hover, #085a8f);
  color: var(--mantle-white, #ffffff);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(12, 44, 66, 0.22);
}

.mtl-related-links .mtl-rl-cta:hover::after,
.mtl-related-links .mtl-rl-cta:focus-visible::after {
  transform: translateX(320%) skewX(-20deg);
}

.mtl-related-links .mtl-rl-cta:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(12, 44, 66, 0.18);
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .mtl-related-links .mtl-rl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .mtl-related-links .mtl-rl-grid {
    grid-template-columns: 1fr; /* stack when 2-col gets cramped */
  }
  .mtl-related-links .mtl-rl-cta {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion — scoped to this component's root class, per
   mantle-realty-design-motion-standards.md (updated 2026-06-12).
   Never a global * selector in shared theme CSS.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mtl-related-links *,
  .mtl-related-links *::before,
  .mtl-related-links *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}