main.vacsora-formatumok-page { overflow-wrap: anywhere; hyphens: auto; }

.vf-hero { padding-block: clamp(4rem, 8vw, 7rem); }
.vf-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(2rem, 1fr) minmax(0, 6fr); align-items: center; min-width: 0; }
.vf-hero__copy { grid-column: 1; min-width: 0; max-width: 38ch; display: flex; flex-direction: column; gap: var(--space-5); }
.vf-hero__copy > * { min-width: 0; margin: 0; }
.vf-hero__copy h1 { text-shadow: 3px 3px 0 rgba(113, 55, 216, 0.36); }
.vf-hero__intro { max-width: 36ch; color: var(--color-paper-lilac); font-size: var(--text-intro); font-weight: 500; line-height: var(--leading-intro); }
.vf-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); min-width: 0; }
.vf-hero__actions > * { min-width: 0; }
.vf-offline-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border-inline-start: 2px solid var(--color-offline-red); background: rgba(255, 107, 120, 0.08); color: var(--color-paper-lilac); font-size: var(--text-small); line-height: var(--leading-small); }
.vf-offline-strip span { color: var(--color-signal-turquoise); font-family: var(--font-display); font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-label); line-height: var(--leading-label); }
.vf-offline-strip strong { color: var(--color-offline-red); }
.vf-hero__media { grid-column: 3; position: relative; width: min(100%, 35rem); justify-self: end; min-width: 0; margin: 0; padding: var(--space-2); border: 1px solid var(--color-chrome-silver); background: rgba(37, 20, 67, 0.72); box-shadow: var(--shadow-offset); }
.vf-hero__media::before { position: absolute; inset: var(--space-2); z-index: 1; border: 1px solid rgba(56, 224, 208, 0.42); pointer-events: none; content: ""; }
.vf-hero__media::after { position: absolute; z-index: 2; inset: auto var(--space-4) var(--space-3) auto; padding: var(--space-2); background: var(--color-hot-pink); color: var(--color-ink-purple); font-family: var(--font-display); font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-label); content: "01"; }
.vf-hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center bottom; }

.vf-section-head { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.vf-section-head > * { min-width: 0; margin: 0; }
.vf-section-head--formats { max-width: 58ch; }
.vf-section-head__copy { max-width: 56ch; color: var(--color-muted-lilac); }
.vf-criteria { display: flex; flex-wrap: wrap; gap: var(--space-3); min-width: 0; }
.vf-criteria span { min-width: 0; padding: var(--space-2) var(--space-3); border: 1px solid rgba(56, 224, 208, 0.48); color: var(--color-signal-turquoise); font-family: var(--font-display); font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-label); line-height: var(--leading-label); text-transform: uppercase; }
.vf-formats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); min-width: 0; margin-top: var(--space-7); }
.vf-format-card { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-plum-surface); transition: border-color var(--transition-standard), box-shadow var(--transition-standard), transform var(--transition-standard); }
.vf-format-card > * { min-width: 0; margin: 0; }
.vf-format-card:hover, .vf-format-card:focus-within, .vf-format-card.is-selected { border-color: var(--color-signal-turquoise); box-shadow: var(--shadow-offset); }
.vf-format-card__index { color: var(--color-signal-turquoise); font-family: var(--font-display); font-size: var(--text-index); font-weight: 700; line-height: var(--leading-index); }
.vf-format-card p { color: var(--color-muted-lilac); }
.vf-format-card__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.vf-format-card__list li { min-width: 0; padding-top: var(--space-2); border-top: 1px solid var(--color-border-subtle); color: var(--color-paper-lilac); font-size: var(--text-small); line-height: var(--leading-small); }
.vf-format-card__list strong { color: var(--color-signal-turquoise); }
.vf-format-card__control { width: 100%; margin-top: auto; border: 1px solid var(--color-chrome-silver); background: transparent; color: var(--color-paper-lilac); font-family: var(--font-display); font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-label); line-height: var(--leading-label); padding: var(--space-3); text-align: left; text-transform: uppercase; }
.vf-format-card__control:hover, .vf-format-card__control[aria-selected="true"] { border-color: var(--color-signal-turquoise); color: var(--color-signal-turquoise); }
.vf-format-detail { display: none; margin-top: var(--space-5); padding: var(--space-5); border: 1px solid rgba(56, 224, 208, 0.48); background: rgba(37, 20, 67, 0.74); }
.vf-format-detail.is-active { display: block; }
.vf-format-detail p { max-width: 66ch; margin: 0; color: var(--color-paper-lilac); }

