/* ==========================================================================
   Verdon contact page (modules/contactform/views/templates/widget/contactform.tpl), 2026-11.
   Built after the approved mockup (without the owl). Loaded on the contact page only, by templates/contact.tpl.
   ========================================================================== */
.vcontact {
  --vcontact-green: var(--green-1, #1d6f02);
  --vcontact-green-dark: var(--green-24, #25641c);
  --vcontact-accent: #7cc242;
  --vcontact-tint: #eaf5e3;
  --vcontact-radius: 1rem;
  --vcontact-shadow: 0 0.25rem 1.5rem rgb(16 40 20 / 7%);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin: 1rem 0 0;
  color: #222;
}
/* The newsletter card under the page already brings its own top space (for the photo that overflows it),
   so the page column drops its 60px bottom padding here: address card to newsletter goes from ~165px to ~75px */
#contact #center-column {
  padding-bottom: 1rem;
}
.vcontact svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vcontact__card {
  border-radius: var(--vcontact-radius);
  background: #fff;
  box-shadow: var(--vcontact-shadow);
}

/* Section headings with the short green bar under them */
.vcontact__heading {
  margin: 0 0 1.5rem;
  color: #111;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}
.vcontact__heading::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 0.25rem;
  margin-top: 0.625rem;
  border-radius: 1rem;
  background: var(--vcontact-accent);
}
.vcontact__heading--center {
  text-align: center;
}
.vcontact__heading--center::after {
  margin-right: auto;
  margin-left: auto;
}

/* ---------- Top: intro with channels (left) and the form (right) ---------- */
.vcontact__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 2rem;
}
.vcontact__title {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.25rem;
  margin: 1.25rem 0 0.875rem;
  color: #1a1a1a;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
}
.vcontact__spark {
  width: 2rem;
  height: 2rem;
  margin-top: -0.75rem;
  color: var(--vcontact-accent);
  stroke-width: 3;
}
.vcontact__lead {
  max-width: 28rem;
  margin: 0;
  color: #333;
  font-size: 1.125rem;
  line-height: 1.5;
}
.vcontact__channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.vcontact__channel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.125rem 1.125rem 1.25rem;
  border-radius: 0.875rem;
  background: #fff;
  box-shadow: var(--vcontact-shadow);
}
.vcontact__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.875rem;
  border-radius: 50%;
  background: var(--vcontact-tint);
  color: var(--vcontact-green);
}
.vcontact__dot svg {
  width: 1.375rem;
  height: 1.375rem;
}
.vcontact__channel-title {
  color: #111;
  font-size: 1.0625rem;
  font-weight: 700;
}
.vcontact__channel-value {
  margin-top: 0.125rem;
  color: #222;
  font-size: 1.0625rem;
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.vcontact__channel-value:hover {
  color: var(--vcontact-green);
}
.vcontact__channel-note {
  margin-top: 0.375rem;
  color: #6b6b6b;
  font-size: 0.875rem;
}
.vcontact__channel-text {
  margin-top: 0.125rem;
  color: #333;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.vcontact__arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
  color: var(--vcontact-green);
  font-weight: 700;
  text-decoration: none;
}
.vcontact__arrow-link:hover {
  text-decoration: underline;
}
.vcontact__arrow-link svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* Form card */
.vcontact__form-card {
  padding: 1.5rem 1.5rem 1.75rem;
}
.vcontact__card-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 1.25rem;
  color: #111;
  font-size: 1.375rem;
  font-weight: 700;
}
.vcontact__card-title svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--vcontact-green);
}
.vcontact__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 0.875rem;
}
/* Fields: the label sits inside like a placeholder (with a red star) and hides once the field has a value */
.vcontact__field {
  position: relative;
  margin-bottom: 0.875rem;
}
.vcontact__field > label {
  position: absolute;
  top: 0.75rem;
  left: 0.875rem;
  color: #6b6b6b;
  font-size: 0.875rem;
  line-height: 1.2;
  pointer-events: none;
}
.vcontact__field > label span {
  color: #d32f2f;
}
.vcontact__field > input:not(:placeholder-shown) + label,
.vcontact__field > textarea:not(:placeholder-shown) + label,
.vcontact__field > select:valid + label {
  display: none;
}
.vcontact__form .form-control,
.vcontact__form .form-select {
  min-height: 2.75rem;
  border: 1px solid #d9ddd8;
  border-radius: 0.5rem;
  color: #222;
  font-size: 0.9375rem;
}
.vcontact__form textarea.form-control {
  min-height: 7.5rem;
  padding-top: 0.75rem;
  resize: vertical;
}
.vcontact__form .form-control:focus,
.vcontact__form .form-select:focus {
  border-color: var(--vcontact-green);
  box-shadow: 0 0 0 0.2rem rgb(29 111 2 / 15%);
}
.vcontact__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
}
.vcontact__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3rem;
  margin-top: 0.375rem;
  border-radius: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
}
.vcontact__submit svg {
  width: 1.375rem;
  height: 1.375rem;
}

