/* About (/about/): what SDM supplies, how it works, facilities and logistics.
   Shared tokens, page intro, trust bar, capability and link cards, hexagon
   lists, the honeycomb band, photo frames, facts strip and the call-to-action
   band come from site.css. */

/* ---------- Intro ---------- */

@media (min-width: 64rem) {
  .about-intro {
    padding-bottom: 3.75rem;
  }
}

/* ---------- What we supply ---------- */

.about-supply h2 {
  margin-bottom: 1rem;
}

.supply-list {
  display: grid;
  gap: 0.75rem;
}

/* ---------- How we work (green band) ---------- */

.about-work {
  color: var(--paper);
}

.about-work h2 {
  color: var(--cream-50);
}

.about-work .lead {
  margin-top: 0.75rem;
  color: var(--sage-200);
}

.about-work .hex-list {
  margin-top: 1.125rem;
}

.about-work__photos {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.about-work img {
  width: 100%;
}

.about-work figcaption {
  margin-top: 0.5625rem;
  font-size: 0.78125rem;
  line-height: 1.4;
  color: var(--sage-200);
}

/* ---------- Facilities ---------- */

.about-facilities__head .lead {
  margin-top: 0.75rem;
}

.about-facilities__head .photo-frame {
  margin-top: 1rem;
}

/* The warehouse photo is a thin strip, so phones crop it taller. */
.about-facilities__head img {
  aspect-ratio: 5 / 2;
  object-fit: cover;
}

.facility-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.125rem;
}

.facility {
  padding: 1.25rem;
  background: var(--cream-50);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold-500);
}

.facility h3 {
  font-size: 1.3125rem;
  line-height: 1.15;
}

.facility p {
  margin-top: 0.625rem;
  font-size: 0.90625rem;
  line-height: 1.55;
  color: var(--ink-600);
}

.facility .facility__place {
  margin-top: 0.375rem;
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ---------- Logistics and shipping ---------- */

.about-logistics__inner {
  padding-bottom: var(--section-y);
}

.about-logistics .lead {
  max-width: 46em;
  margin-top: 0.75rem;
}

/* The facts strip already draws a rule above the closing band. */
.about-logistics + .cta-band {
  border-top: 0;
}

/* ---------- Breakpoints ---------- */

@media (min-width: 40rem) {
  /* Columns stop at the photos' 600px width. */
  .about-work__photos {
    grid-template-columns: repeat(2, minmax(0, 37.5rem));
    gap: 1.25rem;
  }

  .about-facilities__head img {
    aspect-ratio: 940 / 250;
  }
}

@media (min-width: 64rem) {
  .about-supply h2 {
    margin-bottom: 2.125rem;
  }

  .supply-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.625rem;
  }

  .about-work__inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: start;
    gap: 4rem;
  }

  .about-work .lead {
    margin-top: 1.25rem;
  }

  .about-work .hex-list {
    margin-top: 0;
    padding-top: 0.375rem;
  }

  .about-work__photos {
    gap: 2.5rem;
    margin-top: 2.875rem;
  }

  .about-work figcaption {
    margin-top: 0.75rem;
    font-size: 0.84375rem;
    line-height: 1.45;
  }

  /* The warehouse photo sits beside the heading and sentence. */
  .about-facilities__head {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 4rem;
  }

  .about-facilities__head .lead {
    margin-top: 1rem;
  }

  .about-facilities__head .photo-frame {
    margin-top: 0;
    padding: 0.75rem;
  }

  .facility-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.625rem;
    margin-top: 2.25rem;
  }

  .facility {
    padding: 1.875rem;
  }

  .facility h3 {
    font-size: 1.5625rem;
  }

  .facility p {
    margin-top: 0.875rem;
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .facility .facility__place {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
  }

  .about-logistics__inner {
    display: flex;
    align-items: baseline;
    gap: 3.5rem;
  }

  .about-logistics h2 {
    flex: none;
  }

  .about-logistics .lead {
    margin-top: 0;
  }
}