/* ============================================================
 * Neurotype V2 — Meet Vanessa Page Styles
 * Page-specific styles for meet-vanessa.html
 * All values use brand system tokens.
 * ========================================================== */

/* ---- Meet Vanessa hero ---- */
.vanessa-hero {
  background-image: url('/assets/hero-meet-vanessa.jpg');
  background-size: cover;
  background-position: right center;
  background-color: var(--bg-secondary-translucent);
}

.vanessa-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(35% 55% at 30% 45%, var(--bg-primary-heavy) 25%, transparent 100%);
}

.vanessa-hero .section {
  position: relative;
  z-index: 1;
}

.vanessa-hero h1 {
  color: var(--text-heading);
}

.vanessa-hero .page-hero-subtitle {
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .vanessa-hero::before {
    background: radial-gradient(ellipse 90% 90% at 25% 50%, var(--bg-primary-heavy) 25%, var(--bg-primary-light) 100%);
  }
}

/* ---- Page hero credential badges ---- */
.page-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-start;
  margin-top: var(--space-5);
}

@media (max-width: 768px) {
  .page-hero-badges {
    justify-content: center;
  }
}

/* ---- Organic photo frame: fluid blob with running stitch ---- */
.organic-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 420px;
  justify-self: center;
}

.organic-frame::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 65% 35% 45% 55% / 40% 60% 50% 50%;
  border: 2px dashed var(--neurotype-accent-primary);
  opacity: 0.6;
}

.organic-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 65% 35% 45% 55% / 40% 60% 50% 50%;
  display: block;
}

/* Alternate blob shape so the two photos feel hand-placed, not stamped */
.organic-frame--alt::before {
  border-radius: 40% 60% 55% 45% / 55% 35% 65% 45%;
}

.organic-frame--alt img {
  border-radius: 40% 60% 55% 45% / 55% 35% 65% 45%;
}

/* ---- Free time interest tags ---- */
.free-time-tags {
  margin-top: var(--space-5);
  flex-wrap: wrap;
}