/* About page sections. Every selector here is unique to this page and the
   breakpoints sit at the end of the file, per the convention in
   application.css.
   Note this file sorts FIRST under `stylesheet_link_tag :app`, so it must
   never rely on overriding base.css. It doesn't — and var() tokens resolve at
   computed-value time, so using var(--cream) here is fine even though
   base.css declares it later. */

/* Copy-only hero (the founders' photo moved under Our Story at the client's
   request), so it's a single centred column rather than a two-column grid. */
.about-hero {
  position: relative;
  overflow: hidden;
  padding: 64px var(--pad-x) 72px;
  background: var(--cream);
  text-align: center;
}

/* Soft translucent blob, per the style guide's shape language. */
.blob-yellow {
  position: absolute;
  top: -80px;
  right: -60px;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: var(--yellow);
  opacity: 0.18;
}

.about-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}

.about-hero-copy h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display-font);
  font-size: clamp(2.4rem, 4.2vw, 2.9rem);
  font-weight: 800;
  line-height: 1.1;
}

.about-hero-copy p {
  max-width: 560px;
  margin: 18px auto 0;
  color: var(--body);
  font-size: clamp(1.05rem, 1.6vw, 1.15rem);
  font-weight: 600;
  line-height: 1.6;
}

/* Founders' photo under Our Story (app/assets/images/meet-matt-and-ryan.jpg,
   1448x1086). 4:3 slot at every width; object-fit covers a future photo that
   isn't exactly 4:3. */
.story-photo {
  margin: 10px 0 0;
}

.story-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--card-shadow);
}

.story-photo figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-family: var(--display-font);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
}

/* Gap handles the space under .section-title, which owns `margin: 0` in
   base.css and cannot be overridden from this file. */
.story-section {
  display: grid;
  gap: 26px;
  max-width: 880px;
  margin: 0 auto;
  padding: 72px clamp(20px, 4vw, 44px);
}

.story-body {
  max-width: 70ch; /* ~93 characters per line at 880px was over the comfortable ceiling */
  margin: 0 auto;
  color: var(--body);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.8;
}

.story-body p {
  margin: 0 0 18px;
}

.story-body p:last-child {
  margin-bottom: 0;
}

.info-band {
  padding: 60px var(--pad-x);
  background: var(--sky-wash);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 28px);
  max-width: 1000px;
  margin: 0 auto;
}

.info-card {
  border-radius: var(--card-radius);
  padding: 34px;
  background: #ffffff;
  box-shadow: var(--card-shadow);
}

.info-card h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--display-font);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
}

.info-card p {
  margin: 0;
  color: var(--body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.7;
}

.safety-section {
  display: grid;
  gap: 38px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 72px clamp(20px, 4vw, 44px) 84px;
}

.safety-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.safety-item {
  text-align: center;
}

.safety-icon {
  display: block;
  margin-bottom: 14px;
  font-size: 2.25rem;
  line-height: 1;
}

.safety-item h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--display-font);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.25;
}

.safety-item p {
  margin: 0;
  color: var(--body);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.6;
}

@media (max-width: 960px) {
  .about-hero {
    padding-top: 52px;
  }

  .safety-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (max-width: 640px) {
  .about-hero {
    padding: 44px 20px 56px;
  }

  .blob-yellow {
    width: 200px;
    height: 200px;
    top: -70px;
    right: -50px;
  }


  .story-section {
    gap: 20px;
    padding: 52px 20px;
  }

  .info-band {
    padding: 44px 20px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .info-card {
    padding: 26px;
  }

  .safety-section {
    gap: 28px;
    padding: 52px 20px 60px;
  }
}