/* =========================================================
   theme-brand.css — VALÓDI SOUL X ARCULAT preview réteg
   ---------------------------------------------------------
   Krém/bézs alap + PIROS és SÁRGA akcent (a tényleges márka
   színei: COFFEE-tábla piros, itallap/pohár sárga, gép fekete).
   A style.css UTÁN töltődik a preview-brand.html-ben, csak a
   színeket + a v2 elemek (slideshow, görgő galéria) stílusát adja.
   Az éles index.html NEM érintett.
========================================================= */

:root {
  --cream:        #F4EEE1;   /* meleg krém alap */
  --cream-soft:   #FBF7EE;   /* világosabb váltó */
  --cream-deep:   #ECE4D4;   /* mélyebb krém váltó */
  --paper:        #FFFFFF;

  --ink:          #221C15;   /* sötét espresso szöveg */
  --ink-soft:     #6A6152;

  /* Akcent: PIROS (fő) + SÁRGA (másodlagos) */
  --green:        #D62A22;   /* fő akcent — piros */
  --green-deep:   #B0241C;   /* mély piros (hover, kis szöveg) */
  --green-soft:   #F2B233;   /* sárga (dekoratív, sötét felületen) */
  --amber:        #F2B233;   /* sárga */

  --dark:         #1E1A14;   /* espresso (footer, reward) */

  --line:         rgba(34, 28, 21, 0.13);
  --line-strong:  rgba(34, 28, 21, 0.22);
}

body { background: var(--cream); }

