/* Rólam – a .wo-* alapokra épül (weboldal.css). Figma-terv nélkül, a szolgáltatásoldalak elemeiből. */

.ro { isolation: isolate; background: var(--base); }
.ro .wo-sav { background: transparent; }
.ro h2 { text-wrap: wrap; }

/* ---------- Hero ---------- */
.ro-hero { padding-top: calc(var(--header-h) + max(40px, 3.1vw)); padding-bottom: 120px; }
.ro-hero .wo-hero-racs { grid-template-columns: minmax(0, 670fr) minmax(0, 500fr); column-gap: 30px; align-items: center; }
.ro-hero .wo-hero-txt { margin-top: 0; }
.ro-hero .wo-hero-idezet { max-width: 560px; }
.ro-hero .wo-hero-cim { margin-top: 10px !important; text-wrap: wrap; }
.ro-alcim { margin-top: 24px !important; color: var(--contrast) !important; font-weight: 500; font-size: clamp(20px, 1.25vw, 24px) !important; line-height: 1.375 !important; }
.ro-hero .wo-szurke { margin-top: 16px; }
.ro-gombok { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.ro-foto { position: relative; aspect-ratio: 4 / 5; width: 100%; max-width: 500px; justify-self: end; border-radius: 7px; overflow: hidden; background: var(--base-2); }
.ro-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ro-foto-hely { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border); color: var(--wo-szurke); font-size: 16px; }

/* ---------- Számok ---------- */
.ro-szamok-sav { padding-bottom: 140px; }
.ro-szamok { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; list-style: none; margin: 0; padding: 40px 0 0; border-top: 1px solid var(--border); }
.ro-szamok li { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ro-szamok b { color: var(--accent); font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: clamp(42px, 3.13vw, 60px); line-height: 1; }
.ro-szamok span { color: var(--wo-szurke); font-size: 16px; line-height: 27px; }

/* ---------- Történet + idővonal ---------- */
.ro-tortenet { padding-bottom: 140px; }
.ro-tort-racs { display: grid; grid-template-columns: minmax(0, 670fr) minmax(0, 470fr); column-gap: 30px; align-items: start; }
.ro-tort-racs .wo-serif-cim { margin-bottom: 14px; }
.ro-zaro { margin-top: 8px !important; color: var(--accent) !important; font-size: clamp(24px, 1.67vw, 32px) !important; line-height: 1.25 !important; }
.ro-ido { list-style: none; margin: 8px 0 0; padding: 0 0 0 28px; position: relative; display: flex; flex-direction: column; gap: 28px; }
.ro-ido::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
.ro-ido li { position: relative; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.ro-ido li::before { content: ""; position: absolute; left: -28px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--base); border: 2px solid var(--accent); }
.ro-ido li.is-most::before { background: var(--accent); }
.ro-ido b { color: var(--yellow); font-size: 16px; line-height: 24px; font-weight: 700; }
.ro-ido span { color: var(--contrast); font-size: 16px; line-height: 27px; }
.ro-ido small { color: var(--wo-szurke); font-size: 16px; line-height: 27px; }

/* ---------- Elvek ---------- */
.ro-elvek { padding-bottom: 140px; }
.ro-elvek-cim { max-width: 938px; margin: 0 auto !important; text-align: center; color: var(--contrast); font-weight: 700; font-size: clamp(32px, 2.24vw, 43px); line-height: 1.163; }
.ro-elv-racs { margin-top: 60px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.ro-elv-racs .wo-lepes { gap: 24px; }
.ro-szam { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--base); font-weight: 700; font-size: 20px; }
.ro-elv-racs .wo-lepes-cim { margin-bottom: 0 !important; }
.ro-shift { margin-top: 32px !important; text-align: center; color: var(--wo-szurke); font-size: 16px; line-height: 27px; }

/* ---------- Kinek ---------- */
.ro-kinek { padding-bottom: 140px; }
.ro-kinek-racs { display: grid; grid-template-columns: minmax(0, 670fr) minmax(0, 470fr); column-gap: 30px; align-items: start; }
.ro-kinek-racs .wo-txt .wo-serif-cim { margin-bottom: 14px; }
.ro-nem { background: var(--base-2); padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.ro-nem h3 { margin: 0; color: var(--contrast); font-weight: 700; font-size: clamp(22px, 1.46vw, 28px); line-height: 1.3; }
.ro-xek { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ro-xek li { position: relative; margin: 0; padding-left: 28px; color: var(--contrast); font-size: 16px; line-height: 27px; }
.ro-xek li::before { content: "×"; position: absolute; left: 0; top: -1px; color: #F6533F; font-size: 24px; font-weight: 700; line-height: 27px; }

/* ---------- Idézet ---------- */
.ro-idezet { padding-bottom: 140px; }
.ro-idezet figure { margin: 0 auto; max-width: 938px; text-align: center; }
.ro-idezet blockquote { margin: 0; padding: 0; border: 0; color: var(--contrast); font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: clamp(28px, 2.08vw, 40px); line-height: 1.3; }
.ro-idezet figcaption { margin-top: 24px; color: var(--wo-szurke); font-size: 16px; line-height: 27px; }
.ro-idezet figcaption b { color: var(--yellow); }

/* ---------- Referenciák ---------- */
.ro-ref { padding-bottom: 140px; }
.ro-ref .wo-serif-cim { margin-bottom: 40px; }
.ro-ref-racs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-items: start; }
.ro-ref-kartya { display: flex; flex-direction: column; gap: 14px; padding: 36px 32px; background: var(--base-2); color: var(--contrast); text-decoration: none; transition: transform .25s ease, background-color .25s ease; }
.ro-ref-kartya:hover { transform: translateY(-4px); background: #161616; }
.ro-ref-ugyfel { color: var(--wo-szurke); font-size: 16px; line-height: 24px; }
.ro-ref-szam { color: var(--accent); font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: clamp(36px, 2.4vw, 46px); line-height: 1.05; }
.ro-ref-cimke { color: var(--contrast); font-size: 16px; line-height: 27px; }
.ro-ref-cim { padding-top: 10px; color: var(--contrast); font-weight: 700; font-size: 18px; line-height: 26px; }
.ro-ref-tovabb { color: var(--accent); font-weight: 700; font-size: 16px; line-height: 24px; }
.ro-ref-mind { margin-top: 32px; display: inline-block; }

/* ---------- Munkán kívül ---------- */
.ro-szabad { padding-bottom: 140px; }
.ro-szabad-racs { display: grid; grid-template-columns: minmax(0, 670fr) minmax(0, 470fr); column-gap: 30px; align-items: center; }
.ro-szabad .ro-foto { aspect-ratio: 1; max-width: 470px; }

.ro .konz { padding-top: 0; }

/* ---------- Tablet, mobil ---------- */
@media (max-width: 1024px) {
	.ro-hero { padding-bottom: 80px; }
	.ro-hero .wo-hero-racs, .ro-tort-racs, .ro-kinek-racs, .ro-szabad-racs { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
	.ro-foto { justify-self: start; max-width: 420px; }
	.ro-szamok { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
	.ro-elv-racs, .ro-ref-racs { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.ro-szamok-sav, .ro-tortenet, .ro-elvek, .ro-kinek, .ro-idezet, .ro-ref, .ro-szabad { padding-bottom: 88px; }
	.ro-elv-racs { margin-top: 40px; }
}
@media (max-width: 640px) {
	.ro-nem { padding: 28px 22px; }
	.ro-ref-kartya { padding: 28px 22px; }
}