/**
 * Hogyan működik aloldal — 1. RÉSZ: Vállalkozó-flow szekció
 *
 * Forrás:
 *   - docs/subpages/hogyan-mukodik.md 1-3. szekció (header + bevezető + vendor-flow)
 *   - SECTION_COMPOSITIONS.md 15.4
 *   - docs/design-references/how-it-works/how-it-works-2col-for-customers-businesses.jpg
 *   - docs/design-references/how-it-works/how-it-works-customer-side-detail.jpg
 *
 * Tartalom:
 *   1. `.hogyan-page-header` — EYEBROW_HERO (közös aloldal-header, fehér)
 *   2. `.hogyan-vendor` — section-szintű 2-col grid (fehér section)
 *      - desktop: bal text-col (heading + lépés-lista, fehér háttér), jobb
 *        media-col (light-blue háttér, kifut a viewport jobb széléig). A két
 *        cella `align-items: stretch`-csel egyenlő magasságú — a colored panel
 *        ugyanolyan magas, mint a text-col.
 *      - mobil: stack (text-col → media-col), media-panel `margin`-elés-sel
 *        kontainerbe vágva, mind a 4 sarok lekerekítve.
 *
 * 2026-04-28 (3.) refaktor: a `.hogyan-vendor__container` + `::before` pseudo +
 * `overflow-x: clip` kombináció **eldobva** — a colored panelt a media-col
 * grid-cella maga viseli (egyszerűbb, robusztusabb). A media tartalom 48px
 * paddinggel, full-width-en, top-aligned (`justify-content: flex-start`).
 * A lépés-bubbleben sorszám van pipa helyett (1-5).
 */

/* ==========================================================================
   Aloldal-header (EYEBROW_HERO) — közös az egész aloldalra
   ========================================================================== */

.hogyan-page-header {
	padding: var(--spacing-section-mobile) var(--container-padding-mobile);
	background-color: var(--color-background);
}

@media (min-width: 768px) {
	.hogyan-page-header {
		padding: var(--spacing-section-tablet) var(--container-padding-tablet);
	}
}

@media (min-width: 1200px) {
	.hogyan-page-header {
		padding: var(--spacing-section-desktop) var(--container-padding-desktop);
	}
}

.hogyan-page-header__container {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.hogyan-page-header__title {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	font-weight: var(--fw-black);
	color: var(--color-text);
	letter-spacing: -0.02em;
	margin: 0;
}

.hogyan-page-header__subtitle {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	margin: 0;
	max-width: 60ch;
}

/* ==========================================================================
   Vállalkozó-flow szekció (fehér)
   --------------------------------------------------------------------------
   Section-szintű 2-col grid: bal text-col (fehér), jobb media-col (light-blue
   panel). Csak vertikális padding a section-ön — a horizontális helyezést a
   text-col `padding-left: max(80px, (100vw - 1200) / 2)`-vel a centered-
   container bal-szélére ülteti, a media-col pedig 50vw-tól a viewport jobb
   széléig kifut (a section nem csípi `overflow`-pal — nincs rá szükség,
   mert a grid 1fr 1fr cellái eleve nem mennek túl a section-en).
   ========================================================================== */

.hogyan-vendor {
	/* Padding finomhangolás (2026-04-28, felhasználói spec):
	   - top: 0
	   - x: 0 (a media-col bleed-elhet a viewport jobb széléig)
	   - bottom: --spacing-section-desktop (vizuális elválasztó a customer
	     szekció előtt) */
	padding-top: 0;
	padding-bottom: var(--spacing-section-desktop);
	background-color: var(--color-background);
	scroll-margin-top: 96px;
}

/* ---- Szekció-fejléc (eyebrow + H2 + sub) ---- */

.hogyan-vendor__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	max-width: 720px;
	margin: 0;
}

.hogyan-vendor__title {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	font-weight: var(--fw-black);
	color: var(--color-text);
	letter-spacing: -0.02em;
	margin: 0;
}

.hogyan-vendor__subtitle {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	margin: 0;
	max-width: 60ch;
}

/* ==========================================================================
   Section-szintű 2-col grid
   --------------------------------------------------------------------------
   Mobile/tablet (<1024px): single-column stack — text-col + media-col
   egymás alá; a colored panel margin-elés-sel kontainerbe vágva, mind a
   4 sarka lekerekítve.
   Desktop (≥1024px): `1fr 1fr` cellák; a text-col padding-left-je a centered-
   container bal-szélére ülteti a heading-et + listát; a media-col 50vw-tól
   a viewport jobb széléig kifut (colored bg végig), bal oldali sarkai
   `--radius-panel-lg`, jobb oldal viewport-élnél vágva (no radius).
   Mindkét cella `align-items: stretch` (default) — egyenlő magasság.
   ========================================================================== */

