/**
 * NovaFolio — Nova Bio block styles.
 *
 * Two-column layout with sticky nav + tabbed content panels.
 *
 * @since 1.11.0
 */

/* ── Block wrapper ────────────────────────────────────────────────── */
.nvf-bio {
  max-width: var(--nvf-layout-wide-width, 1440px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.nvf-bio__separator {
  border-color: var(--nvf-color-border, #e0e0e0);
}

/* ── Nav: active + hover states ───────────────────────────────────── */
.nvf-bio__nav .nvf-bio__nav-item a {
  opacity: 0.55;
  transition: opacity 0.2s ease;
  color: inherit;
}

.nvf-bio__nav .nvf-bio__nav-item:hover a {
  opacity: 1;
}

.nvf-bio__nav .nvf-bio__nav-item.is-active a {
  opacity: 1;
  font-weight: 600;
}

/* ── Panel transitions ────────────────────────────────────────────── */
.nvf-bio__panel {
  animation: nvf-bio-fade-in 0.35s ease-out;
}

@keyframes nvf-bio-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Contact block alignment inside Bio ───────────────────────────── */
.nvf-bio__right .nvf-contact__inner {
  margin-left: 0;
  margin-right: auto;
}

/* ── Mobile: stack columns ────────────────────────────────────────── */
@media (max-width: 768px) {
  .nvf-bio__columns {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .nvf-bio__left {
    flex: none !important;
    max-width: 100% !important;
  }

  .nvf-bio__nav {
    position: static !important;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }

  .nvf-bio__nav .nvf-bio__nav-item {
    border-bottom: none !important;
    padding: 0.4em 0 !important;
  }

  .nvf-bio__right {
    flex: none !important;
    min-width: 0 !important;
  }
}