/* =========================================================
   UMBRA STÚDIÓ — fiktív bemutatóoldal
   Paletta: tus-grafit / csont / kő / korten-rozsda
   Tipográfia: Bodoni Moda · Archivo
   Cél: desktop (1440px), fotózható „galéria" hatás
   ========================================================= */

:root {
  --szin-tus:      #0C0C0E;
  --szin-grafit:   #131316;
  --szin-fust:     #1C1C21;
  --szin-csont:    #EDEAE3;
  --szin-csont-t:  rgba(237, 234, 227, .55);
  --szin-ko:       #A8A29A;
  --szin-rozsda:   #B4552D;
  --szin-rozsda-t: rgba(180, 85, 45, .35);
  --szin-vonal:    rgba(237, 234, 227, .14);

  --f-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --f-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  --shell-pad: clamp(1.5rem, 4vw, 3.75rem);
  --sect-pad:  clamp(6rem, 12vw, 11rem);
}

/* ---------- Alapok ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 340;
  line-height: 1.65;
  color: var(--szin-csont);
  background: var(--szin-tus);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

em { font-family: var(--f-display); font-style: italic; font-weight: 460; }

::selection { background: var(--szin-rozsda); color: var(--szin-csont); }

:focus-visible { outline: 2px solid var(--szin-rozsda); outline-offset: 3px; }

section { position: relative; scroll-margin-top: 6rem; }

/* ---------- Atmoszféra-rétegek: szemcse + vignetta ---------- */

.szemcse {
  position: fixed; inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23z)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.vignetta {
  position: fixed; inset: 0;
  z-index: 59;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 42%, transparent 58%, rgba(0, 0, 0, .38) 100%);
}

/* ---------- Műtárgycédula (visszatérő címke-stílus) ---------- */

.cedula {
  font-family: var(--f-body);
  font-size: .74rem;
  font-weight: 430;
  font-style: normal;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--szin-ko);
}

.szekcio-cedula {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.szekcio-cedula::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--szin-vonal);
}

/* ---------- Rozsda akcent ---------- */

.rozsda { color: var(--szin-rozsda); }

.rozsda-vonal {
  display: inline-block;
  width: 1px;
  height: 2.6rem;
  background: var(--szin-rozsda);
}

/* ---------- Szekciócímek ---------- */

.szekcio-cim {
  font-family: var(--f-display);
  font-size: clamp(3rem, 6vw, 5.4rem);
  font-weight: 480;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}

.szekcio-cim em {
  font-weight: 420;
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- Navigáció (üveg) ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem var(--shell-pad);
  background: rgba(12, 12, 14, .72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--szin-vonal);
}

.nav-logo {
  font-family: var(--f-display);
  font-size: 1.32rem;
  font-weight: 560;
  letter-spacing: .12em;
}

.nav-logo sup {
  font-size: .55em;
  color: var(--szin-rozsda);
  margin-left: .1em;
}

.nav-linkek {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.nav-linkek a {
  font-size: .78rem;
  font-weight: 430;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--szin-csont-t);
  transition: color .25s ease;
}

.nav-linkek a:hover { color: var(--szin-csont); }

.nav-cta {
  padding: .55rem 1.25rem;
  border: 1px solid var(--szin-vonal);
  border-radius: 99px;
  color: var(--szin-csont) !important;
  transition: border-color .25s ease, background .25s ease;
}

.nav-cta:hover {
  border-color: var(--szin-rozsda);
  background: var(--szin-rozsda-t);
}

/* ---------- 1 · HERO ----------
   Rétegezés-szabály: a szöveg MINDIG a kép előtt van (z: 3 > 1),
   a kép bal széle árnyékba olvad (gradiens), így a rajta átfutó
   betű minden viewporton (1280–1920, 700–1080 magasság) olvasható. */

