/* ─────────────────────────────────────────────────────────
   Blue Terra — the "Über uns" page

   Only this page's own parts live here; the header, footer and
   buttons come from styles.css. Content sits in a 1400 px column at
   90vw; the sections take turns, words beside a photograph that swaps
   sides each time, every other one on a white band.
   ───────────────────────────────────────────────────────── */

.about-page .wrap { max-width: 1400px; width: 90vw; padding-inline: 0; }
.ab-section { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }

/* ── Hero ─────────────────────────────────────────────────
   The photograph fills the width; the words sit over it, centred. */
.ab-hero {
  position: relative; min-height: min(78vh, 640px);
  display: grid; align-items: center;
  /* The Ischia sailing boat, the same photograph that heads its trip page.
     The boat sits right of centre, so the words go to the left over open
     water instead of across the sail. */
  background: url("assets/trips/dolphin-01.webp") 62% 40% / cover no-repeat;
}
/* Darker on the left, where the words sit; the boat on the right keeps
   the photograph's own colours. */
.ab-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 24, 38, .5), rgba(8, 24, 38, .18) 55%, rgba(8, 24, 38, 0) 80%);
}
.ab-hero-inner { position: relative; padding: 6rem 0 3rem; text-align: left; }
.ab-hero-inner > * { max-width: 15ch; }
.about-page .ab-hero-inner p { max-width: 30ch; }
.ab-hero h1 {
  font-family: var(--display); font-weight: 600; color: #fff; margin: 0;
  font-size: clamp(2rem, 6vw, 4.4rem); line-height: 1.05;
  text-shadow: 0 2px 18px rgba(8, 24, 38, .45);
}
/* The photograph is bright behind this line, so it carries a heavier
   shadow than the headline to stay readable. */
.about-page .ab-hero p {
  color: #fff; margin: .6rem 0 0; font-weight: 500;
  font-size: clamp(1rem, 1.9vw, 1.5rem);
  text-shadow: 0 1px 3px rgba(8, 24, 38, .85), 0 2px 16px rgba(8, 24, 38, .7);
}

/* On a phone the boat and the words don't fit side by side, and over each
   other the headline crosses the sail. So the photograph takes the top of
   the band and the words sit beneath it, on the deep blue of the sea it
   fades into. The band stays short enough for the story to peek in. */
@media (max-width: 639px) {
  .ab-hero {
    min-height: 0; align-items: end;
    background: url("assets/trips/dolphin-01.webp") 64% 0 / auto 340px no-repeat, #043464;
  }
  .ab-hero-scrim { background: linear-gradient(180deg, rgba(4, 52, 100, 0) 220px, #043464 340px, #032a52); }
  .ab-hero-inner { padding: 300px 0 1.75rem; text-align: center; }
  .ab-hero-inner > *, .about-page .ab-hero-inner p { max-width: none; }
  .ab-hero h1 { font-size: clamp(1.8rem, 8.4vw, 2.3rem); }
}

/* Headings in the same face as the rest of the site. Only inside <main>:
   the header and the footer carry headings of their own and keep their
   own colours — the footer's would turn dark on its dark band otherwise. */
.about-page main :is(h2, h3, h4) { font-family: var(--display); font-weight: 600; color: var(--heading); }
.about-page main p { color: var(--text); line-height: 1.7; }

/* ── The social rail down the left edge ─────────────────── */
.ab-social {
  position: fixed; left: 14px; top: 50%; transform: translateY(-50%); z-index: 80;
  display: flex; flex-direction: column; gap: 14px;
}
.ab-social img { width: 34px; height: 34px; display: block; }
@media (max-width: 1100px) { .ab-social { display: none; } }

/* ── The sections ─────────────────────────────────────────
   Every other section sits on a white band, so the page reads in
   chapters. A jump to one (the home page links to #impact) stops
   below the fixed header rather than under it. */
.ab-band { background: #fff; }
.about-page main > section[id] { scroll-margin-top: var(--header-h); }

.ab-section h2, .ab-report h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.12;
  margin: 0 0 1.1rem; text-wrap: balance;
}
.ab-text p { margin: 0 0 1rem; font-size: clamp(1rem, 1.15vw, 1.0625rem); }
.ab-text p:last-child { margin-bottom: 0; }

.about-page .ab-overline {
  font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--terra); margin: 0 0 .8rem;
}
.about-page .ab-lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; }

/* Words beside a photograph. The photograph swaps sides from one section
   to the next; on a phone it always comes first, then the words. */
.ab-row { display: grid; gap: clamp(1.75rem, 4vw, 4.5rem); align-items: center; }
.ab-row .ab-figure { order: -1; }
@media (min-width: 860px) {
  .ab-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ab-row .ab-figure { order: 0; }
  .ab-row-flip .ab-figure { order: -1; }
}

.ab-figure { margin: 0; }
.ab-figure img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
/* On a phone the photographs stand above the words, so they are cut a
   little flatter there — less to scroll past on the way to the text. */
@media (max-width: 859px) {
  .ab-figure img { aspect-ratio: 3 / 2; }
}

/* A closing line, set in the heading face and slanted. */
.about-page .ab-closing {
  font-family: var(--display); font-style: italic; color: var(--navy);
  font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.35;
  text-align: center; max-width: 48ch; margin: clamp(2rem, 4vw, 3rem) auto 0; text-wrap: balance;
}

