/* =========================================================================
   Valiant Lifecare — /blog index page redesign (cr2026)
   Loads AFTER the inline <style> block in blog.php, so every rule here
   overrides the default styling. Brings the listing page in line with
   the brand palette:
     - #0045AA  Valiant blue   — primary text, links, titles, pills
     - #C8F8A9  Lime           — accents, hover, dividers, dot indicators
     - #0F3D3A  Teal           — large headings (Forum)
   Layout, structure and copy are untouched — pure visual refresh.
   ========================================================================= */

:root{
  --vlb-blue:#0045AA;
  --vlb-blue-soft:rgba(0,69,170,0.08);
  --vlb-blue-line:rgba(0,69,170,0.14);
  --vlb-lime:#C8F8A9;
  --vlb-lime-soft:rgba(200,248,169,0.22);
  --vlb-lime-deep:#0F3D3A;
  --vlb-teal:#0F3D3A;
  --vlb-ink:#0E1726;
  --vlb-muted:#5A6573;
  --vlb-line:#E5E9EE;
  --vlb-card-shadow:0 10px 30px rgba(15,61,58,.06);
  --vlb-card-shadow-hover:0 18px 44px rgba(0,69,170,.14);
}

/* ══════════════════════════════════════════════════════════════════════
   HERO — brand-blue background with diamond grid + lime accents
══════════════════════════════════════════════════════════════════════ */
.blog-hero{
  position:relative;
  padding:150px 40px 96px !important;
  background:
    radial-gradient(ellipse 80% 60% at 88% -10%, rgba(200,248,169,.18) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 10% 110%, rgba(200,248,169,.14) 0%, transparent 55%),
    linear-gradient(135deg, var(--vlb-blue) 0%, #06286a 55%, var(--vlb-teal) 100%) !important;
  border-bottom:none;
  overflow:hidden;
  color:#fff;
}

/* Diamond grid pattern overlay (matches the homepage hero language). */
.blog-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M11 0 L22 11 L11 22 L0 11 Z' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='0.6'/%3E%3C/svg%3E");
  background-size:22px 22px;
  opacity:1;
  z-index:0;
  pointer-events:none;
}

/* Lime corner accent — a subtle glowing diamond cluster top-right */
.blog-hero::after{
  content:'';
  position:absolute;
  top:-80px; right:-80px;
  width:380px; height:380px;
  background:radial-gradient(circle, rgba(200,248,169,.35) 0%, rgba(200,248,169,.08) 35%, transparent 65%);
  pointer-events:none;
  z-index:0;
  filter:blur(8px);
}

.blog-hero__inner{
  position:relative;
  z-index:2;
}

/* Eyebrow pill — lime-tinted on the dark surface */
.blog-hero__inner .section-label{
  background:rgba(200,248,169,.16);
  color:var(--vlb-lime);
  border:1px solid rgba(200,248,169,.32);
  padding:6px 16px 6px 26px;
  font-weight:700;
  letter-spacing:.16em;
}
.blog-hero__inner .section-label::before{
  background:var(--vlb-lime);
  box-shadow:0 0 0 0 rgba(200,248,169,.55);
}

/* Headline — bigger, brighter, serif Forum with a lime accent rule under it */
.blog-hero__inner h1{
  color:#FFFFFF !important;
  font-family:'Forum', Georgia, serif;
  font-weight:400;
  font-size:clamp(42px, 5.6vw, 68px) !important;
  line-height:1.05 !important;
  letter-spacing:-.015em;
  margin:18px 0 22px !important;
  text-shadow:0 2px 24px rgba(0,0,0,.18);
}
.blog-hero__inner h1 .accent,
.blog-hero__inner h1 em{
  color:var(--vlb-lime);
  font-style:normal;
}
/* A short lime divider under the headline */
.blog-hero__inner h1::after{
  content:'';
  display:block;
  width:80px; height:3px;
  background:var(--vlb-lime);
  border-radius:3px;
  margin:22px 0 0;
  box-shadow:0 0 18px rgba(200,248,169,.45);
}

/* Sub-deck */
.blog-hero__sub{
  color:rgba(255,255,255,.86) !important;
  font-size:18px !important;
  line-height:1.7 !important;
  max-width:720px !important;
  margin:0 0 36px !important;
}

