/* About page — reuses landing.css for tokens, fonts, nav, footer, buttons,
   and the h1/h2/h3 responsive type scale (same values at every breakpoint).
   This file only covers content specific to the About page itself. */

.ab-body {
  /* Every text node in this design uses #02020b, even at desktop —
     landing.html only switches to this at tablet/mobile. */
  --lp-ink: #02020b;
}

.ab-hero {
  text-align: center;
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 46px var(--lp-margin) 70px;
}

.ab-hero h1 { margin-bottom: 20px; }

.ab-hero-image {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

.ab-hero-image img { width: 100%; height: auto; display: block; }

/* Story section: photo + text, side by side at desktop */
.ab-story {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: var(--lp-max);
  margin: 80px auto 0;
  padding: 0 var(--lp-margin);
}

.ab-story-image {
  flex: 0 0 666px;
  border-radius: 20px;
  overflow: hidden;
}

.ab-story-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

.ab-story-content {
  flex: 0 0 666px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ab-story-content p { font-size: 25px; font-weight: 300; }

/* "A little bit more about Friendly" section */
.ab-more {
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 100px var(--lp-margin) 0;
}

.ab-more-grid {
  display: grid;
  grid-template-columns: 325px 325px 666px;
  grid-template-areas:
    "whatis small  photo"
    "who    .      photo";
  column-gap: 20px;
  row-gap: 40px;
  margin-top: 20px;
}

.ab-more-item p { font-size: 17px; font-weight: 300; margin-top: 10px; }

.ab-more-photo { border-radius: 20px; overflow: hidden; }
.ab-more-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Closing contact section */
.ab-contact {
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 100px var(--lp-margin) 80px;
}

.ab-contact p {
  font-size: 25px;
  font-weight: 300;
  max-width: 670px;
  margin-top: 10px;
}

.ab-contact-link {
  /* Fixed at 25px in the Figma file at every breakpoint — it doesn't
     shrink along with the surrounding paragraph the way the rest of the
     page's text does. That's fine at the 402px+ widths the design covers,
     but the unbroken email string can overflow narrower phones (e.g.
     320px) — let it wrap mid-string there rather than shrink the font
     and break from spec. */
  font-size: 25px;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Tablet — photo drops out of the story section entirely, everything
   centered; the more-grid becomes a 2-column (text stack + photo) layout. */
@media (min-width: 834px) and (max-width: 1024px) {
  .ab-hero { padding: 46px var(--lp-margin) 40px; }

  .ab-story { flex-direction: column; align-items: center; text-align: center; margin-top: 40px; }
  .ab-story-image { display: none; }
  .ab-story-content { flex: 0 0 auto; max-width: 755px; align-items: center; }
  .ab-story-content p { font-size: 21px; }

  .ab-more { padding-top: 40px; text-align: left; }
  .ab-more-grid {
    grid-template-columns: 238px 495px;
    grid-template-areas:
      "whatis photo"
      "small  photo"
      "who    photo";
    column-gap: 21px;
    row-gap: 20px;
  }
  .ab-more-item h3 { font-size: 21px; }
  .ab-more-item p { font-size: 14px; }

  .ab-contact { text-align: center; padding-top: 40px; }
  .ab-contact p { margin-left: auto; margin-right: auto; font-size: 21px; }
}

/* Mobile — single column throughout, everything centered, both photos in
   the lower section drop out entirely (only the hero photo remains). */
@media (max-width: 833px) {
  .ab-hero { padding: 30px var(--lp-margin) 40px; }
  .ab-hero h1 { margin-bottom: 20px; }

  .ab-story { flex-direction: column; align-items: center; text-align: center; margin-top: 40px; padding: 0 20px; }
  .ab-story-image { display: none; }
  .ab-story-content { flex: 0 0 auto; align-items: center; }
  .ab-story-content p { font-size: 18px; }

  .ab-more { padding: 40px 20px 0; text-align: center; }
  .ab-more-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "whatis"
      "small"
      "who";
    row-gap: 20px;
  }
  .ab-more-item { display: flex; flex-direction: column; align-items: center; }
  .ab-more-item h3 { font-size: 18px; }
  .ab-more-item p { font-size: 14px; }
  .ab-more-photo { display: none; }

  .ab-contact { text-align: center; padding: 40px 20px 80px; }
  .ab-contact p { margin-left: auto; margin-right: auto; font-size: 18px; margin-top: 20px; }
}

/* Gap between the tablet ceiling (1024px) and desktop's fixed-width story
   row + more-grid, which need ~1436px to fit without overflowing (666+24+
   666+80 margins, same for the grid). No Figma reference exists for this
   range — same situation as landing.css's equivalent gap — so this just
   stacks everything to avoid overflow rather than guessing a design. */
@media (min-width: 1025px) and (max-width: 1435px) {
  .ab-story { flex-direction: column; align-items: flex-start; }
  .ab-story-image, .ab-story-content { flex: 1 1 auto; width: 100%; max-width: 666px; }

  .ab-more-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "whatis"
      "small"
      "who"
      "photo";
  }
  .ab-more-photo { max-width: 666px; }
}