/* =========================================================================
   fps-content.css
   A tartalmi oldalak (blog lista) fps redesign stílusai a Figma alapján.
   Node: fps-site-desktop (1471:19907)
   ========================================================================= */

/* Általános, 1200px-es középre zárt konténer (a fejlécen/láblécen kívül is). */
.fps-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Tag/szerző lista címe a többivel egyező fontra (Space Grotesk) */
.tag-template .blogpost__body h2,
.author-template .blogpost__body h2 {
  font-family: "Space Grotesk", sans-serif;
}

/* Lista-oldalakon kőfehér háttér (mint az fps.hu), a fehér .site-wrapper
   kártyát átlátszóra vesszük, hogy a háttér átlásson. */
body.home-template,
body.paged,
body.tag-template,
body.author-template,
body.post-template,
body.error-template {
  background: var(--fps-stone-white);
}
.home-template .site-wrapper,
.paged .site-wrapper,
.tag-template .site-wrapper,
.author-template .site-wrapper,
.post-template .site-wrapper,
.error-template .site-wrapper {
  background: transparent;
  /* az app.css min-height:100vh-ját kikapcsoljuk: rövid tartalomnál üres hézagot
     hagyna a (amúgy nagy) lábléc előtt */
  min-height: 0;
}

/* ---- "Back to home" sáv a fejléc alatt ---- */
.fps-subbar {
  height: 72px;
  display: flex;
  align-items: center;
}
.fps-backlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--fps-forest-green);
  font: 400 16px/24px "Space Grotesk", sans-serif;
  transition: color .15s ease;
}
.fps-backlink__text {
  text-decoration: underline;
  text-underline-position: from-font;
}
.fps-backlink:hover { color: var(--fps-brand); }

/* ---- Lista-oldal cím (Blog + lapszám / címke / szerző) - Figma HL blokk ---- */
.fps-list-hero {
  padding-top: 8px;
  padding-bottom: 24px;
}
.fps-list-hero__title {
  margin: 0;
  font: 600 112px/110px "Space Grotesk", sans-serif;
  letter-spacing: -5.6px;
  color: var(--fps-forest-green);
  word-break: break-word;
}
@media (max-width: 1024px) {
  .fps-list-hero__title { font-size: 72px; line-height: 72px; letter-spacing: -3px; }
}
@media (max-width: 768px) {
  .fps-list-hero__title { font-size: 44px; line-height: 46px; letter-spacing: -1.5px; }
}
.fps-list-hero__sub {
  margin: 8px 0 0;
  font: 400 14px/24px "Space Grotesk", sans-serif;
  letter-spacing: -0.42px;
  color: var(--fps-forest-green);
}
/* a címke/szerző neve az alcímben a mark-designnal (sötét háttér, fehér bold) */
.fps-list-hero__sub mark {
  background: var(--fps-forest-green, #0A2324) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 0;
}

/* ---- Tartalmi terület ---- */
.fps-page {
  padding-top: 8px;
  padding-bottom: 40px;
}

/* ---- Kétoszlopos poszt-rács ---- */
.fps-bloglist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 40px;
}
@media (max-width: 900px) {
  .fps-bloglist { grid-template-columns: 1fr; }
}

/* ---- Poszt-kártya ---- */
.fps-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fff;
  color: var(--fps-forest-green);
  /* kemény, eltolt színes árnyék (Figma: 16px 16px 0 accent). Az akcentszín
     kártyánként ciklikusan váltakozik a --fps-card-accent változóval. */
  box-shadow: 16px 16px 0 0 var(--fps-card-accent, #E1A3EE);
  transition: box-shadow .4s ease;
}
/* Hover-effekt mint az fps.hu #our-works kártyáin: az árnyék 16->24px-re nő,
   a borítókép 1.1-re zoomol (a .fps-card__image overflow:hidden miatt vágva). */
