/* =========================================================
   Kategóriaoldal (/elmenyek/{kategória}) – modul: category
   Két fajtája van: nyitóoldal (.cat-landing – főkategória alkategóriákkal) és listaoldal (.cat-list – alkategória).
   A közös szakaszok (szakaszfej, hero morzsamenüvel, ajánlatkártyák, ajándékválasztó, szerkesztői blokkok, GYIK)
   a _global/css/styles.css 11. szakaszában, az ajánlatlista a modules/offers/css/styles.css-ben van; itt csak az oldal saját elemei:
   1. Nyitóoldal: hero-cím, alkategóriák (Figma: … alkategóriák / B variáció), szerkesztői blokkok háttere
   2. Listaoldal: fejléc (morzsamenü, cím, darabszám, bevezető)
   3. Listaoldal: kapcsolódó kategóriák
   4. Nem található
   5. Reszponzív (1023 / 767 px)
   6. Sötét mód, kevesebb mozgás
   Forrás: Figma – „Kategória - Ajánlatlista - élmények / gasztronómia” (+ Mobil) és
   „Alkategória - Ajánlatlista - élmények / gasztronómia / borkóstolók - A variáció” (+ mobil)
   ========================================================= */

/* ===== 1. Nyitóoldal ===== */
/* Hero: a kategóriaoldalon kisebb cím (Figma: Typography/Display/Medium), csak asztalon – tableten és mobilon a közös méret */
@media (min-width: 1024px) {
.exp-hero-title { font: var(--type-display-m); letter-spacing: var(--ls-display-m); }
}

