@charset "UTF-8";
/* ==========================================================================
   TRANSFORMICS — Blog Listing + Blog Detail
   --------------------------------------------------------------------------
   Scope        : every rule below is nested inside .tfx-blogx
                  (nothing here can match markup on any other page)
   Prefix       : all classes use the tfx- prefix
   Variables    : declared on .tfx-blogx, NOT on :root, so they never leak
   Load order   : link this file AFTER style.css / responsive.css
   Breakpoints  : 1199 / 991 / 767 / 575  (same set the site already uses)

   Do not edit style.css or responsive.css for these two pages — everything
   they need lives in this file.
   ========================================================================== */


/* ==========================================================================
   1. SCOPE ROOT + DESIGN TOKENS
   ========================================================================== */

.tfx-blogx {
  /* Brand palette */
  --tfx-ink: #0F1E3D;
  --tfx-blue-deep: #163B73;
  --tfx-blue-bright: #2E8FE0;
  --tfx-red: #E32419;
  --tfx-red-soft: #FCEBEB;

  /* Neutrals */
  --tfx-paper: #FFFFFF;
  --tfx-fog: #F5F7FB;
  --tfx-slate: #5B6472;
  --tfx-slate-light: #98A2B3;
  --tfx-border: #E4E8F0;
  --tfx-prose-ink: #28324A;

  /* Type stacks — Livvic kept as fallback so the page stays on-brand
     if the Google Fonts request is blocked or slow */
  --tfx-font-display: 'Archivo', 'Livvic', sans-serif;
  --tfx-font-ui: 'Inter', 'Livvic', sans-serif;
  --tfx-font-serif: 'Source Serif 4', Georgia, serif;

  /* Shape */
  --tfx-radius: 6px;
  --tfx-radius-lg: 8px;
  --tfx-shadow: 0 1px 2px rgba(15, 30, 61, .04);
  --tfx-shadow-lift: 0 14px 34px rgba(15, 30, 61, .10);

  /* Layout */
  --tfx-maxw: 1170px;
  --tfx-gutter: 30px;

  font-family: var(--tfx-font-ui);
  color: var(--tfx-ink);
  background: var(--tfx-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tfx-blogx,
.tfx-blogx *,
.tfx-blogx *::before,
.tfx-blogx *::after {
  box-sizing: border-box;
}


/* ==========================================================================
   2. SCOPED BASE RESETS
   Neutralises the global element rules coming from style.css and bootstrap
   so the blog pages render predictably. Scoped selectors (0,1,1) always beat
   the bare element selectors (0,0,1) they are overriding.
   ========================================================================== */

.tfx-blogx h1,
.tfx-blogx h2,
.tfx-blogx h3,
.tfx-blogx h4,
.tfx-blogx h5,
.tfx-blogx h6 {
  font-family: var(--tfx-font-display);
  color: var(--tfx-ink);
  margin: 0;
  line-height: 1.2;
  font-weight: 700;
}

.tfx-blogx p {
  margin: 0;
  line-height: inherit;
}

.tfx-blogx a {
  color: inherit;
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.tfx-blogx ul,
.tfx-blogx ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tfx-blogx img {
  max-width: 100%;
  display: block;
}

.tfx-blogx button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

.tfx-blogx input {
  font: inherit;
  color: inherit;
}

.tfx-blogx figure {
  margin: 0;
}

/* The [hidden] attribute must beat the display:flex/grid set on components
   below — the JS filter on the listing page relies on this. */
.tfx-blogx [hidden] {
  display: none !important;
}

/* Keyboard focus stays visible everywhere on these pages.
   style.css sets `a { outline: none !important }` and
   `button:focus { outline: none !important }`, so !important is the only
   way to put the focus ring back. Scoped, so no other page is affected. */
.tfx-blogx a:focus-visible,
.tfx-blogx button:focus-visible,
.tfx-blogx input:focus-visible {
  outline: 2px solid var(--tfx-blue-bright) !important;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Container — content width matches the bootstrap .container used by the
   site header and footer (1110px) so all edges line up vertically. */
.tfx-blogx .tfx-wrap {
  width: 100%;
  max-width: var(--tfx-maxw);
  margin: 0 auto;
  padding: 0 var(--tfx-gutter);
}

/* Screen-reader-only helper */
.tfx-blogx .tfx-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   3. SHARED COMPONENTS (used by both pages)
   ========================================================================== */

/* --- Category tag ------------------------------------------------------- */
.tfx-blogx .tfx-tag {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  font-family: var(--tfx-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--tfx-red);
  background: var(--tfx-red-soft);
  padding: 5px 11px 5px 9px;
  border-left: 3px solid var(--tfx-red);
  border-radius: 0 3px 3px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tag sitting on top of a photo */
.tfx-blogx .tfx-tag--onmedia {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* --- Author avatar ------------------------------------------------------ */
.tfx-blogx .tfx-avatar {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--tfx-blue-bright);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tfx-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

.tfx-blogx .tfx-avatar--sm {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

.tfx-blogx .tfx-avatar--lg {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

/* --- Meta line ---------------------------------------------------------- */
.tfx-blogx .tfx-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 13px;
  color: var(--tfx-slate-light);
}

.tfx-blogx .tfx-dot {
  width: 3px;
  height: 3px;
  flex: 0 0 auto;
  background: var(--tfx-slate-light);
  border-radius: 50%;
}

/* --- Media frame (holds the real post image) ---------------------------- */
.tfx-blogx .tfx-media {
  position: relative;
  overflow: hidden;
  background: var(--tfx-ink);
}

.tfx-blogx .tfx-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

/* Gradient fallbacks — visible while the image loads or if it is missing */
.tfx-blogx .tfx-g1 { background: linear-gradient(150deg, #2E8FE0, #163B73); }
.tfx-blogx .tfx-g2 { background: linear-gradient(150deg, #E32419, #7A1310); }
.tfx-blogx .tfx-g3 { background: linear-gradient(150deg, #0F1E3D, #33507E); }
.tfx-blogx .tfx-g4 { background: linear-gradient(150deg, #3A4A63, #0F1E3D); }
.tfx-blogx .tfx-g5 { background: linear-gradient(150deg, #2E8FE0, #0F1E3D); }
.tfx-blogx .tfx-g6 { background: linear-gradient(150deg, #E32419, #163B73); }

/* --- Read more link ----------------------------------------------------- */
.tfx-blogx .tfx-readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-family: var(--tfx-font-ui);
  font-weight: 600;
  font-size: 14px;
  color: var(--tfx-blue-deep);
  border-bottom: 2px solid var(--tfx-red);
  padding-bottom: 2px;
}

.tfx-blogx .tfx-readmore span {
  transition: transform .25s ease;
}

.tfx-blogx .tfx-readmore:hover {
  color: var(--tfx-red);
}

.tfx-blogx .tfx-readmore:hover span {
  transform: translateX(4px);
}


/* ==========================================================================
   4. LISTING PAGE — HERO
   ========================================================================== */

.tfx-blogx .tfx-hero {
  position: relative;
  overflow: hidden;
  background: var(--tfx-fog);
  padding: 56px 0 44px;
}

.tfx-blogx .tfx-hero::after {
  content: "";
  position: absolute;
  right: -6%;
  top: -40%;
  width: 520px;
  height: 520px;
  background: var(--tfx-red);
  clip-path: polygon(40% 0, 100% 30%, 60% 100%, 0 70%);
  opacity: .10;
  pointer-events: none;
}

.tfx-blogx .tfx-hero .tfx-wrap {
  position: relative;
  z-index: 1;
}

.tfx-blogx .tfx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tfx-red);
  margin-bottom: 14px;
}

.tfx-blogx .tfx-eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--tfx-red);
  display: inline-block;
}

.tfx-blogx .tfx-hero-title {
  font-size: 42px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 640px;
}

.tfx-blogx .tfx-hero-sub {
  font-size: 16.5px;
  color: var(--tfx-slate);
  max-width: 520px;
  margin-top: 16px;
  line-height: 1.6;
}

/* --- Search + filter chips ---------------------------------------------- */
.tfx-blogx .tfx-tools {
  margin-top: 30px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.tfx-blogx .tfx-search {
  position: relative;
  flex: 1 1 260px;
  min-width: 240px;
  max-width: 360px;
}

.tfx-blogx .tfx-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.tfx-blogx .tfx-search-input {
  width: 100%;
  padding: 12px 16px 12px 40px;
  border: 1px solid var(--tfx-border);
  border-radius: 4px;
  font-family: var(--tfx-font-ui);
  font-size: 14px;
  line-height: 1.4;
  background: #fff;
  color: var(--tfx-ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.tfx-blogx .tfx-search-input::placeholder {
  color: var(--tfx-slate-light);
  opacity: 1;
}

.tfx-blogx .tfx-search-input:focus {
  outline: none;
  border-color: var(--tfx-blue-bright);
  box-shadow: 0 0 0 3px rgba(46, 143, 224, .16);
}

.tfx-blogx .tfx-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tfx-blogx .tfx-chip {
  padding: 8px 15px;
  border: 1px solid var(--tfx-border);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tfx-slate);
  background: #fff;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.tfx-blogx .tfx-chip:hover {
  border-color: var(--tfx-blue-bright);
  color: var(--tfx-blue-deep);
}

.tfx-blogx .tfx-chip.is-on {
  background: var(--tfx-ink);
  border-color: var(--tfx-ink);
  color: #fff;
}


/* ==========================================================================
   5. LISTING PAGE — FEATURED ARTICLE
   ========================================================================== */

.tfx-blogx .tfx-featured {
  padding: 52px 0 8px;
}

.tfx-blogx .tfx-feat-card {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  border: 1px solid var(--tfx-border);
  border-radius: var(--tfx-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--tfx-shadow);
  transition: box-shadow .3s ease, border-color .3s ease;
}

.tfx-blogx .tfx-feat-card:hover {
  border-color: #D4DCEA;
  box-shadow: var(--tfx-shadow-lift);
}

.tfx-blogx .tfx-feat-media {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--tfx-blue-deep), var(--tfx-ink));
}

.tfx-blogx .tfx-feat-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.tfx-blogx .tfx-feat-card:hover .tfx-feat-media img {
  transform: scale(1.04);
}

/* Red corner wedge */
.tfx-blogx .tfx-feat-media::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 70px;
  height: 70px;
  background: var(--tfx-red);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.tfx-blogx .tfx-feat-body {
  padding: 38px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tfx-blogx .tfx-feat-body .tfx-tag {
  margin-bottom: 14px;
}

.tfx-blogx .tfx-feat-title {
  font-size: 27px;
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.tfx-blogx .tfx-feat-title a:hover {
  color: var(--tfx-blue-deep);
}

.tfx-blogx .tfx-feat-excerpt {
  font-family: var(--tfx-font-serif);
  font-size: 15.5px;
  color: var(--tfx-slate);
  line-height: 1.6;
  margin-bottom: 20px;
}

.tfx-blogx .tfx-feat-body .tfx-readmore {
  margin-top: 22px;
}


/* ==========================================================================
   6. LISTING PAGE — ARTICLE GRID
   ========================================================================== */

.tfx-blogx .tfx-grid-sec {
  padding: 56px 0 40px;
}

.tfx-blogx .tfx-grid-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.tfx-blogx .tfx-grid-head h2 {
  font-size: 20px;
  font-weight: 700;
}

.tfx-blogx .tfx-count {
  font-size: 13px;
  color: var(--tfx-slate-light);
}

.tfx-blogx .tfx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.tfx-blogx .tfx-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tfx-border);
  border-radius: var(--tfx-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--tfx-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.tfx-blogx .tfx-card:hover {
  transform: translateY(-4px);
  border-color: #D4DCEA;
  box-shadow: var(--tfx-shadow-lift);
}

.tfx-blogx .tfx-card:hover .tfx-media img {
  transform: scale(1.05);
}

.tfx-blogx .tfx-card-media {
  height: 170px;
  display: flex;
  align-items: flex-start;
  padding: 14px;
}

.tfx-blogx .tfx-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 22px;
}

.tfx-blogx .tfx-card-title {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin-bottom: 9px;
}

.tfx-blogx .tfx-card-title a:hover {
  color: var(--tfx-blue-deep);
}

.tfx-blogx .tfx-card-desc {
  flex: 1;
  font-family: var(--tfx-font-serif);
  font-size: 13.8px;
  color: var(--tfx-slate);
  line-height: 1.55;
  margin-bottom: 16px;
}

.tfx-blogx .tfx-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  font-size: 12px;
  color: var(--tfx-slate-light);
  border-top: 1px solid var(--tfx-border);
  padding-top: 12px;
}

/* --- Empty state (no search / filter matches) --------------------------- */
.tfx-blogx .tfx-empty {
  display: none;
  border: 1px dashed var(--tfx-border);
  border-radius: var(--tfx-radius);
  background: var(--tfx-fog);
  padding: 44px 30px;
  text-align: center;
}

.tfx-blogx .tfx-empty.is-on {
  display: block;
}

.tfx-blogx .tfx-empty h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.tfx-blogx .tfx-empty p {
  font-size: 14px;
  color: var(--tfx-slate);
  margin-bottom: 18px;
}

.tfx-blogx .tfx-empty button {
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: var(--tfx-red);
  padding: 10px 20px;
  border-radius: 4px;
}

/* --- Pagination --------------------------------------------------------- */
.tfx-blogx .tfx-pager {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 44px;
}

.tfx-blogx .tfx-page {
  width: 36px;
  height: 36px;
  border: 1px solid var(--tfx-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--tfx-slate);
  background: #fff;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.tfx-blogx .tfx-page:hover:not(:disabled) {
  border-color: var(--tfx-ink);
  color: var(--tfx-ink);
}

.tfx-blogx .tfx-page.is-on {
  background: var(--tfx-ink);
  border-color: var(--tfx-ink);
  color: #fff;
}

.tfx-blogx .tfx-page:disabled {
  opacity: .4;
  cursor: not-allowed;
}


/* ==========================================================================
   7. LISTING PAGE — NEWSLETTER STRIP
   ========================================================================== */

.tfx-blogx .tfx-strip {
  position: relative;
  overflow: hidden;
  background: var(--tfx-ink);
  padding: 46px 0;
  margin-top: 20px;
}

.tfx-blogx .tfx-strip::before {
  content: "";
  position: absolute;
  left: -4%;
  bottom: -60%;
  width: 300px;
  height: 300px;
  background: var(--tfx-red);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: .14;
  pointer-events: none;
}

.tfx-blogx .tfx-strip .tfx-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.tfx-blogx .tfx-strip h2 {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  max-width: 400px;
}

.tfx-blogx .tfx-strip p {
  color: #A9B6CF;
  font-size: 14px;
  margin-top: 6px;
}

.tfx-blogx .tfx-strip-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tfx-blogx .tfx-strip-form input {
  width: 230px;
  padding: 12px 16px;
  border-radius: 4px;
  border: 1px solid #2B3B5C;
  background: #132548;
  color: #fff;
  font-family: var(--tfx-font-ui);
  font-size: 14px;
  line-height: 1.4;
}

.tfx-blogx .tfx-strip-form input::placeholder {
  color: #7488AC;
  opacity: 1;
}

.tfx-blogx .tfx-strip-form input:focus {
  outline: none;
  border-color: var(--tfx-blue-bright);
}

.tfx-blogx .tfx-strip-form button {
  background: var(--tfx-red);
  color: #fff;
  padding: 12px 22px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  transition: filter .18s ease;
}

.tfx-blogx .tfx-strip-form button:hover {
  filter: brightness(1.1);
}


/* ==========================================================================
   8. DETAIL PAGE — BREADCRUMB + ARTICLE HEADER
   ========================================================================== */

.tfx-blogx .tfx-crumb {
  padding: 18px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--tfx-slate-light);
}

.tfx-blogx .tfx-crumb a {
  color: var(--tfx-slate);
}

.tfx-blogx .tfx-crumb a:hover {
  color: var(--tfx-red);
}

.tfx-blogx .tfx-crumb .tfx-sep {
  margin: 0 8px;
}

.tfx-blogx .tfx-arthead {
  padding: 8px 0 30px;
  max-width: 800px;
}

.tfx-blogx .tfx-arthead .tfx-tag {
  margin-bottom: 16px;
}

.tfx-blogx .tfx-art-title {
  font-size: 38px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.tfx-blogx .tfx-deck {
  font-family: var(--tfx-font-serif);
  font-size: 18px;
  color: var(--tfx-slate);
  line-height: 1.55;
  margin-bottom: 22px;
}

.tfx-blogx .tfx-artmeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  border-top: 1px solid var(--tfx-border);
  border-bottom: 1px solid var(--tfx-border);
  padding: 16px 0;
}

.tfx-blogx .tfx-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tfx-blogx .tfx-author-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--tfx-ink);
}

.tfx-blogx .tfx-author-sub {
  font-size: 12.5px;
  color: var(--tfx-slate-light);
}

/* --- Share buttons ------------------------------------------------------ */
.tfx-blogx .tfx-share {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tfx-blogx .tfx-share a,
.tfx-blogx .tfx-share button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--tfx-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--tfx-slate);
  background: #fff;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.tfx-blogx .tfx-share a:hover,
.tfx-blogx .tfx-share button:hover {
  background: var(--tfx-ink);
  border-color: var(--tfx-ink);
  color: #fff;
}

.tfx-blogx .tfx-share .tfx-copied {
  border-color: var(--tfx-blue-bright);
  color: var(--tfx-blue-bright);
}

/* --- Hero image --------------------------------------------------------- */
.tfx-blogx .tfx-hero-img {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 420px;
  margin: 30px 0 0;
  border-radius: var(--tfx-radius);
  background: linear-gradient(150deg, var(--tfx-blue-deep), var(--tfx-ink));
}

.tfx-blogx .tfx-hero-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Post artwork is roughly 3:2, so a straight cover crop into a 1110x420
   banner slices through the middle of any text baked into the image.
   A blurred copy fills the frame, the sharp copy sits on top intact. */
.tfx-blogx .tfx-hero-bg {
  object-fit: cover;
  transform: scale(1.12);
  filter: blur(26px) saturate(1.15);
  opacity: .55;
}

.tfx-blogx .tfx-hero-fg {
  z-index: 1;
  object-fit: contain;
}

.tfx-blogx .tfx-hero-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 110px;
  height: 110px;
  background: var(--tfx-red);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}


/* ==========================================================================
   9. DETAIL PAGE — BODY LAYOUT
   ========================================================================== */

.tfx-blogx .tfx-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: start;
  padding: 48px 0 60px;
}

.tfx-blogx .tfx-article {
  min-width: 0;
  max-width: 700px;
}


/* --------------------------------------------------------------------------
   9a. PROSE — styles the raw HTML that comes out of the database
       (tbl_blogs.contents). Every tag a WYSIWYG editor can emit is covered
       here so the article renders correctly whatever the editor produced.
   -------------------------------------------------------------------------- */

.tfx-blogx .tfx-prose {
  font-family: var(--tfx-font-serif);
  font-size: 17px;
  line-height: 1.75;
  color: var(--tfx-prose-ink);
}

.tfx-blogx .tfx-prose > *:first-child {
  margin-top: 0;
}

.tfx-blogx .tfx-prose h1,
.tfx-blogx .tfx-prose h2 {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 38px 0 14px;
  scroll-margin-top: 110px;
}

.tfx-blogx .tfx-prose h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 26px 0 10px;
  scroll-margin-top: 110px;
}

.tfx-blogx .tfx-prose h4,
.tfx-blogx .tfx-prose h5,
.tfx-blogx .tfx-prose h6 {
  font-size: 16px;
  font-weight: 700;
  margin: 22px 0 8px;
  scroll-margin-top: 110px;
}

.tfx-blogx .tfx-prose p {
  margin: 0 0 16px;
}

.tfx-blogx .tfx-prose ul,
.tfx-blogx .tfx-prose ol {
  margin: 0 0 16px 22px;
  padding: 0;
}

.tfx-blogx .tfx-prose ul { list-style: disc; }
.tfx-blogx .tfx-prose ol { list-style: decimal; }

.tfx-blogx .tfx-prose li {
  margin-bottom: 6px;
}

.tfx-blogx .tfx-prose li::marker {
  color: var(--tfx-blue-bright);
}

.tfx-blogx .tfx-prose ul ul,
.tfx-blogx .tfx-prose ol ol,
.tfx-blogx .tfx-prose ul ol,
.tfx-blogx .tfx-prose ol ul {
  margin-top: 6px;
  margin-bottom: 6px;
}

.tfx-blogx .tfx-prose strong,
.tfx-blogx .tfx-prose b {
  color: var(--tfx-ink);
  font-weight: 700;
}

.tfx-blogx .tfx-prose em,
.tfx-blogx .tfx-prose i {
  font-style: italic;
}

.tfx-blogx .tfx-prose a {
  color: var(--tfx-blue-deep);
  font-weight: 600;
  border-bottom: 1px solid rgba(22, 59, 115, .3);
}

.tfx-blogx .tfx-prose a:hover {
  color: var(--tfx-red);
  border-bottom-color: var(--tfx-red);
}

.tfx-blogx .tfx-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--tfx-radius);
  margin: 24px 0;
}

.tfx-blogx .tfx-prose figcaption {
  font-family: var(--tfx-font-ui);
  font-size: 12.5px;
  color: var(--tfx-slate-light);
  text-align: center;
  margin: -14px 0 24px;
}

.tfx-blogx .tfx-prose hr {
  border: 0;
  border-top: 1px solid var(--tfx-border);
  margin: 32px 0;
}

.tfx-blogx .tfx-prose blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--tfx-red);
  border-radius: 0;
  background: none;
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--tfx-ink);
}

.tfx-blogx .tfx-prose blockquote p:last-child {
  margin-bottom: 0;
}

/* style.css attaches a flaticon quote glyph to every blockquote on the site.
   Inside the article body that fights the red rule, so it is switched off. */
.tfx-blogx .tfx-prose blockquote::before,
.tfx-blogx .tfx-prose blockquote::after,
.tfx-blogx .tfx-prose blockquote cite::before {
  content: none;
}

.tfx-blogx .tfx-prose blockquote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--tfx-font-ui);
  font-size: 13.5px;
  font-style: normal;
  color: var(--tfx-slate-light);
}

.tfx-blogx .tfx-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--tfx-fog);
  border: 1px solid var(--tfx-border);
  border-radius: 3px;
  padding: 2px 6px;
}