.hero {
  min-height: 100vh;
  padding: 0 var(--shell-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-cedula {
  margin-bottom: clamp(1.5rem, 3vh, 3rem);
  animation: felusz .9s ease .15s both;
}

.hero-cim {
  font-family: var(--f-display);
  font-size: clamp(5rem, 12.5vw, 12.5rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.hero-sor {
  display: block;
  position: relative;
  z-index: 3;                    /* a betű mindig a képre fekszik */
}

.hero-sor-1 { animation: felusz 1s ease .3s both; }

.hero-sor-2 {
  margin-left: clamp(4rem, 10vw, 11rem);
  text-transform: none;          /* kurzív ellenpont a verzál első sorhoz */
  font-style: italic;
  font-weight: 440;
  animation: felusz 1s ease .45s both;
}

.hero-kep {
  position: absolute;
  top: 50%;
  right: var(--shell-pad);
  transform: translateY(-50%);
  width: clamp(240px, 25vw, 420px);
  z-index: 1;                    /* a szöveg alatt */
  animation: herokep-felusz 1.1s ease .6s both;
}

/* a kép bal széle a háttér árnyékába olvad — „umbra" */
.hero-kep::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--szin-tus) 0%, rgba(12, 12, 14, .25) 42%, transparent 68%);
}

.hero-kep img {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: calc(100vh - 280px);
  object-fit: cover;
  filter: brightness(.86) contrast(1.05);
}

.hero-kep figcaption {
  margin-top: .8rem;
  font-size: .68rem;
  text-align: right;
}

.hero-alcim {
  position: relative;
  z-index: 3;
  margin-top: clamp(2rem, 4vh, 3.5rem);
  max-width: 34ch;
  font-size: 1.06rem;
  color: var(--szin-csont-t);
  animation: felusz 1s ease .7s both;
}

@keyframes herokep-felusz {
  from { opacity: 0; transform: translateY(calc(-50% + 28px)); }
  to   { opacity: 1; transform: translateY(-50%); }
}

.hero-lab {
  position: absolute;
  left: var(--shell-pad);
  right: var(--shell-pad);
  bottom: 2.4rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  animation: felusz 1s ease .9s both;
}

.hero-gorgo {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: .74rem;
  font-weight: 430;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--szin-ko);
}

/* ---------- Belépő animációk ---------- */

@keyframes felusz {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* A rejtés csak akkor él, ha a figyelő ténylegesen elindult: a
   reveal-ready osztályt a script közvetlenül az observer élesítése
   UTÁN teszi ki. JS nélkül, scripthibánál vagy hiányzó
   IntersectionObserver mellett minden tartalom látható marad. */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s ease, transform .9s ease;
}

.reveal-ready .reveal.lathato {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-cedula, .hero-cim .hero-sor, .hero-kep, .hero-alcim, .hero-lab { animation: none; }
  .reveal-ready .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Csak képernyőolvasónak szánt címsorok ---------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================
   INNENTŐL: 2–9. szekció stílusai
   ========================================================= */

/* ---------- 2 · FILOZÓFIA ---------- */

.filozofia {
  padding: var(--sect-pad) var(--shell-pad);
}

.filozofia-idezet {
  float: left;
  max-width: 16ch;
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 4.6vw, 4.2rem);
  font-weight: 460;
  line-height: 1.15;
}

.filozofia-szoveg {
  overflow: hidden;
  max-width: 44ch;
  margin-left: clamp(3rem, 8vw, 7rem);
  padding-top: .4rem;
  color: var(--szin-csont-t);
}

.filozofia-szoveg p + p {
  margin-top: 1.6rem;
}

.filozofia-kep {
  clear: both;
}

.filozofia-kep img {
  width: 100%;
  filter: brightness(.92) contrast(1.04);
}

.filozofia-kep figcaption {
  margin-top: .8rem;
}

.filozofia-kep-1 {
  width: 26%;
  margin-top: clamp(5rem, 9vw, 8rem);
}

.filozofia-kep-1 img { aspect-ratio: 3 / 4; object-fit: cover; }

.filozofia-kep-2 {
  width: 34%;
  margin-top: -8rem;
  margin-left: 30%;
}

.filozofia-kep-2 img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- 3 · KIVÁLASZTOTT MUNKÁK ---------- */

.munkak {
  padding: var(--sect-pad) var(--shell-pad);
}

.munkak-racs {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2.5rem;
  row-gap: clamp(4rem, 7vw, 6.5rem);
}

.projekt {
  display: block;
}

.projekt figure {
  overflow: hidden;
  background: var(--szin-grafit);
}

.projekt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .6, .2, 1);
}

.projekt:hover img {
  transform: scale(1.045);
}

.projekt-meta {
  margin-top: 1.1rem;
}

.projekt-meta .cedula {
  display: block;
  margin-bottom: .6rem;
  transition: color .3s ease;
}

