.announcements {
  --ann-dark:#0d1215;
  --ann-panel:#151c20;
  --ann-text:#f5f7f7;
  --ann-muted:#aeb8bd;
  --ann-line:rgba(255,255,255,.16);
  width:100%;
  max-width:var(--ann-wrapper-width,1200px);
  margin-inline:auto;
  color:var(--ann-text)
}

.announcements * {
  box-sizing:border-box
}

.announcements-overview__grid {
  display:grid;
  grid-template-columns:repeat(var(--ann-overview-columns,3),minmax(0,1fr));
  gap:clamp(18px,3vw,36px)
}

.announcement-card {
  display:flex;
  min-width:0;
  flex-direction:column;
  overflow:hidden;
  background:var(--ann-overview-bg,var(--ann-panel));
  border-color:var(--ann-overview-border-color,var(--ann-line));
  border-style:solid;
  border-width:var(--ann-overview-border-width,1px);
  box-shadow:var(--ann-item-shadow,none)
}

.announcement-card__image,
.announcement-detail__image {
  position:relative;
  z-index:1;
  margin:0;
  overflow:hidden;
  border-radius:var(--ann-image-radius,0);
  background:var(--ann-image-bg,#101518);
  box-shadow:var(--ann-image-shadow,none)
}

.announcement-card__image img,
.announcement-detail__image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}

.announcement-card__body {
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  padding:var(--ann-card-body-padding,clamp(18px,2.6vw,30px))
}

.announcements--image-bottom .announcement-card {
  flex-direction:column-reverse
}

.announcements--image-left .announcement-card,
.announcements--image-alternate_lr .announcement-card:nth-child(odd),
.announcements--image-alternate_rl .announcement-card:nth-child(even) {
  flex-direction:row
}

.announcements--image-right .announcement-card,
.announcements--image-alternate_lr .announcement-card:nth-child(even),
.announcements--image-alternate_rl .announcement-card:nth-child(odd) {
  flex-direction:row-reverse
}

.announcements--image-left .announcement-card__image,
.announcements--image-right .announcement-card__image,
.announcements--image-alternate_lr .announcement-card__image,
.announcements--image-alternate_rl .announcement-card__image {
  flex:0 0 var(--ann-overview-image-width,42%);
  width:var(--ann-overview-image-width,42%);
  max-width:calc(100% - 96px)
}

.announcement-card__date,
.announcement-detail__date {
  margin-bottom:9px;
  color:var(--ann-muted);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase
}

.announcement-card__title,
.announcement-detail__title {
  margin:0;
  font-family:"Close and Open",Arial,sans-serif;
  line-height:1.06;
  letter-spacing:.04em
}

.announcements:not(.announcements--template-title) .announcement-card__title,
.announcements:not(.announcements--template-title) .announcement-detail__title {
  color:var(--ann-title-color)
}

.announcement-card__title {
  font-size:clamp(1.4rem,2.5vw,2rem)
}

.announcement-card__title a {
  color:inherit;
  text-decoration:none
}

.announcements:not(.announcements--template-title) .announcement-card__title a:hover {
  color:var(--ann-accent,var(--ann-button-bg))
}

.announcement-card__date:empty,
.announcement-detail__date:empty {
  display:none
}

.announcement-card__subtitle,
.announcement-detail__subtitle {
  margin-top:8px;
  font-size:1.05rem
}

.announcements:not(.announcements--template-subtitle) .announcement-card__subtitle,
.announcements:not(.announcements--template-subtitle) .announcement-detail__subtitle {
  color:var(--ann-subtitle-color)
}

.announcement-card__summary {
  margin:18px 0;
  color:var(--ann-muted);
  line-height:1.6
}

.announcement-event-date {
  margin-top:15px;
  font-weight:700
}
.announcements--template-subtitle .announcement-card__subtitle,
.announcements--template-subtitle .announcement-detail__subtitle {
  color:var(--ppmh-blue,inherit)
}
.announcement-event-date__end {
  display:block;
  margin-top:7px;
  color:var(--ann-muted);
  font-size:.82rem;
  font-weight:600
}

.announcement-button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  margin-top:auto;
  padding:10px 16px;
  background:var(--ann-button-bg);
  border:0;
  border-radius:var(--ann-button-radius);
  color:var(--ann-button-text)!important;
  font-weight:700;
  text-decoration:none!important;
  transition:background .18s ease,color .18s ease
}

.announcements--button-left .announcement-button {
  margin-right:auto;
  margin-left:0
}

.announcements--button-center .announcement-button {
  margin-right:auto;
  margin-left:auto
}

.announcements--button-right .announcement-button {
  margin-right:0;
  margin-left:auto
}

.announcement-button:hover,
.announcement-button:focus {
  background:var(--ann-button-hover-bg);
  color:var(--ann-button-hover-text)!important
}

