/* Shop by Branch tile grid. */
.branch-grid__head { margin-bottom: var(--sp-7); }
.branch-grid__lede { margin: var(--sp-3) auto 0; color: var(--c-field-gray); }

.branch-grid__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .branch-grid__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .branch-grid__list { grid-template-columns: repeat(3, 1fr); } }

.branch-tile { position: relative; }
.branch-tile__link {
  display: block;
  position: relative;
  text-decoration: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--c-navy);
  color: var(--c-cream);
}
.branch-tile__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(244,236,216,.06) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(178,34,52,.08) 0%, transparent 60%),
    repeating-linear-gradient(135deg, transparent 0px, transparent 8px, rgba(244,236,216,.04) 8px, rgba(244,236,216,.04) 9px),
    var(--c-navy);
  transition: transform 400ms ease;
}
.branch-tile__link:hover .branch-tile__bg { transform: scale(1.04); }
.branch-tile__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  text-align: center;
  border: 1px solid rgba(139, 111, 61, .35);
}
.branch-tile__label {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  color: var(--c-cream);
  margin-bottom: var(--sp-2);
}
.branch-tile__tagline {
  font-family: var(--ff-accent);
  font-size: var(--fs-small);
  color: var(--c-bronze);
  letter-spacing: .04em;
}
.branch-tile__link:hover .branch-tile__label { color: var(--c-cream); }
.branch-tile__link:focus-visible { outline: 2px solid var(--c-bronze); outline-offset: 4px; }