/* =========================================================
   VITA UNIKA — JOURNAL / BLOG V1
   ========================================================= */

.vita-blog,
.vita-article{

  --blog-teal:#0b7978;
  --blog-gold:#b48d42;
  --blog-ink:#132725;
  --blog-muted:#71807d;
  --blog-soft:#f5f8f7;
  --blog-line:rgba(19,39,37,.12);

  color:var(--blog-ink);
  background:#fff;

}


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

.blog-hero{

  padding:
    175px
    0
    105px;

  border-bottom:
    1px solid
    var(--blog-line);

}


.blog-shell{

  width:
    min(
      1500px,
      calc(100% - 80px)
    );

  margin:0 auto;

}


.blog-eyebrow{

  display:flex;

  align-items:center;

  gap:14px;

  margin-bottom:40px;

  color:
    var(--blog-teal);

  font-size:10px;

  font-weight:650;

  letter-spacing:.19em;

}


.blog-eyebrow span{

  color:
    var(--blog-gold);

}


.blog-hero-grid{

  display:grid;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(300px,.52fr);

  gap:
    clamp(
      50px,
      8vw,
      150px
    );

  align-items:end;

}


.blog-hero h1{

  margin:0;

  color:
    var(--blog-ink);

  font-size:
    clamp(
      82px,
      9.2vw,
      170px
    );

  font-weight:300;

  line-height:.79;

  letter-spacing:-.075em;

}


.blog-hero h1 em{

  display:block;

  padding-left:10%;

  color:
    var(--blog-teal);

  font-family:
    "DM Serif Display",
    Georgia,
    serif;

  font-weight:400;

  font-style:italic;

  letter-spacing:-.04em;

}


.blog-hero-intro{

  padding-bottom:12px;

}


.blog-hero-intro p{

  margin:0;

  color:
    var(--blog-muted);

  font-size:
    clamp(
      16px,
      1.25vw,
      20px
    );

  line-height:1.75;

}


.blog-hero-intro small{

  display:block;

  margin-top:25px;

  padding-top:18px;

  border-top:
    1px solid
    var(--blog-line);

  color:
    var(--blog-gold);

  font-size:9px;

  letter-spacing:.17em;

}


/* =========================================================
   BLOG GRID
   ========================================================= */

.blog-index{

  padding:
    100px
    0
    145px;

}


.blog-grid{

  display:grid;

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

  gap:
    84px
    28px;

}


.blog-card{

  position:relative;

}


.blog-card-image{

  position:relative;

  aspect-ratio:
    1.5;

  overflow:hidden;

  background:#eef2f0;

}


.blog-card-image img{

  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  transition:
    transform 1.1s
    cubic-bezier(.16,1,.3,1);

}


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

  transform:
    scale(1.035);

}


.blog-card-image::after{

  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      transparent 60%,
      rgba(12,37,34,.12)
    );

}


.blog-card-meta{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  margin-top:19px;

  color:#899491;

  font-size:9px;

  font-weight:650;

  letter-spacing:.12em;

  text-transform:uppercase;

}


.blog-card-meta span:first-child{

  color:
    var(--blog-gold);

}


.blog-card h2{

  max-width:680px;

  margin:
    19px
    0
    0;

  font-size:
    clamp(
      34px,
      3vw,
      52px
    );

  font-weight:300;

  line-height:.99;

  letter-spacing:-.045em;

}


.blog-card p{

  max-width:610px;

  margin:
    18px
    0
    0;

  color:
    var(--blog-muted);

  font-size:14px;

  line-height:1.75;

}


.blog-card-link{

  margin-top:24px;

  display:inline-flex;

  align-items:center;

  gap:15px;

  color:
    var(--blog-ink);

  text-decoration:none;

  font-size:10px;

  font-weight:650;

  letter-spacing:.09em;

  text-transform:uppercase;

}


.blog-card-link::before{

  content:"";

  width:32px;
  height:1px;

  background:
    var(--blog-gold);

  transition:
    width .45s
    cubic-bezier(.16,1,.3,1);

}


.blog-card-link:hover{

  color:
    var(--blog-teal);

}