.tfx-blogx .tfx-prose pre {
  background: var(--tfx-ink);
  color: #DCE6F7;
  border-radius: var(--tfx-radius);
  padding: 18px 20px;
  overflow-x: auto;
  margin: 0 0 20px;
}

.tfx-blogx .tfx-prose pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}

/* Wide tables scroll instead of breaking the layout */
.tfx-blogx .tfx-prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--tfx-font-ui);
  font-size: 14.5px;
  margin: 0 0 22px;
}

.tfx-blogx .tfx-prose table th,
.tfx-blogx .tfx-prose table td {
  border: 1px solid var(--tfx-border);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

.tfx-blogx .tfx-prose table th {
  background: var(--tfx-fog);
  font-weight: 600;
  color: var(--tfx-ink);
}

.tfx-blogx .tfx-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 22px;
}

.tfx-blogx .tfx-tablewrap table {
  margin-bottom: 0;
}

.tfx-blogx .tfx-prose iframe,
.tfx-blogx .tfx-prose video {
  max-width: 100%;
  border-radius: var(--tfx-radius);
  margin: 0 0 22px;
}

/* --- Editorial extras (available to editors via these classes) ---------- */
.tfx-blogx .tfx-pullquote {
  margin: 26px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--tfx-red);
  font-family: var(--tfx-font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--tfx-ink);
}

