/* Shared layout and tokens come from the verified therapy catalog; only course art differs. */
.generic-course-art>img{object-fit:contain;padding:12px 15px 28px}.detail-image.generic-course-art>img{padding:35px}
@media(max-width:600px){.detail-image.generic-course-art>img{padding:16px 24px 28px}}

.education-page {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.education-page .store-main {
  flex: 1;
  min-height: 0;
  margin-block: 0;
  padding-block: 0 clamp(18px, 3vh, 34px);
}
.education-page .store-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  padding: 0 0 10px;
}
.education-page .store-intro h1 {
  font-size: clamp(34px, 4vw, 56px);
}
.education-page .intro-visual {
  display: block;
  width: min(37%, 430px);
  height: clamp(116px, 21vh, 215px);
  margin: 0;
  object-position: right center;
}
.education-page .product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.65vw, 24px);
}
.education-page .art-link .product-art {
  width: 100%;
  aspect-ratio: 2.25;
  max-height: clamp(140px, 25vh, 260px);
}
.education-page .course-art-panorama {
  display: grid;
  place-items: center;
  isolation: isolate;
  background: #302530;
}
.education-page .course-art-panorama::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  background: var(--course-cover) center / cover no-repeat;
  filter: blur(16px) brightness(.62);
}
.education-page .art-link .course-art-panorama > img {
  width: auto;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.education-page .product-copy {
  padding: clamp(12px, 1.6vw, 20px) clamp(10px, 1.3vw, 18px) 10px;
}
.education-page .product-copy h3 {
  font-size: clamp(19px, 1.85vw, 27px);
  line-height: 1.2;
}
.education-page .product-copy .product-category {
  margin-bottom: 7px;
}
.education-page .product-copy .product-description {
  min-height: 0;
  margin: 9px 0 12px;
  line-height: 1.48;
}
.education-page .course-card-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: auto 0 12px;
}
.education-page .course-card-meta .product-price {
  margin-left: auto;
}
.education-page .course-card-meta .product-price strong {
  color: var(--store-rose);
  font-weight: 650;
  white-space: nowrap;
}
.education-page .course-card-meta .course-card-duration {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #765c6b;
}
.education-page .course-card-meta + .detail-link {
  margin-top: 0;
}
.education-page .store-footer {
  padding-block: 14px;
}

@media (min-width: 601px) and (max-height: 800px) {
  .education-page .intro-visual {
    height: clamp(90px, 15vh, 120px);
  }
  .education-page .art-link .product-art {
    max-height: clamp(125px, 22vh, 176px);
  }
  .education-page .store-main {
    padding-bottom: 14px;
  }
}

@media (min-width: 1100px) and (min-height: 950px) {
  .education-page .intro-visual {
    height: min(25vh, 270px);
  }
  .education-page .store-intro {
    padding-bottom: 18px;
  }
  .education-page .product-copy .product-description {
    font-size: 15px;
    margin-bottom: 20px;
  }
  .education-page .course-card-meta .course-card-duration {
    font-size: 14px;
  }
}

@media (max-width: 600px) {
  .education-page .intro-visual {
    width: min(43%, 156px);
    height: 84px;
  }
  .education-page .store-intro h1 {
    font-size: clamp(28px, 8vw, 34px);
  }
  .education-page .product-grid {
    grid-template-columns: 1fr;
  }
  .education-page .art-link .product-art {
    aspect-ratio: 16/9;
    max-height: none;
  }
  .education-page .art-link .course-art-panorama > img {
    mask-image: none;
  }
  .education-page .product-copy {
    padding: 14px 10px 8px;
  }
  .education-page .store-footer {
    gap: 10px;
  }
}

.education-page .detail-topics-title{margin:20px 0 10px;font-size:17px;color:var(--store-ink)}
.education-page .detail-features{margin:0 0 16px}
.education-page .detail-topic strong{display:block;color:var(--store-ink);font-size:14px}
.education-page .detail-topic span{display:block;margin-top:3px}
.education-page .detail-audience{margin:0 0 20px;font-size:13px;line-height:1.65;color:#755664}
.education-page .product-art.course-art-contain{background:#102b41}
.education-page .product-art.course-art-contain>img{object-fit:contain;object-position:center}

/* Course covers are landscape compositions: never stretch them to the text column's height. */
.education-page .product-art:not(.detail-image):not(.generic-course-art)>img{object-position:64% center}
.education-page .product-art.course-art-contain:not(.detail-image)>img{object-position:center}
.education-page .detail-dialog{width:min(1020px,calc(100vw - 40px));overflow:hidden}
.education-page .detail-layout{grid-template-columns:40% 60%;align-items:start;background:#fbf8f6;max-height:calc(100svh - 50px);overflow:auto;overscroll-behavior:contain}
.education-page #detail-art{background:#342a33;align-self:stretch;min-width:0}
.education-page .detail-image{height:auto;min-height:0;aspect-ratio:auto;position:sticky;top:0;background:transparent;overflow:visible}
.education-page .detail-image>img{width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain;object-position:center;transform:none}
.education-page .course-visual-info{padding:26px 28px 30px;color:#f5eaf0}
.education-page .course-duration-label{display:block;color:#d4bbc8;font-size:12px;line-height:1.5}
.education-page .course-duration-value{display:block;margin-top:6px;font-size:22px;font-weight:500;line-height:1.4;letter-spacing:-.025em}
.education-page .course-section-count{display:block;margin-top:7px;color:#d4bbc8;font-size:12px}
.education-page .course-contribution{margin-top:28px;padding-top:23px;border-top:1px solid #ffffff26}
.education-page .course-contribution h3{margin:0 0 10px;font-size:16px;line-height:1.5;font-weight:500;color:#fff5f9}
.education-page .course-contribution p{margin:0;color:#e4d1db;font-size:14px;line-height:1.75}
.education-page .detail-content{padding:50px 34px 30px}
@media(max-width:700px){
  .education-page .detail-dialog{width:calc(100vw - 24px);max-height:calc(100svh - 24px)}
  .education-page .detail-layout{display:block;max-height:calc(100svh - 26px)}
  .education-page .detail-image{position:static}
  .education-page .course-visual-info{padding:20px 24px 24px}
  .education-page .course-duration-value{font-size:20px}
  .education-page .course-contribution{margin-top:18px;padding-top:18px}
  .education-page .detail-content{padding:26px 24px}
  .education-page .detail-content h2{font-size:27px}
}
@media(max-width:700px),(max-height:800px){
  .education-page .detail-dialog{padding-top:56px}
  .education-page .detail-dialog::before{content:"";position:absolute;inset:0 0 auto;height:55px;background:#fbf8f6;border-bottom:1px solid #e6dbe1;z-index:2}
  .education-page .detail-close{top:6px;right:12px}
  .education-page .detail-layout{max-height:calc(100svh - 106px)}
}
@media(max-width:700px){.education-page .detail-layout{max-height:calc(100svh - 82px)}}