.blog-card-link:hover::before{

  width:51px;

}


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

.blog-card-number{

  position:absolute;

  z-index:4;

  left:17px;
  top:17px;

  width:44px;
  height:44px;

  display:grid;

  place-items:center;

  border-radius:50%;

  color:
    var(--blog-teal);

  background:
    rgba(255,255,255,.92);

  font-family:
    Georgia,
    serif;

  font-size:11px;

  box-shadow:
    0 8px 24px
    rgba(10,38,34,.08);

}


/* =========================================================
   ARTICLE HERO
   ========================================================= */

.article-hero{

  padding:
    160px
    0
    80px;

}


.article-back{

  display:inline-flex;

  align-items:center;

  gap:12px;

  margin-bottom:60px;

  color:
    var(--blog-teal);

  text-decoration:none;

  font-size:9px;

  font-weight:650;

  letter-spacing:.14em;

  text-transform:uppercase;

}


.article-back::before{

  content:"";

  width:28px;
  height:1px;

  background:
    var(--blog-gold);

}


.article-meta{

  display:flex;

  flex-wrap:wrap;

  gap:
    10px
    22px;

  margin-bottom:30px;

  color:#899491;

  font-size:9px;

  font-weight:650;

  letter-spacing:.13em;

  text-transform:uppercase;

}


.article-meta span:first-child{

  color:
    var(--blog-gold);

}


.article-hero h1{

  max-width:1250px;

  margin:0;

  color:
    var(--blog-ink);

  font-size:
    clamp(
      62px,
      7.4vw,
      126px
    );

  font-weight:300;

  line-height:.86;

  letter-spacing:-.07em;

}


.article-hero h1 em{

  color:
    var(--blog-teal);

  font-family:
    "DM Serif Display",
    Georgia,
    serif;

  font-weight:400;

  font-style:italic;

  letter-spacing:-.035em;

}


.article-lead{

  max-width:770px;

  margin:
    44px
    0
    0
    auto;

  color:
    var(--blog-muted);

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      19px,
      1.6vw,
      25px
    );

  line-height:1.65;

}


/* =========================================================
   ARTICLE HERO IMAGE
   ========================================================= */

.article-image-wrap{

  padding-bottom:95px;

}


.article-image{

  width:100%;

  height:
    clamp(
      430px,
      52vw,
      760px
    );

  overflow:hidden;

  background:#edf0ef;

}


.article-image img{

  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

}


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

.article-layout{

  display:grid;

  grid-template-columns:
    220px
    minmax(0,780px);

  justify-content:center;

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

  padding-bottom:130px;

}


.article-aside{

  position:relative;

}


.article-aside-inner{

  position:sticky;

  top:130px;

}


.article-aside small{

  display:block;

  margin-bottom:15px;

  color:
    var(--blog-gold);

  font-size:8px;

  font-weight:650;

  letter-spacing:.17em;

}


.article-aside p{

  margin:0;

  color:
    var(--blog-muted);

  font-size:12px;

  line-height:1.7;

}


.article-aside-line{

  width:34px;
  height:1px;

  margin:
    20px
    0;

  background:
    var(--blog-teal);

}


.article-body{

  color:
    #344542;

}


.article-body > p:first-child{

  margin-top:0;

  color:
    var(--blog-ink);

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      22px,
      1.8vw,
      28px
    );

  line-height:1.65;

}


.article-body p{

  margin:
    0
    0
    25px;

  font-size:
    17px;

  line-height:1.9;

}


.article-body h2{

  margin:
    66px
    0
    24px;

  color:
    var(--blog-ink);

  font-size:
    clamp(
      38px,
      3.6vw,
      56px
    );

  font-weight:300;

  line-height:1;

  letter-spacing:-.05em;

}


.article-body h3{

  margin:
    42px
    0
    17px;

  color:
    var(--blog-teal);

  font-size:23px;

  font-weight:500;

  line-height:1.2;

  letter-spacing:-.025em;

}


.article-body ul{

  margin:
    6px
    0
    30px;

  padding-left:22px;

}


