/* HẢI VŨ PIANO ACADEMY — ABRSM ARTICLE PARITY V41
   Purpose:
   - Make ABRSM article pages use the same reading width/rhythm as the approved
     Tác phẩm / Lịch sử knowledge articles.
   - Fix Vietnamese typography by using the site's sans-serif stack, not Georgia.
   - Keep article body large and readable.
*/

body.hvab40-page{
  --hv41-ink:#173a54;
  --hv41-muted:#687c8b;
  --hv41-line:rgba(23,58,84,.13);
  --hv41-gold:#ae6f1d;
  --hv41-red:#a92a2f;
}

/* The approved knowledge articles use a much wider desktop canvas.
   V40's 1220px wrapper was the main reason ABRSM looked squeezed at 75% zoom. */
body.hvab40-page .hvab40-wrap{
  width:min(1560px,calc(100% - 56px)) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ----- ARTICLE HERO ----- */
body.hvab40-page .hvab40-article{
  padding-top:20px !important;
}

body.hvab40-page .hvab40-breadcrumb{
  margin-bottom:12px !important;
}

body.hvab40-page .hvab40-hero{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 360px !important;
  gap:54px !important;
  align-items:end !important;
  width:100% !important;
  padding-bottom:24px !important;
  border-bottom:1px solid var(--hv41-line) !important;
}

/* Vietnamese-safe typography.
   Do not use Georgia here: use the same sans-serif family as the website. */
body.hvab40-page .hvab40-article-title,
body.hvab40-page .hvab40-article-title.is-long{
  width:auto !important;
  max-width:1120px !important;
  margin:8px 0 0 !important;
  color:var(--hv41-ink) !important;
  font-family:inherit !important;
  font-size:48px !important;
  font-weight:600 !important;
  line-height:1.12 !important;
  letter-spacing:-.025em !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  white-space:normal !important;
  text-rendering:optimizeLegibility !important;
}

body.hvab40-page .hvab40-context{
  width:360px !important;
  max-width:360px !important;
  min-width:0 !important;
  padding-left:26px !important;
  border-left:1px solid var(--hv41-line) !important;
  box-sizing:border-box !important;
}

/* ----- ARTICLE BODY ----- */
body.hvab40-page .hvab40-content-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 330px !important;
  gap:64px !important;
  align-items:start !important;
  width:100% !important;
  max-width:none !important;
  padding-top:24px !important;
}

body.hvab40-page .hvab40-content-grid > div:first-child{
  min-width:0 !important;
  width:100% !important;
}

body.hvab40-page .hvab40-prose{
  width:100% !important;
  max-width:1010px !important;
  min-width:0 !important;
  color:#344f61 !important;
  font-family:inherit !important;
  font-size:19px !important;
  font-weight:400 !important;
  line-height:1.78 !important;
  letter-spacing:0 !important;
  text-rendering:optimizeLegibility !important;
}

body.hvab40-page .hvab40-prose p{
  margin:0 0 22px !important;
}

body.hvab40-page .hvab40-rail{
  width:330px !important;
  max-width:330px !important;
  position:sticky !important;
  top:86px !important;
}

/* Index remains compact, but use the same wider desktop canvas. */
body.hvab40-page .hvab40-index-grid,
body.hvab40-page .hvab40-control-grid,
body.hvab40-page .hvab40-part-grid{
  max-width:none !important;
}

body.hvab40-page .hvab40-index-title,
body.hvab40-page .hvab40-part-title{
  font-family:inherit !important;
  color:var(--hv41-ink) !important;
  font-weight:600 !important;
}

/* 14-inch laptops: reduce empty vertical space, never reduce reading text. */
@media (min-width:1100px) and (max-height:920px){
  body.hvab40-page .hvab40-wrap{
    width:min(1540px,calc(100% - 48px)) !important;
  }

  body.hvab40-page .hvab40-article{
    padding-top:14px !important;
  }

  body.hvab40-page .hvab40-breadcrumb{
    margin-bottom:8px !important;
  }

  body.hvab40-page .hvab40-hero{
    padding-bottom:17px !important;
  }

  body.hvab40-page .hvab40-article-title,
  body.hvab40-page .hvab40-article-title.is-long{
    font-size:44px !important;
    line-height:1.1 !important;
  }

  body.hvab40-page .hvab40-content-grid{
    padding-top:18px !important;
  }

  body.hvab40-page .hvab40-prose{
    font-size:19px !important;
    line-height:1.76 !important;
  }

  body.hvab40-page .hvab40-rail-link{
    padding:7px 0 !important;
  }
}

@media(max-width:1050px){
  body.hvab40-page .hvab40-wrap{
    width:min(100% - 36px,1000px) !important;
  }

  body.hvab40-page .hvab40-hero,
  body.hvab40-page .hvab40-content-grid{
    grid-template-columns:1fr !important;
  }

  body.hvab40-page .hvab40-context,
  body.hvab40-page .hvab40-rail{
    width:auto !important;
    max-width:none !important;
    position:static !important;
  }

  body.hvab40-page .hvab40-context{
    border-left:0 !important;
    border-top:1px solid var(--hv41-line) !important;
    padding:15px 0 0 !important;
  }
}

@media(max-width:700px){
  body.hvab40-page .hvab40-wrap{
    width:min(100% - 30px,700px) !important;
  }

  body.hvab40-page .hvab40-article-title,
  body.hvab40-page .hvab40-article-title.is-long{
    font-size:36px !important;
  }

  body.hvab40-page .hvab40-prose{
    font-size:17.5px !important;
    line-height:1.72 !important;
  }
}