.projekt:hover .projekt-meta .cedula {
  color: var(--szin-rozsda);
}

/* Kártya esettanulmány nélkül (article): nem kattintható jelzés */
.hamarosan {
  display: block;
  margin-top: .5rem;
  font-size: .64rem;
  opacity: .6;
}

.projekt h3 {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 2.4vw, 2.3rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.projekt-nagy {
  grid-column: 1 / 8;
}

.projekt-nagy figure img { aspect-ratio: 16 / 10; }

.projekt:nth-child(2) {
  grid-column: 9 / 13;
  margin-top: 10rem;
}

.projekt:nth-child(2) figure img { aspect-ratio: 4 / 5; }

.projekt:nth-child(3) {
  grid-column: 1 / 6;
}

.projekt:nth-child(3) figure img { aspect-ratio: 4 / 3; }

.projekt:nth-child(4) {
  grid-column: 7 / 11;
  margin-top: 6rem;
}

.projekt:nth-child(4) figure img { aspect-ratio: 4 / 5; }

.projekt:nth-child(5) {
  grid-column: 4 / 10;
}

.projekt:nth-child(5) figure img { aspect-ratio: 3 / 4; max-height: 42rem; }

/* ---------- 4 · SZÁMOKBAN ---------- */

.szamok {
  padding: 4rem var(--shell-pad);
  border-top: 1px solid var(--szin-vonal);
  border-bottom: 1px solid var(--szin-vonal);
}

.szamok-sor {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.szam {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 clamp(1.5rem, 3vw, 3rem);
}

.szam:nth-child(n + 2) {
  border-left: 1px solid var(--szin-vonal);
}

.szam dt {
  font-family: var(--f-body);
  font-size: .74rem;
  font-weight: 430;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--szin-ko);
}

.szam dd {
  font-family: var(--f-display);
  font-size: clamp(4rem, 7vw, 6.5rem);
  font-weight: 460;
  line-height: 1;
}

/* ---------- 5 · FOLYAMAT ---------- */

.folyamat {
  display: flex;
  align-items: flex-start;
  gap: clamp(3rem, 6vw, 6rem);
  padding: var(--sect-pad) var(--shell-pad);
}

.folyamat > .cedula {
  position: absolute;
  top: clamp(2rem, 4vw, 3.5rem);
  left: var(--shell-pad);
}

.folyamat-kep {
  width: 38%;
  flex-shrink: 0;
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

.folyamat-kep img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: brightness(.9) contrast(1.04);
}

.folyamat-lista {
  flex: 1;
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

.lepes {
  display: grid;
  grid-template-columns: 4rem 1fr;
  column-gap: 2rem;
  padding: 2.6rem 0;
  border-top: 1px solid var(--szin-vonal);
}

.lepes:last-child {
  border-bottom: 1px solid var(--szin-vonal);
}

.lepes-szam {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.5rem;
}

.lepes h3 {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: .9rem;
}

.lepes p {
  grid-column: 2;
  max-width: 46ch;
  color: var(--szin-csont-t);
}

/* ---------- 6 · ATMOSZFÉRA ---------- */

.atmoszfera {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 88vh;
  overflow: hidden;
}

.atmoszfera img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.8);
}

.atmoszfera::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0, 0, 0, .32) 0%, transparent 68%);
}

.atmoszfera-mondat {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  line-height: 1.15;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}

/* ---------- 7 · ÜGYFÉLIDÉZET ---------- */

.idezet {
  padding: var(--sect-pad) var(--shell-pad);
  text-align: center;
}

.idezet blockquote {
  margin: 0 auto;
}

.idezet blockquote p {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  line-height: 1.2;
}

.idezet footer {
  margin-top: 2rem;
}

/* ---------- 8 · SZOLGÁLTATÁSOK ---------- */

.szolgaltatasok {
  padding: var(--sect-pad) var(--shell-pad);
}

.szolg-sor {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  align-items: center;
  padding: 2.2rem 0;
  border-top: 1px solid var(--szin-vonal);
  transition: background .4s ease, padding-left .4s ease;
}

.szolg-lista .szolg-sor:last-child {
  border-bottom: 1px solid var(--szin-vonal);
}

.szolg-sor:hover {
  background: var(--szin-fust);
  padding-left: 1.5rem;
}

.szolg-index {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.4rem;
}

