/* ============================================================
   BARBER — branch pages (/b15/, /en/b15/ …), generated by tools/build_branches.py
   Loaded after styles.css: header, footer, buttons and tokens come from there.
   ============================================================ */
.bp-main { padding-top: 110px; }
.bp-muted { color: var(--color-text-muted); }
.bp-small { font-size: .88rem; }
.bp-ico {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* hero: the branch photo is always shown whole (no cropping) */
.bp-hero {
  display: grid;
  gap: 24px;
  padding-bottom: 40px;
}
.bp-hero__img {
  width: 100%;
  max-width: 512px;
  height: auto;
  justify-self: center;
  border-radius: var(--radius);
  border: 1px solid rgba(171, 130, 83, .25);
}
.bp-kicker {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: var(--color-brass-light); font-weight: 700; font-size: .92rem;
}
.bp-badge {
  background: var(--color-brass); color: #fff;
  font-size: .72rem; padding: 1px 10px; border-radius: 999px;
}
.bp-hero h1 {
  font-size: clamp(1.35rem, 4.6vw, 1.9rem);
  font-weight: 900; line-height: 1.35;
  margin: 6px 0 16px;
}
.bp-hero h1 [dir="ltr"], .bp-kicker [dir="ltr"] { font-family: var(--font-heading-en); }
html[lang="en"] .bp-hero h1 { font-family: var(--font-heading-en); font-weight: 700; }
.bp-facts { list-style: none; display: grid; gap: 8px; margin-bottom: 22px; font-size: .95rem; }
.bp-facts li { display: flex; gap: 10px; align-items: flex-start; }
.bp-facts .bp-ico { color: var(--color-brass-light); margin-top: 4px; }
.bp-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.bp-cta .btn { padding: 11px 20px; font-size: .92rem; }
.bp-cta .bp-ico, .bp-cta .ico { width: 17px; height: 17px; }

/* sections */
.bp-section { padding: 34px 0; border-top: 1px solid rgba(171, 130, 83, .18); text-align: center; }
.bp-section h2 { font-size: 1.35rem; font-weight: 900; margin-bottom: 16px; }
html[lang="en"] .bp-section h2 { font-family: var(--font-heading-en); font-weight: 700; }

.bp-services { list-style: none; display: grid; gap: 2px; margin: 0 auto 10px; max-width: 560px; text-align: start; }
.bp-services li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-weight: 600; }
.bp-dots { flex: 1; border-bottom: 1px dotted rgba(171, 130, 83, .45); transform: translateY(-4px); }
.bp-services b { color: var(--color-brass-light); font-family: var(--font-heading-en); white-space: nowrap; }
.bp-services small { font-size: .7rem; color: var(--color-text-muted); }

.bp-reviews { display: grid; gap: 14px; margin: 0 auto 14px; max-width: 980px; }
.bp-review {
  background: var(--color-bg-secondary);
  border: 1px solid rgba(171, 130, 83, .2);
  border-radius: var(--radius); padding: 16px 18px;
}
.bp-stars { color: var(--color-brass-light); letter-spacing: 2px; font-size: .85rem; }
.bp-review blockquote { margin: 6px 0; }
.bp-review figcaption { color: var(--color-text-muted); font-size: .82rem; }
.bp-link { color: var(--color-brass-light); font-weight: 700; }
.bp-link:hover { text-decoration: underline; }

.bp-branches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 900px; margin: 0 auto; }
.bp-branch {
  display: grid; gap: 2px;
  padding: 14px 16px; border-radius: var(--radius);
  background: var(--color-bg-secondary);
  border: 1px solid rgba(171, 130, 83, .2);
  transition: border-color .2s, transform .2s;
}
.bp-branch:hover { border-color: var(--color-brass); transform: translateY(-2px); }
.bp-branch b { font-family: var(--font-heading-en); color: var(--color-brass-light); font-size: 1.05rem; }
.bp-branch span { color: var(--color-text-muted); font-size: .88rem; }

@media (max-width: 620px) {
  .bp-main { padding-top: 92px; }
}

/* side by side: photo at full height of the screen, text next to it */
@media (min-width: 860px) {
  .bp-hero {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    padding-bottom: 48px;
  }
  .bp-hero__img {
    width: auto;
    max-width: none;
    height: min(640px, calc(100vh - 150px));
    min-height: 420px;
  }
  .bp-reviews { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .bp-branches { grid-template-columns: repeat(4, 1fr); }
}