/* =============================================================
   sec-location-single.css — Focofy Factory v1.1
   Seção: Location Single
   Contract: Design Tokens v3.6 / Responsive Contract v1.3
   ACF: group_focofy_pb__sec_location_single v1.1

   v1.0 → v1.1:
     - --ls-content-max: 860px → var(--content-max) (DTC v3.6)
     - max-width: 860px no .no-media → var(--ls-content-max)
     - split grid desktop-first → mobile-first (min-width: 1024px)
     - order rules (is-media-*) movidas para min-width: 1024px
     - max-width: 1024px (Tipo B) → removido
     - max-width: 768px → 767px (valor canônico)
     - var(--focus-ring-*) → var(--ds-focus-*) (tokens emitidos pelo generator)
     - focofy-button → btn (namespace padrão do tema)
   ============================================================= */

/* -------------------------------------------------------------
   Tokens locais
   ------------------------------------------------------------- */
.focofy-location-single {
  --ls-gap:          var(--grid-gap);
  --ls-content-max:  var(--content-max);    /* 860px — DTC v3.6 --content-max */
  --ls-media-max:    540px;

  --ls-title-color:  var(--color-heading);
  --ls-text-color:   var(--color-text);
  --ls-muted-color:  var(--color-text-muted);
  --ls-link-color:   var(--color-link);
  --ls-link-hover:   var(--color-link-hover);

  --ls-map-radius:   var(--radius-xl);
  --ls-map-border:   var(--color-border-subtle);
  --ls-addr-border:  var(--color-border-subtle);

  --ls-hours-bg:     var(--color-surface-2);
  --ls-hours-border: var(--color-border-subtle);

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

/* Dark mode */
.focofy-section[data-bg="dark"] .focofy-location-single,
.focofy-section--sec-location-single[data-bg="dark"] .focofy-location-single {
  --ls-map-border:   var(--color-border-strong);
  --ls-addr-border:  var(--color-border-strong);
  --ls-hours-bg:     var(--color-surface-3);
  --ls-hours-border: var(--color-border-strong);
}

/* -------------------------------------------------------------
   Body — grid split/stacked
   ------------------------------------------------------------- */
.focofy-location-single__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ls-gap);
  align-items: center;
}

/* split 2 colunas — ativo somente no desktop via min-width: 1024px abaixo */

.focofy-location-single--layout-stacked .focofy-location-single__body,
.focofy-location-single--layout-map-top  .focofy-location-single__body {
  grid-template-columns: 1fr;
}

/* Ordem da mídia */
/* order rules (is-media-left/right) — ativas somente no desktop via min-width: 1024px abaixo */

/* -------------------------------------------------------------
   Mídia (foto ou mapa na área lateral)
   ------------------------------------------------------------- */
.focofy-location-single__media {
  position: relative;
  width: 100%;
  max-width: var(--ls-media-max);
}

.focofy-location-single--layout-stacked  .focofy-location-single__media,
.focofy-location-single--layout-map-top  .focofy-location-single__media {
  max-width: 100%;
}

.focofy-location-single__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--ls-map-border);
  box-shadow: var(--shadow-lg);
}

/* -------------------------------------------------------------
   Mapa embed (dentro da área de mídia ou como bloco no conteúdo)
   ------------------------------------------------------------- */
.focofy-location-single__map {
  overflow: hidden;
  border-radius: var(--ls-map-radius);
  border: 1px solid var(--ls-map-border);
  box-shadow: var(--shadow-md);
  background: var(--color-surface-2);
}

.focofy-location-single__map iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* -------------------------------------------------------------
   Conteúdo
   ------------------------------------------------------------- */
.focofy-location-single__content {
  width: 100%;
  max-width: var(--ls-content-max);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
  text-align: center;
}

.focofy-location-single.no-media .focofy-location-single__content {
  max-width: var(--ls-content-max);
}