.article-body li{

  margin-bottom:12px;

  padding-left:5px;

  color:
    #41514e;

  font-size:16px;

  line-height:1.75;

}


.article-callout{

  margin:
    46px
    0;

  padding:
    30px
    32px;

  border-left:
    2px solid
    var(--blog-gold);

  background:
    var(--blog-soft);

}


.article-callout strong{

  display:block;

  margin-bottom:9px;

  color:
    var(--blog-teal);

  font-size:11px;

  letter-spacing:.1em;

  text-transform:uppercase;

}


.article-callout p{

  margin:0;

  color:
    var(--blog-ink);

  font-family:
    Georgia,
    serif;

  font-size:19px;

  line-height:1.65;

}


/* =========================================================
   SOURCES
   ========================================================= */

.article-sources{

  margin-top:75px;

  padding-top:30px;

  border-top:
    1px solid
    var(--blog-line);

}


.article-sources small{

  display:block;

  margin-bottom:15px;

  color:
    var(--blog-gold);

  font-size:9px;

  font-weight:650;

  letter-spacing:.16em;

}


.article-sources p{

  margin:
    0
    0
    10px;

  color:#84908d;

  font-size:12px;

  line-height:1.65;

}


.article-disclaimer{

  margin-top:35px;

  padding:
    18px
    0
    0;

  border-top:
    1px solid
    var(--blog-line);

  color:#8a9592;

  font-size:11px;

  line-height:1.7;

}


/* =========================================================
   MORE ARTICLES
   ========================================================= */

.more-reading{

  padding:
    90px
    0
    125px;

  border-top:
    1px solid
    var(--blog-line);

}


.more-reading-head{

  display:flex;

  align-items:end;

  justify-content:space-between;

  gap:30px;

  margin-bottom:45px;

}


.more-reading h2{

  margin:0;

  font-size:
    clamp(
      48px,
      5vw,
      80px
    );

  font-weight:300;

  letter-spacing:-.06em;

}


.more-reading h2 em{

  color:
    var(--blog-teal);

  font-family:
    "DM Serif Display",
    Georgia,
    serif;

  font-weight:400;

  font-style:italic;

}


.more-reading-grid{

  display:grid;

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

  gap:22px;

}


.more-card{

  padding:
    27px;

  border:
    1px solid
    var(--blog-line);

  text-decoration:none;

  transition:
    background .4s ease,
    transform .4s
    cubic-bezier(.16,1,.3,1),
    border-color .4s ease;

}


.more-card:hover{

  transform:
    translateY(-4px);

  border-color:
    rgba(11,121,120,.30);

  background:
    var(--blog-soft);

}


.more-card small{

  color:
    var(--blog-gold);

  font-size:8px;

  letter-spacing:.13em;

}


.more-card strong{

  display:block;

  margin-top:25px;

  color:
    var(--blog-ink);

  font-size:25px;

  font-weight:300;

  line-height:1.05;

  letter-spacing:-.035em;

}


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

@media(max-width:1000px){

  .blog-shell{

    width:
      calc(100% - 40px);

  }


  .blog-hero-grid{

    grid-template-columns:1fr;

  }


  .blog-hero-intro{

    max-width:620px;

  }


  .article-layout{

    grid-template-columns:
      minmax(0,760px);

  }


  .article-aside{

    display:none;

  }


  .more-reading-grid{

    grid-template-columns:1fr;

  }

}


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

@media(max-width:700px){

  .blog-shell{

    width:
      calc(100% - 28px);

  }


  .blog-hero{

    padding:
      120px
      0
      70px;

  }


  .blog-hero h1{

    font-size:
      clamp(
        62px,
        20vw,
        88px
      );

  }


  .blog-hero h1 em{

    padding-left:0;

  }


  .blog-grid{

    grid-template-columns:1fr;

    gap:65px;

  }


  .blog-index{

    padding:
      70px
      0
      100px;

  }


  .article-hero{

    padding:
      120px
      0
      60px;

  }


  .article-back{

    margin-bottom:40px;

  }


  .article-hero h1{

    font-size:
      clamp(
        50px,
        15vw,
        72px
      );

  }


  .article-lead{

    margin-top:30px;

  }


  .article-image-wrap{

    padding-bottom:62px;

  }


  .article-image{

    height:auto;

    aspect-ratio:.86;

  }


  .article-layout{

    padding-bottom:90px;

  }


  .article-body p{

    font-size:16px;

  }


  .article-body h2{

    margin-top:52px;

  }


  .more-reading{

    padding:
      65px
      0
      90px;

  }

}


