/* TTMSPL public blog pages. Scoped classes keep existing pages unchanged. */
.tt-blog-page {
    --ttb-navy: #071a36;
    --ttb-navy2: #0d2d4f;
    --ttb-teal: #10b9b1;
    --ttb-teal2: #6de2d9;
    --ttb-red: #ef3340;
    --ttb-ink: #11233d;
    --ttb-muted: #66758a;
    --ttb-paper: #f5f8f7;
    --ttb-line: rgba(7, 26, 54, .12);
    color: var(--ttb-ink);
    background: #fff;
    min-height: 60vh;
    padding-bottom: 84px;
}
.tt-blog-container { width: min(1180px, 92%); margin: 0 auto; }
.tt-blog-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(150px, 17vw, 205px) 0 76px;
    color: #fff;
    background: radial-gradient(circle at 86% 20%, rgba(16,185,177,.2), transparent 28%), linear-gradient(125deg, var(--ttb-navy), #0a2745 70%, #0c394c);
}
.tt-blog-hero::after {
    content: "";
    position: absolute;
    width: 360px; height: 360px;
    right: -160px; bottom: -230px;
    border: 1px solid rgba(109,226,217,.32);
    border-radius: 50%;
    box-shadow: 0 0 0 45px rgba(109,226,217,.035), 0 0 0 90px rgba(109,226,217,.025);
    pointer-events: none;
}
.tt-blog-kicker, .tt-blog-side-kicker {
    display: inline-block;
    color: var(--ttb-teal2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.tt-blog-hero h1 {
    position: relative; z-index: 1;
    max-width: 900px;
    margin: 18px 0 14px;
    font-size: clamp(38px, 6vw, 70px);
    line-height: 1.04;
    letter-spacing: -.045em;
    font-weight: 800;
}
.tt-blog-hero p { position: relative; z-index: 1; max-width: 680px; color: rgba(255,255,255,.75); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.75; }
.tt-blog-hero-line { display: flex; align-items: center; gap: 12px; width: min(240px, 60%); margin-top: 32px; height: 3px; background: rgba(255,255,255,.14); }
.tt-blog-hero-line span { display: block; width: 43%; height: 3px; background: linear-gradient(90deg, var(--ttb-red), var(--ttb-teal)); }
.tt-blog-content-section { padding-top: 64px; }
.tt-blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; align-items: start; gap: 34px; }
.tt-blog-main { min-width: 0; }
.tt-blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tt-blog-card { min-width: 0; border: 1px solid var(--ttb-line); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 16px 40px rgba(7,26,54,.055); transition: transform .25s ease, box-shadow .25s ease; }
.tt-blog-card:hover { transform: translateY(-4px); box-shadow: 0 24px 55px rgba(7,26,54,.12); }
.tt-blog-card-image { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, var(--ttb-navy), var(--ttb-navy2)); }
.tt-blog-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tt-blog-card:hover .tt-blog-card-image img { transform: scale(1.04); }
.tt-blog-image-placeholder { color: var(--ttb-teal2); font-size: 22px; letter-spacing: .15em; font-weight: 800; }
.tt-blog-image-arrow { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; color: var(--ttb-navy); background: var(--ttb-teal2); font-size: 18px; font-weight: 800; }
.tt-blog-card-body { padding: 23px 23px 24px; }
.tt-blog-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 13px; color: var(--ttb-muted); font-size: 12px; }
.tt-blog-meta a { color: #087f7a; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.tt-blog-card h2 { margin: 0 0 12px; font-size: clamp(19px, 2vw, 23px); line-height: 1.28; letter-spacing: -.025em; color: var(--ttb-navy); }
.tt-blog-card h2 a:hover, .tt-blog-read-link:hover { color: #078d87; }
.tt-blog-card-body p { margin: 0 0 20px; color: var(--ttb-muted); font-size: 14px; line-height: 1.75; }
.tt-blog-read-link { display: inline-flex; gap: 12px; align-items: center; color: var(--ttb-navy); font-size: 13px; font-weight: 800; }
.tt-blog-read-link span { color: var(--ttb-red); font-size: 18px; }
.tt-blog-sidebar { display: grid; gap: 22px; }
.tt-blog-side-card { padding: 25px; border: 1px solid var(--ttb-line); border-radius: 17px; background: #fff; box-shadow: 0 15px 38px rgba(7,26,54,.045); }
.tt-blog-side-kicker { color: #078d87; font-size: 10px; }
.tt-blog-side-card h2 { margin: 8px 0 18px; color: var(--ttb-navy); font-size: 22px; line-height: 1.25; letter-spacing: -.03em; }
.tt-blog-category-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(7,26,54,.08); color: #43546b; font-size: 13px; transition: color .2s ease, padding .2s ease; }
.tt-blog-category-link span:last-child { color: var(--ttb-red); }
.tt-blog-category-link:hover, .tt-blog-category-link.is-active { color: #078d87; padding-left: 4px; font-weight: 700; }
.tt-blog-recent-list { display: grid; gap: 16px; }
.tt-blog-recent-item { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 12px; align-items: center; }
.tt-blog-recent-item img { width: 72px; height: 64px; border-radius: 9px; object-fit: cover; background: var(--ttb-paper); }
.tt-blog-recent-item strong { display: block; color: var(--ttb-navy); font-size: 13px; line-height: 1.4; }
.tt-blog-recent-item:hover strong { color: #078d87; }
.tt-blog-recent-item small { display: block; margin-top: 5px; color: var(--ttb-muted); font-size: 11px; }
.tt-blog-muted { color: var(--ttb-muted); font-size: 13px; line-height: 1.6; }
.tt-blog-empty { padding: 50px 32px; border: 1px solid var(--ttb-line); border-radius: 18px; background: var(--ttb-paper); }
.tt-blog-empty h2 { margin: 14px 0 8px; color: var(--ttb-navy); font-size: 28px; }
.tt-blog-empty p { color: var(--ttb-muted); }
.tt-blog-back-link { display: inline-block; margin-bottom: 24px; color: var(--ttb-teal2); font-size: 13px; font-weight: 700; }
.tt-blog-back-link:hover { color: #fff; }
.tt-blog-article-hero h1 { max-width: 980px; font-size: clamp(34px, 5vw, 60px); }
.tt-blog-article-meta { justify-content: flex-start; margin-bottom: 0; color: rgba(255,255,255,.7); }
.tt-blog-article-meta a { color: var(--ttb-teal2); }
.tt-blog-article-meta time { color: rgba(255,255,255,.68); }
.tt-blog-article-hero .tt-blog-hero-line { margin-top: 25px; }
.tt-blog-article-main { min-width: 0; }
.tt-blog-article-image { margin: 0 0 32px; overflow: hidden; border-radius: 18px; background: var(--ttb-paper); box-shadow: 0 22px 55px rgba(7,26,54,.10); }
.tt-blog-article-image img { display: block; width: 100%; max-height: 560px; object-fit: cover; }
.tt-blog-article-content { color: #354860; font-size: 16px; line-height: 1.95; overflow-wrap: anywhere; }
.tt-blog-article-content::first-letter { color: var(--ttb-navy); }
.tt-blog-comments { margin-top: 56px; padding-top: 35px; border-top: 1px solid var(--ttb-line); }
.tt-blog-comments-heading h2 { margin: 8px 0; color: var(--ttb-navy); font-size: 30px; letter-spacing: -.03em; }
.tt-blog-comments-heading h2 span { color: var(--ttb-muted); font-size: 17px; font-weight: 500; }
.tt-blog-comments-heading p { color: var(--ttb-muted); font-size: 13px; }
.tt-blog-alert { margin: 20px 0; padding: 13px 16px; border-radius: 10px; font-size: 13px; }
.tt-blog-alert-success { color: #126443; background: #e8f8ef; border: 1px solid #c8ecd8; }
.tt-blog-alert-error { color: #96333b; background: #fff0f1; border: 1px solid #f7d1d4; }
.tt-blog-no-comments { margin: 22px 0; padding: 18px; border-radius: 11px; background: var(--ttb-paper); color: var(--ttb-muted); font-size: 13px; }
.tt-blog-comment-list { display: grid; gap: 18px; margin: 23px 0 34px; }
.tt-blog-comment { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: start; gap: 14px; padding: 18px; border: 1px solid var(--ttb-line); border-radius: 13px; }
.tt-blog-comment-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ttb-navy); color: var(--ttb-teal2); font-weight: 800; }
.tt-blog-comment-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.tt-blog-comment-meta strong { color: var(--ttb-navy); font-size: 14px; }
.tt-blog-comment-meta time { color: var(--ttb-muted); font-size: 11px; }
.tt-blog-comment-body p { color: #43546b; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.tt-blog-comment-form { margin-top: 28px; padding: clamp(20px, 4vw, 30px); border: 1px solid var(--ttb-line); border-radius: 16px; background: #f8fafb; }
.tt-blog-comment-form h3 { margin: 0 0 22px; color: var(--ttb-navy); font-size: 23px; letter-spacing: -.025em; }
.tt-blog-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.tt-blog-field { display: grid; gap: 8px; margin-bottom: 17px; }
.tt-blog-field label { color: var(--ttb-navy); font-size: 12px; font-weight: 800; }
.tt-blog-field input, .tt-blog-field textarea { width: 100%; min-width: 0; border: 1px solid #d9e2e8; border-radius: 10px; padding: 13px 14px; color: var(--ttb-ink); background: #fff; outline: none; font: inherit; font-size: 14px; transition: border-color .2s ease, box-shadow .2s ease; }
.tt-blog-field textarea { resize: vertical; }
.tt-blog-field input:focus, .tt-blog-field textarea:focus { border-color: var(--ttb-teal); box-shadow: 0 0 0 3px rgba(16,185,177,.12); }
.tt-blog-submit { display: inline-flex; align-items: center; gap: 18px; border: 0; border-radius: 10px; padding: 13px 19px; color: #fff; background: var(--ttb-navy); font-size: 13px; font-weight: 800; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.tt-blog-submit span { color: var(--ttb-teal2); font-size: 18px; }
.tt-blog-submit:hover { background: var(--ttb-red); transform: translateY(-1px); }
@media (max-width: 980px) {
    .tt-blog-layout { grid-template-columns: minmax(0,1fr) 270px; gap: 23px; }
    .tt-blog-grid { gap: 16px; }
    .tt-blog-card-body { padding: 18px; }
    .tt-blog-side-card { padding: 20px; }
}
@media (max-width: 760px) {
    .tt-blog-hero { padding: 132px 0 58px; }
    .tt-blog-content-section { padding-top: 34px; }
    .tt-blog-layout { grid-template-columns: 1fr; }
    .tt-blog-grid { grid-template-columns: 1fr; }
    .tt-blog-sidebar { grid-template-columns: 1fr; }
    .tt-blog-card-body { padding: 21px; }
    .tt-blog-form-grid { grid-template-columns: 1fr; gap: 0; }
    .tt-blog-article-image img { max-height: 360px; }
}