/* =========================================================
   Élmények oldal (/elmenyek): a főkategóriák listája – modul: categories
   A közös szakaszok (szakaszfej, hero, ajánlatkártyák, ajándékválasztó, szerkesztői blokkok, GYIK)
   a _global/css/styles.css 11. szakaszában vannak; itt csak az oldal saját elemei:
   1. Fedezd fel az élményeket (főkategóriák)
   2. Inspirálódj (válogatások)
   3. Reszponzív (1263 / 1023 / 767 px)
   4. Sötét mód, kevesebb mozgás
   Forrás: Figma – 20261109 Ajánlatlista - Kategória választó - élmények oldal (asztali) és … - Mobil
   ========================================================= */

/* ===== 1. Fedezd fel az élményeket ===== */
.exp-categories .exp-section-head { margin-bottom: 2.5rem; }
.exp-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.exp-category-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; color: var(--text-primary); background: var(--surface-default); border: 1px solid var(--border-subtle); border-radius: 1rem; transition: box-shadow .2s ease, transform .2s ease; }
.exp-category-card:hover { text-decoration: none; color: var(--text-primary); box-shadow: 0 1rem 2rem -1.25rem rgba(2, 33, 81, 0.4); transform: translateY(-0.1875rem); }
.exp-category-img { display: block; flex-shrink: 0; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.exp-category-body { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 4.5rem; margin-top: 1rem; padding: 0 1.4375rem; } /* a kártya 1440-en 300px magas: kép 4:3, felirat sáv 72px (+16px térköz) */
.exp-category-name { min-width: 0; font: 600 1.25rem/1.75rem var(--font-heading); color: var(--text-primary); overflow-wrap: break-word; hyphens: auto; }
.exp-arrow-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; color: #FFFFFF; background: var(--action-primary); border: 1px solid #FFFFFF; border-radius: 50%; transition: background-color .15s ease, transform .2s ease; }
.exp-category-card:hover .exp-arrow-btn { background: var(--action-primary-hover); transform: translateX(0.125rem); }
.exp-category-img.no-image, .exp-collection.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ő */

/* ===== 2. Inspirálódj ===== */
.exp-collections { padding: 6rem 0; }
.exp-collections .exp-section-head { margin-bottom: 2.5rem; }
.exp-collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.exp-collection { position: relative; z-index: 0; display: flex; align-items: flex-end; height: 100%; aspect-ratio: 384 / 350; padding: 1.75rem; overflow: hidden; color: #FFFFFF; border: 1px solid var(--border-subtle); border-radius: 1rem; }
.exp-collection-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.exp-collection::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0.5) 83%); } /* olvashatóság a felirat alatt */
.exp-collection-title { font: 600 1.5rem/2rem var(--font-heading); color: #FFFFFF; }
a.exp-collection:hover { text-decoration: none; color: #FFFFFF; }
a.exp-collection:hover .exp-collection-img { transform: scale(1.04); }

/* ===== 3. Reszponzív ===== */
/* 768–1263 px: keskenyebb kártyák – a hosszú kategórianevek (pl. „Szabadulószobák”) így is kiférnek */
@media (min-width: 768px) and (max-width: 1263px) {
.exp-category-body { padding: 0 0.9375rem; }
.exp-category-name { font-size: 1.125rem; line-height: 1.5rem; }
}

/* Tablet: 3 oszlopos kategóriarács */
@media (max-width: 1023px) {
.exp-collections { padding: 4rem 0; }
.exp-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mobil (Figma: … - Mobil, 390 px) */
@media (max-width: 767px) {
.exp-collections { padding: 2.5rem 0; }
.exp-categories .exp-section-head { margin-bottom: 1.5rem; }
.exp-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.375rem; }
.exp-category-body { min-height: 0; margin: 0; padding: 0.75rem; }
.exp-category-name { min-height: 2.5rem; font: 400 1rem/1.25rem var(--font-heading); }
.exp-arrow-btn { display: none; }
.exp-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.exp-collection { aspect-ratio: 167 / 129; padding: 1rem; }
.exp-collection-title { font: 600 1rem/1.25rem var(--font-heading); }
}

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