/* About page. Figma "About · Desktop 1440" (64:2) + "About · Mobile 390" (253:162) */

/* Clouds in Figma are flipped vertically (not rotated) */
.clouds--flip img { rotate: none; scale: 1 -1; }

/* ---------- Hero (77:2) ---------- */
.about-hero { background: var(--sky); padding: var(--hero-top) 0 90px; overflow-x: clip; }
.about-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 640px);
  grid-template-rows: auto 1fr;
  grid-template-areas: "title illo" "text illo";
  justify-content: space-between;
  column-gap: 48px;
  row-gap: 24px;
}
.about-hero__title { grid-area: title; font-weight: 700; font-size: 60px; line-height: 66px; color: var(--ink); }
.about-hero__text { grid-area: text; display: flex; flex-direction: column; gap: 24px; }
.about-hero__text p { font-size: 20px; line-height: 28px; color: var(--text); }
.about-hero__illo { grid-area: illo; }

/* ---------- Our Mission (64:154) ---------- */
.mission { padding: 100px 0 130px; }
.mission__inner { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.mission__title { max-width: 1080px; font-weight: 700; font-size: 48px; line-height: 60px; color: var(--ink); }
.mission__title em { font-style: normal; color: #5AB6CC; }
.mission__text { max-width: 780px; font-size: 20px; line-height: 30px; color: var(--text); }

/* ---------- Thoughtfully Designed (77:66) ---------- */
.designed { background: var(--green-10); padding: 70px 0 110px; }
.designed__inner {
  display: grid;
  grid-template-columns: minmax(0, 617px) minmax(0, 470px);
  grid-template-rows: auto 1fr;
  grid-template-areas: "title collage" "text collage";
  column-gap: 64px;
  row-gap: 22px;
}
.designed__title { grid-area: title; max-width: 500px; font-weight: 700; font-size: 40px; line-height: 44px; color: var(--ink); }
.designed__text { grid-area: text; display: flex; flex-direction: column; gap: 22px; max-width: 500px; }
.designed__text p { font-size: 20px; line-height: 28px; color: var(--text); }

/* Gameplay collage (77:71), 470 x 384 design px */
.collage {
  grid-area: collage;
  position: relative;
  width: 100%;
  aspect-ratio: 470 / 384;
  container-type: inline-size;
  --u: calc(100cqw / 470);
}
.collage__card {
  position: absolute;
  left: calc(var(--cx) * var(--u));
  top: calc(var(--cy) * var(--u));
  width: calc(var(--cw) * var(--u));
  height: calc(var(--ch) * var(--u));
  translate: -50% -50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: #fff;
  border-radius: calc(26 * var(--u));
}
.collage__card img {
  flex: none;
  width: calc(var(--iw) * var(--u));
  height: calc(var(--ih) * var(--u));
  max-width: none;
  translate: calc(var(--ix, 0) * var(--u)) calc(var(--iy, 0) * var(--u));
  object-fit: cover;
  border-radius: calc(18 * var(--u));
}
.collage__card--adventure {
  --cx: 124.738; --cy: 77.843; --cw: 242.347; --ch: 142.557;
  --iw: 225.333; --ih: 127.967; --ix: .11; --iy: .28;
  rotate: -3deg;
}
.collage__card--drawing {
  --cx: 345.242; --cy: 306.527; --cw: 242.347; --ch: 142.557;
  --iw: 226.617; --ih: 128.696; --ix: .53; --iy: .04;
  rotate: 3deg;
}
.collage__card--tunes {
  --cx: 235; --cy: 192.5; --cw: 328; --ch: 187;
  --iw: 309; --ih: 171; --ix: .5;
}

/* ---------- Growing Minds (64:216) ---------- */
.minds { padding: 70px 0 120px; }
.minds__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.minds__sub { margin: 0; line-height: 32px; }
.skills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 4px 0; }
.skill {
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--bg);
  font-weight: 700; font-size: 16px; line-height: 24px; color: var(--fg);
  white-space: nowrap;
}
.minds__text { font-size: 20px; line-height: 28px; color: var(--text); }
.top-apps { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 36px; margin: 44px 0; } /* 20px spacers + flex gaps in Figma */
.top-app {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-weight: 700; font-size: 16px; line-height: 24px; color: var(--ink); white-space: nowrap;
}
.top-app img {
  width: 124px; height: 124px;
  border-radius: 30px;
  object-fit: cover;
  transition: transform .15s ease;
}
.top-app:hover img { transform: translateY(-2px); }
.top-app:hover { color: var(--blue); }
.minds__cta { padding: 17px 32px; }


/* ================= Responsive ================= */
@media (min-width: 1340px) {
  /* the illustration overhangs the content edge like in the 1440 mockup */
  .about-hero__illo { margin-right: -48px; }
}

@media (max-width: 1100px) {
  .about-hero__title { font-size: 48px; line-height: 54px; }
  .designed__inner { column-gap: 40px; }
  .skills { gap: 8px; }
  .top-apps { column-gap: 20px; }
  .top-app img { width: 108px; height: 108px; border-radius: 26px; }
}

/* Mobile layout — Figma "About · Mobile 390" */
@media (max-width: 899px) {
  .about-hero { padding: var(--hero-top) 0 36px; }
  .about-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "title" "illo" "text";
    max-width: 560px;
  }
  .about-hero__title { font-size: 36px; line-height: 66px; text-align: center; }
  .about-hero__text p { font-size: 16px; line-height: 28px; text-align: center; }

  .mission { padding: 48px 0; }
  .mission__inner { gap: 20px; max-width: 560px; }
  .mission__title { font-size: 26px; line-height: 34px; }
  .mission__text { font-size: 16px; line-height: 30px; }

  .designed { padding: 48px 0; }
  .designed__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "title" "collage" "text";
    max-width: 560px;
  }
  .designed__title { max-width: none; font-size: 24px; line-height: 31px; }
  .designed__text { max-width: none; }
  .designed__text p { font-size: 16px; line-height: 28px; }

  .minds { padding: 48px 0; }
  .minds__inner { gap: 20px; max-width: 560px; }
  .minds__title { font-size: 24px; line-height: 31px; }
  .minds__sub { font-size: 16px; line-height: 32px; }
  .skills { gap: 8px; padding: 0; }
  .minds__text { font-size: 16px; line-height: 28px; }
  .top-apps { gap: 16px; margin: 0; }
  .top-app img { width: 124px; height: 124px; border-radius: 30px; }
  .minds__cta { width: 100%; font-size: 22px; letter-spacing: .03em; }
}

/* Tablet (601–899px): wider centred column, button sized to its text */
@media (min-width: 601px) and (max-width: 899px) {
  .about-hero__inner, .mission__inner, .designed__inner, .minds__inner { max-width: 720px; }
  .about-hero__title { font-size: 40px; line-height: 1.1; }
  .about-hero__illo { justify-self: center; width: 80%; }
  .top-apps { gap: 20px 24px; }
  .minds__cta { width: auto; font-size: 20px; }
}