/* RolliPolli Service Sections – frontend stílusok
   A React oldal tipográfiai tokenjeit tükrözi. */

.rpab-section {
	--rpab-brand: #da3831;
	--rpab-ink: #004a6b;
	--rpab-ink-deep: #055078;
	--rpab-sun: #ffbf2d;
	--rpab-cream: #fdf6ec;
	--rpab-cream-deep: #f7ead6;
	--rpab-card: #ffffff;
	--rpab-radius: 2rem;
	--rpab-shadow-soft: 0 10px 30px rgba(5, 80, 120, 0.08);
	--rpab-shadow-lift: 0 24px 60px rgba(5, 80, 120, 0.14);

	--rpab-h1-size: 68px;
	--rpab-h1-line: 71px;
	--rpab-h2-size: 48px;
	--rpab-h2-line: 48px;
	--rpab-h3-size: 24px;
	--rpab-h3-line: 28px;
	--rpab-body-size: 18px;
	--rpab-body-line: 29px;

	position: relative;
	padding: 80px 0;
	color: var(--rolli-text, #4f606d);
	font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
	font-size: var(--rpab-body-size);
	line-height: var(--rpab-body-line);
}

.rpab-section--tight { padding: 40px 0; }

.rpab-section--dark {
	background: var(--rpab-ink-deep);
	color: #fff;
}
.rpab-section--dark .rpab-heading,
.rpab-section--dark .rpab-muted { color: #fff; }
.rpab-section--dark .rpab-muted { opacity: .8; }

.rpab-container {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}
.rpab-narrow { max-width: 860px; }
.rpab-center { text-align: center; }
.rpab-center-text { text-align: center; }

/* Címsorok */
.rpab-heading {
	font-family: "Fraunces", Georgia, serif;
	font-weight: 600;
	color: var(--rpab-ink);
	margin: 0 0 .4em;
	letter-spacing: -0.01em;
}
h1.rpab-heading { font-size: var(--rpab-h1-size); line-height: var(--rpab-h1-line); }
h2.rpab-heading { font-size: var(--rpab-h2-size); line-height: var(--rpab-h2-line); }
h3.rpab-heading { font-size: var(--rpab-h3-size); line-height: var(--rpab-h3-line); }
h4.rpab-heading { font-size: 20px; line-height: 26px; }
h5.rpab-heading,
h6.rpab-heading { font-size: 18px; line-height: 24px; }
div.rpab-heading,
span.rpab-heading,
p.rpab-heading { display: block; font-size: var(--rpab-h2-size); line-height: var(--rpab-h2-line); }

/* Kiemelés */
.rpab-mark {
	position: relative;
	display: inline;
	background-image: linear-gradient(transparent 62%, var(--rpab-sun) 62%, var(--rpab-sun) 92%, transparent 92%);
	padding: 0 .06em;
}
.rpab-mark--ink { background-image: linear-gradient(transparent 62%, rgba(255, 191, 45, .65) 62%, rgba(255, 191, 45, .65) 92%, transparent 92%); }
.rpab-mark--color { background: none; color: var(--rpab-brand); }

.rpab-head { margin-bottom: 40px; }
.rpab-head.rpab-center { margin-left: auto; margin-right: auto; max-width: 760px; }

.rpab-chip {
	display: inline-block;
	padding: 6.4px 13.6px;
	border-radius: 999px;
	/* Lovable eyebrow-chip: halvány barack háttér + ink, 600, tight letter
	   (mért mind az about-oldalakon: #feeccd / #004a6b / 600 / 12.5px / .25px),
	   NEM az élénk sárga (--rpab-sun). */
	background: #feeccd;
	color: #004a6b;
	font-size: 12.5px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: .25px;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.rpab-lead { font-size: 20px; line-height: 32px; margin: 0 0 16px; }
.rpab-lead--quote { font-style: italic; }
.rpab-muted { opacity: .75; font-size: 16px; line-height: 26px; }
.rpab-note { margin-top: 16px; }

/* Gombok */
.rpab-btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.rpab-btn-row--center { justify-content: center; }
.rpab-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: 999px;
	/* Lovable BrandButton: 14px/600/tracking-wide(.35px). */
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.35px;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.rpab-btn--primary { background: var(--rpab-brand); color: #fff; box-shadow: var(--rpab-shadow-soft); }
.rpab-btn--ghost { background: transparent; color: var(--rpab-ink); border: 2px solid currentColor; }
.rpab-btn:hover { transform: translateY(-2px); box-shadow: var(--rpab-shadow-lift); }
.rpab-section--dark .rpab-btn--ghost { color: #fff; }

/* Ikonok */
.rpab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--rpab-ink);
}
.rpab-icon svg, .rpab-icon i { width: 28px; height: 28px; font-size: 24px; fill: currentColor; }
.rpab-icon--round {
	width: 56px; height: 56px;
	border-radius: 999px;
	background: rgba(255, 191, 45, .3);
	flex: none;
}
.rpab-icon--soft {
	width: 48px; height: 48px;
	border-radius: 16px;
	background: var(--rpab-cream-deep);
	flex: none;
}
.rpab-icon--inline { margin-right: 8px; }

/* Kártyák (közös) */
.rpab-card,
.rpab-group-card,
.rpab-price-card,
.rpab-step {
	background: var(--rpab-card);
	border-radius: var(--rpab-radius);
	box-shadow: var(--rpab-shadow-soft);
	padding: 28px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.rpab-card:hover,
.rpab-group-card:hover,
.rpab-price-card:hover { transform: translateY(-4px); box-shadow: var(--rpab-shadow-lift); }

/* Hero */
/* Lovable-arány: a kép-oszlop nagyobb (text ~463 / kép ~670 @1280) */
.rpab-hero-grid { display: grid; gap: 40px; grid-template-columns: 1fr 1.45fr; align-items: center; }
/* Profil-hero fotó — Lovable: 4:3 arányú, 40px lekerekített, enyhén (1°) döntött
   kártya krém háttéren, NEM a nyújtott portré + erős árnyék. (mért: aspect 4/3,
   radius 40px, rotate 1deg, wrapper bg krém, img object-fit cover). */
.rpab-hero-media { position: relative; }
/* Csak a KÉPET tartalmazó média kapja a kártya-geometriát — az üres .rpab-hero-media
   konténer (pl. rolunk/gyik/hazirend, ahol nincs hero-kép) NE váljon látható krém dobozzá. */
.rpab-hero-media:has(img) { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 40px; transform: rotate(1deg); background: #f6f1e6; }
.rpab-hero-media img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; box-shadow: none; }
.rpab-hero-badge {
	/* Kiss Ernő (2026-08-22): a fotón lévő jelvény nem kell — a Lovable-ön sincs. */
	display: none;
	position: absolute;
	left: 16px; bottom: 16px;
	align-items: center; gap: 12px;
	background: #fff;
	border-radius: 20px;
	padding: 14px 18px;
	box-shadow: var(--rpab-shadow-lift);
}
.rpab-hero-bullets, .rpab-bullets { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.rpab-hero-bullets li, .rpab-bullets li { display: flex; gap: 12px; align-items: flex-start; }
.rpab-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--rpab-brand); margin-top: 10px; flex: none; }

/* Split */
.rpab-split-grid { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; align-items: center; }
.rpab-split-media img { width: 100%; border-radius: var(--rpab-radius); object-fit: cover; box-shadow: var(--rpab-shadow-lift); }
.rpab-split-grid.is-reversed .rpab-split-media { order: 2; }

/* Rácsok */
.rpab-cards-grid,
.rpab-groups-grid,
.rpab-price-grid,
.rpab-steps-grid,
.rpab-gallery-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rpab-groups-grid, .rpab-price-grid { gap: 24px; }

.rpab-card-label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rpab-brand); }
.rpab-card-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-weight: 700; color: var(--rpab-brand); text-decoration: none; }
.rpab-card-btn:hover { color: var(--rpab-ink); }

