/* Page-owned hooks. Only public --vbg-* tokens; never targets .vbg-* classes. */

.vbg-custom-identity {
  font-size: var(--vbg-type-subsection);
  font-weight: var(--vbg-weight-semibold);
  color: var(--vbg-text-primary);
  text-decoration: none;
}

.vbg-custom-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vbg-space-2) var(--vbg-space-5);
  font-size: var(--vbg-type-label);
}

.vbg-custom-nav a {
  color: var(--vbg-text-secondary);
  text-decoration: none;
}

.vbg-custom-nav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--vbg-space-2);
}

.vbg-custom-nav-item svg {
  flex: none;
}

.vbg-custom-nav a:hover,
.vbg-custom-nav a[aria-current='page'] {
  color: var(--vbg-text-primary);
}

.vbg-custom-nav a[aria-current='page'] {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.vbg-custom-figure {
  margin: 0;
  display: grid;
  gap: var(--vbg-space-2);
  min-width: 0;
}

.vbg-custom-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--vbg-radius);
}

.vbg-custom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vbg-space-3);
}

.vbg-custom-actions > * {
  margin: 0;
}

/* Sense, plan, act, improve: one sequence on a shared track. */
.vbg-custom-sequence {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--vbg-space-6);
  counter-reset: step;
}

.vbg-custom-sequence > li {
  display: grid;
  align-content: start;
  gap: var(--vbg-space-2);
  padding-top: var(--vbg-space-3);
  border-top: 1px solid var(--vbg-border-strong);
  min-width: 0;
}

.vbg-custom-sequence > li > * {
  margin: 0;
}

.vbg-custom-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.vbg-custom-rows > li {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) 1fr;
  align-items: start;
  gap: var(--vbg-space-2) var(--vbg-space-8);
  padding: var(--vbg-space-5) 0;
  border-top: 1px solid var(--vbg-border-subtle);
}

.vbg-custom-rows > li > * {
  margin: 0;
  min-width: 0;
}

@media (max-width: 640px) {
  .vbg-custom-rows > li {
    grid-template-columns: 1fr;
  }
}

/* Vision page: always-open parts with a jump list, not an accordion. */
.vbg-custom-toc {
  margin-top: var(--vbg-space-6);
}

.vbg-custom-toc a {
  text-decoration: underline;
  text-decoration-color: var(--vbg-border-strong);
  text-underline-offset: 4px;
}

.vbg-custom-toc a:hover {
  text-decoration-color: currentColor;
}

.vbg-custom-part {
  display: grid;
  gap: var(--vbg-space-6);
  padding-top: var(--vbg-space-10);
  border-top: 1px solid var(--vbg-border-subtle);
  scroll-margin-top: var(--vbg-space-6);
}

.vbg-custom-part + .vbg-custom-part {
  margin-top: var(--vbg-space-12);
}

.vbg-custom-part > header {
  display: grid;
  gap: var(--vbg-space-1);
}

.vbg-custom-part > header > *,
.vbg-custom-part > div > * {
  margin: 0;
}

.vbg-custom-part > div {
  display: grid;
  gap: var(--vbg-space-4);
}

.vbg-custom-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--vbg-space-6);
}

/* :nth-child(n) lifts specificity over the foundation section list rules. */
:is(.vbg-custom-sequence, .vbg-custom-rows, .vbg-custom-gallery):nth-child(n) {
  grid-column: 1 / -1;
  max-width: none;
}

:is(.vbg-custom-sequence, .vbg-custom-rows):nth-child(n) {
  margin-top: var(--vbg-space-6);
}

:is(.vbg-custom-sequence, .vbg-custom-rows) > li + li:nth-child(n) {
  margin-top: 0;
}

.vbg-custom-part-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--vbg-radius);
}

.vbg-custom-avatar {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  border-radius: var(--vbg-radius);
}

/* Card grid (team, components): three per row, two on tablets, one on phones. */
.vbg-custom-cards:nth-child(n) {
  grid-column: 1 / -1;
  max-width: none;
  list-style: none;
  margin: var(--vbg-space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vbg-space-10) var(--vbg-space-6);
}

.vbg-custom-cards > :is(li, li + li):nth-child(n) {
  display: grid;
  align-content: start;
  gap: var(--vbg-space-3);
  margin: 0;
  min-width: 0;
}

.vbg-custom-cards > li > *,
.vbg-custom-cards > li > div > * {
  margin: 0;
}

@media (max-width: 960px) {
  .vbg-custom-cards:nth-child(n) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .vbg-custom-cards:nth-child(n) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.vbg-custom-icon-link {
  display: inline-flex;
  padding: var(--vbg-space-1);
  margin: calc(-1 * var(--vbg-space-1));
}

/* Footer: brand, page links and project facts, then a legal line. */
.vbg-custom-footer {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--vbg-space-8) var(--vbg-space-6);
  padding-top: var(--vbg-space-10);
  border-top: 1px solid var(--vbg-border-subtle);
  font-size: var(--vbg-type-label);
}

.vbg-custom-footer p,
.vbg-custom-footer ul {
  margin: 0;
}

.vbg-custom-footer ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--vbg-space-3);
}

.vbg-custom-footer-brand {
  grid-column: 1 / span 5;
  display: grid;
  align-content: start;
  gap: var(--vbg-space-3);
  max-width: 22rem;
}

.vbg-custom-footer-col {
  grid-column: span 3;
  display: grid;
  align-content: start;
  gap: var(--vbg-space-4);
}

.vbg-custom-footer-col:first-of-type {
  grid-column: 7 / span 3;
}

.vbg-custom-footer-title {
  color: var(--vbg-text-primary);
  font-weight: var(--vbg-weight-medium);
}

.vbg-custom-footer a {
  color: var(--vbg-text-secondary);
  text-decoration: none;
}

.vbg-custom-footer a:hover {
  color: var(--vbg-text-primary);
}

.vbg-custom-footer .vbg-custom-identity {
  color: var(--vbg-text-primary);
}

.vbg-custom-footer-legal {
  grid-column: 1 / -1;
  padding-top: var(--vbg-space-6);
  border-top: 1px solid var(--vbg-border-subtle);
}

@media (max-width: 760px) {
  .vbg-custom-footer-brand {
    grid-column: 1 / -1;
  }

  .vbg-custom-footer-col,
  .vbg-custom-footer-col:first-of-type {
    grid-column: span 6;
  }
}