/* Over Studio Emo — pagina-specifieke stijlen */

:root { --footer-h: 0px; } /* wordt door JS gezet (zie inline script in over.html) */

/* ---- hero: 50/50 foto + tekst, alles (labels, titel, bio, cta) in één sectie.
   Op desktop past de hele pagina — inclusief footer — op één scherm, geen scroll nodig. ---- */
@media (min-width: 781px) {
  html, body { height: 100%; overflow: hidden; }
}
.about-hero {
  display: flex;
  align-items: stretch;
  height: calc(100vh - var(--header-h) - var(--footer-h));
}
.about-hero-photo {
  width: 40%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--c-purple), var(--c-salmon));
}
.about-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.about-hero-text {
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: 0.9rem;
  padding: 1.5rem clamp(1.5rem, 4vw, 4rem);
  overflow: hidden;
}

.about-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.about-hero-text h1 {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.15;
}
.about-name-lime { color: var(--c-lime); }

.about-hero-bio p {
  font-size: clamp(0.78rem, 1vw, 0.88rem); /* ~2pt kleiner dan de gangbare broodtekst */
  line-height: 1.55;
  margin-bottom: 0.65rem;
}
.about-hero-bio p:last-child { margin-bottom: 0; }
.about-hero-bio strong { font-weight: 700; }

.about-hero-cta { margin-top: 0.3rem; }

@media (max-width: 780px) {
  .about-hero {
    height: auto;
    flex-direction: column;
    padding-top: var(--header-h);
  }
  /* foto onder de tekst, volledige breedte van de kolom */
  .about-hero-photo {
    order: 2;
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: none;
    margin: 2.5rem 0 0;
  }
  .about-hero-text { order: 1; width: 100%; padding: 0 var(--gutter) 2.5rem; overflow: visible; gap: 1.25rem; }
  .about-hero-text h1 { font-size: clamp(2.2rem, 8vw, 3rem); }
  .about-hero-bio p { font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.25rem; }
}