/* ======================================================
   STUDIO#RE — COMPONENTEN
   Labels, buttons, pijlen, tekstlinks en beeldkaarten
======================================================= */


/* ======================================================
   LABELS
======================================================= */

.re-label,
.home-section-label,
.project-section-label,
.projects-eyebrow {
  margin: 0 0 30px;

  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.re-label--light {
  color: rgba(255, 255, 255, 0.72);
}

.re-label--dark {
  color: rgba(17, 17, 17, 0.56);
}


/* ======================================================
   STANDAARDBUTTON
======================================================= */

.re-button,
.home-button,
.projects-button,
.sr-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  min-width: 0;
  height: 43px;
  padding: 0 18px 0 20px;

  border: 1px solid;
  border-radius: 999px;

  text-decoration: none;
  white-space: nowrap;

  font-family: var(--re-font);
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.01em;

  cursor: pointer;

  transition:
    color 0.35s ease,
    background-color 0.35s ease,
    border-color 0.35s ease,
    transform var(--re-transition);
}

.re-button:hover,
.home-button:hover,
.projects-button:hover,
.sr-nav-cta:hover {
  transform: translateY(-2px);
}


/* Licht op donkere achtergrond */

.re-button--light,
.home-button-light,
.sr-nav-cta {
  color: var(--re-white);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.4);

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.re-button--light:hover,
.home-button-light:hover,
.sr-nav-cta:hover {
  color: var(--re-text);
  background: var(--re-white);
  border-color: var(--re-white);
}


/* Donker op lichte achtergrond */

.re-button--dark,
.home-button-dark,
.projects-button {
  color: var(--re-text);
  background: transparent;
  border-color: rgba(17, 17, 17, 0.3);
}

.re-button--dark:hover,
.home-button-dark:hover,
.projects-button:hover {
  color: var(--re-white);
  background: var(--re-text);
  border-color: var(--re-text);
}


/* Grotere CTA voor beeldsecties */

.re-button--large,
.project-button {
  gap: 32px;

  min-width: 260px;
  height: 50px;
  padding: 0 20px 0 25px;

  font-size: 14px;
}


/* ======================================================
   BUTTONPIJL
======================================================= */

.re-button-arrow,
.home-button-arrow,
.projects-button-arrow,
.sr-nav-arrow,
.project-arrow {
  display: inline-flex;

  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.re-button-arrow svg,
.home-button-arrow svg,
.projects-button-arrow svg,
.sr-nav-arrow svg,
.project-arrow svg {
  width: 100%;
  height: 100%;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ======================================================
   SECUNDAIRE TEKSTLINK
======================================================= */

.re-text-link,
.home-secondary-link,
.home-text-link,
.projects-intro-link {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: inherit;
  text-decoration: none;

  font-size: 13px;
  line-height: 1;
  font-weight: 500;
}

.re-text-link > span,
.home-text-link > span,
.projects-intro-link > span {
  position: relative;
}

.re-text-link > span::after,
.home-text-link > span::after,
.projects-intro-link > span::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;

  height: 1px;

  background: currentColor;

  transform: scaleX(0);
  transform-origin: right center;

  transition: transform var(--re-transition);
}

.re-text-link:hover > span::after,
.home-text-link:hover > span::after,
.projects-intro-link:hover > span::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.re-text-link svg,
.home-text-link svg,
.projects-intro-link svg,
.home-secondary-link svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    opacity var(--re-transition-fast),
    transform var(--re-transition);
}

.re-text-link:hover svg,
.home-text-link:hover svg,
.projects-intro-link:hover svg {
  transform: translateX(4px);
}


/* Hero secondary link: tekst neemt plaats van pijl over */

.home-secondary-link {
  margin-left: 22px;

  color: rgba(255, 255, 255, 0.76);

  overflow: hidden;
}

.home-secondary-link span {
  transition:
    color var(--re-transition-fast),
    transform 0.45s var(--re-ease);
}

.home-secondary-link:hover {
  color: var(--re-white);
}

.home-secondary-link:hover span {
  transform: translateX(24px);
}

.home-secondary-link:hover svg {
  opacity: 0;
  transform: translateX(12px);
}


/* ======================================================
   RONDE PIJLKNOP OP BEELDEN
======================================================= */

.re-circle-arrow,
.home-project-open,
.projects-card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;
  flex: 0 0 46px;

  color: var(--re-white);
  background: rgba(0, 0, 0, 0.14);

  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 50%;

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  transition:
    color 0.35s ease,
    background-color 0.35s ease,
    border-color 0.35s ease,
    transform var(--re-transition);
}

.re-circle-arrow svg,
.home-project-open svg,
.projects-card-arrow svg {
  width: 17px;
  height: 17px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.re-image-link:hover .re-circle-arrow,
.home-project:hover .home-project-open,
a.projects-card-link:hover .projects-card-arrow {
  color: var(--re-text);
  background: var(--re-white);
  border-color: var(--re-white);

  transform: rotate(45deg);
}


/* ======================================================
   BEELDOVERLAY
======================================================= */

.re-image-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.68) 0%,
      rgba(0, 0, 0, 0.26) 30%,
      rgba(0, 0, 0, 0.03) 65%
    );

  pointer-events: none;
}


/* ======================================================
   PILL / STATUS
======================================================= */

.re-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 34px;
  padding: 0 14px;

  border: 1px solid currentColor;
  border-radius: 999px;

  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.re-pill--glass {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 255, 255, 0.3);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}


/* ======================================================
   SCHEIDINGSLIJN
======================================================= */

.re-divider {
  width: 100%;
  height: 1px;

  background: var(--re-line-dark);
}

.re-divider--light {
  background: var(--re-line-light);
}


/* ======================================================
   MOBIEL
======================================================= */

@media (max-width: 900px) {

  .re-button--large,
  .project-button {
    width: 100%;
    max-width: 320px;
  }

}

@media (max-width: 520px) {

  .re-button,
  .home-button,
  .projects-button {
    min-width: 0;
  }

  .re-circle-arrow,
  .home-project-open,
  .projects-card-arrow {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

}