/* Contact page — Figma: Desktop 93:190 · Tablet 93:169 · Mobile 93:6 */

/* ---------- 01 header ---------- */
.c-head { position: relative; padding-top: 136px; }
.c-head::after { /* fade into the page colour, like the Figma "Fade" layer */
  content: ""; position: absolute; left: 0; right: 0; bottom: -72px; height: 192px; pointer-events: none;
  background: linear-gradient(180deg, rgba(22, 21, 20, 0) 0%, var(--bg-base) 62%);
}
.c-head .container { position: relative; z-index: 1; }

/* ---------- 02 info + map ---------- */
.c-info { position: relative; z-index: 1; padding-top: 72px; padding-bottom: var(--section-pad); }
.c-info__grid { display: flex; flex-direction: column; }

/* facts */
.c-facts { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.c-fact { display: flex; flex-direction: column; gap: 4px; }
.c-fact dd { margin: 0; }
.c-fact a { transition: color .2s; }
.c-fact a:hover { color: var(--text-primary); }

/* services */
.c-services { margin-top: 40px; }
.c-services h2 { font-weight: 500; }
.c-rows { margin-top: 8px; }
.c-rows .info-row { height: 40px; padding: 0; }
.c-rows .info-row .t-value { color: var(--text-primary); white-space: nowrap; }
.c-rows .info-row .t-label { white-space: nowrap; }
.c-socials { margin-top: 28px; }
.c-socials .socials svg { display: block; }
@media (max-width: 767px) {
  .c-socials .socials a { padding: 14px; margin: -14px; } /* 44 px tap targets */
}

/* map */
.c-map {
  position: relative; display: block; overflow: hidden; margin-top: 56px;
  aspect-ratio: 342 / 300; border-radius: var(--radius); box-shadow: var(--shadow-raised);
  background: var(--bg-raised);
}
.c-map__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.c-map:hover .c-map__img { transform: scale(1.03); }
.c-map:focus-visible { outline-offset: 4px; }
.c-map__pin { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
.c-map__pin svg { display: block; }
.c-map__label {
  position: absolute; left: calc(50% + 32px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; white-space: nowrap;
  background: linear-gradient(180deg, var(--bg-raised-top) 0%, var(--bg-raised-bottom) 100%);
  border-radius: var(--radius); box-shadow: 0 30px 30px rgba(0, 0, 0, .65);
}

@media (max-width: 374px) { /* narrow phones: label under the pin so it never gets clipped */
  .c-map__label { left: 50%; top: calc(50% + 28px); transform: translateX(-50%); align-items: center; }
}

/* sign photo */
.c-sign { margin-top: 32px; }
.c-sign__img { aspect-ratio: 342 / 400; height: auto; }
.c-sign figcaption { margin-top: 16px; }

/* ---------- 03 booking ---------- */
.c-book { padding-bottom: var(--section-pad); }
.c-book__panel {
  width: 100%; margin-inline: auto; padding: 36px 28px 32px; scroll-margin-top: 48px; /* 24 px + the reveal offset */
  display: flex; flex-direction: column; align-items: center;
}
.c-book__panel .t-h3 { text-shadow: var(--shadow-text); }
.c-form { width: 100%; margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.c-form .field { height: 60px; }
.c-form .field-row { gap: 16px; }
.c-form .field input, .c-form .field select, .c-form .field textarea {
  width: 100%; min-width: 0; height: 27px; padding-bottom: 8px; border-radius: 0; cursor: text;
  border-bottom-color: var(--line-strong); /* Figma Form field line = line/strong */
}
.c-form .field input:focus, .c-form .field select:focus, .c-form .field textarea:focus { border-bottom-color: var(--accent); }
.c-form .field select { cursor: pointer; }
.c-form .field select:invalid, .c-form .field select option[value=""] { color: var(--text-tertiary); }
.c-form .field select option { background: var(--bg-raised); color: var(--text-primary); }
.c-form .field textarea { min-height: 27px; resize: none; overflow: hidden; }
.c-form .field input[type="date"], .c-form .field input[type="time"] { cursor: pointer; }
.c-form .field input::-webkit-date-and-time-value { text-align: left; }
.c-form .field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.c-form .field input[type="number"]::-webkit-inner-spin-button,
.c-form .field input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.c-form .field.is-invalid input { border-bottom-color: var(--accent); }
.c-form__submit { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 16px; } /* 20 gap + 12 = 32 */
.c-form__submit .btn { width: 100%; min-height: 46px; }
.c-form__submit .btn:disabled { opacity: .5; cursor: default; transform: none; }
.c-form__note { text-align: center; transition: color .3s; }
.c-form.is-sent .c-form__note { color: var(--text-primary); }

/* ---------- tablet ---------- */
@media (min-width: 768px) {
  .c-head { padding-top: 184px; }
  .c-head::after { bottom: -96px; height: 236px; }
  .c-info { padding-top: 96px; }
  .c-info__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .c-map { grid-column: 1 / -1; grid-row: 1; margin-top: 0; aspect-ratio: 672 / 380; }
  .c-details { grid-column: 1; grid-row: 2; margin-top: 56px; }
  .c-sign { grid-column: 2; grid-row: 2; margin-top: 56px; }
  .c-sign__img { aspect-ratio: 328 / 394; }
  .c-sign figcaption { margin-top: 14px; }
  .c-socials { margin-top: 32px; }
  .c-map__label { left: calc(50% + 36px); gap: 4px; padding: 16px 20px; }

  .c-book__panel { max-width: 500px; padding: 48px 40px 44px; }
  .c-form { margin-top: 28px; }
  .c-form .field-row { gap: 24px; }
  .c-form__submit { margin-top: 16px; } /* 20 + 16 = 36 */
  .c-form__submit .btn { width: auto; }
}

/* ---------- desktop ---------- */
@media (min-width: 1200px) {
  .c-head { padding-top: 208px; }
  .c-head::after { bottom: -56px; height: 196px; }
  .c-info { padding-top: 56px; }
  .c-info__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; grid-template-rows: auto 1fr; }
  .c-details { grid-column: 1 / span 5; grid-row: 1 / span 2; margin-top: 0; }
  .c-map { grid-column: 7 / span 6; grid-row: 1; aspect-ratio: 528 / 400; }
  .c-sign {
    grid-column: 7 / span 6; grid-row: 2; margin-top: 24px;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 24px; align-items: end;
  }
  .c-sign__img { grid-column: 1 / span 2; aspect-ratio: 160 / 214; }
  .c-sign figcaption { grid-column: 3 / span 4; margin-top: 0; }
  .c-facts { gap: 24px; }
  .c-services { margin-top: 48px; }
  .c-rows { margin-top: 16px; }
  .c-socials { margin-top: 48px; }
  .c-map__label { left: calc(50% + 36px); gap: 2px; padding: 12px 20px; }

  .c-book { padding-top: var(--section-pad); }
  .c-book__panel { max-width: 528px; padding: 56px 48px; }
  .c-form { margin-top: 32px; gap: 24px; }
  .c-form__submit { margin-top: 8px; } /* 24 + 8 = 32 */
}