/* Extensión editorial del sistema visual existente de TODASANA. */

.blog-page{
  min-height:100vh;
  background:var(--offwhite);
}

.blog-page main{display:block;}

.blog-nav{
  position:sticky;
  top:0;
  background:rgba(248,247,246,.97);
  border-bottom-color:var(--line);
}

.blog-nav .nav-burger{
  display:flex;
  margin-left:auto;
}

.blog-menu{padding:0;}

.blog-menu-inner{
  width:min(100% - var(--gutter),760px);
  margin-inline:auto;
  padding-block:clamp(2rem,6vw,4rem);
}

.blog-menu-label{
  margin:1.8rem 0 .45rem;
  color:var(--taupe);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.blog-menu-label:first-child{margin-top:0;}

.blog-menu .blog-menu-legal a{
  font-size:1rem;
  font-weight:400;
}

.blog-landing-head{
  padding-block:clamp(3.5rem,7vw,6.5rem);
  background:var(--cream);
  border-bottom:1px solid var(--line);
}

.blog-intro{max-width:820px;}

.blog-intro .h1{
  max-width:19ch;
  margin-top:.75rem;
}

.blog-intro .lead{
  max-width:680px;
  margin-top:1.25rem;
}

.blog-index{
  padding-block:clamp(3rem,7vw,6rem);
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.blog-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);}

.blog-card{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}

.blog-card-media{display:block;overflow:hidden;}

.blog-card-media img{
  width:100%;
  height:100%;
  min-height:390px;
  object-fit:cover;
  transition:transform .5s var(--ease);
}

.blog-card-media:hover img{transform:scale(1.015);}

.blog-card-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:clamp(2rem,4.5vw,4.25rem);
}

.blog-card h2{
  margin-top:.75rem;
  font-size:clamp(1.55rem,1.05rem + 1.7vw,2.35rem);
  font-weight:300;
  line-height:1.25;
  color:var(--charcoal);
}

.blog-card h2 a:hover{color:var(--pink);}

.blog-card-excerpt{
  margin-top:1.15rem;
  color:var(--gray-warm);
  font-size:1.05rem;
  font-weight:300;
  line-height:1.75;
}

.blog-card-meta{
  margin-top:1.25rem;
  color:var(--taupe);
  font-size:.86rem;
}

.blog-card-link{
  margin-top:1.55rem;
  color:var(--charcoal);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-bottom:1px solid var(--charcoal);
}

.blog-card-link:hover{
  color:var(--pink);
  border-color:var(--pink);
}

.article-header{
  padding-block:clamp(3rem,7vw,6rem) clamp(2.5rem,5vw,4.5rem);
  background:var(--cream);
}

.article-header-inner{max-width:980px;}

.article-header .h1{
  max-width:22ch;
  margin-top:.8rem;
  font-size:clamp(2rem,1.15rem + 3.2vw,3.65rem);
}

.article-program{
  margin-top:.65rem;
  color:var(--charcoal);
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.5;
}

.article-program + .h1{margin-top:.5rem;}

.article-deck{
  max-width:800px;
  margin-top:1.4rem;
  color:var(--gray-warm);
  font-size:clamp(1.08rem,.85rem + .7vw,1.35rem);
  font-weight:300;
  line-height:1.75;
}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.15rem;
  margin-top:1.7rem;
  color:var(--taupe);
  font-size:.9rem;
}

.article-meta .article-author{
  color:var(--charcoal);
  font-weight:700;
}

.article-hero{
  width:min(100% - var(--gutter),var(--container));
  margin:clamp(2rem,5vw,4rem) auto 0;
}

.article-hero img{
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
}

.article-content{
  width:min(100% - var(--gutter),760px);
  margin-inline:auto;
  padding-block:clamp(3rem,7vw,6rem);
  color:var(--gray-warm);
  font-size:clamp(1.04rem,.96rem + .3vw,1.18rem);
  line-height:1.85;
}

.article-content h2{
  margin:clamp(2.8rem,6vw,4.25rem) 0 1.15rem;
  color:var(--charcoal);
  font-size:clamp(1.5rem,1.2rem + 1vw,2.05rem);
  font-weight:400;
  line-height:1.3;
}

.article-content h2:first-child{margin-top:0;}

.article-content p + p{margin-top:1.25rem;}

.article-content ul,
.article-content ol{
  margin:1.25rem 0 1.5rem;
  padding-left:1.4rem;
}

