/* ------------------------------------------ vejár vernostných kariet -- */
/* templates/landing/_passes.html, hneď pod hero na krémovom pozadí (aj so
   zrnom berie z body). Bez JS (a pri obmedzenom pohybe) je to vodorovný
   pás kariet na posúvanie. S JS (.fan-on, modul v js/site/scroll.js) je
   sekcia vysoká 300 % okna, pódium sa prilepí a karty idú po oblúku
   sprava doľava — polohu píše JS do transform .fan-card. */

/* padding: 0 — globálne section má 92 px hore aj dole; tu by posunul
   prilepené pódium a rozhodil výpočet p v JS (výška sekcie − pódium). */
.fan {
    position: relative;
    padding: 0;
    color: hsl(var(--ink));
    /* Šírka karty: na nízkom okne podľa výšky, inak by spodok vejára
       zmizol pod okrajom. Pri plnej šírke 260 × 375 (.fan-card). */
    --fan-w: clamp(150px, min(22vw, 30svh), 260px);
}

.fan-head {
    padding-top: 40px;
    text-align: center;
}

.fan-head h2 {
    font-family: var(--font-display);
    font-size: clamp(32px, 4.6vw, 60px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.fan-sub {
    max-width: 520px;
    margin: 16px auto 0;
    font-size: 17px;
    line-height: 1.55;
    color: hsl(var(--ink-soft));
    text-wrap: pretty;
}

.fan-cta { margin-top: 26px; }

/* Vynorenie hlavičky (nadpis po slovách, potom text a tlačidlo) je
   spoločné pre všetky nadpisy webu — „nadpisy po slovách“ v
   08-animations-pricing-page.css a js/site/scroll.js. Rozplynutie na
   konci skrolovania píše JS vejára priamo do štýlu .fan-head. */

/* Bez JS: pás na posúvanie prstom / kolieskom. */
.fan-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 40px 24px 72px;
    scrollbar-width: none;
}

.fan-track::-webkit-scrollbar { display: none; }

.fan-card { flex: none; scroll-snap-align: center; }

/* S JS: pódium prilepené na celú výšku okna (zoom html ho násobí,
   preto delenie --page-zoom ako pri .scrolly). */
.fan-on { height: calc(300svh / var(--page-zoom, 1)); }

.fan-on .fan-stage {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: calc(100svh / var(--page-zoom, 1));
    overflow: hidden;
}

/* Pod plávajúcou navigáciou (4rem + horný odstup). */
.fan-on .fan-head { padding-top: calc(4rem + 18px); }

/* Spodky kariet sa strácajú do pozadia — pri odchode zo sekcie by inak
   nad vlnou ostala ostrá vodorovná hrana orezu. */
.fan-on .fan-track {
    position: relative;
    flex: 1;
    display: block;
    overflow: visible;
    padding: 0;
    /* 104 px dlhý prechod, o 10 px pod spodkom pódia — na okraji ostane
       z karty ~10 %. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 94px), transparent calc(100% + 10px));
    mask-image: linear-gradient(to bottom, #000 calc(100% - 94px), transparent calc(100% + 10px));
}

/* Stredná karta zvislo v strede voľného miesta, o kúsok vyššie — pod
   ňou musí ostať miesto, kam karty po oblúku klesajú. 18/26 = polovica
   výšky karty bez spodných 15 px — o tie je karta dlhšia len smerom dole. */
.fan-on .fan-card {
    position: absolute;
    left: 50%;
    top: max(16px, calc(44% - var(--fan-w) * 18 / 26));
    transform: translate3d(-50%, 0, 0);
    will-change: transform;
}

/* ------------------------------------------------------------ karta -- */
/* Karta = obrazovka stáleho hosťa ako v Anatómii karty (.anat-screen,
   .anat-pass, .anat-rate v 05-loyalty-features.css): pozdrav, Wallet karta
   podľa šablóny appky (looks.CARD_LOOKS) a hodnotenie. Rozmery sú
   prepočítané z px Anatómie (obrazovka 352 px) na em: v px = v / 17.6 em,
   font-size karty je 13 px pri šírke 260 px — menšia karta je len
   zmenšená, nič sa nezalomí inak. .fan-card je obal, ktorému JS píše
   polohu na oblúku. Bez hover efektu. */
/* 260 × 375 pri plnej šírke: o 15 px dlhšia než 13 : 18 — navyše je len
   priestor pod hodnotením (padding-bottom .fan-screen), vrch ostáva. */
.fan-card {
    width: var(--fan-w);
    aspect-ratio: 260 / 375;
    font-size: calc(var(--fan-w) * .05);
}

/* Tlmený text, čiary a podklad smajlíkov sa dopočítajú z textu
   a pozadia (ako vlastné dizajny v Anatómii). */
.fan-screen {
    --muted: color-mix(in srgb, var(--ink) 62%, var(--bg));
    --line: color-mix(in srgb, var(--ink) 18%, var(--bg));
    --face: color-mix(in srgb, var(--ink) 8%, var(--bg));
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: .9em .8em 1.95em;   /* .8em + 15 px (pri 13 px písme) */
    overflow: hidden;
    border-radius: 1.6em;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Manrope', var(--font-body);
    line-height: 1.2;
    text-align: center;
    box-shadow:
        0 0 0 1px hsl(var(--ink) / .07),
        0 1.8em 3.4em -1.6em hsl(var(--ink) / .4);
}

.fan-screen.is-dark {
    box-shadow:
        0 0 0 1px rgb(255 255 255 / .06),
        0 1.8em 3.4em -1.6em hsl(var(--ink) / .5);
}

.fan-hello { font-size: 1.14em; font-weight: 800; letter-spacing: -.01em; }
.fan-hello-sub { margin-top: .3em; font-size: .7em; font-weight: 600; color: var(--muted); }

/* Klasická kartička (layout classic, ako .anat-hero + .anat-box v Anatómii):
   banner cez celú šírku obrazovky s logom vľavo dole, pod pozdravom okno
   s guličkami, počtom a stavom. Logo stojí na fotke bez prechodu — banner
   má byť svetlý pri tmavom logu (alebo naopak). */
.fan-hero {
    position: relative;
    height: 6.6em;
    margin: -.9em -.8em .8em;   /* = padding .fan-screen, banner až po okraje */
    background: var(--hero-img) center / cover no-repeat, var(--box);
}
.fan-hero-logo {
    position: absolute;
    left: .8em;
    bottom: .6em;
    display: block;
    max-width: 70%;
    max-height: 2.4em;
    object-fit: contain;
    object-position: left bottom;
}
.fan-box {
    --text-muted: color-mix(in srgb, var(--text) 62%, var(--box));
    margin-top: .8em;
    padding: .95em .7em .85em;
    border-radius: 1.05em;
    background: var(--box);
    color: var(--text);
    box-shadow: 0 .11em .34em rgb(0 0 0 / .08), 0 .9em 1.9em -.8em rgb(0 0 0 / .35);
}
.fan-box .fan-dots { justify-content: center; }
.fan-count { margin-top: .75em; font-size: .7em; font-weight: 600; line-height: 1.35; color: var(--text-muted); }
.fan-count b { font-size: 1.2em; font-weight: 800; color: var(--text); }
.fan-status { margin-top: .4em; font-size: .66em; font-weight: 700; line-height: 1.35; }

/* ------------------------------------------------- Wallet karta -- */
.fan-pass {
    --text-muted: color-mix(in srgb, var(--text) 62%, var(--box));
    margin-top: .8em;
    padding: .68em .68em .8em;
    overflow: hidden;
    border-radius: .91em;
    background: var(--box);
    color: var(--text);
    text-align: left;
    box-shadow: 0 .11em .34em rgb(0 0 0 / .08), 0 .9em 1.9em -.8em rgb(0 0 0 / .4);
}

/* w_fotka: fotka na celej karte, stmavená kvôli bielemu textu. */
.fan-pass.bg-photo {
    background:
        linear-gradient(rgb(0 0 0 / .28), rgb(0 0 0 / .62)),
        var(--card-img) center / cover no-repeat,
        var(--box);
}

/* w_galeria: fotka hore plynulo prejde do farby karty. */
.fan-pass.bg-fade {
    background:
        linear-gradient(to bottom, color-mix(in srgb, var(--box) 55%, transparent),
                        transparent 28%, transparent 38%, var(--box) 72%),
        var(--card-img) center top / 100% auto no-repeat,
        var(--box);
}

.fan-pass-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5em;
    min-height: 2.1em;
}

.fan-logo {
    display: flex;
    align-items: center;
    gap: .4em;
    min-width: 0;
}

.fan-logo b {
    overflow: hidden;
    font-size: .86em;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fan-mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.75em;
    height: 1.75em;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on);
}