.tfx-blogx .tfx-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 24px 0;
}

.tfx-blogx .tfx-stat {
  flex: 1 1 180px;
  background: var(--tfx-fog);
  border-radius: var(--tfx-radius);
  padding: 16px 18px;
}

.tfx-blogx .tfx-stat-num {
  font-family: var(--tfx-font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--tfx-blue-deep);
}

.tfx-blogx .tfx-stat-lbl {
  font-family: var(--tfx-font-ui);
  font-size: 12.5px;
  color: var(--tfx-slate);
  margin-top: 2px;
  line-height: 1.5;
}

/* --- In-article CTA ----------------------------------------------------- */
.tfx-blogx .tfx-cta {
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  background: var(--tfx-ink);
  border-radius: var(--tfx-radius-lg);
  padding: 32px 34px;
}

.tfx-blogx .tfx-cta::before {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 180px;
  height: 180px;
  background: var(--tfx-red);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: .16;
  pointer-events: none;
}

.tfx-blogx .tfx-cta > * {
  position: relative;
  z-index: 1;
}

.tfx-blogx .tfx-cta h2 {
  color: #fff;
  font-size: 21px;
  margin-bottom: 8px;
}

.tfx-blogx .tfx-cta p {
  font-family: var(--tfx-font-ui);
  color: #A9B6CF;
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 18px;
  max-width: 440px;
}

