/* Reusable semantic components for new and gradually migrated templates. */
.site-card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.site-section-title{
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--color-brand);
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  font-size: var(--font-size-title-sm);
  font-weight: 700;
  line-height: var(--line-height-compact);
}

.site-text-muted{ color: var(--color-text-secondary); }

.site-link{
  color: var(--color-brand);
  text-decoration: none;
}
.site-link:hover{ color: var(--color-brand-hover); text-decoration: underline; }

.site-button-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-sm);
  background: var(--color-brand);
  color: var(--color-text-inverse);
  font-size: var(--font-size-min);
  line-height: var(--line-height-compact);
  text-decoration: none;
  cursor: pointer;
}
.site-button-primary:hover{ background: var(--color-brand-hover); border-color: var(--color-brand-hover); }

/* Homepage carousel: only the active slide participates in layout. */
.home-banner{ position: relative; width: 100%; min-width: 0; }
.home-banner[hidden],
.home-banner__slide[hidden],
.home-banner__controls[hidden]{ display: none; }
.home-banner__slide{ margin: 0; width: 100%; }
.home-banner__image-link{ display: block; }
.home-banner__image{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 28 / 17;
  object-fit: cover;
}
.home-banner__caption{
  padding: var(--space-2) var(--space-3);
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  font-size: var(--font-size-title-sm);
  line-height: var(--line-height-compact);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-banner__caption a{ color: inherit; }
.home-banner__controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface-muted);
}
.home-banner__controls button{
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: var(--font-size-title-lg);
}
.home-banner__dots{ display: flex; flex-wrap: wrap; justify-content: center; }
.home-banner__dot::before{
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  margin: auto;
  border-radius: 50%;
  background: var(--color-text-muted);
}
.home-banner__dot[aria-pressed="true"]::before{ background: var(--color-brand); }
.home-banner__controls button:focus-visible{ outline: 2px solid var(--color-brand); outline-offset: -2px; }