.focofy-location-single--align-center .focofy-location-single__content {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

/* -------------------------------------------------------------
   Título
   ------------------------------------------------------------- */
.focofy-location-single__title {
  margin: 0;
  color: var(--ls-title-color);
  font-family: var(--font-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--fw-heading);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

/* -------------------------------------------------------------
   Descrição
   ------------------------------------------------------------- */
.focofy-location-single__description {
  color: var(--ls-muted-color);
  font-size: var(--font-size-lg);
  line-height: var(--lh-relaxed);
}

.focofy-location-single__description p {
  margin: 0 0 var(--space-3);
}
.focofy-location-single__description p:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------
   Endereço
   ------------------------------------------------------------- */
.focofy-location-single__address {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--ls-addr-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  font-style: normal;
  width: 100%;
  align-items: center;
  text-align: center;
}

.focofy-location-single__address-street {
  color: var(--ls-text-color);
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.focofy-location-single__address-city {
  color: var(--ls-muted-color);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
}

/* -------------------------------------------------------------
   Telefone
   ------------------------------------------------------------- */
.focofy-location-single__phone {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-2);
  padding:        var(--space-4) var(--space-6);
  border:         1px solid var(--ls-addr-border);
  border-radius:  var(--radius-lg);
  background:     var(--color-surface-2);
  width:          100%;
}

.focofy-location-single__phone-label {
  display:        flex;
  align-items:    center;
  gap:            var(--space-2);
  font-size:      var(--font-size-xs);
  font-weight:    var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--color-text-muted);
}

.focofy-location-single__phone-link {
  font-size:       var(--font-size-2xl);
  font-weight:     var(--fw-extrabold);
  letter-spacing:  .04em;
  color:           var(--color-accent);
  text-decoration: none;
  transition:      opacity var(--transition-fast);
}

.focofy-location-single__phone-link:hover {
  opacity: .8;
}

/* -------------------------------------------------------------
   Horários
   ------------------------------------------------------------- */
.focofy-location-single__hours {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  list-style: none;
  border: 1px solid var(--ls-hours-border);
  border-radius: var(--radius-lg);
  background: var(--ls-hours-bg);
}

.focofy-location-single__hours-slot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: var(--lh-tight);
}

.focofy-location-single__hours-days {
  min-width: 100px;
  color: var(--ls-muted-color);
}

.focofy-location-single__hours-time {
  color: var(--ls-text-color);
  font-weight: var(--fw-semibold);
}

/* -------------------------------------------------------------
   CTA
   ------------------------------------------------------------- */
.focofy-location-single__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.focofy-location-single--align-center .focofy-location-single__cta {
  justify-content: center;
}

/* -------------------------------------------------------------
   Acessibilidade
   ------------------------------------------------------------- */
.focofy-location-single a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--ds-focus-size, 3px) color-mix(in srgb, var(--ds-focus-color, var(--color-accent)) var(--ds-focus-opacity-pct, 50%), transparent);
  border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------
   Desktop — ≥ 1024px
   ------------------------------------------------------------- */
@media (min-width: 1024px) {            /* --bp-desktop */

  /* split: 2 colunas no desktop */
  .focofy-location-single--layout-split .focofy-location-single__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* order rules da mídia — só fazem sentido em 2 colunas */
  .focofy-location-single__body.is-media-left .focofy-location-single__media  { order: 1; }
  .focofy-location-single__body.is-media-left .focofy-location-single__content { order: 2; }
  .focofy-location-single__body.is-media-right .focofy-location-single__content { order: 1; }
  .focofy-location-single__body.is-media-right .focofy-location-single__media  { order: 2; }
}

/* -------------------------------------------------------------
   Responsivo — 768px
   ------------------------------------------------------------- */
@media (max-width: 767px) {             /* abaixo de --bp-tablet */
  .focofy-location-single {
    --ls-gap: var(--space-8);
  }

  .focofy-location-single__title {
    font-size: var(--font-size-3xl);  /* reduz um degrau do 4xl base */
  }

  .focofy-location-single__description {
    font-size: var(--font-size-base);
  }

  .focofy-location-single__hours-slot {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .focofy-location-single__cta .btn {
    width: 100%;
    justify-content: center;
  }
}


/* -------------------------------------------------------------
   Thumbnail da unidade (abaixo do mapa na coluna de mídia)
   ------------------------------------------------------------- */
.focofy-location-single__thumb {
  margin: var(--space-4) 0 0;
  padding: 0;
  border: 0;
}

.focofy-location-single__thumb img {
  border-radius: var(--radius-xl);
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 220px;
  border: 1px solid var(--ls-map-border);
  box-shadow: var(--shadow-sm);
}

.focofy-location-single__thumb--stacked {
  max-width: 480px;
}

/* -------------------------------------------------------------
   Prefers reduced motion
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .focofy-location-single__media img {
    transition: none;
  }
}