/* ==========================================================================
   home.css
   Styles used only on the home page (index.html).

   Contents
     1. Intro: positions and portrait
     2. Logos
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Intro: positions and portrait
   -------------------------------------------------------------------------- */

.intro {
  display: grid;
  grid-template-columns: 1fr auto;     /* text | portrait */
  max-width: var(--content-max);          /* same width as every page (base.css) */
  align-items: start;
  gap: 2rem clamp(2rem, 6vw, 4rem);
  padding-bottom: var(--space);
}

.roles {
  display: grid;
  gap: 1.4rem;
}

.role p {
  margin: 0;
}

.role-title {                          /* style: small heading, base.css */
  margin-bottom: .1rem;
}

.role-detail {
  color: var(--ink);
}

/* The source photo is 184 × 190; this crops it to a true circle */
.portrait {
  width: clamp(120px, 18vw, 184px);
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
}

@media (max-width: 640px) {
  .intro {
    grid-template-columns: 1fr;        /* portrait above the text */
  }

  .portrait {
    grid-row: 1;
  }
}


/* --------------------------------------------------------------------------
   2. Logos
   Three per row (two on phones). A <li class="wide"> spans the full row.
   -------------------------------------------------------------------------- */

.logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: var(--content-max);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.logos li {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.logos a {
  display: block;
}

.logos img {
  width: auto;
  max-height: 72px;
  mix-blend-mode: multiply;            /* hides the logos' white boxes on the off-white page */
}

.logos .wide {
  grid-column: 1 / -1;
}

.logos .wide img {
  max-height: 64px;
}

@media (max-width: 640px) {
  .logos {
    grid-template-columns: repeat(2, 1fr);
  }

  .logos img {
    max-height: 60px;
  }
}

@media (forced-colors: active) {
  .logos img {
    mix-blend-mode: normal;
  }
}