/*
  Region Address Columns — Figma 851:613 "Distributors" (and 851:631
  "Global Presence" which reuses the same layout).

  Simple, text-only 3-column layout: a section heading + three columns,
  each with a green region header and a series of address items
  (company name + optional region label + address text + optional
  website + email links).
*/

.region-address-columns {
  padding-block: var(--section-padding-block);
  padding-inline: var(--space-inline);
}

.region-address-columns__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 23px; /* Figma exact between heading and columns row */
}

/* ---------------------------------------------------------------
   Section heading
   --------------------------------------------------------------- */
.region-address-columns__heading {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 30px;
  font-weight: var(--font-weight-medium);
  line-height: 32px;
  color: var(--color-text-heading);
}

/* ---------------------------------------------------------------
   Columns
   --------------------------------------------------------------- */
.region-address-columns__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 768px) {
  .region-address-columns__columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: flex-start;
  }
}

.region-address-columns__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 24px between region header and first item, and between items */
}

.region-address-columns__region {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: 28px;
  color: var(--color-green-2);
}

/* ---------------------------------------------------------------
   Address item
   --------------------------------------------------------------- */
.region-address-columns__item {
  display: flex;
  flex-direction: column;
  gap: 0; /* items pack tight; internal <br> handles line breaks */
}

.region-address-columns__item > * + * {
  margin-top: 0;
}

.region-address-columns__name {
  margin: 0 0 4px 0;
  font-family: var(--font-family-sans);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: 20px;
  color: var(--color-text-heading);
}

.region-address-columns__label {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  line-height: 20px;
  color: var(--color-text-heading);
}

.region-address-columns__text {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  color: var(--color-text-heading);
}

.region-address-columns__links {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  color: var(--color-text-heading);
}

.region-address-columns__link {
  color: var(--color-text-heading);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.region-address-columns__link:hover,
.region-address-columns__link:focus-visible {
  color: var(--color-green-2);
}