/* ===========================================
   ESQUALO AGENT PORTAL - STYLESHEET
   ===========================================

   Beschrijving: Styling voor de Esqualo Agent Portal homepage
   Versie: 1.1

   Inhoudsopgave:
   1. CSS Variabelen
   2. Reset & Base
   3. Typography
   4. Layout
   5. Header
   6. Welcome Section
   7. Hero Banner
   8. Category Cards
   9. Events Section
   10. News Section
   11. Login Page
   12. Sidebar Menu
   13. Collection Page (incl. Marketing variant)
   14. Collection Overview Page (Document Viewer)
   15. Agenda Page
   =========================================== */


/* ===========================================
   1. CSS VARIABELEN
   Kleuren, fonts en standaard waarden
   =========================================== */
:root {
  /* Kleuren */
  --color-primary: #0A0909;
  --color-background: #FAFAFA;
  --color-white: #FFFFFF;
  --color-border: #E5E5E5;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  --color-badge-bg: #F3F4F6;
  --color-overlay-light: rgba(0, 0, 0, 0.4);
  --color-overlay-dark: rgba(0, 0, 0, 0.6);

  /* Fonts */
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
}


/* ===========================================
   2. RESET & BASE
   Basis reset en standaard elementen
   =========================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--color-primary);
  line-height: 1.5;
  min-height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}


/* ===========================================
   3. TYPOGRAPHY
   Tekststijlen en koppen
   =========================================== */

/* Hoofdtitels - serif font voor elegantie */
.heading-primary {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--color-primary);
}

/* Banner titels - groter en met meer spacing */
.heading-banner {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-white);
}

/* Sectie titels - klein en uppercase */
.heading-section {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Card titels */
.heading-card {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Beschrijvende tekst */
.text-description {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* Kleine labels */
.text-label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-white);
}

/* Muted tekst voor details */
.text-muted {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
}


/* ===========================================
   4. LAYOUT
   Pagina structuur en containers
   =========================================== */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  overflow-y: auto;
}

/* Container voor horizontale padding */
.container {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}


/* ===========================================
   5. HEADER
   Navigatiebalk bovenaan
   =========================================== */
.header {
  background-color: var(--color-primary);
  padding: 20px var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* Hamburger menu knop */
.header__menu-btn {
  padding: var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__menu-btn svg {
  width: 24px;
  height: 24px;
}

/* Gecentreerd logo */
.header__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.header__logo-img {
  height: 20px;
  width: auto;
}

/* Rechter sectie met order portal en avatar */
.header__actions {
  display: flex;
  align-items: center;
}

/* Order Portal link */
.header__order-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px var(--spacing-sm);
  background-color: transparent;
  color: var(--color-white);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.header__order-link svg {
  width: 16px;
  height: 16px;
  position: relative;
  top: -2px;
}


/* Gebruiker avatar */
.header__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
}


/* ===========================================
   6. WELCOME SECTION
   Welkomstbericht met naam
   =========================================== */
.welcome-section {
  padding: var(--spacing-lg);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.welcome-section__title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
  letter-spacing: 1px;
}

.welcome-section__subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
}


/* ===========================================
   7. HERO BANNER
   Grote banner met countdown
   =========================================== */
.hero-banner {
  margin: var(--spacing-md) var(--spacing-lg);
  padding: var(--spacing-lg);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 180px;
  position: relative;
}

/* Overlay gradient voor leesbaarheid */
.hero-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(var(--color-overlay-light), var(--color-overlay-dark));
  z-index: 1;
}

/* Content boven de overlay */
.hero-banner__content {
  position: relative;
  z-index: 2;
}

.hero-banner__label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--color-white);
  text-transform: uppercase;
  margin-bottom: var(--spacing-xs);
}

.hero-banner__title {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 400;
  color: var(--color-white);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: var(--spacing-xs);
}

.hero-banner__text {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--spacing-sm);
}

/* Countdown timer */
.countdown {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
}

.countdown__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown__number {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-white);
}

.countdown__label {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
}


/* ===========================================
   8. CATEGORY CARDS
   2x2 grid met navigatie tegels
   =========================================== */
.category-grid {
  padding: 0 var(--spacing-lg) var(--spacing-lg);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
}

