:root{
  --bg1:#0b94b3;
  --bg2:#0a6f86;
  --accent:#d1b24a;
  --white:#ffffff;
  --shadow: rgba(0,0,0,0.35);
  --lowerH:120px; /* grotere nieuwsbanner */
}

/* reset */
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{ background: linear-gradient(180deg,var(--bg1),var(--bg2)); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--white); overflow:hidden; }

.screen{
  position:relative;
  height:100%;
  width:100%;
}

.slides{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom: var(--lowerH); /* exclude lower-third so centering is true */
}

.slide{
  position:absolute;
  inset:0;
  display:none;
}

.slide.active{ display:flex; align-items:center; justify-content:center; }

/* center everything inside slide, with safe margins */
.slide-inner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;     /* vertical center */
  justify-content:center; /* horizontal center */
  padding: clamp(24px, 4vw, 80px);
}

.title{
  color: var(--accent);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-shadow: 0 6px 18px var(--shadow);
  margin:0 0 22px 0;
}

.title-main{
  font-size: clamp(36px, 4vw, 56px);
}

.slide-trainin .slide-inner{
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: clamp(32px, 5vw, 90px);
}

.trainin-wrap{
  /* Bigger than before, but still leaving space for the title */
  width: min(1900px, 97vw);
  height: min(980px, calc(100vh - var(--lowerH) - 120px));
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
  background: rgba(255,255,255,0.08);
}

/* Staff slides should be perfectly centered in the available (non-news) area */
.slide-staff .slide-inner{
  padding: 0 72px;
}

.slide-trainin iframe{
  width:100%;
  height:100%;
  border:0;
  background:#fff;
}

/* staff layout */
.staff{
  width: min(1650px, 94vw);
  height: min(780px, calc(100vh - var(--lowerH) - 90px));
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(28px, 4vw, 70px);
}

.staff-left{
  width: clamp(300px, 28vw, 420px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 18px;
}

.avatarFrame{
  width: clamp(240px, 24vw, 360px);
  aspect-ratio: 3/4;
  border: 4px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 16px 35px rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.avatar{
  width:100%;
  height:100%;
  object-fit:cover;
}

.avatar.placeholder{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), rgba(255,255,255,0.04) 55%),
    linear-gradient(135deg, rgba(0,0,0,0.18), rgba(0,0,0,0.06));
}

.nameBlock{
  text-align:center;
  line-height:1.0;
}

.nameLine{
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--accent);
  text-shadow: 0 6px 18px var(--shadow);
}

.nameLine.first{ font-size: clamp(26px, 2.4vw, 40px); }
.nameLine.last { font-size: clamp(30px, 2.8vw, 46px); margin-top: 6px; }

.staff-right{
  width: min(820px, 58vw);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 18px;
}

.bio{
  font-size: clamp(18px, 1.6vw, 26px);
  line-height:1.45;
  margin:0;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

.specTitle{
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--accent);
  text-shadow: 0 6px 18px var(--shadow);
  font-size: clamp(22px, 1.8vw, 30px);
  margin-bottom: 10px;
}

.specList{
  margin:0;
  padding-left: 22px;
  font-size: clamp(18px, 1.5vw, 24px);
  color: rgba(255,255,255,0.92);
}

/* Timer */
.timer{
  position:absolute;
  right: 28px;
  bottom: calc(var(--lowerH) + 18px);
  width: 72px;
  height: 72px;
  display:grid;
  place-items:center;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.28));
  pointer-events:none;
}
.timer svg{ width:72px; height:72px; transform: rotate(-90deg); }
.timer .track{ fill:none; stroke: rgba(255,255,255,0.28); stroke-width: 4; }
.timer .progress{ fill:none; stroke: rgba(255,255,255,0.95); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 113.097; stroke-dashoffset: 0; transition: stroke-dashoffset .25s linear; }
.timerText{
  position:absolute;
  font-weight: 900;
  font-size: 22px;
  color: rgba(255,255,255,0.95);
}

/* Lower third bigger */
.lowerthird{
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--lowerH);
  padding: 14px 22px;
  display:flex;
  gap: 18px;
  align-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.82));
  border-top: 1px solid rgba(0,0,0,0.08);
  color:#111;
}

.nosLogo{
  width: 96px;
  height: 60px;
  border-radius: 6px;
  background: #e8e8e8;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -1px;
  box-shadow: 0 10px 18px rgba(0,0,0,0.18);
}

.nosN,.nosS{ color:#6b7785; }
.nosO{
  color:#c81f2d;
  position:relative;
  top:0; /* O op 1 lijn met N en S */
}

.news{
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.headline{
  font-weight: 900;
  font-size: 22px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.subline{
  font-size: 15px;
  color:#333;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* responsive for smaller displays */
@media (max-width: 900px){
  .staff{
    flex-direction:column;
    height:auto;
  }
  .staff-right{ width: 92vw; }
  .slide-inner{ padding: 22px; }
  .slide-trainin .slide-inner{ padding-top: 28px; }
  .trainin-wrap{ width: 96vw; height: 62vh; }
}


/* NOS logo pixel-perfect baseline */
.nosLogo span{ line-height:1; display:inline-block; vertical-align:middle; }
.nosN,.nosO,.nosS{ position:relative; top:0; }