/* =========================================================
   SIX NINE — CONTACT
   File: assets/css/base/contact.css

   Shared components:
   - navbar
   - mobile menu
   - footer
   - typography
   - buttons

   are owned by global.css
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

.contact-page {
  background:
    var(--color-ivory);

  color:
    var(--color-black);
}

.contact-page main {
  position: relative;

  overflow: clip;
}


/* =========================================================
   HERO
   ========================================================= */

.contact-hero {
  position: relative;

  padding:
    160px
    0
    clamp(
      90px,
      11vw,
      150px
    );

  background:
    var(--color-ivory);
}

.contact-hero__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.82fr)
    minmax(0, 1.18fr);

  gap:
    clamp(
      50px,
      8vw,
      120px
    );

  align-items: end;
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.contact-hero__content {
  display: grid;

  gap: 28px;

  padding-bottom: 18px;
}

.contact-hero__title {
  max-width: 760px;

  margin: 0;

  font-family:
    var(--font-display);

  font-size:
    clamp(
      5rem,
      9vw,
      9rem
    );

  font-weight: 500;

  line-height: 0.84;

  letter-spacing: -0.065em;
}


/* =========================================================
   HERO ADDRESS
   ========================================================= */

.contact-hero__address {
  display: grid;

  gap: 12px;

  max-width: 500px;

  margin-top: 12px;
}

.contact-hero__address > span {
  color:
    var(--color-gold);

  font-size: 0.66rem;
  font-weight: 700;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}

.contact-hero__address address {
  margin: 0;

  color:
    var(--text-secondary);

  font-style: normal;

  font-size: 0.94rem;

  line-height: 1.75;
}


/* =========================================================
   HERO ACTIONS
   ========================================================= */

.contact-hero__actions {
  display: flex;
  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

  margin-top: 6px;
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.contact-hero__visual {
  display: grid;

  gap: 14px;

  margin: 0;
}

.contact-hero__image {
  position: relative;

  min-height: 660px;

  overflow: hidden;

  background:
    var(--color-graphite);
}

.contact-hero__image::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 52%,
      rgba(12, 12, 13, 0.25) 100%
    );

  pointer-events: none;
}

.contact-hero__image img {
  width: 100%;
  height: 100%;

  min-height: inherit;

  display: block;

  object-fit: cover;
  object-position: center;

  transition:
    transform
    var(--duration-slow)
    var(--ease-premium);
}

.contact-hero__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  color:
    var(--text-muted);

  font-size: 0.64rem;
  font-weight: 600;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


/* =========================================================
   DIRECT CONTACT
   ========================================================= */

.contact-direct {
  padding:
    clamp(
      100px,
      13vw,
      180px
    )
    0;

  background:
    var(--color-black);

  color:
    var(--color-white);
}

.contact-direct__header {
  display: grid;

  gap: 20px;

  max-width: 800px;

  margin-bottom:
    clamp(
      48px,
      7vw,
      80px
    );
}

.contact-direct__grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 1px;

  border:
    1px solid
    var(--border-dark);

  background:
    var(--border-dark);
}


/* =========================================================
   DIRECT CONTACT CARD
   ========================================================= */

.contact-direct-card {
  position: relative;

  min-height: 360px;

  display: flex;
  flex-direction: column;

  padding: 28px;

  overflow: hidden;

  background:
    var(--color-black);

  color:
    var(--color-white);

  transition:
    background-color
      var(--duration-normal)
      var(--ease-premium);
}

.contact-direct-card::before {
  content: "";

  position: absolute;

  right: -190px;
  bottom: -190px;

  width: 330px;
  height: 330px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(185, 154, 91, 0.16),
      transparent 70%
    );

  transform:
    scale(0.8);

  transition:
    transform
    700ms
    var(--ease-premium);

  pointer-events: none;
}

.contact-direct-card--padel::before {
  background:
    radial-gradient(
      circle,
      rgba(255, 46, 138, 0.18),
      transparent 70%
    );
}

