/* Grillandia főoldali hero slider (GSAP 3) – 2026-09-25
   A régi Owl banner-carousel helyett. JS: assets/js/hero-slider.js */
.gs { --gs-accent: #B87333; --gs-ink: #1c1c1c; }
.gs { position: relative; height: clamp(520px, calc(100svh - var(--gs-top, 176px)), 860px);   /* a fejléc alatt pont kitölti a képernyőt (--gs-top: a JS méri) */
  min-height: 520px; overflow: hidden; background: #0d0d0d; touch-action: pan-y; user-select: none; }
.gs-slide { position: absolute; inset: 0; visibility: hidden; }
.gs-slide.is-active { visibility: visible; }
.gs-media { position: absolute; inset: 0; overflow: hidden; }
.gs-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* álló képernyőn a kép nem zsugorodik: teljes magasságban, lassan végigúszik vízszintesen, így az egész konyha látszik */
.gs.is-pan .gs-media img { right: auto; width: auto; max-width: none; min-width: 100%; }
.gs-slide::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,0) 75%), linear-gradient(0deg, rgba(0,0,0,.2), rgba(0,0,0,0) 25%);   /* halványabb sötétítés */ }
.gs-content { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 clamp(20px, 5.5vw, 88px); }
.gs-eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 400 13px/1 "Fira Sans", sans-serif; letter-spacing: 3px; text-transform: uppercase; color: #fff; margin-bottom: 22px; }
.gs-eyebrow::before { content: ""; width: 42px; height: 2px; background: var(--gs-accent); }
.gs-title { font: 600 clamp(30px, 3.6vw, 54px)/1.1 "Fira Sans", sans-serif; letter-spacing: -.3px; margin: 0 0 30px; text-transform: uppercase; max-width: 16em; }
.gs-title .ln { display: block; overflow: hidden; padding: .22em 0 .08em; margin: -.22em 0 -.08em; }   /* hely az ékezeteknek (Ő, Ű, É) */
.gs-title .ln > span { display: inline-block; }
.gs-btn { display: inline-flex; align-items: center; gap: clamp(8px, .8vw, 12px); padding: clamp(11px, 1.15vw, 17px) clamp(18px, 2.1vw, 30px);   /* a felbontással együtt kisebb */ background: #fff; color: var(--gs-ink); text-decoration: none;
  font: 600 clamp(14px, 1.1vw, 16px)/1.2 "Fira Sans", sans-serif; border-radius: 4px; transition: background .25s, color .25s; }
.gs-btn:hover { background: var(--gs-accent); color: #fff; }
.gs-btn i { font-style: normal; transition: transform .25s; }
.gs-btn:hover i { transform: translateX(4px); }


/* idősávok: középre igazított, nagyon halvány vonalak (kattinthatók) */
.gs-ui { position: absolute; z-index: 5; left: 50%; bottom: 30px; transform: translateX(-50%); }
.gs-tabs { display: flex; gap: 10px; }
.gs-tab { all: unset; cursor: pointer; display: block; width: 56px; height: 24px; position: relative; }
.gs-tab::before, .gs-tab .bar { content: ""; position: absolute; top: 11px; left: 0; right: 0; height: 2px; border-radius: 2px; background: rgba(255,255,255,.14); }
.gs-tab .bar { background: rgba(255,255,255,.5); transform-origin: 0 50%; transform: scaleX(0); }
.gs-tab:hover::before { background: rgba(255,255,255,.26); }
.gs-tab:focus-visible { outline: 2px solid rgba(255,255,255,.5); outline-offset: 2px; border-radius: 2px; }

/* tablet */
@media (max-width: 1023px) {
  .gs { height: clamp(460px, calc(100svh - var(--gs-top, 78px)), 720px); min-height: 460px; }
}
/* mobil (álló) */
@media (max-width: 767px) {
  .gs { height: min(70svh, 600px); min-height: 420px; }
  .gs-content { padding: 0 20px; }
  .gs-slide::after { background: linear-gradient(90deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.2) 65%, rgba(0,0,0,.05) 100%); }
  .gs-eyebrow { font-size: 11px; letter-spacing: 2px; gap: 10px; margin-bottom: 12px; }
  .gs-eyebrow::before { width: 26px; }
  .gs-title { font-size: clamp(22px, 6.6vw, 32px); margin-bottom: 20px; }
  .gs-btn { padding: 11px 18px; font-size: 14px; }
  .gs-ui { bottom: 16px; }
  .gs-tab { width: 40px; }
}
/* kis magasságú képernyő (fekvő telefon) */
@media (max-height: 520px) and (orientation: landscape) {
  .gs { height: 100svh; min-height: 300px; }
  .gs-eyebrow { margin-bottom: 10px; }
  .gs-title { font-size: clamp(20px, 3.4vw, 30px); margin-bottom: 14px; }
  .gs-btn { padding: 9px 16px; font-size: 13px; }
  .gs-ui { bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .gs-media img { will-change: auto; } }
.gs .sr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gs-title { color: #fff; }
.gs-content { color: #fff; }
.gs-btn:hover, .gs-btn:focus { text-decoration: none; }
/* kevesebb sötétítés mellett is olvasható maradjon a szöveg */
.gs-title, .gs-eyebrow { text-shadow: 0 1px 4px rgba(0,0,0,.35); }   /* kis elmosás: nem hagy nyomot animáció közben */
/* betöltéskor ne villanjon fel a szöveg, mielőtt az animáció elindul; ha a JS nem futna, 2,5 mp múlva magától megjelenik */
.gs:not(.is-ready) .gs-content { opacity: 0; animation: gsShow .4s 2.5s forwards; }
@keyframes gsShow { to { opacity: 1; } }
.gs { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.gs:focus { outline: none; }
.gs:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: -4px; }
.gs-media img { -webkit-user-drag: none; pointer-events: none; }
/* 2026-09-25: a gomb kicsit átlátszó (finom üveghatás); egér fölötte teli réz */
.gs-btn { background: rgba(255,255,255,.78); }   /* elmosás (backdrop-filter) nélkül: Safariban nyomot hagyott animáláskor */
.gs-btn:hover, .gs-btn:focus-visible { background: var(--gs-accent); color: #fff; }