/* =========================================================
   BLOG PAGE
   UVC CONTRACTING LLC
========================================================= */


/* =========================================================
   BLOG HERO
========================================================= */

.blog-hero {
  position: relative;

  overflow: clip;

  padding:
    clamp(68px, 6.5vw, 96px)
    0;

  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(137, 198, 232, 0.12),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #FBFDFE 0%,
      #F1F6F8 100%
    );
}


/* =========================================================
   TECHNICAL BACKGROUND
========================================================= */

.blog-hero-grid {
  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity:
    0.45;

  background-image:
    linear-gradient(
      rgba(90, 140, 163, 0.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(90, 140, 163, 0.055) 1px,
      transparent 1px
    );

  background-size:
    54px 54px;

  mask-image:
    linear-gradient(
      to right,
      black,
      transparent 82%
    );
}

/* =========================================================
   BLOG HERO DECORATION
========================================================= */

.blog-hero::before {
  content: "INSIGHTS";

  position: absolute;

  right: 5%;
  top: 50%;

  transform:
    translateY(-50%);

  color:
    rgba(90, 140, 163, 0.055);

  font-size:
    clamp(
      5rem,
      11vw,
      10rem
    );

  line-height: 1;

  font-weight: 800;

  letter-spacing:
    -0.06em;

  pointer-events: none;

  user-select: none;
}


.blog-hero::after {
  content: "";

  position: absolute;

  right: 7%;
  top: 22%;

  width: 120px;
  height: 120px;

  border-top:
    1px solid
    rgba(123, 184, 223, 0.24);

  border-right:
    1px solid
    rgba(123, 184, 223, 0.24);

  pointer-events: none;
}

/* =========================================================
   LAYOUT
========================================================= */

.blog-hero-layout {
  position: relative;

  z-index: 2;

  display: block;
}


.blog-hero-content {
  max-width: 980px;
}


/* =========================================================
   CONTENT
========================================================= */

.blog-hero-content {
  max-width:
    790px;
}


.blog-hero-kicker {
  display: flex;

  align-items: center;

  gap: 12px;

  margin:
    0
    0
    18px;

  color:
    var(--uvc-deep-blue);

  font-size:
    0.72rem;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.blog-hero-kicker::before {
  content: "";

  width:
    34px;

  height:
    2px;

  flex-shrink:
    0;

  background:
    linear-gradient(
      90deg,
      var(--uvc-deep-blue),
      var(--uvc-light-blue)
    );
}


.blog-hero h1 {
  max-width:
    790px;

  margin:
    0
    0
    22px;

  color:
    var(--uvc-dark);

  font-size:
    clamp(
      2.8rem,
      4.1vw,
      4.4rem
    );

  line-height:
    1.03;

  letter-spacing:
    -0.044em;

  font-weight:
    780;
}


.blog-hero h1 span {
  display: block;

  color:
    var(--uvc-primary);
}


.blog-hero-intro {
  max-width:
    660px;

  margin: 0;

  color:
    var(--uvc-text);

  font-size:
    clamp(
      1rem,
      1.1vw,
      1.06rem
    );

  line-height:
    1.75;
}






/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .blog-hero-layout {
    grid-template-columns:
      1fr;

    gap:
      48px;
  }


  

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .blog-hero {
    padding:
      54px
      0
      64px;
  }


  .blog-hero h1 {
    font-size:
      clamp(
        2.4rem,
        10.5vw,
        3.25rem
      );
  }


  .blog-hero h1 span {
    display:
      inline;
  }


  .blog-hero h1 span::before {
    content:
      " ";
  }
.blog-hero::before,
.blog-hero::after {
  display: none;
}


}

/* =========================================================
   BLOG INSIGHTS
========================================================= */

.blog-insights {
  position: relative;

  overflow: clip;

  padding:
    clamp(72px, 6.5vw, 100px)
    0;

  background:
    #FFFFFF;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.blog-insights-head {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(300px, 0.62fr);

  align-items: end;

  gap:
    clamp(
      45px,
      7vw,
      100px
    );

  margin-bottom:
    clamp(
      48px,
      5vw,
      68px
    );
}


.blog-insights-kicker {
  display: flex;

  align-items: center;

  gap: 11px;

  margin:
    0
    0
    16px;

  color:
    var(--uvc-deep-blue);

  font-size: 0.70rem;

  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.blog-insights-kicker::before {
  content: "";

  width: 32px;
  height: 2px;

  flex-shrink: 0;

  background:
    linear-gradient(
      90deg,
      var(--uvc-deep-blue),
      var(--uvc-light-blue)
    );
}


.blog-insights-head h2 {
  max-width: 720px;

  margin: 0;

  color:
    var(--uvc-dark);

  font-size:
    clamp(
      2.45rem,
      3.8vw,
      4rem
    );

  line-height: 1.04;

  letter-spacing:
    -0.042em;

  font-weight: 760;
}


.blog-insights-head h2 span {
  display: block;

  color:
    var(--uvc-primary);
}


.blog-insights-intro {
  max-width: 500px;

  margin: 0;

  color:
    var(--uvc-text);

  font-size: 0.95rem;

  line-height: 1.75;
}


/* =========================================================
   FEATURED ARTICLE
========================================================= */

.blog-featured {
  display: grid;

  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(360px, 0.88fr);

  overflow: hidden;

  border:
    1px solid
    rgba(90, 140, 163, 0.15);

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      #F7FAFB,
      #FFFFFF
    );

  box-shadow:
    0 22px 50px
    rgba(24, 35, 41, 0.055);
}


/* =========================================================
   FEATURED IMAGE
========================================================= */

.blog-featured-image {
  position: relative;

  min-height: 340px;

  overflow: hidden;

  background:
    #E8F0F4;
}


.blog-featured-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.5s ease;
}