.contact-direct-card--coffee::before {
  background:
    radial-gradient(
      circle,
      rgba(106, 74, 52, 0.5),
      transparent 70%
    );
}

.contact-direct-card__number {
  position: relative;

  z-index: 2;

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

  font-family:
    var(--font-display);

  font-size: 1rem;
}

.contact-direct-card__content {
  position: relative;

  z-index: 2;

  display: grid;

  gap: 14px;

  margin-top: auto;
}

.contact-direct-card__content h3 {
  margin: 0;

  font-family:
    var(--font-display);

  font-size:
    clamp(
      2rem,
      3vw,
      3rem
    );

  font-weight: 500;

  line-height: 0.98;

  letter-spacing: -0.035em;
}

.contact-direct-card__content p {
  max-width: 320px;

  margin: 0;

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

  font-size: 0.8rem;

  line-height: 1.7;
}

.contact-direct-card__icon {
  position: absolute;

  top: 28px;
  right: 28px;

  z-index: 2;
}

.contact-direct-card__icon svg {
  width: 21px;
  height: 21px;

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

  transition:
    transform
    var(--duration-normal)
    var(--ease-premium);
}


/* =========================================================
   LOCATION
   ========================================================= */

.contact-location {
  padding:
    clamp(
      110px,
      14vw,
      190px
    )
    0;

  background:
    var(--color-ivory);
}

.contact-location__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 0.42fr);

  gap:
    clamp(
      40px,
      8vw,
      120px
    );

  align-items: end;

  margin-bottom:
    clamp(
      54px,
      8vw,
      92px
    );
}

.contact-location__header > div {
  display: grid;

  gap: 20px;
}

.contact-location__header > p {
  max-width: 430px;
}


/* =========================================================
   LOCATION LAYOUT
   ========================================================= */

.contact-location__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.78fr)
    minmax(0, 1.22fr);

  gap: 18px;

  align-items: stretch;
}


/* =========================================================
   VENUE / ARRIVAL PHOTO
   ========================================================= */

.contact-location__building {
  display: grid;

  grid-template-rows:
    1fr
    auto;

  min-height: 720px;

  background:
    var(--color-black);

  color:
    var(--color-white);
}

.contact-location__building-image {
  position: relative;

  min-height: 560px;

  overflow: hidden;

  background:
    var(--color-graphite);
}

.contact-location__building-image::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 58%,
      rgba(12, 12, 13, 0.2) 100%
    );

  pointer-events: none;
}

.contact-location__building-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  transition:
    transform
    var(--duration-slow)
    var(--ease-premium);
}


/* =========================================================
   BUILDING META
   ========================================================= */

.contact-location__building-meta {
  display: grid;

  grid-template-columns:
    0.8fr
    1.2fr;

  gap: 32px;

  padding: 28px;
}

.contact-location__building-meta > div {
  display: grid;

  gap: 10px;
}

.contact-location__building-meta strong {
  font-family:
    var(--font-display);

  font-size: 1.8rem;
  font-weight: 500;

  line-height: 1;
}

.contact-location__building-meta p {
  margin: 0;

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

  font-size: 0.8rem;

  line-height: 1.6;
}


/* =========================================================
   MAP PANEL
   ========================================================= */

.contact-location__map-panel {
  display: grid;

  grid-template-rows:
    minmax(560px, 1fr)
    auto;

  min-height: 720px;

  border:
    1px solid
    var(--border-light);

  background:
    var(--color-white);
}

.contact-location__map {
  position: relative;

  min-height: 560px;

  overflow: hidden;

  background:
    #ddd7cb;
}

.contact-location__map iframe {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  border: 0;

  filter:
    grayscale(0.18)
    saturate(0.86)
    contrast(0.96);
}


/* =========================================================
   MAP INFO
   ========================================================= */

.contact-location__map-info {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 30px;

  align-items: end;

  padding: 28px;
}