.fan-mark svg { width: 62%; height: 62%; }

/* Ukážkové logo podniku (static/img/loga/) — len logo bez názvu, v pomere
   ako .pass-logo-img v appke (44 × 138 px). */
.fan-logo-img {
    display: block;
    max-width: 6.2em;
    max-height: 1.9em;
    object-fit: contain;
}

/* Pole Wallet karty: popis verzálkami vo farbe šablóny, hodnota pod ním. */
.fan-field { display: flex; flex-direction: column; gap: .06em; min-width: 0; }
.fan-field.r { flex: none; align-items: flex-end; text-align: right; }

.fan-field i {
    font-size: .51em;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--label);
}

.fan-field b {
    overflow: hidden;
    font-size: .8em;
    font-weight: 500;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fan-pass-head .fan-field b { font-size: .9em; font-weight: 600; }

.fan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5em .55em;
}

.fan-grid .fan-field b { font-size: .74em; }
/* Štvrté pole (odmena) cez dva stĺpce — dlhší text sa zmestí. */
.fan-grid .fan-field:nth-child(4) { grid-column: span 2; }

/* Pás: guličky alebo veľká hodnota (.anat-pass-strip). Bez fotky
   farba šablóny, inak jemný odtieň farby podniku. */
.fan-strip {
    display: grid;
    place-items: center;
    align-content: center;
    gap: .45em;
    min-height: 5.2em;
    margin: .57em -.68em;
    padding: .57em .68em;
    background: var(--strip-bg, color-mix(in srgb, var(--accent) 14%, var(--box)));
}

