/* ==========================================================================
   Contact — Figma "Contact - Page" 659:1493 (1920 x 2637)
     title        340
     photo band   611  → 1264
     intro        1386
     form         1414 → 2075
     footer       2075 → 2637
   ========================================================================== */

.contact { position: relative; height: 207.5rem; background: var(--c-page); }

/* The booking form asks more than the enquiry form, so the page is taller.  Its
   rows: name (one row, two halves), email, phone, service, guests, date+time
   (one row, two halves) = 6 rows against the enquiry form's 4, plus a consent
   group of three lines instead of one.  Everything else about the page is the
   contact page. */
.contact--booking { height: 234.5rem; }

/* Two fields on one row, the way the old booking form paired first/last name
   and date/time.  The gutter is the same 3rem the consent row uses. */
.field--half  { display: inline-block; width: calc(50% - 1.5rem); vertical-align: top; }
.field--right { margin-left: 3rem; }

/* A <select> is never "empty" to `:placeholder-shown`, and neither is a date
   input, so those keep their caption up from the start — same rule as the
   date field. */
.field__input option { font-family: var(--f-body); }
select.field__input {
  appearance: none;
  background: transparent;
  border-radius: 0;
  cursor: pointer;
}

/* The consent group: three lines rather than the enquiry form's one.  The base
   .contact__consent is a flex row, which would lay the three side by side, so
   the group resets to a block and each line is its own flex row. */
.contact__consent.contact__consent--group { display: block; border: 0; margin: 9.5rem 0 0; padding: 0; }
.contact__consent-legend {
  padding: 0;
  margin-bottom: 1.6rem;
  font-family: var(--f-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption, 1.6rem);
  color: #3d3e4a;
}
.contact__consent-row { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.2rem; }

/* The -0.3rem nudge on .contact__consent-text reproduces a 3px offset the
   Figma frame carries for the enquiry form's single consent line.  Inherited
   by the three-line group it read as a mistake: the box is 3rem tall, the
   caption's line about 1.9rem, and top-aligning the two with the caption
   pulled up as well left the words sitting in the upper third of the box.
   So the caption gets a comfortable line height of its own and the BOX is
   moved to sit on the centre of the caption's first line — half the
   difference between the two, which keeps working when the box shrinks and
   when the caption wraps to two or three lines on a phone.  Centring the
   whole row instead would float the box beside the middle of a wrapped
   paragraph, which is worse. */
.contact__consent--group .contact__consent-text { margin: 0; line-height: 2.2rem; }
.contact__consent--group .contact__consent-row input {
  margin-top: calc((2.2rem - var(--consent-box)) / 2);
}
.contact__consent-row:last-child { margin-bottom: 0; }
.contact__consent-row input { flex: 0 0 auto; }
.contact__consent--group + .contact__submit { margin-top: 4rem; }

.contact__title {
  position: absolute;
  left: 6.3rem;
  top: 34rem;
  width: 138.2rem;
  font-size: var(--fs-display-xxl);
  line-height: var(--lh-display-xxl);
  letter-spacing: var(--ls-display-xxl);
  color: var(--c-grey-150);
}

.contact__band {
  position: absolute;
  left: 0.1rem;
  top: 61.1rem;
  width: 191.9rem;
  height: 65.3rem;
  margin: 0;
  overflow: hidden;
  /* Leaflet stacks its own panes at 400 and its controls at 1000, and those
     numbers are absolute unless something contains them: with the band at
     `z-index: auto` they were measured against the ROOT, so the map and its
     zoom buttons painted straight over the overlay menu (z-index 90) and cut
     it off at the band's top edge.  A z-index of 0 paints the band exactly
     where `auto` did but makes it a stacking context, so Leaflet's numbers
     stay inside it. */
  z-index: 0;
}
.contact__band img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The band was a flat screenshot of Google's grey map style, desaturated to
   nothing (mean saturation 0.009, mean luma 234 -- a pale grey plate).  The
   live map keeps that same picture: pale land, grey water, the village names
   and the winery's frog mark on the spot.  Everything else the style simply
   never draws -- see MAP_STYLE in js/contact-form.js. */
.contact__map {
  width: 100%;
  height: 100%;
  background: var(--c-page);
}
.contact__map canvas { outline: none; }

/* The frog mark, dropped straight on the point -- the same 64px badge the flat
   plate carried, centred on the coordinate rather than hung from a tip.  The
   selector is scoped to the band because `.contact__band img` above still
   claims every image in there at 100% x 100%, and a marker is an image: left
   unscoped, the frog filled the whole panel. */
.contact__band .contact__pin { display: block; width: 6.4rem; height: 6.4rem; }

