/* Inprogress+: sciezki, zakladki .ares, sekcje subskrypcji.
   Przeniesione z responsive.css. */

/* Lists - InProgressPlus */
ul.list--inprogressplus {
    padding: 2rem 1rem
}

ul.list--inprogressplus li.item {
    list-style: none;
    min-height: auto;
    background-size: cover;
    position: relative;
    margin: 0;
    width: 100%
}

ul.list--inprogressplus li.item:before {
    display: none !important
}

ul.list--inprogressplus .item img {
    width: 100% !important
}

ul.list--inprogressplus .item .cover {
    background: rgb(var(--color-secondary-rgb));
    color: var(--color-white);
    padding: 2rem 1rem;
    position: absolute;
    bottom: 0;
    width: 94%
}

ul.list--inprogressplus .item h4 {
    color: var(--color-white);
    margin: 0;
    padding: 0
}/* InProgressPlus Tabs */

/* Ares Component */
.ares {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    width: 100%
}

.ares label {
    flex-direction: column-reverse;
    background: var(--color-white);
    border: 1px solid var(--color-grey);
    order: 1;
    display: flex;
    text-align: center;
    padding: 1rem 6rem;
    justify-content: space-between;
    cursor: pointer;
    font-size: 1.25em;
    font-weight: 600;
    align-items: center
}

.ares label img {
    max-width: 128px;
    max-height: 128px
}

.ares .tab .tab-content {
    padding: 1rem 2rem 2rem 2rem;
    background: var(--color-light-grey)
}

.ares label.is-1 {
    max-width: 100%
}

.ares label.is-2 {
    max-width: 50%
}

.ares label.is-3 {
    max-width: 33%
}

.ares label.is-4 {
    max-width: 25%
}

.ares .tab {
    order: 99;
    flex-grow: 1;
    width: 100%;
    display: none;
    padding: 1rem
}

.ares .tab .content {
    max-width: 100%;
    margin: 0 auto
}

.ares .tab .content-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.ares .tab .content-columns p,
.ares .tab .content-columns ul {
    width: calc(50% - 12px);
    margin: 0 0 1rem 0
}

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

.ares .tab .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ares input[type=radio] {
    display: none
}

.ares input[type=radio]:checked+label {
    border-bottom: 2px solid var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white)
}

.ares input[type=radio]:checked+label+.tab {
    display: block
}

/* Route Component */
.route--inprogressplus {
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg);
    position: relative;
    padding: 2rem;
    min-height: 30rem
}

.route--inprogressplus h1 a,
.route--inprogressplus h2 a,
.route--inprogressplus h3 a,
.route--inprogressplus h4 a {
    text-decoration: underline;
    color: var(--color-primary)
}

.route--inprogressplus input[name=route-select] {
    visibility: hidden;
    display: none
}

.route--inprogressplus .tab-content {
    display: block
}

.route--inprogressplus .tab-content label {
    cursor: pointer;
    display: block;
    max-width: 350px;
    padding: .5rem 1rem;
    font-weight: 400;
    margin: .5rem 0 .5rem 0;
    position: relative;
    z-index: 100;
    border-bottom: 1px solid var(--color-secondary-200)
}

.route--inprogressplus .tab-content .tab-content-article {
    display: none;
    left: 28rem;
    padding: 1rem 4rem 0 2rem;
    position: absolute;
    top: 0
}

.route--inprogressplus .tab-content .tab-content-article:after {
    bottom: 0;
    content: "hehe";
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    display: none;
    z-index: 1
}

.route--inprogressplus input[name=route-select]:checked+label {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-lg);
    border: none
}

.route--inprogressplus input[name=route-select]:checked~.tab-content-article {
    display: block
}

.route--inprogressplus .tab-content .tab-content-article .route-icons {
    border-top: 1px solid var(--color-secondary-200);
    padding: 1rem 0 0 0
}

.route--inprogressplus .tab-content .tab-content-article .route-icons .single-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 1rem 0 0rem
}

.route--inprogressplus .tab-content .tab-content-article .route-icons .single-icon img {
    max-width: 80px;
    max-height: 80px;
    margin: 0 1rem
}