/* ---------------------------------------------------------------------------
   blog.css — /blog/ only.

   Loaded AFTER style.css, so it inherits the site shell (fixed navbar,
   Montserrat, Bootstrap grid, footer) and only restyles the content band.

   The site's global "body { color: white }" is built for dark hero imagery.
   Long-form reading needs the opposite, so the blog band gets a light surface
   with the brand navy as text. Header, footer, logo, nav and the
   container/row/col rhythm are untouched.

   Brand palette (from style.css):
     #022850  deep navy   — headings, body copy
     #0069B5  blue        — links, footer
     #8FBD28  green       — accents, category badges
   --------------------------------------------------------------------------- */

.tt-blog-band {
    background-color: #f4f6f9;
    color: #022850;
}

.tt-blog-band a { color: #0069B5; }
.tt-blog-band a:hover { color: #022850; text-decoration: underline; }

/* --- Headings ------------------------------------------------------------ */

.tt-blog-h1 {
    color: #022850;
    font-weight: 800;
    line-height: 1.15;
    font-size: clamp(2rem, 4.5vw, 3.1rem);
    margin-bottom: .5rem;
}

.tt-blog-sub {
    color: #40556e;
    font-size: 1.05rem;
    max-width: 60ch;
    margin-bottom: 1.75rem;
}

/* --- Category filter ----------------------------------------------------- */

.tt-blog-cats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .5rem;
}

.tt-blog-cat {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border: 2px solid #d3dce7;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    color: #022850 !important;
    background: #fff;
    text-decoration: none !important;
}

.tt-blog-cat:hover { border-color: #0069B5; }

.tt-blog-cat.is-active {
    background: #022850;
    border-color: #022850;
    color: #fff !important;
}

.tt-blog-cat-count {
    font-size: .72rem;
    opacity: .7;
}

/* --- Listing cards ------------------------------------------------------- */

.tt-blog-card {
    height: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

.tt-blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(2, 40, 80, .13);
}

.tt-blog-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none !important;
    color: inherit !important;
}

.tt-blog-card-img {
    height: 168px;
    background-size: cover;
    background-position: center;
    background-color: #022850;
}

/* Postless fallback: a brand-colored band rather than a broken image box. */
.tt-blog-card-img--none {
    background: linear-gradient(135deg, #022850 0%, #0069B5 100%);
}

.tt-blog-card-body { padding: 1.1rem 1.15rem 1.35rem; }

.tt-blog-card-title {
    font-size: 1.16rem;
    font-weight: 700;
    line-height: 1.3;
    color: #022850;
    margin: .55rem 0 .5rem;
}

.tt-blog-card-excerpt {
    font-size: .93rem;
    color: #46586d;
    margin-bottom: .8rem;
}

.tt-blog-card-meta {
    font-size: .8rem;
    color: #7387a0;
    margin: 0;
}

.tt-blog-badge {
    display: inline-block;
    background: #8FBD28;
    color: #12240a;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .2rem .55rem;
    border-radius: 4px;
}

/* --- Breadcrumbs --------------------------------------------------------- */

.tt-blog-crumbs {
    font-size: .85rem;
    color: #7387a0;
    margin-bottom: 1.1rem;
}

.tt-blog-crumbs span { margin: 0 .4rem; opacity: .6; }

/* --- Post body ----------------------------------------------------------- */

.tt-blog-post-meta {
    color: #7387a0;
    font-size: .9rem;
    margin-bottom: 1.5rem;
}

.tt-blog-hero {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 1.75rem;
}

.tt-blog-body {
    font-size: 1.07rem;
    line-height: 1.72;
    color: #22364d;
}

.tt-blog-body h2 {
    color: #022850;
    font-weight: 800;
    font-size: 1.65rem;
    margin: 2.2rem 0 .85rem;
}

.tt-blog-body h3 {
    color: #022850;
    font-weight: 700;
    font-size: 1.28rem;
    margin: 1.7rem 0 .65rem;
}

.tt-blog-body p { margin-bottom: 1.15rem; }
.tt-blog-body ul,
.tt-blog-body ol { margin: 0 0 1.25rem 1.15rem; }
.tt-blog-body li { margin-bottom: .45rem; }

.tt-blog-body blockquote {
    border-left: 4px solid #8FBD28;
    background: #fff;
    margin: 1.6rem 0;
    padding: .9rem 1.2rem;
    font-style: italic;
    color: #22364d;
}

.tt-blog-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.3rem 0;
}

/* Data tables are the point of several planned posts — keep them readable
   and never let one push the page into horizontal scroll. */
.tt-blog-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: .95rem;
    background: #fff;
    display: block;
    overflow-x: auto;
}

.tt-blog-body th,
.tt-blog-body td {
    border: 1px solid #dde4ec;
    padding: .55rem .7rem;
    text-align: left;
}

.tt-blog-body th {
    background: #022850;
    color: #fff;
    font-weight: 700;
}

.tt-blog-body tbody tr:nth-child(even) { background: #f7f9fc; }

/* --- CTA ----------------------------------------------------------------- */

.tt-blog-cta {
    background: #022850;
    color: #fff;
    border-radius: 10px;
    padding: 1.75rem;
    margin: 2.75rem 0 0;
}

.tt-blog-cta h2 { color: #fff; font-weight: 800; font-size: 1.5rem; margin-bottom: .5rem; }
.tt-blog-cta p  { color: #cddcec; margin-bottom: 1.1rem; }
.tt-blog-cta .btn { background: #8FBD28; color: #12240a; font-weight: 700; }
.tt-blog-cta .btn:hover { background: #7ea822; color: #12240a; }

/* --- Related ------------------------------------------------------------- */

.tt-blog-related { margin-top: 3rem; }

.tt-blog-related > h2 {
    color: #022850;
    font-weight: 800;
    font-size: 1.4rem;
    margin-bottom: 1.1rem;
}

.tt-blog-related-item {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.05rem;
    text-decoration: none !important;
    color: inherit !important;
    transition: border-color .15s ease;
}

.tt-blog-related-item:hover { border-color: #0069B5; }
.tt-blog-related-item h3 { font-size: 1.03rem; font-weight: 700; color: #022850; margin: .5rem 0 .4rem; }
.tt-blog-related-item p  { font-size: .87rem; color: #55687f; margin: 0; }

/* --- Pagination / empty state -------------------------------------------- */

.tt-blog-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    margin-top: 2.5rem;
}

.tt-blog-pagebtn {
    background: #022850;
    color: #fff !important;
    padding: .5rem 1.1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none !important;
}

.tt-blog-pagebtn:hover { background: #0069B5; color: #fff !important; }
.tt-blog-pagenum { font-size: .88rem; color: #7387a0; }

.tt-blog-empty {
    background: #fff;
    border: 1px dashed #c8d4e2;
    border-radius: 10px;
    padding: 2.5rem;
    text-align: center;
}

.tt-blog-empty h2 { color: #022850; font-size: 1.3rem; font-weight: 700; }
.tt-blog-empty p  { color: #55687f; margin: 0; }

/* The global .body-below-nav pads 20vh to clear the fixed navbar; that is a
   lot of dead space above long-form text on short viewports. */
@media (max-width: 991.98px) {
    .body-below-nav { padding-top: 15vh; }
}