/* Blog page: styles for tz-blog__* classes. Tokens come from main.css. */

/* ---------- Hero ---------- */
.tz-blog__hero { position: relative; padding: calc(var(--tz-header-h) + 52px) 0 56px; background: var(--tz-dark); color: #fff; overflow: hidden; overflow: clip; }
.tz-blog__hero-media { position: absolute; inset: 0; }
.tz-blog__hero-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tz-blog__hero-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 2, 0, .95) 0%, rgba(7, 2, 0, .82) 60%, rgba(7, 2, 0, .6) 100%); }
.tz-blog__hero-inner { position: relative; z-index: 1; }
.tz-blog__hero-inner > * { max-width: 760px; }
.tz-blog__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; line-height: 1.3; color: #fff; }
.tz-blog__crumbs a { color: #fff; opacity: .85; }
.tz-blog__crumbs a:hover, .tz-blog__crumbs a:focus-visible { color: var(--tz-accent-light); opacity: 1; text-decoration: underline; }
.tz-blog__crumbs span { color: #fff; }
.tz-blog__title { margin-top: 22px; font-size: 52px; font-weight: 600; line-height: 1.08; color: #fff; }
.tz-blog__lead { margin-top: 20px; font-size: 18px; line-height: 1.65; color: rgba(255, 255, 255, .92); }

/* ---------- Listing ---------- */
.tz-blog__listing { padding: 80px 0 90px; background: #fff; }
.tz-blog__head { margin-bottom: 44px; }
.tz-blog__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.tz-blog__cards > * { min-width: 0; }
.tz-blog__card { display: flex; flex-direction: column; min-width: 0; background: #fff; border-radius: var(--radius-2); box-shadow: var(--shadow-4); overflow: hidden; transition: box-shadow var(--duration-base) var(--easing-base), transform var(--duration-base) var(--easing-base); }
.tz-blog__card:hover { box-shadow: var(--shadow-5); transform: translateY(-3px); }
.tz-blog__card-media { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--tz-gray); overflow: hidden; }
.tz-blog__card-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tz-blog__card:hover .tz-blog__card-media > img { transform: scale(1.06); }
.tz-blog__card-date { position: absolute; left: 0; bottom: 0; display: block; min-width: 58px; padding: 8px 10px 7px; background: var(--tz-accent); color: #fff; text-align: center; border-top-right-radius: var(--radius-2); }
.tz-blog__card-date b { display: block; font-family: var(--font-family-2); font-size: 24px; font-weight: 500; line-height: 1.1; color: #fff; }
.tz-blog__card-date small { display: block; font-size: 13px; line-height: 1.2; text-transform: capitalize; color: #fff; }
.tz-blog__card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px 26px 26px; }
.tz-blog__card-title { font-size: 23px; line-height: 1.22; }
.tz-blog__card-title a { color: var(--color-text-heading); }
.tz-blog__card-title a:hover, .tz-blog__card-title a:focus-visible { color: var(--tz-accent); }
.tz-blog__card-text { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--tz-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tz-blog__card-more { margin-top: auto; padding-top: 18px; }

/* ---------- Pagination ---------- */
.tz-blog__pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 56px; }
.tz-blog__page-num, .tz-blog__page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 12px; border: 1px solid var(--tz-line); border-radius: var(--radius-2); background: #fff; font-family: var(--font-family-2); font-size: 18px; line-height: 1; color: var(--color-text-heading); cursor: pointer; }
.tz-blog__page-num:hover, .tz-blog__page-num:focus-visible, .tz-blog__page-btn:hover, .tz-blog__page-btn:focus-visible { border-color: var(--tz-accent); background: var(--tz-accent); color: #fff; }
.tz-blog__page-num--current { border-color: var(--tz-accent); background: var(--tz-accent); color: #fff; cursor: default; }
.tz-blog__page-gap { min-width: 24px; text-align: center; color: var(--tz-muted); }

/* ---------- Empty state ---------- */
.tz-blog__empty { max-width: 620px; margin: 0 auto; padding: 50px 30px; text-align: center; background: var(--tz-gray); border-radius: var(--radius-2); border-top: 4px solid var(--tz-accent); }
.tz-blog__empty > img { display: block; width: 48px; height: 48px; margin: 0 auto 18px; }
.tz-blog__empty h2 { font-size: 32px; color: var(--color-text-heading); }
.tz-blog__empty p { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--tz-muted); }
.tz-blog__empty-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }

/* ---------- More reading ---------- */
.tz-blog__more { padding: 70px 0; background: var(--tz-gray); }
.tz-blog__more-title { margin-bottom: 30px; font-size: 32px; color: var(--color-text-heading); }
.tz-blog__more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tz-blog__more-grid > * { min-width: 0; }
.tz-blog__more-card { display: block; padding: 24px 26px; background: #fff; border-left: 4px solid var(--tz-accent); border-radius: var(--radius-2); box-shadow: var(--shadow-4); }
.tz-blog__more-card h3 { font-size: 21px; line-height: 1.25; color: var(--color-text-heading); transition: color var(--duration-base) var(--easing-base); }
.tz-blog__more-card:hover, .tz-blog__more-card:focus-visible { box-shadow: var(--shadow-5); }
.tz-blog__more-card:hover h3, .tz-blog__more-card:focus-visible h3 { color: var(--tz-accent); }
.tz-blog__more-date { display: block; margin-top: 10px; font-size: 14px; color: var(--tz-muted); }

/* ---------- Call to action (light) ---------- */
.tz-blog__cta { padding: 80px 0; background: #fff; }
.tz-blog__cta-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; padding: 44px 48px; background: var(--tz-gray); border-radius: var(--radius-2); border-left: 6px solid var(--tz-accent); box-shadow: var(--shadow-4); }
.tz-blog__cta-box > * { min-width: 0; }
.tz-blog__cta-text h2 { font-size: 34px; color: var(--color-text-heading); }
.tz-blog__cta-text p { margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--tz-muted); }
.tz-blog__cta-actions { display: flex; flex-direction: column; gap: 12px; min-width: 240px; }
.tz-blog__cta-phone { font-family: var(--font-family-2); font-size: 20px; font-weight: 500; }
.tz-blog__cta-phone:hover, .tz-blog__cta-phone:focus-visible { background: var(--tz-dark); border-color: var(--tz-dark); color: #fff; box-shadow: 0 6px 16px rgba(7, 2, 0, .25); }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .tz-blog__title { font-size: 48px; }
  .tz-blog__cards { gap: 24px; }
  .tz-blog__cta-box { padding: 38px 36px; gap: 30px; }
}

@media (max-width: 1024px) {
  .tz-blog__hero { padding: calc(var(--tz-header-h) + 40px) 0 48px; }
  .tz-blog__title { font-size: 42px; }
  .tz-blog__listing { padding: 64px 0 70px; }
  .tz-blog__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tz-blog__more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tz-blog__cta { padding: 64px 0; }
  .tz-blog__cta-box { grid-template-columns: minmax(0, 1fr); }
  .tz-blog__cta-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .tz-blog__cta-actions .tz-btn { flex: 1 1 220px; }
}

@media (max-width: 768px) {
  .tz-blog__title { font-size: 36px; }
  .tz-blog__lead { font-size: 16.5px; }
  .tz-blog__listing { padding: 50px 0 56px; }
  .tz-blog__head { margin-bottom: 32px; }
  .tz-blog__cards { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-left: auto; margin-right: auto; }
  .tz-blog__more { padding: 54px 0; }
  .tz-blog__more-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-left: auto; margin-right: auto; }
  .tz-blog__more-title { font-size: 28px; }
  .tz-blog__cta-text h2 { font-size: 28px; }
  .tz-blog__cta-box { padding: 32px 26px; }
}

@media (max-width: 480px) {
  .tz-blog__hero { padding: calc(var(--tz-header-h) + 30px) 0 38px; }
  .tz-blog__title { font-size: 31px; }
  .tz-blog__lead { font-size: 16px; }
  .tz-blog__card-body { padding: 20px 20px 22px; }
  .tz-blog__card-title { font-size: 21px; }
  .tz-blog__pagination { gap: 8px; margin-top: 40px; }
  .tz-blog__page-num, .tz-blog__page-btn { min-width: 42px; height: 42px; font-size: 17px; }
  .tz-blog__empty { padding: 36px 20px; }
  .tz-blog__empty h2 { font-size: 26px; }
  .tz-blog__cta { padding: 50px 0; }
  .tz-blog__cta-box { padding: 28px 20px; border-left-width: 4px; text-align: center; }
  .tz-blog__cta-text h2 { font-size: 25px; }
  .tz-blog__cta-actions { flex-direction: column; }
  .tz-blog__cta-actions .tz-btn { flex: 0 0 auto; width: 100%; }
  .tz-blog__more-card { padding: 20px; }
}

@media (max-width: 375px) {
  .tz-blog__title { font-size: 28px; }
  .tz-blog__cta-text h2 { font-size: 23px; }
  .tz-blog__empty-links .tz-btn { width: 100%; }
}