/* Agenda specific modules and elements + detail pages for film and expositions
   ========================================================================== */


/* Header of page
   ========================================================================== */

.header--small {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;

    /*margin-block-start: var(--space-xl);*/
    margin-block-end: var(--space-l);
}

.header--small h1 {
    margin-block: 0;
    font-size: var(--step-2);
}

/* Filter
   ========================================================================== */

.filter--block {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    padding-block: var(--space-s);
    padding-inline: var(--space-m);
    background-image: url(../img/bg_filter.svg);
    background-size: 100% 100%;
    margin-block-end: var(--space-l);
    font-family: var(--header);
    font-size: var(--step--1);
}

.filter--block ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-inline-end: var(--space-m);
}

.filter--block ul a {
    padding-block: var(--space-3xs);
    padding-inline: var(--space-2xs);
}

.filter--block ul li:nth-child(2n + 1) a:hover,
.filter--block ul li:nth-child(2n + 1) a:focus,
.filter--block ul li:nth-child(2n + 1) a.active {
    background-image: url(../vlakken/bg_link_wit_1.svg);
    background-size: 100% 100%;
}

.filter--block ul li:nth-child(2n + 2) a:hover,
.filter--block ul li:nth-child(2n + 2) a:focus,
.filter--block ul li:nth-child(2n + 2) a.active {
    background-image: url(../vlakken/bg_link_wit_2.svg);
}

.delete {
    margin-inline-start: auto;
    margin-inline-end: 0;

    display: flex;
    align-items: center;
}

.delete:hover {
    color: var(--color-primary);
}

.delete > svg {
    fill: currentColor;
}

/* Agenda overzicht
   ========================================================================== */

.content--container {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: 1fr min-content;
    gap: var(--space-2xs);
    margin-block-end: var(--space-l);
}

.agenda--overzicht {
    display: flex;
    flex-direction: column;
    grid-column: 1 / 17;
}

@media screen and (min-width: 768px) {
    .content--container {
        grid-row: 1;
        grid-template-columns: repeat(16, 1fr);
        grid-template-rows: 1fr;
    }

    .agenda--overzicht {
        display: flex;
        flex-direction: column;
        grid-column: 1 / 12;
    }

}

.agenda--overzicht h2 {
    font-size: var(--step-2);
}

.agenda--overzicht h3 {
    font-size: var(--step-1);
}

.agenda--overzicht :is(h4, h5, h6) {
    font-size: var(--step-0);
}


.tussen-kop {
    font-family: var(--header);
    font-size: var(--step-1);
}

.item {
    display: flex;
    flex-wrap: wrap;
    margin-block-start: var(--space-s);
    margin-block-end: var(--space-s);
    background-color: var(--color-bg-light);
}

.item.variant-verder {
    margin-block-end: var(--space-xs);
}

.item.variant-prominent {
    background-color: var(--color-secondary-light);
}

.item .text--block {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    padding: var(--space-xs) var(--space-xs) 0;
    margin: 0;
}

.item .text--block p {
    margin-block-end: var(--space-xs);
}

.item .text--block p + p > a {
    margin-block-start: 0;
}

.item .text--block span {
    display: flex;
}

.item :is(a, .meta, span) {
    font-family: var(--header);
}

.item h3 {
    margin-block-end: var(--space-xs);
    font-size: var(--step-0);
}

.item h3 span {
    color: var(--donker-groen);
    font-size: var(--step--1);
}

.item a {
    align-self: flex-start;
    margin-block-start: auto;
    margin-block-end: 0;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}

.item a:is(:hover, :focus) {
    color: var(--color-primary);
    text-decoration: underline;
}

.item p > a {
    display: block;
    margin-block-start: var(--space-xs);
}

.item figure {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
}

.item figure span {
    position: absolute;
    top: var(--space-3xs);
    left: var(--space-3xs);
    padding: var(--space-2xs);
    background-image: url(../vlakken/bg_geel.svg);
    background-size: 100% 100%;
    color: black;
}

.item img {
    display: flex;
    min-width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 3 / 2;
}

