/* Layer: page-specific */
/* Scope: kezdő oldal – hero, ígéretsáv, kategóriarács */
/* Used by: prototypes/webshop/kezdolap.html */

/* Generált enteriőrkép: mobilon is teljes értékű, 3:2 képfelület.
   A betöltéskori finom nagyítás REX-tervként marad a kézbesítési jegyzetben. */
.hero-kep {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Bevezető szöveg + kategória-alcímek + GYIK */
.bevezeto { font-size: var(--ust1); max-width: 60ch; }
.kat-alcim { display: block; font-size: var(--ust-1); color: var(--text-muted); margin-block-start: var(--usp2xs); }
.kategoria-kartya { transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.kategoria-kartya:hover { transform: translateY(-3px); }
.kategoria-kartya:hover .kategoria-kep,
.kategoria-kartya:focus-visible .kategoria-kep { border-color: var(--c1); filter: brightness(1.04); }
.kategoria-kartya h3 { position: relative; display: inline-block; }
.kategoria-kartya h3::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: -3px;
  block-size: 3px; inline-size: 100%; background: var(--c3);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kategoria-kartya:hover h3::after { transform: scaleX(1); }
.gyik-reszlet { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--usps); background: var(--surface); }
.gyik-reszlet summary { cursor: pointer; font-weight: 600; }

/* Padlófűtés-gyorsút */
.padlofutes-sav {
  background: var(--surface-2);
  border-inline-start: 4px solid var(--c3-elo);
  border-radius: var(--radius);
  padding: var(--uspm);
}

/* Generált kategóriaképek: egységes képarány, megtartott kártyaméretek */
.kategoria-kep {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 260ms ease, filter 260ms ease;
}

.hero { background: var(--surface); border: 1px solid var(--border); border-block-start: 4px solid var(--c3-elo); border-radius: var(--radius-lg); padding: var(--uspl); }
.hero-cim { font-family: var(--font-cim); font-weight: 300; font-size: var(--ust4); line-height: 1.1; margin: 0; }
.kategoria-kartya { text-align: center; text-decoration: none; color: var(--text); }
.kategoria-kartya h3 { margin-block: var(--uspxs) 0; font-size: var(--ust1); }
.kategoria-kartya:hover { color: var(--c1); }

/* Mozgásérzékenység: nagyobb mozdulatok nélkül */
@media (prefers-reduced-motion: reduce) {
  .kategoria-kartya, .kategoria-kep, .kategoria-kartya h3::after, .termek-kep img { transition: none; }
  .kategoria-kartya:hover, .termek-kep:hover img { transform: none; }
}