.article-content li{padding-left:.25rem;}
.article-content li + li{margin-top:.7rem;}
.article-content strong{color:var(--charcoal);font-weight:700;}
.article-content em{font-style:italic;}

.article-table-wrap{
  width:100%;
  margin:1.75rem 0 2rem;
  overflow-x:auto;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.article-comparison-table{
  width:100%;
  min-width:680px;
  border-collapse:collapse;
  color:var(--gray-warm);
  font-size:.96rem;
  line-height:1.55;
}

.article-comparison-table th,
.article-comparison-table td{
  padding:1rem 1.1rem;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}

.article-comparison-table th + th,
.article-comparison-table td + td{border-left:1px solid var(--line);}

.article-comparison-table thead th{
  color:var(--charcoal);
  background:var(--cream);
  font-weight:700;
}

.article-comparison-table tbody th{
  width:20%;
  color:var(--charcoal);
  font-weight:700;
}

.article-comparison-table tbody tr:last-child th,
.article-comparison-table tbody tr:last-child td{border-bottom:0;}

.article-checklist{
  list-style:none;
  padding-left:0 !important;
}

.article-checklist li{
  position:relative;
  padding-left:2rem;
}

.article-checklist li::before{
  content:"";
  position:absolute;
  left:0;
  top:.45em;
  width:.9rem;
  height:.9rem;
  border:1px solid var(--taupe);
  background:#fff;
}

.article-content .medical-note{
  margin:1.8rem 0 0;
  color:var(--charcoal);
  line-height:1.7;
}

.article-breathing-media{
  width:min(100%,520px);
  margin:2rem auto 2.4rem;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.article-breathing-media img{
  display:block;
  width:100%;
  height:auto;
}

.article-cta{
  background:var(--cream);
  border-top:1px solid var(--line);
  padding-block:clamp(3.5rem,7vw,6.5rem);
}

.article-cta-inner{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);
  align-items:center;
  gap:clamp(2.5rem,6vw,6rem);
  width:min(100% - var(--gutter),var(--container));
  margin-inline:auto;
}

.article-cta-content{max-width:650px;}

.article-cta h2{
  max-width:18ch;
  color:var(--charcoal);
  font-size:clamp(1.8rem,1.25rem + 1.8vw,2.8rem);
  font-weight:300;
  line-height:1.25;
}

.article-cta-copy{
  max-width:650px;
  margin-top:1.15rem;
  color:var(--gray-warm);
  font-size:clamp(1.05rem,.95rem + .35vw,1.2rem);
  line-height:1.8;
}

.article-cta .btn{margin-top:1.75rem;}

.article-cta-note{
  margin-top:.75rem;
  color:var(--taupe);
  font-size:.85rem;
}

.article-cta-media{
  margin:0;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.article-cta-media img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}

.article-resource-note{
  margin:0;
  padding:1.15rem var(--gutter);
  background:var(--offwhite);
  border-top:1px solid var(--line);
  color:var(--taupe);
  font-size:.76rem;
  line-height:1.6;
  text-align:center;
}

.blog-footer{
  padding-block:clamp(2rem,4vw,3rem);
  background:var(--offwhite);
  border-top:1px solid var(--line);
  color:var(--taupe);
  font-size:.82rem;
}

.blog-footer .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem 2rem;
}

.blog-footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem 1.1rem;
}

.blog-footer a:hover{color:var(--pink);}

@media(max-width:767px){
  .blog-card{grid-template-columns:1fr;}
  .blog-card-media img{min-height:0;aspect-ratio:3/2;}
  .blog-card-body{padding:1.6rem;}
  .article-header .h1{font-size:clamp(1.9rem,8vw,2.65rem);}
  .article-meta{display:grid;gap:.3rem;}
  .article-hero{width:100%;margin-top:0;}
  .article-content{padding-block:3.25rem;}
  .article-cta-inner{grid-template-columns:1fr;gap:2rem;}
  .article-cta .btn{width:100%;}
  .blog-footer .wrap{flex-direction:column;text-align:center;}
  .blog-footer-links{justify-content:center;}
}

@media(min-width:768px){
  .article-header .article-title-wide{max-width:27ch;}
}

@media(prefers-reduced-motion:reduce){
  .blog-card-media img{transition:none;}
  .article-breathing-media{display:none;}
}