.fps-card:hover {
  box-shadow: 24px 24px 0 0 var(--fps-card-accent, #E1A3EE);
}
.fps-card__image img {
  transition: transform .4s ease;
}
.fps-card:hover .fps-card__image img {
  transform: scale(1.1);
}
/* Az árnyék akcentszíne kártyánként váltakozik (placeholder paletta -
   a Figma szerint finomhangolható). */
.fps-bloglist .fps-card:nth-child(4n+1) { --fps-card-accent: #E1A3EE; }
.fps-bloglist .fps-card:nth-child(4n+2) { --fps-card-accent: #E55D43; }
.fps-bloglist .fps-card:nth-child(4n+3) { --fps-card-accent: #CCE1E1; }
.fps-bloglist .fps-card:nth-child(4n+4) { --fps-card-accent: #244A48; }

.fps-card__image {
  height: 288px;
  width: 100%;
  overflow: hidden;
}
.fps-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fps-card__image--placeholder {
  background: var(--fps-stone);
}

.fps-card__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}
.fps-card__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 8px;
}

.fps-card__title-block {
  display: flex;
  flex-direction: column;
}
.fps-card__date {
  margin: 0;
  font: 400 16px/24px "Space Grotesk", sans-serif;
}
.fps-card__title {
  margin: 0;
  font: 600 32px/40px "Space Grotesk", sans-serif;
  letter-spacing: -0.32px;
}
.fps-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}
.fps-card__title a:hover {
  color: var(--fps-brand);
  text-decoration: none;
}

.fps-card__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.fps-card__tags a {
  font: 400 18px/1.3 "Space Grotesk", sans-serif;
  letter-spacing: -0.54px;
  text-decoration: underline;
  text-underline-position: from-font;
  text-transform: lowercase;
  color: inherit;
  transition: color .15s ease;
}
.fps-card__tags a:hover { color: var(--fps-brand); }
.fps-card__tags .slash { width: 24px; height: 24px; flex-shrink: 0; }

.fps-card__excerpt {
  margin: 0;
  font: 400 16px/24px "Space Grotesk", sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Maszkos ikonok (a szín a szöveg color-jából jön -> hoverre együtt vált) ---- */
.fps-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.fps-icon--arrow-right {
  -webkit-mask-image: url("../img/fps/arrow-right.svg");
          mask-image: url("../img/fps/arrow-right.svg");
}
.fps-icon--arrow-left {
  -webkit-mask-image: url("../img/fps/arrow-left.svg");
          mask-image: url("../img/fps/arrow-left.svg");
}

/* ---- "Elolvasom" gomb - pixeles sarkokkal (Figma buttons komponens) ----
   Szerkezet: bal/jobb "cap" (8px) egy 2px-es függőleges vonallal középen, és a
   4 sarokban 4 lépcsős, 2px-es pixel-staircase; a felirat-doboznak felül/alul
   2px-es kerete. Minden currentColor -> hoverre együtt vált fps narancsra. */
.fps-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: stretch;
  color: var(--fps-forest-green);
  text-decoration: none;
  background: transparent;
  transition: color .15s ease;
}
.fps-btn__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 12px 16px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  font: 600 16px/24px "Space Grotesk", sans-serif;
  letter-spacing: -0.48px;
}
.fps-btn__cap {
  position: relative;
  flex: 0 0 8px;
  width: 8px;
}
/* függőleges 2px-es oldalvonal (a felső/alsó 8px-8px staircase közé zárva) */
.fps-btn__cap--left {
  background: linear-gradient(currentColor, currentColor) left center / 2px calc(100% - 16px) no-repeat;
}
.fps-btn__cap--right {
  background: linear-gradient(currentColor, currentColor) right center / 2px calc(100% - 16px) no-repeat;
}
/* pixel-staircase-ek a 4 sarokban (1 alap 2px négyzet + 3 box-shadow) */
.fps-btn__cap::before,
.fps-btn__cap::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  background: currentColor;
}
.fps-btn__cap--left::before  { top: 0;    left: 6px;  box-shadow: -2px 2px 0 currentColor, -4px 4px 0 currentColor, -6px 6px 0 currentColor; }
.fps-btn__cap--left::after   { bottom: 0; left: 6px;  box-shadow: -2px -2px 0 currentColor, -4px -4px 0 currentColor, -6px -6px 0 currentColor; }
.fps-btn__cap--right::before { top: 0;    right: 6px; box-shadow: 2px 2px 0 currentColor, 4px 4px 0 currentColor, 6px 6px 0 currentColor; }
.fps-btn__cap--right::after  { bottom: 0; right: 6px; box-shadow: 2px -2px 0 currentColor, 4px -4px 0 currentColor, 6px -6px 0 currentColor; }

