/* ================================================================
   ABOUT — the last content block on the home page before the footer.
   Two columns side by side: the first-person sign-off (.about-bio)
   and the tools/client logo wall (.about-logos), left-aligned to
   match the header logo, cards, and section headers rather than the
   more common centered-bio treatment. Stacks to one column on narrow
   screens (see the media query at the bottom of this file).
   ================================================================ */

.about {
  border-block-start: 1px solid var(--border);
  /* A touch more than the standard section padding (--section-padding,
     from shared/base.css) — the extra room is what makes this read as
     a deliberate close rather than just another section in the list. */
  padding-block: calc(var(--section-padding) + 16px);
}

.about-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 56px;
  align-items: start;
}

.about-bio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* Placeholder headshot slot — a plain icon today so it never renders
   as a broken image. Once a real photo exists, replace this <div>
   with an <img src="images/headshot.jpg" class="about-avatar" ...>
   (see README.md) and this CSS still applies, since it doesn't
   depend on the element being a <div>. */
.about-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.about-avatar svg { width: 34px; height: 34px; }
/* If the placeholder <div> above becomes a real <img>, this makes it
   fill the same rounded-square slot instead of stretching oddly. */
.about-avatar img { width: 100%; height: 100%; object-fit: cover; }

.about-copy {
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.15rem);
  line-height: 1.7;
  color: var(--text-primary);
  max-width: 52ch;
}

.about-email {
  font-weight: var(--weight-heading);
  font-size: 1.05rem;
}
.about-email:hover { color: var(--color-primary); }


/* ---------- Logo wall: tools worked with ----------
   Nine logos of wildly different shapes (wordmarks vs. square app
   icons), all at a readable, consistent size in a grid — its own
   column alongside the bio, not a strip running under it. Tiles are
   a fixed white plate regardless of page theme: several of these
   brand marks use dark, low-contrast ink that would go near-invisible
   against the dark-mode page background otherwise. */
.about-logos { width: 100%; }
.about-logos-label {
  font-size: 0.78rem;
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-block-end: 14px;
}

.about-logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
}

.about-logo-card {
  height: 72px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Camtasia + Camtasia Audiate ship with a lot of built-in whitespace
   around the mark, so the standard tile padding shrank them twice
   over. No inset here — the image runs the full card, edge to edge. */
.about-logo-card--fill { padding: 0; }
.about-logo-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Below this, two ~340px columns is too tight for both the bio prose
   and a legible logo grid — stack instead. */
@media (max-width: 760px) {
  .about-inner { grid-template-columns: 1fr; }
}


/* ---------- Closing CTA band ----------
   The page's explicit final action — mirrors the hero's bold color
   treatment and btn-light/btn-ghost pair so the page ends on a clear
   choice instead of trailing off after About's quiet mailto link. */
.cta-band {
  background: linear-gradient(120deg, var(--color-primary-deep), var(--color-primary) 60%, var(--color-cyan));
  color: #fff;
  padding-block: var(--section-padding);
}
.cta-band-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.cta-band h2 { margin-block-end: 0; }
.cta-band p { opacity: 0.92; max-width: 46ch; }
.cta-band-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-block-start: 10px;
}