/* ==========================================================================
   Főoldal
   Élő értékek (csaszarszabolcsphoto.com, 1280px szélességen mérve,
   a beúszó animációk kikapcsolása után).
   ========================================================================== */

.page-home { background: var(--beige); }

/* ---------- 0 · Hero háttérvideó ---------- */

.home-hero { position: relative; aspect-ratio: 1.69; overflow: hidden; background: #2a2724; }
.home-hero video, .home-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-hero::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 190px;
  background: linear-gradient(#00000073, #00000000); pointer-events: none;
}

/* ---------- 1 · Vezérgondolat ---------- */

.home-claims { padding: clamp(52px, 6.4vw, 120px) var(--edge-wide) clamp(24px, 3vw, 55px); }
.home-claims__inner { max-width: 1180px; margin: 0 auto; }

.ef .home-claims__lead {
  margin: 0 0 clamp(30px, 3.4vw, 60px);
  max-width: 20em;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: var(--ls-tight);
}

/* Ritmussáv: a szekció magáról a hangulatról és ritmusról szól – ez
   teljes szélességben választja el a címet a szövegtől. */
.home-claims__rhythm {
  display: block;
  width: 100%;
  height: clamp(34px, 3.4vw, 56px);
  margin-top: clamp(30px, 3.4vw, 60px);
  color: var(--accent);
}

.home-claims__cols {
  --claim-pad: clamp(20px, 3vw, 56px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(6px, 0.7vw, 12px);
}

/* A négy fotó egyetlen összefüggő sávot alkot; a pár-hovatartozást az
   alattuk futó vonalak és az oszlopigazítás mutatja, nem külön keretek. */
.claim { display: contents; }
.claim__photo {
  grid-row: 2;
  margin: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #3F352E0d;
}
.claim__photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* A szöveg pontosan a saját képpárja alatt kezdődik: az első a 1–2., a
   második a 3–4. oszlopot fogja át. Az igazítás köti őket össze, nem vonal. */
.ef .claim p {
  grid-row: 1;
  margin: 0;
  padding: 0 var(--claim-pad) clamp(24px, 2.6vw, 44px) 0;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink-soft);
}
.claim:nth-child(1) p { grid-column: 1 / 3; }
.claim:nth-child(2) p { grid-column: 3 / 5; }

/* ---------- 2 · Teljes szélességű fotó ---------- */

.home-wide { aspect-ratio: 2.30; overflow: hidden; }
.home-wide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-wide--band { aspect-ratio: 3.67; }
.home-wide--thin { aspect-ratio: 4.39; }
.home-wide img.pos-band { object-position: 52.9% 36.0%; }
.home-wide img.pos-thin { object-position: 62.6% 65.6%; }
.home-wide img.pos-360  { object-position: 52.4% 83.2%; }

/* ---------- 3 · Kategóriák ---------- */

.home-cats { padding: clamp(25px, 3.18vw, 58px) 0 clamp(50px, 6.34vw, 117px); }

.home-cats__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* négy közös sor: kép · cím · szöveg · link – így mindhárom kártyán egy vonalban */
  grid-template-rows: auto auto auto auto;
  column-gap: 1.1%;
  width: 75.02%;
  /* A képsáv magassága 700 px-nél megáll (51.7vw), a szélesség viszont
     tovább nőne – ettől lapulnának el a formák nagy képernyőn. Ezért a
     rács is megáll ugyanott: 1354 px ablaknál a 71% épp 951 px. */
  max-width: 1005px;
  margin: 0 auto;
  align-items: start;
  text-align: left;
}
.home-cat {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  position: relative;
  color: inherit;
  text-decoration: none;
}
.home-cat--b { z-index: 2; }   /* a legnagyobb kép a szomszédok fölé kerül */

/* Közös magasságú „színpad”: a képek eltérő mérettel, eltolással és
   a középső túllógva ülnek benne – az eredeti lépcsős kompozíció szerint. */
.home-cat__media {
  position: relative;
  height: clamp(317px, 54.63vw, 740px);
  margin-bottom: clamp(32px, 3.60vw, 65px);
}

/* A keret hordozza a formát: íves, „kapu” alakú kivágások, amelyek
   egymás fedésében is összeillenek. */
.home-cat__frame {
  position: absolute;
  display: block;
  overflow: hidden;
  background: #3F352E0d;
}
.home-cat__frame img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--ease);
}