.vf-rhythm__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(2rem, 1fr) minmax(0, 4fr); align-items: center; min-width: 0; }
.vf-rhythm__media { grid-column: 1; min-width: 0; margin: 0; }
.vf-rhythm__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; border: 1px solid var(--color-border); border-radius: var(--radius-frame); }
.vf-rhythm__copy { grid-column: 3; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; max-width: 56ch; }
.vf-rhythm__copy > * { min-width: 0; margin: 0; }
.vf-rhythm__copy p { color: var(--color-muted-lilac); }
.vf-rhythm-list { display: grid; gap: 0; margin: var(--space-2) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.vf-rhythm-list li { min-width: 0; min-height: 3rem; display: flex; align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); color: var(--color-paper-lilac); font-family: var(--font-display); font-size: var(--text-meta); letter-spacing: var(--tracking-meta); line-height: var(--leading-meta); text-transform: uppercase; }

.vf-theme { background: var(--color-plum-surface); border-block: 1px solid var(--color-border-subtle); }
.vf-theme__head { max-width: 60ch; }
.vf-theme__head > * { margin: 0; }
.vf-theme__head p { margin-top: var(--space-4); color: var(--color-muted-lilac); }
.vf-theme__notice { margin-top: var(--space-4); padding: var(--space-4); border-inline-start: 2px solid var(--color-offline-red); background: rgba(255, 107, 120, 0.08); color: var(--color-paper-lilac); }
.vf-theme__notice strong { color: var(--color-offline-red); }
.vf-theme__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(2rem, 1fr) minmax(0, 6fr); align-items: start; min-width: 0; margin-top: var(--space-7); }
.vf-theme__media { grid-column: 1; min-width: 0; margin: 0; }
.vf-theme__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; border-radius: var(--radius-frame); }
.vf-theme__panels { grid-column: 3; display: grid; gap: var(--space-3); min-width: 0; }
.vf-theme-panel { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-4); min-width: 0; padding: var(--space-4); border: 1px solid var(--color-border); }
.vf-theme-panel > * { min-width: 0; margin: 0; }
.vf-theme-panel__index { color: var(--color-hot-pink); font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.vf-theme-panel p { color: var(--color-muted-lilac); }
.vf-theme-panel h3 { margin-bottom: var(--space-2); }
.vf-theme__link { margin-top: var(--space-5); }

.vf-private__head { width: min(100%, 42ch); margin-inline: auto; text-align: center; }
.vf-private__head > * { margin: 0; }
.vf-private__head p { margin-top: var(--space-4); color: var(--color-muted-lilac); }
.vf-private__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(2rem, 1fr) minmax(21.25rem, 4fr); align-items: start; min-width: 0; margin-top: var(--space-7); }
.vf-private__explain { grid-column: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-border); background: var(--color-plum-surface); }
.vf-private__explain > * { min-width: 0; margin: 0; }
.vf-private__explain p { color: var(--color-muted-lilac); }
.vf-private__explain h3:not(:first-child) { margin-top: var(--space-2); }
.vf-private__prompt { grid-column: 3; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--color-warm-yellow); color: var(--color-ink-purple); }
.vf-private__prompt > * { min-width: 0; margin: 0; }
.vf-private__prompt h3, .vf-private__prompt p { color: var(--color-ink-purple); }
.vf-private__prompt ol { display: grid; gap: var(--space-3); margin: 0; padding-inline-start: 1.4em; }
.vf-private__prompt li { min-width: 0; }
.vf-private__prompt .button { width: 100%; border-color: var(--color-ink-purple); background: var(--color-ink-purple); color: var(--color-warm-yellow); }
.vf-private__prompt .button:hover { background: var(--color-paper-lilac); color: var(--color-ink-purple); }

.vf-process__head { max-width: 54ch; }
.vf-process__head > * { margin: 0; }
.vf-process__head p { margin-top: var(--space-4); color: var(--color-muted-lilac); }
.vf-process__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); min-width: 0; margin-top: var(--space-7); border-top: 1px solid var(--color-chrome-silver); }
.vf-process-step { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-5); }
.vf-process-step > * { min-width: 0; margin: 0; }
.vf-process-step__number { color: var(--color-signal-turquoise); font-family: var(--font-display); font-size: var(--text-index); font-weight: 700; line-height: var(--leading-index); }
.vf-process-step p { color: var(--color-muted-lilac); }
.vf-process-step__offline { color: var(--color-paper-lilac) !important; font-size: var(--text-small); }

