/* ==========================================================================
   CityFoundry AG — Über uns

   Read from the client's Figma frame `Canvas > ueber-uns-page` (1440x4159).

   ⚠️ This frame was inside the `Canvas` group, which an earlier pass dismissed
   as a moodboard. It is not — Canvas holds two finished page designs
   (`ueber-uns-page` and `ressourcen-page`), so the file has nine page designs,
   not seven.

   Surface rhythm: hero #004045 -> #FFFFFF -> #E5F6FF -> #F5F0EB -> #FFFFFF
                   -> cta #004045

   Requires: tokens.css, base.css, components.css, pillar.css
   ========================================================================== */

/* --- Hero: single column, left aligned, no visual ----------------------- */

.cf-ahero__shell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  max-width: var(--cf-shell);
  margin: 0 auto;
}

/* Figma caps the intro at 840px so it breaks into three readable paragraphs
   rather than running the full 1280. */
.cf-ahero__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 840px;
}

.cf-ahero__lead p {
  margin: 0;
  font-family: var(--cf-font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: var(--cf-lh-body-dark);
  color: var(--cf-sky);
}

/* --- Haltung: centred header, pull-quote band, closing paragraph -------- */

.cf-haltung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* Figma: 900px band on #E5F6FF holding a single 24px statement. */
.cf-haltung__band {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 900px;
  padding: 48px;
  border-radius: var(--cf-r-card);
  background: var(--cf-crystal);
}

.cf-haltung__quote {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.4;
  text-align: center;
  color: var(--cf-ink);
}

.cf-haltung__body {
  max-width: var(--cf-shell-text);
  text-align: center;
}

/* --- Methodik: three cards --------------------------------------------- */

.cf-agrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cf-gap-2col);
  /* stretch, not start: the three cards hold different amounts of copy and
     should still end on the same line. */
  align-items: stretch;
}

.cf-acard {
  display: flex;
  flex-direction: column;
  gap: var(--cf-gap-head);
  height: 100%;
  padding: 32px;
  border-radius: var(--cf-r-card);
  background: var(--cf-white);
}

.cf-acard__title {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-h4);
  line-height: var(--cf-lh-h4);
  color: var(--cf-ink);
}

/* --- Team: the one place this page uses photography --------------------
   Three 96px circular portraits. The client asked to keep some pictures —
   these are the ones their own design keeps.                              */

.cf-team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cf-gap-2col);
  align-items: stretch;
}

.cf-member {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  padding: 32px;
  border-radius: var(--cf-r-card);
  background: var(--cf-white);
}

.cf-member__photo {
  width: 96px;
  height: 96px;
  border-radius: var(--cf-r-round);
  object-fit: cover;
  display: block;
}

.cf-member__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cf-member__name {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-h4);
  line-height: var(--cf-lh-h4);
  color: var(--cf-ink);
}

.cf-member__role {
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-nav);
  line-height: var(--cf-lh-nav);
  color: var(--cf-teal-muted);
}

/* --- Partner: a row of names, not logos (the Figma sets them as type) --- */

.cf-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cf-partners li {
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-h4);
  line-height: 1.3;
  color: var(--cf-teal-muted);
  text-align: center;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1199px) {
  .cf-agrid,
  .cf-team { grid-template-columns: 1fr 1fr; }
  .cf-agrid > :last-child:nth-child(odd),
  .cf-team > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cf-partners li { font-size: var(--cf-fs-h5); }
}

@media (max-width: 767px) {
  .cf-agrid,
  .cf-team { grid-template-columns: 1fr; }
  .cf-agrid > :last-child:nth-child(odd),
  .cf-team > :last-child:nth-child(odd) { grid-column: auto; }
  .cf-acard,
  .cf-member { padding: 24px; }
  .cf-haltung { gap: 32px; }
  .cf-haltung__band { padding: 28px 24px; }
  .cf-partners { gap: 18px 28px; }
  .cf-ahero__lead p { font-size: 17px; }
}