/* A bonus's own page (/bonus/<slug>, site/bonus.html, api/_lib/bonus-page.mjs): the soft green of
   the home page hero with the provider's coin on the pavement, then the facts, the steps and the
   conditions as cards, and other bonuses below. Built on the tokens, topbar, chips, steps, buttons,
   coin and footer from styles.css, which the page loads first. */

/* The header's "Alle bonussen" button, as on the legal pages (legal.css). */
.topbar__cta {
  margin-left: auto;
}

@media (max-width: 859px) {
  .topbar__cta {
    padding: 10px 14px;
    font-size: 1rem;
  }
}

@media (max-width: 379px) {
  .topbar__cta svg {
    display: none;
  }
}

/* Hero, with a faint pavement fading out upwards like the legal pages' header. */
.bonus-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #f6fcf8 0%, #e2f4e9 100%);
}

.bonus-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.8) 2px, transparent 2px),
    linear-gradient(90deg, rgb(255 255 255 / 0.8) 2px, transparent 2px);
  background-position: center bottom;
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 75%);
  mask-image: linear-gradient(to top, #000, transparent 75%);
  pointer-events: none;
}

.bonus-hero__inner,
.bonus,
.bonus-more__inner {
  width: min(100% - 32px, 1080px);
  margin-inline: auto;
}

.bonus-hero__inner {
  position: relative;
  padding: 20px 0 34px;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 800;
}

.crumbs a {
  color: var(--green-700);
  text-decoration: none;
}

.crumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.crumbs__sep {
  color: var(--line-2);
}

.bonus-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 28px;
}

.bonus-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 4px 14px 4px 4px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line-2);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 800;
}

.bonus-hero__title {
  margin: 0;
  font: 700 clamp(2.125rem, 5vw, 3.5rem)/1.04 var(--display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.bonus-hero__amount {
  margin: 12px 0 0;
  color: var(--green-600);
  font: 700 clamp(2.25rem, 4.6vw, 3.25rem)/1.05 var(--display);
  letter-spacing: -0.02em;
}

.bonus-hero__upto {
  font-size: 0.45em;
  font-weight: 600;
  letter-spacing: 0;
}

.bonus-hero__note {
  color: var(--muted);
  font: 700 1rem/1.3 var(--sans);
  letter-spacing: 0;
  vertical-align: 0.4em;
}

.bonus-hero__task {
  max-width: 40em;
  margin: 18px 0 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.bonus-hero__chips {
  margin-top: 14px;
}

.bonus-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 24px;
}

/* "Link volgt snel" in the big button's place: flat, like in the list (styles.css .btn--soon). */
.btn--big.btn--soon,
.btn--big.btn--soon:active {
  box-shadow: none;
  translate: none;
}

/* The provider's coin, from the hero coins on the home page (styles.css .coin__*), standing alone. */
.bonus-coin {
  --s: 1.35;
  --k: 1;
  --d: 0s;
  position: relative;
  width: calc(92px * var(--s) * var(--k));
  margin: 18px 34px 22px 0;
}

/* An ended bonus: the coin has lost its shine and stops bobbing. */
.bonus-hero.is-ended .coin__face {
  filter: grayscale(1);
  opacity: 0.75;
}

.bonus-hero.is-ended .coin__body,
.bonus-hero.is-ended .coin__shadow {
  animation: none;
}

.bonus-hero.is-ended .bonus-hero__amount {
  color: var(--muted);
}

.bonus-ended {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 44em;
  margin: 22px 0 0;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: var(--orange-100);
  color: var(--orange-700);
  font-weight: 700;
}

.bonus-ended svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  stroke-width: 2;
}

.bonus-ended a {
  color: inherit;
  font-weight: 800;
  text-underline-offset: 3px;
}

/* Facts, steps and conditions. Wide screens: the facts beside the other two, staying in view; on
   phones the facts come first. */
.bonus {
  display: grid;
  gap: 18px;
  padding: 28px 0 44px;
}

@media (min-width: 900px) {
  .bonus {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    column-gap: 24px;
  }

  .bonus__facts {
    position: sticky;
    top: 20px;
    grid-column: 2;
    grid-row: 1 / span 3;
  }

  .bonus__card {
    grid-column: 1;
  }
}

.bonus__facts,
.bonus__card {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 20px 22px 22px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.bonus__facts {
  border: 2px solid var(--green-100);
  background: linear-gradient(135deg, var(--green-50) 0%, var(--surface) 75%);
}

.bonus__facts-title,
.bonus__card h2 {
  margin: 0;
  font: 600 1.375rem/1.2 var(--display);
}

.bonus__list {
  display: grid;
  margin: 0;
}

.bonus__list div {
  display: grid;
  grid-template-columns: 6.75em minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.bonus__list div:first-child {
  padding-top: 0;
  border-top: 0;
}

.bonus__list dt {
  padding-top: 0.2em;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bonus__list dd {
  margin: 0;
  font-weight: 800;
}

.bonus__facts .btn {
  width: 100%;
}

/* Other bonuses */
.bonus-more {
  padding: 44px 0 56px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.bonus-more__title {
  margin: 0;
  font: 700 clamp(1.625rem, 3vw, 2.125rem)/1.1 var(--display);
  letter-spacing: -0.02em;
}

.bonus-more__lead {
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 700;
}

/* Three to a row on a wide screen, which leaves room for long names and notes. */
.bonus-more__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  margin: 20px 0 24px;
  padding: 0;
  list-style: none;
}

.mini-bonus {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
  transition: translate 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.mini-bonus:hover {
  border-color: var(--green-100);
  box-shadow: var(--shadow-hover);
  translate: 0 -2px;
}

.mini-bonus__logo.row__logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: 1.375rem;
}

.mini-bonus__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mini-bonus__name {
  font: 600 1.125rem/1.15 var(--display);
}

.mini-bonus__meta {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-bonus__amount {
  color: var(--green-600);
  font: 700 1.375rem/1 var(--display);
  white-space: nowrap;
}

@media (max-width: 639px) {
  .bonus-hero__inner {
    padding: 14px 0 26px;
  }

  .crumbs {
    margin-bottom: 16px;
  }

  .bonus-hero__grid {
    gap: 8px 12px;
  }

  .bonus-coin {
    --k: 0.7;
    margin: 12px 22px 16px 0;
  }

  .bonus-hero__task {
    font-size: 1.0625rem;
  }

  .bonus-hero__actions .btn {
    width: 100%;
  }

  .bonus {
    padding-top: 20px;
  }

  .bonus__facts,
  .bonus__card {
    padding: 18px 18px 20px;
  }

  .bonus__list div {
    grid-template-columns: 6.5em minmax(0, 1fr);
  }

  .bonus-more {
    padding: 32px 0 40px;
  }
}