/* ------------------------- Components - Samen Toegankelijk Heerlen (Pendra Studio) ------------------------- */


/* ------------------------- Rounded -------------------------------------------------- */

/* Eigen stapelcontext: de vullaag hieronder staat op z-index -1 en zakte op
   iOS (geen locomotive-transforms, dus geen stapelcontext per sectie) achter
   de pagina-achtergrond, waardoor de ronding daar als rechte lijn oogde. */
.pendra-rounded-top {
   position: relative;
   isolation: isolate;
}

.pendra-rounded-top::before {
   content: "";
   position: absolute;
   top: calc(100% - 2px);
   left: 0;
   width: 100%;
   height: calc((var(--border-radius-medium) * 2) + 4px);
   background: var(--color-dark-medium);
   z-index: -1;
}

.pendra-rounded-top + .section,
.pendra-rounded-top + .section-wrap {
   border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
}

/* Zit de volgende inhoud in een wrapper, dan schildert de binnenste sectie
   zijn eigen achtergrond vierkant over de ronding van die wrapper heen.
   De eerste sectie erin rondt dus mee. */
.pendra-rounded-top + .section-wrap > .section:first-child {
   border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
}

.pendra-rounded-top + .section.last-section,
.pendra-rounded-top + .section-wrap.last-section {
   border-radius: var(--border-radius-medium);
}

/*  Theme Light-Medium  */
.theme-light-medium.pendra-rounded-top::before,
.theme-nonav-light-medium.pendra-rounded-top::before {
   background: var(--color-light-medium);
}

/*  Theme Light  */
.theme-light.pendra-rounded-top::before,
.theme-nonav-light.pendra-rounded-top::before {
   background: var(--color-light);
}

/*  Theme Dark  */
.theme-dark.pendra-rounded-top::before,
.theme-nonav-dark.pendra-rounded-top::before {
   background: var(--color-dark);
}

/*  Theme Dark Medium  */
.theme-dark-medium.pendra-rounded-top::before,
.theme-nonav-dark-medium.pendra-rounded-top::before {
   background: var(--color-dark-medium);
}

/* ------------------------- Last Section -------------------------------------------------- */

.last-section {
   border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
   overflow: hidden;
}

/* ------------------------- Arrow -------------------------------------------------- */

.arrow {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   position: relative;
   width: 3.75em;
   height: 3.75em;
   border-radius: 50%;
   transform: rotate(0.001deg);
}

.arrow .arrow-fill {
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background: var(--color-dark-medium);
}

.arrow .arrow-fill-hover {
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background: var(--color-secondary);
   transform: scale(0);
   transition: transform var(--animation-primary);
}

.arrow .arrow-content {
   width: 1.4em;
   position: relative;
   display: flex;
   color: var(--color-light);
   transform: rotate(0.001deg);
   transition: transform var(--animation-primary);
}

.arrow .arrow-content svg :is(polyline, line, path) {
   stroke: currentColor;
   stroke-width: 0.075em;
}

/* Border */

.arrow.border .arrow-fill {
   background: transparent;
   border: 1px solid var(--color-border);
}

.arrow.border .arrow-content {
   color: var(--color-dark);
}

.theme-dark .arrow.border .arrow-fill {
   border: 1px solid var(--color-border-light);
}

.theme-dark .arrow.border .arrow-content {
   color: var(--color-light);
}

/* Secondary */

.arrow.secondary .arrow-fill {
   background: var(--color-secondary);
}

/* Small */

.arrow.small {
   width: 2em;
   height: 2em;
}

.arrow.small .arrow-content {
   width: 1em;
}

/* ------------------------- Tags -------------------------------------------------- */

.tags {
   display: flex;
   gap: 0.6em 0.2em;
   flex-wrap: wrap;
}

.tags .single-tag {
   border-radius: 100em;
   height: 2em;
   padding: 0 0.85em 0.05em 0.85em;
   background: var(--color-dark-medium);
   display: flex;
   justify-content: center;
   align-items: center;
   white-space: nowrap;
   color: var(--color-light);
   cursor: default;
   gap: 0.25em;
}

/* Categorielabel naast het "Nieuws"-label. De referentie zet het type gevuld en
   de categorie licht; hier staan alle labels op groene secties, dus is het
   omgekeerd: het lichte "Nieuws" is het anker en de categorie is het stille
   chipje ernaast. Zelfde hierarchie, andere ondergrond. */
.tags .single-tag.subtle {
   background: transparent;
   border: 1px solid rgba(var(--color-dark-rgb), 0.3);
   color: rgba(var(--color-dark-rgb), 0.85);
}

.tags .single-tag span {
   font-size: 0.8em;
   transition: var(--animation-primary);
}

.tags a.single-tag {
   cursor: pointer;
}

.tags a.single-tag:hover span {
   opacity: 0.6;
}

/* Close */

.tags .single-tag .tag-close {
   width: 0.9em;
   transform: translateY(-2%);
}

.tags .single-tag .tag-close path {
   stroke: var(--color-light);
   stroke-width: 6%;
   transition: var(--animation-primary);
}

.tags .single-tag:hover .tag-close path {
   opacity: 0.6;
}

/* Primary */

.tags .single-tag.primary {
   background: var(--color-dark-light);
}

/* Light Dark */

.tags .single-tag.light-dark {
   background: var(--color-light-dark);
}

.tags .single-tag.light-dark span {
   color: var(--color-dark-medium);
}

.tags .single-tag.light-dark .tag-close path {
   stroke: var(--color-dark);
}

/* Light Medium */

.tags .single-tag.light-medium {
   background: var(--color-light-medium);
}

.tags .single-tag.light-medium span {
   color: var(--color-dark-medium);
}

.tags .single-tag.light-medium .tag-close path {
   stroke: var(--color-dark);
}

/* Light */

.tags .single-tag.light {
   background: var(--color-light);
}

.tags .single-tag.light span {
   color: var(--color-dark-medium);
}

.tags .single-tag.light .tag-close path {
   stroke: var(--color-dark);
}

/* Border Light */

.tags .single-tag.border-light {
   background: transparent;
   border: 1px solid var(--color-border-light);
}

.tags .single-tag.border-light span {
   color: var(--color-light);
}

.tags .single-tag.border-light .tag-close path {
   stroke: var(--color-light);
}

/* Border Dark */

.tags .single-tag.border-dark {
   background: transparent;
   border: 1px solid var(--color-border);
}

.tags .single-tag.border-dark span {
   color: var(--color-dark-medium);
}

.tags .single-tag.border-dark .tag-close path {
   stroke: var(--color-dark);
}

/* ------------------------- Close -------------------------------------------------- */

.close {
   width: 2.6em;
   height: 2.6em;
   border-radius: 50%;
   border: 1px solid rgba(var(--color-dark-rgb), 0.25);
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   flex-shrink: 0;
   flex-grow: 0;
}

.close span {
   position: absolute;
   left: 99999px;
}

.close svg {
   width: 1.3em;
}

.close svg path {
   transition: var(--animation-primary);
   stroke: var(--color-dark);
}

.close:hover svg path {
   stroke: var(--color-secondary);
}

/* ------------------------- Filter Btn -------------------------------------------------- */

.filter-btn {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.35em;
   cursor: pointer;
   pointer-events: all;
}

.filter-btn .filter-icon {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   position: relative;
   width: 2em;
   height: 2em;
   border-radius: 50%;
   transform: rotate(0.001deg);
   border: 1px solid rgba(var(--color-light-rgb), 0.2);
}

.filter-btn .filter-icon svg {
   width: 1em;
   margin-top: 0.1em;
   transition: var(--animation-primary);
   transform: scaleX(1) rotate(0.001deg);
}

.filter-btn .filter-icon svg path {
   stroke: var(--color-light);
}

.filter-btn span {
   transition: var(--animation-primary);
   color: var(--color-text-light);
}

.filter-btn:hover .filter-icon svg {
   transform: scaleX(-1) rotate(0.001deg);
}

.filter-btn:hover span {
   opacity: 0.6;
}

/* ------------------------- Mobile Show/hide -------------------------------------------------- */

.mobile-show {
   display: none;
}

@media screen and (max-width: 720px) {
   .mobile-hide {
      display: none;
   }

   .mobile-show {
      display: flex;
   }
}

/* ------------------------- Title -------------------------------------------------- */

.row-title {
   padding-bottom: var(--section-padding-small);
}

.row-title .flex-col {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 1em;
}

.row-title .btn-row{
   width: unset;
}


.title {
   display: flex;
   gap: 0.75em;
   align-items: center;
}

/* Mobile */

.row-title-mobile {
   display: none;
}

.row-title-mobile {
   padding-top: var(--section-padding-small);
}

.row-title-mobile .btn-mobile {
   border-radius: 1.5em;
   width: 100%;
   height: 3em;
   border: 1px solid var(--color-border);
   display: flex;
   align-items: center;
   justify-content: center;
}

.row-title-mobile .btn-mobile + .btn-mobile {
   margin-top: 0.5em;
}

.row-title-mobile .btn-mobile span {
   font-size: 0.85em;
   color: var(--color-dark);
}

@media screen and (max-width: 720px) {
   .row-title .desktop {
      display: none;
   }

   .row-title-mobile {
      display: flex;
   }
}