/* Piros gomb fehér felirattal */
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-deep); color: #fff; }
.btn--outline { border-color: var(--green); color: var(--green-deep); }
.btn--outline:hover { background: var(--green); color: #fff; }

/* =========================================================
   HERO — sötét „sziget" a világos oldalon: kép + overlay + világos szöveg
========================================================= */
.hero__overlay {
  background:
    linear-gradient(95deg, rgba(18,15,11,0.86) 0%, rgba(18,15,11,0.64) 38%, rgba(18,15,11,0.22) 68%, rgba(18,15,11,0.04) 100%),
    linear-gradient(180deg, rgba(26,22,16,0.4) 0%, rgba(26,22,16,0.26) 40%, rgba(26,22,16,0.74) 100%);
}
.hero__title, .hero__lead { text-shadow: 0 2px 28px rgba(0,0,0,0.42); }
.hero__subtitle, .hero__body, .hero__note { text-shadow: 0 1px 18px rgba(0,0,0,0.4); }
.hero__reward { color: var(--amber); font-weight: 700; }
.hero__eyebrow { color: var(--amber); }
.hero__title, .hero__lead { color: #F7F2E8; }
.hero__subtitle { color: var(--green); }
.hero__body, .hero__note { color: rgba(247,242,232,0.86); }
.hero__title .accent { color: var(--amber); }
.hero__scroll { border-color: rgba(247,242,232,0.5); }
.hero__scroll span { background: #F7F2E8; }
.footnote-mark, .footnote-mark--dark { color: var(--amber); }

/* HERO 3 képes slideshow (valódi képek) */
.hero__slideshow { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center 35%;
  animation: heroFade 15s infinite;
}
.hero__slide:nth-child(1) { animation-delay: 0s;  background-image: url('../assets/images/hero-main.png'); background-position: center; }
.hero__slide:nth-child(2) { animation-delay: 5s;  background-image: url('../assets/images/hero-2.jpg'); background-position: center 22%; }
.hero__slide:nth-child(3) { animation-delay: 10s; background-image: url('../assets/images/hero-3.jpg'); background-position: center 20%; }
/* Enyhe, lassú „kifelé" zoom — a kép rendesen látszik, nincs erős levágó nagyítás */
@keyframes heroFade {
  0%   { opacity: 0; transform: scale(1.03); }
  6%   { opacity: 1; }
  28%  { opacity: 1; }
  33%  { opacity: 1; transform: scale(1.0); }
  39%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Navbar / mobil menü: krém */
.navbar.is-scrolled { background: rgba(244,238,225,0.86); border-bottom-color: var(--line); }
.mobile-menu { background: rgba(244,238,225,0.98); }

/* Form fókusz piros */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green); box-shadow: 0 0 0 3px rgba(214,42,34,0.16);
}
.field .req { color: var(--green-deep); }
.field-check input { accent-color: var(--green); }
.form__success { background: rgba(214,42,34,0.08); border-color: var(--green); color: var(--green-deep); }

/* Model-note piros szegély */
.model-note { background: rgba(214,42,34,0.06); border-left-color: var(--green); }

/* Accordion + ikon piros */
.term summary::after, .faq-item summary::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D62A22' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.term[open] summary::after, .faq-item[open] summary::after { transform: rotate(180deg); }
::selection { background: var(--green); color: #fff; }

/* Reward kártya: espresso háttér, sárga címke + fehér összeg */
.reward__label { color: var(--amber); }
.reward__terms:hover { color: var(--amber); }

/* Feature-card hover piros */
.feature-card:hover { border-color: var(--green); }

/* =========================================================
   KÁVÉÁLLOMÁS videó-blokk (placeholder, amíg nincs videó)
========================================================= */
.station__video {
  aspect-ratio: 21 / 8; border-radius: var(--radius); margin: 0 0 28px;
  box-shadow: 0 30px 60px -34px rgba(34,28,21,0.45);
  background: linear-gradient(135deg, #2a241c 0%, #1E1A14 100%);
}
.station__video::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23F2B233' stroke-width='1.1'/%3E%3Cpath d='M10 8l6 4-6 4z' fill='%23F2B233'/%3E%3C/svg%3E") center / 58px no-repeat;
}
.station__video::after {
  content: attr(data-label); position: absolute; z-index: 1; bottom: 16px; left: 0; right: 0;
  text-align: center; font-size: 0.74rem; letter-spacing: 0.06em; color: rgba(242,178,51,0.92);
}

/* =========================================================
   GALÉRIA — automatikusan görgő képszalag (valódi képek)
========================================================= */
.gallery__marquee {
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  overflow: hidden; width: 100%;
}
.gallery__track {
  display: flex; gap: 18px; width: max-content;
  animation: galScroll 45s linear infinite;
}
/* A webes galéria folyamatosan gördül — nem áll meg hover-re */
@keyframes galScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.gtile {
  flex-shrink: 0; width: 300px; height: 340px; border-radius: var(--radius);
  background-size: cover; background-position: center; background-color: #ECE4D4;
  box-shadow: 0 18px 40px -24px rgba(34,28,21,0.4);
}

/* Kávéállomás: valódi videó esetén eltűnik a play-placeholder */
.station__video video { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 0; }
.station__video:has(video)::before, .station__video:has(video)::after { display: none; }

/* =========================================================
   V2 — CINEMATIC videó-sáv (megtöri a krémet)
========================================================= */
.cine-band { position: relative; height: 58vh; min-height: 400px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #1E1A14; }
.cine-band__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cine-band__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,26,20,0.48), rgba(30,26,20,0.44)); }
.cine-band__content { position: relative; z-index: 2; text-align: center; }
.cine-band__stat { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.6rem, 4vw, 3rem); color: #F7F2E8; letter-spacing: -0.01em; }

/* =========================================================
   V2 — CTA videó-sáv (a formok előtt)
========================================================= */
.cta-band { position: relative; padding: 92px 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #1E1A14; text-align: center; }
.cta-band__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-band__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,26,20,0.6), rgba(30,26,20,0.78)); }
.cta-band__content { position: relative; z-index: 2; }
.cta-band__content h2 { font-size: clamp(1.6rem, 3.4vw, 2.8rem); color: #F7F2E8; margin-bottom: 28px; line-height: 1.18; }
.cta-band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn--outline-light { border-color: rgba(247,242,232,0.5); color: #F7F2E8; }
.cta-band .btn--outline-light:hover { background: #F7F2E8; color: #1E1A14; }

/* =========================================================
   HÁTTÉRCSÍKOK — sötét, finom vonalháló a krém szekciókon
========================================================= */
.section--dark, .section--light,
.trust, .station, .ideal, .gallery, .audience, .audience--alt, .terms, .faq {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='%23231C15' stroke-opacity='0.07' stroke-width='0.8' fill='none'%3E%3Cpath d='M1040 120 L180 70 M1040 120 L80 360 M1040 120 L360 760 M1040 120 L760 800 M1040 120 L1240 720 M1040 120 L1280 380 M1040 120 L560 -40 M1040 120 L1180 -20'/%3E%3Cpath d='M150 700 L1180 180 M150 700 L1120 760 M150 700 L640 -20 M150 700 L-40 260 M150 700 L900 800'/%3E%3Ccircle cx='1040' cy='120' r='2.5' fill='%23231C15' fill-opacity='0.16' stroke='none'/%3E%3Ccircle cx='150' cy='700' r='2.5' fill='%23231C15' fill-opacity='0.16' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center; background-size: cover; background-repeat: no-repeat;
}

/* =========================================================
   SPLIT-VIDEÓ — álló (9:16) videó a szöveg mellett, teljes egészében
========================================================= */
.split-video {
  aspect-ratio: 9 / 16; max-height: 560px; margin: 0 auto;
  border-radius: var(--radius); overflow: hidden; background: #1E1A14;
  box-shadow: 0 30px 60px -30px rgba(34,28,21,0.42);
}
.split-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.audience__video { aspect-ratio: 3 / 4; margin-top: 30px; max-height: 460px; }

/* Pozicionálás: jobb oldalon álló videó, középre igazítva */
.positioning__grid { align-items: center; }

/* Kávéállomás split: bal szöveg + feature-rács, jobb álló videó */
.station__split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 54px; align-items: center; }
.station__split .station__grid { grid-template-columns: repeat(2, 1fr); }
/* A kávéállomás videójának alsó (közösségimédia-feliratos) sávját levágjuk */
.station__split .split-video { aspect-ratio: 9 / 13.4; }
.station__split .split-video video { object-position: center top; }

/* Ideális helyszín: kisebb kép a szöveg mellett, a kritériumok alatta */
.ideal__head-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; margin-bottom: 56px; }
.ideal__media-side { aspect-ratio: 4 / 3; border-radius: var(--radius); box-shadow: 0 26px 50px -30px rgba(34,28,21,0.4); }

/* Másodlagos piros gomb (sötét sávon): piros körvonal → hover tömör piros */
.btn--ghost-red { background: transparent; border-color: var(--green); color: #fff; }
.btn--ghost-red:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* Kávéállomás feature-kártyák: kisebbek, rendezettebbek a split bal oldalán */
.station__split .station__grid { gap: 14px; }
.station__split .feature-card { padding: 20px 22px; gap: 12px; }
.station__split .feature-card__icon { width: 30px; height: 30px; }
.station__split .feature-card h3 { font-size: 1.02rem; }

/* HERO: egyetlen NAGY állókép, teljes szélességben kitölti a hero-t */
.hero__slide:nth-child(2), .hero__slide:nth-child(3) { display: none; }
.hero__slide:nth-child(1) { opacity: 1; animation: none; background-size: cover; background-position: center; background-repeat: no-repeat; }
@media (max-width: 768px) {
  .hero__slide:nth-child(1) { background-position: center 28%; }
}

@media (max-width: 880px) {
  .station__split, .ideal__head-split { grid-template-columns: 1fr; gap: 34px; }
  .split-video { max-height: 480px; }
}
@media (max-width: 768px) {
  .station__video { aspect-ratio: 16 / 10; }
  .gtile { width: 230px; height: 250px; }
  .station__split .station__grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   KÉZMŰVES MIKRO-INTERAKCIÓK — prémium, finom, nem zsúfoltabb
   Lágy „expo" easing, apró emelkedések, életre kelő ikonok.
========================================================= */
:root { --ease-lux: cubic-bezier(0.16, 1, 0.3, 1); }

/* Kártyák: egységes, lágy emelkedés + árnyék-mélyülés */
.feature-card, .criteria-item, .form-card, .term, .faq-item {
  transition: transform 0.5s var(--ease-lux), box-shadow 0.5s var(--ease-lux),
    border-color 0.4s var(--ease-lux), background-color 0.4s var(--ease-lux);
}
.feature-card:hover, .criteria-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 54px -30px rgba(34,28,21,0.34);
  border-color: rgba(214,42,34,0.32);
}
.term:hover, .faq-item:hover { box-shadow: 0 22px 44px -30px rgba(34,28,21,0.3); }

/* Feature-ikon életre kel hover-kor */
.feature-card__icon { transition: transform 0.5s var(--ease-lux), color 0.4s var(--ease-lux); }
.feature-card:hover .feature-card__icon { transform: scale(1.14) rotate(-4deg); color: var(--green-deep); }
.criteria-item__icon { transition: transform 0.5s var(--ease-lux); }
.criteria-item:hover .criteria-item__icon { transform: scale(1.12) translateY(-1px); }

/* Helyszíntípus-chipek: lift + ikon-szín */
.type-chip { transition: transform 0.45s var(--ease-lux), border-color 0.4s var(--ease-lux), box-shadow 0.45s var(--ease-lux); }
.type-chip:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: 0 16px 28px -20px rgba(34,28,21,0.4); }
.type-chip svg { transition: color 0.4s var(--ease-lux); }
.type-chip:hover svg { color: var(--green-deep); }

/* Gombok: finom lift + színhez illő árnyék */
.btn { transition: background-color 0.4s var(--ease-lux), color 0.4s var(--ease-lux),
  border-color 0.4s var(--ease-lux), transform 0.3s var(--ease-lux), box-shadow 0.4s var(--ease-lux); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(214,42,34,0.5); }
.btn--outline:hover, .navbar__cta:hover { transform: translateY(-2px); }

/* Form mezők: fókuszra apró emelkedés */
.field input, .field select, .field textarea {
  transition: border-color 0.3s var(--ease-lux), box-shadow 0.3s var(--ease-lux), transform 0.3s var(--ease-lux);
}
.field input:focus, .field select:focus, .field textarea:focus { transform: translateY(-1px); }

/* Accordion: a válasz finoman tárul fel */
.term p, .faq-item p { opacity: 0; transform: translateY(-6px); transition: opacity 0.45s var(--ease-lux), transform 0.45s var(--ease-lux); }
.term[open] p, .faq-item[open] p { opacity: 1; transform: none; }

/* Galéria: a görgő szalag fölé húzva a kiemelt csempe emelkedik, a többi finoman halványul */
.gtile { transition: transform 0.55s var(--ease-lux), box-shadow 0.55s var(--ease-lux), filter 0.55s var(--ease-lux); }
/* A gördülő galérián nincs hover-fókusz effekt (folyamatos mozgás) */

/* Média-blokkok: finom hover-emelkedés */
.split-video, .ideal__media-side, .positioning__media {
  transition: transform 0.55s var(--ease-lux), box-shadow 0.55s var(--ease-lux);
}
.split-video:hover, .ideal__media-side:hover { transform: translateY(-5px); box-shadow: 0 38px 66px -32px rgba(34,28,21,0.46); }

/* Ajánlói díj kártya: finom életre kelés */
.reward { transition: transform 0.55s var(--ease-lux), box-shadow 0.55s var(--ease-lux); }
.reward:hover { transform: translateY(-3px); box-shadow: 0 34px 60px -28px rgba(34,28,21,0.5); }

/* Footer linkek: finom jobbra csúszás */
.footer__links a { display: inline-block; transition: color 0.35s var(--ease-lux), transform 0.35s var(--ease-lux); }
.footer__links a:hover { transform: translateX(5px); color: var(--green-soft); }

/* Reveal: lágyabb, prémiumabb belépés */
.reveal { transition: opacity 0.85s var(--ease-lux), transform 0.85s var(--ease-lux); }

/* Mozgáscsökkentés tisztelete */
@media (prefers-reduced-motion: reduce) {
  .feature-card:hover, .criteria-item:hover, .type-chip:hover, .btn--primary:hover,
  .split-video:hover, .ideal__media-side:hover, .reward:hover, .gtile:hover,
  .footer__links a:hover, .field input:focus { transform: none; }
  .term p, .faq-item p { opacity: 1; transform: none; }
}

/* =========================================================
   FOOTER-LOGÓ — az „X" pirosra (brand), minden verzióban
========================================================= */
.footer__logo span { color: var(--green); }

/* =========================================================
   MOBIL OPTIMALIZÁLÁS — KIZÁRÓLAG ≤767px
   (a desktop és tablet megjelenés egyáltalán nem változik)
========================================================= */
@media (max-width: 767px) {
  /* — HERO: a teljes fekvő kép látszik (ember + teljes kávégép), a szöveg ALATTA — */
  .hero { min-height: 0; }
  .hero__media { background: #1E1A14; }
  .hero__slide:nth-child(1) {
    background-size: 100% auto;        /* full-width, teljes kép, nincs nagyítás/levágás */
    background-position: center top;
    background-repeat: no-repeat;
  }
  .hero__overlay { display: none; }     /* a kép tisztán látszik, a szöveg külön sávban */
  .hero__content {
    padding-top: calc(56.25vw + 1.4rem);  /* a 16:9 kép magassága + térköz → szöveg a kép alá */
    padding-bottom: 38px;
  }
  .hero__title, .hero__lead, .hero__subtitle, .hero__body, .hero__note { text-shadow: none; }

  /* — Hero CTA-k: egymás alatt, teljes szélesség, ≥44px magas — */
  .hero__actions { flex-direction: column; gap: 12px; align-items: stretch; }
  .hero__actions .btn { width: 100%; min-height: 48px; }

  /* — Űrlapok: minden mező egy oszlopban — */
  .field-row { grid-template-columns: 1fr; }

  /* — Kávéállomás feature-kártyák: 1 oszlop (a hosszú szavak ne feszítsék szét) — */
  .station__split .station__grid { grid-template-columns: 1fr; }

  /* — Galéria: ujjal húzható (swipe), nincs automatikus görgetés — */
  .gallery__marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask: none; mask: none;
    scroll-snap-type: x proximity;
  }
  .gallery__track { animation: none; }
  .gtile { scroll-snap-align: center; }

  /* — Vízszintes túlcsordulás elleni biztosíték — */
  html, body { overflow-x: hidden; }   /* a gyökérre tett clip a fix navbart/menüt is a képernyő széléhez vágja */
  .cta-band__content h2 { font-size: clamp(1.25rem, 6vw, 1.7rem); }
  .reward__amount strong { font-size: 1.9rem; }
}