/* Apple rozloženie má pás vyšší (ako na karte v Anatómii) — vyplní kartu
   až po hodnotenie. Google má pás dole a nad ním logo, tam ostáva nižší. */
.fan-pass:not(.is-google) .fan-strip { min-height: 6.9em; }
.fan-pass:not(.is-google) .fan-dots { grid-template-columns: repeat(var(--per-row, 5), 1.8em); gap: .5em .6em; }

.fan-strip.has-img { background: var(--strip-img) center / cover no-repeat; }
.bg-photo .fan-strip, .bg-fade .fan-strip { background: none; }

.fan-dots {
    display: grid;
    grid-template-columns: repeat(var(--per-row, 5), 1.6em);
    gap: .42em .55em;
}

.fan-dot {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: .11em solid color-mix(in srgb, var(--text) 30%, var(--box));
    border-radius: 50%;
    color: var(--text-muted);
}

.fan-dot svg { width: 66%; height: 66%; }
.fan-dot:not(.on):not(.gift) svg { opacity: .5; }
.fan-dot.on { border-color: var(--accent); background: var(--accent); color: var(--on); }
.fan-dot.gift { border-style: dashed; }
.fan-dot.gift svg { width: 76%; height: 76%; }

/* Na fotke (pás alebo celá karta) svetlé guličky s tieňom, aby boli
   čitateľné — ako .points-flip.has-bg-img .dot v review.css. */
