/* =========================================================
   BLOG — DRA. WANUZIA MIRANDA
   Complementa o styles.css principal.
   ========================================================= */

.blog-page-body,
.article-page-body{
  min-height:100vh;
  background:
    linear-gradient(
      rgba(248,246,242,.88),
      rgba(248,246,242,.88)
    ),
    url('assets/background-vulva.png')
    center
    /cover
    fixed
    no-repeat;
}

.article-page-body{
  background:
    linear-gradient(
      rgba(248,246,242,.91),
      rgba(248,246,242,.91)
    ),
    url('../assets/background-vulva.png')
    center
    /cover
    fixed
    no-repeat;
}

/* =========================================================
   MENU
   ========================================================= */

.menu-open .menu a:nth-child(5){
  transition-delay:.39s;
}

/* =========================================================
   BLOG INDEX
   ========================================================= */

.blog-main{
  position:relative;
  z-index:1;
  width:min(1220px,88vw);
  margin:0 auto;
  padding:190px 0 120px;
}

.blog-hero{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:7vw;
  align-items:end;
  min-height:43vh;
  padding-bottom:80px;
}

.blog-kicker,
.article-kicker,
.article-category,
.blog-card-category,
.article-meta,
.article-share,
.article-back{
  font:500 9px/1.5 var(--nav);
  letter-spacing:.15em;
  text-transform:uppercase;
}

.blog-kicker{
  margin:0 0 28px;
  color:#777;
}

.blog-title{
  max-width:850px;
  margin:0;
  font:400 clamp(66px,8vw,128px)/.86 var(--serif);
  letter-spacing:-.065em;
}

.blog-title em{
  color:var(--gold);
  font-weight:400;
}

.blog-intro{
  max-width:360px;
  margin:0 0 9px;
  font:300 16px/1.75 var(--body);
}

.blog-list{
  border-top:1px solid rgba(5,5,5,.22);
}

.blog-card{
  position:relative;
  display:grid;
  grid-template-columns:70px 1fr 220px 38px;
  gap:32px;
  align-items:center;
  min-height:175px;
  padding:30px 0;
  border-bottom:1px solid rgba(5,5,5,.17);
  isolation:isolate;
  transition:
    padding .35s ease,
    color .35s ease;
}

.blog-card:before{
  position:absolute;
  z-index:-1;
  content:'';
  inset:0 -28px;
  background:rgba(255,255,255,.52);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}

.blog-card:hover:before{
  transform:scaleY(1);
}

.blog-card:hover{
  padding-left:18px;
  padding-right:18px;
}

.blog-card-number{
  align-self:start;
  padding-top:7px;
  font:500 9px var(--nav);
  letter-spacing:.14em;
}

.blog-card-title{
  max-width:690px;
  margin:0;
  font:400 clamp(30px,3.2vw,51px)/1.04 var(--serif);
  letter-spacing:-.047em;
}

.blog-card-info{
  align-self:center;
}

.blog-card-category{
  display:block;
  margin-bottom:13px;
  color:#777;
}

.blog-card-description{
  margin:0;
  color:#444;
  font:300 13px/1.65 var(--body);
}

.blog-card-arrow{
  font:300 25px/1 var(--body);
  transition:transform .3s ease;
}

.blog-card:hover .blog-card-arrow{
  transform:translate(6px,-5px);
}

/* =========================================================
   ARTIGO
   ========================================================= */

.article-main{
  position:relative;
  z-index:1;
  width:min(1180px,88vw);
  margin:0 auto;
  padding:190px 0 120px;
}

.article-header{
  display:grid;
  grid-template-columns:150px minmax(0,780px);
  gap:50px;
  justify-content:center;
  padding-bottom:80px;
}

.article-header-side{
  padding-top:12px;
}

.article-kicker{
  margin:0 0 18px;
  color:#777;
}

.article-category{
  color:var(--gold);
}

.article-title{
  max-width:840px;
  margin:0;
  font:400 clamp(55px,7vw,105px)/.92 var(--serif);
  letter-spacing:-.063em;
}