.blog-featured:hover
.blog-featured-image img {

  transform:
    scale(1.025);
}


.blog-featured-badge {
  position: absolute;

  left: 18px;
  top: 18px;

  padding:
    8px
    11px;

  border-radius: 5px;

  color:
    #FFFFFF;

  background:
    rgba(24, 35, 41, 0.90);

  font-size: 0.62rem;

  font-weight: 800;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}


/* =========================================================
   FEATURED CONTENT
========================================================= */

.blog-featured-content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  padding:
    clamp(
      28px,
      3vw,
      42px
    );
}


.blog-article-meta {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 14px;

  color:
    var(--uvc-primary);

  font-size: 0.62rem;

  font-weight: 800;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}


.blog-article-meta span[aria-hidden="true"] {
  color:
    #BAC4C9;
}


.blog-featured-content h3 {
  max-width: 600px;

  margin:
    0
    0
    17px;

  color:
    var(--uvc-dark);

  font-size:
    clamp(
      1.85rem,
      2.8vw,
      2.65rem
    );

  line-height: 1.12;

  letter-spacing:
    -0.032em;

  font-weight: 760;
}


.blog-featured-content > p {
  max-width: 590px;

  margin:
    0
    0
    24px;

  color:
    #68777E;

  font-size: 0.91rem;

  line-height: 1.7;
}


/* =========================================================
   FEATURED POINTS
========================================================= */

.blog-featured-points {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;
}


.blog-featured-points span {
  padding:
    7px
    10px;

  border:
    1px solid
    rgba(90, 140, 163, 0.14);

  border-radius: 5px;

  color:
    #586970;

  background:
    #FFFFFF;

  font-size: 0.70rem;

  font-weight: 650;
}


/* =========================================================
   MORE INSIGHTS LABEL
========================================================= */

.blog-latest-label {
  display: flex;

  align-items: center;

  gap: 18px;

  margin:
    clamp(55px, 6vw, 75px)
    0
    25px;
}


.blog-latest-label > span {
  flex-shrink: 0;

  color:
    var(--uvc-dark);

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.blog-latest-label > div {
  width: 100%;
  height: 1px;

  background:
    rgba(90, 140, 163, 0.16);
}


/* =========================================================
   LATEST GRID
========================================================= */

.blog-latest-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 20px;
}


/* =========================================================
   ARTICLE CARD
========================================================= */

.blog-insight-card {
  overflow: hidden;

  border:
    1px solid
    rgba(90, 140, 163, 0.14);

  border-radius: 13px;

  background:
    #FFFFFF;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}


.blog-insight-card:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(90, 140, 163, 0.23);

  box-shadow:
    0 17px 38px
    rgba(24, 35, 41, 0.06);
}


/* =========================================================
   CARD IMAGE
========================================================= */

.blog-insight-image {
  position: relative;

  height: 245px;

  overflow: hidden;

  background:
    #E8F0F4;
}


.blog-insight-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.45s ease;
}


.blog-insight-card:hover
.blog-insight-image img {

  transform:
    scale(1.025);
}