/* Stats row — lighter strokes & text for the dark surface */
.blog-hero__stats{
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:24px;
}
.blog-stat__num{
  color:var(--vlb-lime) !important;
  font-size:42px !important;
  text-shadow:0 0 24px rgba(200,248,169,.25);
}
.blog-stat__label{
  color:rgba(255,255,255,.7) !important;
  letter-spacing:.1em;
}
.blog-stat-divider{
  background:linear-gradient(180deg, transparent, rgba(200,248,169,.45), transparent) !important;
  width:1px !important;
  height:44px !important;
  opacity:1;
}

/* Mobile: a touch less top padding */
@media (max-width: 720px){
  .blog-hero{ padding:120px 24px 64px !important; }
  .blog-hero::after{ width:260px; height:260px; top:-60px; right:-60px; }
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION HEADERS
══════════════════════════════════════════════════════════════════════ */
.blog-section-header .section-label{
  background:var(--vlb-blue-soft);
  color:var(--vlb-blue);
  border:1px solid var(--vlb-blue-line);
}
.blog-section-header h2{
  color:var(--vlb-teal);
}
.blog-section-header h2::after{
  /* Lime underline accent under section headings */
  content:'';
  display:block;
  width:60px; height:3px;
  background:var(--vlb-lime);
  border-radius:3px;
  margin-top:14px;
}

/* ══════════════════════════════════════════════════════════════════════
   FEATURED CARDS
══════════════════════════════════════════════════════════════════════ */
.blog-feat-card{
  background:#fff;
  border:1px solid var(--vlb-line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--vlb-card-shadow);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s ease,
              border-color .35s ease;
  position:relative;
}
.blog-feat-card::before{
  /* Lime top-edge accent that grows on hover */
  content:'';
  position:absolute;
  top:0; left:0;
  height:4px; width:0;
  background:linear-gradient(90deg, var(--vlb-lime) 0%, var(--vlb-blue) 100%);
  transition:width .5s cubic-bezier(.22,.61,.36,1);
  z-index:2;
}
.blog-feat-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--vlb-card-shadow-hover);
  border-color:var(--vlb-blue-line);
}
.blog-feat-card:hover::before{
  width:100%;
}
.blog-feat-card__title a{
  color:var(--vlb-teal);
  transition:color .25s ease;
}
.blog-feat-card__title a:hover{
  color:var(--vlb-blue);
}
.blog-feat-card__excerpt{
  color:#36404F;
}
.blog-feat-card__date{
  color:var(--vlb-muted);
  font-weight:500;
}
.blog-feat-card--primary{
  background:linear-gradient(160deg, #FFFFFF 0%, #F4F7FB 100%);
  border:1px solid var(--vlb-blue-line);
}
.blog-feat-card--primary::after{
  /* Subtle lime corner pattern on the primary featured card */
  content:'';
  position:absolute;
  right:-40px; bottom:-40px;
  width:160px; height:160px;
  background:radial-gradient(circle, rgba(200,248,169,.35) 0%, transparent 70%);
  pointer-events:none;
}

/* Pills */
.blog-pill{
  background:var(--vlb-blue-soft) !important;
  color:var(--vlb-blue) !important;
  border:1px solid var(--vlb-blue-line);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* ══════════════════════════════════════════════════════════════════════
   READ LINKS
══════════════════════════════════════════════════════════════════════ */
.blog-read-link{
  color:var(--vlb-blue) !important;
  font-weight:700;
  position:relative;
  padding-bottom:2px;
}
.blog-read-link::after{
  content:'';
  position:absolute;
  left:0; bottom:-2px;
  width:0; height:2px;
  background:var(--vlb-lime);
  transition:width .3s cubic-bezier(.22,.61,.36,1);
}
.blog-read-link:hover{
  color:var(--vlb-teal) !important;
}
.blog-read-link:hover::after{
  width:calc(100% - 22px); /* leave space for the chevron */
}

/* ══════════════════════════════════════════════════════════════════════
   FILTER BAR
══════════════════════════════════════════════════════════════════════ */
.blog-filters{
  background:#fff;
  border:1px solid var(--vlb-line);
  border-radius:999px;
  padding:6px;
  display:inline-flex;
  flex-wrap:wrap;
  gap:4px;
  box-shadow:0 4px 18px rgba(0,69,170,.04);
}
.blog-filter-btn{
  background:transparent;
  color:var(--vlb-muted);
  border:none;
  padding:10px 18px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, transform .25s ease;
  position:relative;
}
.blog-filter-btn:hover{
  background:var(--vlb-lime-soft);
  color:var(--vlb-lime-deep);
}
.blog-filter-btn.active{
  background:var(--vlb-blue);
  color:#fff;
  box-shadow:0 6px 16px rgba(0,69,170,.28);
}
.blog-filter-btn.active::before{
  content:'';
  position:absolute;
  left:14px; top:50%;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--vlb-lime);
  transform:translateY(-50%);
  box-shadow:0 0 0 0 rgba(200,248,169,.6);
  animation:vlbDotPulse 2.4s ease-in-out infinite;
}
.blog-filter-btn.active{
  padding-left:30px;
}
@keyframes vlbDotPulse{
  0%,100% { box-shadow:0 0 0 0 rgba(200,248,169,.5); }
  70%     { box-shadow:0 0 0 6px rgba(200,248,169,0); }
}

.blog-count-bar{
  color:var(--vlb-muted);
  font-size:14px;
  font-weight:500;
  margin-top:18px;
}
#blog-count{
  color:var(--vlb-blue);
  font-weight:700;
}

