/* =====================================================================
   Hamburger Aufsperrdienst — blog.css (ha-blog__)
   Uses tokens and shared classes (ha-wrap, ha-btn, ha-eyebrow) from main.css
   ===================================================================== */

/* Hero */
.ha-blog__hero { position: relative; padding: 52px 0 64px; background: #eef3fa; overflow: hidden; }
.ha-blog__hero::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -1px;
  height: 40px;
  background: #fff;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.ha-blog__hero .ha-wrap { position: relative; z-index: 1; }
.ha-blog__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 28px; font-size: 14px; color: var(--ha-muted); }
.ha-blog__crumbs a { color: var(--ha-ink); font-weight: 700; }
.ha-blog__crumbs a:hover, .ha-blog__crumbs a:focus-visible { color: var(--ha-accent); text-decoration: underline; }
.ha-blog__crumbs-sep { opacity: .5; }
.ha-blog__hero-copy { max-width: 780px; }
.ha-blog__hero-title { margin: 0 0 20px; font-size: 44px; line-height: 1.2; font-weight: 800; color: var(--ha-ink); }
.ha-blog__hero-title span { color: var(--ha-accent); }
.ha-blog__hero-text { max-width: 680px; font-size: 18px; line-height: 1.7; color: var(--ha-ink-2); }

/* Main */
.ha-blog__main { padding: 56px 0 var(--ha-pad); }

/* Grid + cards */
.ha-blog__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.ha-blog__list > * { min-width: 0; }
.ha-blog__item { display: flex; background: #fff; border: 1px solid var(--ha-line); overflow: hidden; transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease; }
.ha-blog__item:hover, .ha-blog__item:focus-within { transform: translateY(-4px); border-color: transparent; box-shadow: 0 14px 34px rgba(0, 0, 0, .12); }
.ha-blog__item-link { display: flex; flex-direction: column; width: 100%; }
.ha-blog__pic { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ha-soft); }
.ha-blog__pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ha-blog__item:hover .ha-blog__pic > img { transform: scale(1.05); }
.ha-blog__info { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 24px 26px; }
.ha-blog__date { padding: 5px 11px; background: var(--ha-accent); font-family: var(--ha-font-head); font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #111; }
.ha-blog__name { font-size: 20px; line-height: 1.3; color: var(--ha-ink); }
.ha-blog__excerpt { flex: 1 1 auto; font-size: 15px; line-height: 1.65; color: var(--ha-text); }
.ha-blog__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--ha-font-head); font-size: 14px; font-weight: 700; color: var(--ha-ink); transition: color .3s ease; }
.ha-blog__go img { width: 14px; height: 14px; transition: transform .3s ease; }
.ha-blog__item:hover .ha-blog__go, .ha-blog__item-link:focus-visible .ha-blog__go { color: var(--ha-accent); }
.ha-blog__item:hover .ha-blog__go img { transform: translateX(4px); }

/* Empty state */
.ha-blog__empty { max-width: 640px; margin: 0 auto 20px; padding: 44px 32px; text-align: center; background: var(--ha-soft); border-top: 4px solid var(--ha-accent); }
.ha-blog__empty-title { margin-bottom: 14px; font-size: 26px; color: var(--ha-ink); }
.ha-blog__empty-text { margin-bottom: 26px; font-size: 16px; line-height: 1.7; color: var(--ha-text); }
.ha-blog__empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* Pagination */
.ha-blog__pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 52px; }
.ha-blog__pager-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 2px solid var(--ha-ink); font-family: var(--ha-font-head); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ha-ink); cursor: pointer; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.ha-blog__pager-btn img { width: 16px; height: 16px; transition: filter .3s ease; }
.ha-blog__pager-btn:hover, .ha-blog__pager-btn:focus-visible { background: var(--ha-ink); color: #fff; }
.ha-blog__pager-btn:hover img, .ha-blog__pager-btn:focus-visible img { filter: brightness(0) invert(1); }
.ha-blog__pager-btn--prev img { transform: rotate(180deg); }
.ha-blog__pager-nums { display: flex; align-items: center; gap: 6px; }
.ha-blog__pager-num { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 6px; border: 1px solid var(--ha-line); background: #fff; font-family: var(--ha-font-head); font-weight: 700; color: var(--ha-ink); cursor: pointer; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
a.ha-blog__pager-num:hover, a.ha-blog__pager-num:focus-visible { border-color: var(--ha-accent); color: var(--ha-accent); }
.ha-blog__pager-num--active { background: var(--ha-accent); border-color: var(--ha-accent); color: #111; cursor: default; }
.ha-blog__pager-dots { padding: 0 4px; color: var(--ha-muted); }

/* Call to action (light panel, footer below is dark) */
.ha-blog__cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 72px; padding: 44px 48px; background: var(--ha-soft); border-left: 6px solid var(--ha-accent); }
.ha-blog__cta > * { min-width: 0; }
.ha-blog__cta-copy { flex: 1 1 0; max-width: 640px; }
.ha-blog__cta-title { margin-bottom: 12px; font-size: 28px; color: var(--ha-ink); }
.ha-blog__cta-text { font-size: 16px; line-height: 1.7; color: var(--ha-text); }
.ha-blog__cta-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 14px; }

/* Responsive */
@media (max-width: 1200px) {
  .ha-blog__hero-title { font-size: 40px; }
  .ha-blog__list { gap: 24px; }
}
@media (max-width: 1024px) {
  .ha-blog__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ha-blog__main { padding: 48px 0 80px; }
  .ha-blog__cta { padding: 36px 32px; gap: 28px; }
}
@media (max-width: 768px) {
  .ha-blog__hero { padding: 40px 0 56px; }
  .ha-blog__hero-title { font-size: 34px; }
  .ha-blog__hero-text { font-size: 16.5px; }
  .ha-blog__main { padding: 40px 0 64px; }
  .ha-blog__cta { flex-direction: column; align-items: flex-start; margin-top: 56px; }
  .ha-blog__cta-copy { flex: 0 1 auto; }
  .ha-blog__cta-actions { flex: 0 1 auto; justify-content: flex-start; }
}
@media (max-width: 480px) {
  .ha-blog__hero-title { font-size: 29px; }
  .ha-blog__list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ha-blog__info { padding: 20px 18px 22px; }
  .ha-blog__name { font-size: 19px; }
  .ha-blog__pager-btn span { display: none; }
  .ha-blog__empty { padding: 32px 20px; }
  .ha-blog__empty-title { font-size: 22px; }
  .ha-blog__cta { padding: 30px 20px; }
  .ha-blog__cta-title { font-size: 24px; }
  .ha-blog__cta-actions { width: 100%; flex-direction: column; }
  .ha-blog__cta-actions .ha-btn { width: 100%; }
  .ha-blog__empty-actions { flex-direction: column; }
  .ha-blog__empty-actions .ha-btn { width: 100%; }
}
@media (max-width: 375px) {
  .ha-blog__hero-title { font-size: 26px; }
  .ha-blog__crumbs { font-size: 13px; }
}