/*
  Contacts page — scoped to `.contacts-*` and the grouped form, loaded only
  on /kontakty/ and /en/contacts/ via pages/contacts.py head_extra. Compact
  two-column hero (text + sales-department panel) followed by a two-column
  main section (info cards + grouped enquiry form). Uses the site's own
  tokens and the shared .form field markup (name/value/required/consent/
  Formspree action unchanged). No other page or shared stylesheet is affected.
*/

/* ---- Small button variant, scoped so no global .btn is touched ---- */
.contacts-hero .btn--sm,
.contacts-card .btn--sm {
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
  min-height: 44px;
}

/* ---- Hero: compact two columns (text + sales-department panel) ---- */
.contacts-hero {
  /* Compact top padding so the hero sits right under the breadcrumb with no
     empty band; nothing near the 100vh default of the shared .hero. */
  padding-block: var(--space-md) var(--space-xl);
}

.contacts-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
}

.contacts-hero__content {
  min-width: 0;
}

.contacts-hero__title {
  margin: var(--space-xs) 0 var(--space-md);
  font-size: clamp(3.25rem, 5vw, 4.75rem);
  line-height: 1.04;
  overflow-wrap: normal;
  word-break: normal;
}

.contacts-hero__lede {
  max-width: 35rem;
  margin: 0 0 var(--space-lg);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--graphite-900);
}

/* Sales-department panel — light, calm, premium; fills the right half. */
.contacts-hero__panel {
  padding: var(--space-lg);
  background: rgba(47, 111, 94, 0.05);
  border: var(--hairline) solid rgba(47, 111, 94, 0.20);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.contacts-hero__panel-label {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-accent);
}

.contacts-hero__panel-company {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--graphite-950);
}

.contacts-hero__panel-person {
  margin: var(--space-3xs) 0 var(--space-md);
  font-size: 1rem;
  color: var(--graphite-700);
}

.contacts-hero__panel-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding-top: var(--space-md);
  border-top: var(--hairline) solid rgba(47, 111, 94, 0.20);
}

.contacts-hero__panel-contact {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--graphite-950);
  word-break: break-word;
}

.contacts-hero__panel-contact:hover {
  color: var(--brand-accent);
}

.contacts-hero__panel-hours {
  margin: var(--space-2xs) 0 0;
  font-size: var(--text-sm);
  color: var(--graphite-700);
}

.contacts-hero__panel-line {
  margin: var(--space-md) 0 var(--space-md);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--graphite-700);
}

.contacts-hero__panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
}

/* ---- Main section: info cards + form ---- */
.contacts-main {
  /* Override the large default .section padding so the main block follows
     the hero closely without a big empty gap. */
  padding-block: var(--space-lg) var(--space-2xl);
  background: var(--warm-white-50);
}

.contacts-main__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: start;
}

.contacts-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.contacts-card {
  padding: var(--space-lg);
  background: var(--surface-card);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-md);
}

.contacts-card__title {
  margin: 0 0 var(--space-2xs);
  font-size: 1.125rem;
}

.contacts-card__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--graphite-900);
}

.contacts-card__note {
  margin: var(--space-2xs) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--graphite-700);
}

.contacts-card__link {
  display: inline-block;
  margin-top: var(--space-sm);
  font-weight: 600;
  color: var(--brand-accent);
}

.contacts-card__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin-bottom: var(--space-2xs);
}

.contacts-card__contact {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--graphite-950);
  word-break: break-word;
}

.contacts-card__contact:hover {
  color: var(--brand-accent);
}

.contacts-card__person {
  margin: 0 0 var(--space-sm);
  font-size: 0.95rem;
  color: var(--graphite-700);
}

.contacts-card .cta-row {
  gap: var(--space-2xs) var(--space-sm);
}

/* ---- Form column ---- */
.contacts-form {
  min-width: 0;
  scroll-margin-top: calc(var(--mobile-header-height) + 16px);
}

.contacts-form__title {
  margin: 0 0 var(--space-2xs);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
}

.contacts-form__intro {
  margin: 0 0 var(--space-md);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--graphite-700);
  max-width: 40rem;
}

.contacts-form__card {
  padding: var(--space-lg);
  background: var(--surface-card);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Grouped form: tighter fields, section headings, 2-column rows.
   Mirrors the get-a-quote grouped layout but scoped to `.contacts-form`
   so neither page affects the other. */
.contacts-form__card .field {
  margin-bottom: 0;
}

.contacts-form .form-group + .form-group {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: var(--hairline) solid var(--border-hairline);
}

.contacts-form .form-group__title {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-accent);
}

