/* Zakladki oparte na input[type=radio] + label.
   Jeden komponent, trzy nazwy zastane z blokow ACF: boxes--tabs (blok
   "Boxes tabs"), faq--tabs (blok "Area large") i inprogressplus--tabs
   (szablon Inprogress+ oraz blok "Slider flexible"). Reguly byly
   przepisane trzy razy, w trzech plikach, znak w znak.

   .ares to osobny wariant tego samego ukladu - ma wlasna etykiete i tlo
   na aktywnej zakladce, wiec zostaje w inprogress-plus.css i nadpisuje
   to, co ponizej. */

.boxes--tabs,
.faq--tabs,
.inprogressplus--tabs {
    display: flex;
    flex-wrap: wrap;
    width: 100%
}

.boxes--tabs label,
.faq--tabs label,
.inprogressplus--tabs label {
    order: 1;
    display: block;
    padding: 1rem 2rem;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 600
}

.boxes--tabs .tab,
.faq--tabs .tab,
.inprogressplus--tabs .tab {
    order: 99;
    flex-grow: 1;
    width: 100%;
    display: none;
    padding: 1rem;
    border-top: 1px solid var(--color-grey)
}

.boxes--tabs .tab .content,
.boxes--tabs .tab .video,
.faq--tabs .tab .content,
.faq--tabs .tab .video,
.inprogressplus--tabs .tab .content,
.inprogressplus--tabs .tab .video {
    flex: 50%
}

.boxes--tabs .tab .auto-resizable-iframe,
.boxes--tabs .tab .content,
.faq--tabs .tab .auto-resizable-iframe,
.faq--tabs .tab .content,
.inprogressplus--tabs .tab .auto-resizable-iframe,
.inprogressplus--tabs .tab .content {
    max-width: 100%;
    margin: 0 auto
}

.boxes--tabs .tab .auto-resizable-iframe > div,
.boxes--tabs .tab .content,
.faq--tabs .tab .auto-resizable-iframe > div,
.faq--tabs .tab .content,
.inprogressplus--tabs .tab .auto-resizable-iframe > div,
.inprogressplus--tabs .tab .content {
    position: relative;
    padding-bottom: 55%;
    height: 0
}

.boxes--tabs .tab .auto-resizable-iframe iframe,
.boxes--tabs .tab .content,
.faq--tabs .tab .auto-resizable-iframe iframe,
.faq--tabs .tab .content,
.inprogressplus--tabs .tab .auto-resizable-iframe iframe,
.inprogressplus--tabs .tab .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.boxes--tabs input[type=radio],
.faq--tabs input[type=radio],
.inprogressplus--tabs input[type=radio] {
    display: none
}

.boxes--tabs input[type=radio]:checked + label,
.faq--tabs input[type=radio]:checked + label,
.inprogressplus--tabs input[type=radio]:checked + label {
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-primary)
}

.boxes--tabs input[type=radio]:checked + label + .tab,
.faq--tabs input[type=radio]:checked + label + .tab,
.inprogressplus--tabs input[type=radio]:checked + label + .tab {
    display: block
}