/* =========================================================
   CONTACT PAGE — Page Styles Only
   (Hero + Contact section)
   Relies on globals.css for tokens, header, footer, buttons, focus.
   ========================================================= */

/* =========================================================
   HERO (pattern SVG + person cutout)
   ========================================================= */
.section--hero-contact {
  /* Base */
  background-color: rgba(14, 4, 36, 1);
  position: relative;
  isolation: isolate;

  min-block-size: clamp(31rem, 58vh, 34rem);

  /* Spacing */
  padding-block-start: calc(var(--slab-h) + var(--space-7));
  padding-block-end: var(--space-8);
  /* padding-inline: clamp(var(--space-4), 4vw, var(--space-9)); */

  /* Reserve room for the right-side person */
  /* padding-inline-end: clamp(18rem, 38vw, 46rem); */

  /* ---------------------------------------------------------
     TUNING VARS (change these first)
     --------------------------------------------------------- */

  /* Assets */
  --contact-vector: url('../../assets/images/contact/vector.svg');
  --contact-person: url('../../assets/images/contact/contact-person.png');

  /* Vector sizing & placement */
  --vector-size: clamp(35rem, 72vw, 52rem); /* smaller than contain */
  --vector-x: 98%; /* right anchor */
  --vector-y: 46%; /* slightly higher than center */
  --vector-opacity: 1;

  /* Person sizing & placement */
  --person-w: clamp(50rem, 100vw, 60rem);
  --person-h: clamp(24rem, 75vh, 50rem);
  /* --person-w: 60rem;
  --person-h: 50rem; */
  --person-x: 0rem; /* push left/right (+ goes left if you use calc) */
  --person-y: 7rem; /* POSITIVE pushes the person DOWN */

  /* Copy placement (move text lower) */
  /* --copy-bottom-pad: clamp(2.25rem, 6vh, 4.5rem); */

  /* --------------------------------------------------------- */

  /* Layer 1: vector pattern (decorative) */
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image: var(--contact-vector);
    background-repeat: no-repeat;
    background-position: var(--vector-x) var(--vector-y);
    background-size: var(--vector-size) auto;
    opacity: var(--vector-opacity);
  }

  /* Layer 2: person cutout (decorative) */
  &::after {
    content: '';
    position: absolute;
    pointer-events: none;

    /* Anchor bottom-right, then nudge */
    inset-inline-end: calc(0rem + var(--person-x));
    inset-block-end: calc(
      0rem - var(--person-y)
    ); /* negative end => goes DOWN */

    background: var(--contact-person) no-repeat 100% 100% / contain;

    inline-size: var(--person-w);
    /* block-size: var(--person-h); */
    aspect-ratio: 6 / 5;
    block-size: auto;
  }

  .hero {
    /* Keep copy above decorative layers */
    position: relative;
    z-index: 1;

    min-block-size: clamp(22.5rem, var(--hero-min), var(--hero-max));
    display: grid;
    grid-template-columns: 1fr;

    /* Key change: place content near bottom like the design */
    align-content: end;

    /* Creates “lift” so text isn’t glued to the bottom */
    padding-block-end: var(--copy-bottom-pad);
    /* padding-inline-end: clamp(18rem, 38vw, 46rem); */
    gap: var(--space-4);
  }

  .hero__copy {
    max-inline-size: 75ch;
    /* inline-size: min(24rem, 88vw); */
    /* inline-size: clamp(20rem, 38vw, 48rem); */
    position: relative;
  }

  /* Readability gradient behind text */
  .hero__copy::before {
    content: '';
    position: absolute;
    inset: -2rem;
    z-index: -1;
    pointer-events: none;

    background: linear-gradient(
      90deg,
      rgba(14, 4, 36, 0.92) 0%,
      rgba(14, 4, 36, 0.78) 55%,
      rgba(14, 4, 36, 0) 100%
    );
  }

  .hero__title {
    margin: 0;
    /* font-size: clamp(2.25rem, 2.875vw, 2.875rem); */
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    color: var(--text);
  }

  .hero__body {
    margin: 0;
    font-family: var(--font-paragraph);
    /* font-size: clamp(1.125rem, 1.5vw, 1.5rem); */
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: var(--text);
  }
}

@media (max-width: 75rem) {
  .section--hero-contact {
    padding-block-start: calc(var(--slab-h-sm) + var(--space-7));
  }
}

/* =========================================================
   HERO — Responsive behavior
   ========================================================= */
