/* Components: thumbnails, video, media */

/* Thumbnails */
.thumbnail,
.video-thumbnail {
    display: block;
    background: transparent no-repeat 50% 50%;
    background-size: cover;
    overflow: hidden
}

.thumbnail img,
.video-thumbnail img {
    display: block;
    width: 100%;
    transition: opacity .3s
}

.thumbnail:hover {
    opacity: 1
}

.thumbnail a:hover img,
a.thumbnail:hover img {
    opacity: .75
}

/* Video container */
.video-container {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    position: relative
}

.video-container iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}

.video-container .video-thumbnail {
    position: relative
}

.video-container .video-thumbnail:after {
    content: '';
    width: 7.375rem;
    height: 7.375rem;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    background: rgb(var(--color-black-rgb) / .25) url(../images/button-play.png) no-repeat 50% 50%;
    background-size: contain;
    transform: translate(-50%, -50%)
}

/* Downloads */
a.download {
    color: var(--color-primary);
    text-decoration: none
}

a.download:before {
    content: none;
    margin-right: .5rem;
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    background: transparent no-repeat 50% 50%;
    background-size: contain;
    vertical-align: -10%
}

a.download:hover {
    text-decoration: underline
}

a.download--pdf:before {
    content: '';
    background-image: url(../images/file-pdf.png)
}

/* Meta */
.meta {
    font: var(--text-xs);
    text-transform: uppercase;
    color: rgb(var(--color-secondary-rgb) / .8)
}

.meta a {
    color: var(--color-primary);
    text-decoration: none
}

.meta>* {
    margin: 0 var(--space-base) 0 0
}

.meta li:before {
    content: none
}

.meta .post-categories {
    list-style: none;
    margin-left: 0
}

/* Box component */
.box {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-5) var(--space-5)
}

.box>:first-child {
    margin-top: 0
}

.box.billing-data h3 {
    margin: 0 0 .25rem 0;
    padding: 0
}

.box #discount-code {
    max-width: 300px;
    overflow-x: scroll
}

/* Price component */
.price .price-item+.price-item {
    margin-left: 1rem
}

.price .price-item--current {
    color: var(--color-primary)
}

.price .price-item--old {
    color: var(--color-base-text);
    opacity: .8;
    font: var(--text-base);
    text-decoration: line-through
}

.price--promo .price-item--current {
    color: var(--color-red)
}

.price--promo .price-text {
    font: var(--text-base);
    word-wrap: break-word
}

.price-item--tax {
    color: var(--color-secondary);
}

.price-item--tax {
    font-size: var(--text-base);
}

/* Icons */
.icon a {
    text-decoration: none
}

.icon a span {
    display: none
}

.icon--facebook a:before {
    content: url(../images/facebook.svg)
}

.icon--linkedin a:before {
    content: url(../images/linkedin.svg)
}

.icon--instagram a:before {
    content: url(../images/insta.svg)
}

.icon--search a:before {
    content: url(../images/search-icon.svg)
}

.icon--phone a:before {
    content: '\f879';
    font-weight: 700
}

.icon--mail a:before {
    content: '\f0e0'
}

/* Zrzut diagnostyczny dla zalogowanego administratora. Widoczny wylacznie
   po dopisaniu parametru do adresu, nigdy w zwyklym ruchu. */
.debug-dump {
    margin: 1rem auto 2rem;
    padding: 1rem;
    border: 1px dashed var(--color-grey);
    background: var(--color-light-grey);
    color: var(--color-secondary);
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap
}

/* Okruszki na podstronie. Stoja na poczatku <main>, nie w naglowku, wiec
   maja wlasny pas z odstepem zamiast dzielic obramowanie z nawigacja. */
/* Okruszki sa czescia tresci strony, nie belka pod naglowkiem: bez wlasnego
   tla i obramowania. Odstep od dolu, bo strona moze zaczynac sie od bloku
   na cala szerokosc z ciemnym tlem (doradztwo) i tekst nie ma go dotykac. */
.site-breadcrumbs {
    padding: 1.25rem 0 1rem
}

/* Szerokosc daje .container, ten sam co w naglowku i tresci. */
.site-breadcrumbs #breadcrumbs {
    font: var(--text-xs);
    line-height: 1.5
}

.site-breadcrumbs #breadcrumbs a,
.site-breadcrumbs #breadcrumbs span,
.site-breadcrumbs #breadcrumbs p,
.site-breadcrumbs #breadcrumbs .breadcrumb-sep {
    display: inline
}

.site-breadcrumbs #breadcrumbs .breadcrumb-sep {
    margin: 0 6px;
    color: var(--color-secondary-500);
    font-size: .875em
}

/* Poza naglowkiem odnosniki lapia domyslne podkreslenie z reset-typography,
   a okruszki maja je miec dopiero pod kursorem. */
.site-breadcrumbs #breadcrumbs a {
    color: var(--color-base-text);
    text-decoration: none
}

.site-breadcrumbs #breadcrumbs a:hover {
    color: var(--color-primary);
    text-decoration: underline
}

/* Strona zaczyna sie od covera ze zdjeciem (parts/site-breadcrumbs.php):
   pas nie zajmuje miejsca, okruszki leza na gorze zdjecia w szerokosci
   kontenera. */
.site-breadcrumbs--cover {
    position: relative;
    z-index: 2;
    height: 0;
    padding: 0
}

.site-breadcrumbs--cover .container {
    position: absolute;
    top: 1.5rem;
    left: 0;
    right: 0
}

/* Bialy tekst z cieniem: czytelny na kazdym zdjeciu, bez zgadywania jego tonu. */
.site-breadcrumbs--cover #breadcrumbs,
.site-breadcrumbs--cover #breadcrumbs a,
.site-breadcrumbs--cover #breadcrumbs span {
    color: var(--color-white);
    text-shadow: 0 1px 3px rgb(0 0 0 / .55)
}

.site-breadcrumbs--cover #breadcrumbs .breadcrumb-sep {
    color: rgb(var(--color-white-rgb) / .8)
}

.site-breadcrumbs--cover #breadcrumbs a:hover {
    color: var(--color-primary-200)
}