.home-cat--a .home-cat__frame {          /* alacsony kupola */
  left: 0; top: 45.3%; width: 100%; height: 43.5%;
  border-radius: 42px;                 /* 40 × 1.057 */
}
.home-cat--b .home-cat__frame {          /* magas kapu, a szomszédokra lógva */
  left: -17%; top: 0; width: 134%; height: 100%; max-width: none;
  border-radius: 528px;                /* 500 × 1.057 – kapszula marad */
}
.home-cat--c .home-cat__frame {          /* fordított ív: alul kerekített */
  left: 0; top: 11.3%; width: 100%; height: 66.2%;
  border-radius: 11px 11px 423px;      /* 10/400 × 1.057 */
}

.home-cat:hover .home-cat__frame img,
.home-cat:focus-visible .home-cat__frame img { transform: scale(1.04); }
.home-cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

.ef .home-cat__title { margin: 0 0 0.5em; font-size: calc(var(--fs-h3) * 1.0566); line-height: 1.1; letter-spacing: var(--ls-tight); }
.ef .home-cat__text { margin: 0 0 clamp(17px, 1.69vw, 32px); font-size: calc(var(--fs-body) * 1.0566); line-height: 1.6; color: var(--ink-soft); }

.home-cat__more {
  align-self: start;
  display: inline-flex; align-items: center; gap: 0.55em;
  width: fit-content;
  padding-bottom: 5.25px;
  font-size: calc(var(--fs-meta) * 1.0566); font-weight: 500;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: color 240ms ease, border-color 240ms ease;
}
.home-cat__more span { transition: transform 300ms var(--ease); }
.home-cat:hover .home-cat__more { color: var(--accent); border-color: var(--accent); }
.home-cat:hover .home-cat__more span { transform: translateX(4px); }

/* ha a böngésző nem tud subgridet, essen vissza egyszerű kártyákra */
@supports not (grid-template-rows: subgrid) {
  .home-cat { display: block; }
}

/* ---------- 5 · Stílusjegyek – váltogatható lejátszó ---------- */

.traits { padding: clamp(56px, 7vw, 130px) var(--edge-wide) clamp(48px, 6vw, 110px); }

.traits__col { display: flex; flex-direction: column; }
.traits__head { margin-bottom: clamp(24px, 2.8vw, 52px); }
.ef .traits__eyebrow {
  margin: 0 0 0.9em;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ef .traits__title { margin: 0; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: var(--ls-tight); }

.traits__body {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 56fr);
  column-gap: clamp(24px, 4vw, 76px);
  align-items: start;
}

/* --- a három jegy listája --- */

.traits__list { display: flex; flex-direction: column; }

.trait {
  position: relative;
  display: grid;
  grid-template-columns: 2.6em 1fr;
  column-gap: 1em;
  align-items: start;
  width: 100%;
  padding: clamp(16px, 1.6vw, 26px) 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.traits__list .trait:last-child { border-bottom: 1px solid var(--line); }

.trait__num {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  color: var(--ink-soft);
  padding-top: 0.45em;
  transition: color 300ms ease;
}
.trait__title {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  transition: color 300ms ease;
}
/* a szöveg csak az aktív jegynél nyílik ki – így a lista nyugodt marad */
.trait__text {
  display: block;
  max-width: 30em;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-soft);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition: opacity 260ms var(--ease), max-height 320ms var(--ease), transform 260ms var(--ease), margin-top 320ms var(--ease);
}
.trait[aria-selected="true"] .trait__text {
  opacity: 1;
  max-height: 12em;
  margin-top: 0.7em;
  transform: none;
}
.trait[aria-selected="true"] .trait__num { color: var(--accent); }
.trait:hover .trait__title { color: var(--accent); }
.trait:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* vékony csík, ami jelzi, melyik jegy aktív */
.trait__bar { position: absolute; left: 0; right: 0; top: -1px; height: 1px; overflow: hidden; }
.trait__bar i {
  display: block; height: 100%; width: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 420ms var(--ease);
}
.trait[aria-selected="true"] .trait__bar i { transform: scaleX(1); }

/* --- a lejátszó --- */

.traits__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #3F352E0d;
}
.traits__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 700ms var(--ease), transform 1400ms var(--ease);
  pointer-events: none;
}
.traits__panel.is-on { opacity: 1; transform: none; }
.traits__panel video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 6 · Rólam – rövid felvezető ---------- */

