/* ==========================================================
   PROJECT XAMUCO

   File: locations.css

   Version: 1.0.0

   Description: Chapter V · Puntos de Venta
========================================================== */

/* ======================================================
   LOCATIONS
====================================================== */

.locations {
  padding-block: var(--space-5xl);

  background: var(--color-background);

  color: var(--color-dark);
}

/* ======================================================
   INTRODUCTION
====================================================== */

.locations__intro {
  max-width: 48rem;

  margin-inline: auto;

  text-align: center;
}

/* ======================================================
   TITLE
====================================================== */

.locations__title {
  margin-top: var(--space-sm);

  margin-bottom: var(--space-2xl);

  color: var(--color-primary);
}

/* ======================================================
   STATEMENT
====================================================== */

.locations__statement {
  margin-bottom: var(--space-lg);

  font-family: var(--font-heading);

  font-size: clamp(2rem, 4vw, 3rem);

  font-style: italic;

  letter-spacing: 0.01em;

  line-height: 1.3;
}

/* ======================================================
   DESCRIPTION
====================================================== */

.locations__description {
  max-width: 34rem;

  margin-inline: auto;

  line-height: var(--lh-relaxed);
}

/* ======================================================
   MAP WRAPPER
====================================================== */

.locations__map-wrapper {
  margin-top: var(--space-4xl);
}

/* ======================================================
   MAP
====================================================== */

.locations__map {
  width: 100%;

  max-width: 1100px;

  margin-inline: auto;
}

/* ======================================================
   MAP OBJECT
====================================================== */

.locations__map-object {
  display: block;

  width: 100%;

  height: auto;

  aspect-ratio: 16 / 9;

  border: 0;
}

/* ======================================================
   DIRECTORY
====================================================== */

.locations__directory {
  max-width: 1100px;

  margin-top: var(--space-5xl);

  margin-inline: auto;
}

/* ======================================================
   DIRECTORY HEADER
====================================================== */

.locations__directory-header {
  margin-bottom: var(--space-4xl);

  text-align: center;
}

.locations__directory-title {
  margin-top: var(--space-sm);

  font-size: clamp(2rem, 4vw, 3rem);

  color: var(--color-primary);
}

/* ======================================================
   CITY
====================================================== */

.locations__city {
  display: grid;

  grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr);

  gap: var(--space-3xl);

  padding-block: var(--space-3xl);

  border-top: 1px solid rgba(71, 0, 0, 0.2);
}

/* ======================================================
   CITY NAME
====================================================== */

.locations__city-name {
  margin: 0;

  font-family: var(--font-heading);

  font-size: clamp(1.8rem, 3vw, 2.5rem);

  color: var(--color-primary);
}

/* ======================================================
   PLACES
====================================================== */

.locations__places {
  display: grid;

  gap: var(--space-2xl);
}

/* ======================================================
   PLACE
====================================================== */

.locations__place {
  max-width: 32rem;

  padding-bottom: var(--space-2xl);

  border-bottom: 1px solid rgba(71, 0, 0, 0.12);
}

.locations__place:last-child {
  padding-bottom: 0;

  border-bottom: 0;
}

/* ======================================================
   PLACE NAME
====================================================== */

.locations__place-name {
  margin-bottom: var(--space-sm);

  font-size: var(--fs-lg);

  color: var(--color-dark);
}

/* ======================================================
   PLACE ADDRESS
====================================================== */

.locations__place-address {
  margin-bottom: var(--space-md);
}

/* ======================================================
   PLACE LINK
====================================================== */

.locations__place-link {
  display: inline-flex;

  align-items: center;

  gap: var(--space-sm);

  color: var(--color-primary);

  text-decoration: none;
}

/* ======================================================
   PLACE LINK · HOVER
====================================================== */

.locations__place-link span {
  transition: transform var(--transition-normal) var(--ease-out);
}

.locations__place-link:hover span {
  transform: translateX(0.25rem);
}