.contact-location__address {
  display: grid;

  gap: 12px;

  max-width: 520px;
}

.contact-location__address address {
  margin: 0;

  color:
    var(--text-secondary);

  font-style: normal;

  font-size: 0.82rem;

  line-height: 1.7;
}

.contact-location__map-info .btn {
  white-space: nowrap;
}


/* =========================================================
   INQUIRY
   ========================================================= */

.contact-inquiry {
  padding:
    clamp(
      110px,
      14vw,
      190px
    )
    0;

  background:
    var(--color-black);

  color:
    var(--color-white);
}

.contact-inquiry__grid {
  display: grid;

  grid-template-columns:
    minmax(300px, 0.72fr)
    minmax(0, 1.28fr);

  gap:
    clamp(
      60px,
      10vw,
      150px
    );

  align-items: start;
}


/* =========================================================
   INQUIRY INTRO
   ========================================================= */

.contact-inquiry__intro {
  position: sticky;

  top: 120px;

  display: grid;

  gap: 25px;
}

.contact-inquiry__intro > p {
  max-width: 430px;

  color:
    rgba(
      255,
      255,
      255,
      0.55
    );
}

.contact-inquiry__meta {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  max-width: 470px;

  margin-top: 8px;
}

.contact-inquiry__meta span {
  display: inline-flex;
  align-items: center;

  min-height: 32px;

  padding:
    0
    12px;

  border:
    1px solid
    var(--border-dark);

  border-radius:
    var(--radius-pill);

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

  font-size: 0.62rem;
  font-weight: 600;

  letter-spacing: 0.05em;
}


/* =========================================================
   FORM WRAPPER
   ========================================================= */

.contact-inquiry__form-wrapper {
  padding:
    clamp(
      34px,
      5vw,
      58px
    );

  background:
    var(--color-ivory);

  color:
    var(--color-black);
}

.contact-form {
  display: grid;

  gap: 30px;
}

.contact-form__row {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 22px;
}


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

.contact-form .form-label {
  display: flex;
  align-items: center;

  gap: 4px;
}

.contact-form .form-label span {
  color:
    var(--color-gold);
}


/* =========================================================
   FORM CONTROLS
   ========================================================= */

.contact-form .form-control {
  width: 100%;

  min-height: 58px;

  padding:
    15px
    0;

  border: 0;

  border-bottom:
    1px solid
    var(--border-light);

  border-radius: 0;

  background:
    transparent;

  color:
    var(--color-black);

  font-family:
    var(--font-body);

  font-size: 0.92rem;

  transition:
    border-color
      var(--duration-normal)
      var(--ease-premium),
    color
      var(--duration-normal)
      var(--ease-premium);
}

.contact-form .form-control:hover {
  border-color:
    rgba(
      12,
      12,
      13,
      0.35
    );
}

.contact-form .form-control:focus {
  border-color:
    var(--color-black);

  outline: 0;
}

.contact-form .form-control::placeholder {
  color:
    rgba(
      12,
      12,
      13,
      0.34
    );
}

.contact-form textarea.form-control {
  min-height: 150px;

  resize: vertical;
}

.contact-form select.form-control {
  cursor: pointer;
}

.contact-form input[type="date"] {
  appearance: none;

  -webkit-appearance: none;
}

.contact-form
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;

  cursor: pointer;
}


/* =========================================================
   FORM VALIDATION
   ========================================================= */

.contact-form
.form-control[aria-invalid="true"] {
  border-color:
    rgba(
      150,
      24,
      24,
      0.68
    );
}


/* =========================================================
   FORM STATUS
   ========================================================= */

.contact-form__status {
  display: none;

  padding:
    13px
    15px;

  font-size: 0.74rem;

  line-height: 1.5;
}

.contact-form__status:not(:empty) {
  display: block;
}

.contact-form__status.is-error {
  border:
    1px solid
    rgba(
      150,
      24,
      24,
      0.16
    );

  background:
    rgba(
      150,
      24,
      24,
      0.07
    );

  color:
    #7d1d1d;
}

