/* =========================================
   LINKS HERO — BRISTLE DNA
========================================= */

.links-hero {
  position: relative;
  min-height: 100vh;
  background: var(--color-bg-inverse);
  overflow: hidden;
  isolation: isolate;
}

.links-hero__media,
.links-hero__overlay,
.links-hero__content {
  position: absolute;
  inset: 0;
}

/* ================= MEDIA ================= */

.links-hero__media {
  z-index: var(--z-base);
  background-image: url("/static/images/hero/links-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ================= OVERLAY ================= */

.links-hero__overlay {
  z-index: var(--z-content);
  background:
    linear-gradient(
      to bottom,
      var(--overlay-links-start) 0%,
      var(--overlay-links-end) 100%
    );
}

/* ================= CONTENT ================= */

.links-hero__content {
  z-index: calc(var(--z-content) + 1);

  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--links-content-gap);

  padding: var(--links-content-padding);

  text-align: center;
}

/* ================= LOGO ================= */

.links-hero__brand {
  margin-bottom: var(--links-brand-space);
}

.links-hero__brand img {
  height: var(--links-logo-height);
  opacity: var(--opacity-soft);
}

/* ================= TEXT ================= */

.links-hero__text {
  display: grid;
  gap: var(--links-text-gap);
  max-width: var(--links-text-width);
}

.links-hero__title {
  margin: var(--space-0);

  color: var(--color-text-inverse);

  font-size: var(--links-title-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  letter-spacing: var(--links-title-tracking);
  text-transform: uppercase;
}

.links-hero__desc {
  margin: var(--space-0);

  color: var(--color-text-inverse);

  font-size: var(--links-desc-size);
  line-height: var(--line-height-normal);
  letter-spacing: var(--links-desc-tracking);
  text-transform: uppercase;

  opacity: var(--opacity-muted);
}

/* ================= CTA ================= */

.links-hero__actions {
  display: grid;
  gap: var(--links-actions-gap);
  width: var(--links-stack-width);
}

.links-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: var(--links-button-height);

  border: var(--border-1) solid var(--color-border-inverse);
  background: var(--color-white-subtle);
  color: var(--color-text-inverse);

  font-size: var(--links-button-text-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  letter-spacing: var(--links-button-tracking);
  text-transform: uppercase;

  backdrop-filter: var(--backdrop-blur-sm);
  -webkit-backdrop-filter: var(--backdrop-blur-sm);

  transition:
    background-color var(--duration-normal) var(--ease-smooth),
    transform var(--duration-fast) var(--ease-smooth);
}

.links-btn:hover {
  background: var(--color-white-hover);
  transform: translateY(calc(var(--border-1) * -1));
}

.links-btn--primary {
  border: var(--border-0);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.links-btn--primary:hover {
  background: var(--color-neutral-100);
}

/* ================= SOCIAL ================= */

.links-hero__social {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--links-social-gap);

  width: var(--links-stack-width);
  margin-top: var(--links-social-space);

  backdrop-filter: var(--backdrop-blur-menu);
  -webkit-backdrop-filter: var(--backdrop-blur-menu);
}

.links-hero__social a {
  display: flex;
  align-items: center;
  justify-content: center;

  height: var(--links-button-height);

  border: var(--border-1) solid var(--color-white-border);
  background: var(--color-white-hover);
  box-shadow: var(--shadow-soft-lg);

  backdrop-filter: var(--backdrop-blur-sm);
  -webkit-backdrop-filter: var(--backdrop-blur-sm);

  transition:
    background-color var(--duration-normal) var(--ease-smooth),
    transform var(--duration-fast) var(--ease-smooth);
}

.links-hero__social a:hover {
  background: var(--color-white-active);
  transform: translateY(calc(var(--border-2) * -1));
}

.links-hero__social img {
  width: var(--links-icon-size);
  height: var(--links-icon-size);
  filter: brightness(0) invert(1);
  opacity: var(--opacity-icon);
}

/* ================= FOOTER ================= */

.links-footer {
  margin-top: var(--links-footer-space);

  color: var(--color-text-soft);

  font-size: var(--links-footer-size);
  line-height: var(--line-height-normal);
  letter-spacing: var(--links-footer-tracking);
  text-align: center;
  text-transform: uppercase;

  opacity: var(--opacity-disabled);
}

/* =========================================
   RESPONSIVE SAFETY
========================================= */

@media (min-width: 1024px) {
  .links-hero__text {
    max-width: var(--links-text-width-desktop);
  }
}

@media (max-height: 776px) {
  .links-hero__content {
    gap: var(--space-3);
  }

  .links-hero__brand {
    margin-bottom: var(--space-1);
  }

  .links-hero__brand img {
    height: var(--links-logo-height-compact);
  }

  .links-hero__social {
    margin-top: var(--space-2);
  }
}

@media (min-width: 768px) {
  .links-hero__text {
    max-width: var(--links-text-width-tablet);
  }
}

@media (max-width: 360px) {
  .links-hero__actions,
  .links-hero__social {
    width: var(--links-stack-width-compact);
  }
}