/**
 * Information pages: contact (Figma 221:14414), branches (365:20201) and
 * buying guide (223:15469).
 */
.l-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-6) var(--space-16);
}

.l-page:focus {
  outline: none;
}

/* Contact: on mobile (Figma 430:9662) the intro and details sit on the page
   and the form is its own panel; from 1024px one panel holds both (221:14414). */
.c-contact {
  display: grid;
  gap: var(--space-6);
}

.c-contact__info {
  display: grid;
  gap: var(--space-8);
  align-content: start;
}

.c-contact__image {
  inline-size: 100%;
  max-inline-size: 20rem;
  block-size: auto;
  justify-self: center;
  border-radius: var(--radius-xl);
}

.c-contact__details {
  display: grid;
  margin: 0;
}

.c-contact__detail {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--color-border-disabled);
  color: var(--color-text-primary);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
}

.c-contact__detail:first-child {
  padding-block-start: 0;
}

.c-contact__detail:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.c-contact__detail dt {
  flex: none;
  white-space: nowrap;
}

.c-contact__detail dd {
  margin: 0;
  font-weight: var(--font-weight-bold);
  text-align: end;
}

.c-contact__form {
  display: grid;
  gap: var(--space-8);
  align-content: start;
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--color-section-300);
  scroll-margin-block-start: var(--space-6);
}

.c-contact__form-title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-l);
}

.c-contact__form .c-field__label {
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-m);
}

.c-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.c-form-grid p {
  margin: 0;
}

.c-form-grid .c-input,
.c-form-grid .c-select {
  border-radius: var(--radius-xl);
}

/* Branches */
.c-branch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-branch {
  display: grid;
  gap: var(--space-4);
  block-size: 100%;
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: 4px 4px 6px rgb(0 0 0 / 8%);
}

/* Mobile card (Figma 431:14257): compact type and small buttons. */
.c-branch__name {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-m);
}

.c-branch__details {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xs);
  list-style: none;
}

.c-branch__details li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.c-branch__details a {
  color: inherit;
}

.c-branch__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  align-self: end;
  margin-block-start: var(--space-2);
}

.c-branch__actions .c-button {
  padding: 0.375rem 0.875rem;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}

.c-branch__actions .c-button--outline {
  border-color: var(--color-gray-500);
  color: var(--color-gray-500);
  font-weight: var(--font-weight-medium);
}

/* Buying guide (Figma 223:15469, mobile 430:10248): the first numbered list
   becomes step cards with a number chip (bold text = step title). */
.c-guide > ol:first-of-type {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: guide-step;
}

.c-guide > ol:first-of-type > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-banner-blue-50);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
  counter-increment: guide-step;
}

/* Number chip (Figma "chip-lg bg-primary") */
.c-guide > ol:first-of-type > li::before {
  min-inline-size: 2rem;
  padding: 0.375rem var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-info-500);
  color: var(--color-white);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-m);
  text-align: center;
  content: counter(guide-step);
}

.c-guide > ol:first-of-type > li strong {
  display: block;
  color: var(--color-text-primary);
}

/* Closing banner: full-bleed photo with a dark wash; text centered on
   mobile, at the start edge from 1024px. */
.c-cta-banner {
  position: relative;
  display: grid;
  min-block-size: 18rem;
  margin-inline: calc(-1 * var(--container-gutter));
  overflow: hidden;
  background: var(--color-secondary);
  isolation: isolate;
}

.c-cta-banner::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(265deg, rgb(0 17 26 / 63%) 12%, rgb(0 35 54 / 63%) 66%, rgb(102 102 102 / 0%) 156%);
  content: "";
}

.c-cta-banner__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.c-cta-banner__text {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.625rem;
  justify-self: center;
  max-inline-size: 12.5rem;
  padding-block: var(--space-8);
  color: var(--color-white);
  text-align: center;
}

.c-cta-banner__title {
  margin: 0;
  color: var(--color-primary-0);
  font-family: var(--font-family-title);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-xl);
}

.c-cta-banner__lead {
  margin: 0 0 1.375rem;
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-l);
}

@media (min-width: 768px) {
  .c-form-grid,
  .c-branch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-form-grid__wide {
    grid-column: 1 / -1;
  }

  .c-guide > ol:first-of-type {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .l-page {
    gap: var(--space-8);
    padding-block-start: var(--space-8);
  }

  .c-contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-12);
    max-inline-size: 53.5rem;
    margin-inline: auto;
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    background: var(--color-section-200);
  }

  .c-contact__info {
    gap: var(--space-6);
  }

  .c-contact__image {
    max-inline-size: 18rem;
  }

  .c-contact__detail {
    padding-block: var(--space-3);
    line-height: var(--line-height-m);
  }

  .c-contact__detail dt {
    color: var(--color-text-tertiary);
  }

  .c-contact__detail dd {
    font-size: var(--font-size-m);
  }

  .c-contact__form {
    gap: var(--space-4);
    padding: 0;
    background: none;
  }

  .c-contact__form-title {
    font-size: var(--font-size-m);
    line-height: var(--line-height-m);
  }

  .c-contact__form .c-field__label {
    color: var(--color-text-muted);
    font-family: var(--font-family-caption);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-xs);
  }

  .c-branch-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .c-branch__name {
    font-size: var(--font-size-l);
    line-height: var(--line-height-l);
  }

  .c-branch__details {
    font-size: var(--font-size-s);
    line-height: var(--line-height-s);
  }

  .c-branch__details li {
    align-items: flex-start;
  }

  .c-branch__actions .c-button {
    padding: 0.6875rem 1.625rem;
    font-size: var(--font-size-m);
    line-height: var(--line-height-m);
  }

  .c-guide > ol:first-of-type {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .c-guide > ol:first-of-type > li strong {
    font-size: var(--font-size-m);
    line-height: var(--line-height-m);
  }

  .c-cta-banner__text {
    justify-items: start;
    justify-self: start;
    max-inline-size: 28.75rem;
    padding-inline: calc(var(--container-gutter) + var(--space-8));
    text-align: start;
  }

  .c-cta-banner__title {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-2xl);
  }
}