/*
 * projectFeatures + projectFeature — "Wat hebben we voor … gedaan?" met drie
 * punten eronder.
 *
 * Maten 1-op-1 van samdesign.nl (R9). De 1210px hieronder is een eigen grens
 * van de bestaande site: daar gaan de drie kolommen onder elkaar, ver boven onze
 * gebruikelijke 1024.
 */

.projectFeatures {
  margin-block: 100px;
}

.projectFeaturesTitle {
  margin-bottom: 75px;
  text-align: center;
}

/*
 * Twee secties op samdesign.nl hebben hier een compactere kop dan de gewone
 * sectiekop: kleiner, zwaarder en met de regels op elkaar.
 */
.projectFeaturesTitleCompact {
  margin-top: 0;
  font-size: 40px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -2px;
}

/*
 * Een kop die op een vraagteken eindigt krijgt in main.css een roze stip over
 * de punt van dat vraagteken (`.headingQuery`, van /offerte-aanvraag/). Op een
 * projectpagina heeft het vraagteken gewoon de kleur van de kop, dus zetten we
 * die stip hier uit.
 */
.projectFeaturesTitle .headingQuery::after {
  content: none;
}

.projectFeaturesList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 75px;
  padding-left: 0;
  margin: 0;
  list-style: none;
  /* Zie de reset: een lege marker houdt de lijst een lijst voor Safari zonder
     role="list", en dus zonder W3C-melding (R11). */
  list-style-type: "";
}

.projectFeature {
  width: 100%;
  max-width: var(--projectFeatureWidth, 30%);
  padding-inline: var(--projectFeatureInset, 0px);
}

/*
 * Het roze streepje voor de kop. Dezelfde tekening als op het portfolio-archief
 * (--portfolioMark), hier 25px en met een negatieve marge 7px buiten de kolom.
 * Als achtergrond en niet als los element: het is versiering, geen inhoud.
 * Bewust niet in main.css — de minifier van global.min.css struikelt over een
 * url() met haakjes erin, en die zitten in de matrix() hieronder
 * (docs/openstaand.md).
 */
.projectFeatureTitle {
  --projectFeatureMark: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29.085' height='28.859' viewBox='0 0 29.085 28.859'%3E%3Cpath d='M2.862-8.921l.251-2.438a.951.951,0,0,1,.311-.974L21.01-29.725c.284-.237.608-.208,1.11-.18l.458.06,1.894.157a.956.956,0,0,1,.217,1.6L4.4-8.428a.956.956,0,0,1-1.541-.493' transform='matrix(0.914,-0.407,0.407,0.914,9.556,37.517)' fill='%23dc0356'/%3E%3C/svg%3E");

  display: flex;
  align-items: center;
  margin: 0 0 30px;
  font-size: 25px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -1.25px;
}

.projectFeatureTitle::before {
  content: '';
  flex: none;
  width: 25px;
  height: 25px;
  margin-left: -7px;
  background: var(--projectFeatureMark) center / cover no-repeat;
}

/* Deze alinea is kleiner en lichter dan de lopende tekst elders, op elke maat. */
.projectFeatureText {
  font-size: 17px;
  font-weight: 300;
  line-height: 30px;
}

@media (max-width: 1210px) {
  .projectFeaturesList {
    flex-direction: column;
  }

  .projectFeature {
    max-width: 500px;
    margin-inline: auto;
  }
}

@media (max-width: 1024px) {
  .projectFeatures {
    margin-block: 50px;
  }
}

@media (max-width: 767px) {
  /*
   * Het overstek van de kolom is op mobiel niet meer dan 20px. Twee projecten
   * (dram, aanbiedercheck) zetten hier 75px, en dat is bedoeld voor drie
   * kolommen naast elkaar: onder elkaar op 390px blijft er dan 200px tekst over
   * in plaats van 310, en een kop als "Responsive design toegepast" valt buiten
   * zijn kolom. Op samdesign.nl staat het overstek onder 768px op 20px — en op
   * nul bij de secties die op desktop ook nul hebben. Vandaar min() en geen
   * vaste waarde: zo blijven beide gevallen kloppen.
   */
  .projectFeature {
    padding-inline: min(var(--projectFeatureInset, 0px), 20px);
  }

  .projectFeaturesTitle {
    font-size: 32px;
    line-height: 35px;
    letter-spacing: -1.6px;
  }

  .projectFeatureTitle {
    font-size: 23px;
    line-height: 29px;
    letter-spacing: -1.15px;
  }

  .projectFeaturesTitleCompact {
    font-size: 29px;
    line-height: 1.2;
    letter-spacing: -1.45px;
  }
}