.szolg-sor h3 {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 3.4vw, 3.2rem);
  font-weight: 480;
  text-transform: uppercase;
}

/* ---------- 9 · CTA + LÁBLÉC ---------- */

.zaras {
  padding: var(--sect-pad) var(--shell-pad) clamp(4rem, 8vw, 6rem);
  text-align: center;
}

.zaras .szekcio-cedula {
  justify-content: center;
}

.zaras .szekcio-cedula::after {
  display: none;
}

.zaras-cim {
  font-family: var(--f-display);
  font-size: clamp(3.6rem, 7.6vw, 7rem);
  font-weight: 480;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.zaras-cim em {
  font-weight: 420;
  text-transform: none;
  letter-spacing: 0;
}

.zaras-gomb {
  display: inline-block;
  padding: 1.1rem 2.6rem;
  border: 1px solid var(--szin-vonal);
  border-radius: 99px;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: border-color .3s ease, background .3s ease;
}

.zaras-gomb:hover {
  border-color: var(--szin-rozsda);
  background: var(--szin-rozsda-t);
}

.lablec {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 3rem var(--shell-pad) 3.5rem;
  border-top: 1px solid var(--szin-vonal);
}

.lablec-oszlop:last-child {
  text-align: right;
}

.lablec-oszlop span,
.lablec-oszlop a {
  display: block;
  line-height: 2;
}

.lablec-oszlop a:hover { color: var(--szin-csont); }

/* =========================================================
   PROJEKT ALOLDAL — Bazalt-ház
   projekt.html — case study
   ========================================================= */

/* ---------- 1 · PROJEKT-HERO ---------- */

.projekt-hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.projekt-hero img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.78) contrast(1.04);
}

.projekt-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(12, 12, 14, .92) 0%, rgba(12, 12, 14, .5) 34%, transparent 64%);
}

.projekt-hero-tartalom {
  position: absolute;
  z-index: 2;
  left: var(--shell-pad);
  right: var(--shell-pad);
  bottom: clamp(3rem, 7vh, 5.5rem);
}

.projekt-hero-cedula {
  margin-bottom: clamp(1.2rem, 2.4vh, 2rem);
  animation: felusz .9s ease .2s both;
}

.projekt-hero-cim {
  font-family: var(--f-display);
  font-size: clamp(5rem, 11vw, 11rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.015em;
  text-transform: uppercase;
  animation: felusz 1s ease .4s both;
}

.projekt-hero-szoveg {
  margin-top: clamp(1.6rem, 3vh, 2.6rem);
  max-width: 44ch;
  font-size: 1.06rem;
  color: var(--szin-csont-t);
  animation: felusz 1s ease .6s both;
}

/* ---------- 2 · ADATLAP ---------- */

.adatlap {
  padding: 4rem var(--shell-pad);
  border-top: 1px solid var(--szin-vonal);
  border-bottom: 1px solid var(--szin-vonal);
}

.adatlap-sor {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.adatlap-mezo {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 0 clamp(1.5rem, 3vw, 3rem);
}

.adatlap-mezo:nth-child(n + 2) {
  border-left: 1px solid var(--szin-vonal);
}

.adatlap-mezo dd {
  font-family: var(--f-body);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--szin-csont);
}

/* ---------- 3 · KONCEPCIÓ ---------- */

.koncepcio {
  padding: var(--sect-pad) var(--shell-pad);
}

.koncepcio-tartalom {
  display: flex;
  align-items: flex-start;
  gap: clamp(3rem, 6vw, 7rem);
}

.koncepcio-mondat {
  flex: 1;
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 4.2vw, 3.8rem);
  font-weight: 460;
  line-height: 1.15;
  max-width: 18ch;
}

.koncepcio-szoveg {
  flex-shrink: 0;
  max-width: 44ch;
  padding-top: .4rem;
  color: var(--szin-csont-t);
}

.koncepcio-szoveg p + p {
  margin-top: 1.6rem;
}

/* ---------- 4 · GALÉRIA ---------- */

.galeria {
  padding: var(--sect-pad) var(--shell-pad);
}

.galeria-racs {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2.5rem;
  row-gap: clamp(5rem, 9vw, 8rem);
}

.galeria-racs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.92) contrast(1.04);
}

.galeria-racs figcaption {
  margin-top: .8rem;
}

.galeria-etkezo { grid-column: 1 / 13; }
.galeria-etkezo img { aspect-ratio: 2.3 / 1; }

