/* Stores page. Thirteen branches, so the list is the design: one legible card
   per store rather than a map-first layout that hides the addresses. */

.st-lojas {
  padding-block: var(--st-grid-gap) var(--st-section-y);
}

.st-lojas__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 54px);
  font-weight: var(--st-weight-black);
  letter-spacing: -0.03em;
}

.st-lojas__intro {
  max-width: 60ch;
  color: var(--st-ink-2);
}

.st-stores {
  margin-top: var(--st-section-y);
}

/* WordPress wraps a core/group block's children in its own
   `wp-block-group__inner-container` when the block has layout support — so
   `.st-stores` itself has exactly one child, and a grid on `.st-stores`
   never gets to lay out the 13 `.st-store` cards it looks like it should.
   The grid has to go on that inner wrapper instead. */
.st-stores > .wp-block-group__inner-container {
  display: grid;
  gap: var(--st-grid-gap);
  grid-template-columns: repeat(3, 1fr);
}

.st-store {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 20px;
  border: var(--st-border-width) solid var(--st-ink);
}

.st-store__eyebrow {
  margin: 0;
  color: var(--st-accent-deep);
  font-size: var(--st-size-caption);
  font-weight: var(--st-weight-black);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.st-store__name {
  margin: 0;
  font-size: 19px;
  font-weight: var(--st-weight-extrabold);
}

.st-store__address,
.st-store__hours,
.st-store__tel {
  margin: 0;
  font-size: var(--st-size-body-sm);
}

.st-store__hours {
  color: var(--st-ink-2);
}

.st-store__tel {
  display: grid;
  gap: 4px;
  font-weight: var(--st-weight-semibold);
}

.st-store__phone {
  display: flex;
  align-items: center;
  gap: 6px;
}

.st-store__map a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.st-store__map {
  margin: 0;
  font-size: var(--st-size-body-sm);
}

.st-store__phone .st-icon,
.st-store__map .st-icon {
  flex-shrink: 0;
}

@media (max-width: 899px) {
  .st-stores > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .st-stores > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }
}