.contact-form__status.is-success {
  border:
    1px solid
    rgba(
      71,
      100,
      61,
      0.16
    );

  background:
    rgba(
      71,
      100,
      61,
      0.08
    );

  color:
    #3f623a;
}


/* =========================================================
   FORM FOOTER
   ========================================================= */

.contact-form__footer {
  display: grid;

  gap: 18px;

  padding-top: 8px;
}

.contact-form__note {
  max-width: 500px;

  margin: 0;

  color:
    var(--text-muted);

  font-size: 0.7rem;

  line-height: 1.6;
}

.contact-form__submit {
  width: 100%;
}

.contact-form__submit .btn-icon {
  margin-left: auto;
}

.contact-form__submit.is-loading {
  opacity: 0.65;

  pointer-events: none;
}


/* =========================================================
   EXPERIENCE SHORTCUTS
   ========================================================= */

.contact-experiences {
  padding:
    clamp(
      110px,
      14vw,
      190px
    )
    0;

  background:
    var(--color-ivory);
}

.contact-experiences__header {
  display: grid;

  gap: 20px;

  max-width: 850px;

  margin-bottom:
    clamp(
      50px,
      7vw,
      80px
    );
}

.contact-experiences__grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 1px;

  border:
    1px solid
    var(--border-light);

  background:
    var(--border-light);
}


/* =========================================================
   EXPERIENCE CARD
   ========================================================= */

.contact-experience-card {
  position: relative;

  min-height: 320px;

  display: flex;
  flex-direction: column;

  padding: 26px;

  overflow: hidden;

  border: 0;

  background:
    var(--color-ivory);

  color:
    var(--color-black);

  font: inherit;

  text-align: left;

  cursor: pointer;

  transition:
    background-color
      var(--duration-normal)
      var(--ease-premium),
    color
      var(--duration-normal)
      var(--ease-premium);
}

.contact-experience-card::before {
  content: "";

  position: absolute;

  right: -170px;
  bottom: -200px;

  width: 300px;
  height: 300px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(185, 154, 91, 0.16),
      transparent 70%
    );

  transition:
    transform
    700ms
    var(--ease-premium);

  pointer-events: none;
}

.contact-experience-card--padel::before {
  background:
    radial-gradient(
      circle,
      rgba(255, 46, 138, 0.15),
      transparent 70%
    );
}

.contact-experience-card--coffee::before {
  background:
    radial-gradient(
      circle,
      rgba(106, 74, 52, 0.2),
      transparent 70%
    );
}

.contact-experience-card--vvip::before {
  background:
    radial-gradient(
      circle,
      rgba(185, 154, 91, 0.23),
      transparent 70%
    );
}

.contact-experience-card__eyebrow {
  position: relative;

  z-index: 2;

  color:
    var(--text-muted);

  font-size: 0.62rem;
  font-weight: 700;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  transition:
    color
    var(--duration-normal)
    var(--ease-premium);
}

.contact-experience-card strong {
  position: relative;

  z-index: 2;

  max-width: 240px;

  margin-top: 18px;

  font-family:
    var(--font-display);

  font-size:
    clamp(
      1.9rem,
      2.6vw,
      2.7rem
    );

  font-weight: 500;

  line-height: 0.98;

  letter-spacing: -0.035em;
}

.contact-experience-card__action {
  position: relative;

  z-index: 2;

  display: inline-flex;
  align-items: center;

  gap: 9px;

  width: fit-content;

  margin-top: auto;

  color:
    var(--text-secondary);

  font-size: 0.66rem;
  font-weight: 600;

  letter-spacing: 0.06em;

  transition:
    color
    var(--duration-normal)
    var(--ease-premium);
}