.item span a:after,
p.meta a:after {
    content: "";
    display: block;
    height: 5px;
    margin-block-start: 2px;
    background-image: url(../img/link_underline_1.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
}

.item:nth-child(2n + 2) a:after {
    background-image: url(../img/link_underline_2.svg);
}

.item:nth-child(3n + 2) a:after {
    background-image: url(../img/link_underline_3.svg);
}

.text--block span {
    margin-block-start: auto;
    margin-block-end: 0;
}

.trailer {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    line-height: 1.5;
    font-family: var(--header);
    display: flex;
    align-items: center;
    width: fit-content;
}

.trailer:before {
    content: "";
    display: inline-flex;
    width: 27px;
    height: 25px;
    background-image: url(../icons/play_rood.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-inline-end: var(--space-3xs);
}

@media screen and (min-width: 768px) {
    .item figure {
        /*aspect-ratio: 1;*/
        width: 200px;
    }

    .item img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1;
    }

}

/* Agenda aside
   ========================================================================== */

.content--container aside {
    grid-column: 1 / 17;
    grid-row: 2;
}

.content--container aside .tussen-kop {
    font-size: var(--step-0);
}

@media screen and (min-width: 1024px) {
    .content--container aside {
        grid-column: 12 / 17;
        grid-row: 1;
    }
}

@media screen and (min-width: 1300px) {
    .content--container aside {
        grid-column: 13 / 17;
        grid-row: 1;
    }
}

/* Film detail
   ========================================================================== */

.header--film {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 16px repeat(14, 1fr) 16px;
    grid-template-rows: 1fr 100px;
    overflow: hidden;
}

@media screen and (min-width: 768px) {
    .header--film {
        grid-template-columns: 48px repeat(14, 1fr) 48px;
    }
}

.header--film span {
    grid-column: 1 / 16;
    grid-row-end: 3;
    background-image: url(../vlakken/bg_header_title.svg);
    background-size: 100% 100%;
    padding-block: var(--space-xs);
    padding-inline: var(--space-s);
    margin-block-end: 40px;
    width: fit-content;
    height: fit-content;
    align-self: center;
    z-index: 2;
}

@media screen and (min-width: 768px) {
    .header--film span {
        grid-column: 2 / 16;
        margin-block-end: 100px;
    }
}

.header--film h1 {
    color: white;
    margin: 0;
}

.video--container iframe {
    width: 100%;
    inset: 0;
    aspect-ratio: 12 / 9;
    margin-top: -60px;
}

@media screen and (min-width: 610px) {
    .video--container iframe {
        aspect-ratio: 13 / 9;
    }
}

@media screen and (min-width: 830px) {
    .video--container iframe {
        aspect-ratio: 16 / 9;
    }
}

/* .video--container,
.header--film figure { */

.video--container {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    position: relative;
    aspect-ratio: 16 / 7.5;
    overflow: hidden;
    background-color: var(--color-bg-light);
}

.header--film figure {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    position: relative;
    aspect-ratio: 16 / 7.5;
}

.header--film figcaption {
    --color: #999;
    position: absolute;
    background-image: url(../vlakken/bg_grey.svg);
    background-size: 100% 100%;
    bottom: 0;
    right: var(--space-xs);
    /* left: var(--space-xs); */
    left: unset;
    /* width: 80%; */
    width: fit-content;
    font-size: 80%;
    padding-block: 4px;
    padding-inline: 8px;
    color: var(--color);
}

.header--film figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content--container {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: 1fr min-content;
    gap: var(--space-2xs);
    margin-block-end: var(--space-l);
}

.content--container article {
    display: flex;
    flex-direction: column;
    grid-column: 1 / 17;
}

.meta--info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
    margin-block-end: var(--space-xl);
}

.meta--info .details {
    display: grid;
    grid-template-columns: .5fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-m);
}

.meta--info span {
    display: block;
    color: var(--color-text-light);
    font-family: var(--header);
}