/* ══════════════════════════════════════════════════════════════════════
   ALL-ARTICLES GRID
══════════════════════════════════════════════════════════════════════ */
.blog-card-v2{
  background:#fff;
  border:1px solid var(--vlb-line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--vlb-card-shadow);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),
              box-shadow .3s ease,
              border-color .3s ease;
  display:flex;
  flex-direction:column;
  position:relative;
}
.blog-card-v2::after{
  /* Lime accent line that grows along bottom on hover */
  content:'';
  position:absolute;
  left:0; bottom:0;
  height:3px; width:0;
  background:linear-gradient(90deg, var(--vlb-lime) 0%, var(--vlb-blue) 100%);
  transition:width .45s cubic-bezier(.22,.61,.36,1);
}
.blog-card-v2:hover{
  transform:translateY(-4px);
  box-shadow:var(--vlb-card-shadow-hover);
  border-color:var(--vlb-blue-line);
}
.blog-card-v2:hover::after{
  width:100%;
}
.blog-card-v2__icon{
  /* Replace per-category colour backgrounds with brand-uniform light surface */
  background:var(--vlb-blue-soft) !important;
  border-bottom:1px solid var(--vlb-blue-line);
  transition:background .3s ease;
}
.blog-card-v2:hover .blog-card-v2__icon{
  background:linear-gradient(135deg, var(--vlb-blue-soft) 0%, var(--vlb-lime-soft) 100%) !important;
}
.blog-card-v2__svg-icon{
  filter:none;
}
.blog-card-v2__title a{
  color:var(--vlb-teal);
  transition:color .25s ease;
}
.blog-card-v2__title a:hover{
  color:var(--vlb-blue);
}
.blog-card-v2__excerpt{
  color:#36404F;
}
.blog-card-v2__date{
  color:var(--vlb-muted);
}

/* Override per-card pill colours to brand uniform blue */
.blog-card-v2 .blog-pill,
.blog-feat-card .blog-pill{
  background:var(--vlb-blue-soft) !important;
  color:var(--vlb-blue) !important;
  border:1px solid var(--vlb-blue-line);
}

/* Same uniform palette for the featured-card icon backgrounds */
.blog-feat-card__icon-wrap{
  background:linear-gradient(135deg, var(--vlb-blue-soft) 0%, var(--vlb-lime-soft) 100%) !important;
  border:1px solid var(--vlb-blue-line);
}

/* ══════════════════════════════════════════════════════════════════════
   TOPIC DIRECTORY
══════════════════════════════════════════════════════════════════════ */
.blog-topic-card{
  background:#fff;
  border:1px solid var(--vlb-line);
  border-radius:14px;
  padding:18px 20px;
  display:flex;
  align-items:center;
  gap:14px;
  cursor:pointer;
  text-align:left;
  transition:transform .3s ease,
              box-shadow .3s ease,
              border-color .3s ease,
              background .3s ease;
  position:relative;
  overflow:hidden;
}
.blog-topic-card::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:var(--vlb-lime);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.blog-topic-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--vlb-card-shadow-hover);
  border-color:var(--vlb-blue-line);
  background:linear-gradient(180deg, #fff 0%, #F4F7FB 100%);
}
.blog-topic-card:hover::before{
  transform:scaleY(1);
}
.blog-topic-card__icon{
  background:var(--vlb-blue-soft) !important;
  border:1px solid var(--vlb-blue-line);
  transition:background .3s ease;
}
.blog-topic-card:hover .blog-topic-card__icon{
  background:linear-gradient(135deg, var(--vlb-blue-soft) 0%, var(--vlb-lime-soft) 100%) !important;
}
.blog-topic-card__body strong{
  color:var(--vlb-teal);
  font-weight:600;
}
.blog-topic-card__body span{
  color:var(--vlb-muted);
  font-size:13px;
}
.blog-topic-card__arrow{
  color:var(--vlb-blue);
  transition:transform .3s ease;
  margin-left:auto;
}
.blog-topic-card:hover .blog-topic-card__arrow{
  transform:translateX(4px);
}

