/* ------------------------------------------------------------------
   Szikla Quad — ajándékutalvány-kártya
   Ezt a lapot használja a nyomtatható utalványoldal ÉS a weboldalon
   látható élő előnézet is, így a kettő pontosan egyforma.

   Minden méret cqw, azaz a kártya szélességének 1%-a. A kártya 2:1
   arányú (a nyomdai minta 210 x 105 mm), ezért bármekkora méretben
   ugyanúgy néz ki — képernyőn és papíron is.
   ------------------------------------------------------------------ */

.vch{
	--vdark:#0c180f;--vpaper:#f5f1e7;--vcream:#f7f4ea;--vink:#1b2535;
	--vgreen:#86b42d;--vgreendark:#0d2a16;
	/* a kártya talpas betűje — egy helyen cserélhető */
	--vserif:'Lora',Georgia,'Times New Roman',serif;
	position:relative;width:100%;aspect-ratio:2/1;overflow:hidden;
	background:var(--vpaper);color:var(--vink);line-height:1.2;
	container-type:inline-size;
}
.vch *{box-sizing:border-box;margin:0;padding:0}
.vch.faded{opacity:.6}

/* --- felső sáv: az illusztráció és a fejléc szövegei --- */
.vch-hero{position:relative;height:60.32%;background:var(--vdark);overflow:hidden}
.vch-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.vch-brand{position:absolute;z-index:2;left:3.22cqw;top:2.4cqw;
	display:flex;align-items:center;gap:2cqw}
.vch-brand>img{height:9.6cqw;width:auto;display:block;flex:0 0 auto}
.vch-name{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.1cqw}
.vch-name b{display:block;font-family:'Anton',Impact,sans-serif;font-weight:400;
	font-size:3.15cqw;line-height:1;letter-spacing:.0815em;color:var(--vcream);
	text-transform:uppercase;white-space:nowrap}
.vch-name b em{font-style:normal;color:var(--vgreen)}
.vch-name span{position:static;
	display:flex;align-items:center;gap:1.64cqw;
	font-family:'Arimo',Arial,sans-serif;font-size:1.63cqw;line-height:1;
	letter-spacing:.025em;text-transform:uppercase;color:var(--vcream);white-space:nowrap}
.vch-name span i{display:block;width:5.75cqw;height:.23cqw;background:var(--vgreen);flex:0 0 auto}

.vch h1{position:absolute;z-index:2;left:3.04cqw;top:15.05cqw;
	font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:7.08cqw;line-height:1;
	letter-spacing:.005em;color:var(--vcream);text-transform:uppercase;white-space:nowrap}
.vch-sub{position:absolute;z-index:2;left:3.38cqw;top:22.98cqw;
	font-family:var(--vserif);font-size:3cqw;line-height:1;
	letter-spacing:.01em;color:var(--vcream);white-space:nowrap}
.vch-sub::after{content:"";position:absolute;left:0;top:3.79cqw;
	width:3.72cqw;height:.24cqw;background:var(--vgreen)}
.vch-side{position:absolute;z-index:2;right:2.42cqw;top:7.72cqw;width:8.3cqw;
	overflow-wrap:normal;word-break:normal;hyphens:none;
	font-family:'Arimo',Arial,sans-serif;font-size:1.23cqw;line-height:1.13;
	letter-spacing:.059em;text-transform:uppercase;color:var(--vcream);text-align:right}
.vch-side::after{content:"";position:absolute;left:.6cqw;bottom:-.8cqw;
	width:2.25cqw;height:.17cqw;background:var(--vgreen)}

/* --- alsó sáv: a kitölthető mezők --- */
.vch-body{position:relative;height:39.68%;background:var(--vpaper);overflow:hidden}
.vch-reed{position:absolute;bottom:0;width:auto;pointer-events:none;z-index:1}
.vch-reed.l{left:0;width:26.49cqw}
.vch-reed.r{right:0;width:12.06cqw}

.vch-fields{position:relative;z-index:2;height:100%}
.vch-f{position:absolute;left:8.46cqw;right:27cqw;
	display:flex;align-items:baseline;gap:1.15cqw}
.vch-f:nth-child(1){top:1.34cqw}
.vch-f:nth-child(2){top:4.84cqw}
.vch-f:nth-child(3){top:8.39cqw}
.vch-f:nth-child(4){top:12cqw}
.vch-f span{font-family:var(--vserif);font-size:1.32cqw;line-height:1;
	color:var(--vink);flex:0 0 auto;white-space:nowrap}
.vch-f span.second{margin-left:1.69cqw}
.vch-f i{position:relative;flex:1 1 auto;min-width:0;font-style:normal;line-height:1;
	padding:0 .7cqw .8cqw;
	font-family:var(--vserif);font-size:1.48cqw;color:var(--vink);
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a kitöltővonal az alapvonal alatt fusson, hogy a g, y, j szárait
   és a számok alját ne vágja el */
.vch-f i::after{content:"";position:absolute;left:0;right:0;bottom:.5cqw;
	height:.09cqw;background:var(--vink)}
.vch-f i:empty::before{content:"\00a0"}
.vch-f i.strong{font-weight:700}
.vch-f.pair i{flex:0 0 auto;width:20.46cqw}
.vch-f.pair i:last-child{width:19.73cqw}
.vch-note{position:absolute;z-index:2;left:0;right:0;top:16.01cqw;
	font-family:var(--vserif);font-size:1.11cqw;line-height:1;
	color:var(--vink);text-align:center}

.vch-contact{position:absolute;z-index:2;inset:0}
.vch-qr{position:absolute;left:79.7cqw;top:2.29cqw;
	width:8.6cqw;height:8.6cqw;display:block;background:#fff}
.vch-contact b{position:absolute;left:71cqw;width:26cqw;text-align:center;top:13.36cqw;
	font-family:'Arimo',Arial,sans-serif;font-weight:700;font-size:1.54cqw;line-height:1;
	letter-spacing:.06em;color:var(--vgreendark);white-space:nowrap}
.vch-contact b.l1{font-size:1.3cqw}
.vch-contact b.l2{font-size:1.1cqw}
.vch-contact span.l1{font-size:1.85cqw}
.vch-contact span.l2{font-size:1.5cqw}
.vch-contact b::after{content:"";position:absolute;left:0;right:0;margin:0 auto;top:2.25cqw;
	width:3.66cqw;height:.28cqw;background:var(--vgreen)}
.vch-contact span{position:absolute;left:71cqw;width:26cqw;text-align:center;top:16.57cqw;
	font-family:'Arimo',Arial,sans-serif;font-size:2.23cqw;line-height:1;
	color:var(--vgreendark);white-space:nowrap}

/* az élő előnézetben az érték cseréje finoman úsztatva történik */
.vch-f i.swap{opacity:0;transition:opacity .16s ease}

/* a QR helye az élő előnézetben (a beágyazott SVG kitölti) */
.vch-qr svg{width:100%;height:100%;display:block}