/* ==========================================================================
   Cases-overzicht (/cases/) — pagina-specifieke styles
   ========================================================================== */

/* ---- Hero ---- */
.cases-hero { padding-top: 76px; padding-bottom: 80px; }
.cases-hero__ring { width: 2200px; height: 2200px; }
.cases-hero__glow { width: 540px; height: 540px; }
.cases-hero__title { font-weight: 900; font-size: 72px; line-height: 1.04; margin: 0; text-wrap: balance; }
.cases-hero__lead { max-width: 620px; }

/* ---- Case grid sectie ---- */
.cases-grid { padding-top: 40px; padding-bottom: 96px; }
.cases-grid__inner { display: flex; flex-direction: column; gap: 40px; }
.cases-grid__watermark { font-size: 200px; }

.cases-filter { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.cases-filter__label {
  font-size: 14px; color: #999; font-weight: 500; margin-right: 8px;
  letter-spacing: 1px; text-transform: uppercase;
}

.case-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.case-card { overflow: hidden; display: flex; flex-direction: column; text-decoration: none; }
.case-card__body { padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.case-card__cat {
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--c-red);
}
.case-card h3 { font-weight: 700; font-size: 21px; margin: 0; color: var(--c-black-2); }
.case-card p { margin: 0; font-size: 16px; line-height: 1.6; color: #555; }

/* extra "beeld volgt"-varianten (naast de gedeelde .ph--grad/--dark/--orange) */
.ph--red-dark { background: linear-gradient(135deg, rgba(228,0,58,0.78), rgba(13,13,13,0.8)), repeating-linear-gradient(45deg, #ddd 0 14px, #ccc 14px 28px); }
.ph--orange-dark { background: linear-gradient(135deg, rgba(243,146,0,0.8), rgba(13,13,13,0.75)), repeating-linear-gradient(45deg, #ddd 0 14px, #ccc 14px 28px); }

/* "Jouw project als volgende case?"-kaart */
/* Heel blok is klikbaar; hover geeft de link zijn underline */
.case-cta {
  border: 1px dashed #cfccc5; border-radius: var(--r-card);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 14px; padding: 36px;
  text-decoration: none;
}
.case-cta:hover .case-cta__link { text-decoration: underline; text-underline-offset: 4px; }
.case-cta__icon {
  width: 52px; height: 52px; border-radius: 13px; background: rgba(228,0,58,0.1);
  display: flex; align-items: center; justify-content: center;
}
.case-cta__icon .material-symbols-outlined { font-size: 27px; color: var(--c-red); }
.case-cta p { margin: 0; font-size: 17px; line-height: 1.6; color: #777; text-wrap: pretty; }
.case-cta__link { color: var(--c-red); font-weight: 700; font-size: 16px; text-decoration: none; }
.case-cta__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   Responsive — tablet (834-ontwerp)
   ========================================================================== */
@media (max-width: 1080px) {
  .cases-hero__title { font-size: 52px; }
  .cases-grid__watermark { font-size: 144px; }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Responsive — mobiel (390-ontwerp)
   ========================================================================== */
@media (max-width: 700px) {
  .cases-hero { padding-top: 46px; padding-bottom: 48px; }
  .cases-hero__ring { height: 1210px; }
  .cases-hero__glow { height: 297px; }
  .cases-hero__title { font-size: 32px; }

  .cases-grid { padding-top: 24px; padding-bottom: 58px; }
  .cases-filter { margin-bottom: 24px; }
  .cases-grid__watermark { font-size: 90px; }

  .case-grid { grid-template-columns: 1fr; }
}