.galeria-furdo { grid-column: 1 / 6; }
.galeria-furdo img { aspect-ratio: 3 / 4; }

.galeria-konyha {
  grid-column: 7 / 13;
  margin-top: clamp(5rem, 8vw, 7rem);
}

.galeria-konyha img { aspect-ratio: 3 / 4; }

.galeria-detail { grid-column: 1 / 8; }
.galeria-detail img { aspect-ratio: 4 / 3; }

.galeria-mondat {
  grid-column: 9 / 13;
  align-self: center;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--szin-csont-t);
}

.galeria-nappali { grid-column: 2 / 12; }
.galeria-nappali img { aspect-ratio: 16 / 9; }

/* ---------- 5 · KÖVETKEZŐ PROJEKT ---------- */

.kovetkezo {
  padding: var(--sect-pad) var(--shell-pad) clamp(5rem, 9vw, 7rem);
  border-top: 1px solid var(--szin-vonal);
}

.kovetkezo-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 4rem);
}

.kovetkezo-szoveg {
  flex: 1;
}

.kovetkezo .szekcio-cedula {
  transition: color .35s ease;
}

.kovetkezo .szekcio-cedula::after {
  transition: background .35s ease;
}

.kovetkezo-link:hover .szekcio-cedula {
  color: var(--szin-rozsda);
}

.kovetkezo-link:hover .szekcio-cedula::after {
  background: var(--szin-rozsda);
}

