/* =============================================================
   SSO Evenementen — sso-events.css  v4.0
   Gebouwd op --ops-* tokens. Voeg toe ONDER ops-style.css.
   ============================================================= */

/* ─── Pagina-koptekst ────────────────────────────────────────── */
.sso-events-header {
  padding-block-end: 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

/* ─── Sectie-eyebrow ─────────────────────────────────────────── */
.sso-section-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--ops-space-s);
  font-size: var(--ops-fs-caption);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ops-text-muted);
  margin-block-end: var(--ops-space-m);
}
.sso-section-eyebrow::before,
.sso-section-eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.06);
}

/* ─── Controls bar ───────────────────────────────────────────── */
.sso-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-block-end: var(--ops-space-m);
}
.sso-toggles {
  display: flex;
  gap: .5rem;
  margin-inline-start: auto;
  flex-wrap: wrap;
}

/* Toggle pill */
.sso-tpill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .75rem;
  border-radius: var(--ops-radius-full);
  font-size: var(--ops-fs-caption);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.1);
  background: transparent;
  color: var(--ops-text-muted);
  transition: background var(--ops-dur) var(--ops-ease),
              color var(--ops-dur) var(--ops-ease),
              border-color var(--ops-dur) var(--ops-ease);
  user-select: none;
}
.sso-tpill:hover { border-color: rgba(255,255,255,.2); color: var(--ops-text); }
.sso-tpill.is-on  { background: rgba(255,255,255,.07); color: var(--ops-text); border-color: rgba(255,255,255,.2); }
.sso-tpill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ops-text-muted);
  flex-shrink: 0;
  transition: background var(--ops-dur) var(--ops-ease);
}
.sso-tpill.is-on .sso-tpill-dot { background: var(--ops-ocean-light); }

/* ─── Maand-pill navigatie ───────────────────────────────────── */
.sso-month-nav {
  display: flex;
  gap: .375rem;
  flex-wrap: wrap;
  margin-block-end: var(--ops-space-l);
}
.sso-mpill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem;
  border-radius: var(--ops-radius-full);
  font-size: var(--ops-fs-caption);
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.1);
  background: transparent;
  color: var(--ops-text-muted);
  transition: background var(--ops-dur) var(--ops-ease),
              color var(--ops-dur) var(--ops-ease),
              border-color var(--ops-dur) var(--ops-ease);
}
.sso-mpill:hover { background: rgba(255,255,255,.06); color: var(--ops-text); border-color: rgba(255,255,255,.18); }
.sso-mpill.is-active { background: rgba(1,134,187,.18); color: var(--ops-ocean-light); border-color: rgba(1,134,187,.4); }
.sso-mpill-now-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ops-ocean);
  flex-shrink: 0;
}

/* ─── Featured grid ─────────────────────────────────────────── */
.sso-featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
@media (min-width: 600px) {
  .sso-featured-grid { grid-template-columns: 1fr 1fr; }
  .sso-featured-card--primary { grid-column: span 2; }
}
@media (min-width: 900px) {
  .sso-featured-grid { grid-template-columns: 2fr 1fr 1fr; }
  .sso-featured-card--primary { grid-column: span 1; }
}

/* Card — hoge specificiteit via .sso-featured-grid parent */
.sso-featured-grid .sso-featured-card {
  border-radius: var(--ops-radius) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--ops-bg-elevated) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  transition: transform var(--ops-dur) var(--ops-ease),
              border-color var(--ops-dur) var(--ops-ease);
  min-height: 0 !important;
  padding: 0 !important;
}
.sso-featured-grid .sso-featured-card:hover {
  transform: translateY(-3px);
  border-color: rgba(1,134,187,.35) !important;
}
.sso-featured-grid .sso-featured-card:hover .sso-fc-img img { opacity: .58; }

/* Foto — vaste hoogte, nooit flexibel */
.sso-featured-grid .sso-fc-img {
  width: 100% !important;
  height: 150px !important;
  min-height: 150px !important;
  max-height: 150px !important;
  flex: 0 0 150px !important;
  overflow: hidden !important;
  background: var(--ops-bg-elevated) !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}
.sso-featured-grid .sso-featured-card--primary .sso-fc-img {
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  flex: 0 0 190px !important;
}
.sso-featured-grid .sso-fc-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: .82 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  transition: opacity var(--ops-dur) var(--ops-ease);
}

/* Body — altijd onder foto, nooit weggedrukt */
.sso-featured-grid .sso-fc-body {
  padding: .85rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .35rem !important;
  flex: 0 0 auto !important;
  background: var(--ops-bg-elevated) !important;
  margin: 0 !important;
}