.tfx-blogx .tfx-btn {
  display: inline-block;
  background: var(--tfx-red);
  color: #fff;
  font-family: var(--tfx-font-ui);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 4px;
  transition: filter .18s ease, transform .18s ease;
}

.tfx-blogx .tfx-btn:hover {
  color: #fff;
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* --- Tag row ------------------------------------------------------------ */
.tfx-blogx .tfx-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.tfx-blogx .tfx-tags span {
  font-size: 12.5px;
  line-height: 1.4;
  padding: 6px 13px;
  border: 1px solid var(--tfx-border);
  border-radius: 20px;
  color: var(--tfx-slate);
}


/* ==========================================================================
   10. DETAIL PAGE — SIDEBAR
   ========================================================================== */

.tfx-blogx .tfx-aside {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.tfx-blogx .tfx-side-card {
  border: 1px solid var(--tfx-border);
  border-radius: var(--tfx-radius-lg);
  padding: 20px;
  background: #fff;
}

.tfx-blogx .tfx-side-title {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tfx-slate-light);
  margin-bottom: 14px;
}

/* --- Table of contents (auto-built from the article headings) ----------- */
.tfx-blogx .tfx-toc a {
  display: block;
  font-size: 13.8px;
  line-height: 1.45;
  color: var(--tfx-slate);
  padding: 7px 0 7px 12px;
  border-left: 2px solid var(--tfx-border);
}

.tfx-blogx .tfx-toc a:hover {
  color: var(--tfx-ink);
  border-left-color: var(--tfx-slate-light);
}

.tfx-blogx .tfx-toc a.is-on {
  color: var(--tfx-blue-deep);
  font-weight: 600;
  border-left-color: var(--tfx-blue-bright);
}

/* --- Help / booking card ------------------------------------------------ */
.tfx-blogx .tfx-help {
  background: var(--tfx-fog);
}

.tfx-blogx .tfx-help p {
  font-size: 13.5px;
  color: var(--tfx-slate);
  line-height: 1.55;
  margin: 8px 0 14px;
}

.tfx-blogx .tfx-btn-block {
  display: block;
  text-align: center;
  background: var(--tfx-red);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 4px;
  transition: filter .18s ease;
}

.tfx-blogx .tfx-btn-block:hover {
  color: #fff;
  filter: brightness(1.1);
}

/* --- Mini post list ----------------------------------------------------- */
.tfx-blogx .tfx-mini {
  display: flex;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--tfx-border);
}