/* ------------------------- Count -------------------------------------------------- */

.count {
   border-radius: 100em;
   height: 2.75em;
   min-width: 3.5em;
   padding: 0 1em;
   display: flex;
   justify-content: center;
   align-items: center;
   white-space: nowrap;
   cursor: default;
   gap: 0.25em;
   border: 1px solid var(--color-border);
}

.count span {
   font-size: 1em;
   font-weight: 400;
   color: var(--color-text);
   margin-bottom: 0.075em;
}

.theme-dark .count {
   border: 1px solid var(--color-border-light);
}

.theme-dark .count span {
   color: var(--color-text-light);
}

/* ------------------------- Modal -------------------------------------------------- */

.modal {
   top: 0;
   left: var(--gap-padding);
   right: var(--gap-padding);
   bottom: 0;
   z-index: 200;
   visibility: hidden;
   opacity: 0;
   transition: var(--animation-smooth);
   transform: translateY(-1em) scale(1) rotate(0.001deg);
   position: fixed;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none;
   padding: var(--gap-padding) 0;
   height: 100vh;
}

.modal.active {
   visibility: visible;
   opacity: 1;
   transform: translateY(0em) scale(1) rotate(0.001deg);
}

.modal-block {
   background: var(--color-light);
   border-radius: var(--border-radius-small);
   padding: 0.5em 1em;
   pointer-events: all;
   position: relative;
}

.modal-background {
   z-index: 199;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(var(--color-black-rgb), 0.75);
   position: fixed;
   transition: var(--animation-smooth);
   visibility: hidden;
   opacity: 0;
}

.modal-background.active {
   visibility: visible;
   opacity: 1;
}

@media (hover: hover) { 
   .modal-background {
      background: rgba(var(--color-black-rgb), 0.5);
   }
}

/* ------------------------- Breadcrumb -------------------------------------------------- */

.breadcrumb {
   width: 100%;
   margin-bottom: 2em;
}

.breadcrumb ul {
   display: flex;
   gap: 0.85em;
   max-width: 100%;
   overflow: hidden;
}

.breadcrumb ul li {
   position: relative;
   padding-left: 0.85em;
   display: flex;
   justify-content: center;
}

.breadcrumb ul li:nth-child(2),
.breadcrumb ul li:nth-child(1)::before {
   display: none;
}

.breadcrumb ul li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 20%;
   height: 60%;
   width: 1px;
   background: var(--color-dark-medium);
   transform: rotate(25deg) translateY(5%);
}

.theme-dark .breadcrumb ul li::before,
.theme-nav-dark .breadcrumb ul li::before {
   background: var(--color-light-dark);
}

.breadcrumb ul li a {
   display: flex;
   justify-content: center;
   transition: var(--animation-primary);
}

.breadcrumb ul li a span,
.breadcrumb ul li a::after {
   font-size: 0.85em;
   color: var(--color-dark-medium);
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   line-clamp: 1;
}

.theme-dark .breadcrumb ul li a span,
.theme-nav-dark .breadcrumb ul li a span {
   color: var(--color-light-medium);
}

.breadcrumb ul li a:hover {
   opacity: 0.66;
}

.breadcrumb ul li:nth-child(1) {
   padding-left: 0;
}

.breadcrumb ul li:nth-child(1) svg {
   width: 1em;
}

#article .breadcrumb ul li:last-child,
#event .breadcrumb ul li:last-child,
#news .breadcrumb ul li:last-child,
#jobs-single .breadcrumb ul li:last-child {
   display: none;
}

#expertises-single .breadcrumb ul li:nth-last-child(3) span,
#expertises-info .breadcrumb ul li:nth-last-child(3), #expertises-info .breadcrumb ul li:nth-last-child(4) span{
   display: none;
}

#expertises-single .breadcrumb ul li:nth-last-child(3) a::after,
#expertises-info .breadcrumb ul li:nth-last-child(4) a::after{
   content: "...";
}



/* ------------------------- Pagination -------------------------------------------------- */

.pagination {
   padding: 0 0 var(--section-padding) 0;
}

.pagination ul {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-top: 1px solid var(--color-border);
   margin-top: calc(var(--section-padding-small) + 1em);
   padding-top: var(--section-padding-small);
}

.pagination ul .col-prev {
   min-width: 8em;
   display: flex;
   justify-content: flex-start;
}

.pagination ul .col-next {
   min-width: 8em;
   display: flex;
   justify-content: flex-end;
}

.pagination ul .col-prev .btn-small .arrow .arrow-content {
   transform: rotate(135deg);
}

.pagination ul .col-prev .btn-small .arrow.second .arrow-fill {
   background: var(--color-primary);
   border: 0;
}

.pagination ul .col-count {
   display: flex;
   align-items: center;
   gap: 0.3em;
}

.pagination ul .col-count a {
   border-radius: 100em;
   height: 3em;
   width: 3em;
   display: flex;
   justify-content: center;
   align-items: center;
   white-space: nowrap;
   border: 1px solid var(--color-border);
}

.pagination ul .col-count a span {
   font-size: 1em;
   font-weight: 400;
   color: var(--color-text);
   margin-bottom: 0.05em;
   transition: var(--animation-primary);
}

.pagination ul .col-count a:hover span {
   opacity: 0.6;
}

.pagination ul .col-count a[aria-current] {
   background: var(--color-dark-medium);
   border: 0;
}

.pagination ul .col-count a[aria-current] span {
   color: var(--color-light);
}

@media screen and (max-width: 720px) {

   .pagination ul .col-count li:nth-last-child(1),
   .pagination ul .col-count li:nth-last-child(2) {
      display: none;
   }

   .pagination ul .col-prev {
      min-width: 2em;
   }

   .pagination ul .col-next {
      min-width: 2em;
   }

   .pagination ul .col .btn-content {
      display: none;
   }

   .pagination ul .col .arrow {
      width: 2em;
      height: 2em;
   }
}


/* ------------------------- Row Split - 2 Col 50/50 -------------------------------------------------- */

.row.split.split-50-50 {
   align-items: center;
   justify-content: space-between;
}

.row.split.split-50-50 .flex-col {
   width: calc(50% - (var(--gap-padding-big) * 0.5));
}

@media screen and (max-width: 1024px) {

   .row.split.split-50-50 {
      gap: var(--section-padding-medium);
   }

   .row.split.split-50-50 .flex-col {
      width: 100%;
   }
}

/* ------------------------- Row Split - 2 Col 70/30 -------------------------------------------------- */

.row.split.split-70-30,
.row.split.split-30-70 {
   justify-content: space-between;
}

.row.split.split-70-30 .flex-col:nth-child(1),
.row.split.split-30-70 .flex-col:nth-child(2) {
   width: calc(70% - (var(--gap-padding-big) * 0.5));
}

.row.split.split-70-30 .flex-col:nth-child(2),
.row.split.split-30-70 .flex-col:nth-child(1) {
   width: calc(30% - (var(--gap-padding-big) * 0.5));
}

@media screen and (max-width: 1024px) {

   .row.split.split-70-30 .flex-col:nth-child(1),
   .row.split.split-70-30 .flex-col:nth-child(2),
   .row.split.split-30-70 .flex-col:nth-child(1),
   .row.split.split-30-70 .flex-col:nth-child(2) {
      width: 100%;
   }

}


/* ------------------------- Slider Row - 3 Col -------------------------------------------------- */

.flickity-slider-col-3 .flex-col {
   overflow: hidden;
   border-radius: var(--border-radius-small);
}

.flickity-slider-col-3 ul {
   display: flex;
   --gap: var(--gap-padding);
   --columns: 3;
}

