/* ==========================================================================
   Rólam – önálló felépítés, de az oldal saját rendszerében
   (Poppins 700 / -0.05em, #E1DAD0 · #C0A48C · #55443A · #433B2D · #8A6D60)
   ========================================================================== */

/* ---------- Fejléc: mokka sáv, portréval ---------- */

.ro-hero { position: relative; background: var(--mocha); color: var(--ink-dark); overflow: hidden; }

/* Háttérkép: a gerincvonal a szekció aljára esik, így a lenti hullámmal
   együtt zárja a blokkot; fölötte az ég adja a szöveg világos alapját. */
.ef .ro-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  /* A keret aránya majdnem egyezik a képével, ezért függőlegesen nincs mit
     vágni – a 115%-os magasság ad mozgásteret: a kép lejjebb csúszik,
     az alja pedig kifut a keretből. */
  height: 115%;
  top: 0;
  object-fit: cover;
  object-position: 50% 82%;
  display: block;
  z-index: 0;
}
/* Meleg fátyol: a paletta felé hangolja a szürke képet, és megadja a
   sötét szöveghez szükséges kontrasztot a bal oldalon. */
.ro-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #E1DAD0a6 0%, #E1DAD073 38%, #E1DAD030 68%, #E1DAD00d 100%);
}
.ro-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 52fr 34fr;
  column-gap: 6%;
  /* A szöveg és a portré teteje egy vonalban indul. */
  align-items: start;
  padding: clamp(88px, 8.1vw, 130px) var(--edge-wide);
}
.ef .ro-hero__kicker { margin: 0 0 1.4vw; font-size: var(--fs-small); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.ef .ro-hero__name { margin: 0 0 1.2vw; font-size: var(--fs-display); line-height: 1.02; letter-spacing: var(--ls-tight); }
.ef .ro-hero__role { margin: 0 0 2.4vw; font-size: var(--fs-h4); font-weight: 600; line-height: 1.2; letter-spacing: var(--ls-tight); }
.ef .ro-hero__lead { margin: 0; width: 30em; max-width: 100%; font-size: var(--fs-body); line-height: 1.6; }

.ro-hero__photo {
  aspect-ratio: 0.67;
  height: clamp(300px, 35.3vw, 480px);
  width: auto;
  margin-left: auto;
  overflow: hidden;
}
.ro-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ro-hero__wave { z-index: 3; position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 5vw; display: block; }
.ro-hero__wave path { fill: var(--beige); }

/* ---------- Számsáv ---------- */

.ro-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 2%;
  padding: 6vw var(--edge-wide) 0;
}
.ro-fact { border-top: 1px solid var(--line); padding-top: 1.4vw; }
.ef .ro-fact__num { margin: 0 0 0.5vw; font-size: var(--fs-h2); line-height: 0.95; letter-spacing: var(--ls-tight); }
.ef .ro-fact__label { margin: 0; font-size: var(--fs-small); line-height: 1.35; color: var(--ink); }

/* ---------- Szakaszcím ---------- */

.ro-sec { padding: 8vw var(--edge-wide) 0; }
.ef .ro-sec__kicker { margin: 0 0 0.9vw; font-size: var(--fs-small); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink); }
.ef .ro-sec__title { margin: 0 0 3.2vw; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: var(--ls-tight); max-width: 16em; }

/* ---------- A történet: fotó + két bekezdés ---------- */

/* A hasábok aránya úgy van megválasztva, hogy a 3:2-es fotó és a mellette
   futó két bekezdés nagyjából azonos magasságban érjen véget. */
.ro-story {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(28px, 4vw, 72px);
  /* A szöveg rövidebb a fotónál, ezért középre ül: a maradék hely fent és
     lent oszlik el, nem egyetlen lyukként az alján. */
  align-items: center;
}
.ro-story__photo {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #3F352E0d;
}
.ro-story__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ef .ro-story__text p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink-soft);
}
.ef .ro-story__text p + p { margin-top: clamp(16px, 1.6vw, 28px); }