@media (max-width: 56rem) {
  .section--hero-contact {
    padding-inline-end: clamp(var(--space-4), 8vw, var(--space-7));

    /* Vector: cover on small, but keep it softer */
    --vector-size: 120%;
    --vector-x: 92%;
    --vector-y: 42%;
    --vector-opacity: 0.85;

    /* Person: lighter / smaller */
    --person-w: 70vw;
    --person-h: 46vh;
    --person-y: 0.5rem;

    .hero {
      padding-block-end: clamp(1.5rem, 5vh, 3rem);
    }

    .hero__copy::before {
      inset: -1.5rem;
      background: linear-gradient(
        90deg,
        rgba(14, 4, 36, 0.94) 0%,
        rgba(14, 4, 36, 0.86) 70%,
        rgba(14, 4, 36, 0) 100%
      );
    }
  }
}

@media (max-width: 36.25rem) {
  .section--hero-contact {
    padding-inline-end: clamp(var(--space-4), 6vw, var(--space-6));

    /* On very small screens: hide the person */
    &::after {
      display: none;
    }

    --vector-x: 78%;
    --vector-y: 40%;
    --vector-opacity: 0.6;

    .hero {
      padding-block-end: clamp(1rem, 4vh, 2rem);
    }

    .hero__copy::before {
      inset: -1.25rem;
      background: linear-gradient(
        90deg,
        rgba(14, 4, 36, 0.96) 0%,
        rgba(14, 4, 36, 0.9) 85%,
        rgba(14, 4, 36, 0) 100%
      );
    }
  }
}

/* =========================================================
   CONTACT SECTION
   ========================================================= */
