/* Shop photos for Suite B4 (added 2026-10-07).
   Scoped under .br-shop so it sits safely on both the revamp homepage and the Elementor pages. */

.br-shop {
  --shop-ink: #071a34;
  --shop-ink-3: #163f72;
  --shop-muted: #5c697a;
  --shop-line: #dbe3ed;
  --shop-canvas: #eaf0f7;
  --shop-tint: #f4f7fb;
  --shop-accent: #f2b721;
  --shop-radius: 20px;
  color: var(--shop-ink);
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.br-shop-section { padding: 84px 0; background: #ffffff; }
.br-shop-section--tint { background: var(--shop-tint); }
.br-shop-shell { width: min(calc(100% - 28px), 1180px); margin-inline: auto; }

.br-shop .br-shop-head { max-width: 760px; margin: 0 0 30px; }
.br-shop .br-shop-head--center { margin-inline: auto; text-align: center; }
.br-shop .br-shop-eyebrow {
  margin: 0 0 14px;
  color: var(--shop-ink-3);
  font-family: inherit;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .13em;
  line-height: 1.4;
  text-transform: uppercase;
}
.br-shop .br-shop-head h2 {
  margin: 0 0 14px;
  color: var(--shop-ink);
  font-family: inherit;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.08;
}
.br-shop .br-shop-head h3 { margin: 0; }
.br-shop .br-shop-head p:not(.br-shop-eyebrow):not(.eyebrow) {
  margin: 0;
  color: var(--shop-muted);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
}

.br-shop-grid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.br-shop-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.br-shop-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.br-shop .br-shop-photo {
  margin: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  box-shadow: 0 10px 28px rgba(7, 26, 52, .06);
}
.br-shop .br-shop-photo img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--shop-canvas);
  border-radius: 0;
}
.br-shop .br-shop-photo figcaption {
  padding: 13px 16px 15px;
  color: var(--shop-ink);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 750;
  line-height: 1.35;
}
.br-shop .br-shop-photo figcaption .br-shop-note {
  display: block;
  margin-top: 3px;
  color: var(--shop-muted);
  font-size: .8rem;
  font-weight: 500;
}
.br-shop .br-shop-step {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  color: var(--shop-ink);
  background: var(--shop-accent);
  border-radius: 50%;
  font-size: .76rem;
  font-weight: 900;
  vertical-align: 1px;
}

/* Homepage: real entrance photo in the "Visit the shop" card, plus the gallery strip below the cards */
.visit-card--map .visit-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.visit-card--map .visit-card__note { margin: -6px 0 14px; color: var(--shop-muted, #5c697a); font-size: .84rem; line-height: 1.45; }
.br-shop--home { margin-top: 56px; }
.br-shop--home .br-shop-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; max-width: none; margin-bottom: 22px; }
.br-shop--home .br-shop-head h3 { font-size: 1.45rem; }

@media (max-width: 860px) {
  .br-shop-section { padding: 64px 0; }
  .br-shop-grid--3,
  .br-shop-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-shop-grid--steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .br-shop--home .br-shop-head { display: block; }
}

@media (max-width: 700px) {
  .br-shop-grid--steps { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

@media (max-width: 420px) {
  .br-shop-grid { gap: 10px; }
  .br-shop .br-shop-photo { border-radius: 14px; }
  .br-shop .br-shop-photo figcaption { padding: 10px 12px 12px; font-size: .8rem; }
}