/*
 * Bannerele laterale. Tot ce depinde de setari vine din PHP, ca stil adaugat
 * dupa fisierul asta — inclusiv regula care le face vizibile.
 *
 * Implicit sunt ASCUNSE. Asa, un ecran sub prag (telefon, tableta, laptop
 * ingust) nu le vede, si nu e nevoie de nicio regula separata pentru mobil:
 * daca nu incap, pur si simplu nu exista.
 */

.xa-reclama {
    display: none;
    position: fixed;
    top: var(--xa-sus, 120px);
    width: var(--xa-latime, 150px);

    /*
     * Sub headerul temei, dar peste continut. WoodMart urca pana la 1110 pe
     * header si meniuri; 100 ne tine deasupra paginii si dedesubtul lor, deci
     * headerul sticky trece peste banner, nu invers.
     */
    z-index: 100;

    /* Cand pagina abia se incarca, scriptul inca n-a pus latimea exacta. */
    max-height: calc(100vh - var(--xa-sus, 120px) - var(--xa-jos, 24px));
    overflow: hidden;

    /*
     * Cat trebuie impins in sus ca sa nu intre peste footer. Scriptul il
     * calculeaza la fiecare cadru; zero cat timp footerul e departe.
     *
     * De ce `transform` si nu `top`: mutarea pe `transform` nu cere browserului
     * sa recalculeze asezarea paginii, deci derularea ramane fluida chiar daca
     * valoarea se schimba de zeci de ori pe secunda.
     */
    transform: translateY(calc(-1 * var(--xa-deplasare, 0px)));

    /* O reclama nu trebuie sa fie tinta primului Tab de pe pagina. */
    line-height: 0;
}

.xa-reclama--stanga {
    /* Centrat in spatiul liber din stanga, nu lipit de margine. */
    left: calc(var(--xa-margine) / 2 - var(--xa-latime) / 2);
}

.xa-reclama--dreapta {
    right: calc(var(--xa-margine) / 2 - var(--xa-latime) / 2);
}

.xa-reclama__link {
    display: block;
    /* Tema pune borduri si fundaluri pe link-uri in unele contexte. */
    border: 0;
    box-shadow: none;
    text-decoration: none;
}

.xa-reclama__img {
    display: block;
    width: 100%;
    height: auto;

    /*
     * Daca imaginea e mai inalta decat ecranul, `object-fit` o micsoreaza
     * intreaga in loc s-o intinda sau s-o taie. Fara el, o imagine de
     * 360x3000 ar iesi turtita.
     */
    max-height: calc(100vh - var(--xa-sus, 120px) - var(--xa-jos, 24px));
    object-fit: contain;
    object-position: top center;

    border-radius: 6px;
}

/*
 * Ecranele scunde: sub 600px inaltime (un laptop vechi cu bara de taskuri, sau
 * o fereastra micsorata) bannerul ar fi o dunga. Mai bine lipseste.
 */
@media (max-height: 600px) {
    .xa-reclama { display: none !important; }
}

/* La tiparire n-au ce cauta. */
@media print {
    .xa-reclama { display: none !important; }
}