.vf-offline { padding-block: clamp(4rem, 8vw, 7rem); }
.vf-offline__panel { width: min(100%, var(--container-content)); margin-inline: auto; padding: clamp(var(--space-5), 5vw, var(--space-8)); border: 1px solid var(--color-chrome-silver); outline: 1px solid rgba(185, 183, 201, 0.32); outline-offset: var(--space-2); }
.vf-offline__head { width: min(100%, 68ch); margin-inline: auto; }
.vf-offline__head > * { margin: 0; }
.vf-offline__head .eyebrow { color: var(--color-offline-red); }
.vf-offline__head p { margin-top: var(--space-4); color: var(--color-paper-lilac); font-size: var(--text-intro); font-weight: 500; line-height: var(--leading-intro); }
.vf-offline__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-7); min-width: 0; margin: var(--space-7) 0 0; }
.vf-offline__list > div { min-width: 0; padding: var(--space-3) 0; border-top: 1px solid var(--color-border-subtle); }
.vf-offline__list dt { color: var(--color-offline-red); }
.vf-offline__list dd { margin: var(--space-1) 0 0; color: var(--color-muted-lilac); }
.vf-offline__footnote { max-width: 68ch; margin: var(--space-5) auto 0; color: var(--color-muted-lilac); }

.vf-final { padding-top: 0; }
.vf-final__panel { width: min(100%, 45rem); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; padding: clamp(var(--space-6), 6vw, var(--space-8)); border-top: 3px solid var(--color-warm-yellow); background: var(--color-plum-surface); text-align: center; }
.vf-final__panel > * { min-width: 0; margin: 0; }
.vf-final__panel p { width: min(100%, 42ch); margin-inline: auto; color: var(--color-muted-lilac); }
.vf-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); min-width: 0; }
.vf-final__actions > * { min-width: 0; }
.vf-final__microcopy { color: var(--color-paper-lilac) !important; font-size: var(--text-small); line-height: var(--leading-small); }

.vf-reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--transition-image), transform var(--transition-image); }
.vf-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .vf-formats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vf-formats__grid > :nth-child(3) { grid-column: 1 / -1; width: min(100%, 37.5rem); }
}

@media (max-width: 920px) {
  .vf-hero__grid, .vf-rhythm__grid, .vf-theme__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .vf-hero__copy, .vf-hero__media, .vf-rhythm__media, .vf-rhythm__copy, .vf-theme__media, .vf-theme__panels { grid-column: 1; width: 100%; max-width: none; justify-self: stretch; }
  .vf-hero__copy { max-width: 62ch; }
  .vf-hero__media { width: min(100%, 35rem); justify-self: start; }
  .vf-rhythm__copy { max-width: 58ch; }
  .vf-theme__head { max-width: 60ch; }
}

@media (max-width: 900px) {
  .vf-private__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .vf-private__explain, .vf-private__prompt { grid-column: 1; width: 100%; max-width: 38.75rem; }
}

@media (max-width: 860px) {
  .vf-process__steps { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 0; border-inline-start: 1px solid var(--color-chrome-silver); }
  .vf-process-step { display: grid; grid-template-columns: 4rem minmax(0, 1fr); column-gap: var(--space-4); padding: var(--space-5) 0 var(--space-5) var(--space-5); border-top: 1px solid var(--color-border-subtle); }
  .vf-process-step__number { grid-column: 1; grid-row: 1 / span 3; }
  .vf-process-step h3, .vf-process-step p, .vf-process-step a { grid-column: 2; }
}

@media (max-width: 760px) {
  .vf-offline__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 700px) {
  .vf-hero { padding-top: var(--space-8); }
  .vf-hero__copy { gap: var(--space-4); }
  .vf-hero__copy h1 { font-size: clamp(2.875rem, 14vw, 4.25rem); }
  .vf-hero__intro { max-width: 34ch; }
  .vf-hero__actions { flex-direction: column; align-items: stretch; }
  .vf-hero__actions > * { width: 100%; }
  .vf-hero__media { width: 100%; }
  .vf-formats__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .vf-formats__grid > :nth-child(3) { grid-column: 1; width: 100%; }
  .vf-format-card { padding: var(--space-5); }
  .vf-theme-panel { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); }
  .vf-theme-panel__index { font-size: 1.25rem; }
  .vf-private__head { width: min(100%, 40ch); }
  .vf-private__explain, .vf-private__prompt { padding: var(--space-5); }
  .vf-process-step { grid-template-columns: 3rem minmax(0, 1fr); padding-inline-start: var(--space-4); }
  .vf-offline__panel { width: min(100% - (var(--gutter-mobile) * 2), var(--container-content)); padding: var(--space-5); }
}

@media (max-width: 620px) {
  .vf-final__actions { flex-direction: column; align-items: stretch; }
  .vf-final__actions > * { width: 100%; }
  .vf-final__microcopy { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .vf-reveal { opacity: 1; transform: none; }
}