/* Eagerly awaiting your presence: family illustrations + names, fitted to one screen */
.families {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 7svh 22px 5svh;
  text-align: center;
}

.families__heading h2 {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: min(clamp(34px, 4.6svh + 10px, 72px), 9.5vw);
  color: var(--gold);
  line-height: 1.15;
  padding: 0 0.3em;
}

.families__divider {
  display: block;
  width: min(240px, 55vw);
  height: 14px;
  margin: 0.6svh auto 2svh;
  background:
    radial-gradient(circle, var(--gold-line) 0 4px, transparent 5px) center / 14px 14px no-repeat,
    linear-gradient(var(--gold-line), var(--gold-line)) left center / calc(50% - 14px) 1px no-repeat,
    linear-gradient(var(--gold-line), var(--gold-line)) right center / calc(50% - 14px) 1px no-repeat;
}

.families__sides {
  min-height: 0;
  display: grid;
  align-items: center;
}

/* phone: illustrations on top, names below */
.families__side {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: 2.4svh;
}

.families__family { display: none; }

.families__art {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1vw;
}

/* both groups share one height; it is the smaller of 25% of the screen height or what fits the width
   inside the border (widths add up to ~1.74x the height: elders 1:1, sister's family 0.74:1) */
.families__img {
  height: min(25svh, calc((100vw - 96px) / 1.78));
  width: auto;
  max-width: none;
  object-fit: contain;
}

.families__lines {
  display: grid;
  gap: calc(1.3svh * var(--fs, 1));
}

.families__label {
  margin: 0;
  font-family: var(--font-script);
  font-size: max(18px, calc(clamp(20px, 2.6svh + 4px, 36px) * var(--fs, 1)));
  color: var(--gold);
  line-height: 1.05;
}

.families__names {
  margin: 0.1em 0 0;
  font-size: max(11px, calc(clamp(12px, 1.55svh + 3px, 21px) * var(--fs, 1)));
  line-height: 1.35;
  color: var(--ink);
}

/* small italic line under a name (e.g. Kabir's "Mere Mamu ki shaadi...") */
.families__sub {
  margin: 0.05em 0 0;
  font-size: calc(clamp(11px, 1.2svh + 2px, 16px) * var(--fs, 1));
  font-style: italic;
  line-height: 1.3;
  color: #8a6a52;
}

.families__note {
  margin: 0;
  font-size: calc(clamp(10.5px, 0.9svh + 3px, 13px) * var(--fs, 1));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #86664a;
}

/* desktop: illustrations on the left, names on the right */
@media (min-aspect-ratio: 1/1) {
  .families { padding: 8svh 7vw 6svh; }
  .families__side {
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr);
    grid-template-rows: auto;
    align-items: center;
    gap: 4vw;
    width: 100%;
  }
  /* limited by height AND by the width of the left column (both groups side by side ≈ 1.78 × their height) */
  .families__img { height: min(48svh, calc((100vw - 18vw - 60px) * 0.55 / 1.78)); max-width: none; }
  .families__lines { gap: 2svh; }
  .families__label { font-size: calc(clamp(26px, 3.4svh + 4px, 44px) * var(--fs, 1)); }
  .families__names { font-size: calc(clamp(15px, 2svh + 3px, 24px) * var(--fs, 1)); }
  .families__sub { font-size: calc(clamp(12px, 1.4svh + 2px, 18px) * var(--fs, 1)); }
}

/* contact numbers at the bottom of the family page (tap to call) */
.families__contact {
  margin-top: clamp(4px, 1svh, 12px);
  padding-top: clamp(6px, 1.2svh, 12px);
  border-top: 1px solid rgba(176, 128, 58, 0.35);
}
.families__contact-label {
  margin: 0 0 0.2em;
  font-size: calc(clamp(11px, 1.1svh + 2px, 14px) * var(--fs, 1));
  font-variant: small-caps;
  letter-spacing: 0.12em;
  color: #7f6248;
}
html[lang="hi"] .families__contact-label { font-variant: normal; letter-spacing: 0.02em; }
.families__contact-line { margin: 0.05em 0 0; font-size: max(10.5px, calc(clamp(11px, 1.3svh + 2px, 17px) * var(--fs, 1))); line-height: 1.35; color: var(--ink); }
.families__tel { color: var(--rose); text-decoration: none; white-space: nowrap; letter-spacing: 0.02em; }

/* a family without illustrations (bride side for now): names only, centred */
.families__side--no-art .families__art { display: none; }
@media (min-aspect-ratio: 1/1) {
  .families__side--no-art { grid-template-columns: minmax(300px, 640px); justify-content: center; }
}

/* bride side has a longer list: a little tighter on very short phones so it still fits one screen */
@media (max-height: 620px) and (max-aspect-ratio: 1/1) {
  .families__side--bride .families__lines { gap: 0.9svh; }
}
.families__tel { display: inline-block; padding: 8px 2px; margin: -8px -2px; }