/* === BLOG GRID SPACING FIX START === */


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.vita-blog .blog-grid{

  display:grid!important;

  grid-template-columns:
    repeat(2,minmax(0,1fr))!important;

  grid-auto-rows:auto!important;

  column-gap:
    clamp(
      28px,
      3vw,
      48px
    )!important;

  row-gap:
    clamp(
      110px,
      10vw,
      165px
    )!important;

  align-items:start!important;
  align-content:start!important;

}


/* ---------------------------------------------------------
   CARD
   --------------------------------------------------------- */

.vita-blog .blog-card{

  position:relative!important;

  display:grid!important;

  grid-template-columns:1fr!important;

  grid-template-rows:
    auto
    auto
    auto
    auto
    auto!important;

  align-content:start!important;

  width:100%!important;
  height:auto!important;
  min-height:0!important;

  margin:0!important;

  padding:
    0
    0
    18px!important;

  overflow:visible!important;

}


/* ---------------------------------------------------------
   FORCE ALL CARD CONTENT BACK INTO NORMAL FLOW
   --------------------------------------------------------- */

.vita-blog .blog-card-image{

  grid-row:1!important;

  position:relative!important;

  inset:auto!important;

  width:100%!important;

  margin:0!important;

  transform:none;

}


.vita-blog .blog-card-meta{

  grid-row:2!important;

  position:relative!important;

  inset:auto!important;

  width:100%!important;

  margin:
    22px
    0
    0!important;

  transform:none!important;

}


.vita-blog .blog-card h2{

  grid-row:3!important;

  position:relative!important;

  inset:auto!important;

  width:100%!important;
  max-width:680px!important;

  margin:
    18px
    0
    0!important;

  transform:none!important;

  overflow:visible!important;

}


.vita-blog .blog-card > p{

  grid-row:4!important;

  position:relative!important;

  inset:auto!important;

  width:100%!important;
  max-width:610px!important;

  margin:
    20px
    0
    0!important;

  transform:none!important;

}


.vita-blog .blog-card > .blog-card-link{

  grid-row:5!important;

  position:relative!important;

  inset:auto!important;

  width:max-content!important;

  margin:
    26px
    0
    0!important;

  transform:none!important;

}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

.vita-blog .blog-card-image{

  aspect-ratio:
    1.48!important;

  overflow:hidden!important;

}


.vita-blog .blog-card-image img{

  position:relative!important;

  inset:auto!important;

  width:100%!important;
  height:100%!important;

  object-fit:cover!important;

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:700px){

  .vita-blog .blog-grid{

    grid-template-columns:
      1fr!important;

    row-gap:
      82px!important;

  }


  .vita-blog .blog-card{

    padding-bottom:0!important;

  }


  .vita-blog .blog-card-meta{

    margin-top:17px!important;

  }


  .vita-blog .blog-card h2{

    margin-top:15px!important;

  }


  .vita-blog .blog-card > p{

    margin-top:16px!important;

  }


  .vita-blog .blog-card > .blog-card-link{

    margin-top:22px!important;

  }

}


/* === BLOG GRID SPACING FIX END === */


/* === BLOG TOPIC IMAGE POLISH === */

.vita-blog .blog-card-image img,
.vita-article .article-image img{
  object-fit:cover;
}

/* Assessment */
img[src*="blog-first-physio"]{
  object-position:center 42%!important;
}

/* Lower back */
img[src*="blog-low-back"]{
  object-position:center 48%!important;
}

/* Knee */
img[src*="blog-knee-oa"]{
  object-position:center 52%!important;
}

/* Neck */
img[src*="blog-neck-pain"]{
  object-position:center 46%!important;
}