.tfx-blogx .tfx-mini:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.tfx-blogx .tfx-mini-thumb {
  position: relative;
  overflow: hidden;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 4px;
}

.tfx-blogx .tfx-mini-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tfx-blogx .tfx-mini h3 {
  font-family: var(--tfx-font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 4px;
}

.tfx-blogx .tfx-mini a:hover h3 {
  color: var(--tfx-blue-deep);
}

.tfx-blogx .tfx-mini span {
  font-size: 11.5px;
  color: var(--tfx-slate-light);
}


/* ==========================================================================
   11. DETAIL PAGE — RELATED ARTICLES
   ========================================================================== */

.tfx-blogx .tfx-related {
  padding: 20px 0 56px;
  border-top: 1px solid var(--tfx-border);
}

.tfx-blogx .tfx-related h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 38px 0 22px;
}

.tfx-blogx .tfx-rel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.tfx-blogx .tfx-rel-card {
  border: 1px solid var(--tfx-border);
  border-radius: var(--tfx-radius);
  overflow: hidden;
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.tfx-blogx .tfx-rel-card:hover {
  transform: translateY(-4px);
  border-color: #D4DCEA;
  box-shadow: var(--tfx-shadow-lift);
}

.tfx-blogx .tfx-rel-media {
  height: 140px;
}

.tfx-blogx .tfx-rel-card:hover .tfx-media img {
  transform: scale(1.05);
}

.tfx-blogx .tfx-rel-body {
  padding: 16px 18px;
}

.tfx-blogx .tfx-rel-body h3 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 8px;
}

