/* =====================
   PARTIAL — layout-switcher.hbs
   ===================== */

.layout-switcher-bar {
  padding: 0 var(--space-page) var(--space-inner);
}

.layout-switcher {
  display: flex;
  gap: var(--gap-xs);
}

.layout-btn {
  gap: var(--gap-icon);
  padding: var(--padding-btn);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--mute);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  font-family: var(--body-font-family);
  transition: all var(--transition-fast);
  letter-spacing: var(--tracking-sm);
}

.layout-btn:hover {
  color: var(--white-color);
  border-color: var(--line-hover);
  background: var(--surface-4);
}

.layout-btn.active {
  color: var(--gold);
  border-color: var(--gold-border-strong);
  background: var(--gold-bg);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .layout-switcher-bar {
    padding: 0 var(--space-page-md) var(--gap-field);
  }
}

@media (max-width: 560px) {
  .layout-switcher-bar {
    padding: 0 var(--space-page-sm) var(--space-page-sm);
  }

  .layout-btn span {
    display: none;
  }
}