/* =========================================
   LINKS PAGE
========================================= */

.veil-links-page {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(circle at top,
      rgba(90,166,173,.08),
      transparent 35%),

    linear-gradient(180deg,
      #050814,
      #080b12);

  color: #DED9EE;
}

/* =========================================
   HERO
========================================= */

.veil-links-hero {
  position: relative;

  min-height: 360px;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  overflow: hidden;

  background-image:
    linear-gradient(rgba(5,10,20,.42), rgba(5,10,20,.88)),
    url('/wp-content/uploads/links-veil-hero.png');

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  border-bottom: 1px solid rgba(211,177,106,.32);
}

.veil-links-hero__overlay {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at center,
      rgba(90,166,173,.16),
      transparent 48%),

    radial-gradient(circle at top,
      rgba(139,0,15,.12),
      transparent 58%),

    linear-gradient(
      90deg,
      rgba(3,8,18,.92),
      transparent 45%,
      rgba(3,8,18,.92)
    );

  pointer-events: none;
}

.veil-links-hero__content {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 980px;

  margin: 0 auto;
  padding: 4rem 1.5rem;

  text-align: center;
}

.veil-links-hero h1 {
  margin: 0;

  font-family: "Cinzel", serif;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1.05;

  letter-spacing: .08em;
  text-transform: uppercase;

  color: #f5ead6;

  text-shadow:
    0 0 18px rgba(0,0,0,.9),
    0 0 42px rgba(90,166,173,.15);
}

.veil-links-hero p {
  margin: .4rem auto 1rem;

  font-family: "Cinzel", serif;
  font-size: clamp(1rem, 2vw, 1.3rem);

  letter-spacing: .22em;
  text-transform: uppercase;

  color: #5aa6ad;

  text-shadow:
    0 0 12px rgba(90,166,173,.35);
}

.veil-links-hero span {
  display: block;

  max-width: 760px;
  margin: 0 auto;

  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.55;

  color: #e8dcc7;
}

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

.veil-links-wrap {
  position: relative;
  padding: 5rem 8%;
}

.veil-links-content {
  position: relative;
  z-index: 3;

  max-width: 1200px;
  margin: 0 auto;

  text-align: center;
}

/* =========================================
   GRID
========================================= */

.veil-link-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(260px, 1fr));

  gap: 2rem;

  margin-top: 2rem;
}

/* =========================================
   CARDS
========================================= */

.veil-link-card {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;

  min-height: 220px;
  padding: 2rem;

  overflow: hidden;

  border-radius: 22px;

  text-align: center;

  color: inherit !important;
  text-decoration: none !important;

  cursor: pointer;

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    filter .35s ease;
}

/* remove ALL underlines */
.veil-link-card *,
.veil-link-card:hover *,
.veil-link-card:focus *,
.veil-link-card:visited * {
  text-decoration: none !important;
}

/* =========================================
   CARD VARIANTS
========================================= */

/* Awakening */
.veil-link-awakening {
  background:
    linear-gradient(
      180deg,
      rgba(12,22,36,.82),
      rgba(5,10,20,.92)
    );

  border: 1px solid rgba(90,166,173,.35);

  box-shadow:
    0 0 30px rgba(90,166,173,.12);
}

/* Descent */
.veil-link-descent {
  background:
    linear-gradient(
      180deg,
      rgba(30,10,18,.82),
      rgba(12,5,10,.94)
    );

  border: 1px solid rgba(177,18,38,.35);

  box-shadow:
    0 0 30px rgba(177,18,38,.12);
}

/* Blood Moon */
.veil-link-bloodmoon {
  background:
    linear-gradient(
      180deg,
      rgba(45,10,18,.84),
      rgba(15,4,8,.96)
    );

  border: 1px solid rgba(220,40,70,.38);

  box-shadow:
    0 0 32px rgba(220,40,70,.16);
}

/* Outline */
.veil-link-outline {
  background:
    rgba(10,14,24,.52);

  border: 1px solid rgba(211,177,106,.32);

  backdrop-filter: blur(10px);

  box-shadow:
    0 0 28px rgba(211,177,106,.08);
}

/* LGBTQ */
.veil-link-lgbtq {
  background:
    linear-gradient(
      180deg,
      rgba(34,18,52,.96),
      rgba(14,8,24,.98)
    );

  border:
    2px solid rgba(180,120,255,.55);

  box-shadow:
    0 0 24px rgba(180,120,255,.14),
    0 0 52px rgba(90,166,173,.08);
}

/* =========================================
   HOVER ANIMATION
========================================= */

.veil-link-card:hover,
.veil-link-card:focus {
  transform:
    translateY(-6px)
    scale(1.015);

  text-decoration: none !important;

  box-shadow:
    0 0 38px rgba(0,0,0,.55),
    0 0 45px rgba(90,166,173,.16);
}

.veil-link-lgbtq:hover,
.veil-link-lgbtq:focus {
  border-color:
    rgba(210,170,255,.85);

  box-shadow:
    0 0 34px rgba(180,120,255,.24),
    0 0 72px rgba(90,166,173,.14);
}

/* =========================================
   TITLES
========================================= */

.veil-link-card h3 {
  margin: 0 0 .85rem;

  font-family: "Cinzel", serif;
  font-size: 1.25rem;
  line-height: 1.3;

  letter-spacing: .04em;

  color: #5aa6ad !important;

  transition:
    color .3s ease,
    text-shadow .3s ease;
}

/* title glow hover */
.veil-link-card:hover h3,
.veil-link-card:focus h3 {
  color: #8fe3ea !important;

  text-shadow:
    0 0 14px rgba(90,166,173,.45);
}

/* LGBTQ title */
.veil-link-lgbtq h3 {
  color: #dcc7ff !important;
}

.veil-link-lgbtq:hover h3,
.veil-link-lgbtq:focus h3 {
  color: #ffffff !important;

  text-shadow:
    0 0 16px rgba(180,120,255,.55);
}

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

.veil-link-card p {
  margin: 0;

  font-family: "Cormorant Garamond", serif;
  font-size: 1.08rem;
  line-height: 1.6;

  color: #d8d0c2 !important;
}

/* keep body text normal on hover */
.veil-link-card:hover p,
.veil-link-card:focus p {
  color: #d8d0c2 !important;
}

.veil-link-lgbtq p {
  color: rgba(240,240,255,.84) !important;
}

.veil-link-lgbtq:hover p,
.veil-link-lgbtq:focus p {
  color: rgba(240,240,255,.84) !important;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

  .veil-links-hero {
    min-height: 300px;
  }

  .veil-links-wrap {
    padding: 3rem 1.25rem;
  }

}
/* FORCE LINK CARD HOVER EFFECTS */
.veil-link-grid a.veil-link-card {
  will-change: transform, box-shadow;
  transform: translateY(0) scale(1);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}

.veil-link-grid a.veil-link-card:hover,
.veil-link-grid a.veil-link-card:focus-visible {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow:
    0 0 42px rgba(0,0,0,.65),
    0 0 52px rgba(90,166,173,.22),
    0 0 28px rgba(139,0,15,.16) !important;
}

.veil-link-grid a.veil-link-lgbtq:hover,
.veil-link-grid a.veil-link-lgbtq:focus-visible {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(210,170,255,.9) !important;
  box-shadow:
    0 0 42px rgba(180,120,255,.32),
    0 0 72px rgba(90,166,173,.18) !important;
}