/* ---------------------------------------------------------------------------
   Kenilworth Tangent — theme
   Tangent purple #433e80 over the shared family.css layout. The brand purple
   is too dark to read on the dark header/hero/footer, so --accent-dk carries a
   lightened tint of the same hue.
   --------------------------------------------------------------------------- */

:root {
  --accent: #433e80; /* Tangent purple — on white surfaces */
  --accent-dk: #9d97e0; /* lightened purple — on dark surfaces */
  --accent-dark: #322e63; /* hover state */
  --accent-ink: #ffffff; /* text on an accent-filled button */

  --hero-from: #433e80;
  --hero-to: #1b1a2e;
}

/* Tangent's own roundel, set as a soft watermark behind the hero */
.hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -110px;
  width: 460px;
  height: 460px;
  background: url("../img/tangent-mark-white.png") no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
}

/* Two-up intro: the roundel beside the welcome copy */
.intro-panel {
  display: grid;
  gap: 30px;
  align-items: center;
  text-align: center;
}

.intro-panel img {
  width: min(280px, 62vw);
  margin: 0 auto;
}

@media (min-width: 820px) {
  .intro-panel {
    grid-template-columns: 280px 1fr;
    gap: 50px;
    text-align: left;
  }

  .intro-panel img {
    margin: 0;
  }
}

/* Sister-club callout — the block Kenilworth Tangent has always given over to
   Ladies Circle on its own site. */
.sister-callout {
  display: grid;
  gap: 24px;
  align-items: center;
  padding: 30px;
  border-radius: var(--radius);
  background: #13c1cc; /* Ladies Circle blue, deliberately */
  color: #06373a;
}

.sister-callout h3 {
  color: #06373a;
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.sister-callout img {
  width: min(210px, 56vw);
  justify-self: center;
}

.sister-callout .btn-ghost {
  margin-top: 16px;
  color: #06373a;
  border-color: #06373a;
}

.sister-callout .btn-ghost:hover {
  background: #06373a;
  color: #ffffff;
}

@media (min-width: 720px) {
  .sister-callout {
    grid-template-columns: 210px 1fr;
    padding: 36px 40px;
  }
}