/* ==========================================================================
   RMarin · Contact
   Contact form and details (Home, Contacto).
   ========================================================================== */

/* ---------- Contact ---------- */
.contact {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--section-space) var(--gutter);
  background: var(--color-dark) url("../../img/fondo-contacto.webp") center bottom / 100% auto no-repeat;
  color: var(--color-white);
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-panel);
  background: var(--color-panel);
}

.field {
  position: relative;
}

.field--full {
  grid-column: 1 / -1;
}

.field__input {
  display: block;
  width: 100%;
  height: 64px;
  min-height: 52px;
  padding: 20px 22px 0;
  border: 2px solid transparent;
  border-radius: var(--radius-field);
  background: var(--color-dark);
  color: var(--color-white);
  font-size: max(16px, calc(24 * var(--u)));
  transition: border-color var(--duration) var(--ease);
  -moz-appearance: textfield;
  appearance: textfield;
}

.field__input::-webkit-outer-spin-button,
.field__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.field__input::placeholder {
  color: transparent;
}

.field__input:focus {
  outline: none;
  border-color: var(--color-orange);
}

textarea.field__input {
  height: 180px;
  min-height: 140px;
  padding-top: 40px;
  resize: vertical;
}

/* The label sits inside the field (as in the reference) and
   moves up while typing so it stays visible. */
.field__label {
  position: absolute;
  top: 50%;
  left: 24px;
  color: var(--color-white);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
  transform-origin: left center;
  transition: top var(--duration) var(--ease), transform var(--duration) var(--ease), color var(--duration) var(--ease);
}

.field--textarea .field__label {
  top: 22px;
  transform: none;
}

.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
  top: 16px;
  color: var(--color-orange);
  transform: translateY(-50%) scale(0.62);
}

.field--textarea .field__input:focus + .field__label,
.field--textarea .field__input:not(:placeholder-shown) + .field__label {
  top: 16px;
  transform: scale(0.62);
}

.contact-form__submit {
  justify-self: start;
  padding: 0 32px;
  font-family: var(--font-body);
  text-transform: none;
}

.contact__info {
  order: -1;
  align-self: start;
}

.contact__title {
  color: var(--color-orange);
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.contact__text {
  max-width: 560px;
  margin-top: 20px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
}

.contact__address {
  margin-top: 28px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
}

.contact__line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.contact__line + .contact__line {
  margin-top: 16px;
}

/* Icon box the same size for all three; centered on the first text line
   (line-height 1.4 → the line is 1.4em tall). */
.contact__line {
  --icon-size: 20px;
}

.contact__line img,
.contact__icon {
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  margin-top: calc((1.4em - var(--icon-size)) / 2);
  object-fit: contain;
  color: var(--color-orange);
}

.contact__line a:hover {
  color: var(--color-orange);
}

@media (min-width: 600px) {
  .contact-form {
    grid-template-columns: 1fr 1fr;
    padding: 20px;
  }
}

@media (min-width: 768px) {
  .field__label { font-size: 18px; }
}

@media (min-width: 1024px) {
  .contact {
    grid-template-columns: calc(930 * var(--u)) 1fr;
    gap: calc(80 * var(--u));
    padding: var(--section-space) calc(180 * var(--u));
  }

  .contact-form {
    gap: calc(20 * var(--u)) calc(33 * var(--u));
    padding: calc(38 * var(--u)) calc(33 * var(--u)) calc(87 * var(--u)) calc(32 * var(--u));
  }

  .field__input {
    height: calc(97 * var(--u));
    padding: calc(30 * var(--u)) calc(42 * var(--u)) 0;
  }

  textarea.field__input {
    height: calc(288 * var(--u));
    padding-top: calc(72 * var(--u));
  }

  .field__label {
    left: calc(46 * var(--u));
    font-size: max(16px, calc(24 * var(--u)));
  }

  .field--textarea .field__label {
    top: calc(38 * var(--u));
  }

  .field__input:focus + .field__label,
  .field__input:not(:placeholder-shown) + .field__label,
  .field--textarea .field__input:focus + .field__label,
  .field--textarea .field__input:not(:placeholder-shown) + .field__label {
    top: calc(26 * var(--u));
  }

  .contact-form__submit {
    padding: 0 max(20px, calc(32 * var(--u)));
  }

  .contact__info {
    order: 0;
    padding-top: calc(86 * var(--u));
  }

  .contact__title {
    max-width: calc(500 * var(--u));
    font-size: calc(44.2 * var(--u));
  }

  .contact__text {
    max-width: calc(470 * var(--u));
    margin-top: calc(32 * var(--u));
    font-size: max(16px, calc(30.5 * var(--u)));
    font-weight: 300;
    line-height: 1.2;
  }

  .contact__address {
    margin-top: calc(40 * var(--u));
    padding-left: calc(16 * var(--u));
    font-size: max(15px, calc(25.5 * var(--u)));
    font-weight: 300;
  }

  .contact__line {
    max-width: calc(480 * var(--u));
    gap: calc(12 * var(--u));
  }

  .contact__line + .contact__line {
    margin-top: calc(30 * var(--u));
  }

  .contact__line {
    --icon-size: max(20px, calc(24 * var(--u)));
  }
}