.tfx-blogx .tfx-rel-card:hover .tfx-rel-body h3 {
  color: var(--tfx-blue-deep);
}

.tfx-blogx .tfx-rel-body span {
  font-size: 12px;
  color: var(--tfx-slate-light);
}


/* ==========================================================================
   12. RESPONSIVE
   Breakpoints match the set already used in responsive.css
   ========================================================================== */

/* --- <= 1199px : tighter sidebar and gutters ---------------------------- */
@media only screen and (max-width: 1199px) {
  .tfx-blogx .tfx-layout {
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 40px;
  }

  .tfx-blogx .tfx-hero-title { font-size: 38px; }
  .tfx-blogx .tfx-art-title  { font-size: 34px; }
  .tfx-blogx .tfx-hero-img   { height: 380px; }
  .tfx-blogx .tfx-feat-body  { padding: 32px 30px; }
}

/* --- <= 991px : stack the two-column layouts ---------------------------- */
@media only screen and (max-width: 991px) {
  .tfx-blogx .tfx-hero {
    padding: 44px 0 36px;
  }

  .tfx-blogx .tfx-hero::after {
    width: 380px;
    height: 380px;
    right: -14%;
  }

  .tfx-blogx .tfx-hero-title { font-size: 32px; }
  .tfx-blogx .tfx-hero-sub   { font-size: 15.5px; }

  /* Featured card becomes a stacked card */
  .tfx-blogx .tfx-feat-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .tfx-blogx .tfx-feat-media {
    min-height: 0;
    height: 260px;
  }

  .tfx-blogx .tfx-feat-body {
    padding: 28px 26px 32px;
  }

  .tfx-blogx .tfx-feat-title { font-size: 23px; }

  /* Two-up article grid */
  .tfx-blogx .tfx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .tfx-blogx .tfx-featured  { padding: 40px 0 4px; }
  .tfx-blogx .tfx-grid-sec  { padding: 44px 0 32px; }

  /* Detail page: sidebar drops below the article and stops sticking */
  .tfx-blogx .tfx-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding: 36px 0 48px;
  }

  .tfx-blogx .tfx-article {
    max-width: none;
  }

  .tfx-blogx .tfx-aside {
    position: static;
    top: auto;
  }

  .tfx-blogx .tfx-art-title { font-size: 30px; }
  .tfx-blogx .tfx-deck      { font-size: 16.5px; }
  .tfx-blogx .tfx-hero-img  { height: 320px; }

  .tfx-blogx .tfx-rel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- <= 767px : single column ------------------------------------------- */
