/* Akvárium-mustra webes lista — „Galéria” kinézet (STORE_COMMUNITY_PWA_SYSTEM §48.3/A; projektgazdai választás, 2026-10-22).
   Csak a megjelenés változik (szűrő, eszköztár, kártyaadat, lapozás, értékelés közös); a PWA-t nem érinti. Mozgás csak `.amk-mozgas`
   alatt (js/akvariumok-kinezet.js; csökkentett mozgásnál nem kapcsol be). Oldalsó hangsúlycsík nincs (§27). */

/* ---------- Közös bevezető-elemek ---------- */
.amk-hos { position: relative; }
.amk-felcim { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 0 0 14px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: rgba(60, 148, 141, .12); color: var(--aq-accent-sotetebb); font-size: .8125rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.amk-felcim__ikon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--aq-accent-sotet); color: #fff; }
.amk-felcim__ikon .ikon { width: 16px; height: 16px; }
.amk-cim { margin: 0 0 14px; font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4.1rem); line-height: 1.03; letter-spacing: -.04em; text-wrap: balance; }
.amk-kiemel { background: linear-gradient(transparent 60%, rgba(159, 211, 201, .6) 60%, rgba(159, 211, 201, .6) 90%, transparent 90%) no-repeat 0 0 / 100% 100%; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.amk-lead { max-width: 56ch; margin: 0 0 20px; font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem); line-height: 1.6; }
.amk-szam { display: flex; align-items: baseline; gap: 10px; margin: 0 0 24px; }
.amk-szam b { font-size: 2.4rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.amk-szam span { font-weight: 700; opacity: .8; }
.amk-gombok { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.amk-gomb-fo { min-height: 54px; padding: 0 24px; border-radius: 16px; font-size: 1.02rem; }
.amk-gomb-masod { display: inline-flex; align-items: center; gap: 8px; min-height: 54px; padding: 0 20px; border-radius: 16px; font-weight: 800; text-decoration: none; }
.amk-gombok .ikon { width: 1.15em; height: 1.15em; }
.amk-jelveny { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 11px; border-radius: 999px; background: #E0A43A; color: #2B1B05; font-size: .78rem; font-weight: 900; }
.amk-jelveny .ikon { width: 14px; height: 14px; }
.am--a .am-kartya__link { transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.am--a .am-kartya__link:hover { transform: translateY(-6px); box-shadow: 0 24px 44px rgba(13, 26, 23, .18); }
.am--a .am-kartya__kep > img { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.am--a .am-kartya__link:hover .am-kartya__kep > img { transform: scale(1.08); }

/* ---------- A: Galéria — teljes szélességű, sötét, áttűnő diavetítés ---------- */
.amk-hos--a { display: grid; align-items: end; min-height: clamp(520px, 78vh, 760px); margin: 0 calc(-1 * var(--kilogas, 24px)) 26px; overflow: hidden; color: #fff; background: #0B1F23; }
.amk-diak { position: absolute; inset: 0; }
.amk-dia { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 0s linear 1.2s; }
.amk-dia--aktiv { opacity: 1; visibility: visible; transition: opacity 1.2s ease; }
.amk-dia img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.amk-dia__info { position: absolute; right: var(--kilogas, 24px); bottom: 36px; z-index: 3; display: grid; gap: 4px; max-width: 340px; padding: 14px 18px; border-radius: 18px;
  background: rgba(11, 31, 35, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-align: right; justify-items: end; }
.amk-dia__info strong { font-size: 1.1rem; }
.amk-dia__info small { color: rgba(255, 255, 255, .8); font-weight: 600; }
.amk-hos__arnyek { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 31, 35, .92) 0%, rgba(11, 31, 35, .72) 38%, rgba(11, 31, 35, .1) 70%), linear-gradient(0deg, rgba(11, 31, 35, .85), transparent 45%); }
.amk-hos--a .amk-hos__belso { position: relative; z-index: 2; width: min(var(--shell-max, 1400px), calc(100% - 2 * var(--gutter, 24px))); margin: 0 auto; padding: 120px 0 64px; pointer-events: none; }
.amk-hos--a .amk-hos__belso > * { max-width: 640px; pointer-events: auto; }
.amk-hos--a .amk-felcim { background: rgba(255, 255, 255, .12); color: #9FD3C9; }
.amk-hos--a .amk-felcim__ikon { background: #9FD3C9; color: #0F3038; }
.amk-hos--a .amk-cim { color: #fff; }
.amk-hos--a .amk-kiemel { background-image: linear-gradient(transparent 62%, rgba(159, 211, 201, .42) 62%, rgba(159, 211, 201, .42) 92%, transparent 92%); }
.amk-hos--a .amk-lead { color: rgba(255, 255, 255, .86); }
.amk-hos--a .amk-gomb-fo { background: #fff; color: #22605C; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.amk-hos--a .amk-gomb-fo:hover { background: #EAF4F0; color: #22605C; }
.amk-hos--a .amk-gomb-masod { border: 2px solid rgba(255, 255, 255, .6); color: #fff; }
.amk-hos--a .amk-gomb-masod:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.amk-pontok { position: absolute; left: 50%; bottom: 18px; z-index: 3; display: flex; gap: 6px; transform: translateX(-50%); }
.amk-pontok button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; }
.amk-pontok i { position: relative; display: block; width: 24px; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, .35); }
.amk-pontok button[aria-current="true"] i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: amk-pont-toltes 6s linear both; }
.am--a .am-kartya__link { border-radius: 22px; }
.am--a .am-kartya__kep { aspect-ratio: 16 / 11; }

/* ---------- Mozgás ---------- */
.amk-mozgas .amk-kiemel { animation: amk-kiemel 1.2s .45s cubic-bezier(.2, .8, .2, 1) both; }
.amk-mozgas .amk-hos__belso > * { animation: amk-be .7s ease both; }
.amk-mozgas .amk-hos__belso > :nth-child(2) { animation-delay: .06s; }
.amk-mozgas .amk-hos__belso > :nth-child(3) { animation-delay: .12s; }
.amk-mozgas .amk-hos__belso > :nth-child(n+4) { animation-delay: .18s; }
.amk-mozgas .amk-dia--aktiv img { animation: amk-kenburns 7s ease-out both; }
.amk-mozgas .amk-dia--aktiv .amk-dia__info { animation: amk-be .8s .3s ease both; }
.amk-mozgas .amk-gomb-fo { animation: amk-pulzus 2.8s ease-in-out infinite; }
@keyframes amk-be { from { opacity: 0; transform: translateY(16px); } }
@keyframes amk-kiemel { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes amk-kenburns { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
@keyframes amk-pont-toltes { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes amk-pulzus { 0%, 100% { box-shadow: 0 12px 30px rgba(6, 20, 18, .25), 0 0 0 0 rgba(159, 211, 201, .55); } 50% { box-shadow: 0 12px 30px rgba(6, 20, 18, .25), 0 0 0 12px rgba(159, 211, 201, 0); } }

@media (max-width: 600px) {
  .amk-hos--a { min-height: 600px; }
  .amk-hos--a .amk-hos__belso { padding: 90px 0 120px; }
  .amk-hos__arnyek { background: linear-gradient(0deg, rgba(11, 31, 35, .95) 10%, rgba(11, 31, 35, .55) 60%, rgba(11, 31, 35, .3)); }
  .amk-dia__info { display: none; }
}