/*
 * Green Nuggets — merkpagina
 * ----------------------------------------
 * Bron: docs/design/wietzadenshop-greennuggets.html
 *
 * Donkere fotohero, licht merkverhaal met vier pijlers, de eigen collectie,
 * een donkere statementband en een slot naar de keuzehulp.
 */

/* ----------------------------------------
 * PAGINA
 * ---------------------------------------- */

.merkpagina {
  background-color: var(--color-bg-lite);
  color:            var(--color-text-lite);
}

/*
 * Anders dan op de homepage begint de hero hier ónder de header — in het
 * ontwerp is de header op deze pagina donker en dekkend. De ruimte die
 * .wzs-inner erboven zet blijft dus staan.
 */

/* ----------------------------------------
 * HERO
 * ---------------------------------------- */

.brandhero {
  position:         relative;
  display:          flex;
  align-items:      flex-end;
  min-height:       560px;
  overflow:         hidden;
  background-color: var(--color-bg);
  color:            var(--color-text);
}

.brandhero__media {
  position: absolute;
  inset:    0;
  overflow: hidden;
}

.brandhero__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  opacity:    0.6;
  transform:  scale(1.02);
  animation:  wzs-kenburns 18s ease-out forwards;
}

/* Naar onderen toe zwaarder, zodat de tekst onderin leesbaar blijft. */
.brandhero::after {
  content:    "";
  position:   absolute;
  inset:      0;
  background: linear-gradient(
                180deg,
                rgba(8, 10, 7, 0.55) 0%,
                rgba(8, 10, 7, 0.30) 40%,
                rgba(8, 10, 7, 0.92) 100%
              );
}

.brandhero__inner {
  position:       relative;
  z-index:        2;
  width:          100%;
  padding-top:    70px;
  padding-bottom: 66px;
}

/* In de donkere hero is de eyebrow feller dan de lite-variant eromheen. */
.merkpagina .brandhero__eyebrow {
  margin-bottom: var(--space-5);
  color:         var(--color-primary-hover);
}

.brandhero__title {
  margin-bottom:  var(--space-5);
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      clamp(48px, 8vw, 104px);
  line-height:    0.9;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.brandhero__intro {
  max-width:     52ch;
  margin-bottom: 30px;
  font-size:     19px;
  color:         rgba(244, 245, 240, 0.82);
}

/* ----------------------------------------
 * COLLECTIE
 * ---------------------------------------- */

.gn-collectie {
  padding-bottom: 90px;
}

.gn-collectie__head {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--space-5);
  margin-bottom:   34px;
}

.gn-collectie__title {
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      clamp(28px, 3.6vw, 44px);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.gn-collectie__lead {
  max-width:  48ch;
  margin-top: var(--space-2);
  font-size:  15px;
  color:      var(--color-text-muted-lite);
}

/*
 * Zelfde keuze als op de categoriepagina: op een licht vlak is de knop mint
 * met groene tekst, en pas bij hover vol groen.
 */
.merkpagina .product-card__add {
  background-color: var(--color-primary-soft);
  color:            var(--color-primary-dark);
}

.merkpagina .product-card__add:hover {
  background-color: var(--color-primary);
  color:            var(--color-on-primary);
}

/* ----------------------------------------
 * STATEMENT
 * ---------------------------------------- */

.gn-statement {
  background-color: var(--color-bg);
  color:            var(--color-text);
}

.gn-statement__inner {
  padding-top:    90px;
  padding-bottom: 90px;
  text-align:     center;
}

.gn-statement__quote {
  max-width:      18ch;
  margin:         0 auto;
  font-family:    var(--font-heading);
  font-weight:    var(--font-extrabold);
  font-size:      clamp(26px, 4vw, 50px);
  line-height:    1.05;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.gn-statement__quote span {
  color: var(--color-primary);
}

.gn-statement__by {
  margin-top:     22px;
  font-size:      var(--text-sm);
  letter-spacing: var(--tracking-wider);
  color:          var(--color-text-muted);
}

/* ----------------------------------------
 * RESPONSIVE
 * ---------------------------------------- */

/* Het verhaal, de pijlers en het slot staan in components.css — die deelt de
   merkpagina met Over ons, inclusief hun responsive gedrag. */

@media (max-width: 560px) {

  .brandhero {
    min-height: 460px;
  }
}