/* Radio options on one row: the shared radio fieldset is a flex column,
   which stacks the options; switch it to block so the inline-flex options
   flow onto one line under the legend. */
.contacts-form fieldset.field {
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
}
.contacts-form fieldset.field legend {
  display: block;
  margin-bottom: var(--space-2xs);
}
.contacts-form .radio-option {
  display: inline-flex;
  align-items: center;
  width: auto;
  gap: var(--space-2xs);
  margin-right: var(--space-lg);
}

/* Params group: product + quantity share a row; frequency and the textarea
   span the full width. */
.contacts-form .form-group--params {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
.contacts-form .form-group--params > .form-group__title,
.contacts-form .form-group--params .field:has(#frequency),
.contacts-form .form-group--params .field:has(textarea) {
  grid-column: 1 / -1;
}

/* Contact group: name + contact share a row; consent spans full width. */
.contacts-form .form-group--contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
.contacts-form .form-group--contact > .form-group__title,
.contacts-form .form-group--contact .field--checkbox {
  grid-column: 1 / -1;
}

.contacts-form textarea {
  min-height: 150px;
}

.contacts-form .form-status {
  margin-top: var(--space-sm);
}

/* ---- Tablet (768–1199): stack both grids to one column ---- */
@media (max-width: 1199px) {
  .contacts-hero__inner,
  .contacts-main__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .contacts-hero__lede {
    max-width: none;
  }
  .contacts-hero__panel {
    max-width: 560px;
  }
}

/* ---- Mobile (≤767): single column, comfortable targets ---- */
@media (max-width: 767px) {
  .contacts-hero {
    padding-block: var(--space-sm) var(--space-lg);
  }
  .contacts-hero__title {
    font-size: clamp(2.375rem, 9vw, 2.75rem);
  }
  .contacts-hero .cta-row {
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-sm);
  }
  .contacts-hero .cta-row .btn {
    flex: 1 1 auto;
    min-height: 48px;
    justify-content: center;
  }
  .contacts-hero__panel {
    max-width: none;
  }
  .contacts-hero__panel-actions .btn,
  .contacts-card .cta-row .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .contacts-form__card {
    padding: var(--space-md);
  }
  .contacts-form .form-group--params,
  .contacts-form .form-group--contact {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  .contacts-form textarea {
    min-height: 160px;
  }

  /* Task 1 (mobile-only): the "Пряме звернення" card repeats every contact
     already present in the hero sales-department panel — both phones, email,
     contact person and the Call/Email actions — so it is a pure duplicate on
     a phone. Hide ONLY that last info card (visually, still in the HTML) to
     save roughly a full extra screen. Desktop and tablet keep the card. */
  .contacts-info .contacts-card:last-child {
    display: none;
  }

  /* Task 2 (mobile-only): tighter address/hours cards — smaller padding and
     internal rhythm, border and visual system unchanged, map link stays a
     ≥44px touch target. Desktop/tablet padding is untouched. */
  .contacts-info {
    gap: 16px;
  }
  .contacts-card {
    padding: 24px;
  }
  .contacts-card__title {
    margin-bottom: var(--space-3xs);
  }
  .contacts-card__note {
    margin-top: var(--space-3xs);
  }
  .contacts-card__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: var(--space-xs);
  }

  /* Task 3 (mobile-only, scoped to .contacts-form): compact native radios —
     ~24px circle, tighter gaps. auto-fit places the two short options in two
     columns only when both labels fully fit (≈≥430px) and falls back to one
     column below, so words never break. Touch target stays ≥44px via the
     label min-height; native checked/focus states are global and untouched.
     Nothing here reaches the quote or manufacturing forms — the selectors are
     all under .contacts-form. */
  .contacts-form fieldset.field {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    column-gap: var(--space-xs);
    row-gap: 10px;
    align-items: start;
  }
  .contacts-form fieldset.field legend {
    grid-column: 1 / -1;
    margin-bottom: var(--space-3xs);
  }
  .contacts-form .radio-option {
    display: flex;
    align-items: center;
    gap: 13px;
    width: auto;
    margin: 0;
    min-height: 44px;
  }
  .contacts-form fieldset.field input[type="radio"] {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    min-height: 0;
    margin: 0;
    padding: 0;
  }
}

/* Task 2/3 (≤360px): slightly smaller card padding; radios already collapse
   to a single column here via auto-fit. */
@media (max-width: 360px) {
  .contacts-card {
    padding: 20px;
  }
}