/**
 * Index links – fixed heights matched to shahidanwarllc.com (Beacons)
 * 60px = icon + 1 line | 68px = icon + title + subtitle | text = shilajit pill
 */

body.index-page {
  --beacons-link-gap: 0.5rem;
  --beacons-icon: 2.5rem;
  --beacons-icon-side: 0.75rem;
  --beacons-pad-left: calc(
    var(--beacons-icon-side) + var(--beacons-icon) + 0.5rem
  );
  --beacons-h-1: 3.75rem;
  --beacons-h-2: 4.25rem;
  --beacons-h-text: 4.5rem;
  --beacons-h-2-long: 4.75rem;
}

body.index-page .links {
  gap: 0;
}

body.index-page .links a.link-beacons {
  box-sizing: border-box;
  margin: 0 0 var(--beacons-link-gap);
  padding-left: var(--beacons-pad-left);
  padding-right: var(--beacons-icon-side);
  overflow: visible;
}

body.index-page .links a.link-beacons > img {
  width: var(--beacons-icon);
  height: var(--beacons-icon);
  left: var(--beacons-icon-side);
}

body.index-page .links a.link-beacons .link-text span {
  font-size: 1rem;
  line-height: 1.25;
}

body.index-page .links a.link-beacons .link-text small {
  font-size: 0.75rem;
  line-height: 1.25;
  margin-top: 0.125rem;
}

/* Icon + single line title – 60px */
body.index-page .links a.link-beacons--icon-1 {
  height: var(--beacons-h-1);
  min-height: var(--beacons-h-1);
  max-height: var(--beacons-h-1);
  padding-top: 0;
  padding-bottom: 0;
}

/* Icon + title + subtitle – 68px */
body.index-page .links a.link-beacons--icon-2 {
  height: var(--beacons-h-2);
  min-height: var(--beacons-h-2);
  max-height: var(--beacons-h-2);
  padding-top: 0;
  padding-bottom: 0;
}

/* Long subtitle (WhatsApp) – slightly taller */
body.index-page .links a.link-beacons--icon-2-long {
  height: auto;
  min-height: var(--beacons-h-2-long);
  max-height: none;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Text-only Amazon shilajit – ~72px, 3 lines */
body.index-page .links a.link-beacons--text {
  height: auto;
  min-height: var(--beacons-h-text);
  max-height: none;
  padding: 0.625rem 0.875rem;
}

body.index-page .links a.link-beacons--text .link-text span {
  font-size: 0.875rem;
  line-height: 1.22;
}

body.index-page .links a.link-beacons--text .link-text small {
  font-size: 0.6875rem;
  line-height: 1.26;
  margin-top: 0.125rem;
}

@media (max-width: 20rem) {
  body.index-page {
    --beacons-h-1: 3.625rem;
    --beacons-h-2: 4.125rem;
    --beacons-h-text: 4.375rem;
  }
}