.article-subtitle{
  max-width:700px;
  margin:38px 0 0;
  font:400 clamp(21px,2vw,28px)/1.45 var(--serif);
  letter-spacing:-.025em;
}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin-top:42px;
  color:#777;
}

.article-rule{
  width:min(930px,100%);
  height:1px;
  margin:0 auto 75px;
  background:rgba(5,5,5,.2);
}

.article-layout{
  display:grid;
  grid-template-columns:150px minmax(0,690px);
  gap:50px;
  justify-content:center;
}

.article-side{
  position:relative;
}

.article-side-inner{
  position:sticky;
  top:140px;
  display:grid;
  gap:24px;
}

.article-back,
.article-share{
  display:inline-flex;
  width:max-content;
  padding-bottom:7px;
  border-bottom:1px solid rgba(5,5,5,.35);
}

.article-body{
  font:300 17px/1.9 var(--body);
}

.article-body > p:first-child{
  margin-top:0;
}

.article-body p{
  margin:0 0 27px;
}

.article-body h2{
  margin:68px 0 24px;
  font:400 clamp(31px,3.1vw,47px)/1.08 var(--serif);
  letter-spacing:-.045em;
}

.article-body h3{
  margin:42px 0 12px;
  font:400 25px/1.3 var(--serif);
  letter-spacing:-.03em;
}

.article-body strong{
  font-weight:500;
}

.article-highlight{
  margin:65px 0;
  padding:30px 0;
  border-top:1px solid rgba(5,5,5,.18);
  border-bottom:1px solid rgba(5,5,5,.18);
  font:400 clamp(27px,3vw,42px)/1.3 var(--serif);
  letter-spacing:-.038em;
}

.article-cta{
  width:min(930px,100%);
  margin:110px auto 0;
  padding:55px 0 0;
  border-top:1px solid rgba(5,5,5,.22);
}

.article-cta-small{
  margin:0 0 22px;
  font:500 9px var(--nav);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#777;
}

.article-cta-title{
  max-width:800px;
  margin:0;
  font:400 clamp(38px,5vw,72px)/1 var(--serif);
  letter-spacing:-.055em;
}

.article-cta-link{
  display:inline-flex;
  align-items:center;
  gap:32px;
  margin-top:37px;
  padding-bottom:8px;
  border-bottom:1px solid var(--black);
  font:500 9px var(--nav);
  letter-spacing:.13em;
  text-transform:uppercase;
}

.article-cta-link span{
  font:20px var(--body);
  transition:transform .25s ease;
}

.article-cta-link:hover span{
  transform:translateX(6px);
}

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

@media(max-width:800px){

  .blog-page-body,
  .article-page-body{
    background-attachment:scroll;
  }

  .blog-main,
  .article-main{
    width:86vw;
    padding-top:135px;
  }

  .blog-hero{
    grid-template-columns:1fr;
    min-height:0;
    gap:40px;
    padding-bottom:60px;
  }

  .blog-title{
    font-size:15vw;
  }

  .blog-intro{
    max-width:90%;
  }

  .blog-card{
    grid-template-columns:38px 1fr 24px;
    gap:14px;
    min-height:145px;
    padding:25px 0;
  }

  .blog-card-info{
    display:none;
  }

  .blog-card-title{
    font-size:8.2vw;
  }

  .blog-card:hover{
    padding-left:0;
    padding-right:0;
  }

  .blog-card:before{
    display:none;
  }

  .article-header{
    grid-template-columns:1fr;
    gap:17px;
    padding-bottom:55px;
  }

  .article-title{
    font-size:13.7vw;
  }

  .article-subtitle{
    margin-top:28px;
    font-size:23px;
  }

  .article-rule{
    margin-bottom:55px;
  }

  .article-layout{
    grid-template-columns:1fr;
    gap:35px;
  }

  .article-side-inner{
    position:static;
    display:flex;
    gap:22px;
  }

  .article-body{
    font-size:16px;
    line-height:1.85;
  }

  .article-body h2{
    margin-top:50px;
    font-size:36px;
  }

  .article-highlight{
    margin:50px 0;
    font-size:30px;
  }

  .article-cta{
    margin-top:75px;
  }

  .article-cta-title{
    font-size:10vw;
  }
}