/* =============================================
   INDEX.CSS — Csak a főoldalhoz
   - Hero slider (felirat és mozgatás)
   - Főoldali filter (chips) + projektkártyák
   - Főoldali wrap-szélesség override (1080px)
============================================= */

/* ========== HERO SLIDER Caption – elhelyezés & tipográfia ========== */
.hero-caption{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  opacity: 0;                 /* alapból rejtve, csak az aktív slide-on jelenik meg */
}
.hero-caption h2{
  font-size: clamp(15px, 8vw, 60px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: .02em;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.hero-caption p{
  font-size: clamp(12px, 6vw, 40px);
  margin: 0;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

/* --- HERO caption: finoman, késleltetve érkezik --- */
.hero-caption{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-46%);
  opacity:0;
  will-change:transform,opacity;
  transition:
    opacity .35s ease .2s,
    transform .65s cubic-bezier(.2,.7,.2,1) .2s;
}
/* CSAK akkor induljon a caption, ha a JS-jelet megkapta */
.hero-slide.cap-in .hero-caption{
  opacity:1;
  transform:translate(-50%,-50%);
}
/* klónok ne animáljanak */
.hero-slide[data-clone] .hero-caption{
  transition:none !important;
  opacity:0 !important;
  transform:translate(-50%,-50%) !important;
}
@media (prefers-reduced-motion: reduce){
  .hero-caption{ transition:none !important; opacity:1; transform:translate(-50%,-50%); }
}

/* ========== Akadálymentesség / mozgás csökkentése ========== */
@media (prefers-reduced-motion: reduce){
  .hero-slide{ transition: none !important; }
  .hero-slide.is-active .hero-caption{ animation: none !important; opacity: 1; }
  .hero-caption{ transition:none !important; opacity:1; transform:translate(-50%,-50%); }
}

/* ========== FŐOLDALI TARTALOM ========== */

/* ---------- Filterek ---------- */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:var(--space);
  margin-top:var(--space);
  justify-content:flex-start;
}
.chip{
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border-radius: 999px;
  padding:.45rem .55rem;
  font-size:.8rem;
  line-height:1.3;
  color:var(--fg);
  cursor:pointer;
  user-select:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  transition: background-color .2s ease, color .2s ease;
}
.chip:hover { background: color-mix(in oklab, var(--fg) 15%, transparent); }
.chip[aria-pressed="true"]{ background:var(--fg); color:var(--bg); }
.chip i, .chip svg { width:18px; height:18px; display:block; pointer-events:none; }

@media (max-width: 512px){ .chip .label{ display:none; } .chip{ padding:.45rem .55rem; } }
/* Billentyűzettel navigálva (accessibility) */
.chip:focus-visible { outline: 2px solid var(--accent, #1a74e5); outline-offset: 2px; }

/* ---------- Kártyarács ---------- */
.cards-grid {
  display: grid;
  /* kártyák: min 230px szélesek, fölötte rugalmasak */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  /* gap arányosan, de ésszerű határok közt */
  gap: clamp(2rem, 3.5vw, 4rem);
}

/* ---------- Kártyák ---------- */
.tile-block{ display:flex; flex-direction:column; gap:.5rem; width:100%; }
.tile{
  display:block; background:transparent; border-radius:var(--radius); overflow:hidden;
  text-decoration:none; color:inherit;
  border:0px solid color-mix(in oklab, var(--fg) 12%, transparent);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
  transform-origin:center center; will-change: transform;
}
.tile:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.thumb{
  aspect-ratio:3/2;
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  background:transparent;
  filter:grayscale(100%) brightness(1) contrast(1) saturate(1);
  transition:filter .45s ease;
  }
  
/* Kártyaképek árnyéka */
.tile-block:hover .tile { transform:translateY(-3px); box-shadow:0 12px 30px color-mix(in oklab, black 80%, transparent); }
.tile-block:hover .thumb, .tile:focus-visible .thumb{ filter:none; }

/* Érintőképernyő esetén nincs grayscale */
@media (pointer:coarse){ .thumb{ filter:none; } }

/* Kártyaképek felirata */
.meta-below{ text-align:left; color:var(--fg); }
.meta-below .kicker{ font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; opacity:.95; }
.meta-below .title{ font-weight:600; font-size:1.2rem; line-height:1.2; margin-top:.3rem; }

@keyframes tileFade{ to{ opacity:1; transform:none; } }

/* ---------- Főoldal-specifikus wrap override ---------- */
body.page-home { --wrap: 1080px; }
body.page-home .wrap { max-width: var(--wrap); }
body.page-home .chip .label{ display:inline; }  /* biztos ami biztos */

.is-hidden { display:none; }

/* --- HERO caption: valódi "utánfutás" a képekhez --- */

/* Kiinduló: minden nem aktív dián rejtve, kissé jobbra tolva (ha balról jön be a kép) */
.hero-slider .hero-slide:not(.is-active) .hero-caption{
  --cap-shiftX: 50%;   /* mennyit maradjon le vízszintesen */
  opacity: 0;
  transform: translate(calc(-50% + var(--cap-shiftX)), -50%);
}

/* Alap caption-viselkedés: a transform animálható, delay-jel */
.hero-slider .hero-caption{
  position: absolute; top: 50%; left: 50%;
  will-change: transform, opacity;

  /* kezdő állapot ugyanaz, mint a not(.is-active)-nál, ha váltáskor még nem aktív */
  opacity: 0;
  transform: translate(calc(-50% + var(--cap-shiftX, 50%)), -50%);

  /* először várunk egy kicsit, aztán csússzon be középbe */
  transition-property: transform, opacity;
  transition-duration: .70s, .35s;
  transition-timing-function: cubic-bezier(.2,.7,.2,1), ease;
  transition-delay: var(--cap-delay, .5s), var(--cap-delay, .5s);
}

/* Amikor a dia aktív lesz: opacity 1 és a vízszintes lemaradás NULLÁRA csökken */
.hero-slider .hero-slide.is-active .hero-caption{
  --cap-shiftX: 0%;
  opacity: 1;
  transform: translate(calc(-50% + var(--cap-shiftX)), -50%);
}

/* Klónokon ne animáljon (végtelenítés) */
.hero-slider .hero-slide[data-clone] .hero-caption{
  transition: none !important;
  opacity: 0 !important;
  transform: translate(-50%, -50%) !important;
}

/* Akik kérik a kevesebb mozgást */
@media (prefers-reduced-motion: reduce){
  .hero-slider .hero-caption{
    transition: none !important;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}