/* ── Pager memoriálů – listování mezi kolečky (jen při 4+ memoriálech) ──
   Nahrazuje původní rohové šipky .navigation-arrows (odstraněny ze šablony;
   jejich styly v memorial.css zůstávají nepoužité – memorial.css se NEUPRAVUJE).

   Geometrie z memorial.css: .profile-preview 30 % + gap 3 %, centrované
   → kolečka leží na 2–32 %, 35–65 %, 68–98 % šířky → OSY MEZER = 33,5 %
   a 66,5 %. Tlačítka sedí přesně v těchto osách (procenta platí pro
   všechny šířky – pager sdílí content box s .profiles-wrapper).

   Šipka = předchozí/další memoriál; počítadlo "3 / 12" = pozice/počet
   (škáluje pro libovolný počet memoriálů, konstantní vzhled). */

.memorial-pager {
    position: relative;
    width: 100%;
    height: 44px;
    margin-top: 10px;
    /* Vizuální spodní mezera = margin-bottom 20px kontejneru + jeho posun
       top:-17px (memorial.css, neměníme) = 37px → -27px srovná na 10px,
       tedy stejně jako mezera nad pagerem */
    margin-bottom: -27px;
}

@media (max-width: 480px) {
    .memorial-pager {
        /* na mobilu je posun kontejneru top:-12px → 20+12-10 = -22px */
        margin-bottom: -22px;
    }
}

.memorial-pager-btn {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(200, 161, 79, 0.15);
    border: 2px solid #c8a14f;
    color: #6e5526;
    font-size: 26px;
    line-height: 1;
    font-family: 'Lora', serif;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 3px;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.memorial-pager-btn.prev { left: 33.5%; }
.memorial-pager-btn.next { left: 66.5%; }

.memorial-pager-btn:hover {
    background-color: rgba(200, 161, 79, 0.28);
}

.memorial-pager-btn:active {
    background-color: rgba(200, 161, 79, 0.38);
}

.memorial-pager-btn.disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.memorial-pager-counter {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Lora', serif;
    font-size: 16px;
    letter-spacing: 1px;
    color: #6e5526;
    white-space: nowrap;
    user-select: none;
}