/* ====== OpMaat Slider – Frontend ====== */

/* Optioneel: echte fullwidth (doorbreek thema container) */
.oms-slider.oms-fullwidth {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Basis */
.oms-slider {
  position: relative
}

/* Frame met vaste hoogte o.b.v. CSS vars (instellingen) */
.oms-frame {
  position: relative;
  overflow: hidden;
  height: var(--oms-height, 80vh)
}

@media (max-width: 782px) {
  .oms-frame {
    height: var(--oms-mheight, 60vh)
  }
}

.oms-track {
  display: flex;
  transition: transform .35s ease;
  will-change: transform;
  height: 100%
}

.oms-slide {
  flex: 0 0 100%;
  height: 100%
}

/* Type A: fullscreen beeld */
.oms-slide.type-a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000
}

.oms-slide.type-a .oms-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

/* Type B: tekst + media, beide vullen de hoogte */
.oms-slide.type-b .oms-inner {
  display: flex;
  gap: 1.25rem;
  align-items: stretch;
  height: 100%
}

.oms-slide .oms-text {
  flex: 0 0 var(--oms-type-b-text, 40%);
  min-width: 0;
  background: var(--oms-text-bg, rgba(255, 255, 255, .85));
  padding: 1rem 1.25rem;
  overflow: auto;
}

.oms-slide .oms-media {
  flex: 0 0 var(--oms-type-b-media, 60%);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.oms-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px
}

.oms-cap {
  font-size: .9rem;
  color: #e5e7eb;
  margin-top: .5rem
}

/* Tekst */
.oms-text {
  margin-top: 50px;
  padding-left: 50px !important;
}

.oms-h3 {
  margin: .25rem 0 .5rem;
  font-size: 1.35rem
}

.oms-body p {
  margin: .5rem 0
}

.oms-btn {
  display: inline-block;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  text-decoration: none
}

/* Navigatie */
.oms-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .9);
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: .35rem .6rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  z-index: 5;
}

.oms-nav.prev {
  left: .5rem
}

.oms-nav.next {
  right: .5rem
}

/* Dots */
.oms-dots {
  display: flex;
  gap: .35rem;
  justify-content: center;
  margin-top: .5rem
}

.oms-dot {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  border: 1px solid #9ca3af;
  background: #e5e7eb
}

.oms-dot.is-active {
  background: #111827;
  border-color: #111827
}

/* Modal */
.oms-modal {
  position: fixed;
  inset: 10% auto auto 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  max-width: 760px;
  width: 90%;
  z-index: 1001;
  padding: 1rem
}

.oms-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 1000
}

.oms-modal[hidden],
.oms-backdrop[hidden] {
  display: none
}

.oms-close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1
}

/* Responsief lay-outgedrag */
@media (max-width: 900px) {
  .oms-slide.type-b .oms-inner {
    flex-direction: column
  }

  .oms-slide .oms-text,
  .oms-slide .oms-media {
    flex: 1 1 auto
  }

  .oms-media img {
    height: auto
  }
}

/* === Header gekoppeld aan Type-B tekstbreedte (+25px), alleen BR afgerond === */

/* Positioneer de header bovenop de sliderinhoud */
.oms-header {
  position: absolute;
  top: 0;
  left: 0;
  /* uitlijnen met linkerrand van slider/tekstkolom */
  right: auto;
  margin: 0;
  z-index: 6;
  pointer-events: auto;
}

/* De 'title bar' zelf: breedte = tekstkolom + 25px */
.oms-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*gap:.75rem;

  /* achtergrond + rand */
  background: rgba(255, 255, 255, .95);
  border: 1px solid #e5e7eb;

  /* alleen rechter-onderhoek rond */
  border-radius: 0 0 28px 0;

  /* padding */
  padding: .55rem .9rem;

  /* schaduw */
  box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
  backdrop-filter: saturate(150%) blur(4px);

  /* Koppel aan type-B tekstkolom: var(--oms-type-b-text) + 25px */
  width: 34vw;

  /* veiligheid voor zeer smalle layouts */
  max-width: 95vw;
}

/* typografie in de balk */
.oms-postname {
  font-weight: 700;
  letter-spacing: .2px;
  color: #111827;
  white-space: nowrap
}

.oms-sep {
  color: #9ca3af;
  font-weight: 400
}

.oms-info-trigger {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: #111827
}

.oms-info-trigger .oms-i {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-weight: 600;
  line-height: 1;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06)
}

.oms-paginate{
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  display: flex
;
    justify-content: space-between;
}

/* Mobiel: tekstkolom wordt full-width, header volgt mee (met kleine marge) */
@media (max-width: 900px) {
  .oms-title {
    width: calc(100% - 20px);

    padding: .45rem .7rem;
    border-radius: 0 0 14px 0;
  }

  .oms-info-trigger .oms-i {
    width: 24px;
    height: 24px;
    font-size: .9rem
  }

  .oms-postname {
    font-size: 1rem
  }
}

/* === Header/paneel: zelfde root, overlay, geen 'eronder' meer ============== */

/* basiskaart: staat linksboven, vaste breedte; geen vaste hoogte */
.oms-header{
  position:absolute;
  top:0; left:0; right:auto;
  z-index: 8;                       /* over track/nav/dots */
  width: 35vw;
  max-width: 95vw;

  /* kaartstijl op de container zelf */
  background: rgba(255,255,255,.95);
  border:1px solid #e5e7eb;
  border-radius: 0 0 38px 0;        /* alleen rechteronderhoek rond */
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  backdrop-filter: saturate(150%) blur(4px);

  overflow: hidden;                 /* panel-inhoud blijft binnen de kaart */
}

/* bij openen: rek de kaart tot de onderkant van de frame */
.oms-header.is-open{
  bottom: 0;                        /* -> van top tot bottom binnen .oms-frame */
}

/* titelbalk blijft gewoon bovenin de kaart */
.oms-title{
  position: relative;
  display:flex; align-items:center; justify-content:space-between;
  padding:.55rem .9rem;
  background: transparent; border:0; box-shadow:none;
}

/* paneel vult de rest van de kaart */
.oms-panel{
  position: absolute;
  left: 0; right: 0;
  top: 56px;                        /* hoogte titelbalk (pas aan indien nodig) */
  bottom: 0;                        /* tot onderrand van de kaart */
  overflow: auto;
  border-top: 1px solid #e5e7eb;
  background: transparent;          /* kaartkleur komt van .oms-header */
  display: none;                    /* standaard dicht */
}

.oms-panel-inner{
  padding:30px;
}

/* open = zichtbaar (JS zet de hidden property al uit, dit borgt de layout) */
.oms-header.is-open .oms-panel{ display: block; }

/* mobile tweaks */
@media (max-width: 900px){
  .oms-header{
    width: calc(100% - 20px);
    margin-left: 10px;
    border-radius: 0 0 14px 0;
  }
  .oms-panel{ top: 48px; }
}