.category-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  padding: var(--spacing-lg) var(--spacing-md);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Icon container */
.category-card__icon {
  width: 88px;
  height: 58px;
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-sm);
}

.category-card__icon svg {
  width: 24px;
  height: 24px;
}

.category-card__title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--spacing-xs);
}

.category-card__description {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
}


/* ===========================================
   9. EVENTS SECTION
   Aankomende evenementen lijst
   =========================================== */
.events-section {
  padding: 0 var(--spacing-lg) var(--spacing-md);
}

.events-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.events-section__title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.events-section__link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: underline;
}

.events-list {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
}

/* Individuele event card */
.event-card {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.event-card:last-child {
  border-bottom: none;
}

/* Datum blok links */
.event-card__date {
  width: 72px;
  height: 72px;
  background-color: var(--color-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.event-card__day {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-white);
  line-height: 1;
}

.event-card__month {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Event content rechts */
.event-card__content {
  flex: 1;
}

.event-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--spacing-xs);
}

.event-card__title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
}

/* Event type badge */
.event-card__badge {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-text-secondary);
  background-color: var(--color-badge-bg);
  padding: 4px 10px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.event-card__description {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs);
  line-height: 1.5;
}

/* Event meta info (tijd en locatie) */
.event-card__meta {
  display: flex;
  gap: var(--spacing-md);
}

.event-card__meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.event-card__meta-item svg {
  width: 14px;
  height: 14px;
}

.event-card__meta-item span {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
}


/* ===========================================
   10. NEWS SECTION
   Nieuws en updates grid
   =========================================== */
.news-section {
  padding: 0 var(--spacing-lg) var(--spacing-lg);
}

.news-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.news-section__title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.news-section__link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: underline;
}

/* 3-koloms grid voor nieuws cards */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}

/* Nieuws card */
.news-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  overflow: hidden;
  cursor: pointer;
}

/* Afbeelding container */
.news-card__image {
  height: 140px;
  background-size: cover;
  background-position: center;
}

.news-card__content {
  padding: 20px;
}

.news-card__category {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.news-card__title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  margin: var(--spacing-xs) 0;
  line-height: 1.4;
}

.news-card__excerpt {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}


/* ===========================================
   11. LOGIN PAGE
   Volledige login pagina styling
   =========================================== */

/* Login pagina wrapper - full height layout */
.login-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--color-white);
}

/* Hero sectie bovenaan met achtergrondafbeelding */
.login-hero {
  height: 481px;
  background-size: cover;
  background-position: top;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

/* Logo in hero sectie */
.login-hero__logo {
  width: 311px;
  height: auto;
  margin-bottom: 20px;
}

/* Subtitel onder logo */
.login-hero__subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-white);
  text-transform: uppercase;
  text-shadow: 0px 1.8px 1.8px rgba(0, 0, 0, 0.25);
}

/* Formulier sectie onderaan */
.login-form-section {
  flex: 1;
  background-color: var(--color-white);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* Header met welkomst tekst */
.login-form__header {
  text-align: center;
  margin-bottom: 16px;
}

.login-form__title {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 400;
  color: var(--color-primary);
  margin: 0 0 8px 0;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.login-form__description {
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  margin: 0;
}

/* Login formulier */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}

/* Formulier velden */
.login-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-form__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.login-form__input {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 25px;
  height: 43px;
  border: 1px solid var(--color-primary);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.login-form__input:focus {
  border-color: var(--color-primary);
}

.login-form__input::placeholder {
  color: #898989;
  text-transform: uppercase;
}

/* Wachtwoord vergeten link */
.login-form__forgot {
  text-align: center;
}

.login-form__forgot-link {
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  text-decoration: underline;
}

/* Submit knop */
.login-form__button {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 25px;
  height: 43px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* Help tekst onderaan */
.login-form__help {
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  text-align: center;
  margin: 32px 0 0 0;
}

.login-form__help-link {
  color: var(--color-primary);
}


/* ===========================================
   12. SIDEBAR MENU
   Uitklapbaar navigatiemenu vanuit links
   =========================================== */

/* Menu Overlay - donkere achtergrond wanneer menu open is */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* Sidebar menu container */
.sidebar-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  background-color: #0A0909;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.sidebar-menu.is-open {
  transform: translateX(0);
}

/* Menu header met titel en sluit knop */
.sidebar-menu__header {
  padding: 20px 24px;
  border-bottom: 1px solid #222;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-menu__title {
  font-family: var(--font-body);
  font-size: 12px;
  color: white;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.sidebar-menu__close {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Menu items container */
.sidebar-menu__items {
  flex: 1;
  padding: 16px 0;
  overflow-y: auto;
}

/* Individuele menu item */
.sidebar-menu__item {
  width: 100%;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sidebar-menu__item span {
  font-family: var(--font-body);
  font-size: 14px;
  color: white;
  letter-spacing: 1px;
}

.sidebar-menu__item svg {
  flex-shrink: 0;
}

/* Actieve menu item */
.sidebar-menu__item--active {
  background: rgba(255, 255, 255, 0.1);
  border-left-color: white;
}

/* Menu footer met sign out */
.sidebar-menu__footer {
  padding: 20px 24px;
  border-top: 1px solid #222;
}

.sidebar-menu__signout {
  width: 100%;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: none;
  border: 1px solid #444;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.sidebar-menu__signout span {
  font-family: var(--font-body);
  font-size: 13px;
  color: white;
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* ===========================================
   13. COLLECTION PAGE
   Collection overzicht pagina
   =========================================== */

/* Page title sectie met seizoen selector */
.page-title-section {
  padding: var(--spacing-lg);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title-section__content {
  flex: 1;
}

.page-title-section__title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  color: var(--color-primary);
  margin: 0;
  letter-spacing: 1px;
}

.page-title-section__description {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 4px 0 0 0;
}

/* Seizoen dropdown selector */
.page-title-section__select {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 40px 12px 16px;
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* Collection hero banner */
.collection-hero {
  margin: var(--spacing-md) var(--spacing-lg);
  padding: var(--spacing-lg);
  background-size: cover;
  background-position: center;
}

.collection-hero__label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--color-white);
  text-transform: uppercase;
  display: block;
}

.collection-hero__title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-white);
  margin: 8px 0 16px 0;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.collection-hero__tagline {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
}

.collection-hero__button {
  display: inline-block;
  margin-top: var(--spacing-sm);
  padding: 12px 24px;
  background-color: var(--color-white);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
}

/* Content types grid - 2x3 */
.content-types-grid {
  padding: 0 var(--spacing-lg) var(--spacing-md);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
}

/* Content type card */
.content-type-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  padding: var(--spacing-md);
  cursor: pointer;
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  text-decoration: none;
}

.content-type-card__icon {
  width: 48px;
  height: 48px;
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.content-type-card__content {
  flex: 1;
}

.content-type-card__title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 4px 0;
  letter-spacing: 0.5px;
}

.content-type-card__description {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 8px 0;
}

.content-type-card__badge {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
}

.content-type-card__arrow {
  flex-shrink: 0;
  align-self: center;
}

/* Content type card variant met thumbnail afbeelding */
.content-type-card--with-image {
  padding: 0;
}

.content-type-card--with-image .content-type-card__content {
  padding: var(--spacing-sm);
}

.content-type-card__thumbnail {
  width: 80px;
  height: 100%;
  min-height: 80px;
  background-color: var(--color-border);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.content-type-card--with-image .content-type-card__arrow {
  margin-right: var(--spacing-sm);
}


/* ===========================================
   14. COLLECTION OVERVIEW PAGE (Document Viewer)
   Document preview pagina
   =========================================== */

/* Document page wrapper - volledige hoogte */
.document-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--color-background);
}

/* Document header met terug knop en download */
.document-header {
  padding: var(--spacing-lg);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.document-header__back {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.document-header__title-wrapper {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.document-header__title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  color: var(--color-primary);
  margin: 0 0 4px 0;
}

.document-header__subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
}

.document-header__download {
  background: var(--color-primary);
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-white);
}

.document-header__share {
  background: transparent;
  border: 1px solid var(--color-primary);
  cursor: pointer;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-left: 10px;
}

/* Document viewer */
.document-viewer {
  flex: 1;
  background-color: var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: var(--spacing-md);
}

.document-viewer__page {
  background-color: var(--color-white);
  width: 90%;
  max-width: 600px;
  aspect-ratio: 0.707;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.document-viewer__placeholder {
  text-align: center;
}

.document-viewer__icon {
  width: 80px;
  height: 80px;
  background-color: #F5F5F5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px auto;
}

.document-viewer__placeholder-title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 8px 0;
}

.document-viewer__placeholder-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Document navigation */
.document-navigation {
  padding: 16px var(--spacing-lg);
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
}

.document-navigation__btn {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 16px;
  cursor: pointer;
}

.document-navigation__btn--prev {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}

.document-navigation__btn--next {
  background: var(--color-primary);
  border: none;
  color: var(--color-white);
}

.document-navigation__info {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
}


/* ===========================================
   15. AGENDA PAGE
   Styling voor de agenda pagina
   =========================================== */

/* Agenda sectie */
.agenda-section {
  padding: var(--spacing-md) var(--spacing-lg);
}

.agenda-section--past {
  padding-top: 0;
}

.agenda-section__title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
}

/* Agenda events container */
.agenda-events {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
}

/* Individueel agenda event */
.agenda-event {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.agenda-event:last-child {
  border-bottom: none;
}

/* Past events styling */
.agenda-event--past {
  opacity: 0.7;
}

/* Datum blok */
.agenda-event__date {
  width: 72px;
  height: 72px;
  background-color: var(--color-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.agenda-event__day {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-white);
  line-height: 1;
}

.agenda-event__month {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Event content */
.agenda-event__content {
  flex: 1;
}

.agenda-event__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.agenda-event__title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
}

.agenda-event__badge {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-text-secondary);
  background-color: var(--color-badge-bg);
  padding: 4px 10px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.agenda-event__description {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  line-height: 1.5;
}

/* Event meta informatie */
.agenda-event__meta {
  display: flex;
  gap: var(--spacing-md);
}

.agenda-event__meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.agenda-event__meta-item span {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
}


/* ===========================================
   16. PREVIEW MODAL (Assets inline preview)
   =========================================== */

.portal-modal-overlay{
  position:fixed;
  inset:0;
  background: var(--color-overlay-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
  z-index: 9999;
}

.portal-modal{
  width: 100%;
  max-width: 980px;
  max-height: 90vh;
  background: var(--color-white);
  border-radius: 16px;
  overflow: hidden;
  display:flex;
  flex-direction: column;
  box-shadow: 0 18px 60px rgba(0,0,0,0.25);
}

.portal-modal__header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}

.portal-modal__title{
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-primary);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-modal__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.portal-modal__btn{
  border: 1px solid var(--color-primary);
  cursor: pointer;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 999px;
}

.portal-modal__btn--primary{
  background: var(--color-primary);
  color: var(--color-white);
}

.portal-modal__btn--secondary{
  background: transparent;
  color: var(--color-primary);
}

.portal-modal__btn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

.portal-modal__body{
  flex:1;
  background-color: var(--color-border);
  padding: 16px;
  overflow: auto;
}

.portal-modal__img{
  max-width: 100%;
  height: auto;
  display:block;
  margin: 0 auto;
  border-radius: 12px;
}

.portal-modal__video{
  width: 100%;
  max-height: 70vh;
  border-radius: 12px;
  background: #000;
}

.portal-modal__iframe{
  width: 100%;
  height: 70vh;
  border: 0;
  border-radius: 12px;
  background: var(--color-white);
}

.portal-modal__file{
  background: var(--color-white);
  border-radius: 12px;
  padding: 16px;
  font-family: var(--font-body);
  color: var(--color-text);
}



/* === Patch 20260109: mobile header + responsive grids + doc header actions === */

@media (max-width: 520px) {
  /* Prevent header overlap on small screens */
  .header {
    padding: 14px 16px;
  }
  .header__order-link span {
    display: none;
  }
  .header__order-link {
    padding: 8px 8px;
  }
  .header__logo-img {
    height: 18px;
  }

  /* News cards: stack vertically on phone */
  .news-grid {
    grid-template-columns: 1fr;
  }
}

.document-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.document-header__selector {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.document-header__share {
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
}

.news-page-section {
  padding: var(--spacing-lg);
}

.news-page-section__title {
  font-family: var(--font-heading);
  font-size: 22px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 var(--spacing-lg) 0;
}

.news-page-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

.infinite-loading {
  margin-top: var(--spacing-md);
  font-family: var(--font-body);
  color: #777;
}