/* ---------- Gondolkodásmód: 2×2 ---------- */

.ro-mind { display: grid; grid-template-columns: 1fr 1fr; column-gap: 5%; row-gap: 3.6vw; }
.ro-mind__item { display: grid; grid-template-columns: 3.4vw 1fr; column-gap: 1.4vw; align-items: start; }
.ef .ro-mind__num { margin: 0; font-size: var(--fs-h4); line-height: 1.1; letter-spacing: var(--ls-tight); color: var(--mocha); }
.ef .ro-mind__title { margin: 0 0 0.7vw; font-size: var(--fs-h4); line-height: 1.18; letter-spacing: var(--ls-tight); }
.ef .ro-mind__text { margin: 0; font-size: var(--fs-small); line-height: 1.6; }

/* ---------- Utazás / képsáv ---------- */

.ro-trips { padding: 0 var(--edge) 0; }
.ro-trips__row { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 0.6%; }
.ro-trips figure { margin: 0; aspect-ratio: 0.78; overflow: hidden; }
.ro-trips img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Zárás ---------- */

.ro-cta { position: relative; margin-top: 8vw; aspect-ratio: 2.6; overflow: hidden; }
.ro-cta img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.ro-cta__box {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.8vw;
  padding: 0 var(--edge);
  background: #201C1859;
  text-align: center;
}
.ef .ro-cta__title { margin: 0; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: var(--ls-tight); color: var(--beige); }
.ro-cta__btn {
  display: inline-block;
  padding: 0.82em 2.4em;
  font-size: var(--fs-body);
  color: var(--ink-dark);
  background: var(--beige);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}
.ro-cta__btn:hover { background: var(--mocha); }
.ro-cta__btn:focus-visible { outline: 2px solid var(--beige); outline-offset: 4px; }

/* ==========================================================================
   Reszponzív
   ========================================================================== */

@media (max-width: 900px) {
  .ro-hero__grid { grid-template-columns: 1fr; row-gap: 26px; padding: 96px var(--edge) 44px; }
  .ef .ro-hero__kicker { font-size: 12px; margin-bottom: 12px; }
  .ef .ro-hero__name { font-size: 46px; margin-bottom: 10px; }
  .ef .ro-hero__role { font-size: 19px; margin-bottom: 16px; }
  .ef .ro-hero__lead { font-size: 15px; width: auto; }
  .ro-hero__photo { aspect-ratio: 4/5; }
  .ro-hero__wave { height: 30px; }

  .ro-facts { grid-template-columns: 1fr 1fr; column-gap: 5%; row-gap: 22px; padding: 34px var(--edge) 0; }
  .ef .ro-fact__num { font-size: 34px; margin-bottom: 6px; }
  .ef .ro-fact__label { font-size: 13px; }
  .ro-fact { padding-top: 12px; }

  .ro-sec { padding: 44px var(--edge) 0; }
  .ef .ro-sec__kicker { font-size: 12px; }
  .ef .ro-sec__title { font-size: 30px; margin-bottom: 24px; }

  .ro-story { grid-template-columns: 1fr; row-gap: 20px; }
  .ef .ro-story__text p { font-size: 15.5px; line-height: 1.7; }

  .ro-mind { grid-template-columns: 1fr; row-gap: 26px; }
  .ro-mind__item { grid-template-columns: 34px 1fr; column-gap: 12px; }
  .ef .ro-mind__num, .ef .ro-mind__title { font-size: 20px; }
  .ef .ro-mind__text { font-size: 15px; }

  .ro-trips__row { grid-template-columns: 1fr 1fr; gap: 6px; }

  .ro-cta { margin-top: 44px; aspect-ratio: 4/3; }
  .ef .ro-cta__title { font-size: 28px; }
  .ro-cta__btn { font-size: 15px; }
}