.blog-insight-image > span {
  position: absolute;

  left: 16px;
  bottom: 16px;

  padding:
    7px
    10px;

  border-radius: 5px;

  color:
    #FFFFFF;

  background:
    rgba(24, 35, 41, 0.88);

  font-size: 0.60rem;

  font-weight: 800;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.blog-insight-content {
  padding:
    25px
    26px
    28px;
}


.blog-insight-content h3 {
  max-width: 520px;

  margin:
    0
    0
    13px;

  color:
    var(--uvc-dark);

  font-size:
    clamp(
      1.35rem,
      2vw,
      1.65rem
    );

  line-height: 1.28;

  letter-spacing:
    -0.022em;

  font-weight: 750;
}


.blog-insight-content > p {
  margin: 0;

  color:
    #6B797F;

  font-size: 0.87rem;

  line-height: 1.68;
}


/* =========================================================
   BOTTOM
========================================================= */

.blog-insights-bottom {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  margin-top: 32px;

  padding-top: 23px;

  border-top:
    1px solid
    rgba(90, 140, 163, 0.14);
}


.blog-insights-bottom p {
  max-width: 680px;

  margin: 0;

  color:
    #6B797F;

  font-size: 0.85rem;

  line-height: 1.6;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .blog-insights-head {
    grid-template-columns:
      1fr;

    gap: 24px;
  }


  .blog-featured {
    grid-template-columns:
      1fr;
  }


  .blog-featured-image {
    min-height: 340px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .blog-insights {
    padding:
      70px
      0;
  }


  .blog-insights-head h2 {
    font-size:
      clamp(
        2.25rem,
        10vw,
        3.1rem
      );
  }


  .blog-featured-image {
    min-height: 250px;
  }


  .blog-featured-content {
    padding:
      26px
      21px
      29px;
  }


  .blog-latest-grid {
    grid-template-columns:
      1fr;
  }


  .blog-insight-image {
    height: 230px;
  }


  .blog-insight-content {
    padding:
      22px
      21px
      25px;
  }


  .blog-insights-bottom {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap: 13px;
  }

}

/* =========================================================
   BLOG TOPIC AREAS
========================================================= */

.blog-topics {
  position: relative;

  overflow: clip;

  padding:
    clamp(82px, 7.5vw, 115px)
    0;

  color:
    #FFFFFF;

  background:
    linear-gradient(
      135deg,
      #182329 0%,
      #213640 100%
    );
}


/* =========================================================
   BACKGROUND
========================================================= */

.blog-topics-grid-bg {
  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.18;

  background-image:
    linear-gradient(
      rgba(137, 198, 232, 0.10) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(137, 198, 232, 0.10) 1px,
      transparent 1px
    );

  background-size:
    58px 58px;

  mask-image:
    linear-gradient(
      to right,
      transparent,
      black 15%,
      black 85%,
      transparent
    );
}


/* Decorative glow */
.blog-topics::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  right: -210px;
  top: -220px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(137, 198, 232, 0.12),
      transparent 68%
    );

  pointer-events: none;
}


/* =========================================================
   HEADING
========================================================= */

.blog-topics-head {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(300px, 0.62fr);

  align-items: end;

  gap:
    clamp(
      45px,
      7vw,
      100px
    );

  margin-bottom:
    clamp(
      48px,
      5.5vw,
      70px
    );
}


.blog-topics-kicker {
  display: flex;

  align-items: center;

  gap: 11px;

  margin:
    0
    0
    16px;

  color:
    var(--uvc-light-blue);

  font-size: 0.70rem;

  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.blog-topics-kicker::before {
  content: "";

  width: 32px;
  height: 2px;

  flex-shrink: 0;

  background:
    var(--uvc-light-blue);
}


.blog-topics-title h2 {
  max-width: 780px;

  margin: 0;

  color:
    #FFFFFF;

  font-size:
    clamp(
      2.45rem,
      3.8vw,
      4rem
    );

  line-height: 1.04;

  letter-spacing:
    -0.042em;

  font-weight: 760;
}


.blog-topics-title h2 span {
  display: block;

  color:
    var(--uvc-light-blue);
}


.blog-topics-intro {
  max-width: 520px;

  margin: 0;

  color:
    #BDC9CE;

  font-size: 0.95rem;

  line-height: 1.75;
}


/* =========================================================
   TOPIC LIST
========================================================= */

.blog-topics-list {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  border-top:
    1px solid
    rgba(255, 255, 255, 0.10);

  border-left:
    1px solid
    rgba(255, 255, 255, 0.10);
}


.blog-topic-item {
  position: relative;

  display: grid;

  grid-template-columns:
    42px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 20px;

  min-height: 155px;

  padding:
    25px
    26px;

  overflow: hidden;

  border-right:
    1px solid
    rgba(255, 255, 255, 0.10);

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.10);

  background:
    rgba(255, 255, 255, 0.025);

  transition:
    background-color 0.3s ease;
}