/* Datum-pill */
.sso-featured-grid .sso-fc-date {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: .3rem !important;
  align-self: flex-start !important;
  background: rgba(1,134,187,.15) !important;
  border: 1px solid rgba(1,134,187,.3) !important;
  border-radius: var(--ops-radius-full) !important;
  padding: .18rem .55rem !important;
  line-height: 1 !important;
  margin-bottom: .1rem !important;
}
.sso-featured-grid .sso-fc-day   { font-size: .9rem !important; font-weight: 800 !important; color: #fff !important; }
.sso-featured-grid .sso-fc-month { font-size: .6rem !important; font-weight: 700 !important; letter-spacing: .07em !important; color: var(--ops-ocean-light) !important; text-transform: uppercase !important; }

/* Naam + locatie */
.sso-featured-grid .sso-fc-title {
  font-size: var(--ops-fs-body) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
  margin: 0 !important;
}
.sso-featured-grid .sso-featured-card--primary .sso-fc-title { font-size: var(--ops-fs-h3) !important; }
.sso-featured-grid .sso-fc-meta { font-size: var(--ops-fs-caption) !important; color: var(--ops-text-muted) !important; margin: 0 !important; }

/* ─── Kalender ───────────────────────────────────────────────── */
.sso-kalender { display: flex; flex-direction: column; gap: var(--ops-space-l); }

.sso-kalender-maand { /* zichtbaar standaard */ }
.sso-kalender-maand.is-hidden { display: none; }

.sso-kalender-maand-h {
  font-size: var(--ops-fs-caption); font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ops-text-muted);
  margin-block-end: var(--ops-space-xs);
  display: flex; align-items: center; gap: .5rem;
}
.sso-kalender-maand-h::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.05); }

.sso-mh-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ops-ocean); flex-shrink: 0;
}

.sso-kalender-lijst { display: flex; flex-direction: column; gap: 2px; }

.sso-ki {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: center;
  gap: 0 var(--ops-space-s);
  padding: .6rem .7rem;
  border-radius: var(--ops-radius-sm);
  border: 1px solid transparent;
  transition: background var(--ops-dur) var(--ops-ease),
              border-color var(--ops-dur) var(--ops-ease);
}
.sso-ki:hover { background: var(--ops-bg-elevated); border-color: rgba(255,255,255,.06); }
.sso-ki--past { opacity: .45; }
.sso-ki--past:hover { opacity: .75; }
.sso-ki--featured { background: rgba(1,134,187,.04); border-color: rgba(1,134,187,.12); }
.sso-ki--featured:hover { background: rgba(1,134,187,.08); border-color: rgba(1,134,187,.22); }

.sso-ki-datum {
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  padding-right: var(--ops-space-xs);
  border-right: 1px solid rgba(255,255,255,.06);
  grid-row: span 2;
}
.sso-ki-dagnaam { font-size: .55rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ops-text-muted); }
.sso-ki-dag     { font-size: 1.2rem; font-weight: 900; color: #fff; letter-spacing: -.02em; line-height: 1.1; }
.sso-ki--past .sso-ki-dag { color: var(--ops-text-muted); }

.sso-ki-info  { grid-column: 2; display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.sso-ki-naam  { font-size: var(--ops-fs-body); font-weight: 600; color: var(--ops-text); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--ops-dur) var(--ops-ease); }

.sso-ki-star  { color: var(--ops-ocean); font-size: .6rem; margin-inline-start: .25rem; opacity: .65; }
.sso-ki-locatie { font-size: var(--ops-fs-caption); color: var(--ops-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }




/* Responsief: tijd onder naam op xs */
@media (max-width: 460px) {
  .sso-ki { grid-template-columns: 2.4rem 1fr; grid-template-rows: auto auto; }
  .sso-ki-datum  { grid-row: 1 / 3; }
  .sso-ki-info   { grid-column: 2; grid-row: 1; }
}

/* ─── Single event ───────────────────────────────────────────── */
.sso-event-single { max-width: 780px; margin-inline: auto;
  padding-inline: var(--ops-gutter); padding-block: var(--ops-space-2xl); }
.sso-event-meta {
  display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem;
  background: var(--ops-bg-elevated); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--ops-radius); padding: var(--ops-space-m);
  margin-block-start: var(--ops-space-m);
}
.sso-event-meta dt { font-size: var(--ops-fs-caption); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ops-ocean); align-self: center; }
.sso-event-meta dd { margin: 0; font-size: var(--ops-fs-body); color: var(--ops-text); align-self: center; }

/* ─── Leeg ───────────────────────────────────────────────────── */
.sso-no-events { text-align: center; padding-block: var(--ops-space-xl); color: var(--ops-text-muted); }