/* ---------- Team ---------- */
.vcontact__team .vcontact__heading {
  margin-bottom: 1rem;
}
.vcontact__team-lead {
  margin: 0 0 1.75rem;
  color: #444;
  font-size: 1rem;
  text-align: center;
}
.vcontact__people {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vcontact__person {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.875rem;
  background: #fff;
  box-shadow: var(--vcontact-shadow);
  text-align: center;
}
.vcontact__avatar {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 20 / 21;
  border-radius: 0.875rem 0.875rem 0 0;
  object-fit: cover;
  background: var(--vcontact-tint);
}
.vcontact__person-name {
  padding: 0.875rem 0.5rem 0.125rem;
  color: #222;
  font-size: 1rem;
  line-height: 1.3;
}
.vcontact__person-role {
  padding: 0 0.5rem 1rem;
  color: #111;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

/* ---------- About ---------- */
.vcontact__about {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  align-items: center;
  gap: 2.5rem;
  padding: 1.5rem 1.5rem 1.5rem 2rem;
}
.vcontact__facts {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vcontact__facts li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  color: #222;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.vcontact__facts svg {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  color: var(--vcontact-green);
}
.vcontact__facts--more {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e1e5df;
}
.vcontact__about-link {
  color: var(--vcontact-green);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}
.vcontact__about-link:hover {
  color: var(--vcontact-green-dark);
}
.vcontact__photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 17rem;
  border-radius: 0.875rem;
  object-fit: cover;
}

/* ---------- Address and map ---------- */
.vcontact__address {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: 2rem;
  padding: 1.25rem 1.25rem 1.25rem 2rem;
  margin-top: -1.5rem;
}
.vcontact__address-title {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0 0 1rem;
  color: #111;
  font-size: 1.25rem;
  font-weight: 700;
}
.vcontact__address-title svg {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--vcontact-green);
}
.vcontact__postal {
  margin: 0 0 1.5rem 2.375rem;
  color: #222;
  font-size: 1rem;
  font-style: normal;
  line-height: 1.6;
}
.vcontact__maps-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  margin-left: 2.375rem;
  padding: 0 1.125rem;
  border-width: 1.5px;
  border-radius: 0.5rem;
  font-weight: 700;
}
.vcontact__maps-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}
.vcontact__map {
  display: block;
  width: 100%;
  height: 11rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--vcontact-tint);
}

/* Desktop: the intro column is as tall as the form card and the channel cards sit at its bottom,
   so the channel cards and the form card end on the same line */
@media (min-width: 1200px) {
  .vcontact__top {
    align-items: stretch;
  }
  .vcontact__intro {
    display: flex;
    flex-direction: column;
  }
  .vcontact__channels {
    flex: 1 1 auto;
    align-content: end;
  }
}

/* ---------- Smaller desktops and tablets ---------- */
@media (max-width: 1199.98px) {
  .vcontact__people {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .vcontact__channels {
    grid-template-columns: minmax(0, 1fr);
  }
  /* One channel per row: dot on the left, text on the right */
  .vcontact__channel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    align-items: center;
    padding: 0.875rem 1rem;
  }
  .vcontact__dot {
    grid-row: 1 / span 3;
    margin: 0;
  }
  .vcontact__channel > :not(.vcontact__dot) {
    grid-column: 2;
    justify-self: start;
  }
  .vcontact__channel-note,
  .vcontact__arrow-link {
    margin-top: 0.125rem;
  }
}

@media (max-width: 991.98px) {
  .vcontact {
    gap: 2.25rem;
  }
  .vcontact__top,
  .vcontact__about,
  .vcontact__address {
    grid-template-columns: minmax(0, 1fr);
  }
  .vcontact__people {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vcontact__about {
    gap: 1.5rem;
    padding: 1.5rem;
  }
  .vcontact__photo {
    grid-row: 1;
    height: auto;
    min-height: 0;
    aspect-ratio: 12 / 5;
  }
  .vcontact__address {
    gap: 1.25rem;
    margin-top: -1rem;
    padding: 1.5rem;
  }
  .vcontact__map {
    height: 15rem;
  }
}

/* ---------- Phones ---------- */
@media (max-width: 575.98px) {
  .vcontact {
    gap: 2rem;
    margin-top: 0.5rem;
  }
  .vcontact__title {
    margin-top: 0.5rem;
  }
  .vcontact__lead {
    font-size: 1rem;
  }
  .vcontact__channels {
    margin-top: 1.25rem;
  }
  .vcontact__form-card {
    padding: 1.25rem 1rem 1.5rem;
  }
  .vcontact__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .vcontact__heading {
    font-size: 1.5rem;
  }
  .vcontact__people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .vcontact__person-name {
    padding: 0.625rem 0.375rem 0.125rem;
    font-size: 0.875rem;
  }
  .vcontact__person-role {
    padding: 0 0.375rem 0.75rem;
    font-size: 0.875rem;
  }
  .vcontact__about,
  .vcontact__address {
    padding: 1.125rem;
  }
  .vcontact__address-title {
    align-items: flex-start;
    font-size: 1.125rem;
  }
  .vcontact__postal,
  .vcontact__maps-btn {
    margin-left: 0;
  }
  .vcontact__maps-btn {
    justify-content: center;
    width: 100%;
  }
}