.announcement-detail {
  overflow:hidden;
  background:var(--ann-detail-bg,var(--ann-panel));
  border-color:var(--ann-detail-border-color,var(--ann-line));
  border-style:solid;
  border-width:var(--ann-detail-border-width,1px);
  box-shadow:var(--ann-item-shadow,none)
}

.announcement-detail__image {
  width:100%
}

.announcement-detail__body {
  padding:clamp(22px,5vw,64px)
}

.announcement-detail__title {
  font-size:clamp(2rem,5vw,4rem)
}

.announcement-detail__content {
  margin:30px 0;
  line-height:1.7
}

.announcement-detail__content> :first-child {
  margin-top:0
}

/* De gekozen cropverhouding bepaalt altijd het zichtbare beeldvak. */
.announcement-card__image {
  flex: none;
  align-self: flex-start;
  width: var(--ann-overview-image-width, 100%);
  max-width: 100%;
}

.announcement-detail__image {
  flex: none;
  align-self: flex-start;
  width: 100%;
}

.announcement-card__image img,
.announcement-detail__image img {
  position: absolute;
  inset: 0;
}

/* Geef een afbeeldingsschaduw ruimte en laat hem buiten de kaart doorlopen. */
.announcements.has-image-shadow .announcement-card,
.announcements.has-image-shadow .announcement-detail {
  overflow: visible;
}

.announcements.has-image-shadow .announcement-card__image,
.announcements.has-image-shadow .announcement-detail__image {
  margin-top: 16px;
  margin-bottom: 16px;
}

/* Grafische publicatiedatum. */
.announcement-calendar {
  display: inline-grid;
  width: 76px;
  overflow: hidden;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .2);
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.announcement-calendar__day {
  padding: 10px 6px 8px;
  font-size: 28px;
  font-weight: 800;
}

.announcement-calendar__month {
  padding: 7px 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.announcement-calendar--1 {
  border-radius: 12px;
}

.announcement-calendar--1 .announcement-calendar__day,
.announcement-calendar--2 .announcement-calendar__day {
  background: #e5483f;
  color: #fff;
}

.announcement-calendar--1 .announcement-calendar__month,
.announcement-calendar--2 .announcement-calendar__month {
  background: #fff;
  color: #b52b24;
}

.announcement-calendar--3 {
  border: 1px solid #111;
  border-radius: 8px;
}

.announcement-calendar--3 .announcement-calendar__day {
  background: #111;
  color: #fff;
}

.announcement-calendar--3 .announcement-calendar__month {
  background: #fff;
  color: #111;
}

.announcement-calendar--4 {
  border-radius: 10px;
}

.announcement-calendar--4 .announcement-calendar__day {
  background: var(--ann-calendar-top-bg);
  color: var(--ann-calendar-top-text);
}

.announcement-calendar--4 .announcement-calendar__month {
  background: var(--ann-calendar-bottom-bg);
  color: var(--ann-calendar-bottom-text);
}

.announcements-pagination {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
  margin-top:34px
}

.announcements-pagination a,
.announcements-pagination span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:4px 8px;
  border:1px solid var(--ann-line);
  color:var(--ann-text);
  text-decoration:none
}

.announcements-pagination span,
.announcements-pagination a:hover {
  background:var(--ann-accent,var(--ann-button-bg));
  border-color:var(--ann-accent,var(--ann-button-bg))
}

@media(max-width:900px) {
  .announcements-overview__grid {
    grid-template-columns:repeat(var(--ann-tablet-columns,2),minmax(0,1fr))
  }
}

@media(max-width:700px) {
  .announcements--image-left .announcement-card,
  .announcements--image-right .announcement-card,
  .announcements--image-alternate_lr .announcement-card:nth-child(odd),
  .announcements--image-alternate_lr .announcement-card:nth-child(even),
  .announcements--image-alternate_rl .announcement-card:nth-child(odd),
  .announcements--image-alternate_rl .announcement-card:nth-child(even) {
    flex-direction:column
  }

  .announcements--image-left .announcement-card__image,
  .announcements--image-right .announcement-card__image,
  .announcements--image-alternate_lr .announcement-card__image,
  .announcements--image-alternate_rl .announcement-card__image {
    flex-basis:auto;
    width:var(--ann-overview-image-width,100%);
    max-width:100%
  }
}

@media(max-width:580px) {
  .announcements-overview__grid {
    grid-template-columns:1fr
  }
}

/* Presets voor berichten en agenda's */
.ann-preset--event-agenda .announcements-overview__grid,
.ann-preset--announcement-1 .announcements-overview__grid,
.ann-preset--announcement-2 .announcements-overview__grid,
.ann-preset--coming-soon .announcements-overview__grid {
  grid-template-columns:1fr
}

.announcement-card--event,
.announcement-card--notice,
.announcement-card--soon {
  overflow:visible
}

.announcement-card--event .announcement-card__body,
.announcement-card--notice .announcement-card__body,
.announcement-card--soon .announcement-card__body {
  display:block
}

.announcement-card__date--event {
  width:max-content;
  max-width:100%;
  margin:0 0 16px;
  padding:0;
  border:0;
  background:transparent
}