.blog-topic-item:hover {
  background:
    rgba(255, 255, 255, 0.05);
}


/* =========================================================
   NUMBER
========================================================= */

.blog-topic-number {
  align-self: start;

  padding-top: 3px;

  color:
    var(--uvc-light-blue);

  font-size: 0.66rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}


/* =========================================================
   CONTENT
========================================================= */

.blog-topic-content h3 {
  margin:
    0
    0
    8px;

  color:
    #FFFFFF;

  font-size: 1.15rem;

  font-weight: 750;
}


.blog-topic-content p {
  max-width: 500px;

  margin: 0;

  color:
    #AEBEC5;

  font-size: 0.84rem;

  line-height: 1.63;
}


/* =========================================================
   LARGE BACKGROUND MARK
========================================================= */

.blog-topic-mark {
  color:
    rgba(137, 198, 232, 0.10);

  font-size:
    clamp(
      2.3rem,
      4vw,
      4rem
    );

  line-height: 1;

  font-weight: 800;

  letter-spacing:
    -0.06em;

  transition:
    color 0.3s ease;
}


.blog-topic-item:hover
.blog-topic-mark {

  color:
    rgba(137, 198, 232, 0.18);
}


/* =========================================================
   BOTTOM
========================================================= */

.blog-topics-bottom {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  margin-top: 30px;

  padding-top: 23px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.10);
}


.blog-topics-bottom p {
  margin: 0;

  color:
    #93A7AF;

  font-size: 0.85rem;

  line-height: 1.6;
}


.blog-topics-link {
  color: #FFFFFF;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .blog-topics-head {
    grid-template-columns:
      1fr;

    gap: 24px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .blog-topics {
    padding:
      70px
      0;
  }


  .blog-topics-title h2 {
    font-size:
      clamp(
        2.25rem,
        10vw,
        3.1rem
      );
  }


  .blog-topics-list {
    grid-template-columns:
      1fr;
  }


  .blog-topic-item {
    grid-template-columns:
      32px
      1fr;

    gap: 13px;

    min-height: 0;

    padding:
      23px
      18px;
  }


  .blog-topic-mark {
    display: none;
  }


  .blog-topics-bottom {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap: 13px;
  }

}

/* =========================================================
   BLOG FINAL CTA
========================================================= */

.blog-final {
  position: relative;

  overflow: clip;

  padding:
    clamp(70px, 6.5vw, 95px)
    0;

  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F4F8FA 100%
    );
}


/* Technical top divider */
.blog-final::before {
  content: "";

  position: absolute;

  top: 0;
  left: 50%;

  width:
    min(
      calc(100% - 48px),
      var(--container-width)
    );

  height: 1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(90, 140, 163, 0.18) 15%,
      rgba(90, 140, 163, 0.18) 85%,
      transparent
    );
}


/* =========================================================
   LAYOUT
========================================================= */

.blog-final-inner {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(260px, 0.42fr);

  align-items: center;

  gap:
    clamp(
      50px,
      7vw,
      100px
    );
}


/* =========================================================
   CONTENT
========================================================= */

.blog-final-content {
  max-width: 760px;
}


