/* Conversie- en beslismodule voor merkpagina's (briefing par. 6)
   Kleuren volgen het bestaande TastyDaily-palet van de site. */

.fb-merkheader {
  --fb-groen: #5EAD39;
  --fb-donker: #243F2F;
  --fb-grijs: #858585;
  --fb-lijn: #e4e7e4;
  --fb-vlak: #f6f8f5;

  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin: 0 0 34px;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid var(--fb-lijn);
  border-radius: 20px;
}

@media (max-width: 880px) {
  .fb-merkheader {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 20px;
  }
}

/* ---------------------------------------------------- linkerkolom */

.fb-merkheader__eyebrow {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fb-groen);
}

.fb-merkheader__conclusie {
  margin: 0 0 18px;
  color: var(--fb-donker);
}

.fb-merkheader__conclusie p {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.6;
}

.fb-merkheader__conclusie p:last-child { margin-bottom: 0; }

/* Eerste alinea is het menselijke oordeel, die mag zwaarder wegen */
.fb-merkheader__conclusie p:first-child { font-size: 18px; }

.fb-merkheader__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fb-merkheader__badges li {
  margin: 0;
  padding: 7px 13px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--fb-donker);
  background: var(--fb-vlak);
  border: 1px solid var(--fb-lijn);
  border-radius: 999px;
}

/* Merk zonder eigen test: badge visueel neutraler, geen groen keurmerkgevoel */
.fb-merkheader--ongetest .fb-merkheader__eyebrow { color: var(--fb-grijs); }
.fb-merkheader--ongetest .fb-merkheader__badges li:first-child {
  background: #fff6e8;
  border-color: #f0dcc0;
}

/* --------------------------------------------------- rechterpaneel */

.fb-merkheader__paneel {
  padding: 20px;
  background: var(--fb-vlak);
  border: 1px solid var(--fb-lijn);
  border-radius: 16px;
}

/* Merkbeeld bovenin het paneel: visueel anker boven feiten en knop.
   Geen vaste beeldverhouding afdwingen, de merkbeelden lopen uiteen van
   brede banners (1280x299) tot bijna vierkant. Wel een maximum, zodat een
   hoog beeld het paneel niet uit elkaar trekt. */
.fb-merkheader__beeld {
  margin: -4px 0 16px;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
  background: #fff;
}

.fb-merkheader__beeld img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 210px;
  object-fit: cover;
  object-position: center;
}

.fb-merkheader__feiten { margin: 0 0 18px; }

.fb-merkheader__feiten > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--fb-lijn);
}

.fb-merkheader__feiten > div:last-child { border-bottom: 0; }

.fb-merkheader__feiten dt {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--fb-grijs);
}

.fb-merkheader__feiten dd {
  margin: 0;
  flex: 1 1 auto;
  text-align: right;
  font-size: 14px;
  line-height: 1.4;
  color: var(--fb-donker);
}

.fb-merkheader__prijsniveau { font-weight: 700; letter-spacing: 1px; }
.fb-merkheader__prijsniveau .is-aan { color: var(--fb-groen); }
.fb-merkheader__prijsniveau .is-uit { color: #c9d2c9; }

.fb-merkheader__prijs { display: block; font-size: 13px; }
.fb-merkheader__prijs small { display: block; color: var(--fb-grijs); font-size: 11px; }

/* ------------------------------------------------------------ CTA's */

.fb-merkheader__cta,
.fb-merkheader__cta-secundair {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}

.fb-merkheader__cta {
  color: #fff;
  background: var(--fb-donker);
}

.fb-merkheader__cta:hover,
.fb-merkheader__cta:focus-visible {
  background: var(--fb-groen);
  color: #fff;
}

.fb-merkheader__cta-secundair {
  margin-top: 9px;
  color: var(--fb-donker);
  background: transparent;
  border: 1px solid var(--fb-donker);
  font-weight: 600;
}

.fb-merkheader__cta-secundair:hover,
.fb-merkheader__cta-secundair:focus-visible {
  background: #fff;
  border-color: var(--fb-groen);
  color: var(--fb-groen);
}

/* Disclosure staat direct bij de knop, zoals de briefing voorschrijft */
.fb-merkheader__disclosure {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fb-grijs);
}

/* Link naar de testmethode, direct bij de testdatum. De claim "door ons getest"
   moet door te klikken zijn naar de uitleg. */
.fb-merkheader__methode {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fb-groen);
  text-decoration: underline;
}