/* Detachering – kleuren en breekpunten zoals op de live site: tablet t/m 1024px, mobiel t/m 767px. */
.detachering-page { --det-blue: #6ec1e4; --det-green: #61ce70; --det-yellow: #f8f812; --det-display: "Archivo", var(--up-font-heading); --det-sans: "Montserrat", var(--up-font-body); }

/* Hero: tekst links op blauw, foto rechts. Net als live valt het lange woord uit de titel achter de foto weg. */
.detachering-hero__inner { display: flex; min-height: 100vh; }
.detachering-hero__text { background: var(--det-blue); display: flex; flex: 0 0 50%; flex-direction: column; justify-content: center; overflow: hidden; }
.detachering-hero__title { color: var(--det-green); font-family: var(--det-display); font-size: 94px; font-weight: 900; line-height: 100px; margin: 0 0 20px; text-align: center; text-transform: uppercase; }
.detachering-hero__intro { color: #fff; font-family: var(--det-sans); font-size: 26px; font-weight: 300; line-height: 38px; margin: 0 0 20px; padding: 0 8%; text-align: center; }
.detachering-hero__photo { background: url("../../img/photos/image.webp") center / cover no-repeat; flex: 0 0 50%; }

/* Munt met uitklapblokken */
.detachering-info__box { background: var(--det-blue); padding: 0 5%; }
.detachering-info__row { align-items: center; display: flex; gap: 20px; padding: 5% 0; }
.detachering-info__coin { flex: 0 1 40%; min-width: 0; }
.detachering-info__coin img { display: block; }
.detachering-toggles { border-top: 3px solid var(--det-yellow); flex: 0 1 68%; margin-left: calc(4.718% + 20px); min-width: 0; }
.detachering-toggle { border-bottom: 3px solid var(--det-yellow); }
.detachering-toggle + .detachering-toggle { margin-top: 16px; }
.detachering-toggle__heading { margin: 0; }
.detachering-toggle__button { background: none; border: 0; color: var(--det-yellow); display: block; font-family: var(--det-display); font-size: 34px; font-weight: 800; letter-spacing: -.45px; line-height: 1.2; padding: 35px 0; text-align: left; text-transform: uppercase; width: 100%; }
.detachering-toggle__icon { -webkit-text-stroke: 3.25px; float: right; font-size: 26px; height: 26px; letter-spacing: 0; line-height: 1; width: 26px; }
.detachering-toggle__icon::before { display: block; }
.detachering-toggle__icon--open { position: relative; right: 5px; }
.detachering-toggle__button.collapsed .detachering-toggle__icon--open, .detachering-toggle__button:not(.collapsed) .detachering-toggle__icon--closed { display: none; }
.detachering-toggle__body { color: #cfcfcf; font-family: var(--det-sans); font-size: 18px; line-height: 1.2; padding: 15px; }
.detachering-toggle__body p { margin-bottom: 20px; }
.detachering-toggle__body .detachering-gap { margin-bottom: calc(1.2em + 40px); }
.detachering-toggle__body .detachering-gap--double { margin-bottom: calc(2.4em + 60px); }

/* Afsluiter op de foto; de blauwe waas wordt sterker bij hover, zoals op de live site. */
.detachering-outro__box { background: #1b252f url("../../img/photos/dsc00439.webp") right center / cover no-repeat; padding: 0 5%; position: relative; }
.detachering-outro__box::before { background: linear-gradient(to top, var(--det-blue), rgba(242, 41, 91, 0)); content: ""; inset: 0; opacity: .2; position: absolute; transition: background-color .3s, opacity .3s; }
.detachering-outro__box:hover::before { background-color: var(--det-blue); opacity: .5; }
.detachering-outro__content { display: flex; flex-direction: column; gap: 40px; justify-content: center; padding: 8% 0; position: relative; }
.detachering-outro__title { color: var(--det-green); font-family: var(--det-display); font-size: 65px; font-weight: 800; line-height: 1; margin: 0 0 20px; text-align: center; text-transform: uppercase; }
.detachering-outro__text { color: #fff; font-family: "Rubik", var(--up-font-body); font-size: 35px; font-weight: 600; line-height: 1.2; margin: 0 0 20px; text-align: center; }
.detachering-highlight { color: var(--det-green); display: inline-block; position: relative; vertical-align: bottom; }
.detachering-highlight svg { height: calc(100% + 20px); left: 50%; overflow: visible; position: absolute; top: 50%; transform: translate(-50%, -50%); width: calc(100% + 20px); }
.detachering-highlight path { fill: none; stroke: currentColor; stroke-width: 9; }

@media (max-width: 1024.98px) {
  .detachering-hero__inner { flex-direction: column; }
  .detachering-hero__text { flex: 0 0 auto; overflow: visible; padding: 15% 0; }
  .detachering-hero__title { font-size: 78px; line-height: 1; }
  .detachering-hero__intro { font-size: 20px; line-height: 1.2; padding: 0 13%; }
  .detachering-hero__photo { display: none; }
  .detachering-info__row { flex-direction: column; gap: 70px; padding: 10% 0; }
  .detachering-info__coin { flex: 0 0 auto; width: 40%; }
  .detachering-toggles { flex: 0 0 auto; margin: 151px 0 0; width: 100%; }
  .detachering-toggle__button { font-size: 26px; }
  .detachering-outro__content { padding: 15% 0 10%; }
  .detachering-outro__title { font-size: 48px; }
}

@media (max-width: 767.98px) {
  .detachering-hero__title { font-size: min(41px, 12vw); }
  .detachering-hero__intro { padding: 0 5%; }
  .detachering-info__row { gap: 50px; padding: 20% 0; }
  .detachering-info__coin { width: 100%; }
  .detachering-toggles { margin-top: 131px; }
  .detachering-toggle__button { font-size: 20px; line-height: 1.3; }
  .detachering-outro__content { margin: 0 auto; max-width: 500px; padding: 25% 0 15%; }
  .detachering-outro__title { font-size: 26px; }
}