/* ==========================================================================
   OTN theme: Alumni page layout (DESIGN.md 8.8), ported from the mockups'
   assets/css/pages/alumni.css.
   Components used from components.css: .otn-pagehead, .otn-chips (6.10),
   .otn-quote and .otn-super (6.17), .otn-lt, .otn-spotlight (6.24),
   .otn-credits / is-style-credits (6.23), .otn-totop.
   .otn-spotlight and the credits list are used on this page only, so their
   phone sizes below don't reach any other page.
   ========================================================================== */

/* Jump chips in the mockups' own class (the theme's chips inside the page
   head already get 32px above them: blocks.css) */
.otn-alumni__chips {
  margin-top: var(--otn-space-6);
}

/* Testimonials wrapper (6.17 layout: otn-alumni's quotes, with the class
   otn-testimonials): one column, 48px apart, up to 1200px; three columns
   from 1200px, 32px apart. 32px under the intro line. */
.otn-testimonials {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--otn-space-7);
  margin-top: var(--otn-space-6);
}

/* Phones: spotlight photos 12rem wide (192 x 240px), so each photo takes
   about a third of a 390px screen, not half of it */
@media (max-width: 599.98px) {
  .otn-spotlight__photo {
    max-width: 12rem;
  }
}

/* 480-899px: the end credits in 2 columns, 24px apart (the component is
   one column until 900px, then 2 and 3 columns 48px apart) */
@media (min-width: 480px) and (max-width: 899.98px) {
  .otn-credits,
  :root ul.is-style-credits {
    column-count: 2;
    column-gap: var(--otn-space-5);
  }
}

/* Three columns: each column stretches to the tallest and its quote (and
   orange bar) grows to fill it, which lines up the supers' bottom edges */
@media (min-width: 1200px) {
  .otn-testimonials {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--otn-space-6);
  }

  .otn-testimonials .otn-quote {
    display: flex;
    flex-direction: column;
  }

  .otn-testimonials .otn-quote__text {
    flex: 1 0 auto;
  }

  /* Where subgrid works, the three quotes share one row and the three
     supers the next, so the name bars also start on one line */
  @supports (grid-template-rows: subgrid) {
    .otn-testimonials {
      grid-template-rows: auto auto;
      row-gap: 0;
    }

    .otn-testimonials .otn-quote {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
    }
  }
}