.kovetkezo-cim {
  font-family: var(--f-display);
  font-size: clamp(3.6rem, 7vw, 6.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.kovetkezo-nyil {
  display: inline-block;
  margin-left: .35em;
  transition: transform .35s ease, color .35s ease;
}

.kovetkezo-link:hover .kovetkezo-nyil {
  transform: translateX(.35em);
  color: var(--szin-rozsda);
}

.kovetkezo-kep {
  flex-shrink: 0;
  width: clamp(220px, 22vw, 340px);
}

.kovetkezo-kep img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: brightness(.6) contrast(1.04);
}

/* =========================================================
   MOBIL NAVIGÁCIÓ
   A vízszintes linksor ~860px alatt nem fér ki. Elrejtés helyett
   lenyíló panel: a demó mobilon is navigálható marad.
   Alapból (JS nélkül) a panel egyszerűen a linksor — a kapcsológomb
   csak a töréspont alatt jelenik meg, és csak ott vesz át irányítást.
   ========================================================= */

.nav-kapcsolo {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.nav-kapcsolo-vonal {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--szin-csont);
  transition: transform .3s ease, opacity .3s ease;
}

.nav-kapcsolo[aria-expanded="true"] .nav-kapcsolo-vonal:first-child {
  transform: translateY(4px) rotate(45deg);
}

.nav-kapcsolo[aria-expanded="true"] .nav-kapcsolo-vonal:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

/* =========================================================
   RESZPONZÍV — 2 · tablet és mobil
   A demó eredetileg 1440px-re készült. Ez a szakasz teszi kis
   képernyőn is teljes értékűvé; a design nyelve nem változik,
   csak az elrendezés bomlik egy hasábra.
   ========================================================= */

@media (max-width: 860px) {

  /* ---- Navigáció ---- */
  .nav-kapcsolo { display: flex; }

  .nav-linkek {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--shell-pad) 1.4rem;
    /* Teljesen fedő háttér: 96%-os áttetszőségnél a hero verzál címsora
       átütött a panelen, és olvashatatlanná tette a menüpontokat. */
    background: var(--szin-tus);
    border-bottom: 1px solid var(--szin-vonal);
  }

  /* A panel csak akkor rejthető, ha a kapcsológomb bekötése sikerült —
     enélkül a linkek egyszerű, mindig látható listaként elérhetők. */
  .nav-ready .nav-linkek { display: none; }
  .nav-ready .nav-linkek.nyitva { display: flex; }

  .nav-linkek a {
    padding: .95rem 0;
    border-bottom: 1px solid var(--szin-vonal);
  }

  .nav-linkek .nav-cta {
    margin-top: 1.1rem;
    padding: .85rem 1.25rem;
    text-align: center;
    border-bottom: 1px solid var(--szin-vonal);
  }

  /* ---- Hero: a kép kikerül az abszolút pozícióból a szöveg alá ---- */
  .hero {
    min-height: 0;
    padding-top: 8.5rem;
    padding-bottom: 5.5rem;
  }

  .hero-cim { font-size: clamp(3.1rem, 13vw, 6.5rem); }

  .hero-sor-2 { margin-left: clamp(1.5rem, 6vw, 4rem); }

  .hero-kep {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 2.6rem;
    animation: felusz 1.1s ease .6s both;
  }

  .hero-kep::before { display: none; }

  .hero-kep img {
    aspect-ratio: 4 / 3;
    max-height: none;
  }

  .hero-kep figcaption { text-align: left; }

  .hero-alcim { max-width: none; }

  .hero-lab {
    position: static;
    margin-top: 3rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }

  .rozsda-vonal { height: 1.6rem; }

  /* ---- Filozófia: float helyett normál folyam ---- */
  .filozofia-idezet {
    float: none;
    max-width: none;
    margin-bottom: 2.4rem;
  }

  .filozofia-szoveg {
    max-width: none;
    margin-left: 0;
  }

  .filozofia-kep-1,
  .filozofia-kep-2 {
    width: 100%;
    margin-left: 0;
    margin-top: clamp(2.5rem, 7vw, 4rem);
  }

  /* ---- Munkák: a 12 hasábos rács egy hasábra ---- */
  .munkak-racs {
    grid-template-columns: 1fr;
    row-gap: clamp(3rem, 8vw, 4.5rem);
  }

  .projekt-nagy,
  .projekt:nth-child(2),
  .projekt:nth-child(3),
  .projekt:nth-child(4),
  .projekt:nth-child(5) {
    grid-column: 1;
    margin-top: 0;
  }

  .projekt:nth-child(5) figure img { max-height: none; }

  /* ---- Számokban ---- */
  .szamok-sor {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2.4rem;
  }

  .szam { padding: 0 1.2rem; }
  .szam:nth-child(odd) { padding-left: 0; border-left: 0; }
  .szam dd { font-size: clamp(2.6rem, 11vw, 6.5rem); }

  /* ---- Folyamat ---- */
  .folyamat {
    display: block;
    padding-top: calc(var(--sect-pad) * .8);
  }

  .folyamat > .cedula {
    position: static;
    margin-bottom: clamp(2rem, 5vw, 3rem);
  }

  .folyamat-kep,
  .folyamat-lista {
    width: 100%;
    margin-top: 0;
  }

  .folyamat-lista { margin-top: clamp(2.5rem, 6vw, 4rem); }

  .lepes {
    grid-template-columns: 1fr;
    row-gap: .6rem;
    padding: 2.2rem 0;
  }

  .lepes p {
    grid-column: 1;
    max-width: none;
  }

  /* ---- Atmoszféra ---- */
  .atmoszfera { height: 62vh; }

  /* ---- Szolgáltatások: a meta külön sorba ---- */
  .szolg-sor {
    grid-template-columns: 2.6rem 1fr;
    align-items: baseline;
    row-gap: .4rem;
    padding: 1.9rem 0;
  }

  .szolg-sor:hover { padding-left: 0; }
  .szolg-meta { grid-column: 2; }

  /* ---- Lábléc ---- */
  .lablec {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .lablec-oszlop:last-child { text-align: left; }

  /* =====================================================
     PROJEKT ALOLDAL
     ===================================================== */

  .projekt-hero { height: 78vh; }

  .projekt-hero-cim { font-size: clamp(3.1rem, 13vw, 7rem); }

  .projekt-hero-szoveg { max-width: none; }

  .adatlap-sor {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2.2rem;
  }

  .adatlap-mezo { padding: 0 1.2rem; }
  .adatlap-mezo:nth-child(odd) { padding-left: 0; border-left: 0; }

  .koncepcio-tartalom { display: block; }

  .koncepcio-mondat {
    max-width: none;
    margin-bottom: 2.4rem;
  }

  .koncepcio-szoveg { max-width: none; }

  .galeria-racs {
    grid-template-columns: 1fr;
    row-gap: clamp(3rem, 8vw, 5rem);
  }

  .galeria-etkezo,
  .galeria-furdo,
  .galeria-konyha,
  .galeria-detail,
  .galeria-mondat,
  .galeria-nappali {
    grid-column: 1;
    margin-top: 0;
  }

  .galeria-mondat { font-size: 1.35rem; }

  .kovetkezo-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem;
  }

  .kovetkezo-kep { width: 100%; }
  .kovetkezo-kep img { aspect-ratio: 16 / 10; }
}

