/* Стили вкладок «Услуги» и фильтра фотогалереи (в макете index.html были инлайном в <head>). Подключаются блоками services / tabs / gallery. */
/* ===== Табы «Услуги» ===== */
.svc__tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); margin-bottom: var(--sp-6, 24px); }
.svc__tab {
  appearance: none; cursor: pointer;
  font: inherit; font-size: .95rem; line-height: 1.2;
  padding: .6em 1.1em; border-radius: 999px;
  border: 1px solid var(--line-strong, #ccc);
  background: transparent; color: var(--fg, #241f1a);
  transition: background var(--dur-fast, 160ms) ease, color var(--dur-fast, 160ms) ease, border-color var(--dur-fast, 160ms) ease;
}
.svc__tab:hover { border-color: var(--accent, #b45); color: var(--accent, #b45); }
.svc__tab:focus-visible { outline: 2px solid var(--accent, #b45); outline-offset: 2px; }
.svc__tab[aria-selected="true"] { background: var(--accent, #b45); border-color: var(--accent, #b45); color: var(--accent-fg, #fff); }
.svc__panel[hidden] { display: none !important; }
  .svc__panel { display: grid; grid-template-columns: 1fr; gap: var(--sp-5, 20px); align-items: center; }
@media (min-width: 768px) { .svc__panel { grid-template-columns: 1.1fr 1fr; gap: var(--sp-7, 40px); } }
.svc__media { border-radius: var(--r-md, 12px); overflow: hidden; background: var(--bg-muted, #eee); aspect-ratio: 16 / 10; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc__title { margin: 0 0 var(--sp-3, 12px); font-size: var(--fs-h3, 1.4rem); }
.svc__text p { margin: 0; color: var(--fg-muted, #555); max-width: 46ch; }

/* ===== Фильтр фотогалереи ===== */
.gallery-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); justify-content: center; margin-bottom: var(--sp-6, 24px); }
.gallery-filter__btn {
  appearance: none; cursor: pointer;
  font: inherit; font-size: .95rem; line-height: 1.2;
  padding: .55em 1.05em; border-radius: 999px;
  border: 1px solid var(--line-strong, #ccc);
  background: transparent; color: var(--fg, #241f1a);
  transition: background var(--dur-fast, 160ms) ease, color var(--dur-fast, 160ms) ease, border-color var(--dur-fast, 160ms) ease;
}
.gallery-filter__btn:hover { border-color: var(--accent, #b45); color: var(--accent, #b45); }
.gallery-filter__btn:focus-visible { outline: 2px solid var(--accent, #b45); outline-offset: 2px; }
.gallery-filter__btn.is-active { background: var(--accent, #b45); border-color: var(--accent, #b45); color: var(--accent-fg, #fff); }
/* Во время фильтрации показываем ТОЛЬКО совпавшие плитки (перекрывая .is-hidden
   из кнопки «Показать ещё»). Категория «Все» снимает класс — исходное поведение
   галереи и кнопки «Показать ещё» полностью восстанавливается. */
.gallery.is-filtering .gallery__item { display: none !important; }
.gallery.is-filtering .gallery__item.is-match { display: block !important; }