/* violarobert.sk — köszönő oldal. Irány: „place-carries-it" (taste-skill).
   A márka színei és betűi megmaradnak, a kompozíció új. */
:root{
  --paper:#f3f5f4; --white:#fff; --ink:#16201f; --muted:#4c5a57;
  --green:#005a4b; --green-deep:#0c4644; --slate:#1f2830; --red:#e30613; --red-2:#b8000c;
  --frame:10px;
  --m:clamp(22px,4vw,56px);
  --d1:clamp(54px,9.6vw,150px);   /* nagy */
  --d2:clamp(30px,6.2vw,92px);
  --d3:clamp(27px,4vw,56px);
  --body:clamp(17px,1.15vw,20px);
  --small:16px; --lead:clamp(18px,1.35vw,21px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:Roboto,system-ui,sans-serif;
  font-size:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:Poppins,Roboto,sans-serif;font-weight:700;letter-spacing:-.03em;line-height:.95}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.wrap{width:100%;padding:0 var(--m)}
.nw{white-space:nowrap}
html[lang="hu"] [data-lang="sk"],html[lang="sk"] [data-lang="hu"]{display:none}

/* ---------- rögzített menüsáv (a nyitókép után jelenik meg; a fejezet színét veszi fel) ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:28px;
  padding:12px var(--m);background:var(--paper);color:var(--ink);
  transform:translateY(-100%);transition:transform .35s ease,background .3s ease,color .3s ease}
.bar.on{transform:none}
.bar.dark{background:var(--green-deep);color:#fff}
.bar-name{font-weight:700;text-decoration:none;font-size:var(--small);margin-right:auto;white-space:nowrap}
.bar nav{display:flex;gap:22px}
.bar nav a{text-decoration:none;font-size:var(--small);font-weight:600}
.bar nav a:hover{text-decoration:underline}
.bar .langs{position:static}
.bar .langs button{color:inherit;background:rgba(127,127,127,.18)}
.bar .langs button[aria-pressed="true"]{background:var(--red);color:#fff}
.visit>img{object-position:28% 50%}

/* ---------- keret ---------- */
.frame{padding:var(--frame);background:var(--paper)}

/* ---------- nyitókép ---------- */
.hero{display:grid;grid-template-columns:1fr 150px;gap:var(--frame);height:calc(100svh - var(--frame)*2);min-height:560px}
.panel{position:relative;overflow:hidden;border-radius:12px;background:var(--green-deep)}
.panel>img{position:absolute;left:0;right:0;top:-4%;width:100%;height:108%;object-fit:cover;object-position:52% 58%;will-change:transform}
@media (prefers-reduced-motion:reduce){.panel>img{top:0;height:100%}}
.panel:after{content:"";position:absolute;inset:0;z-index:1;background:#2c1a15;opacity:.5}
.langs{position:absolute;top:22px;right:var(--m);z-index:2;display:flex;gap:4px}
.langs button{font:inherit;font-size:var(--small);font-weight:700;color:#fff;background:rgba(255,255,255,.14);
  border:0;border-radius:8px;padding:7px 12px;cursor:pointer}
.langs button{transition:background .2s ease,color .2s ease}
.langs button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.hero-tx{position:absolute;left:var(--m);right:var(--m);top:clamp(84px,13vh,150px);z-index:3;color:#fff}
.hero-tx h1{font-size:var(--d1);max-width:13ch}
.hero-lead{margin-top:22px;max-width:38ch;font-size:clamp(19px,1.5vw,23px);line-height:1.45;color:#fff;font-weight:500}
.hero-foot{position:absolute;left:var(--m);right:var(--m);bottom:clamp(26px,4vh,46px);
  z-index:2;color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.hero-foot p{max-width:40ch;font-size:17px;line-height:1.5;color:#f6efe9;font-weight:500}
.act{flex:none;background:#fff;color:var(--ink);text-decoration:none;font-weight:700;font-size:var(--small);
  padding:16px 26px;border-radius:0}
.act{transition:background .25s ease,color .25s ease,transform .18s ease}
.act:hover{background:var(--red);color:#fff}
.act:active{transform:translateY(2px)}

/* a színoszlop egyben a menü */
.swatches{display:flex;flex-direction:column;border-radius:12px;overflow:hidden}
.sw-name{background:var(--green-deep);color:#fff;padding:20px 16px;font-size:var(--small);font-weight:700;line-height:1.3}
.swatches a{flex:1;display:block;padding:18px 16px;text-decoration:none;font-size:var(--small);font-weight:600;line-height:1.25}
.sw1{background:var(--paper);color:var(--ink)}
.sw2{background:#cfded8;color:var(--ink)}
.sw3{background:var(--green);color:#fff}
.sw4{background:var(--green-deep);color:#fff}
.sw5{background:var(--ink);color:#fff}
.swatches a{transition:padding-left .25s ease}
.swatches a:hover{padding-left:24px;text-decoration:underline}

/* ---------- a levél ---------- */
.letter{background:var(--paper);padding:clamp(72px,12vh,150px) 0 clamp(64px,10vh,120px)}
.letter .col{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,28vw,400px);gap:clamp(32px,5vw,80px);align-items:start}
.letter h2{font-size:var(--d3);margin-bottom:28px}
.letter p{max-width:62ch;color:#28332f}
.letter p+p{margin-top:18px}
.letter .close{font-weight:700;color:var(--ink);border-left:5px solid var(--red);padding-left:22px;margin-top:34px}
.letter .statement{font-family:Poppins,Roboto,sans-serif;font-size:clamp(22px,2.2vw,32px);line-height:1.2;letter-spacing:-.015em;max-width:34ch}
.sign{margin-top:34px;color:var(--muted);font-size:var(--small)}
.sign b{display:block;font-family:Poppins,Roboto,sans-serif;font-size:26px;color:var(--green-deep);margin-top:6px;letter-spacing:-.02em}
.letter figure{margin:0;position:sticky;top:clamp(24px,6vh,56px)}
.letter figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:10px}
.letter figcaption{margin-top:12px;font-size:var(--small);color:var(--muted);line-height:1.45}

/* ---------- a levél mint jelenet ---------- */
.letter .beat + .beat{margin-top:18px}
.letter .gauge{display:none}
html.js .letter.is-live{padding:0}
html.js .letter.is-live .scene-stage .wrap{height:100%;display:flex;align-items:center}
html.js .letter.is-live .col{width:100%;align-items:center}
html.js .letter.is-live .text{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:min(70svh,640px)}
html.js .letter.is-live .beats{position:relative}
html.js .letter.is-live .beat{position:absolute;left:0;width:100%;margin:0}
html.js .letter.is-live .beat + .beat{margin-top:0}
html.js .letter.is-live .gauge{display:block;height:4px;width:min(260px,40%);background:#dfe6e3;margin-top:28px}
html.js .letter.is-live .gauge i{display:block;height:100%;background:var(--red);transform-origin:left;transform:scaleX(0)}
html.js .letter.is-live figure{position:static}
html.js .letter.is-live figure img{transform-origin:50% 30%}
/* egy bekezdés van a képernyőn: olvasási méretben, teljes tintával */
html.js .letter.is-live .beat p{font-size:clamp(18px,1.45vw,22px);line-height:1.55;color:var(--ink);max-width:58ch}
html.js .letter.is-live .beat .statement{font-size:clamp(24px,2.3vw,34px);line-height:1.2}
html.js .letter.is-live .text{height:min(74svh,680px)}
html.js .letter.is-live .beats{align-self:center;height:100%;display:flex;align-items:center}
html.js .letter.is-live .beat{top:auto}
/* 768–900 px: a jelenet él, de egy oszlop fér el — a portré a kész levélben marad, a színpadon a szöveg */
@media (min-width:768px) and (max-width:900px){
  html.js .letter.is-live figure{display:none}
  html.js .letter.is-live .col{grid-template-columns:1fr}
}

/* ---------- a város: a hely hordozza ---------- */
.town{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.town>img{position:absolute;left:0;right:0;top:-12%;width:100%;height:124%;object-fit:cover;object-position:50% 45%;will-change:transform}
@media (prefers-reduced-motion:reduce){.town>img{top:0;height:100%}}
.town:after{content:"";position:absolute;inset:0;background:#1a1410;opacity:.52}
.town-tx{position:relative;z-index:2;padding-top:clamp(120px,22vh,220px);padding-bottom:clamp(40px,7vh,72px)}
.town h2{font-size:var(--d1);max-width:11ch;line-height:.92}
.town .cap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,56px);margin-top:clamp(28px,5vh,48px);max-width:1100px}
.town .cap p{font-size:var(--lead);line-height:1.45;color:#eef2f0}
.town .credit{margin-top:28px;font-size:var(--small);color:#b9c6c1}

/* ---------- itt talál meg ---------- */
.find{background:var(--white);padding:clamp(72px,12vh,150px) 0}
.find h2{font-size:var(--d3)}
.find .lead{margin-top:20px;max-width:46ch;font-size:var(--lead);line-height:1.45;color:#28332f}
.mosaic{margin-top:clamp(40px,6vh,72px);display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:stretch}
.mosaic .shot{position:relative}
.mosaic .shot img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;
  transform:scale(1.05);transition:transform 2.2s ease}
.js .shot.in img{transform:scale(1)}
.mosaic .under{margin-top:14px;font-size:var(--small);line-height:1.55;color:var(--muted);max-width:60ch}
.tile{background:var(--green);color:#fff;border-radius:10px;padding:26px;display:flex;flex-direction:column;gap:18px}
.tile .next{font-size:var(--small);line-height:1.5;color:#c9e4dc}
.tile .next b{display:block;font-family:Poppins,Roboto,sans-serif;font-size:clamp(21px,1.9vw,27px);
  letter-spacing:-.02em;line-height:1.2;margin-top:8px;color:#fff}
.tile img{width:100%;border-radius:8px;flex:1;min-height:0;object-fit:cover}
/* az ötletdoboz: saját, lapos mező a mozaik alatt */
.idea{margin-top:16px;background:var(--paper);border-radius:10px;padding:clamp(26px,3.4vw,44px);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);align-items:start}
.idea h3{font-size:clamp(26px,3vw,42px);line-height:1;letter-spacing:-.025em;color:var(--green-deep)}
.idea p{font-size:var(--lead);line-height:1.5;color:#28332f;max-width:52ch}
/* elérhetőség: három lapos színmező, mint a nyitókép oszlopa */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.facts div{padding:clamp(20px,2.4vw,30px);border-radius:10px;color:#fff;min-height:132px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.facts div:nth-child(1){background:var(--green-deep)}
.facts div:nth-child(2){background:var(--green)}
.facts div:nth-child(3){background:var(--ink)}
.facts div b{display:block;font-size:var(--small);font-weight:600;color:rgba(255,255,255,.72)}
.facts div span{font-family:Poppins,Roboto,sans-serif;font-size:clamp(19px,1.6vw,24px);font-weight:700;letter-spacing:-.015em;line-height:1.15}
.facts div a{color:#fff;text-decoration:none}
.facts div a:hover{text-decoration:underline}

/* ---------- látogatás ---------- */
.visit{position:relative;min-height:100svh;display:flex;align-items:center}
.visit>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visit:after{content:"";position:absolute;inset:0;background:#0b1a18;opacity:.42}
.card{position:relative;z-index:2;margin-left:auto;margin-right:clamp(20px,6vw,90px);width:min(400px,100%);
  background:var(--paper);padding:32px}
.card h2{font-size:30px;margin-bottom:18px}
.card p{font-size:var(--small);line-height:1.5}
.card .rows{margin:20px 0 4px}
.card .rows div{display:flex;justify-content:space-between;gap:18px;padding:9px 0;font-size:var(--small)}
.card .rows div:first-child{padding-top:0}
.card .rows b{font-weight:700}
.card .rows span{font-variant-numeric:tabular-nums}
.card .go{display:block;margin-top:24px;background:var(--red);color:#fff;text-align:center;
  font-weight:700;padding:17px;text-decoration:none}
.card .go{transition:background .25s ease,transform .18s ease}
.card .go:hover{background:var(--red-2)}
.card .go:active{transform:translateY(2px)}

/* ---------- lábjéc: teljes képernyős zárás, a név margótól margóig ---------- */
footer{background:var(--ink);color:#fff;min-height:100svh;
  display:grid;grid-template-rows:auto 1fr auto;padding:clamp(56px,9vh,110px) 0 28px}
.ftop{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:start}
.fsay h2{font-size:var(--d3);line-height:1;max-width:14ch}
.fsay p{margin-top:18px;max-width:44ch;font-size:var(--lead);line-height:1.5;color:#c9d3cf}
.flinks{display:grid;gap:14px;justify-items:end;text-align:right;padding-top:.6em}
.flinks a{color:#fff;text-decoration:none;font-size:var(--lead);font-weight:600;line-height:1.3}
.flinks a:hover{text-decoration:underline}
.flinks a:last-child{color:#9aa8a4;font-weight:500;font-size:var(--small);margin-top:10px}
.fbottom{grid-row:3}
.wordmark{width:100%;height:auto;display:block}
.wordmark text{font-family:Poppins,Roboto,sans-serif;font-weight:700;letter-spacing:-.04em;fill:#fff}
.legal{margin-top:14px;font-size:var(--small);color:#8f9d99;line-height:1.6;display:flex;justify-content:flex-end}

/* ---------- megjelenés ---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- telefon ---------- */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;height:auto;min-height:0}
  .panel{height:64svh;min-height:420px}
  .swatches{flex-direction:row;flex-wrap:wrap;border-radius:10px}
  .swatches a{flex:1 1 50%;padding:14px 14px;font-size:14px}
  .hero-tx{top:auto;bottom:122px}
  .hero-tx h1{font-size:clamp(32px,9.4vw,58px)}
  .hero-foot{position:static;padding:18px var(--m) 26px;color:#fff;background:transparent}
  .panel .hero-foot{position:absolute;bottom:22px;padding:0}
  .panel .hero-foot p{display:none}
  .letter .col{grid-template-columns:1fr}
  .letter .statement{font-size:20px;max-width:none}
  .town .cap{grid-template-columns:1fr}
  .town h2{font-size:clamp(34px,10vw,56px)}
  .mosaic{grid-template-columns:1fr}
  .idea{grid-template-columns:1fr;gap:14px}
  .facts{grid-template-columns:1fr}
  .facts div{min-height:0}
  .visit{min-height:auto;flex-direction:column;align-items:stretch}
  .visit>img{position:static;height:58svh}
  .visit:after{display:none}
  .card{margin:-70px var(--m) 0;width:auto}
  .ftop{grid-template-columns:1fr;gap:28px}
  .flinks{justify-items:start;text-align:left}
  footer{min-height:auto;padding-top:48px}
  .legal{justify-content:flex-start}
  .bar nav{display:none}
  .bar{gap:14px;padding:10px var(--m)}
}