/*
 * Секція контактів (.contact) і форма заявки (.contact-form).
 * Однакові на всіх сторінках, де є форма. Підключається після hero.css.
 *
 * <section class="section [section--alt] contact" id="contact" aria-labelledby="contact-title">
 *   <div class="container">
 *     <div class="contact__grid">
 *       <div class="contact__intro">
 *         <div class="section-head contact__head">…eyebrow, h2#contact-title, lead…</div>
 *         <hr class="divider">
 *         <address>
 *           <ul class="contact__list">
 *             <li class="contact__item">
 *               <span class="contact__icon" aria-hidden="true"><svg…/></span>
 *               <span class="contact__text"><span class="caption text-muted">Телефон</span>
 *                 <a class="contact__value contact__value--link" href="tel:…">…</a></span>
 *             </li>
 *           </ul>
 *         </address>
 *       </div>
 *       <div class="card card--surface contact__card">
 *         <form class="contact-form">
 *           <div class="contact-form__row">…два .field…</div>
 *           <div class="field">…</div>
 *           <fieldset class="contact-form__fieldset">…вибір варіанта (необов'язково)…</fieldset>
 *           <div class="contact-form__footer"><button class="btn btn--accent btn--block">…</button>
 *             <p class="caption text-muted contact-form__note">…</p></div>
 *         </form>
 *       </div>
 *     </div>
 *   </div>
 * </section>
 */

/* =========================================================
   Секція контактів
   ========================================================= */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--ds-space-11);
}

.contact__intro {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-8);
  min-width: 0;
}

.contact__head {
  margin-bottom: 0;
}

.contact__list {
  display: grid;
  gap: var(--ds-space-7);
}

.contact__item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-6);
}

.contact__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-bg);
  color: var(--ds-primary);
}

.contact__icon svg {
  width: 22px;
  height: 22px;
}

.contact__text {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  min-width: 0;
}

.contact__value {
  color: var(--ds-heading);
  font-weight: var(--ds-text-label-weight);
}

.contact__value--link {
  transition: color var(--ds-duration-fast) var(--ds-ease-standard);
}

.contact__value--link:hover {
  color: var(--ds-primary);
}

@media (min-width: 800px) {
  .contact__card {
    padding: var(--ds-space-11);
  }
}

@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ds-space-13);
  }
  .contact__intro {
    position: sticky;
    top: var(--ds-space-10);
    padding-top: var(--ds-space-6);
  }
}

/* =========================================================
   Форма заявки
   ========================================================= */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-8);
}

.contact-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-8);
}

/* вибір варіанта: «пігулки» на radio */
.contact-form__fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.contact-form__legend {
  margin-bottom: var(--ds-space-3);
  padding: 0;
}

.contact-form__options {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ds-space-1);
  max-width: 100%;
  padding: var(--ds-space-1);
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background-color: var(--ds-bg);
}

.contact-form__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.contact-form__option {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--ds-space-3) var(--ds-space-7);
  border-radius: var(--ds-radius-full);
  color: var(--ds-text);
  font-size: var(--ds-text-label-size);
  font-weight: var(--ds-text-label-weight);
  line-height: var(--ds-text-label-line);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--ds-duration-fast) var(--ds-ease-standard),
    color var(--ds-duration-fast) var(--ds-ease-standard);
}

.contact-form__option:hover {
  background-color: color-mix(in oklab, var(--ds-heading) 6%, transparent);
  color: var(--ds-heading);
}

.contact-form__radio:checked + .contact-form__option {
  background-color: var(--ds-primary);
  color: var(--ds-on-primary);
}

.contact-form__radio:focus-visible + .contact-form__option {
  outline: 2px solid var(--ds-primary);
  outline-offset: 2px;
}

/* кнопка і примітка */
.contact-form__footer {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
  padding-top: var(--ds-space-3);
}

.contact-form__footer > .btn--block {
  justify-content: space-between;
}

.contact-form__note {
  text-align: center;
}

@media (min-width: 576px) {
  .contact-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-space-6);
  }
}