.home-about { background: var(--cream); padding: clamp(48px, 6vw, 110px) var(--edge-wide); }
.home-about__inner {
  display: grid;
  grid-template-columns: minmax(0, 34fr) minmax(0, 56fr);
  column-gap: clamp(28px, 5vw, 90px);
  align-items: center;
  max-width: 1500px;
  margin: 0 auto;
}
.home-about__photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #3F352E0d; }
.home-about__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ef .home-about__eyebrow {
  margin: 0 0 0.9em;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ef .home-about__title { margin: 0 0 clamp(14px, 1.4vw, 26px); font-size: var(--fs-h2); line-height: 1.08; letter-spacing: var(--ls-tight); }
.ef .home-about__lead { margin: 0 0 clamp(22px, 2.2vw, 42px); max-width: 26em; font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-soft); }

.home-about__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding-bottom: 6px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 260ms ease, color 260ms ease;
}
.home-about__link span { transition: transform 320ms var(--ease); }
.home-about__link:hover { color: var(--accent); border-color: var(--accent); }
.home-about__link:hover span { transform: translateX(5px); }
.home-about__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- 7 · Vélemények – váltakozó sorok ---------- */

.says { padding: clamp(56px, 7vw, 130px) var(--edge-wide) clamp(48px, 6vw, 110px); }

.says__head { margin-bottom: clamp(32px, 3.6vw, 68px); }
.ef .says__eyebrow {
  margin: 0 0 0.9em;
  font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--ink-soft);
}
.ef .says__title { margin: 0; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: var(--ls-tight); }

.says__list { max-width: 1500px; margin: 0 auto; }

.says__row {
  display: grid;
  grid-template-columns: minmax(0, 34fr) minmax(0, 60fr);
  column-gap: clamp(24px, 4.4vw, 84px);
  align-items: center;
  padding: clamp(28px, 3.4vw, 62px) 0;
  border-top: 1px solid var(--line);
}
.says__row:last-child { border-bottom: 1px solid var(--line); }

/* minden második sorban a fotó jobbra kerül – az oszlopszélességek is cserélődnek,
   különben a fotó a széles sávba esne és megnőne */
.says__row--flip { grid-template-columns: minmax(0, 60fr) minmax(0, 34fr); }
.says__row--flip .says__photo { order: 2; }

.says__photo { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: #3F352E0d; }
.says__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1100ms var(--ease); }

/* az idézet a főszereplő: nagyobb, levegős, idézőjel nélküli tipográfia */
.ef .says__quote {
  margin: 0 0 clamp(14px, 1.4vw, 26px);
  max-width: 30em;
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--ls-mid);
}
.ef .says__quote::before { content: "„"; }
.ef .says__quote::after  { content: "”"; }

.ef .says__name {
  margin: 0;
  font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--accent);
}

/* ---------- 8 · Ajánlatkérés ---------- */

.offer { background: var(--mocha); color: var(--ink-dark); }

/* a széles fotósáv választja el a fölötte lévő szekciótól */
.offer__banner { aspect-ratio: 3 / 1; overflow: hidden; }
.offer__banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; display: block; }

.offer__inner {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 52fr);
  column-gap: clamp(28px, 5vw, 96px);
  align-items: center;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 110px) var(--edge-wide) clamp(56px, 7vw, 126px);
}

.ef .offer__eyebrow {
  margin: 0 0 0.9em;
  font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: #3F352Eb3;
}
.ef .offer__title { margin: 0 0 clamp(14px, 1.4vw, 26px); font-size: var(--fs-h2); line-height: 1.08; letter-spacing: var(--ls-tight); }
.ef .offer__text { margin: 0 0 clamp(24px, 2.4vw, 44px); max-width: 26em; font-size: var(--fs-lead); line-height: 1.6; }

.offer__contacts { margin: 0; padding: 0; list-style: none; }
.offer__contacts li + li { margin-top: 0.7em; }
.offer__contacts a {
  font-size: var(--fs-body);
  color: var(--ink-dark);
  text-decoration: none;
  border-bottom: 1px solid #3F352E33;
  padding-bottom: 3px;
  transition: border-color 220ms ease, opacity 220ms ease;
}
.offer__contacts a:hover { border-color: var(--ink-dark); opacity: 0.75; }
.offer__contacts a:focus-visible { outline: 2px solid var(--ink-dark); outline-offset: 3px; }