.fps-btn:hover { color: var(--fps-brand); }

/* ---- Lapozó (← 1/30 →) ---- */
.fps-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 0;
  font: 400 16px/24px "Space Grotesk", sans-serif;
  color: var(--fps-forest-green);
}
.fps-pagination__count { min-width: 48px; text-align: center; }
.fps-pagination__arrow {
  display: inline-flex;
  color: var(--fps-forest-green);
  transition: color .15s ease;
}
.fps-pagination__arrow:hover { color: var(--fps-brand); }
.fps-pagination__arrow.is-disabled {
  opacity: .3;
  pointer-events: none;
}

/* =========================================================================
   POSZT OLDAL (Figma: fps-site-desktop / post)
   ========================================================================= */

.read-progress {
  display: block;
  width: 100%;
  height: 4px;
  border: none;
  background: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: sticky;
  top: 0;
  z-index: 40;
}
.read-progress::-webkit-progress-bar { background: transparent; }
.read-progress::-webkit-progress-value { background: var(--fps-brand); }
.read-progress::-moz-progress-bar { background: var(--fps-brand); }

/* ---- Hero ---- */
.fps-post__hero { padding-top: 48px; }
.fps-post__date {
  margin: 0;
  font: 600 14px/24px "Space Grotesk", sans-serif;
  letter-spacing: -0.42px;
  color: var(--fps-forest-green);
}
.fps-post__title {
  margin: 0;
  font: 600 112px/110px "Space Grotesk", sans-serif;
  letter-spacing: -5.6px;
  color: var(--fps-forest-green);
  word-break: break-word;
}
@media (max-width: 1024px) {
  .fps-post__title { font-size: 72px; line-height: 72px; letter-spacing: -3px; }
}
@media (max-width: 768px) {
  .fps-post__title { font-size: 44px; line-height: 46px; letter-spacing: -1.5px; }
}

/* ---- Tag-sáv + olvasási idő ---- */
.fps-post__tagbar { padding: 24px 0; }
.fps-post__tagbar .fps-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.fps-post__tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fps-post__readtime {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--fps-forest-green);
}
.fps-post__readtime span {
  font: 400 18px/1.3 "Space Grotesk", sans-serif;
  letter-spacing: -0.54px;
}
.fps-post__readtime b { font-weight: 700; }
.fps-post__readtime .clock { width: 24px; height: 24px; flex-shrink: 0; }
.fps-post__tags a {
  font: 400 18px/1.3 "Space Grotesk", sans-serif;
  letter-spacing: -0.54px;
  text-decoration: underline;
  text-underline-position: from-font;
  text-transform: lowercase;
  color: var(--fps-forest-green);
  transition: color .15s ease;
}
.fps-post__tags a:hover { color: var(--fps-brand); }
.fps-post__tags .slash { width: 24px; height: 24px; flex-shrink: 0; }

/* ---- Kétoszlopos elrendezés ---- */
.fps-post__layout {
  display: grid;
  grid-template-columns: 448px minmax(0, 1fr);
  gap: 32px;
  padding-top: 88px;
  padding-bottom: 88px;
}
@media (max-width: 1024px) {
  .fps-post__layout {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 32px;
    padding-bottom: 48px;
  }
  .fps-post__share { order: 2; }
  .fps-post__main { order: 1; }
}