/* ── 1. The quote the story ends on ───────────────────── */
.ab-quote-band { background: var(--sky-bg); padding: clamp(2.75rem, 6vw, 5rem) 0; }
.ab-quote { margin: 0 auto; max-width: 860px; text-align: center; }
.ab-quote::before {
  content: "\201C"; display: block; font-family: var(--display);
  font-size: clamp(3.5rem, 7vw, 5rem); line-height: .6; color: var(--terra); margin-bottom: .4rem;
}
.about-page .ab-quote p {
  margin: 0; font-family: var(--display); font-style: italic; font-weight: 500;
  color: var(--navy); font-size: clamp(1.5rem, 2.9vw, 2.3rem); line-height: 1.3; text-wrap: balance;
}

/* ── 2. Who we are: the photo beside the two cards ────── */
/* Wide enough that the line under the heading runs to two lines on a
   laptop rather than four; `balance` splits them evenly. */
.ab-head { text-align: center; max-width: 1150px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.ab-head p { margin: 0; text-wrap: balance; }
.ab-team { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
.ab-team .ab-figure img { aspect-ratio: 3 / 2; }
/* Side by side, the photo grows to the height of the two cards. */
@media (min-width: 900px) {
  .ab-team { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
  .ab-team .ab-figure img { height: 100%; }
}
.ab-people { display: grid; gap: 1.25rem; }
.ab-person { background: var(--cream); border-radius: var(--radius); padding: clamp(1.25rem, 2.4vw, 1.75rem); }
.ab-person h3 { font-size: 1.55rem; margin: 0 0 .2rem; }
.about-page .ab-role { color: var(--terra); font-weight: 600; font-size: .9375rem; line-height: 1.45; margin: 0 0 .75rem; }
.ab-person p:last-of-type { margin: 0; }
/* On a phone the page is long, so each founder shows name and role and
   keeps the rest behind "Mehr erfahren". Wider screens show it all. */
.ab-person-more { display: none; }
@media (max-width: 639px) {
  .ab-person-text { display: none; }
  .ab-person.is-open .ab-person-text { display: block; margin-bottom: .75rem; }
  .about-page .ab-role { margin-bottom: .5rem; }
  .ab-person-more {
    display: inline-flex; align-items: center; gap: .35rem;
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-weight: 600; font-size: .9375rem; color: var(--navy);
    text-decoration: underline; text-underline-offset: 3px;
  }
}

/* ── 4. Quality and safety: four points ───────────────── */
.ab-points, .ab-steps { display: grid; gap: 1.25rem; }
.ab-points { margin-top: clamp(2rem, 4vw, 3.25rem); }
@media (min-width: 640px)  { .ab-points, .ab-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ab-points, .ab-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ab-point, .ab-step { background: var(--cream); border-radius: var(--radius); padding: 1.5rem; }
/* The impact section sits on the cream page, so its steps are white. */
.ab-step { background: #fff; }
.ab-point-icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--sky-bg);
  display: grid; place-items: center; margin-bottom: 1rem;
}
.ab-point-icon svg {
  width: 26px; height: 26px; fill: none; stroke: var(--navy);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.ab-point h3, .ab-step h4 { font-size: 1.25rem; line-height: 1.25; margin: 0 0 .5rem; }
.ab-point p, .ab-step p { margin: 0; font-size: .975rem; line-height: 1.6; }
/* On a phone each point and step becomes a row — icon or number on the
   left, words beside it — like the pillars on the home page. */
@media (max-width: 639px) {
  .ab-points, .ab-steps { gap: .75rem; }
  .ab-point, .ab-step {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px;
    padding: 1.1rem 1.1rem 1.15rem; align-items: start;
  }
  .ab-point-icon, .ab-step-no { grid-row: span 2; margin: 0; }
  .ab-point-icon { width: 44px; height: 44px; }
  .ab-point-icon svg { width: 22px; height: 22px; }
  .ab-step-no { width: 34px; height: 34px; }
  .ab-point h3, .ab-step h4 { font-size: 1.125rem; margin-bottom: .25rem; }
}

/* ── 6. Our impact: the four steps ────────────────────── */
.ab-steps-h { text-align: center; font-size: clamp(1.45rem, 2.3vw, 1.95rem); margin: clamp(2.5rem, 5vw, 4rem) 0 1.5rem; }
.ab-steps { list-style: none; margin: 0; padding: 0; }
.ab-step-no {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--terra); color: #fff; font-weight: 700; margin-bottom: 1rem;
}

/* ── 7. The impact report, on a pale blue band ────────── */
/* Light on purpose: the footer below is navy, and a dark band here ran
   straight into it. */
.ab-report { background: var(--sky-bg); padding: clamp(3rem, 7vw, 6rem) 0; }
.ab-text .ab-report-cta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1.75rem; }
.about-page .ab-report-note { color: var(--muted); font-size: .875rem; }
/* One column on smaller screens: the button and its note sit centred,
   one under the other, rather than hanging off the left edge. */
@media (max-width: 859px) {
  .ab-text .ab-report-cta { flex-direction: column; justify-content: center; text-align: center; }
}

/* ── The way on: a trip, or a conversation ─────────────── */
.ab-cta { text-align: center; }
.ab-cta h2 { max-width: 24ch; margin-inline: auto; }
.ab-cta .ab-lead { max-width: 52ch; margin: 0 auto; }
.ab-cta-buttons {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}