/* ==========================================================================
   SECTION 06 — LOCATION & LOGISTICS (approved)
   Desktop (>= 1024px): editorial heading + three cards in one row
                        (photo above; icon, title, kicker and text below).
   Tablets (600–1023):  stacked horizontal cards (photo left).
   Phones (< 600px):    stacked vertical cards.
   ========================================================================== */

.location {
  position: relative;
  padding-block: 4rem 4.5rem;
  overflow: hidden;
  background-color: var(--color-ivory);
}

/* Soft warm light, top right */
.location::before {
  content: "";
  position: absolute;
  top: -25%;
  right: -10%;
  width: 55%;
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
}

/* Atmosphere (desktop only): a soft, blurred glimpse of warm sky and palm
   tops in the upper-right corner, echoing the approved mockup. Uses the same
   image as card 03, so it adds no download. Kept very faint on purpose. */
.location__atmosphere {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 27rem;
  pointer-events: none;
  opacity: 0.3;
  -webkit-mask-image:
    linear-gradient(to left, #000 30%, transparent 92%),
    linear-gradient(to bottom, #000 35%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to left, #000 30%, transparent 92%),
    linear-gradient(to bottom, #000 35%, transparent 100%);
  mask-composite: intersect;
}

.location__atmosphere img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  filter: blur(3px) saturate(0.7) sepia(0.25);
  transform: scale(1.7);                 /* zoom into the sky, clouds and palm tops only */
  transform-origin: 62% 0%;
}

/* Two thin bronze arcs (desktop only, never over text) */
.location__arcs {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 44%;
  height: 25rem;
  pointer-events: none;
  fill: none;
  stroke: rgba(167, 131, 92, 0.55);
  stroke-width: 1;
}

.location__arcs path { vector-effect: non-scaling-stroke; }

.location__inner { position: relative; }

/* ---------- Heading ---------- */
.location__title {
  margin-top: 1.25rem;
  font-size: clamp(2.25rem, 1.25rem + 3.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-wrap: wrap;
  color: var(--color-charcoal);
}

.location__title-line { display: block; }

.location__intro {
  max-width: 40rem;
  margin-top: 1.25rem;
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--color-text-body);
}

/* ---------- Cards ---------- */
.location__cards {
  display: grid;
  gap: 1rem;
  margin-top: 2.25rem;
}

.place-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(167, 131, 92, 0.18);
  border-radius: 0.5rem;
  background-color: #FCFAF6;
  box-shadow: 0 16px 32px -26px rgba(32, 32, 31, 0.35);
}

.place-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background-color: var(--color-card);
}

.place-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

/* Honest labels on illustrative images (approved brief: the recovery room is an
   example and the Tijuana image is a stylized view) */
.place-card__tag {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background-color: rgba(252, 250, 246, 0.9);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--color-text-body);
}

.place-card--reception { --pos: 50% 46%; }
.place-card--recovery  { --pos: 50% 55%; }
.place-card--tijuana   { --pos: 50% 45%; }

.place-card__body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.25rem 1.75rem;
}

.place-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: var(--color-card);
}

.place-card__icon svg {
  width: 1.625rem;
  height: 1.625rem;
  fill: none;
  stroke: var(--color-bronze-ink);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.place-card__title {
  font-size: 1.625rem;
  line-height: 1.12;
  color: var(--color-charcoal);
}

.place-card__kicker {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--color-bronze-ink);
}

.place-card__desc {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-body);
}

/* ---------- Footer: note + CTA ---------- */
.location__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(167, 131, 92, 0.3);
}

.location__note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-body);
}

.location__note-icon {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: var(--color-bronze);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   TABLETS (600–1023px): stacked horizontal cards
   ========================================================================== */
@media (min-width: 37.5em) {
  .location { padding-block: 5rem 5.5rem; }

  .location__cards { margin-top: 2.75rem; }

  .place-card {
    flex-direction: row;
    align-items: stretch;
  }

  .place-card__media {
    flex: 0 0 42%;
    aspect-ratio: auto;
    min-height: 15rem;
  }

  .place-card__body {
    align-self: center;
    padding: 1.75rem 1.75rem 1.75rem 1.5rem;
  }

  .location__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .location__footer .btn { flex: none; }
}

/* ==========================================================================
   DESKTOP (>= 1024px): three cards in one row
   ========================================================================== */
@media (min-width: 64em) {
  .location { padding-block: 6rem 5rem; }

  .location__arcs,
  .location__atmosphere { display: block; }

  .location__head { max-width: 46rem; }

  .location__title { margin-top: 1.75rem; }

  .location__intro { margin-top: 1.5rem; }

  .location__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.4vw, 1.25rem);
    margin-top: 2.75rem;
  }

  .place-card { flex-direction: column; }

  .place-card__media {
    flex: none;
    aspect-ratio: 1.37 / 1;
    min-height: 0;
  }

  .place-card__body {
    align-self: stretch;
    gap: 1rem;
    padding: 1.5rem 1.25rem 1.75rem;
  }

  .place-card__icon { width: 3.75rem; height: 3.75rem; }

  .place-card__icon svg { width: 1.75rem; height: 1.75rem; }

  .place-card__title { font-size: clamp(1.375rem, 0.75rem + 0.85vw, 1.5625rem); }

  .place-card__kicker { font-size: 0.75rem; }

  .location__footer { margin-top: 2.25rem; }
}