.hogyan-vendor__layout {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.hogyan-vendor__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* ---- Text-col (heading + list + CTA) ---- */

.hogyan-vendor__text-col {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 0 var(--container-padding-mobile);
}

@media (min-width: 768px) {
	.hogyan-vendor__text-col {
		padding: 0 var(--container-padding-tablet);
	}
}

@media (min-width: 1024px) {
	.hogyan-vendor__text-col {
		gap: 40px;
		/* Padding-left: a centered container bal-széléhez igazítja a tartalmat
		   — viewport ≤1360px között `--container-padding-desktop` (80px),
		   1360px felett az auto-margin-egyenértékkel. Padding-right: 32px
		   gap a colored panelig. */
		padding: 0 32px 0 max(var(--container-padding-desktop), calc((100vw - var(--container-max-width)) / 2));
	}
}

/* CTA-button a lista alatt — primary CTA, balra igazítva */
.hogyan-vendor__cta {
	align-self: flex-start;
}

/* ==========================================================================
   Lépés-lista — sorszámozott kék kör + bold heading + leírás
   ========================================================================== */

.hogyan-vendor__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media (min-width: 1200px) {
	.hogyan-vendor__list {
		gap: 28px;
	}
}

.hogyan-vendor__list-item {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 16px;
	align-items: flex-start;
}

.hogyan-vendor__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-icon-bubble);
	background-color: var(--color-primary);
	color: #ffffff;
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: var(--fw-bold);
	flex-shrink: 0;
	margin-top: 2px;
	font-variant-numeric: tabular-nums;
}

.hogyan-vendor__list-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hogyan-vendor__list-title {
	font-size: var(--fs-h6);
	line-height: var(--lh-h6);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	margin: 0;
	letter-spacing: -0.01em;
}

.hogyan-vendor__list-text {
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	margin: 0;
}

/* ==========================================================================
   Media-col — light-blue colored panel, mint a grid 2. cellája
   --------------------------------------------------------------------------
   A grid-cella maga viseli a `background-color`-t és a `border-radius`-t —
   nincs ::before pseudo, nincs `overflow-x: clip` trükk. Az `align-items:
   stretch` (default) miatt a panel ugyanolyan magas, mint a text-col.
   A media tartalom (video-frame + caption) a panel TETEJÉN ül 48px paddinggel
   (`justify-content: flex-start`), full-width-en (a video-frame `width: 100%`).
   ========================================================================== */

.hogyan-vendor__media-col {
	background-color: var(--color-primary-light);
	border-radius: var(--radius-panel-lg);
	padding: 48px;
	margin: 32px var(--container-padding-mobile) 0;
	display: flex;
	flex-direction: column;
}

@media (min-width: 768px) {
	.hogyan-vendor__media-col {
		margin-left: var(--container-padding-tablet);
		margin-right: var(--container-padding-tablet);
	}
}

@media (min-width: 1024px) {
	.hogyan-vendor__media-col {
		/* Kifut a viewport jobb széléig: nincs auto-margin, nincs container-cap.
		   Padding 48px minden oldalon, az oldal szélén (jobb-viewport-él) is. */
		margin: 0;
		border-radius: var(--radius-panel-lg) 0 0 var(--radius-panel-lg);
	}
}

/* ==========================================================================
   Sticky inner wrapper — desktopon a media tartalom (kép + caption) sticky
   --------------------------------------------------------------------------
   A `.hogyan-vendor__media-col` `align-items: stretch`-csel a grid-row teljes
   magasságát kitölti (colored panel végig). A tartalmat (ami rövidebb) ezen
   belül egy sticky wrapperbe csomagoljuk — ahogy a legelső iterációban is volt.
   ========================================================================== */

.hogyan-vendor__media-sticky {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

@media (min-width: 1024px) {
	.hogyan-vendor__media-sticky {
		position: sticky;
		top: 96px;
	}
}

.hogyan-video-frame {
	position: relative;
	width: 100%;
	border: 6px solid #071430;
	border-radius: var(--radius-panel);
	overflow: hidden;
	margin: 0;
}

.hogyan-vendor__media-img {
	display: block;
	width: 100%;
	height: auto;
}

.hogyan-video-frame__placeholder {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border-radius: var(--radius-pill);
	background-color: var(--color-primary);
	color: #ffffff;
	font-size: var(--fs-body-md);
	line-height: 1;
	font-weight: var(--fw-bold);
	letter-spacing: 0.01em;
}

.hogyan-video-frame__placeholder i {
	font-size: 18px;
}

.hogyan-video-frame__caption {
	display: block;
	margin: 0;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	font-style: italic;
	text-align: center;
}