/* ---- Megosztó sidebar ---- */
@media (min-width: 1025px) {
  .fps-share { position: sticky; top: 104px; }
}
.fps-share__top { display: flex; }
/* a két doboz reszponzívan zsugorodik, de négyzet marad (max 224px) */
.fps-share__glass,
.fps-share__count {
  flex: 1 1 0;
  min-width: 0;
  max-width: 224px;
  aspect-ratio: 1 / 1;
}
.fps-share__glass {
  background: var(--fps-ocean, #51BBBB);
  overflow: hidden;
}
.fps-share__glass img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.fps-share__count {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--fps-stone, #CCE1E1);
}
.fps-share__num {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: clamp(44px, 10vw, 64px);
  line-height: 1;
  letter-spacing: -2px;
  color: var(--fps-brand);
}
/* a beépített megosztás-számláló JS a belső span-t frissíti -> örököltessük a stílust */
.fps-share__num .counter,
.fps-share__num span {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.fps-share__label {
  margin-top: 8px;
  font: 400 16px/24px "Space Grotesk", sans-serif;
  color: var(--fps-forest-green);
}
.fps-share__links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 32px;
  max-width: 448px;
}
.fps-share__links a {
  font: 400 16px/24px "Space Grotesk", sans-serif;
  color: var(--fps-forest-green);
  text-decoration: underline;
  text-underline-position: from-font;
  transition: color .15s ease;
}
.fps-share__links a:hover { color: var(--fps-brand); }
.fps-share__links b { font-weight: 700; }
.fps-share__links .slash { width: 24px; height: 24px; flex-shrink: 0; }
.fps-share__links-break { flex-basis: 100%; }

/* ---- Borítókép ---- */
.fps-post__cover { margin-bottom: 48px; }
.fps-post__cover img { width: 100%; height: auto; display: block; }

/* ---- Cikktörzs tipográfia ---- */
.fps-article-body {
  color: var(--fps-forest-green);
  font: 400 18px/32px "Space Grotesk", sans-serif;
}
.fps-article-body > * { margin: 0 0 24px; }
.fps-article-body > *:last-child { margin-bottom: 0; }
.fps-article-body a {
  color: var(--fps-forest-green);
  text-decoration: underline;
  text-underline-position: from-font;
  transition: color .15s ease;
}
.fps-article-body a:hover { color: var(--fps-brand); }
.fps-article-body h2 {
  font: 600 32px/40px "Space Grotesk", sans-serif;
  letter-spacing: -0.32px;
  margin-top: 48px;
}
.fps-article-body h3 {
  font: 600 24px/32px "Space Grotesk", sans-serif;
  margin-top: 40px;
}
.fps-article-body h4 {
  font: 700 18px/28px "Space Grotesk", sans-serif;
  margin-top: 32px;
}
.fps-article-body img { max-width: 100%; height: auto; display: block; }
/* Reszponzív média: képek, beágyazott videók, iframe-ek mobilon is méreteződnek.
   A YouTube/Vimeo stb. iframe-eket a fluidvids JS teszi arányhelyesen fluiddá
   (a .blogpost horog aktiválja); ez a CSS a biztonsági háló + Ghost kártyák. */
.fps-article-body figure { margin: 0 0 24px; max-width: 100%; }
.fps-article-body figure img { width: 100%; }
.fps-article-body iframe,
.fps-article-body video,
.fps-article-body embed,
.fps-article-body object { max-width: 100%; }
.fps-article-body video { height: auto; }
.fps-article-body figcaption {
  margin-top: 8px;
  font: 400 14px/20px "Space Grotesk", sans-serif;
  color: var(--fps-forest-light, #244A48);
  text-align: center;
}
.fps-article-body ul,
.fps-article-body ol { list-style: none; }
.fps-article-body ol { padding-left: 0; }

/* Számozás nélküli felsorolás (Figma): ocean 8px-es négyzet-bullet,
   SemiBold szöveg, 16px köz a bullet és szöveg közt, 16px sorköz. */
.fps-article-body ul { padding-left: 16px; }
.fps-article-body ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 16px;
  font-weight: 600;
}
.fps-article-body ul li:last-child { margin-bottom: 0; }
.fps-article-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--fps-ocean, #51BBBB);
}
.fps-article-body ol { counter-reset: fps-item; }
.fps-article-body ol li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 8px;
  counter-increment: fps-item;
}
.fps-article-body ol li::before {
  content: counter(fps-item) ".";
  position: absolute; left: 0;
  font-weight: 600;
}
/* Kiemelés (markdown ==szöveg==): sötét (forest) háttér, fehér, bold szöveg
   (a csatolt kép / Figma-terv szerint). Felülírja az app.css türkiz mark stílusát. */
.fps-article-body mark {
  background: var(--fps-forest-green, #0A2324) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 0;
}

/* ---- Letöltés / primary gombok a posztban (markdownba beszúrt HTML) ----
   A markupot és a letöltésszám-JS-t (.js-counter--download) NEM módosítjuk,
   csak az új fps "theme-red" gomb kinézetére stílusozzuk: kitöltött piros,
   Space Grotesk, pixel-sarkok clip-path-tal, hover világosabb pirosra. */
.fps-article-body .button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 48px;
  margin-right: 0;
  padding: 12px 20px;
  border: 0;
  border-radius: 0;
  background: var(--fps-brand, #E13C1C);
  color: #fff;
  font: 600 16px/24px "Space Grotesk", sans-serif;
  letter-spacing: -0.03em;
  text-decoration: none;
  text-align: center;
  transition: background .15s ease;
  -webkit-clip-path: polygon(
    0 8px, 2px 8px, 2px 6px, 4px 6px, 4px 4px, 6px 4px, 6px 2px, 8px 2px, 8px 0,
    calc(100% - 8px) 0, calc(100% - 8px) 2px, calc(100% - 6px) 2px, calc(100% - 6px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 6px, calc(100% - 2px) 6px, calc(100% - 2px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 2px) calc(100% - 8px), calc(100% - 2px) calc(100% - 6px), calc(100% - 4px) calc(100% - 6px), calc(100% - 4px) calc(100% - 4px), calc(100% - 6px) calc(100% - 4px), calc(100% - 6px) calc(100% - 2px), calc(100% - 8px) calc(100% - 2px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 2px), 6px calc(100% - 2px), 6px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 6px), 2px calc(100% - 6px), 2px calc(100% - 8px), 0 calc(100% - 8px)
  );
          clip-path: polygon(
    0 8px, 2px 8px, 2px 6px, 4px 6px, 4px 4px, 6px 4px, 6px 2px, 8px 2px, 8px 0,
    calc(100% - 8px) 0, calc(100% - 8px) 2px, calc(100% - 6px) 2px, calc(100% - 6px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 6px, calc(100% - 2px) 6px, calc(100% - 2px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 2px) calc(100% - 8px), calc(100% - 2px) calc(100% - 6px), calc(100% - 4px) calc(100% - 6px), calc(100% - 4px) calc(100% - 4px), calc(100% - 6px) calc(100% - 4px), calc(100% - 6px) calc(100% - 2px), calc(100% - 8px) calc(100% - 2px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 2px), 6px calc(100% - 2px), 6px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 6px), 2px calc(100% - 6px), 2px calc(100% - 8px), 0 calc(100% - 8px)
  );
}
.fps-article-body .button-primary:hover {
  background: var(--fps-brand-off, #E55D43);
  color: #fff;
}
/* a letöltésszám (a JS által frissített span) örökölje a fehér színt */
.fps-article-body .button-primary .counter,
.fps-article-body .button-primary .download__counter {
  color: inherit;
  font: inherit;
}

/* Playfair idézet (pull-quote) narancs idézőjelekkel */
.fps-article-body blockquote {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 48px;
  letter-spacing: -0.5px;
  color: var(--fps-forest-green);
  text-align: center;
  margin: 40px 0;
  padding: 4px 72px;
  position: relative;
}
/* pontos pixel-idézőjelek (Figma quote ikon -> assets/img/fps/quote.svg) */
.fps-article-body blockquote::before,
.fps-article-body blockquote::after {
  content: "";
  position: absolute;
  top: 0;
  width: 40px;
  height: 40px;
  background: url("../img/fps/quote.svg") no-repeat center / contain;
}
.fps-article-body blockquote::before { left: 0; }
.fps-article-body blockquote::after  { right: 0; }

/* ---- Szerző ---- */
.fps-post__author {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 48px;
}
.fps-post__author-text { text-align: right; }
.fps-post__author-name {
  margin: 0;
  font: 400 24px/32px "Space Grotesk", sans-serif;
}
.fps-post__author-name a { color: var(--fps-forest-green); text-decoration: none; transition: color .15s ease; }
.fps-post__author-name a:hover { color: var(--fps-brand); }
.fps-post__author-bio {
  margin: 8px 0 0;
  font: 400 16px/24px "Space Grotesk", sans-serif;
  color: var(--fps-forest-green);
}
.fps-post__author-avatar {
  width: 80px; height: 80px; flex-shrink: 0;
  background: var(--fps-forest-green);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.fps-post__author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fps-post__author-avatar svg { width: 48px; height: 48px; }

/* ---- Hozzászólások (Disqus) ---- */
.fps-comments { padding-top: 40px; padding-bottom: 88px; }
.fps-comments h4 {
  margin: 0 0 24px;
  font: 600 32px/40px "Space Grotesk", sans-serif;
  color: var(--fps-forest-green);
}

/* =========================================================================
   404 OLDAL (a live fps.hu page-404 alapján)
   ========================================================================= */
.fps-404 { padding-top: 88px; padding-bottom: 88px; }
@media (max-width: 768px) { .fps-404 { padding-top: 44px; padding-bottom: 44px; } }

.fps-404__grid {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: start;
  gap: 40px;
}
@media (max-width: 768px) {
  .fps-404__grid { grid-template-columns: auto; gap: 0; justify-items: center; }
}
.fps-404__gif {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
}
.fps-404__text { padding-top: 44px; }
.fps-404__text-img {
  width: 100%;
  max-width: 340px;
  height: auto;
  display: block;
  margin-bottom: 24px;
}
.fps-404__title {
  margin: 0 0 48px;
  color: var(--fps-forest-green);
  font: 700 24px/36px "Space Grotesk", sans-serif;
  letter-spacing: -0.24px;
}

/* ---- fps gomb (pixel-élekkel) - theme-red, a main-button komponensből ---- */
.fps-button {
  --btn-text: #fff;
  --btn-bg: var(--fps-brand, #E13C1C);
  --btn-border: var(--fps-brand, #E13C1C);
  --btn-hover-text: #fff;
  --btn-hover-bg: var(--fps-brand-off, #E55D43);
  --btn-hover-border: var(--fps-brand, #E13C1C);
  display: inline-flex;
  align-items: stretch;
  text-decoration: none;
  font-size: 0;
  vertical-align: middle;
}
.fps-button__edge { display: block; flex-shrink: 0; }
.fps-button__edge--right { transform: rotate(180deg); }
.fps-button__edge .bg { fill: var(--btn-bg); }
.fps-button__edge .border { fill: var(--btn-border); }
.fps-button__label {
  box-sizing: border-box;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 16px;
  background: var(--btn-bg);
  border-top: 2px solid var(--btn-border);
  border-bottom: 2px solid var(--btn-border);
  color: var(--btn-text);
  font: 600 16px/24px "Space Grotesk", sans-serif;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.fps-button__label .highlighted {
  font-family: "Playfair Display", serif;
  font-style: italic;
  letter-spacing: -0.03em;
}
.fps-button__arrow { width: 24px; height: 24px; flex-shrink: 0; }
.fps-button:hover .fps-button__label {
  color: var(--btn-hover-text);
  background: var(--btn-hover-bg);
  border-top-color: var(--btn-hover-border);
  border-bottom-color: var(--btn-hover-border);
}
.fps-button:hover .fps-button__edge .bg { fill: var(--btn-hover-bg); }
.fps-button:hover .fps-button__edge .border { fill: var(--btn-hover-border); }