.section--contact {
  background: #f2f2f2;
  color: #0b0e15;
  /* padding: var(--space-11) clamp(var(--space-4), 4vw, var(--space-9)); */
  padding-block: var(--space-11);
  padding-inline: 0;
  position: relative;
  isolation: isolate;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(12 15 23 / 0.08);
    mix-blend-mode: multiply;
    pointer-events: none;
  }

  .contact-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--space-6), 4vw, var(--space-8));
    align-items: start;
  }

  .contact-text {
    display: grid;
    gap: var(--space-3);

    h2 {
      font-size: clamp(2rem, 2.375vw, 2.375rem);
      line-height: var(--lh-tight);
      color: #0b1220;
      font-weight: 500;
    }

    h3 {
      font-size: clamp(1.5rem, 1.75vw, 1.75rem);
      line-height: 1.25;
      color: #0b1220;
      font-weight: 500;
    }

    p {
      font-family: var(--font-paragraph);
      /* font-size: clamp(1rem, 1.25vw, 1.25rem); */

      font-size: var(--fs-body);

      line-height: 1.55;
      color: #0b1220;
      margin: 0;
      margin-bottom: 1rem;
    }

    a {
      color: #0b1220;
      text-underline-offset: 2px;
    }
  }

  .contact-form {
    padding: clamp(var(--space-5), 3vw, var(--space-7));
    border-radius: var(--r-4);
    background: var(--color-midnight-purple);
    box-shadow: var(--shadow-soft);
    color: var(--text);

    scroll-margin-top: calc(var(--slab-h) + 2rem);

    form {
      display: grid;
      gap: var(--space-4);

      .form-disclaimer {
        font-family: var(--font-paragraph);
        font-size: 0.875rem;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.85);

        @media (max-width: 48rem) {
          font-size: 0.8125rem;
        }

        a {
          color: #fff;
          text-decoration: underline;
          text-underline-offset: 2px;

          &:is(:hover, :focus-visible) {
            opacity: 0.85;
          }
        }
      }

      > h2 {
        margin: 0;
        font-size: clamp(1.5rem, 1.75vw, 1.75rem);
        line-height: 1.25;
        color: var(--text);
      }
    }
  }

  .form-status {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: var(--r-2);
    font-family: var(--font-paragraph);
    font-size: 0.95rem;
    line-height: 1.35;
    border: 1px solid transparent;
  }

  .form-status[data-status='success'] {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.35);
    color: rgba(187, 247, 208, 0.95);
  }

  .form-status[data-status='error'] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: rgba(254, 202, 202, 0.95);
  }

  .form-status[data-status='info'] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
  }

  .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .form-field {
    display: grid;
    gap: var(--space-2);
    min-width: 0;

    label {
      font-family: var(--font-paragraph);
      font-weight: 600;
      font-size: clamp(0.75rem, 1vw, 1rem);
      line-height: 1.35;
      color: var(--text);
    }

    input,
    select,
    textarea {
      width: 100%;
      padding: 0.75rem 1rem;
      background: #ffffff;
      border: 1px solid #b8b8b8;
      border-radius: var(--r-2);
      font-family: var(--font-sans);
      font-size: clamp(0.7rem, 0.875vw, 0.875rem);
      line-height: 1.2;
      color: #111;
    }

    select {
      appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg fill='%235d5d5d' xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5'/></svg>");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      background-size: 12px 8px;
    }

    textarea {
      resize: vertical;
      min-height: 3.75rem;

      &::placeholder {
        color: #5d5d5d;
      }
    }
  }

  .contact-submit {
    width: 100%;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 0;
  }

  /* =========================================================
   intl-tel-input — styling (CONTACT)
   ========================================================= */

  .iti {
    inline-size: 100%;
    font-size: var(--fs-body); /* component-controlled */
  }

  /* Flag container: center vertically */
  .iti__flag-container {
    display: flex;
    align-items: center;
  }

  /* Selected flag + dial code container */
  .iti__selected-flag {
    display: flex;
    align-items: center;

    padding-inline: 0.5rem;
    padding-block: 0;
    gap: 0.1rem;

    /* Avoid “stretch” from plugin height: 100% */
    height: auto;

    /* Comfortable hit-area (match your input height feel) */
    min-block-size: 2.75rem;
  }

  /* Flag slightly smaller */
  .iti__flag {
    transform: scale(0.8);
    transform-origin: left center;
  }

  /* Dial code shown beside the flag (inside the input UI) */
  .iti__selected-dial-code {
    font-size: 0.7em; /* relative to component */
    font-weight: 500;
    line-height: 1;
    color: #111;

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

  /* Arrow */
  .iti__arrow {
    transform: scale(0.85);
  }

  /* 2) Remove the extra inline warning under the phone field
      (keep the bottom form-status error only).
      Still remains accessible to screen readers if referenced by aria-describedby. */
  #phone-error.field-help.error {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------------- Dropdown panel ----------------
   Scoped globally: intl-tel-input appends the dropdown
   to <body>, outside .section--contact, on mobile.     */

.iti__dropdown-content,
.iti__country-list {
  background: #fff;
  color: #111;
}

.iti__country-list {
  inline-size: min(19rem, calc(100vw - 3rem));
  max-inline-size: 19rem;

  border-radius: var(--r-2);
  box-shadow: 0 0.875rem 1.75rem rgba(0, 0, 0, 0.18);

  /* Desktop: prevent “giant” dropdown */
  max-block-size: min(18.75rem, 60vh);
  /* overflow-y: scroll; */
  scrollbar-gutter: stable;
}

/* Each country row */
.iti__country {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.625rem;

  padding: 0.55rem 0.875rem;

  color: #111;
  font-size: 0.95em;
}

/* Highlight row stays readable */
.iti__country.iti__highlight {
  background: rgba(0, 0, 0, 0.06);
}

/* Country name */
.iti__country-name {
  flex: initial;
  min-inline-size: 0;

  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dial code in dropdown */
.iti__dial-code {
  margin-inline-start: 0.4rem;
  font-size: 0.875em;
  font-weight: 500;
  color: #111;
  opacity: 0.7;
}

/* Remove any layout forcing */
.iti__country .iti__dial-code {
  position: static;
}

@media (max-width: 36.25rem) {
  .iti__dropdown-content {
    position: fixed;
    inset: 0;
    width: 60vw;
    max-height: none;
    margin: 0;
    border-radius: 2%;

    z-index: 9999;
  }

  .iti__country-list {
    inline-size: 100vw;
    max-inline-size: none;
    width: 100%;
    height: 100%;
    max-block-size: 50vh;
    border-radius: 2%;
    overflow-y: auto;
  }

  .iti__country {
    padding: 0.5rem 0.75rem;
  }
}

/* =========================================================
   Responsive Styles
   ========================================================= */
@media (max-width: 56rem) {
  .section--contact {
    .contact-content {
      grid-template-columns: 1fr;
    }

    .contact-form {
      max-inline-size: 42rem;
      margin-inline: auto;
    }
  }
}

@media (max-width: 36.25rem) {
  .section--contact {
    /* padding: var(--space-9) clamp(var(--space-4), 5vw, var(--space-6)); */
    padding-block: var(--space-9);
    padding-inline: 0;

    .contact-text {
      gap: var(--space-2);
    }

    .contact-form {
      padding: var(--space-5);

      form {
        gap: var(--space-3);
      }
    }

    .form-row {
      grid-template-columns: 1fr;
      gap: var(--space-3);
    }
  }
}

/* =========================================================
   FINAL: guarantee hidden actually hides
   (specific + last rule wins without !important)
   ========================================================= */
.section--contact #preferred-wrap[hidden] {
  display: none;
}