.item .meta a {
    display: inline-block;
    font-size: var(--step--2);
    cursor: pointer;
    margin: 0;
    padding: 0;
    text-decoration: none;
    margin-inline-end: 0;
    transition: color .2s ease-in-out;
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
}

.content--container article :is(p:first-of-type, a) {
    font-size: var(--step--1);
    margin-block-end: var(--space-s);
}

.dome {
    flex: 1 2 200px;
}

.dome p {
    font-size: var(--step--2);
}

.content--container article p:last-of-type {
    margin-block-end: var(--space-l);
}

.content--container .meta--info p {
    color: black;
    font-size: var(--step--2);
}

@media screen and (min-width: 768px) {
    .content--container {
        grid-row: 1;
        grid-template-columns: repeat(16, 1fr);
        grid-template-rows: 1fr;
    }

    .content--container article {
        display: flex;
        flex-direction: column;
        grid-column: 2 / 12;
    }

    .dome {
        max-width: 330px;
    }

}

/* Flatpicker
   ========================================================================== */

.flatpickr-calendar.inline {
    width: fit-content;
}

.flatpickr-calendar {
    margin-block-start: var(--space-s);
    margin-block-end: var(--space-m);
    background: var(--color-bg-light) !important;
    border-radius: unset !important;
    -webkit-border-radius: unset !important;
    -moz-border-radius: unset !important;
    -ms-border-radius: unset !important;
    -o-border-radius: unset !important;
    box-shadow: unset !important;
    border: 5px solid var(--color-bg-light) !important;
}

.flatpickr-innerContainer {
    background: white;
    margin: 0 auto;
}

/*
.flatpickr-rContainer {
  width: 100%;
}
*/

.flatpickr-day {
    border-radius: unset !important;
    -webkit-border-radius: unset !important;
    -moz-border-radius: unset !important;
    -ms-border-radius: unset !important;
    -o-border-radius: unset !important;
}

.flatpickr-day.today {
    border-color: var(--color-secondary) !important;
}

.flatpickr-day.selected {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: black !important;
}

.flatpickr-current-month,
.flatpickr-monthDropdown-months {
    font-family: var(--header);
}

/* Slider op filmpagina
   ========================================================================== */

article .splide {
    width: 100%;
    margin-block-start: var(--space-s);
}

article .splide > * {
    max-width: 100%;
}

.splide__slide {
    margin-inline-end: var(--space-m);
}

.splide__slide__container {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 19 / 9;
}

.splide__slide figure img {
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.splide figcaption {
    font-size: var(--step--2);
    font-style: italic;
    color: var(--color-text-light);
}

article .splide__pagination {
    display: flex;
    justify-content: center;
}

article .splide__pagination__page {
    background-color: var(--color-bg-light);
    width: 10px;
    height: 10px;
    margin-inline: var(--space-3xs);
}

article .splide__pagination__page.is-active {
    background-color: var(--color-primary);
    width: 14px;
    height: 14px;
}

/* Button agenda
   ========================================================================== */
.agenda-item .btn {
    color: white;
    padding-block: var(--space-s);
    padding-inline-start: var(--space-l);
    padding-inline-end: var(--space-xl);
    font-size: var(--step-0);
    font-family: var(--header);
    background: url(../icons/chevron.svg) 92% center no-repeat,
    url(../vlakken/btn_vlak_1.svg) center center no-repeat;
    background-size: auto, cover;
    max-height: 74px; /* Anders Flext 'ie all over the place */
    transition: all .2s cubic-bezier(.15, .93, .57, 1.58);
    -webkit-transition: all .2s cubic-bezier(.15, .93, .57, 1.58);
    -moz-transition: all .2s cubic-bezier(.15, .93, .57, 1.58);
    -ms-transition: all .2s cubic-bezier(.15, .93, .57, 1.58);
    -o-transition: all .2s cubic-bezier(.15, .93, .57, 1.58);
}

.agenda-item .btn:hover {
    background: url(../icons/chevron.svg) 96% center no-repeat,
    url(../vlakken/btn_vlak_1.svg) center center no-repeat;
    background-size: auto, cover;
}