/* ============================================================
   CONTACT SECTION  ("More complex needs?")
   ------------------------------------------------------------
   Depends on css/variables.css.
   Scoped to .cs so nothing leaks into the rest of the page.
   ============================================================ */

.cs {
  /* ── layout ─────────────────────────────────────────────── */
  --cs-pad-top: 67.5px;      /* matches the export crop; round to 68px if you prefer */
  --cs-pad-bottom: 79.5px;   /* ditto, 80px */
  --cs-gap: 40px;            /* column gutter */
  --cs-row-gap: 22px;        /* between channel rows */
  --cs-icon: 36px;           /* gold circle diameter */
  --cs-icon-gap: 12px;       /* circle → text */
  --cs-avatar: 64px;
  --cs-card-pad: 12px;
  --cs-card-gap: 15px;
  --cs-person-w: 145px;      /* fixes the divider at x=1132 in the design */
  --cs-intro-gap: 13.15px;   /* heading → paragraph */
  --cs-am-nudge: -2px;       /* col 3 sits this far above cols 1-2 in the export */
  --cs-am-sub-gap: 7.5px;    /* heading → subtitle */
  --cs-am-card-gap: 12.5px;  /* subtitle → card */

  background: var(--color-surface-page);
  padding: var(--cs-pad-top) 0 var(--cs-pad-bottom);
  font-family: var(--font-body);
  color: var(--color-text-primary);
  margin-top: 42px;
}

.cs *,
.cs *::before,
.cs *::after { box-sizing: border-box; }

.cs-container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 40px;
}

.cs-grid {
  display: grid;
  grid-template-columns: minmax(0, 464fr) minmax(0, 297fr) minmax(0, 519fr);
  gap: var(--cs-gap);
  align-items: start;
}

/* ============================================================
   COLUMN 1 — intro
   ============================================================ */
.cs-intro__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text-primary);
}
.cs-intro__text {
  max-width: 360px;
  margin: var(--cs-intro-gap) 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  color: var(--color-text-muted);
}

/* ── CTA ──────────────────────────────────────────────────
   The channels in column 2 are a reference list; this is the thing to press.
   Shaped like the wizard's own gold button (.upload-btn in
   css/quotation/form.css) so it does not read as a second design language.

   `color` is stated on the hover rule as well as the base one: agile.css
   restyles buttons and links globally above 1200px and a hover rule that only
   changes the background gets the text colour from there instead. */
.cs-intro__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-brand-gold);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-surface-white);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
  transition: background var(--transition-fast);
}

.cs-intro__cta:hover,
.cs-intro__cta:focus {
  background: var(--color-brand-gold-hover);
  color: var(--color-surface-white);
}

.cs-intro__cta svg {
  flex: none;
  width: 15px;
  height: 15px;
  display: block;
}

/* ============================================================
   COLUMN 2 — channels
   ============================================================ */
.cs-channels {
  display: flex;
  flex-direction: column;
  gap: var(--cs-row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the row itself is the link, so the circle and the label click through too */
.cs-channel {
  display: flex;
  align-items: center;
  gap: var(--cs-icon-gap);
  min-width: 0;
  width: fit-content;
  color: inherit;
  text-decoration: none !important;
}

.cs-channels__text {
  color: var(--color-text-primary);
  margin: 0;
}

.cs-channels__text--branch {
  font-weight: 500;
}

.cs-channel__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--cs-icon);
  height: var(--cs-icon);
  border-radius: var(--radius-full);
  background: var(--color-brand-gold);
  color: var(--color-surface-white);
}
.cs-channel__icon svg { width: 16px; height: 16px; display: block; }
/* the filled brand logo needs a touch more room than the stroked icons */
.cs-channel__icon--wa svg { width: 18px; height: 18px; }
.cs-channel__icon--send svg { width: 17px; height: 17px; margin-top: 2px; }

.cs-channel__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.cs-channel__label {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-secondary);
}
.cs-channel__value {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-text-muted);
  text-decoration: none !important;
  transition: color var(--transition-fast);
}
.cs-channel:hover .cs-channel__value,
.cs-channel:focus-visible .cs-channel__value { color: var(--color-text-primary); }

/* ============================================================
   COLUMN 3 — account manager
   ============================================================ */
.cs-am { margin-top: var(--cs-am-nudge); }

.cs-am__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-primary);
}
.cs-am__subtitle {
  margin: var(--cs-am-sub-gap) 0 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  color: var(--color-text-secondary);
}

.cs-am__card {
  display: flex;
  align-items: center;
  gap: var(--cs-card-gap);
  margin-top: var(--cs-am-card-gap);
  padding: var(--cs-card-pad);
  background: var(--color-surface-white);
  border: 0;
  border-radius: var(--radius-lg);
}

.cs-am__avatar {
  flex: none;
  width: var(--cs-avatar);
  height: var(--cs-avatar);
  border-radius: var(--radius-full);
  object-fit: cover;
  background: linear-gradient(135deg,
              var(--color-avatar-gradient-from),
              var(--color-avatar-gradient-to));
}

.cs-am__avatar--fallback {
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-brand-gold);
  -webkit-user-select: none;
  user-select: none;
}

.cs-am__person {
  flex: 0 1 var(--cs-person-w);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cs-am__name {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-primary);
}
.cs-am__role {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-secondary);
}

.cs-am__divider {
  flex: none;
  width: 2px;
  align-self: stretch;
  background: var(--color-border);
}

.cs-am__contacts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: none;
  min-width: 0;
}
.cs-am__contact {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: var(--color-text-muted);
  text-decoration: none !important;
  transition: opacity var(--transition-fast);
}
.cs-am__contact:hover { color: var(--color-text-primary); }
.cs-am__contact svg { flex: none; width: 18px; height: 18px; display: block; }
.cs-am__contact-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
}

/* ============================================================
   FOCUS
   ============================================================ */
.cs a:focus-visible {
  outline: 2px solid var(--color-brand-gold);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1159px) {
  .cs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); row-gap: 40px; }
  .cs-intro { grid-column: 1 / -1; }
  .cs-am { margin-top: 0; }
  .cs-intro__text { max-width: 46ch; }
}

/* ---- <=899: single column ---- */
@media (max-width: 899px) {
  .cs {
    --cs-pad-top: 40px;
    --cs-pad-bottom: 48px;
  }
  .cs-container { padding-inline: 24px; }
  .cs-grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
}

/* ---- <=479: the card can no longer hold one row (it needs ~405px), so stack it.
        Person on top, hairline, then the two contacts. ---- */
@media (max-width: 479px) {
  .cs {
    --cs-pad-top: 32px;
    --cs-pad-bottom: 40px;
    --cs-card-gap: 14px;
  }
  .cs-container { padding-inline: 16px; }
  .cs-intro__title { font-size: 24px; }

  .cs-am__card { flex-wrap: wrap; }
  .cs-am__avatar--fallback {
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-brand-gold);
  -webkit-user-select: none;
  user-select: none;
}

.cs-am__person { flex: 1 1 auto; }
  .cs-am__divider {
    flex: 1 0 100%;
    width: auto;
    height: 2px;
    align-self: auto;
    background: var(--color-border);
  }
  .cs-am__contacts { flex: 1 1 100%; gap: 8px; }
}

@media (max-width: 360px) {
  .cs-am__contact { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs * { transition-duration: .01ms !important; }
}