/* ==========================================================================
   CONTATO — layout that only exists on the contact page. Text, boxes, fields and fills come from presets.css and
   components.css (.box, .field, .cta, .link-line).
   ========================================================================== */

/* information (left) + form (right): stacked on mobile, 5 / 7 columns on tablet, 4 / 8 on desktop; equal height */
.contact__info { grid-column: span 12; }
.contact__form { grid-column: span 12; display: flex; flex-direction: column; gap: var(--btn-m); }
@media (min-width: 640px) {
  .contact__info { grid-column: span 5; }
  .contact__form { grid-column: span 7; }
}
@media (min-width: 1025px) {
  .contact__info { grid-column: span 4; }
  .contact__form { grid-column: span 8; }
}

/* one label + value per row, the rows spaced like every other row on the site — at least; when the box is taller (it
   takes the height of the form beside it) the rows spread over all of it, so no empty blue band is left at the bottom */
.contact__info { display: flex; flex-direction: column; }
.contact__list { display: grid; flex: 1 1 auto; align-content: space-between; gap: var(--marquee-gap); margin: 0; }
.contact__list dt, .contact__list dd { margin: 0; }
.contact__list dd { overflow-wrap: normal; }

/* phones: the five rows go into two columns instead of one long stack — left: Instagram, mobile, e-mail (the longest
   value, last); right: landline, place. `order` sets the sequence; the column flow fills 3 rows, then the next column. */
@media (max-width: 639px) {
  .contact__list { grid-template-columns: minmax(min-content, 1fr) minmax(min-content, max-content); grid-template-rows: repeat(3, auto); grid-auto-flow: column; justify-content: space-between; align-content: start; }
  .contact__list > [data-key="instagram"] { order: 1; }
  .contact__list > [data-key="mobile"]    { order: 2; }
  .contact__list > [data-key="email"]     { order: 3; }
  .contact__list > [data-key="landline"]  { order: 4; }
  .contact__list > [data-key="place"]     { order: 5; }
  .contact__list > [data-key="hours"]     { order: 6; }
}

/* the text field takes all the height the information box gives the row */
.contact__form .field { flex: 1 1 auto; min-height: 9em; }
.contact__actions { display: flex; align-items: center; gap: 1em; }
.contact__status { flex: 1 1 auto; margin: 0; max-width: none; }     /* + .text-fine */
.contact__send { flex: 0 0 auto; margin-left: auto; }