/* Alkategóriák */
.exp-subcategories { padding: 6rem 0; }
.exp-subcategories .exp-section-head { margin-bottom: 2.5rem; }
.exp-subcategory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.exp-subcategory { position: relative; z-index: 0; display: flex; align-items: flex-end; aspect-ratio: 286 / 154; padding: 0 0.9375rem 0.8125rem; overflow: hidden; color: #FFFFFF; background: var(--bg-section); border: 1px solid var(--border-subtle); border-radius: 0.75rem; }
.exp-subcategory-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.exp-subcategory::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 4.8125rem; background: linear-gradient(195deg, rgba(0, 0, 0, 0) 25%, rgba(26, 26, 26, 0.8) 75%); } /* olvashatóság a felirat alatt */
.exp-subcategory.no-image { background: linear-gradient(160deg, var(--navy-300) 0%, var(--navy-500) 45%, var(--navy-800) 100%); } /* kép nélküli helykitöltő */
.exp-subcategory-name { min-width: 0; font: 500 1.25rem/1.75rem var(--font-heading); color: #FFFFFF; overflow-wrap: break-word; }
.exp-subcategory:hover { text-decoration: none; color: #FFFFFF; }
.exp-subcategory:hover .exp-subcategory-img { transform: scale(1.04); }

/* A szerkesztői blokkok háttere a nyitóoldalon halványszürke (Figma: neutral/50): a népszerű ajánlatok és a GYIK között váltakozik */
.cat-landing .exp-editorial { background: var(--bg-section); }

/* ===== 2. Listaoldal: fejléc ===== */
.cat-list-main { padding: 2rem 0 4.5rem; background: var(--bg-default); }
.exp-breadcrumb.light ol { font: 400 0.875rem/1.125rem var(--font-heading); color: var(--text-tertiary); }
.exp-breadcrumb.light a:hover { color: var(--text-primary); }
.cat-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; margin-top: 1.25rem; }
.cat-list-title { min-width: 0; font: var(--type-headline-l); letter-spacing: var(--ls-headline-l); color: var(--text-primary); overflow-wrap: break-word; }
.cat-list-count { flex-shrink: 0; margin: 0; font: 400 1rem/1.25rem var(--font-heading); color: var(--text-tertiary); white-space: nowrap; }
.cat-list-lead { max-width: 62.5rem; margin: 0.75rem 0 0; font: 400 1rem/1.625rem var(--font-body); color: var(--text-secondary); }
.cat-list-main .ol { margin-top: 1.25rem; }

/* ===== 3. Listaoldal: kapcsolódó kategóriák ===== */
.exp-related { padding: 6rem 0 5rem; background: var(--bg-section); }
.exp-related .exp-section-head { margin-bottom: 1.5rem; }
.exp-related-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.exp-related-row > li { display: flex; min-width: 0; }
.exp-related-card { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: var(--text-primary); background: var(--surface-default); border: 1px solid var(--border-subtle); border-radius: 0.75rem; transition: box-shadow .2s ease; }
.exp-related-card:hover { text-decoration: none; color: var(--text-primary); box-shadow: 0 1rem 2rem -1.25rem rgba(2, 33, 81, 0.4); }
.exp-related-img { display: block; flex-shrink: 0; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.exp-related-img.no-image { background: linear-gradient(160deg, var(--navy-300) 0%, var(--navy-500) 45%, var(--navy-800) 100%); } /* kép nélküli helykitöltő */
.exp-related-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1rem 0.75rem; }
.exp-related-copy { display: flex; flex-direction: column; }
.exp-related-name { font: 600 1.25rem/1.75rem var(--font-heading); color: var(--text-primary); overflow-wrap: break-word; }
.exp-related-text { font: 400 0.875rem/1.375rem var(--font-body); color: var(--text-tertiary); }
.exp-related-arrow { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; align-self: flex-end; width: 1.75rem; height: 1.75rem; margin-top: auto; color: #FFFFFF; background: var(--action-primary); border: 1px solid #FFFFFF; border-radius: 50%; transition: background-color .15s ease, transform .2s ease; }
.exp-related-card:hover .exp-related-arrow { background: var(--action-primary-hover); transform: translateX(0.125rem); }
.exp-related-card:focus-visible { outline: 0.125rem solid var(--border-focus); outline-offset: 0.125rem; }

/* ===== 4. Nem található ===== */
.exp-not-found { padding: 6rem 0 7.5rem; }
.exp-not-found-btn { margin-top: 2rem; }

/* ===== 5. Reszponzív ===== */
/* Tablet: két oszlop */
@media (max-width: 1023px) {
.exp-subcategories { padding: 4rem 0; }
.exp-subcategory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cat-list-main { padding-bottom: 4rem; }
.exp-related { padding: 4rem 0; }
.exp-related-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobil (Figma: … - Mobil, 390 px): egy oszlop, széles kártyák */
@media (max-width: 767px) {
.exp-subcategories { padding: 2.5rem 0; }
.exp-subcategory-grid { grid-template-columns: 1fr; }
.exp-subcategory { padding: 0 1rem 0.875rem; }
.exp-not-found { padding: 3.5rem 0 4.5rem; }
.cat-list-main { padding-bottom: 2.5rem; }
.cat-list-title { font: 600 2rem/2.5rem var(--font-heading); letter-spacing: -0.01875rem; }
.cat-list-count { display: none; } /* mobilon a darabszám a rendezés mellett van (az ajánlatlista eszköztárában) */
.exp-related { padding: 2.5rem 0; }
.exp-related .exp-section-head { margin-bottom: 1.5rem; }
/* a kapcsolódó kategóriák vízszintesen görgethető sorban */
.exp-related-row { display: flex; gap: 1rem; margin: 0 calc(-1 * var(--container-margin)); padding: 0 var(--container-margin) 0.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--container-margin); scrollbar-width: none; }
.exp-related-row::-webkit-scrollbar { display: none; }
.exp-related-row > li { flex: 0 0 17.625rem; min-width: 0; scroll-snap-align: start; }
}

/* ===== 6. Sötét mód, kevesebb mozgás ===== */
@media (prefers-color-scheme: dark) { .exp-related-card:hover { box-shadow: 0 1rem 2rem -1.25rem rgba(0, 0, 0, 0.8); } }
@media (prefers-reduced-motion: reduce) {
.exp-subcategory-img, .exp-related-card, .exp-related-arrow { transition-duration: .01ms !important; }
}