.sq-block--locations {
  padding: 6.4rem 0;
}

.sq-locations-section__layout {
  color: var(--text-color);
}

/* Titel en lijst staan hier in twee flexkolommen, waar marges niet samenklappen
   zoals in de blokstroom van het origineel; de 2.4rem komt daarom van het item. */
.sq-locations-section__title {
  margin: 0;
  color: var(--text-color);
}

.sq-locations-section__list,
.sq-locations-section__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sq-locations-section__item {
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: .1rem solid var(--border-color);
}

.sq-location {
  display: block;
  color: var(--text-color);
}

.sq-location:hover,
.sq-location:active {
  color: var(--text-color);
}

.sq-location__country {
  gap: 2.4rem;
}

.sq-location__flag {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  line-height: 1;
}

/* Het origineel tekent de witte ring met een ::before op inset -0.1rem en een
   rand van 0.2rem (components/flag/styles.module.scss); de SVG zelf is al rond,
   dus geen overflow/border-radius op de doos. */
.sq-location__flag::before {
  content: "";
  position: absolute;
  inset: -.1rem;
  z-index: 1;
  border: .2rem solid var(--color-white);
  border-radius: 50%;
}

.sq-location__flag-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}

.sq-location__flag-fallback {
  font-size: .9rem;
  font-weight: 600;
  text-transform: uppercase;
}

.sq-location__country-name {
  margin: 0;
  color: var(--text-color);
}

/* De vlag wordt verborgen met Bootstraps .d-none in de template: een !important
   display-utility (.d-inline-flex) kan niet met een gewone regel worden
   overschreven. De landnaam heeft geen utility en blijft hier. */
.sq-location.hides-country .sq-location__country-name {
  display: none;
}

.sq-location__address {
  margin: .8rem 0 0 4.8rem;
  color: var(--text-color);
  font-style: normal;
}

.sq-location__address-line {
  margin: 0;
  color: inherit;
}

/* .sq-body zet margin-top op elke volgende child; binnen deze flexregel is dat de
   <svg>, die daardoor de regelhoogte zou opblazen. */
.sq-location__address-line > * + * {
  margin-top: 0;
}

.sq-location__external-icon {
  width: 2.4rem;
  flex: 0 0 2.4rem;
  fill: currentColor;
}

.sq-location:hover .sq-location__address,
.sq-location:active .sq-location__address {
  text-decoration: underline;
}

@media only screen and (min-width: 1000px) {
  .sq-block--locations {
    min-height: calc(var(--window-height) - 6.4rem);
  }

  /* Het origineel legt hier een grid van 1fr 1fr met de gutter ertussen, binnen de
     containermarges; de eigen kolomgutter van Bootstraps .row moet daarvoor weg. */
  .sq-locations-section__layout {
    --bs-gutter-x: 0;
    margin-right: 0;
    margin-left: 0;
  }

  /* Halve kolom minus de halve gutter, en de linkermarge is de andere helft plus
     die halve gutter: exact de tweede kolom van het originele grid. */
  .sq-locations-section__list {
    width: calc(50% - var(--gutter) / 2);
    margin-left: calc(50% + var(--gutter) / 2);
    padding-left: 0;
  }

  .sq-location {
    display: flex;
    align-items: flex-start;
    gap: 2.4rem;
  }

  .sq-location__country {
    min-width: 28.8rem;
  }

  .sq-location__address {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }
}

@media only screen and (min-width: 1792px) {
  .sq-location__country {
    min-width: 49.6rem;
  }
}