/* Csoportkártyák */
.rpab-group-head { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.rpab-group-head .rpab-heading { margin-bottom: 4px; }
.rpab-group-rows { display: grid; gap: 12px; margin-bottom: 18px; }
.rpab-group-row { background: var(--rpab-cream); border-radius: 18px; padding: 14px 18px; }
.rpab-group-row-name { font-weight: 700; margin: 0 0 2px; }
.rpab-group-row p { margin: 0; font-size: 16px; line-height: 25px; }

/* Pipás listák */
.rpab-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rpab-checklist li { display: flex; gap: 10px; align-items: flex-start; }
.rpab-check {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; flex: none; margin-top: 3px;
	border-radius: 999px; background: var(--rpab-brand); color: #fff;
	font-size: 13px; font-weight: 700;
}
.rpab-checkgrid { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rpab-checkgrid li { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: var(--rpab-radius); padding: 20px 22px; box-shadow: var(--rpab-shadow-soft); }

/* Lépések */
.rpab-step { text-align: center; position: relative; }
.rpab-step-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 999px;
	background: var(--rpab-brand); color: #fff; font-weight: 700;
	margin-bottom: 14px;
}
.rpab-step-arrow { color: var(--rpab-sun); align-self: center; font-size: 24px; }

/* Sávok */
.rpab-banner {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	border-radius: var(--rpab-radius);
	padding: 22px 28px;
	background: rgba(255, 191, 45, .25);
}
.rpab-banner p { margin: 0; font-weight: 600; }
.rpab-banner .rpab-heading { margin: 0 0 4px; }
.rpab-banner--brand { background: var(--rpab-brand); color: #fff; }
.rpab-banner--brand .rpab-heading { color: #fff; }
.rpab-banner--ink { background: var(--rpab-ink-deep); color: #fff; }
.rpab-banner--ink .rpab-heading { color: #fff; }
.rpab-banner--cream { background: var(--rpab-cream-deep); }
.rpab-banner .rpab-btn-row { margin: 0 0 0 auto; }

/* Árak */
.rpab-price-card.is-featured { outline: 3px solid var(--rpab-sun); }
.rpab-price { font-size: 30px; line-height: 1.2; margin: 6px 0 12px; font-family: "Fraunces", Georgia, serif; }
.rpab-price span { font-size: 16px; font-family: inherit; opacity: .7; }
.rpab-section--dark .rpab-price-card { background: rgba(255, 255, 255, .08); color: #fff; }
.rpab-section--dark .rpab-price-card .rpab-heading { color: #fff; }

/* Idővonal */
.rpab-timeline-list { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; }
.rpab-timeline-list::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: rgba(5, 80, 120, .15); }
.rpab-timeline-list li { position: relative; padding-bottom: 28px; }
.rpab-timeline-dot { position: absolute; left: -28px; top: 6px; width: 16px; height: 16px; border-radius: 999px; background: var(--rpab-brand); box-shadow: 0 0 0 4px rgba(218, 56, 49, .18); }
.rpab-timeline-time { display: inline-block; font-weight: 700; color: var(--rpab-brand); letter-spacing: .04em; margin-bottom: 4px; }
.rpab-timeline-body .rpab-heading { margin-bottom: 6px; }
.rpab-timeline-body p { margin: 0; }

/* Galéria */
.rpab-gallery-grid figure { margin: 0; }
.rpab-gallery-grid img { width: 100%; height: 260px; object-fit: cover; border-radius: var(--rpab-radius); box-shadow: var(--rpab-shadow-soft); }

/* Videó */
.rpab-video-frame { position: relative; padding-top: 56.25%; border-radius: var(--rpab-radius); overflow: hidden; box-shadow: var(--rpab-shadow-lift); margin-top: 24px; }
.rpab-video-frame iframe, .rpab-video-frame img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }

/* CTA */
.rpab-cta-box { border-radius: 2.5rem; padding: 56px 32px; background: rgba(255, 255, 255, .06); }
.rpab-cta-box.has-bg { background-size: cover; background-position: center; position: relative; }
.rpab-cta-box.has-bg::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(5, 80, 120, .72); }
.rpab-cta-inner { position: relative; }

/* Reszponzív */
@media (max-width: 1024px) {
	.rpab-section { --rpab-h1-size: 46px; --rpab-h1-line: 50px; --rpab-h2-size: 36px; --rpab-h2-line: 40px; }
	.rpab-hero-grid, .rpab-split-grid { grid-template-columns: 1fr; }
	.rpab-split-grid.is-reversed .rpab-split-media { order: 0; }
	.rpab-cards-grid, .rpab-price-grid, .rpab-steps-grid, .rpab-checkgrid, .rpab-gallery-grid, .rpab-groups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.rpab-section { padding: 56px 0; --rpab-h1-size: 34px; --rpab-h1-line: 40px; --rpab-h2-size: 28px; --rpab-h2-line: 34px; --rpab-body-size: 17px; --rpab-body-line: 27px; }
	.rpab-cards-grid, .rpab-price-grid, .rpab-steps-grid, .rpab-checkgrid, .rpab-gallery-grid, .rpab-groups-grid { grid-template-columns: 1fr; }
	.rpab-step-arrow { display: none; }
	.rpab-banner .rpab-btn-row { margin: 8px 0 0; }
}

/* ===== Történet (page-73) hero — Lovable ambient-glow + eyebrow-chip =====
   Forrás: demoraketa7.hu/rolunk/tortenet computed-layer kinyerés (2026-08-19,
   probe-glow-wide.js). A glow NEM section-background, hanem két elmosott kör
   (Tailwind blur-3xl + rounded-full, pointer-events-none absolute):
     top-right  amber  rgba(250,190,60,.20)  256px  (-right-10 -top-10)
     bottom-left coral rgba(221,67,54,.15)   288px  (-bottom-10 left-1/3)
   Ezt a korábbi szem/section-bg diff nem fogta meg → most pszeudo-elemként. */
.page-id-73 .rpab-hero { overflow: hidden; }
.page-id-73 .rpab-hero::before,
.page-id-73 .rpab-hero::after {
	content: "";
	position: absolute;
	border-radius: 999px;
	pointer-events: none;
	filter: blur(64px);
	z-index: 0;
}
.page-id-73 .rpab-hero::before {
	width: 256px; height: 256px;
	top: -40px; right: -40px;
	background: rgba(250, 190, 60, .20);
}
.page-id-73 .rpab-hero::after {
	width: 288px; height: 288px;
	bottom: -40px; left: 33%;
	background: rgba(221, 67, 54, .15);
}
.page-id-73 .rpab-hero .rpab-container { position: relative; z-index: 1; }

/* (Az eyebrow-chip barack színe már a globális .rpab-chip alapértelmezés — a
   korábbi page-id-73 override feleslegessé vált, mert minden about-oldal barack.) */