/* ─── Homepage evenementen sectie ────────────────────────────── */
.ops-evt-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ops-space-m);
  flex-wrap: wrap;
  margin-block-end: var(--ops-space-l);
}

.ops-evt-head .ops-section-h {
  margin-block-end: 0;
}

.ops-evt-footer {
  display: flex;
  justify-content: center;
  margin-block-start: var(--ops-space-l);
}

/* ─── GeneratePress fullwidth override ──────────────────────── */

/* Alle GP content-wrappers volledig resetten */
.sso-events-body #page                { background: var(--ops-bg) !important; }
.sso-events-body #content,
.sso-events-body .site-content,
.sso-events-body .content-area,
.sso-events-body .site-main           { max-width: none !important; width: 100% !important;
                                        padding: 0 !important; margin: 0 !important;
                                        float: none !important; background: none !important; }
.sso-events-body article,
.sso-events-body .inside-article,
.sso-events-body .entry-content,
.sso-events-body .entry-header        { max-width: none !important; width: 100% !important;
                                        padding: 0 !important; margin: 0 !important; }

/* Zorg dat ops-root de volledige breedte pakt */
.sso-events-page {
  width: 100%;
  min-height: 100vh;
  background-color: var(--ops-bg);
  background-image:
    radial-gradient(ellipse 70% 50% at 85% 10%, rgba(1,134,187,.07), transparent 60%),
    radial-gradient(ellipse 60% 40% at 15% 90%, rgba(246,98,19,.06), transparent 50%);
  background-attachment: fixed;
  color: var(--ops-text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--ops-fs-body);
}

/* GP voegt soms padding toe via .inside-article */
.sso-events-body .inside-article { padding: 0 !important; }

/* GP site background meenemen */
.sso-events-body .site { background: var(--ops-bg) !important; }

/* ─── Accordion kalender ─────────────────────────────────────── */
.sso-acc {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.sso-acc-month {
  border-radius: var(--ops-radius-sm);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: var(--ops-bg-elevated);
}

.sso-acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ops-text);
  gap: 1rem;
  transition: background var(--ops-dur) var(--ops-ease);
  text-align: left;
}

.sso-acc-trigger:hover { background: rgba(255,255,255,.04); }
.sso-acc-trigger.is-open { background: rgba(1,134,187,.06); }

.sso-acc-trigger-left {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.sso-acc-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  flex-shrink: 0;
  transition: background var(--ops-dur) var(--ops-ease);
}
.sso-acc-trigger.is-open .sso-acc-dot { background: var(--ops-ocean-light); }
.sso-acc-cur .sso-acc-dot             { background: var(--ops-blaze) !important; }

.sso-acc-label {
  font-size: var(--ops-fs-small);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ops-text-muted);
  transition: color var(--ops-dur) var(--ops-ease);
}
.sso-acc-trigger.is-open .sso-acc-label { color: #fff; }

.sso-acc-count {
  font-size: var(--ops-fs-caption);
  color: var(--ops-text-muted);
  background: rgba(255,255,255,.07);
  border-radius: var(--ops-radius-full);
  padding: .15rem .55rem;
  font-weight: 600;
}

.sso-acc-chevron {
  flex-shrink: 0;
  color: var(--ops-text-muted);
  transition: transform var(--ops-dur) var(--ops-ease),
              color var(--ops-dur) var(--ops-ease);
}
.sso-acc-trigger.is-open .sso-acc-chevron {
  transform: rotate(180deg);
  color: var(--ops-ocean-light);
}

/* Body — gesloten */
.sso-acc-body {
  display: none;
  border-top: 1px solid rgba(255,255,255,.06);
}
.sso-acc-body.is-open { display: block; }

/* Event rijen */
.sso-evt-list { padding: .35rem 0; }

.sso-evt-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: center;
  gap: 0 .85rem;
  padding: .6rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background var(--ops-dur) var(--ops-ease);
}
.sso-evt-row:last-child { border-bottom: none; }
.sso-evt-row:hover { background: rgba(255,255,255,.03); }
.sso-evt-past { opacity: .45; }

.sso-evt-d {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  padding-right: .75rem;
  border-right: 1px solid rgba(255,255,255,.07);
}
.sso-evt-dn {
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ops-text-muted);
}
.sso-evt-dg {
  font-size: 1.2rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.sso-evt-info {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  min-width: 0;
}
.sso-evt-naam {
  font-size: var(--ops-fs-body);
  font-weight: 600;
  color: var(--ops-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sso-evt-star {
  color: var(--ops-ocean);
  font-size: .6rem;
  margin-left: .25rem;
  opacity: .65;
}
.sso-evt-loc {
  font-size: var(--ops-fs-caption);
  color: var(--ops-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}