@media only screen and (max-width: 767px) {
  .tfx-blogx {
    --tfx-gutter: 20px;
  }

  .tfx-blogx .tfx-hero {
    padding: 36px 0 30px;
  }

  .tfx-blogx .tfx-hero-title { font-size: 28px; }

  .tfx-blogx .tfx-tools {
    margin-top: 24px;
    gap: 14px;
  }

  .tfx-blogx .tfx-search {
    flex: 1 1 100%;
    max-width: none;
  }

  /* Chips scroll sideways instead of wrapping into a tall block */
  .tfx-blogx .tfx-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    padding-bottom: 4px;
    margin-bottom: -4px;
  }

  .tfx-blogx .tfx-chips::-webkit-scrollbar {
    display: none;
  }

  .tfx-blogx .tfx-chip {
    flex: 0 0 auto;
  }

  .tfx-blogx .tfx-grid,
  .tfx-blogx .tfx-rel-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .tfx-blogx .tfx-feat-media { height: 220px; }
  .tfx-blogx .tfx-feat-body  { padding: 24px 22px 28px; }
  .tfx-blogx .tfx-feat-title { font-size: 21px; }

  .tfx-blogx .tfx-art-title {
    font-size: 26px;
    line-height: 1.24;
  }

  .tfx-blogx .tfx-deck { font-size: 16px; }

  .tfx-blogx .tfx-artmeta {
    justify-content: flex-start;
    gap: 16px;
  }

  .tfx-blogx .tfx-hero-img {
    height: 220px;
    margin-top: 22px;
  }

  .tfx-blogx .tfx-prose {
    font-size: 16px;
  }

  .tfx-blogx .tfx-prose h1,
  .tfx-blogx .tfx-prose h2 { font-size: 21px; margin: 30px 0 12px; }
  .tfx-blogx .tfx-prose h3 { font-size: 17px; }

  .tfx-blogx .tfx-pullquote,
  .tfx-blogx .tfx-prose blockquote { font-size: 17px; }

  .tfx-blogx .tfx-stats { flex-direction: column; }

  .tfx-blogx .tfx-cta {
    padding: 26px 24px;
    margin-top: 32px;
  }

  .tfx-blogx .tfx-cta h2 { font-size: 19px; }

  .tfx-blogx .tfx-strip {
    padding: 36px 0;
  }

  .tfx-blogx .tfx-strip .tfx-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .tfx-blogx .tfx-strip h2 { font-size: 20px; }

  .tfx-blogx .tfx-strip-form {
    width: 100%;
  }

  .tfx-blogx .tfx-strip-form input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .tfx-blogx .tfx-related h2 { margin: 30px 0 18px; }
}

