/* ==========================================================
   L'ART — HERO MET FORMULIER
========================================================== */

.lart-hero {
  position: relative;

  width: 100%;

  min-height: clamp(620px, 48vw, 740px);

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;

  background: #262727;
}


/* ==========================================================
   ACHTERGRONDAFBEELDING
========================================================== */

.lart-hero .wp-block-cover__image-background {
  position: absolute;

  inset: 0;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;

  object-fit: cover !important;
  object-position: center !important;
}


/* ==========================================================
   ZWARTE OVERLAY — 40%
========================================================== */

.lart-hero .wp-block-cover__background {
  position: absolute;

  inset: 0;

  background: #000000 !important;

  opacity: 0.40 !important;
}


/* ==========================================================
   COVER CONTENT
========================================================== */

.lart-hero > .wp-block-cover__inner-container {
  position: relative;

  z-index: 2;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================
   BINNENSTE HERO CONTAINER
========================================================== */

.lart-hero-inner {
  width: 100%;
  max-width: 1380px;

  min-height: clamp(620px, 48vw, 740px);

  margin: 0 auto !important;

  padding:
    clamp(4rem, 6vw, 6rem)
    clamp(1.5rem, 5vw, 5rem) !important;

  display: flex;

  align-items: center;
}


/* ==========================================================
   TWEE KOLOMMEN
========================================================== */

.lart-hero-grid {
  width: 100%;

  margin: 0 !important;

  display: flex !important;

  align-items: stretch !important;

  gap: clamp(3rem, 6vw, 7rem) !important;
}


/* ==========================================================
   LINKER KOLOM
========================================================== */

.lart-hero-copy {
  min-height: 500px;

  margin: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  align-items: flex-start !important;
}


/* ==========================================================
   EYEBROW
========================================================== */

.lart-hero .lart-hero-eyebrow {
  margin:
    0
    0
    1rem !important;

  color: #EFEFEF !important;

  font-family: var(--lart-font) !important;

  font-size: 15px !important;

  font-weight: 600 !important;

  line-height: 1.2 !important;

  letter-spacing: 0.13em !important;

  text-transform: uppercase;
}


/* ==========================================================
   H1
========================================================== */

.lart-hero .lart-hero-title {
  width: 100%;
  max-width: 650px;

  margin:
    0
    0
    1.5rem !important;

  color: #EFEFEF !important;

  font-family: var(--lart-heading-font) !important;

  font-size: clamp(46px, 4.1vw, 60px) !important;

  font-weight: 300 !important;

  line-height: 0.96 !important;

  letter-spacing: -0.015em !important;

  text-transform: uppercase;

  text-wrap: balance;
}


/* ==========================================================
   PLATTE TEKST
========================================================== */

.lart-hero .lart-hero-text {
  width: 100%;
  max-width: 550px;

  margin: 0 !important;

  color: #EFEFEF !important;

  font-family: var(--lart-font) !important;

  font-size: 15px !important;

  font-weight: 400 !important;

  line-height: 1.7 !important;
}


/* ==========================================================
   FORCEER LINKER TEKST OP #EFEFEF
========================================================== */

.lart-hero .lart-hero-copy,
.lart-hero .lart-hero-copy *,
.lart-hero .lart-hero-copy .has-text-color {
  color: #EFEFEF !important;
}


/* ==========================================================
   RECHTER KOLOM

   Het formulier staat hiermee exact gecentreerd
   binnen de rechterhelft van de hero.
========================================================== */

.lart-hero-form-column {
  min-height: 500px;

  margin: 0 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;
}


/* ==========================================================
   FORMULIER VLAK
========================================================== */

.lart-hero-form {
  width: 100%;
  max-width: 430px;

  margin: auto !important;

  /* boven/onder | links/rechts */
  padding:
    1rem
    clamp(2rem, 2.8vw, 2.75rem) !important;

  background: rgba(239, 239, 239, 0.80);

  border-radius: 18px;

  box-shadow:
    0 22px 60px
    rgba(0, 0, 0, 0.20);
}


/* ==========================================================
   FORMINATOR — BASIS
========================================================== */

.lart-hero-form .forminator-ui {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  font-family: var(--lart-font) !important;
}


/* ==========================================================
   FORMINATOR — RIJEN
========================================================== */

.lart-hero-form .forminator-row {
  margin-bottom: 1rem !important;
}


/* ==========================================================
   FORMINATOR — KOLOMMEN
========================================================== */

.lart-hero-form .forminator-col {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* ==========================================================
   FORMINATOR — LABELS
========================================================== */

.lart-hero-form .forminator-label {
  margin-bottom: 0.45rem !important;

  color: #262727 !important;

  font-family: var(--lart-font) !important;

  font-size: 13px !important;

  font-weight: 600 !important;

  line-height: 1.4 !important;
}


/* ==========================================================
   FORMINATOR — VELDEN
========================================================== */

.lart-hero-form .forminator-input,
.lart-hero-form input[type="text"],
.lart-hero-form input[type="tel"],
.lart-hero-form input[type="email"],
.lart-hero-form select,
.lart-hero-form textarea {
  width: 100% !important;

  min-height: 46px !important;

  padding:
    0.75rem
    0.9rem !important;

  background: #FDFDFD !important;

  color: #262727 !important;

  border:
    1px solid
    rgba(38, 39, 39, 0.15) !important;

  border-radius: 6px !important;

  outline: none !important;

  box-shadow: none !important;

  font-family: var(--lart-font) !important;

  font-size: 14px !important;
}


/* ==========================================================
   PLACEHOLDERS
========================================================== */

.lart-hero-form input::placeholder,
.lart-hero-form textarea::placeholder {
  color:
    rgba(38, 39, 39, 0.55) !important;

  opacity: 1;
}


/* ==========================================================
   FOCUS
========================================================== */

.lart-hero-form .forminator-input:focus,
.lart-hero-form input:focus,
.lart-hero-form select:focus,
.lart-hero-form textarea:focus {
  border-color: #452C42 !important;

  outline: none !important;

  box-shadow:
    0
    0
    0
    2px
    rgba(69, 44, 66, 0.10) !important;
}


/* ==========================================================
   FORMINATOR SELECT
========================================================== */

.lart-hero-form .select2-container {
  width: 100% !important;
}

.lart-hero-form .select2-selection {
  min-height: 46px !important;

  background: #FDFDFD !important;

  border:
    1px solid
    rgba(38, 39, 39, 0.15) !important;

  border-radius: 6px !important;

  box-shadow: none !important;
}

.lart-hero-form .select2-selection__rendered {
  min-height: 46px;

  padding:
    0
    0.9rem !important;

  display: flex;

  align-items: center;

  color: #262727 !important;

  font-family: var(--lart-font) !important;

  font-size: 14px !important;
}


/* ==========================================================
   VERPLICHT VELD
========================================================== */

.lart-hero-form .forminator-required {
  color: #452C42 !important;
}


/* ==========================================================
   FOUTMELDINGEN
========================================================== */

.lart-hero-form .forminator-error-message {
  color: #452C42 !important;

  font-family: var(--lart-font) !important;

  font-size: 12px !important;
}


/* ==========================================================
   SUBMIT BUTTON
========================================================== */

.lart-hero-form .forminator-button-submit {
  width: 100% !important;

  min-height: 46px !important;

  margin-top: 0.25rem !important;

  padding:
    0.8rem
    1.25rem !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  border: none !important;

  border-radius: 6px !important;

  background: #452C42 !important;

  color: #EFEFEF !important;

  box-shadow: none !important;

  font-family: var(--lart-font) !important;

  font-size: 13px !important;

  font-weight: 600 !important;

  line-height: 1 !important;

  cursor: pointer;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}


/* ==========================================================
   SUBMIT BUTTON HOVER
========================================================== */

.lart-hero-form .forminator-button-submit:hover {
  background: #C8D1D9 !important;

  color: #452C42 !important;

  transform: translateY(-1px);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1000px) {

  .lart-hero-inner {
    padding:
      4rem
      2rem !important;
  }

  .lart-hero-grid {
    gap: 3rem !important;
  }

  .lart-hero-copy,
  .lart-hero-form-column {
    min-height: 460px;
  }

  .lart-hero .lart-hero-title {
    font-size: 46px !important;
  }

  .lart-hero-form {
    max-width: 390px;

    padding:
      2rem !important;
  }
}


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

@media (max-width: 781px) {

  .lart-hero {
    min-height: auto;
  }


  /* Achtergrond iets minder extreem donker op klein scherm */

  .lart-hero .wp-block-cover__background {
    opacity: 0.40 !important;
  }


  /* Container */

  .lart-hero-inner {
    min-height: auto;

    padding:
      4rem
      1.25rem
      2rem !important;
  }


  /* Eerst tekst, daarna formulier */

  .lart-hero-grid {
    display: flex !important;

    flex-direction: column !important;

    align-items: stretch !important;

    gap: 2.5rem !important;
  }


  /* Kolommen volledig breed */

  .lart-hero-copy,
  .lart-hero-form-column {
    flex-basis: 100% !important;

    width: 100% !important;

    max-width: 100% !important;

    min-height: auto;
  }


  /* Linker tekst */

  .lart-hero-copy {
    display: flex !important;

    align-items: flex-start !important;

    justify-content: flex-start !important;
  }

  .lart-hero .lart-hero-eyebrow {
    font-size: 14px !important;
  }

  .lart-hero .lart-hero-title {
    width: 100%;
    max-width: 100%;

    margin-bottom: 1.25rem !important;

    font-size: 42px !important;

    line-height: 0.98 !important;
  }

  .lart-hero .lart-hero-text {
    width: 100%;
    max-width: 100%;

    font-size: 15px !important;

    line-height: 1.65 !important;
  }


  /* Formulier */

  .lart-hero-form-column {
    display: block !important;
  }

  .lart-hero-form {
    width: 100%;
    max-width: 100%;

    margin: 0 !important;

    padding:
      0.5rem
      1.5rem !important;

    border-radius: 14px;
  }


  /* Velden */

  .lart-hero-form .forminator-input,
  .lart-hero-form input,
  .lart-hero-form select,
  .lart-hero-form textarea,
  .lart-hero-form .select2-selection {
    min-height: 44px !important;
  }


  /* Button */

  .lart-hero-form .forminator-button-submit {
    min-height: 44px !important;
  }
}