/* ══════════════════════════════════════════════════════════════════════
   CTA STRIP — final block above footer
══════════════════════════════════════════════════════════════════════ */
.cta-strip{
  background:linear-gradient(135deg, var(--vlb-blue) 0%, var(--vlb-teal) 100%);
  position:relative;
  overflow:hidden;
}
.cta-strip::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10 0 L20 10 L10 20 L0 10 Z' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size:20px 20px;
  pointer-events:none;
}
.cta-strip-inner{
  position:relative;
  z-index:1;
}
.cta-strip h2{
  color:#fff;
  font-family:'Forum',serif;
  font-weight:400;
}
.cta-strip h2::after{
  /* Centred lime underline */
  content:'';
  display:block;
  width:80px; height:3px;
  background:var(--vlb-lime);
  border-radius:3px;
  margin:14px auto 0;
}
.cta-strip .btn-hero{
  background:var(--vlb-lime);
  color:var(--vlb-teal);
  font-weight:700;
}
.cta-strip .btn-hero:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(200,248,169,.45);
}

/* ══════════════════════════════════════════════════════════════════════
   NO-RESULTS
══════════════════════════════════════════════════════════════════════ */
.blog-no-results{
  background:#FFFFFF;
  border:1px dashed var(--vlb-blue-line);
  border-radius:18px;
}
.blog-no-results__inner svg{
  stroke:var(--vlb-blue);
}
.blog-no-results__inner p{
  color:var(--vlb-muted);
}
.blog-no-results__inner .blog-filter-btn{
  background:var(--vlb-blue);
  color:#fff;
}

/* ══════════════════════════════════════════════════════════════════════
   ARTICLE IMAGES — featured + all-articles cards
══════════════════════════════════════════════════════════════════════ */
/* Featured card image: full-width, slight aspect, lime→blue overlay
   on hover. Replaces the old icon-wrap. */
.blog-feat-card{
  /* Stack image atop body */
  display:flex;
  flex-direction:column;
}
.blog-feat-card__visual{
  width:100%;
  margin:0;
  padding:0;
}
.blog-feat-card__img-wrap{
  display:block;
  width:100%;
  aspect-ratio: 16 / 9;
  overflow:hidden;
  position:relative;
  background:var(--vlb-blue-soft);
}
.blog-feat-card__img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s cubic-bezier(.22,.61,.36,1),
              filter .5s ease;
}
.blog-feat-card:hover .blog-feat-card__img-wrap img{
  transform:scale(1.06);
  filter:saturate(1.05);
}
.blog-feat-card__img-wrap::after{
  /* Subtle brand tint over the photo so the image always reads on-brand. */
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(140deg,
    rgba(0,69,170,.12) 0%,
    rgba(0,69,170,0) 45%,
    rgba(200,248,169,.18) 100%);
  pointer-events:none;
}
.blog-feat-card__body{
  padding:24px 26px 26px;
}

/* All-articles card image */
.blog-card-v2__img{
  display:block;
  width:100%;
  aspect-ratio: 16 / 10;
  overflow:hidden;
  position:relative;
  background:var(--vlb-blue-soft);
  border-bottom:1px solid var(--vlb-blue-line);
}
.blog-card-v2__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s cubic-bezier(.22,.61,.36,1),
              filter .5s ease;
}
.blog-card-v2:hover .blog-card-v2__img img{
  transform:scale(1.05);
  filter:saturate(1.05);
}
.blog-card-v2__img::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(15,61,58,0) 60%,
    rgba(15,61,58,.18) 100%);
  pointer-events:none;
}
.blog-card-v2__body{
  padding:18px 20px 20px;
}

/* Hide any leftover icon containers if older markup is still cached. */
.blog-feat-card__icon-wrap,
.blog-feat-card__svg-icon,
.blog-card-v2__icon,
.blog-card-v2__svg-icon{
  display:none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .blog-feat-card,
  .blog-feat-card::before,
  .blog-card-v2,
  .blog-card-v2::after,
  .blog-topic-card,
  .blog-topic-card::before,
  .blog-read-link::after,
  .blog-filter-btn,
  .blog-filter-btn.active::before{
    transition:none !important;
    animation:none !important;
  }
}