/* Infochief Academy — blog listing refinements, Oct 2026.
   Scope all visual changes to this page to protect the shared site. */
.blog-index-page {
  font-size: 15px;
  color: #173b61;
  background: #f8fbff;
}
.blog-index-page :is(a,summary,button):focus-visible {
  outline: 3px solid #efad27;
  outline-offset: 3px;
}
/* Header: same compact information density as the current corporate pages. */
@media (min-width: 1021px) {
  .blog-index-page .site-header > .nav-wrap { gap: clamp(10px,1.15vw,18px); }
  .blog-index-page .site-header .primary-nav { margin-left: auto; min-width: 0; flex: 0 1 auto; }
  .blog-index-page .site-header .nav-actions { margin-left: 0; flex: 0 0 auto; }
  .blog-index-page .site-header .nav-list { gap: 2px; }
}
@media (min-width: 1021px) and (max-width: 1279px) {
  .blog-index-page .site-header .brand-logo { max-width: 214px; }
  .blog-index-page .site-header .nav-link { padding-left: 6px; padding-right: 6px; font-size: 11px; }
  .blog-index-page .site-header .nav-actions { gap: 5px; }
  .blog-index-page .site-header .nav-actions .btn-small { padding-left: 10px; padding-right: 10px; font-size: 11px; }
}
/* HERO — straightforward heading without decorative mini-label. */
.blog-index-page main > .hero {
  background: linear-gradient(115deg,#173e64 0%,#285b79 51%,#597f92 100%);
  padding: 45px 0 49px;
}
.blog-index-page .hero-inner {
  grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr);
  gap: clamp(30px,4vw,66px);
  align-items: center;
}
.blog-index-page .hero-copy { min-width:0; }
.blog-index-page .hero-copy h1,
.blog-index-page.course-detail-page .hero-copy h1 {
  font-size: clamp(34px,3.15vw,50px);
  line-height: 1.14;
  letter-spacing: -.024em;
  margin: 0 0 18px;
  max-width: 790px;
  text-wrap: balance;
  font-weight: 800;
}
.blog-index-page .hero-copy h1 span { display:block; color:#fff; }
.blog-index-page .hero-copy .hero-lead,
.blog-index-page .hero:not(.course-hero) .hero-lead {
  color:#f0f7ff;
  font-size: clamp(14px,1.04vw,16px);
  line-height: 1.7;
  margin:0 0 24px;
  max-width: 690px;
}
.blog-index-page .hero-visual { min-height: 290px; }
.blog-index-page .hero-visual img {
  width:100%; height: clamp(286px,24vw,376px);
  object-fit:cover; object-position: 50% center;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(6,32,59,.21);
}
.blog-index-page .hero-trust { padding-top: 19px; }
.blog-index-page .hero-trust div {
  flex: 1 1 0;
  min-width:0;
  margin-right: 17px;
  padding-right: 17px;
}
.blog-index-page .hero-trust div:last-child{margin-right:0;padding-right:0}
.blog-index-page .hero-trust strong {font-size: clamp(14px,1.17vw,18px);line-height:1.4;font-weight:800}
.blog-index-page .hero-trust span {font-size:12px;line-height:1.55;margin-top:5px;max-width:none;color:#e3eefb}
/* Topic library — spacious editorial cards and clean typography. */
.blog-index-page #chuyen-de {padding:60px 0 72px;background:linear-gradient(180deg,#fafdff 0%,#f3f8fe 100%)}
.blog-index-page #chuyen-de .section-head{margin:0 0 28px;align-items:flex-start}
.blog-index-page #chuyen-de .section-head h2 {
  color:#153f70;font-size:clamp(28px,2.4vw,38px);
  line-height:1.22;letter-spacing:-.028em;font-weight:800;margin:0;
}
.blog-index-page .blog-section-description {margin:11px 0 0;max-width:920px;color:#52677f;line-height:1.75;font-size:15px}
.blog-index-page #chuyen-de .testimonials-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:start;
}
.blog-index-page .blog-topic-card {
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:25px 25px 23px;
  border:1px solid #dce7f3;
  border-radius:17px;
  box-shadow:0 6px 23px rgba(22,65,108,.045);
  background:#fff;
  transition: border-color .22s ease,box-shadow .22s ease;
}
.blog-index-page .blog-topic-card:hover{border-color:#bbd3ec;box-shadow:0 11px 29px rgba(22,65,108,.09)}
.blog-index-page .blog-topic-card h2 {
  margin:0 0 13px;
  font-size:clamp(19px,1.58vw,23px);
  font-weight:800;
  line-height:1.4;
  letter-spacing:-.02em;
  color:#143f70;
  min-height:2.8em;
}
.blog-index-page .blog-topic-card h2 .n {
  display:inline-grid;
  width:35px;height:35px;
  margin:0 10px 0 0;
  vertical-align:3px;
  border-radius:50%;
  background:#f9b329;color:#123e6d;
  font-size:13px;letter-spacing:0;
}
.blog-index-page .blog-topic-card > p {
  color:#526982;
  font-size:14.5px;
  line-height:1.67;
  margin:0 0 17px;
  min-height:4.8em;
}
.blog-index-page .blog-topic-card .blog-topic-preview,
.blog-index-page .blog-topic-card .module-body ol {
  list-style:decimal outside;
  padding-left:23px;
  margin:0;
  color:#35628f;
  font-size:14px;
}
.blog-index-page .blog-topic-card .blog-topic-preview {
  padding:16px 18px 13px 37px;
  background:#f7faff;
  border:1px solid #e4edf7;
  border-bottom:0;
  border-radius:12px 12px 0 0;
  flex:1 0 auto;
}
.blog-index-page .blog-topic-card li {padding-left:3px;margin:0 0 11px;line-height:1.55}
.blog-index-page .blog-topic-card li:last-child {margin-bottom:0}
.blog-index-page .blog-topic-card .text-link {
  font-size:13px;
  line-height:1.55;
  font-weight:650;
  color:#123f65;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.blog-index-page .blog-topic-card .text-link:hover {color:#005e9a;text-decoration:underline;text-underline-offset:3px}
.blog-index-page .blog-topic-card .curriculum {display:block;margin:0}
.blog-index-page .blog-topic-card .curriculum details {
  border:1px solid #e4edf7;
  background:#f7faff;
  border-radius:0 0 12px 12px;
  overflow:hidden;
}
.blog-index-page .blog-topic-card .curriculum summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  padding:13px 17px;
  background:#edf4fc;
  color:#145088;
  font-size:13px;
  font-weight:800;
  line-height:1.45;
  list-style:none;
  transition:background .18s ease;
}
.blog-index-page .blog-topic-card .curriculum summary:hover{background:#e3effb}
.blog-index-page .blog-topic-card .curriculum summary::-webkit-details-marker{display:none}
.blog-index-page .blog-topic-card .blog-toggle-open{display:none}
.blog-index-page .blog-topic-card details[open] .blog-toggle-open{display:inline}
.blog-index-page .blog-topic-card details[open] .blog-toggle-closed{display:none}
.blog-index-page .blog-topic-card .blog-toggle-icon {
  flex:none;display:grid;place-items:center;
  width:24px;height:24px;border-radius:50%;
  background:#fff;color:#12619e;
  font-size:21px;font-weight:450;line-height:1;
}
.blog-index-page .blog-topic-card details[open] .blog-toggle-icon{transform:rotate(45deg)}
.blog-index-page .blog-topic-card .curriculum .module-body{padding:20px 17px 19px;background:#fff}
.blog-index-page .blog-topic-card .course-cta {
  display:inline-flex;align-items:center;
  margin-top:17px;
  color:#14598d;
  font-size:13px;
  font-weight:800;
  line-height:1.4;
}
.blog-index-page .blog-topic-card .course-cta:hover{color:#0076ba;text-decoration:underline;text-underline-offset:4px}
/* Final call-to-action */
.blog-index-page .cta-section{padding:0 0 65px;background:#f3f8fe}
.blog-index-page .cta-banner {background:linear-gradient(105deg,#194a7d,#31659f);padding:35px 40px;min-height:160px}
.blog-index-page .cta-banner h2 {font-size:clamp(23px,2.05vw,31px);line-height:1.3;letter-spacing:-.02em;margin:0 0 9px}
.blog-index-page .cta-banner p {font-size:14px;line-height:1.65;max-width:700px}
.blog-index-page .cta-banner .btn {font-size:14px}
@media(max-width:1120px){
 .blog-index-page #chuyen-de .testimonials-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .blog-index-page .hero-inner{gap:26px}
 .blog-index-page .hero-trust div{padding-right:10px;margin-right:10px}
}
@media(max-width:800px){
 .blog-index-page main > .hero{padding:42px 0 45px}
 .blog-index-page .hero-inner{grid-template-columns:1fr}
 .blog-index-page .hero-visual{display:none}
 .blog-index-page .hero-copy h1,.blog-index-page.course-detail-page .hero-copy h1{font-size:clamp(31px,5.6vw,43px)}
 .blog-index-page .hero-trust{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .blog-index-page .hero-trust div{padding:0;margin:0;border:0}
 .blog-index-page #chuyen-de{padding:43px 0 55px}
 .blog-index-page .blog-topic-card{padding:22px}
 .blog-index-page .blog-topic-card h2{font-size:21px;min-height:0}
 .blog-index-page .blog-topic-card > p{min-height:0}
 .blog-index-page .cta-banner{padding:28px}
}
@media(max-width:640px){
 .blog-index-page #chuyen-de .testimonials-grid{grid-template-columns:1fr;gap:15px}
 .blog-index-page main > .hero{padding:35px 0 37px}
 .blog-index-page .hero-copy h1,.blog-index-page.course-detail-page .hero-copy h1{font-size:clamp(29px,7.6vw,38px)}
 .blog-index-page .hero-copy .hero-lead{font-size:14px;line-height:1.66}
 .blog-index-page .hero-trust{grid-template-columns:1fr 1fr;gap:14px 16px}
 .blog-index-page .hero-trust div:last-child{grid-column:1/-1}
 .blog-index-page .hero-trust strong{font-size:14px}
 .blog-index-page .hero-trust span{font-size:11px}
 .blog-index-page #chuyen-de .section-head h2{font-size:28px}
 .blog-index-page .blog-section-description{font-size:14px}
 .blog-index-page .blog-topic-card{padding:20px}
 .blog-index-page .blog-topic-card .blog-topic-preview{padding:15px 13px 13px 30px}
 .blog-index-page .blog-topic-card .text-link{font-size:13.5px}
 .blog-index-page .blog-topic-card .curriculum .module-body{padding:16px 11px 17px}
 .blog-index-page .cta-banner{padding:25px 22px}
 .blog-index-page .cta-banner h2{font-size:23px}
}
@media (prefers-reduced-motion:reduce){.blog-index-page .blog-topic-card,.blog-index-page .blog-topic-card summary{transition:none}}
/* Override fixed-height generic hero rules in course-detail.css. */
.blog-index-page main > .hero:not(.course-hero) {
  height:auto;
  min-height:420px;
  max-height:none;
  overflow:hidden;
}
.blog-index-page main > .hero:not(.course-hero) .hero-inner {
  height:auto;
  min-height:0;
  align-items:center;
}
.blog-index-page main > .hero:not(.course-hero) .hero-copy {
  padding-top:0;
  align-self:center;
}
.blog-index-page main > .hero:not(.course-hero) .hero-visual {
  display:flex;
  height:auto;
  min-height:290px;
  align-items:center;
}
.blog-index-page main > .hero:not(.course-hero) .hero-visual img {
  height:clamp(286px,24vw,376px);
  max-height:none;
  object-fit:cover;
}
.blog-index-page .blog-topic-card h2 {
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.blog-index-page .blog-topic-card h2 .n {
  flex:0 0 35px;
  margin:0;
  vertical-align:baseline;
}
.blog-index-page .blog-topic-card .curriculum summary :is(.blog-toggle-closed,.blog-toggle-open){color:#145088;margin:0}
.blog-index-page .blog-topic-card .curriculum summary .blog-toggle-icon{color:#145088;margin:0}
@media(max-width:800px){
  .blog-index-page main > .hero:not(.course-hero){min-height:0}
  .blog-index-page main > .hero:not(.course-hero) .hero-visual{display:none}
}