@media (max-width: 560px) {
  .szekcio-cim { font-size: clamp(2.1rem, 9.5vw, 3rem); }
  .zaras-cim { font-size: clamp(2.3rem, 10vw, 3.6rem); }
  .kovetkezo-cim { font-size: clamp(2.3rem, 10vw, 3.6rem); }
  .filozofia-idezet { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .koncepcio-mondat { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .idezet blockquote p { font-size: clamp(1.5rem, 6.8vw, 2.2rem); }
  .atmoszfera-mondat { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .szolg-sor h3 { font-size: clamp(1.6rem, 7.5vw, 2.2rem); }
  .projekt h3 { font-size: clamp(1.35rem, 6.5vw, 1.7rem); }
  .szam dd { font-size: clamp(2.3rem, 12vw, 4rem); }
  .zaras-gomb { display: block; text-align: center; }
}


/* =========================================================
   FIKTÍV ADATOK ÉS DEMÓ-CTA
   A demó e-mail-címei és telefonszámai kitaláltak, ezért NEM
   kattinthatók: a kapcsolati blokk felépítése látszik, de a látogató
   nem indít valódi levelet vagy hívást nem létező elérhetőségre.
   A globális "a { color: inherit; text-decoration: none }" miatt a
   span megjelenése azonos a korábbi linkével — csak a hover és a
   kattinthatóság szűnik meg.
   ========================================================= */

.fiktiv-adat { cursor: default; }

/* A demó fő CTA-ja valódi célra visz — a hozzá tartozó Talvona
   esettanulmányra —, közvetlenül alatta látható magyarázattal.
   Így sem halott gomb, sem hamis funkció benyomása nem keletkezik. */
.demo-megjegyzes {
  display: block;
  margin-top: .9rem;
  max-width: 42ch;
  font-size: .72rem;
  line-height: 1.5;
  letter-spacing: .04em;
  /* A megjegyzés magyarázó mondat, nem címke: az örökölt verzál és a
     nagy betűköz (pl. .cedula, .mono) itt olvashatatlanná tenné. */
  text-transform: none;
  opacity: .7;
}


/* =========================================================
   KONCEPCIÓDEMÓ-JELZÉS
   A jelzés SZÁNDÉKOSAN a szövegfolyam része, nem fix elem. Egy képernyőre
   rögzített sávon görgetés közben előbb-utóbb átfut valamilyen saját
   tartalom (a NIVARO „Görgessen” jelzése, az UMBRA koordinátasora és az
   adatlapcímkéi így takaródtak ki) — ezt pozíció-hangolással nem lehet
   kizárni, csak azzal, ha az elem helyet foglal a folyamban.
   A hero elejére kerül, így a közvetlenül érkező látogató azonnal látja.
   A paletta a Talvona Labsé, nem a bemutatott fiktív márkáé.
   ========================================================= */

.tl-demo-jelzes {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  margin-bottom: 1.4rem;
  padding: 8px 16px;
  border-radius: 999px;
  background: #0F1D17;
  border: 1px solid rgba(0, 229, 160, .45);
  color: #E9F2EC;
  font-family: var(--f-body);
  font-size: 11px;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease;
}

.tl-demo-jelzes:hover,
.tl-demo-jelzes:focus-visible {
  background: #14291F;
  border-color: #00E5A0;
}

.tl-demo-jelzes b {
  color: #00E5A0;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tl-demo-jelzes span {
  font-weight: 400;
  opacity: .82;
  letter-spacing: .02em;
  text-transform: none;
}

@media (max-width: 430px) {
  .tl-demo-jelzes {
    align-items: flex-start;
    gap: 7px;
    padding: 8px 14px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tl-demo-jelzes { transition: none; }
}

/* ===== Ugrás a tartalomra (skip link) =====
   Csak billentyűzetes fókuszban jelenik meg, egérrel használva láthatatlan.
   A cél elem tabindex="-1" attribútumot kap, hogy a fókusz ténylegesen
   rákerüljön — enélkül a böngésző csak görget, de a Tab a navigációban marad. */
.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--szin-csont);
  color: var(--szin-tus);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}
[tabindex="-1"]:focus {
  outline: none;
}