/* az űrlap világos lapon ül – így elválik a mokka háttértől */
.offer__form {
  width: auto;
  background: var(--beige);
  padding: clamp(24px, 2.6vw, 48px);
}
.page-home .offer__form input,
.page-home .offer__form textarea { background: #FFFFFF8c; border-color: #3F352E29; }
.page-home .offer__form input:hover,
.page-home .offer__form textarea:hover { background: #FFFFFFcc; border-color: #3F352E4d; }
.page-home .offer__form input:focus,
.page-home .offer__form textarea:focus { background: #FFFFFF; border-color: var(--accent); }
.page-home .offer__form .ef-submit { min-width: 12em; }

@media (max-width: 900px) {
  .offer__banner { aspect-ratio: 16 / 9; }
  .offer__inner { grid-template-columns: 1fr; row-gap: 28px; padding: 34px var(--edge) 44px; }
  .ef .offer__title { font-size: 26px; }
  .ef .offer__text { font-size: 15px; }
  .offer__form { padding: 20px; }
}

/* ---------- 10 · Instagram ---------- */

/* ---------- Reszponzív ---------- */

@media (max-width: 900px) {
  .home-hero { aspect-ratio: 16/10; }

  .home-claims { padding: 40px var(--edge) 17px; }
  .ef .home-claims__lead { font-size: 24px; margin-bottom: 20px; max-width: none; }
  .home-claims__rhythm { height: 30px; margin-top: 20px; }
  .home-claims__cols { grid-template-columns: 1fr 1fr; column-gap: 8px; }
  /* mobilon is szöveg → képek a sorrend, párokba rendezve */
  .ef .claim p {
    grid-column: 1 / 3;
    margin: 0;
    padding: 0 0 14px;
    font-size: 15.5px;
    line-height: 1.7;
  }
  .claim:nth-child(1) p          { grid-row: 1; }
  .claim:nth-child(1) .claim__photo { grid-row: 2; }
  .claim:nth-child(2) p          { grid-row: 3; padding-top: 26px; }
  .claim:nth-child(2) .claim__photo { grid-row: 4; }
  .ef .claim p { font-size: 16px; line-height: 1.65; }

  .home-wide, .home-wide--band, .home-wide--thin { aspect-ratio: 16/9; }

  .home-cats__row { grid-template-columns: 1fr; grid-template-rows: none; width: auto; row-gap: 30px; padding: 0 var(--edge); }
  .home-cat { display: block; grid-row: auto; }
  .home-cat__media { height: auto; aspect-ratio: 4 / 5; margin-bottom: 12px; }
  .home-cat--a .home-cat__frame,
  .home-cat--b .home-cat__frame,
  .home-cat--c .home-cat__frame { position: static; width: 100%; height: 100%; }
  .home-cat--a .home-cat__frame { border-radius: 30px; }
  .home-cat--b .home-cat__frame { border-radius: 500px; }
  .home-cat--c .home-cat__frame { border-radius: 10px 10px 260px; }
  .ef .home-cat__title { font-size: 22px; margin-bottom: 6px; }
  .ef .home-cat__text { font-size: 15px; line-height: 1.5; margin-bottom: 14px; }

  .traits { padding: 40px var(--edge) 34px; }
  .traits__head { margin-bottom: 22px; }
  .traits__body { grid-template-columns: 1fr; row-gap: 20px; }
  /* a bal oszlop feloldódik, hogy a sorrend cím → videó → lista legyen */
  .traits__col { display: contents; }
  .traits__head { order: 1; margin-bottom: 4px; }
  .traits__stage { order: 2; aspect-ratio: 16 / 10; }
  .traits__list { order: 3; }
  .trait { grid-template-columns: 2.2em 1fr; padding: 14px 0; }
  .trait[aria-selected="true"] .trait__text { max-height: 16em; }

  .home-about { padding: 36px var(--edge); }
  .home-about__inner { grid-template-columns: 1fr; row-gap: 22px; }
  .home-about__photo { aspect-ratio: 3 / 2; }
  .ef .home-about__title { font-size: 26px; }
  .ef .home-about__lead { font-size: 15px; margin-bottom: 18px; }

  .says { padding: 40px var(--edge) 34px; }
  .says__head { margin-bottom: 24px; }
  .ef .says__title { font-size: 26px; }
  .says__row { grid-template-columns: 1fr; row-gap: 16px; padding: 22px 0; }
  .says__row--flip .says__photo { order: 0; }
  .ef .says__quote { font-size: 16px; line-height: 1.55; }

}

@media (prefers-reduced-motion: reduce) {
}

/* Kattintható vélemény-fotó: azoknál a pároknál, akiknek van feltöltött albuma */
.says__photo--link { display: block; cursor: pointer; }
.says__photo--link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.says__photo--link:hover img { transform: scale(1.04); }

.says__album {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 0.9em;
  padding-bottom: 4px;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 240ms ease, border-color 240ms ease;
}
.says__album span { transition: transform 300ms var(--ease); }
.says__album:hover { color: var(--accent); border-color: var(--accent); }
.says__album:hover span { transform: translateX(4px); }
.says__album:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }