/* ===== 123EVENTS.NL — merk-overrides bovenop de Pofo-basisstyling ===== */

:root {
  /* stuurt overal Pofo's "deep-pink" accentkleur (text-deep-pink, bg-deep-pink, border-color-deep-pink, ...) */
  --base-color: #e85d26;
}

body {
  font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
}

.alt-font {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
}

/* ===== TITEL-FORMATEN (pofo page-title schema) ===== */
.site-hero h1 { font-size: 2.875em; line-height: 1.15; }
.page-hero h1 { font-size: 2.875em; line-height: 1.15; }
.workshop-hero h1 { font-size: 2.875em; line-height: 1.15; }
h2 { font-size: 2em; line-height: 2.3125em; }

/* ===== KLANTLOGO'S (homepage) ===== */
.client-logo-row { row-gap: 10px; }
.client-logo {
  max-height: 40px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .55;
  transition: filter .25s ease, opacity .25s ease;
}
.client-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* ===== CATEGORIE-ACCENTKLEUREN (bestaan niet standaard in Pofo) ===== */
.tag--creatief, .cat-accent-creatief { color: #e85d26; }
.tag--muziek, .cat-accent-muziek { color: #8b5cf6; }
.tag--dans, .cat-accent-dans { color: #ec4899; }
.tag--sport, .cat-accent-sport { color: #10b981; }
.tag--theater, .cat-accent-theater { color: #f59e0b; }

.bg-creatief { background-color: #e85d26; }
.bg-muziek { background-color: #8b5cf6; }
.bg-dans { background-color: #ec4899; }
.bg-sport { background-color: #10b981; }
.bg-theater { background-color: #f59e0b; }

.badge-creatief { background-color: rgba(232, 93, 38, .1); color: #e85d26; }
.badge-muziek { background-color: rgba(139, 92, 246, .1); color: #8b5cf6; }
.badge-dans { background-color: rgba(236, 72, 153, .1); color: #ec4899; }
.badge-sport { background-color: rgba(16, 185, 129, .1); color: #10b981; }
.badge-theater { background-color: rgba(245, 158, 11, .1); color: #f59e0b; }

.badge-on-image .badge-creatief { background-color: #e85d26; color: #fff; }
.badge-on-image .badge-muziek { background-color: #8b5cf6; color: #fff; }
.badge-on-image .badge-dans { background-color: #ec4899; color: #fff; }
.badge-on-image .badge-sport { background-color: #10b981; color: #fff; }
.badge-on-image .badge-theater { background-color: #f59e0b; color: #fff; }

/* ===== HERO-GALLERY (workshop-detailpagina's): grote foto + kleinere thumbnails ernaast ===== */
.hero-gallery-main {
  height: 250px;
}

.hero-gallery-thumbs .col {
  height: 100px;
}

@media (min-width: 768px) {
  .hero-gallery-main {
    height: 350px;
  }

  .hero-gallery-thumbs .col {
    height: 110px;
  }
}

@media (min-width: 992px) {
  .hero-gallery-main {
    height: 500px;
  }

  .hero-gallery-thumbs {
    height: 100%;
  }

  .hero-gallery-thumbs .col {
    height: calc((100% - 2 * 0.5rem) / 3);
  }
}

/* ===== WORKSHOPS-OVERZICHT: alle kaarten en knoppen op gelijke hoogte, ongeacht tekstlengte ===== */
#workshop-grid .grid-item > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#workshop-grid .grid-item .padding-20px-all {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* titel: altijd ruimte voor 2 regels, langere titels worden afgekapt */
#workshop-grid .grid-item .padding-20px-all > div:first-child {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  line-height: 1.3;
}

/* omschrijving: altijd ruimte voor 4 regels, langere teksten worden afgekapt */
#workshop-grid .grid-item .padding-20px-all p.text-small {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 5.4em;
  line-height: 1.35;
}

/* knop altijd onderaan de kaart, ongeacht hoeveel tekst erboven staat */
#workshop-grid .grid-item .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ===== STICKY SIDEBAR (workshop-detailpagina's): "Interesse?" t/m contact blijft mee scrollen ===== */
/* de generieke `section {overflow:hidden}` regel breekt position:sticky, dus die zetten we hier terug */
.detail-layout-section {
  overflow: visible;
}
@media (min-width: 992px) {
  .workshop-sidebar-sticky {
    position: sticky;
    top: 100px;
    align-self: flex-start;
  }
}

/* ===== MOBIELE NAV: logo en hamburger hingen tegen de viewport-randen aan =====
   De Pofo-basisstyling zet op mobiel de padding van header nav .container op 0,
   en onze kolommen gebruiken ps-0/px-0 (geen gutter). Resultaat: logo en
   hamburger-icoon raakten letterlijk de rand van het scherm. Hier zetten we
   nette marges terug, alleen voor onze navbar. */
@media (max-width: 991px) {
  header nav.bootsnav .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ===== AANVRAAGFORMULIER (contact.html): kaart met schaduw en accentrand zodat het formulier opvalt op de lichtgrijze sectie-achtergrond ===== */
.contact-form-card {
  background: #fff;
  border-radius: 8px;
  border-top: 4px solid var(--base-color);
  box-shadow: 0 20px 50px rgba(0,0,0,.08);
  padding: 50px;
}
@media (max-width: 767px) {
  .contact-form-card { padding: 30px 20px; }
}
.contact-form-card .form-control {
  padding: 12px 18px;
  height: auto;
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  background-color: #fafafa;
}
.contact-form-card .form-control:focus {
  border-color: var(--base-color);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(232, 93, 38, .12);
}

/* ===== LOCATIETIP-CALLOUT (workshop-detailpagina's) ===== */
.locatietip-box {
  background: #fdf6f0;
  border-left: 4px solid var(--base-color);
  padding: 20px 25px;
  border-radius: 4px;
}