.has-img .fan-dot, .bg-photo .fan-dot { box-shadow: 0 .12em .45em -.1em rgb(0 0 0 / .45); }

.has-img .fan-dot:not(.on), .bg-photo .fan-dot:not(.on) {
    border-color: rgb(255 255 255 / .95);
    background: rgb(255 255 255 / .85);
    color: #3a3a3a;
}

.fan-big {
    font-size: 1.5em;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1;
    color: var(--accent);
}

/* Aj na karte s prechodom (bg-fade) stojí hodnota na fotke. */
.has-img .fan-big, .bg-photo .fan-big, .bg-fade .fan-big {
    color: #fff;
    text-shadow: 0 .06em .18em rgb(0 0 0 / .55), 0 0 .8em rgb(0 0 0 / .35);
}

.fan-meter {
    display: block;
    width: 80%;
    height: .45em;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 18%, var(--box));
}

.has-img .fan-meter, .bg-photo .fan-meter, .bg-fade .fan-meter { background: rgb(255 255 255 / .55); }
.fan-meter span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

/* Google Wallet: logo v bielom kruhu, názov, polia v dvoch stĺpcoch,
   pás dole cez celú šírku (.anat-pass.is-google). */
.fan-pass.is-google { padding: .85em .8em 0; border-radius: 1.25em; text-align: center; }

.fan-glogo {
    display: grid;
    place-items: center;
    width: 3.3em;
    height: 3.3em;
    margin: 0 auto;
    border-radius: 50%;
    background: #fff;
    color: var(--box);
    box-shadow: 0 .11em .45em -.17em rgb(0 0 0 / .35);
}

.fan-glogo svg { width: 55%; height: 55%; }
.fan-glogo img { display: block; width: 74%; height: 74%; object-fit: contain; }
.fan-gname { margin-top: .4em; font-size: .97em; font-weight: 800; }

.is-google .fan-grid { grid-template-columns: 1fr 1fr; margin-top: .7em; text-align: left; }
.is-google .fan-grid .fan-field:nth-child(4) { grid-column: auto; }

.is-google .fan-field i {
    font-size: .62em;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--label);
}

.is-google .fan-field b { font-weight: 800; }
.is-google .fan-strip { margin: .75em -.8em 0; }

/* ------------------------------------------------------ hodnotenie -- */
/* Ako .anat-rate: smajlíky s popiskami cez celú šírku, vybraný na farbe
   podniku; hviezdičky vo farbe podniku, nevybrané v tóne čiar. */
.fan-rate { margin-top: auto; padding-top: .7em; }

.fan-rate-q { font-size: .86em; font-weight: 800; }

.fan-faces { display: flex; justify-content: space-between; gap: .2em; margin-top: .5em; }

.fan-face {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: .28em;
    color: var(--muted);
}

.fan-face-emoji {
    display: grid;
    place-items: center;
    width: 2.4em;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--face);
}

.fan-face-emoji img { width: 1.5em; height: 1.5em; }
.fan-face-label { font-size: .58em; font-weight: 700; white-space: nowrap; }
.fan-face.is-pick { color: var(--ink); }

.fan-face.is-pick .fan-face-emoji {
    background: var(--accent);
    box-shadow: 0 0 0 .17em color-mix(in srgb, var(--accent) 25%, transparent);
}

.fan-stars { display: flex; justify-content: center; gap: .34em; margin-top: .55em; color: var(--line); }
.fan-stars svg { width: 2.15em; height: 2.15em; }
.fan-stars svg.on { color: var(--accent); }

.fan-stars path {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.2;
    stroke-linejoin: round;
}

.fan-rate-label { display: block; margin-top: .35em; font-size: .68em; font-weight: 700; color: var(--muted); }

/* Mobil: šírka podľa okna, nie podľa výšky (22vw by bolo pridrobné). */
@media (max-width: 640px) {
    .fan { --fan-w: clamp(150px, min(48vw, 30svh), 220px); }
}

@media (max-width: 560px) {
    .fan-sub { font-size: 16px; }
}