/* --- <= 575px : small phones -------------------------------------------- */
@media only screen and (max-width: 575px) {
  .tfx-blogx .tfx-hero-title { font-size: 25px; }
  .tfx-blogx .tfx-art-title  { font-size: 23px; }
  .tfx-blogx .tfx-feat-media { height: 190px; }
  .tfx-blogx .tfx-hero-img   { height: 190px; }

  .tfx-blogx .tfx-crumb {
    font-size: 12px;
    padding: 14px 0;
  }

  .tfx-blogx .tfx-crumb .tfx-sep { margin: 0 5px; }

  .tfx-blogx .tfx-strip-form {
    flex-direction: column;
  }

  .tfx-blogx .tfx-strip-form input,
  .tfx-blogx .tfx-strip-form button {
    width: 100%;
  }

  .tfx-blogx .tfx-page {
    width: 33px;
    height: 33px;
  }
}


/* ==========================================================================
   13. ACCESSIBILITY + PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .tfx-blogx *,
  .tfx-blogx *::before,
  .tfx-blogx *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .tfx-blogx .tfx-card:hover,
  .tfx-blogx .tfx-rel-card:hover {
    transform: none;
  }

  .tfx-blogx .tfx-media img,
  .tfx-blogx .tfx-feat-media img {
    transform: none !important;
  }
}

@media print {
  .tfx-blogx .tfx-aside,
  .tfx-blogx .tfx-share,
  .tfx-blogx .tfx-cta,
  .tfx-blogx .tfx-related,
  .tfx-blogx .tfx-strip,
  .tfx-blogx .tfx-pager,
  .tfx-blogx .tfx-tools {
    display: none !important;
  }

  .tfx-blogx .tfx-layout {
    display: block;
    padding: 0;
  }

  .tfx-blogx .tfx-article {
    max-width: none;
  }

  .tfx-blogx .tfx-hero-img {
    height: 240px;
  }
}