/**
 * About Layout Base Styles
 * Layout styles for custom AboutLayout
 *
 * Uses about-tokens.css for 50% wider layout
 * NO background texture (intentionally removed for About pages)
 */

/* ==========================================================================
   GLOBAL BACKGROUND
   ========================================================================== */
:global(body) {
  background-color: var(--color-background-page);
}

/* ==========================================================================
   PAGE CONTAINER
   ========================================================================== */
.about-page-container {
  max-width: var(--page-max-width);             /* 1500px */
  margin: 0 auto;
  padding: 0;
  background-color: var(--color-background-page);
  /* NO background-image (intentionally) */
}

.about-content-wrapper {
  max-width: var(--page-width-content);         /* 1400px */
  margin: 0 auto;
  padding: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .about-content-wrapper {
    padding: 0;
  }
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.breadcrumbs {
  font-family: var(--font-family-system);
  font-size: var(--font-size-breadcrumb);       /* 1rem */
  color: var(--color-text-meta);
  margin-bottom: var(--spacing-breadcrumb-to-header); /* 3em */
  padding: var(--margin-top) var(--margin-horizontal) 0; /* 2.5rem 3rem 0 */
}

/* Mobile */
@media (max-width: 768px) {
  .breadcrumbs {
    padding: var(--margin-top) var(--margin-horizontal-mobile) 0;
  }
}

.breadcrumbs a {
  color: var(--color-ui-primary);
  text-decoration: var(--breadcrumb-link-underline);
  transition: color 0.2s ease;
}

.breadcrumbs a:hover {
  color: var(--color-ui-hover);
  text-decoration: var(--breadcrumb-link-underline-hover);
}

.breadcrumb-separator {
  margin: 0 var(--breadcrumb-separator-spacing);
  color: var(--color-text-divider);
}

.breadcrumb-current {
  color: var(--color-text-primary);
}