/* ==========================================================================
   Componenten: knoppen, stickers & badges, chips, speelse lijnen, foto's
   ========================================================================== */

/* --------------------------------------------------------------------------
   Knoppen (CTA-buttons, brandbook punt 5)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 3.25rem;
  padding: 0.8rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn .material-symbols-rounded {
  font-size: 1.25em;
  transition: transform var(--dur) var(--ease);
}

.btn:hover .material-symbols-rounded[aria-hidden] { transform: translateX(3px); }

/* Op hele smalle schermen mag de tekst in een knop afbreken */
@media (max-width: 400px) {
  .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

.btn--small {
  min-height: 2.75rem;
  padding: 0.55rem 1.15rem;
  font-size: 0.975rem;
}

/* Primair: Berry voor actie, met "sticker"-diepte */
.btn--primary {
  background: var(--berry);
  color: var(--white);
  box-shadow: 0 4px 0 var(--berry-deep);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--berry-deep);
}

.btn--primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--berry-deep);
}

.btn--outline {
  background: transparent;
  color: var(--forest);
  border-color: var(--forest);
}

.btn--outline:hover {
  background: var(--forest);
  color: var(--white);
}

.btn--light {
  background: var(--white);
  color: var(--forest);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
}

.btn--light:hover { transform: translateY(-2px); }

.btn--ghost-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.8);
}

.btn--ghost-light:hover {
  background: var(--white);
  color: var(--forest);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.3em;
  min-height: 2.75rem; /* tikvlak van minimaal 44px */
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.975rem;
  color: var(--forest);
  text-decoration: none;
}

.link-arrow .material-symbols-rounded {
  font-size: 1.15em;
  transition: transform var(--dur) var(--ease);
}

.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover .material-symbols-rounded { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Stickers & badges (brandbook: vierkant, driehoek, cirkel)
   -------------------------------------------------------------------------- */
.sticker {
  --size: 2.75rem;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  color: var(--white);
  background: var(--forest);
}

.sticker .material-symbols-rounded { font-size: calc(var(--size) * 0.5); }

.sticker--sm { --size: 1.1rem; }
.sticker--lg { --size: 3.75rem; }

.sticker--circle { border-radius: 50%; }
.sticker--square { border-radius: 22%; }

.sticker--triangle {
  clip-path: polygon(50% 4%, 97% 94%, 3% 94%);
  border-radius: 0;
}

.sticker--triangle .material-symbols-rounded {
  font-size: calc(var(--size) * 0.4);
  transform: translateY(18%);
}

.sticker--forest { background: var(--forest); }
.sticker--blush  { background: var(--blush); }
.sticker--apple  { background: var(--apple); }
.sticker--berry  { background: var(--berry); }
.sticker--mint   { background: var(--mint); color: var(--forest); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xs);
  line-height: 1.3;
}

.badge--berry { background: var(--berry); color: var(--white); }

/* --------------------------------------------------------------------------
   Filter-chips
   -------------------------------------------------------------------------- */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.chip {
  min-height: 2.5rem;
  padding: 0.4rem 1.05rem;
  border: 2px solid rgba(36, 98, 67, 0.25);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--forest);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.chip:hover { border-color: var(--forest); }

.chip.is-active {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   Speelse lijnen (swoosh uit het logo): een handje vol, geen confetti
   -------------------------------------------------------------------------- */
.swoosh path {
  fill: none;
  stroke-linecap: round;
}

.swoosh__a { stroke: var(--blush); stroke-width: 8; }
.swoosh__b { stroke: var(--apple); stroke-width: 11; }
.swoosh__c { stroke: var(--forest); stroke-width: 9; }

.swoosh--light .swoosh__c { stroke: var(--white); }

/* --------------------------------------------------------------------------
   Foto's (organische vorm, met nette fallback als een beeld niet laadt)
   -------------------------------------------------------------------------- */
.photo {
  position: relative;
  overflow: hidden;
  background: var(--mint);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo.is-broken img { visibility: hidden; }

.photo.is-broken::after {
  content: "sports_soccer";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Material Symbols Rounded";
  font-size: 3.5rem;
  color: var(--forest);
  opacity: 0.35;
}

/* --------------------------------------------------------------------------
   Ronde knoppen voor sliders (pijlen, pauze/afspelen)
   -------------------------------------------------------------------------- */
.slider-controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.round-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border: 2px solid var(--forest);
  border-radius: 50%;
  background: var(--white);
  color: var(--forest);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.round-btn .material-symbols-rounded {
  font-size: 1.5rem;
  font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
}

.round-btn:hover {
  background: var(--forest);
  color: var(--white);
}

.round-btn:active { transform: scale(0.94); }

.round-btn--accent {
  width: 3.75rem;
  height: 3.75rem;
  border-color: var(--berry);
  background: var(--berry);
  color: var(--white);
  box-shadow: 0 4px 0 var(--berry-deep);
}

.round-btn--accent:hover {
  background: var(--berry-deep);
  color: var(--white);
}

.round-btn--light {
  width: 2.75rem;
  height: 2.75rem;
  border-color: rgba(36, 98, 67, 0.35);
  background: transparent;
}

/* --------------------------------------------------------------------------
   Boogvorm (foto's in collage-stijl)
   Altijd een perfecte halve cirkel bovenaan, op elke breedte:
   de ouder krijgt container-type, de boog gebruikt 50cqw (= halve breedte).
   Te gebruiken als .arch-frame > .arch, of via de bestaande klassen hieronder.
   -------------------------------------------------------------------------- */
.arch-frame,
.collage__item figure,
.unique__figure,
.day__figure,
.page-hero__figure,
.camp-arch__frame {
  container-type: inline-size;
}

.arch,
.collage__photo,
.unique__photo,
.day__photo,
.page-hero__photo,
.camp-arch__all {
  --arch-foot: 1.75rem;
  /* Terugval voor oudere browsers */
  border-radius: 50% 50% var(--arch-foot) var(--arch-foot) / 42% 42% var(--arch-foot) var(--arch-foot);
  border-radius: 50cqw 50cqw var(--arch-foot) var(--arch-foot);
}