/* ============================================================================
   ABOUT PAGE STYLES
   Loads alongside styles.css, project.css, process.css, guide.css.
   ============================================================================ */

/* Spacing between intro paragraphs */
.guide-intro p + p { margin-top: 1em; }


/* 2-column bio layout: image left, text right */
.about-bio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}
@media (max-width: 768px) {
  .about-bio { grid-template-columns: 1fr; }
}

/* Photo block — left column */
.about-photo {
  margin-bottom: 0;
}
.about-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(6px, 0.7vw, 12px);
}

/* Pink logo strip */
.about-logo-strip {
  background: var(--pink);
  padding: 3rem calc(var(--side-pad) * 1.15);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: 2rem;
}
.about-logo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 126px;
  object-fit: contain;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .about-logo-strip { padding: 2.5rem var(--side-pad); gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .about-logo-strip { padding: 2rem var(--side-pad); gap: 1rem; }
}