/* MapLibre's furniture, brought down to the page's voice: the zoom buttons in
   the site's interface face at the site's ink, and the attribution -- which the
   tile licence requires -- set small and quiet rather than removed. */
.contact__map .maplibregl-ctrl-group {
  border: 0;
  border-radius: 0.4rem;
  background: var(--c-page);
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
}
.contact__map .maplibregl-ctrl-group button { width: 4rem; height: 4rem; }
.contact__map .maplibregl-ctrl-group button + button { border-top: 1px solid rgba(0, 0, 0, 0.08); }
.contact__map .maplibregl-ctrl-group button:hover { background: #f0f0f0; }

.contact__map .maplibregl-ctrl-attrib {
  font-family: var(--f-body);
  font-size: 1.1rem;
  background: rgba(252, 252, 252, 0.8);
  color: #7a7a7a;
}
.contact__map .maplibregl-ctrl-attrib a { color: #5a5a5a; }

.contact__intro {
  position: absolute;
  left: 8.5rem;
  top: 138.6rem;
  width: 93rem;
  font-family: var(--f-editorial);
  font-weight: var(--fw-light);
  font-size: var(--fs-editorial);
  line-height: var(--lh-statement);
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  color: #676767;
}

/* ---- Form (Figma 659:1549 – 659:1585) ----------------------------------
   Figma draws each field as a caption sitting on a 740px rule, 74px apart.
   The caption doubles as the field's label: it rides up out of the way once
   the field has focus or content, so the resting state matches the design
   and the label never disappears while typing.                            */
.contact__form {
  position: absolute;
  left: 111.5rem;
  top: 141.4rem;
  width: 74rem;
}

.field { position: relative; height: 7.4rem; }

/* A date or a time input is never empty-looking — the browser paints its own
   placeholder into it — so `:placeholder-shown` never matches and the caption
   would sit on top of it.  These fields keep the caption up from the start. */
.field--filled .field__label {
  transform: translateY(-1.9rem) scale(0.7);
  color: var(--c-grey-500);
}

.field__label {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--f-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: normal;
  color: #3d3e4a;
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) linear;
}

.field__input {
  display: block;
  width: 100%;
  height: 3.4rem;
  padding: 0;
  border: 0;
  border-bottom: 0.15rem solid var(--c-ink);
  border-radius: 0;
  background: none;
  font-family: var(--f-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: 2.4rem;
  color: var(--c-ink);
  appearance: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}

textarea.field__input { height: 3.4rem; resize: none; overflow: hidden; }

.field__input:focus { outline: none; border-bottom-color: var(--c-xynisteri); }

.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
  transform: translateY(-1.9rem) scale(0.7);
  color: var(--c-grey-500);
}

.field__error {
  position: absolute;
  left: 0;
  top: 3.8rem;
  font-family: var(--f-body);
  font-size: 1.4rem;
  line-height: 2rem;
  color: #a03232;
  opacity: 0;
  transition: opacity var(--dur-fast) linear;
}

.field.is-invalid .field__error { opacity: 1; }
.field.is-invalid .field__input { border-bottom-color: #a03232; }

/* Consent row (Figma 659:1573) — checkbox 30 x 30 at 1115 / 1805 */
/* The box size is a custom property because the alignment of the caption
   beside it is derived from it; responsive.css shrinks the box below 1367
   and the alignment follows on its own rather than drifting. */
.contact__consent {
  --consent-box: 3rem;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 9.5rem;             /* 1805 − 1710 */
}

.contact__consent input {
  flex: none;
  width: var(--consent-box);
  height: var(--consent-box);
  margin: 0;
  border: 0.1rem solid var(--c-grey-500);
  border-radius: 0;
  background: none;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) linear, border-color var(--dur-fast) linear;
}
.contact__consent input:checked {
  background: var(--c-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fcfcfc' stroke-width='2'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E") center / 1.8rem no-repeat;
  border-color: var(--c-ink);
}
.contact__consent input:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.contact__consent.is-invalid input { border-color: #a03232; }

.contact__consent-text {
  margin: -0.3rem 0 0;            /* caption top 1802 vs box top 1805 */
  font-family: var(--f-body);
  font-weight: var(--fw-medium);
  font-size: 1.5rem;
  line-height: normal;
  color: var(--c-grey-500);
}
.contact__consent-text a { color: inherit; text-decoration: underline; }

.contact__submit { margin: 7.9rem 0 0 -4rem; }   /* button 1075 / 1917 */

.contact__status {
  margin: 2rem 0 0;
  min-height: 3rem;
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
}
.contact__status:empty { margin: 0; min-height: 0; }