/* Wlasne klasy z prefiksem pl-lg-. Zadnych klas motywu (ruling: niezaleznosc od motywu). */
/*
 * Pouczenie to dokument formatu A4 (zrodlo 2372x3350 px). Samo max-width: 100% pozwalalo
 * mu rosnac do szerokosci kolumny - przy oknie 1440 px wychodzilo 1070x1511 px, czyli
 * ekran zalany jednym obrazkiem. Gorna granica 700 px to mniej wiecej A4 w skali 1:1
 * (210 mm = 794 px przy 96 dpi), wiec dokument wyglada jak kartka, a nie jak plakat.
 *
 * width: 100% razem z max-width, nie samo max-width: bez tego obrazek braloby szerokosc
 * wlasna (2372 px) i na telefonie wychodzilby 700 px poza ekran.
 *
 * Dolu nie ograniczamy: czytelnosc pouczenia jest wymogiem prawnym, a wysokosc idzie
 * z proporcji. Zmierzone po zmianie: 700x989 px na 1440, 343x485 px na 375.
 */
.pl-lg-notice__image {
    display: block;
    width: 100%;
    max-width: 700px;
    height: auto;
    margin: 0 0 1rem;
}

.pl-lg-notice__transcript {
    margin: 1.5rem 0;
}

.pl-lg-notice__source {
    font-size: 0.85em;
    opacity: 0.8;
}

.pl-lg-link {
    margin: 0.75rem 0;
}

/*
 * Odnosnik do pouczenia w karcie produktu i w koszyku ma rzucac sie w oczy: to tam
 * klient decyduje o zakupie, a zwykly link ginal w opisie produktu. W stopce zostaje
 * zwykly link - wyrozniony napis odstawalby od listy pozostalych odnosnikow.
 *
 * Ramka bierze currentColor, czyli kolor odnosnika z motywu, tlo zostaje przezroczyste.
 * Pudelko nie wnosi wiec ani jednej wartosci koloru spoza motywu (ruling: niezaleznosc
 * od motywu), a mimo to widac je z odleglosci.
 *
 * inline-block, nie block: przy block pudelko rozciagaloby sie na cala szerokosc kolumny
 * produktu - ten sam blad co obrazek pouczenia przed 1.0.1. Tak obejmuje sam napis,
 * a max-width: 100% pilnuje, zeby na waskim ekranie napis zawinal sie w srodku ramki
 * zamiast wyjsc poza ekran.
 */
.pl-lg-link--product,
.pl-lg-link--cart {
    margin: 1rem 0;
}

.pl-lg-link--product > a,
.pl-lg-link--cart > a {
    display: inline-block;
    max-width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-weight: 600;
    font-size: 1.05em;
    line-height: 1.3;
    text-decoration: none;
}

/*
 * W spoczynku podkreslenia nie ma, bo sama ramka mowi "to sie klika". Przy najechaniu
 * i przy przejsciu tabulatorem wraca: obrys w kolorze to za malo dla kogos, kto zmiany
 * koloru nie zobaczy. Domyslnego outline przegladarki nie ruszamy.
 */
.pl-lg-link--product > a:hover,
.pl-lg-link--product > a:focus,
.pl-lg-link--cart > a:hover,
.pl-lg-link--cart > a:focus {
    text-decoration: underline;
}