.flickity-slider-col-3 ul li {
   width: calc((100% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
   margin-right: var(--gap);
   flex-shrink: 0;
}

.flickity-slider-col-3 ul li:last-child {
   margin-right: 0;
}

/* Turn Flickity ON */
.flickity-slider-col-3 .flickity-carousel::after {
   content: "flickity";
   display: none;
}

/* Remove Flex from .row for Flickity */
.flickity-slider-col-3 .flickity-carousel {
   display: block;
}

.flickity-slider-col-3 .flickity-viewport {
   border-radius: var(--border-radius-medium);
   overflow: visible;
}

/* Flickity Arrows */

.flickity-slider-col-3 .btn-prev {
   position: absolute;
   left: 0;
   top: 30%;
   transform: translate(-50%, -50%) rotate(0.001deg) scale(1);
   z-index: 2;
}

.flickity-slider-col-3 .btn-prev[disabled] {
   transform: translate(-50%, -50%) rotate(0.001deg) scale(0);
}

.flickity-slider-col-3 .btn-next {
   position: absolute;
   right: 0;
   top: 30%;
   transform: translate(50%, -50%) rotate(0.001deg) scale(1);
   z-index: 2;
}

.flickity-slider-col-3 .btn-next[disabled] {
   transform: translate(50%, -50%) rotate(0.001deg) scale(0);
}

@media screen and (min-width: 1024px) {

   /* Turn Flickity OFF if 3 collection items */
   .flickity-slider-col-3:is(.count-1, .count-2, .count-3) .flickity-carousel::after {
      content: "";
      display: block;
   }

   .flickity-slider-col-3:is(.count-1, .count-2, .count-3) .flickity-carousel {
      display: flex;
   }

   .flickity-slider-col-3:is(.count-1, .count-2, .count-3) .flickity-btn-prev,
   .flickity-slider-col-3:is(.count-1, .count-2, .count-3) .flickity-btn-next {
      display: none;
   }

}


@media (min-width: 720px) and (max-width: 1024px) {
   .flickity-slider-col-3 .flex-col {
      overflow: visible;
      border-radius: unset;
   }

   .flickity-slider-col-3 ul {
      --columns: 2;
   }

   /* Turn Flickity OFF if 2 collection items */
   .flickity-slider-col-3:is(.count-1, .count-2) .flickity-carousel::after {
      content: "";
      display: block;
   }

   .flickity-slider-col-3:is(.count-1, .count-2):is(.count-1, .count-2) .flickity-carousel {
      display: flex;
   }

   .flickity-slider-col-3:is(.count-1, .count-2):is(.count-1, .count-2) .flickity-btn-prev,
   .flickity-slider-col-3:is(.count-1, .count-2):is(.count-1, .count-2):is(.count-1, .count-2) .flickity-btn-next {
      display: none;
   }
}

@media screen and (max-width: 720px) {

   .flickity-slider-col-3 .flex-col {
      overflow: visible;
      border-radius: unset;
   }
   
   .flickity-slider-col-3 ul {
      --columns: 1.05;
   }

   .flickity-slider-col-3.count-1 ul {
      --columns: 1;
   }

   .flickity-slider-col-3 .btn {
      display: none;
   }

   .flickity-slider-col-3 .btn .arrow {
      width: calc(var(--gap-padding) * 2);
      height: calc(var(--gap-padding) * 2);
   }

   .flickity-slider-col-3 .btn .arrow .arrow-content {
      width: 50%;
   }

   /* Turn Flickity OFF if 1 collection items */
   .flickity-slider-col-3.author-click .flickity-carousel::after {
      content: "";
      display: block;
   }

   .flickity-slider-col-3:is(.count-1) .flickity-carousel {
      display: flex;
   }

   .flickity-slider-col-3:is(.count-1) .flickity-btn-prev,
   .flickity-slider-col-3:is(.count-1) .flickity-btn-next {
      display: none;
   }
}

/* ------------------------- Slider Row - 3 Col -------------------------------------------------- */

.flickity-slider-col-4 .flex-col {
   overflow: hidden;
   border-radius: var(--border-radius-small);
}

.flickity-slider-col-4 ul {
   display: flex;
   --gap: var(--gap-padding);
   --columns: 4;
}

.flickity-slider-col-4 ul li {
   width: calc((100% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
   margin-right: var(--gap);
   flex-shrink: 0;
}

.flickity-slider-col-4 ul li:last-child {
   margin-right: 0;
}

/* Turn Flickity ON */
.flickity-slider-col-4 .flickity-carousel::after {
   content: "flickity";
   display: none;
}

/* Remove Flex from .row for Flickity */
.flickity-slider-col-4 .flickity-carousel {
   display: block;
}

.flickity-slider-col-4 .flickity-viewport {
   border-radius: var(--border-radius-medium);
   overflow: visible;
}

/* Flickity Arrows */

.flickity-slider-col-4 .btn-prev {
   position: absolute;
   left: 0;
   top: 50%;
   transform: translate(-50%, -50%) rotate(0.001deg) scale(1);
   z-index: 2;
}

.flickity-slider-col-4 .btn-prev[disabled] {
   transform: translate(-50%, -50%) rotate(0.001deg) scale(0);
}

.flickity-slider-col-4 .btn-next {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translate(50%, -50%) rotate(0.001deg) scale(1);
   z-index: 2;
}

.flickity-slider-col-4 .btn-next[disabled] {
   transform: translate(50%, -50%) rotate(0.001deg) scale(0);
}

@media screen and (min-width: 1240px) {

   /* Turn Flickity OFF if < 4 collection items */
   .flickity-slider-col-4:is(.count-1, .count-2, .count-3, .count-4) .flickity-carousel::after {
      content: "";
      display: block;
   }

   .flickity-slider-col-4:is(.count-1, .count-2, .count-3, .count-4) .flickity-carousel {
      display: flex;
   }

   .flickity-slider-col-4:is(.count-1, .count-2, .count-3, .count-4) .flickity-btn-prev,
   .flickity-slider-col-4:is(.count-1, .count-2, .count-3, .count-4) .flickity-btn-next {
      display: none;
   }

}

@media (min-width: 1024px) and (max-width: 1240px) {

   .flickity-slider-col-4 ul {
      --columns: 3;
   }

   /* Turn Flickity OFF if 3 collection items */
   .flickity-slider-col-4:is(.count-1, .count-2, .count-3) .flickity-carousel::after {
      content: "";
      display: block;
   }

   .flickity-slider-col-4:is(.count-1, .count-2, .count-3) .flickity-carousel {
      display: flex;
   }

   .flickity-slider-col-4:is(.count-1, .count-2, .count-3) .flickity-btn-prev,
   .flickity-slider-col-4:is(.count-1, .count-2, .count-3) .flickity-btn-next {
      display: none;
   }
}

@media (min-width: 720px) and (max-width: 1024px) {
   .flickity-slider-col-4 .flex-col {
      overflow: visible;
      border-radius: unset;
   }

   .flickity-slider-col-4 ul {
      --columns: 2.4;
   }

   /* Turn Flickity OFF if 2 collection items */
   .flickity-slider-col-4:is(.count-1, .count-2) .flickity-carousel::after {
      content: "";
      display: block;
   }

   .flickity-slider-col-4:is(.count-1, .count-2) .flickity-carousel {
      display: flex;
   }

   .flickity-slider-col-4:is(.count-1, .count-2) .flickity-btn-prev,
   .flickity-slider-col-4:is(.count-1, .count-2) .flickity-btn-next {
      display: none;
   }
}

@media screen and (max-width: 720px) {

   .flickity-slider-col-4 .flex-col {
      overflow: visible;
      border-radius: unset;
   }

   .flickity-slider-col-4 ul {
      --columns: 1.4;
   }

   .flickity-slider-col-4.count-1 ul {
      --columns: 1;
   }

   .flickity-slider-col-4 .btn {
      display: none;
   }

   .flickity-slider-col-4 .btn .arrow {
      width: calc(var(--gap-padding) * 2);
      height: calc(var(--gap-padding) * 2);
   }

   .flickity-slider-col-4 .btn .arrow .arrow-content {
      width: 50%;
   }

   /* Turn Flickity OFF if 1 collection items */
   .flickity-slider-col-4:is(.count-1) .flickity-carousel::after {
      content: "";
      display: block;
   }

   .flickity-slider-col-4:is(.count-1) .flickity-carousel {
      display: flex;
   }

   .flickity-slider-col-4:is(.count-1) .flickity-btn-prev,
   .flickity-slider-col-4:is(.count-1) .flickity-btn-next {
      display: none;
   }
}

/* ------------------------- Single Actueel Item -------------------------------------------------- */

.pendra-news-item {
   display: flex;
   flex-direction: column;
}

.pendra-news-item .col {
   display: flex;
   justify-content: space-between;
}

.pendra-news-item .col-image a {
   width: 100%;
   position: relative;
}

.pendra-news-item .col-image .image {
   position: relative;
   overflow: hidden;
   margin-bottom: 1em;
   border-radius: 0.25em;
   width: 100%;
   transform: scale(1) rotate(0.001deg);
   transition: transform var(--animation-primary);
}

.pendra-news-item .col-image .image::before {
   content: "";
   padding-top: 66.666%;
   display: block;
}

.pendra-news-item .col-image .image img.thumbnail {
   border-radius: var(--border-radius-small);
}

.pendra-news-item .col-image .image-dark {
   background: rgba(var(--color-black-rgb), 0.2);
   border-radius: var(--border-radius-small);
   opacity: 0;
   transition: opacity var(--animation-primary);
}

.pendra-news-item .col-image .no-image {
   background: var(--color-light-medium);
   border-radius: var(--border-radius-small);
   display: flex;
   align-items: center;
   justify-content: center;
}

.pendra-news-item .col-image .pendra-author {
   width: 15%;
   background: var(--color-light);
   position: absolute;
   left: 0;
   bottom: -1px;
   border-radius: 0 0.5em 0 0;
   padding: 0.5em 0.5em 0 0;
   transition: var(--animation-primary);
   opacity: 1;
   transform: translateY(100%) rotate(0.001deg);
   display: flex;
   gap: 0.5em;
   display: none;
   flex-direction: row;
}

.pendra-news-item .col-image .pendra-author.multiple {
   width: 30%;
}

.pendra-news-item .col-image .pendra-author .author-image {
   aspect-ratio: 3/4;
   width: 100%;
   position: relative;
   background: var(--color-portrait-back);
   border-radius: 0.25em;
   margin-bottom: 2px;
   overflow: hidden;
   transform: translateY(0) rotate(0.001deg);
}

.pendra-news-item .col-image .pendra-author.multiple .author-image:nth-child(3) {
   transform: translateY(50%) rotate(0.001deg);
   transition: var(--animation-primary) 0.05s;
}

.pendra-news-item .col-image .pendra-author .corner {
   position: absolute;
   width: 0.5em;
   height: 0.5em;
   display: flex;
}

.pendra-news-item .col-image .pendra-author .corner path {
   fill: var(--color-light);
}

.pendra-news-item .col-image .pendra-author .corner.left {
   top: 0;
   left: 0;
   transform: translateX(-2%) translateY(-98%) rotate(-90deg);
}

.pendra-news-item .col-image .pendra-author .corner.right {
   bottom: 0;
   right: 0;
   transform: translateX(98%) translateY(4%) rotate(-90deg);
}

.pendra-news-item .col-image .no-image span {
   font-size: 0.85em;
   color: rgba(var(--color-dark-rgb), 0.25);
}

.pendra-news-item .col-author .single-author {
   display: inline-flex;
}

.pendra-news-item .col-author .single-author .author-click {
   color: var(--color-text);
   font-size: 0.75em;
}

.pendra-news-item .col-author .single-author.multiple .author-click:nth-child(1)::after {
   content: " & ";
   margin-right: 0.2em;
}

.pendra-news-item .col-title a {
   width: 100%;
   position: relative;
   padding-top: 0.5em;
   padding-bottom: 1.5em;
}

.pendra-news-item .col-title h4 {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   line-clamp: 3;
   color: var(--color-dark);
   min-height: calc(3em * 1.2);
}

.pendra-news-item .col-tags {
   display: flex;
   align-items: center;
   position: relative;
   width: 100%;
   flex-grow: 0;
   flex-wrap: nowrap;
}

.pendra-news-item .col-tags .date {
   flex-shrink: 0;
   flex-grow: 1;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   z-index: 2;
}

.pendra-news-item .col-tags .date span {
   font-size: 0.75em;
   color: var(--color-text);
   transition: var(--animation-primary);
   opacity: 1;
   visibility: visible;
   position: relative;
}

.pendra-news-item .col-tags .tags {
   flex-wrap: nowrap;
   flex-wrap: nowrap;
   flex-shrink: 1;
   flex-grow: 0;
   width: calc(100% - 4.5em);
}

.pendra-news-item .col-tags .tags .single-tag {
   white-space: unset;
}
.pendra-news-item .col-tags .clip {
   overflow: hidden;
   flex-grow: 0;
   flex-shrink: 1;
}

.pendra-news-item .col-tags .clip span {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   width: auto;
}

.pendra-news-item .col-tags .arrow {
   position: absolute;
   right: 0;
   transition: var(--animation-primary);
   opacity: 0;
   transform: translateX(-1em) rotate(0.001deg);
}

@media (hover: hover) {
   /* Hover */

   /* Tekst blijft leesbaar op hover: iets lichter en opzij voor de pijl. */
   .pendra-news-item.hover .col-tags .date span {
      opacity: 0.5;
      transform: translateX(-2.75em) rotate(0.001deg);
   }

   .pendra-news-item.hover .col-tags .arrow {
      opacity: 1;
      transform: translateX(0em) rotate(-45deg);
   }

   .pendra-news-item.hover .col-image .image-dark {
      opacity: 1;
   }

   .pendra-news-item.hover .col-image .image {
      transform: scale(0.98) rotate(0.001deg);
   }

   .pendra-news-item .col-image .pendra-author {
      display: flex;
   }

   .pendra-news-item.hover .col-image .pendra-author {
      transform: translateY(0) rotate(0.001deg);
      opacity: 1;
   }

   .pendra-news-item.hover .col-image .pendra-author.multiple .author-image:nth-child(3) {
      transform: translateY(0) rotate(0.001deg);
      transition: var(--animation-primary) 0s;
   }
}

/* ------------------------- Single Team Item -------------------------------------------------- */

.pendra-team-item {
   display: flex;
   flex-direction: column;
   width: 100%;
   position: relative;
}

.pendra-team-item .col {
   display: flex;
}

.pendra-team-item .col-image .image {
   position: relative;
   overflow: hidden;
   margin-bottom: 1.5em;
   border-radius: 0.25em;
   transition: var(--animation-primary);
   transform: scale(1) rotate(0.001deg);
   width: 100%;
}

.pendra-team-item .col-image .image::before {
   content: "";
   display: block;
   padding-top: 133.333%;
}

.pendra-team-item .col-image .image img.thumbnail {
   border-radius: var(--border-radius-small);
}

.pendra-team-item .col-image .image-dark {
   background: rgba(var(--color-black-rgb), 0.1);
   border-radius: var(--border-radius-small);
   opacity: 0;
   transition: opacity var(--animation-primary);
}

.pendra-team-item .col-image .no-image {
   background: var(--color-portrait-back);
   border-radius: var(--border-radius-small);
   display: flex;
   align-items: center;
   justify-content: center;
}

.pendra-team-item .col-image .no-image span {
   font-size: 0.85em;
   color: rgba(var(--color-dark-rgb), 0.33);
}

.pendra-team-item .col-content {
   flex-direction: column;
   gap: 0.5em;
   position: relative;
   justify-content: center;
}

.pendra-team-item .col-content h3 span {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   line-clamp: 1;
   color: var(--color-dark);
   min-height: calc(1em * 1.2);
   font-weight: 500;
}

.pendra-team-item .col-content p {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   line-clamp: 1;
   min-height: calc(1em * 1.2);
}

.pendra-team-item .col-tags {
   display: flex;
   align-items: center;
   position: absolute;
   padding: 1em;
   bottom: 0;
   left: 0;
   width: 100%;
}

.pendra-team-item .tags {
   display: flex;
   flex-wrap: nowrap;
   flex-shrink: 1;
   flex-grow: 0;
   width: 100%;
}

.pendra-team-item .tags .single-tag {
   white-space: unset;
}

.pendra-team-item .tags .single-tag:nth-child(2) {
   overflow: hidden;
   flex-grow: 0;
   flex-shrink: 1;
}

.pendra-team-item .tags .single-tag:nth-child(2) span {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   width: auto;
}

.pendra-team-item .arrow {
   position: absolute;
   right: 0;
   transition: var(--animation-primary);
   opacity: 0;
   transform: translateX(-1em) rotate(0.001deg);
}

@media (hover: hover) {

   /* Hover */

   .pendra-team-item a:hover .arrow {
      opacity: 1;
      transform: translateX(0em) rotate(-45deg);
   }

   .pendra-team-item a:hover .col-image .image-dark {
      opacity: 1;
   }

   .pendra-team-item a:hover .col-image .image {
      transform: scale(0.98) rotate(0.001deg);
   }
}

/* ------------------------- Single Expertise Item -------------------------------------------------- */

.pendra-grid-item {
   width: 100%;
   position: relative;
}

.pendra-grid-item::before {
   content: "";
   background: var(--color-border);
   position: absolute;
   top: 0;
   left: calc(var(--gap-padding) * -1);
   width: calc(100% + (var(--gap-padding) * 2));
   height: 1px;
}

.pendra-grid-item a {
   display: flex;
   align-items: center;
   padding: var(--gap-padding) 0;
}

.pendra-grid-item .col {
   display: flex;
}

.pendra-grid-item .col-image {
   width: 30%;
   flex-shrink: 0;
   padding-right: var(--gap-padding);
}

.pendra-grid-item.small .col-image {
   width: 20%;
}

.pendra-grid-item .col-image .image {
   position: relative;
   overflow: hidden;
   border-radius: 0.25em;
   transition: var(--animation-primary);
   transform: scale(1) rotate(0.001deg);
   width: 100%;
}

.pendra-grid-item .col-image .image::before {
   content: "";
   display: block;
   padding-top: 66.666%;
}

.pendra-grid-item .col-image .image img.thumbnail {
   border-radius: var(--border-radius-small);
}

.pendra-grid-item .col-image .image-dark {
   background: rgba(var(--color-black-rgb), 0.2);
   border-radius: var(--border-radius-small);
   opacity: 0;
   transition: opacity var(--animation-primary);
}

.pendra-grid-item .col-image .no-image {
   background: var(--color-light-medium);
   border-radius: var(--border-radius-small);
   display: flex;
   align-items: center;
   justify-content: center;
}

.pendra-grid-item .col-image .no-image span {
   font-size: 0.85em;
   color: rgba(var(--color-dark-rgb), 0.33);
}

.pendra-grid-item .col-content {
   flex-direction: column;
   gap: 0.5em;
   position: relative;
   justify-content: center;
   padding: 0 var(--gap-padding);
   max-width: 40em;
   margin-right: auto;
}

.pendra-grid-item .col-content h3 span {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   line-clamp: 1;
   color: var(--color-dark);
   min-height: calc(1em * 1.4);
   font-weight: 500;
}

.pendra-grid-item .col-content p {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   font-size: 0.9em;
}

.pendra-grid-item .col-arrow {
   flex-shrink: 0;
}

.pendra-grid-item .arrow.first .arrow-fill {
   background: var(--color-secondary);
   border: 0;
}

.pendra-grid-item .arrow.second .arrow-fill {
   background: var(--color-dark-medium);
   border: 0;
}

.pendra-grid-item .arrow.second .arrow-content {
   color: var(--color-light);
}

.pendra-grid-item .arrow.first .arrow-fill {
   border: 0;
}

@media (hover: hover) {

   /* Hover */
   .pendra-grid-item a:hover .col-image .image-dark {
      opacity: 1;
   }

   .pendra-grid-item a:hover .col-image .image {
      transform: scale(0.97) rotate(0.001deg);
   }

   .pendra-grid-item a:hover .btn .arrow .arrow-content {
      transform: rotate(-45deg);
   }
   
   .pendra-grid-item a:hover .btn  .arrow.first {
      transform: scale(1) rotate(0.001deg);
   }
   
   .pendra-grid-item a:hover .btn  .arrow.second {
      transform: scale(0) rotate(0.001deg);
   }
   
   .pendra-grid-item a:hover .btn  .btn-content {
      transform: translateX(0em) rotate(0.001deg);
   }
}

@media screen and (max-width: 1024px) { 

   .pendra-grid-item.small .col-image {
      width: 30%;
   }

}

@media screen and (max-width: 720px) { 

   .pendra-grid-item a {
      padding: var(--section-padding-small) 0;
   }

   .pendra-grid-item .col-arrow {
      display: none;
   }

   .pendra-grid-item::before,
   .pendra-grid-item:last-child::after {
      left: 0;
      width: 100%;
   }

   .pendra-grid-item .col-content {
      padding: 0;
   }
   
}

@media screen and (max-width: 720px) { 
   .pendra-grid-item a {
      padding: calc(var(--gap-padding) * 2) 0;
   }

   .pendra-grid-item .col-content {
      gap: 0.3em;
   }

   .pendra-grid-item .col-content p {
      -webkit-line-clamp: 2;
      line-clamp: 2;
      min-height: calc(2em * 1.5);
      font-size: 0.85em;
      line-height: 1.5;
   }

   .pendra-grid-item .col-image {
      width: 35%;
   }
   
   .pendra-grid-item.small .col-image {
      width: 35%;
   }

   .pendra-grid-item .col-image .image::before {
      content: "";
      display: block;
      padding-top: 75%;
   }
}

/* ------------------------- Icon next Title -------------------------------------------------- */

.icon-next-title {
   display: flex;
   height: 1.75em;
   align-items: center;
   gap: 0.25em;
}

.icon-next-title span {
   color: rgba(var(--color-dark-rgb), 0.8);
   transition: var(--animation-primary);
   white-space: nowrap;
}

.icon-next-title .icon {
   width: 1.5em;
   height: 1.5em;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}

.icon-next-title .icon.outline svg {
   width: 90%;
}

.icon-with-title .icon.filled svg {
   width: 80%;
}

.icon-next-title .icon.outline path {
   stroke: rgba(var(--color-dark-rgb), 0.4);
}

.icon-next-title .icon.filled path {
   fill: rgba(var(--color-dark-rgb), 0.4);
}

/* Theme Dark */

.theme-dark .icon-next-title span {
   color: rgba(var(--color-light-rgb), 0.8);
}

.theme-dark .icon-next-title .icon.outline path {
   stroke: rgba(var(--color-light-rgb), 0.4);
}

.theme-dark .icon-next-title .icon.filled path {
   fill: rgba(var(--color-light-rgb), 0.4);
}

@media screen and (max-width: 540px){
   .icon-next-title span {
      font-size: 0.85em;
   }

}


/* ------------------------- Single Jobs Item -------------------------------------------------- */

.single-jobs-item {
   width: 100%;
   position: relative;
}

.single-jobs-item a {
   display: flex;
   align-items: center;
   padding: var(--gap-padding);
   background: var(--color-light);
   border-radius: var(--border-radius-small);
   overflow: hidden;
   gap: var(--container-padding);
}

.single-jobs-item .col-title {
   transition: var(--animation-primary);
   transform: translateX(0em) rotate(0.001deg);
}

.single-jobs-item .col-info {
   flex-shrink: 0;
   display: flex;
   gap: var(--gap-padding);
   margin-left: auto;
   min-width: 20vw;
}

.single-jobs-item .col-arrow {
   flex-shrink: 0;
}

.single-jobs-item a::before {
   content: "";
   left: 0;
   top: 0;
   height: 100%;
   width: 0.3em;
   background: var(--color-primary);
   position: absolute;
   transition: var(--animation-primary);
   transform: scaleX(0) rotate(0.001deg);
   transform-origin: left;
   border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
}

@media (hover: hover) {

   /* Hover */

   .single-jobs-item a:hover::before {
      transform: scaleX(1) rotate(0.001deg); 
   }

   .single-jobs-item a:hover .col-title {
      transform: translateX(0.3em) rotate(0.001deg);
   }

   .single-jobs-item a:hover .btn .arrow .arrow-content {
      transform: rotate(-45deg);
   }

   .single-jobs-item a:hover .btn .arrow .arrow-content {
      transform: rotate(-45deg);
   }
   
   .single-jobs-item a:hover .btn  .arrow.first {
      transform: scale(1) rotate(0.001deg);
   }
   
   .single-jobs-item a:hover .btn  .arrow.second {
      transform: scale(0) rotate(0.001deg);
   }
   
   .single-jobs-item a:hover .btn  .btn-content {
      transform: translateX(0em) rotate(0.001deg);
   }
}

@media screen and (max-width: 720px){

   .single-jobs-item .col-arrow {
      display: none;
   }

   .single-jobs-item a {
      padding: var(--section-padding-medium) var(--container-padding);
   }
}

@media screen and (max-width: 540px){
   .single-jobs-item a {
      padding: 1.5em var(--container-padding);
   }

   .single-jobs-item .col-info {
      flex-direction: column;
      gap: 0.25em;
      padding-right: var(--gap-padding);
   }
   

}

/* ------------------------- Single Author -------------------------------------------------- */

.pendra-author {
   display: flex;
   flex-direction: column;
   gap: 0.66em;
}

.pendra-author .author-single-author {
   display: flex;
   gap: 1em;
   align-items: center;
}

.pendra-author .author-single-author .author-image {
   aspect-ratio: 3/4;
   position: relative;
   width: 4em;
   background: var(--color-portrait-back);
   border-radius: 0.25em;
   overflow: hidden;
   flex-shrink: 0;
   flex-grow: 0;
   transition: var(--animation-primary);
   transform: scale(1) rotate(0.001deg);
}

.pendra-author .author-single-author .author-image .overlay-dark {
   background: rgba(var(--color-black-rgb), 0.1);
   transition: opacity var(--animation-primary);
   opacity: 0;
}

.pendra-author .author-single-author .author-content {
   width: 100%;
   transform: translateX(0em) rotate(0.001deg);
   transition: var(--animation-primary);
}

.pendra-author .author-single-author .author-content .name {
   margin-top: 0.15em;
   font-size: 1.15em;
}

.pendra-author .author-single-author .author-content .job-title {
   color: var(--color-dark-light);
   font-weight: 500;
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   line-clamp: 1;
   font-size: 0.75em;
}

/* Hover */

@media (hover: hover) { 

   .pendra-author  a.author-single-author:hover .author-image {
      transform: scale(0.98) rotate(0.001deg);
   }

   .pendra-author a.author-single-author:hover .author-image .overlay-dark {
      opacity: 1;
   }
}

/* Multiple */

.pendra-author.multiple .author-single-author .author-image {
   width: 3em;
}

.pendra-author.multiple .author-single-author .author-content .name {
   margin-top: 0.2em;
   font-size: 1.025em;
}

/* AVVR */

.pendra-author .overlay-logo {
   background: var(--color-dark-medium);
   display: flex;
   align-items: center;
   justify-content: center;
}

.pendra-author .overlay-logo svg {
   width: 80%;
}

.pendra-author .overlay-logo svg path {
   fill: var(--color-light);
}

/* ------------------------- Section Stripe -------------------------------------------------- */

.section-stripe {
   padding: 0;
}

.section-stripe .stripe.wide {
   display: flex;
   width: calc(100% + (var(--gap-padding) * 2));
   transform: translateX(calc(var(--gap-padding) * -1));
}


@media screen and (max-width: 1024px){
   .section-stripe .stripe.wide {
      width: 100%;
      transform: translateX(0);
   }
}

/* ------------------------- Styled Content -------------------------------------------------- */

.pendra-content {
   display: flex;
   flex-direction: column;
}

.pendra-content :is(h1, h2, h3, h4, h5, h6) {
   margin-bottom: 0.75em;
}

.pendra-content :is(h1, h2, h3, h4, h5, h6) strong {
   font-weight: 500;
   color: var(--color-dark);
}

.pendra-content p {
   margin-bottom: 1.6em;
}

.pendra-content strong { 
   font-weight: 600;
   color: var(--color-dark);
}

.theme-dark .pendra-content strong { 
   font-weight: 500;
   color: var(--color-light);
}

/* Links staan standaard op een donkere sectie: volle lichtkleur voor leesbaarheid
   (7.9:1 i.p.v. 1.3:1 met --color-primary), met de accentkleur als onderstreping
   zodat ze als link herkenbaar blijven. Op lichte secties (.theme-dark) keert
   dat om — daar haalt --color-primary op crème wél 6.3:1. */
.pendra-content a,
.pendra-content p a {
   color: var(--color-dark);
   text-decoration: none;
   position: relative;
   transition: color var(--animation-primary);
   font-weight: 500;
}

.pendra-content a:hover,
.pendra-content p a:hover {
   color: var(--color-secondary);
}

.theme-dark .pendra-content a,
.theme-dark .pendra-content p a {
   color: var(--color-primary);
}

.theme-dark .pendra-content a:hover,
.theme-dark .pendra-content p a:hover {
   color: var(--color-light);
}

.pendra-content a::after,
.pendra-content strong a::after,
.pendra-content p a::after {
   content: "";
   width: 100%;
   height: 1px;
   background-color: var(--color-secondary);
   bottom: -.1em;
   position: absolute;
   left: 0;
   transform: scaleX(1);
   transform-origin: right;
   transition: transform var(--animation-primary);
}

.theme-dark .pendra-content a::after,
.theme-dark .pendra-content strong a::after,
.theme-dark .pendra-content p a::after {
   background-color: var(--color-primary);
}

.pendra-content a:hover::after,
.pendra-content strong a:hover::after,
.pendra-content p a:hover::after {
   transform: scaleX(1);
   transform-origin: left;
}

.pendra-content ul {
   display: flex;
   flex-direction: column;
   gap: 0.5em;
   margin-bottom: 2em;
}

.pendra-content ul:last-child {
   margin-bottom: 0;
}

.pendra-content ul li {
   position: relative;
   padding-left: 1.83em
}

.pendra-content ul li::before {
   content: "";
   position: absolute;
   left: 0.75em;
   top: 0.8em;
   transform: translateY(-50%);
   width: 0.33em;
   height: 0.33em;
   background: var(--color-secondary);
   border-radius: 1em;
}

.theme-dark .pendra-content ul li::before {
   background: var(--color-primary);
}

/* Combinations */

.pendra-content p + :is(h1, h2, h3, h4, h5, h6) {
   margin-top: 1em;
}

.pendra-content ul + :is(h1, h2, h3, h4, h5, h6) {
   margin-top: 1em;
}

/* Style Reset */

.pendra-content a strong {
   font-weight: 500;
   color: inherit;
}

/* ------------------------- Specialisms List -------------------------------------------------- */

.specialisms-list {
   display: flex;
   padding: 1em 0;
}

.specialisms-list ul {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 0.25em;
}

.specialisms-list ul li {
   display: flex;
   width: 100%;
}

.specialisms-list ul li a {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0.4em 0;
   gap: 0.5em;
}

.specialisms-list ul li a span {
   color: rgba(var(--color-light-rgb), 0.5);
   font-size: 1em;
   transition: var(--animation-primary);
   line-height: 1.1;
}

.specialisms-list ul li a .arrow .arrow-fill {
   border: 1px solid var(--color-border-light);
   transition: var(--animation-primary);
}

.specialisms-list ul li a .arrow .arrow-content {
   color: var(--color-light)
}

.specialisms-list ul li a .arrow.first .arrow-fill {
   border: 0;
   background: var(--color-secondary);
}

@media (hover: hover) {

   /* Hover */

   .specialisms-list ul li a:hover span {
      color: var(--color-white);
   }
   .specialisms-list ul li a:hover .arrow .arrow-content {
      transform: rotate(-45deg);
   }

   .specialisms-list ul li a:hover .arrow.first {
      transform: scale(1) rotate(0.001deg);
   }

   .specialisms-list ul li a:hover .arrow.second {
      transform: scale(0) rotate(0.001deg);
   }

   .specialisms-list ul li a:hover .btn-content {
      transform: translateX(0em) rotate(0.001deg);
   }

}


/* ------------------------- Social Share -------------------------------------------------- */

.social-share ul {
   display: flex;
   gap: 0.3em;
}

.social-share ul li a {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   width: 2.75em;
   height: 2.75em;
   border-radius: 50%;
   transform: rotate(0.001deg);
   border: 1px solid var(--color-border);
}

.social-share ul li a svg {
   width: 40%;
}

.social-share ul li a svg path {
   fill: var(--color-dark-medium);
   transition: var(--animation-primary);
}

.social-share ul li a:hover svg path {
   fill: var(--color-primary);
}

/* WhatsApp Desktop & Mobile */

.social-share .share-whatsapp .single-social-share:nth-child(1) {
   display: none;
}

.social-share .share-whatsapp .single-social-share:nth-child(2) {
   display: flex;
}

@media (hover: hover) {

   /* If hover = true */
   
   .social-share .share-whatsapp .single-social-share:nth-child(1) {
      display: flex;
   }

   .social-share .share-whatsapp .single-social-share:nth-child(2) {
      display: none;
   }
   
}


@media screen and (max-width: 1024px) { 

   .social-share ul li a {
      width: 3.25em;
      height: 3.25em;
   }

}


/* ------------------------- Icon with Title -------------------------------------------------- */

.icon-with-title {
   display: flex;
   align-items: center;
   padding-bottom: 1.25em;
}

.icon-with-title svg,
.icon-with-title img {
   width: 2.25em;
}

/* ------------------------- Row USP's -------------------------------------------------- */

.row-usp {
   justify-content: space-between;
}

.row-usp {
   display: flex;
   flex-wrap: wrap;
   gap: var(--section-padding-medium) var(--gap);
   --gap: var(--gap-padding);
   --columns: 3;
}

.row-usp .flex-col {
   width: calc((100% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
}

.row-usp .flex-col .content {
   padding-top: 1em;
}

@media screen and (max-width: 1024px){
   .row-usp {
      --columns: 2;
   }
}

@media screen and (max-width: 720px){
   .row-usp {
      --columns: 1;
   }
}


/* ------------------------- Default Header -------------------------------------------------- */

.default-header h1[lang] {
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}

.default-header h1 + p {
   margin-top: 2em;
}


/* Center */

.default-header.center .breadcrumb {
   display: flex;
   justify-content: center;
}

.default-header.center h1,
.default-header.center p {
   text-align: center;
}

.default-header.center .flex-col {
   display: flex;
   flex-direction: column;
   align-items: center;
}


/* Line Decoration */

.pendra-deco {
   position: absolute;
   aspect-ratio: 14/44;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   pointer-events: none;
}

/* Line Decoration */

.default-header .pendra-deco {
   right: calc(var(--container-padding) + 5vw);
   bottom: 0;
   height: calc(100% + 6em);
}

.pendra-deco .line {
   height: 101.5%;
   width: 1px;
   background: var(--color-border);
   position: absolute;
   transform: rotate(-9deg);
}

.pendra-deco .line:nth-child(1) {
   left: 74.5%;
}

.pendra-deco .line:nth-child(2) {
   left: 24.5%;
}

.pendra-deco .line:nth-child(3) {
   transform: rotate(9deg);
   left: 74.5%;
}

/* Theme Dark */

.theme-dark .pendra-deco .line,
.theme-dark-medium .pendra-deco .line {
   background: var(--color-border-light);
}

/* Line Decoration - Variations */

.pendra-deco.flip-x {
   transform: scaleX(-1);
}

.pendra-deco.flip-y {
   transform: scaleY(-1);
}

.pendra-deco.flip-both {
   transform: scale(-1);
}

@media screen and (max-width: 1024px) { 

   .default-header .pendra-deco {
      display: none;
   }

}

/* ------------------------- Big Image 50/50 -------------------------------------------------- */

.section-big-image-50-50 {
   overflow: hidden;
}

.section-big-image-50-50 .container {
   padding-bottom: calc((var(--border-radius-medium) * 2) + 4px);
}

.section-big-image-50-50 + .section,
.section-big-image-50-50 + .section-wrap {
   margin-top: calc((var(--border-radius-medium) * -2) - 4px);
}

.section-big-image-50-50 .thumbnail {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
}

@media (hover: hover) {
   /* Loco Styling */
   .section-big-image-50-50 .thumbnail img {
      width: 100%;
      height: calc(100% + 20vh);
      top: -10vh;
   }
}

.section-big-image-50-50 .dark-overlay {
   background: var(--color-black);
}

.section-big-image-50-50 .row {
   align-items: center;
   justify-content: flex-start
}

.section-big-image-50-50 .row.flip {
   justify-content: flex-end;
}

.section-big-image-50-50 .row .flex-col {
   width: calc(50% - (var(--gap-padding-big) * 0.5));
}

/* De kaart stond op --color-dark-medium, exact de kleur die .theme-dark aan
   .btn-fill geeft: de knop viel daardoor weg tegen zijn eigen achtergrond. Nu
   --color-dark, dezelfde creme als een gewone lichte sectie, zodat de knop hier
   de standaard grijze pil kan zijn net als in de hero. */
.section-big-image-50-50 .content-block {
   background: var(--color-dark);
   border-radius: var(--border-radius-small);
   padding: var(--section-padding-medium) var(--gap-padding) var(--section-padding-medium) var(--gap-padding);
   display: flex;
   align-items: center;
   flex-direction: column;
   text-align: center;
}

/* Het icoon had een vaste stroke van #F5F2EF: bijna wit op de crème kaart, dus
   praktisch onzichtbaar. De SVG gebruikt nu currentColor en erft hier de
   tekstkleur van de kaart. */
.section-big-image-50-50 .icon-with-title {
   color: var(--color-light);
}

.section-big-image-50-50 .pendra-content {
   padding-top: 1.25em;
}

.section-big-image-50-50 .pendra-content p {
   color: rgba(var(--color-light-rgb), 0.8);
}

.section-big-image-50-50 .btn-row {
   justify-content: center;
   padding-top: 2em;
}

/* Pijlcirkels gelijk aan de hero-knop (zie .home-header in style.css): geel in
   rust, crème met donkere pijl op hover. */
.section-big-image-50-50 .btn-row .arrow.second .arrow-fill {
   background: var(--color-secondary);
}

.section-big-image-50-50 .btn-row .arrow.first .arrow-fill {
   background: var(--color-light);
}

.section-big-image-50-50 .btn-row .arrow.first .arrow-content {
   color: var(--color-dark-medium);
}

@media screen and (max-width: 1024px) {

   .section-big-image-50-50 .row .flex-col {
      width: unset;
      max-width: 28em;
   }
}

@media screen and (max-width: 720px) {
   .section-big-image-50-50 .row,
   .section-big-image-50-50 .row.flip {
      justify-content: center;
      padding: 5vh 0;
   }
}

/* ------------------------- Half Image 50/50 -------------------------------------------------- */

.section-half-image-50-50 {
   overflow: hidden;
   padding-top: calc(var(--section-padding) * 1.25);
   padding-bottom: calc(var(--section-padding) * 1.25);
}

.section-half-image-50-50 .thumbnail {
   position: absolute;
   bottom: 0;
   right: 0;
   height: 100%;
   width: 50%;
   overflow: hidden;
}

@media (hover: hover) {
   /* Loco Styling */
   .section-half-image-50-50 .thumbnail img {
      width: 100%;
      height: calc(100% + 20vh);
      top: -10vh;
   }
}

.section-half-image-50-50 .row {
   align-items: center;
   justify-content: flex-start
}

.section-half-image-50-50 .row .flex-col {
   width: calc(50% - (var(--gap-padding-big) * 0.5));
}

.section-half-image-50-50 .content-block {
   padding-right: calc(var(--gap-padding-big) * 0.5);
   display: flex;
   flex-direction: column;
}

.section-half-image-50-50 .pendra-content {
   padding-top: 1.75em;
}

.section-half-image-50-50 .pendra-content p {
   color: rgba(var(--color-light-rgb), 0.8);
}

.section-half-image-50-50 .btn-row {
   padding-top: 2em;
}

.section-half-image-50-50 .btn-row .arrow.second .arrow-fill {
   background: var(--color-secondary);
}

.section-half-image-50-50 .btn-row .arrow.first .arrow-fill {
   background: var(--color-primary);
}

.section-half-image-50-50 .btn-row .btn-content .btn-fill {
   background: var(--color-light);
}

.section-half-image-50-50 .btn-row .btn-content .btn-text {
   color: var(--color-dark-medium);
}

.section-half-image-50-50 .pendra-deco {
   top: 0;
   left: 50%;
   transform: translateX(-50%) scaleX(-1);
}

.section-half-image-50-50 .pendra-deco .line {
   background: var(--color-dark-medium);
   background: rgba(var(--color-light-rgb), 0.2);
}


@media screen and (max-width: 1024px) {

   .section-half-image-50-50 {
      padding-top: 0;
      padding-bottom: var(--section-padding);
   }

   .section-half-image-50-50 .row {
      justify-content: center;
      padding-top: var(--section-padding);
   }

   .section-half-image-50-50 .row .flex-col {
      width: 100%;
      max-width: 36em;
   }

   .section-half-image-50-50 .content-block {
      padding: 0;
   }

   .section-half-image-50-50 .thumbnail {
      position: relative;
      width: 100%;
      aspect-ratio: 3/2;
      border-radius: var(--border-radius-medium);
   }

   .section-half-image-50-50 .pendra-deco {
     display: none;
   }


}


/* ------------------------- Swiper Slider -------------------------------------------------- */

.swiper-container {
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   position: relative;
   flex-grow: 1;
   width: 100%;
}

.swiper-wrapper {
   flex-grow: 1;
	position: relative;
	width: 100%;
   -webkit-transform-style: preserve-3d;
   transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
   -webkit-backface-visibility: hidden; 
   -webkit-transform: translateZ(0);
}

.swiper-slide {
   position: relative;
   -webkit-backface-visibility: hidden; 
   -webkit-transform: translateZ(0);
}

/*--- Progress Bar ---*/

.swiper-container .swiper-pagination {
   position: relative;
   width: 100%;
   display: flex;
   bottom: unset;
   left: unset;
   gap: 0.5em;
}

.swiper-container .swiper-pagination-bullet {
   height: 1em;
   position: relative;
   border-radius: 0;
   margin: unset;
   width: 100%;
   background-color: transparent;
   display: flex;
   opacity: 1;
   flex-direction: column;
   justify-content: center;
}

.swiper-container .swiper-pagination-bullet::before {
   content: "";
   width: 100%;
   height: 1px;
   background-color: var(--color-dark);
   opacity: .4;
   position: absolute;
}
 
.swiper-container .progress {
   height: 2px;
   position: absolute;
   width: 100%;
   background-color: var(--color-dark);
   transform: scaleX(0);
   transform-origin: left top;
   opacity: 0;
   transition: opacity .3s ease-in-out;
}

.swiper-container .swiper-pagination-bullet-active .progress {
   opacity: 1;
}


/*--- Progress Bar - Dark ---*/

.theme-dark .swiper-container .swiper-pagination-bullet::before {
   background-color: var(--color-white);
}

.theme-dark .swiper-container .progress {
   background-color: var(--color-light);
}

/* ------------------------- Single Block -------------------------------------------------- */

.single-block {
   position: relative;
   width: 100%;
}

.single-block .image {
   position: relative;
   overflow: hidden;
   border-radius: 0.25em;
   transition: var(--animation-primary);
   transform: scale(1) rotate(0.001deg);
   width: 100%;
}

.single-block .image::before {
   content: "";
   display: block;
   padding-top: 66.666%;
}

.single-block .image img.thumbnail {
   border-radius: var(--border-radius-small);
}

.single-block .no-image {
   background: var(--color-light-medium);
   border-radius: var(--border-radius-small);
   display: flex;
   align-items: center;
   justify-content: center;
}

.single-block .no-image span {
   font-size: 0.85em;
   color: rgba(var(--color-dark-rgb), 0.33);
}

.single-block.hidden_true {
   width: 0px;
   height: 0px;
   padding: 0;
   overflow: hidden;
}

/* ------------------------- Filmpopup + Bunny HLS-speler -------------------------
   Speler naar Osmo's "Custom Bunny HLS Player (Advanced)", aangepast:
   accentkleur van de site, 16:9-kader, echte knoppen. De popup opent
   via [data-film-popup-open] (zie assets/js/film-popup.js). */

.pendra-video-popup-btn {
   appearance: none;
   border: 0;
   padding: 0;
   background: none;
   cursor: pointer;
   width: 100%;
   text-align: inherit;
   font: inherit;
   color: inherit;
}

.film-popup {
   position: fixed;
   inset: 0;
   z-index: 2000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: min(2em, 4vw);
}

.film-popup[hidden] {
   display: none;
}

html.film-popup-open,
html.film-popup-open body {
   overflow: hidden;
}

.film-popup__backdrop {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.85);
}

.film-popup__inner {
   position: relative;
   width: min(92vw, calc(82vh * 16 / 9), 1400px);
}

.film-popup__close {
   appearance: none;
   border: 0;
   padding: 0;
   cursor: pointer;
   position: absolute;
   right: 0;
   top: -3em;
   width: 2.25em;
   height: 2.25em;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(100, 100, 100, 0.2);
   color: #fff;
   z-index: 1;
}

.film-popup__close svg {
   width: 1.1em;
   height: 1.1em;
}

.film-popup__close:hover {
   background: rgba(100, 100, 100, 0.4);
}

.bunny-player {
   pointer-events: none;
   color: #fff;
   isolation: isolate;
   border-radius: 0.5em;
   justify-content: center;
   align-items: center;
   width: 100%;
   display: flex;
   position: relative;
   overflow: hidden;
   transform: translateX(0);
}

.bunny-player__before {
   padding-top: 56.25%;
}

[data-bunny-player-init] :is(.bunny-player__placeholder, .bunny-player__dark, .bunny-player__playpause, .bunny-player__loading) {
   transition: opacity 0.3s linear, visibility 0.3s linear;
}

.bunny-player__placeholder {
   object-fit: cover;
   width: 100%;
   height: 100%;
   position: absolute;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__placeholder,
[data-bunny-player-init][data-player-status="paused"] .bunny-player__placeholder,
[data-bunny-player-init][data-player-activated="true"][data-player-status="ready"] .bunny-player__placeholder {
   opacity: 0;
   visibility: hidden;
}

.bunny-player__dark {
   opacity: .1;
   background-color: #000;
   width: 100%;
   height: 100%;
   position: absolute;
}

[data-bunny-player-init][data-player-status="paused"] .bunny-player__dark,
[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__dark {
   opacity: 0.3;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__dark {
   opacity: 0;
}

.bunny-player__video {
   width: 100%;
   height: 100%;
   padding-bottom: 0;
   padding-right: 0;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
}

.bunny-player__playpause {
   pointer-events: auto;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   display: flex;
   position: absolute;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__playpause,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__playpause {
   opacity: 0;
}

[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__playpause {
   opacity: 1;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__play-svg,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__play-svg {
   display: none;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__pause-svg,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__pause-svg {
   display: block;
}

.bunny-player__loading {
   opacity: 0;
   visibility: hidden;
   background-color: #00000054;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   display: flex;
   position: absolute;
}

[data-bunny-player-init][data-player-status="loading"] .bunny-player__loading {
   opacity: 1;
   visibility: visible;
}

.bunny-player__interface {
   flex-flow: column;
   justify-content: flex-end;
   align-items: baseline;
   width: 100%;
   height: 100%;
   display: flex;
   position: absolute;
   transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__interface,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__interface {
   opacity: 0;
   transform: translateY(1em) rotate(0.001deg);
}

[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__interface,
[data-bunny-player-init][data-player-status="loading"][data-player-hover="active"] .bunny-player__interface {
   opacity: 1;
   transform: translateY(0em) rotate(0.001deg);
}

.bunny-player__interface-bottom {
   grid-column-gap: 1em;
   grid-row-gap: 1em;
   pointer-events: auto;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   padding: min(2em, 4vw);
   display: flex;
   position: relative;
}

.bunny-player__toggle-mute,
.bunny-player__toggle-fullscreen {
   appearance: none;
   border: 0;
   padding: 0;
   background: none;
   color: inherit;
   cursor: pointer;
   width: 1.5em;
   height: 1.5em;
}

.bunny-player__timeline {
   cursor: pointer;
   flex: 1;
   align-items: center;
   height: 1em;
   margin-left: .5em;
   margin-right: .5em;
   display: flex;
   position: relative;
}

[data-bunny-player-init][data-player-status="idle"][data-player-activated="false"] .bunny-player__timeline,
[data-bunny-player-init][data-player-status="ready"][data-player-activated="false"] .bunny-player__timeline {
   pointer-events: none;
}

.bunny-player__timeline-progress {
   pointer-events: none;
   background-color: var(--color-secondary);
   border-radius: 1em;
   width: 100%;
   height: 100%;
   position: absolute;
   transform: translateX(-100%);
}

.bunny-player__timeline-buffered {
   opacity: .2;
   pointer-events: none;
   background-color: #fff;
   border-radius: 1em;
   width: 100%;
   height: 100%;
   position: absolute;
   transform: translateX(-100%);
}

.bunny-player__timeline-handle {
   transition: transform 0.15s ease-in-out;
   pointer-events: none;
   background-color: var(--color-secondary);
   border-radius: 1em;
   width: 1em;
   height: 1em;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%) scale(0);
}

[data-bunny-player-init][data-timeline-drag="true"] .bunny-player__timeline-handle {
   transform: translate(-50%, -50%) scale(1);
}

.bunny-player__timeline-bar {
   border-radius: 1em;
   width: 100%;
   height: 30%;
   position: absolute;
   overflow: hidden;
}

.bunny-player__time {
   grid-column-gap: .125em;
   grid-row-gap: .125em;
   flex: none;
   justify-content: center;
   align-items: center;
   width: 5.75em;
   display: flex;
}

.bunny-player__timeline-bg {
   background-color: #ffffff26;
   border-radius: 1em;
   width: 100%;
   height: 100%;
   position: absolute;
}

.bunny-player__toggle-playpause {
   appearance: none;
   border: 0;
   padding: 0;
   background: none;
   color: inherit;
   cursor: pointer;
   width: 1.5em;
   height: 1.5em;
}

.bunny-player__text {
   white-space: nowrap;
   margin-bottom: 0;
   font-size: .9375em;
   line-height: 1;
}

.bunny-player__big-btn {
   appearance: none;
   border: 0;
   color: inherit;
   -webkit-backdrop-filter: blur(1em);
   backdrop-filter: blur(1em);
   cursor: pointer;
   background-color: #64646433;
   border: 1px solid #ffffff1a;
   border-radius: 50%;
   justify-content: center;
   align-items: center;
   width: 6em;
   height: 6em;
   padding: 2em;
   display: flex;
   position: relative;
}

.bunny-player__loading-svg {
   width: 6em;
}

.bunny-player__pause-svg {
   display: none;
}

.bunny-player__interface-fade {
   opacity: .5;
   background-image: linear-gradient(#0000, #000);
   width: 100%;
   height: 25%;
   position: absolute;
   bottom: 0;
}

.bunny-player__interface-btns {
   grid-column-gap: .5em;
   grid-row-gap: .5em;
   align-items: center;
   display: flex;
}

[data-bunny-player-init][data-player-muted="true"] .bunny-player__volume-mute-svg {
   display: block;
}

[data-bunny-player-init][data-player-muted="true"] .bunny-player__volume-up-svg {
   display: none;
}

.bunny-player__volume-mute-svg {
   display: none;
}

.bunny-player__volume-up-svg {
   display: block;
}

.bunny-player__fullscreen-shrink-svg {
   display: none;
}

.bunny-player__fullscreen-scale-svg {
   display: block;
}

[data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-shrink-svg {
   display: block;
}

[data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-scale-svg {
   display: none;
}

html.pendra-rustig .bunny-player__interface,
html.pendra-rustig [data-bunny-player-init] :is(.bunny-player__placeholder, .bunny-player__dark, .bunny-player__playpause, .bunny-player__loading),
html.pendra-rustig .bunny-player__timeline-handle {
   transition: none;
}

/* De footerzin "Samen met de gemeente Heerlen / werken aan een toegankelijke
   stad" breekt alleen op desktop bewust af; op mobiel loopt hij gewoon door. */
@media screen and (max-width: 720px) {
   .pendra-br-desktop {
      display: none;
   }
}

/* De samengevoegde footerzin heeft twee regels in een item dat op een vaste
   hoogte van 1.75em rekent, en de spans staan op nowrap. Hier dus: hoogte
   loslaten, regelhoogte gelijk aan het ritme van de losse items, en gewoon
   laten afbreken. Geldt op beide plekken waar de zin staat: de sitefooter
   en het contactblok op de meldpagina. */
.footer .footer-top ul li .footer-item.footer-item-zin,
.contact-header li .footer-item.footer-item-zin {
   height: auto;
   min-height: 1.75em;
}

.footer .footer-top ul li .footer-item.footer-item-zin span,
.contact-header li .footer-item.footer-item-zin span {
   white-space: normal;
   line-height: 1.75em;
}

/* Introregel op de kaarten in "Meer berichten" en "Bekijk ook de andere
   rollen": maximaal twee regels, daarna netjes afgekapt. De obstakelslider
   (pendra-kaart-slider) heeft zijn eigen intro-opmaak en blijft erbuiten.

   Zelfde hoogtetruc als de obstakelkaarten: vaste zones voor titel (2 regels)
   en intro (2 regels), zodat de tagregels van alle kaarten gelijk staan en de
   intro direct onder de kop valt in plaats van onder de gereserveerde ruimte.

   Gescoped op :has(> .col-intro), niet op de sectie: de homepage-nieuwsslider
   deelt de sectieklasse maar heeft geen intro, en hoort zijn oorspronkelijke
   ruime maat (3 regels titel, 1.5em naar de tags) te houden. */
.actueel-slider:not(.pendra-kaart-slider) .pendra-news-item:has(> .col-intro) .col-title a {
   padding-bottom: 0.4em;
}

.actueel-slider:not(.pendra-kaart-slider) .pendra-news-item:has(> .col-intro) .col-title h4 {
   min-height: calc(2em * 1.2);
   -webkit-line-clamp: 2;
   line-clamp: 2;
}

.actueel-slider:not(.pendra-kaart-slider) .pendra-news-item .col-intro p {
   font-size: 0.85em;
   line-height: 1.55;
   color: var(--color-text);
   margin: 0;
   min-height: calc(2em * 1.55);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.actueel-slider:not(.pendra-kaart-slider) .pendra-news-item .col-intro + .col-tags {
   margin-top: 1em;
}

/* Obstakelkaarten: de hele kaart is het klikvlak. De titel-link krijgt een
   onzichtbaar vlak over de kaart (alle links erin gaan toch naar /melding). */
.pendra-kaart-slider .pendra-news-item {
   position: relative;
}

.pendra-kaart-slider .pendra-news-item .col-title a::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
}

/* De hoverpijl op de creme obstakelkaart: de generieke borderpijl kleurt
   creme (bedoeld voor de donkere secties) en viel op de kaart weg tegen de
   achtergrond. Binnen de kaart dus donkergroen, met een zichtbare rand. */
.pendra-kaart-slider .pendra-news-item .col-tags .arrow.border .arrow-content {
   color: var(--color-light);
}

.pendra-kaart-slider .pendra-news-item .col-tags .arrow.border .arrow-fill {
   border-color: rgba(var(--color-light-rgb), 0.25);
}