.blog-final-kicker {
  margin:
    0
    0
    14px;

  color:
    var(--uvc-deep-blue);

  font-size: 0.69rem;

  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.blog-final-content h2 {
  max-width: 760px;

  margin:
    0
    0
    19px;

  color:
    var(--uvc-dark);

  font-size:
    clamp(
      2.45rem,
      3.8vw,
      4rem
    );

  line-height: 1.04;

  letter-spacing:
    -0.042em;

  font-weight: 760;
}


.blog-final-content h2 span {
  display: block;

  color:
    var(--uvc-primary);
}


.blog-final-content > p {
  max-width: 650px;

  margin: 0;

  color:
    var(--uvc-text);

  font-size: 0.94rem;

  line-height: 1.72;
}


/* =========================================================
   ACTIONS
========================================================= */

.blog-final-actions {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 20px;
}


.blog-final-actions .btn {
  min-width: 190px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

  .blog-final-inner {
    grid-template-columns:
      1fr;

    gap: 34px;
  }


  .blog-final-actions {
    flex-direction: row;

    align-items: center;

    flex-wrap: wrap;

    gap: 24px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .blog-final {
    padding:
      62px
      0;
  }


  .blog-final-content h2 {
    font-size:
      clamp(
        2.25rem,
        10vw,
        3.1rem
      );
  }


  .blog-final-actions {
    flex-direction: column;

    align-items: flex-start;

    gap: 18px;
  }


  .blog-final-actions .btn {
    width: 100%;

    justify-content: center;
  }

}

/* =========================================================
   UVC BLOG PAGE
   DESIGN SYSTEM REFINEMENT
   2026
========================================================= */


/* =========================================================
   BLOG HERO
   KEEP EDITORIAL DESIGN
========================================================= */

.blog-hero {
  padding:
    clamp(
      58px,
      5.5vw,
      82px
    )
    0;
}


.blog-hero-content {
  max-width:
    860px;
}


.blog-hero-kicker {
  font-size:
    var(--section-kicker-size, 0.80rem);
}


.blog-hero h1 {
  max-width:
    850px;

  font-size:
    clamp(
      2.8rem,
      3.8vw,
      4.1rem
    );
}


.blog-hero-intro {
  max-width:
    700px;

  font-size:
    1rem;

  line-height:
    1.72;
}


/* Keep INSIGHTS decoration subtle */
.blog-hero::before {
  right:
    4%;

  font-size:
    clamp(
      5rem,
      10vw,
      9rem
    );

  color:
    rgba(90, 140, 163, 0.05);
}


/* =========================================================
   01. BLOG INSIGHTS
   VERTICAL ALIGNMENT + DENSITY
========================================================= */

.blog-insights {
  padding:
    var(--section-space, clamp(74px, 6.2vw, 100px))
    0;
}


.blog-insights-head {
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(340px, 0.68fr);

  align-items:
    center;

  gap:
    clamp(
      48px,
      6vw,
      85px
    );

  margin-bottom:
    clamp(
      40px,
      4.5vw,
      56px
    );
}


.blog-insights-kicker {
  font-size:
    var(--section-kicker-size, 0.80rem);
}


.blog-insights-head h2 {
  max-width:
    780px;

  font-size:
    clamp(
      2.8rem,
      3.8vw,
      4.1rem
    );
}


.blog-insights-intro {
  align-self:
    center;

  max-width:
    560px;

  font-size:
    1rem;

  line-height:
    1.70;
}


/* =========================================================
   FEATURED ARTICLE
========================================================= */

.blog-featured {
  grid-template-columns:
    minmax(0, 1.10fr)
    minmax(380px, 0.90fr);
}


.blog-featured-image {
  min-height:
    330px;
}


.blog-featured-content {
  padding:
    clamp(
      27px,
      3vw,
      40px
    );
}


.blog-article-meta {
  font-size:
    0.66rem;
}


.blog-featured-content h3 {
  font-size:
    clamp(
      1.85rem,
      2.5vw,
      2.45rem
    );
}


.blog-featured-content > p {
  margin-bottom:
    21px;

  font-size:
    0.94rem;

  line-height:
    1.67;
}


.blog-featured-points span {
  font-size:
    0.73rem;
}


/* =========================================================
   MORE INSIGHTS
========================================================= */

.blog-latest-label {
  margin:
    clamp(
      46px,
      4.5vw,
      60px
    )
    0
    22px;
}


.blog-latest-label > span {
  font-size:
    0.76rem;
}


/* =========================================================
   ARTICLE CARDS
========================================================= */

.blog-latest-grid {
  gap:
    18px;
}


.blog-insight-image {
  height:
    240px;
}


.blog-insight-content {
  padding:
    23px
    24px
    25px;
}


.blog-insight-content h3 {
  font-size:
    clamp(
      1.38rem,
      1.8vw,
      1.62rem
    );
}


.blog-insight-content > p {
  font-size:
    0.90rem;

  line-height:
    1.65;
}


.blog-insights-bottom {
  margin-top:
    28px;

  padding-top:
    21px;
}


.blog-insights-bottom p {
  font-size:
    0.88rem;
}


/* =========================================================
   02. TOPIC AREAS
   VERTICAL ALIGNMENT + COMPACT HEIGHT
========================================================= */

.blog-topics {
  padding:
    var(--section-space, clamp(74px, 6.2vw, 100px))
    0;
}


.blog-topics-head {
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(340px, 0.68fr);

  align-items:
    center;

  gap:
    clamp(
      48px,
      6vw,
      85px
    );

  margin-bottom:
    clamp(
      40px,
      4.5vw,
      56px
    );
}


.blog-topics-kicker {
  font-size:
    var(--section-kicker-size, 0.80rem);
}


.blog-topics-title h2 {
  max-width:
    820px;

  font-size:
    clamp(
      2.8rem,
      3.8vw,
      4.1rem
    );
}


.blog-topics-intro {
  align-self:
    center;

  max-width:
    570px;

  font-size:
    1rem;

  line-height:
    1.70;
}


/* =========================================================
   TOPIC ITEMS
========================================================= */

.blog-topic-item {
  grid-template-columns:
    40px
    minmax(0, 1fr)
    auto;

  gap:
    18px;

  min-height:
    140px;

  padding:
    22px
    24px;
}


.blog-topic-number {
  font-size:
    0.72rem;
}


.blog-topic-content h3 {
  font-size:
    1.20rem;
}


.blog-topic-content p {
  font-size:
    0.88rem;

  line-height:
    1.60;
}


.blog-topic-mark {
  font-size:
    clamp(
      2.2rem,
      3.6vw,
      3.6rem
    );
}


.blog-topics-bottom {
  margin-top:
    26px;

  padding-top:
    21px;
}


.blog-topics-bottom p {
  font-size:
    0.88rem;
}


/* =========================================================
   03. FINAL BLOG CTA
   KEEP CURRENT DESIGN
========================================================= */

.blog-final {
  padding:
    clamp(
      70px,
      6vw,
      92px
    )
    0;
}


.blog-final-inner {
  grid-template-columns:
    minmax(0, 1.16fr)
    minmax(260px, 0.40fr);

  gap:
    clamp(
      48px,
      6vw,
      82px
    );
}


.blog-final-kicker {
  font-size:
    var(--section-kicker-size, 0.80rem);
}


.blog-final-content h2 {
  max-width:
    800px;

  font-size:
    clamp(
      2.8rem,
      3.8vw,
      4.1rem
    );
}


.blog-final-content > p {
  max-width:
    680px;

  font-size:
    1rem;

  line-height:
    1.70;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .blog-insights-head,
  .blog-topics-head {
    grid-template-columns:
      1fr;

    align-items:
      start;

    gap:
      24px;
  }


  .blog-featured {
    grid-template-columns:
      1fr;
  }


  .blog-featured-image {
    min-height:
      320px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .blog-hero-kicker,
  .blog-insights-kicker,
  .blog-topics-kicker,
  .blog-final-kicker {
    font-size:
      0.73rem;
  }


  .blog-insights,
  .blog-topics,
  .blog-final {
    padding:
      68px
      0;
  }


  .blog-featured-image {
    min-height:
      245px;
  }


  .blog-featured-content {
    padding:
      25px
      20px
      27px;
  }


  .blog-insight-image {
    height:
      225px;
  }


  .blog-insight-content {
    padding:
      21px
      20px
      24px;
  }


  .blog-topic-item {
    grid-template-columns:
      31px
      1fr;

    min-height:
      0;

    padding:
      21px
      18px;
  }


  .blog-topic-mark {
    display:
      none;
  }

}

/* =========================================================
   FINAL MOBILE LAYOUT SAFETY
========================================================= */

@media (max-width: 900px) {
  .blog-insights-head,
  .blog-featured,
  .blog-topics-head,
  .blog-final-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-insights-head > *,
  .blog-featured > *,
  .blog-topics-head > *,
  .blog-final-content,
  .blog-final-actions {
    min-width: 0;
    width: 100%;
  }

  .blog-final-inner {
    gap: 34px;
  }
}

@media (max-width: 600px) {
  .blog-hero h1 {
    font-size: clamp(2.35rem, 10.5vw, 3.2rem);
  }

  .blog-insights-head h2,
  .blog-topics-title h2,
  .blog-final-content h2 {
    font-size: clamp(2.25rem, 10vw, 3.1rem);
  }

  .blog-latest-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-final-actions {
    align-items: stretch;
  }

  .blog-final-actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
}