.contact-experience-card__action svg {
  width: 18px;
  height: 18px;

  transition:
    transform
    var(--duration-normal)
    var(--ease-premium);
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.contact-final {
  position: relative;

  padding:
    clamp(
      130px,
      17vw,
      240px
    )
    0;

  overflow: hidden;

  background:
    var(--color-black);

  color:
    var(--color-white);
}

.contact-final::before {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -620px;

  width: 800px;
  height: 800px;

  border-radius: 50%;

  transform:
    translateX(-50%);

  background:
    radial-gradient(
      circle,
      rgba(185, 154, 91, 0.22),
      transparent 70%
    );

  pointer-events: none;
}

.contact-final__inner {
  position: relative;

  z-index: 2;

  display: grid;

  justify-items: center;

  gap: 28px;

  text-align: center;
}

.contact-final__inner h2 {
  max-width: 1050px;
}

.contact-final__actions {
  display: flex;
  align-items: center;

  gap: 10px;
}


/* =========================================================
   MOBILE CONTACT CTA
   ========================================================= */

.mobile-contact-cta {
  position: fixed;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 90;

  display: none;

  padding:
    10px
    14px
    calc(
      10px +
      env(safe-area-inset-bottom)
    );

  border-top:
    1px solid
    var(--border-light);

  background:
    rgba(
      242,
      238,
      229,
      0.95
    );

  backdrop-filter:
    blur(18px);

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

.mobile-contact-cta__grid {
  display: grid;

  grid-template-columns:
    0.82fr
    1.18fr;

  gap: 8px;
}

.mobile-contact-cta .btn {
  width: 100%;
}


/* =========================================================
   IMAGE SAFETY
   ========================================================= */

.contact-page
img:not([src]),
.contact-page
img[src=""] {
  visibility: hidden;
}

.contact-hero__image,
.contact-location__building-image {
  background-color:
    var(--color-graphite);
}


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

.contact-direct-card:focus-visible,
.contact-experience-card:focus-visible {
  outline:
    2px solid
    var(--color-gold);

  outline-offset: 3px;
}

.contact-form .form-control:focus-visible {
  outline: 0;

  border-bottom-color:
    var(--color-black);
}


/* =========================================================
   DESKTOP HOVER
   ========================================================= */

@media (hover: hover) {
  .contact-hero__visual:hover
  .contact-hero__image img {
    transform:
      scale(1.018);
  }


  .contact-direct-card:hover {
    background:
      var(--color-graphite);
  }

  .contact-direct-card:hover::before {
    transform:
      scale(1.35);
  }

  .contact-direct-card:hover
  .contact-direct-card__icon svg {
    transform:
      translate(
        4px,
        -4px
      );
  }


  .contact-location__building:hover
  .contact-location__building-image img {
    transform:
      scale(1.025);
  }


  .contact-experience-card:hover {
    background:
      var(--color-black);

    color:
      var(--color-white);
  }

  .contact-experience-card:hover::before {
    transform:
      scale(1.35);
  }

  .contact-experience-card:hover
  .contact-experience-card__eyebrow,
  .contact-experience-card:hover
  .contact-experience-card__action {
    color:
      rgba(
        255,
        255,
        255,
        0.62
      );
  }

  .contact-experience-card:hover
  .contact-experience-card__action svg {
    transform:
      translateX(5px);
  }
}


/* =========================================================
   TOUCH
   ========================================================= */

@media (hover: none) {
  .contact-hero__image img,
  .contact-location__building-image img {
    transform:
      none !important;
  }

  .contact-direct-card::before {
    transform:
      scale(0.8);
  }

  .contact-experience-card::before {
    transform:
      none;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion: reduce
) {
  .contact-hero__image img,
  .contact-direct-card,
  .contact-direct-card::before,
  .contact-direct-card__icon svg,
  .contact-location__building-image img,
  .contact-experience-card,
  .contact-experience-card::before,
  .contact-experience-card__eyebrow,
  .contact-experience-card__action,
  .contact-experience-card__action svg {
    transform:
      none !important;

    transition:
      none !important;
  }
}