/* Blog archive: navy image tiles. Tokens match home-lusion.css. */
.tnzb {
  --b-bg: #eef0f6; --b-ink: #121527; --b-muted: #5b6078; --b-line: rgba(18, 21, 39, .12);
  --b-blue: #2f45d6; --b-red: #cb2026; --b-navy: #10142a; --b-card: #fff;
  --b-g: clamp(16px, 4vw, 56px);
  position: relative; z-index: 1; background: var(--b-bg); color: var(--b-ink);
  padding: clamp(8px, 2vw, 32px) var(--b-g) 96px; /* #header-wrapper already reserves the header height */ font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}
.tnzb a { color: inherit; text-decoration: none; }
.tnzb-head { max-width: 1320px; margin: 0 auto 48px; }
.tnzb-eyebrow { margin: 0 0 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--b-red); font-weight: 600; }
.tnzb-title { margin: 0 0 32px; font: 300 clamp(48px, 9vw, 128px)/.95 Outfit, Roboto, sans-serif; letter-spacing: -.03em; text-wrap: balance; }
.tnzb-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.tnzb-cats a { padding: 9px 16px; border: 1px solid var(--b-line); border-radius: 999px; font-size: 14px; transition: background .2s, color .2s; }
.tnzb-cats a sup { font-size: 10px; opacity: .6; }
.tnzb-cats a:hover, .tnzb-cats a[aria-current] { background: var(--b-ink); color: var(--b-bg); border-color: var(--b-ink); }
.tnzb-list { max-width: 1320px; margin: 0 auto; }

/* shared card */
.tnzb-card { display: flex; flex-direction: column; min-width: 0; }
.tnzb-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: #dde1ee; }
.tnzb-card-media img, .tnzb-ph { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.tnzb-card:hover .tnzb-card-media img, .tnzb-card:hover .tnzb-ph { transform: scale(1.04); }
.tnzb-card-body { padding: 18px 2px 0; }
.tnzb-meta { margin: 0 0 10px; font-size: 13px; color: var(--b-muted); }
.tnzb-chip { display: inline-block; margin-right: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(47, 69, 214, .1); color: var(--b-blue); font-weight: 600; font-size: 12px; }
.tnzb-card-title { margin: 0 0 10px; font: 400 clamp(20px, 1.9vw, 26px)/1.2 Outfit, Roboto, sans-serif; text-wrap: balance; }
.tnzb-card-title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s; }
.tnzb-card:hover .tnzb-card-title a { background-size: 100% 1px; }
.tnzb-ex { margin: 0; color: var(--b-muted); font-size: 15px; line-height: 1.6; }

/* branded placeholder for posts without an image */
.tnzb-ph { position: relative; display: grid; place-items: end start; padding: 20px; box-sizing: border-box;
  background: radial-gradient(120% 90% at 85% 10%, #566eb1 0, transparent 55%), radial-gradient(90% 80% at 0 100%, #cb2026 0, transparent 50%), #10142a; }
.tnzb-ph span { color: #fff; font: 300 clamp(18px, 2vw, 26px)/1.1 Outfit, Roboto, sans-serif; max-width: 70%; }
.tnzb-ph--cloud-migration { background-color: #142a5c; }
.tnzb-ph--business-intelligence { background-color: #1b1240; }
.tnzb-ph--data-integration { background-color: #0d2d3a; }
.tnzb-ph--data-warehousing { background-color: #1a1f35; }
.tnzb-ph::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 48px); }

/* C — navy: image-led tiles, title over image */
.tnzb--c { --b-bg: #10142a; --b-ink: #f3f4fa; --b-muted: #a3a8c3; --b-line: rgba(255, 255, 255, .14); }
.tnzb--c .tnzb-list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.tnzb--c .tnzb-card { position: relative; grid-column: span 4; border-radius: 18px; overflow: hidden; min-height: 420px; }
.tnzb--c .tnzb-card:nth-child(5n+1), .tnzb--c .tnzb-card:nth-child(5n+2) { grid-column: span 6; }
.tnzb--c .tnzb-card-media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.tnzb--c .tnzb-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 20, 42, .05) 20%, rgba(16, 20, 42, .92) 100%); }
.tnzb--c .tnzb-card-body { position: relative; margin-top: auto; padding: 28px; pointer-events: none; }
.tnzb--c .tnzb-card-body a { pointer-events: auto; }
.tnzb--c .tnzb-card-title { color: #fff; }
.tnzb--c .tnzb-card-title a::after { content: ""; position: absolute; inset: 0; }
.tnzb--c .tnzb-chip { background: rgba(255, 255, 255, .14); color: #fff; }
.tnzb--c .tnzb-ex { display: none; }
.tnzb--c .tnzb-ph span { display: none; }

/* pagination */
.tnzb-pages { max-width: 1320px; margin: 64px auto 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tnzb-pages .page-numbers { min-width: 44px; height: 44px; padding: 0 14px; display: inline-grid; place-items: center; border: 1px solid var(--b-line); border-radius: 999px; font-size: 14px; box-sizing: border-box; }
.tnzb-pages .current, .tnzb-pages a:hover { background: var(--b-ink); color: var(--b-bg); border-color: var(--b-ink); }

@media (max-width: 960px) {
  .tnzb--c .tnzb-card, .tnzb--c .tnzb-card:nth-child(n) { grid-column: span 6; }
}
@media (max-width: 600px) {
  .tnzb--c .tnzb-card, .tnzb--c .tnzb-card:nth-child(n) { grid-column: 1 / -1; min-height: 360px; }
}
@media (prefers-reduced-motion: reduce) { .tnzb * { transition: none !important; } }

/* Theme overrides: Hello's .site-main box and global red links. */
main.site-main.tnzb { max-width: none; width: 100%; margin: 0; box-sizing: border-box; }
.tnzb .tnzb-card-title a, .tnzb .tnzb-cats a, .tnzb .tnzb-pages a { color: var(--b-ink); }
.tnzb--c .tnzb .tnzb-card-title a, .tnzb--c .tnzb-card-title a { color: #fff; }
.tnzb .tnzb-pages .current, .tnzb .tnzb-pages a:hover, .tnzb .tnzb-cats a:hover, .tnzb .tnzb-cats a[aria-current] { color: var(--b-bg); }
/* Break out of the theme's .container > .row > .col wrapper. */
.container:has(> .row > .col > .tnzb) { max-width: none; width: 100%; padding: 0; }
.row:has(> .col > .tnzb) { margin: 0; }
.col:has(> .tnzb) { padding: 0; }
.tnzb .tnzb-card-title { color: var(--b-ink); }
.tnzb--c .tnzb-card-title { color: #fff; }
.tnzb .tnzb-title { color: #fff; }
.tnzb .tnzb-eyebrow { color: #ff5a5f; }
/* Navy runs to the top: drop the site's cloud background behind the header on blog archives. */
body.blog #page-content, body.category #page-content { background: #10142a; }
/* White logo on the navy blog pages (same treatment as .theme-dark). */
body.blog .site-title svg *, body.category .site-title svg * { fill: #fff; stroke: #fff; }
/* Phones: the header overlays the page (#header-wrapper is 0 high), so clear the logo here. */
@media (max-width: 767.98px) { .tnzb { padding-top: 104px; } }