/*
  Get-a-quote page — scoped to `.quote-*` and the grouped form, loaded only
  on /otrymaty-propozytsiyu/ and /en/get-a-quote/ via pages/get_a_quote.py
  head_extra. Compact two-column hero + a grouped two-column form with an
  info sidebar. 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.
*/

/* ---- Hero: text + "what to prepare" panel ---- */
.quote-hero {
  padding-block: var(--space-lg) var(--space-xl);
}

.quote-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: center;
}

.quote-hero__text {
  max-width: 620px;
}

.quote-hero__title {
  margin: var(--space-xs) 0 var(--space-md);
  font-size: clamp(2.25rem, 3vw + 1rem, 3.25rem);
  line-height: 1.06;
  overflow-wrap: normal;
  word-break: normal;
}

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

.quote-hero__panel {
  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);
}

.quote-hero__panel-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--graphite-950);
}

.quote-hero__panel-list {
  margin: 0 0 var(--space-sm);
  padding-left: 1.15rem;
}

.quote-hero__panel-list li {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--graphite-900);
  margin-bottom: var(--space-3xs);
}

.quote-hero__panel-note {
  margin: 0;
  padding-top: var(--space-sm);
  border-top: var(--hairline) solid var(--border-hairline);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--graphite-700);
}

/* ---- Two-column layout: form + sidebar ---- */
.quote-form-section {
  /* Override the large default .section padding so the form follows the
     hero without a big empty gap. */
  padding-block: var(--space-lg) var(--space-2xl);
  scroll-margin-top: calc(var(--mobile-header-height) + 16px);
}

.quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 48px;
  align-items: start;
}

.quote-form {
  min-width: 0;
}

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

.quote-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. */
.quote-form__card .field {
  margin-bottom: 0;
}

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

.quote-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 (request type + frequency): 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. */
.quote-form fieldset.field {
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
}
.quote-form fieldset.field legend {
  display: block;
  margin-bottom: var(--space-2xs);
}
.quote-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. */
.quote-form .form-group--params {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
.quote-form .form-group--params > .form-group__title,
.quote-form .form-group--params .field:has(#frequency),
.quote-form .form-group--params .field:has(textarea) {
  grid-column: 1 / -1;
}

/* Contact group: name + company share the first row; phone/email takes its own
   full-width row below (avoids a too-narrow contact field), consent spans full. */
.quote-form .form-group--contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
.quote-form .form-group--contact > .form-group__title,
.quote-form .form-group--contact .field:has(#contact),
.quote-form .form-group--contact .field--checkbox {
  grid-column: 1 / -1;
}

.quote-form textarea {
  min-height: 130px;
}

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

/* ---- Sidebar ---- */
.quote-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.quote-aside__block {
  padding: var(--space-md) var(--space-lg);
  background: var(--warm-white-50);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-md);
}

.quote-aside__block:first-child {
  background: rgba(47, 111, 94, 0.06);
  border-color: rgba(47, 111, 94, 0.22);
}

.quote-aside__title {
  margin: 0 0 var(--space-2xs);
  font-size: 1.0625rem;
}

.quote-aside__body {
  margin: 0 0 var(--space-sm);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--graphite-700);
}

.quote-aside__link {
  font-weight: 600;
  color: var(--brand-accent);
}

.quote-aside__contact {
  margin: 0 0 var(--space-2xs);
  font-size: 1rem;
  word-break: break-word;
}

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

/* Sticky sidebar only on wide desktop. */
@media (min-width: 1200px) {
  .quote-aside {
    position: sticky;
    top: calc(var(--mobile-header-height) + var(--space-md));
  }
}

/* ---- Tablet: stack hero + layout; keep 2-col fields where they fit ---- */
@media (max-width: 1023px) {
  .quote-hero__inner,
  .quote-layout {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .quote-hero__text {
    max-width: none;
  }
}

/* ---- Mobile: single column everywhere, comfortable targets ---- */
@media (max-width: 767px) {
  .quote-hero {
    padding-block: var(--space-sm) var(--space-lg);
  }
  .quote-hero__title {
    font-size: clamp(2.125rem, 8vw, 2.5rem);
  }
  .quote-hero .cta-row {
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-sm);
  }
  .quote-hero .cta-row .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .quote-form__card {
    padding: var(--space-md);
  }
  .quote-form .form-group--params,
  .quote-form .form-group--contact {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  .quote-form .radio-option {
    min-height: 44px;
  }
}