.announcement-card__date--event:has(> .announcement-calendar) {
  float:left;
  margin:0 18px 12px 0
}

.announcement-card--event .announcement-card__body::after,
.announcement-card--notice .announcement-card__body::after,
.announcement-card--soon .announcement-card__body::after {
  display:block;
  clear:both;
  content:""
}

.announcement-card--event .announcement-button,
.announcement-card--notice .announcement-button,
.announcement-card--soon .announcement-button {
  clear:both;
  margin-top:18px
}

.announcement-card__eyebrow {
  margin:0 0 8px;
  color:var(--ann-accent);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase
}

.announcements--preset-news .announcement-card--news {
  border-top:4px solid var(--ann-accent)
}

/* Maandlijsten en volledige kalender */
.ann-month {
  margin-top:24px
}

.ann-month__header {
  display:grid;
  grid-template-columns:48px 1fr 48px;
  align-items:center;
  gap:12px;
  margin-bottom:18px
}

.ann-month__header h2 {
  margin:0;
  text-align:center
}

.announcements:not(.announcements--template-title) .ann-month__header h2 {
  color:var(--ann-title-color)
}

.ann-month__header a {
  display:flex;
  align-items:center;
  justify-content:center;
  height:42px;
  border:1px solid var(--ann-overview-border-color,var(--ann-line));
  color:var(--ann-text)!important;
  font-size:28px;
  text-decoration:none!important
}

.ann-month-list {
  display:grid;
  gap:7px
}

.ann-month-list__day {
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  min-height:82px;
  border:var(--ann-overview-border-width,1px) solid var(--ann-overview-border-color,var(--ann-line));
  background:var(--ann-overview-bg,var(--ann-panel))
}

.ann-month-list__date {
  display:grid;
  grid-template-columns:auto 1fr;
  align-content:center;
  padding:13px;
  border-right:1px solid var(--ann-overview-border-color,var(--ann-line));
  text-transform:uppercase
}

.ann-month-list__date strong {
  grid-row:1/3;
  margin-right:8px;
  font-size:30px
}

.ann-month-list__date span,.ann-month-list__date small {
  font-size:11px;
  font-weight:800
}

.ann-month-list__events {
  display:grid;
  gap:8px;
  padding:10px
}

.ann-month-list__empty {
  align-self:center;
  color:var(--ann-muted)
}

.ann-month-grid {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  border-top:1px solid var(--ann-overview-border-color,var(--ann-line));
  border-left:1px solid var(--ann-overview-border-color,var(--ann-line))
}

.ann-month-grid__weekday {
  padding:10px;
  border-right:1px solid var(--ann-overview-border-color,var(--ann-line));
  border-bottom:1px solid var(--ann-overview-border-color,var(--ann-line));
  color:var(--ann-muted);
  font-size:12px;
  font-weight:800;
  text-align:center;
  text-transform:uppercase
}

.ann-month-day {
  min-width:0;
  min-height:150px;
  padding:9px;
  border-right:1px solid var(--ann-overview-border-color,var(--ann-line));
  border-bottom:1px solid var(--ann-overview-border-color,var(--ann-line));
  background:var(--ann-overview-bg,var(--ann-panel))
}

.ann-month-day.is-outside {
  background:color-mix(in srgb,var(--ann-overview-bg) 60%,transparent)
}

.ann-month-day h3 {
  margin:0 0 9px;
  font-size:14px
}

.announcements:not(.announcements--template-title) .ann-month-day h3 {
  color:var(--ann-title-color)
}

.ann-month-event {
  display:flex;
  min-width:0;
  gap:9px;
  align-items:center;
  padding:8px 0;
  border:0;
  background:transparent
}

.ann-month-event+.ann-month-event {
  margin-top:7px
}

.ann-month-event__image {
  flex:0 0 58px;
  width:58px;
  margin:0;
  overflow:hidden;
  border-radius:var(--ann-image-radius,0)
}

.ann-month-event__image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}

.ann-month-event__body {
  min-width:0;
  font-size:12px
}

.announcements:not(.announcements--template-subtitle) .ann-month-event__body {
  color:var(--ann-subtitle-color)
}

.announcements--template-subtitle .ann-month-event__body {
  color:var(--ppmh-blue,inherit)
}

.ann-month-event__body a {
  display:block;
  overflow:hidden;
  font-weight:800;
  text-overflow:ellipsis;
  text-decoration:none!important
}

.announcements:not(.announcements--template-title) .ann-month-event__body a {
  color:var(--ann-title-color)!important
}

@media(max-width:720px) {
  .ann-month-grid {
    display:block;
    border:0
  }

  .ann-month-grid__weekday,.ann-month-day.is-outside {
    display:none
  }

  .ann-month-day {
    min-height:70px;
    margin-bottom:8px;
    border:1px solid var(--ann-overview-border-color,var(--ann-line))
  }

  .ann-month-list__day {
    grid-template-columns:76px minmax(0,1fr)
  }
}