@import url('./course-core.css');

/* r36 — each image has a clear role: classroom = teaching proof, work = portfolio, documents = evidence */
.course-hero{position:relative;isolation:isolate;overflow:hidden}
.course-hero:has(img[src="images-optimized/hero_background_1.webp"])::before{content:'';position:absolute;inset:0;background:url('images-optimized/hero_background_1.webp') 72% 30%/cover no-repeat;opacity:.045;filter:saturate(.72);z-index:-2}
.course-hero:has(img[src="images-optimized/hero_background_1.webp"])::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.998),rgba(255,255,255,.95) 62%,rgba(255,255,255,.86));z-index:-1}
.course-hero-media:has(img[src^="images-optimized/hero_background_"]){display:block;width:360px;height:224px;justify-self:end;overflow:hidden;background:#e7eef1;border-top:2px solid #173f55;border-bottom:1px solid #d8e2e6}
.course-hero-media:has(img[src^="images-optimized/hero_background_"]) figure{display:none}
.course-hero-media:has(img[src^="images-optimized/hero_background_"]) figure:has(img:not([src^="images-optimized/hero_background_"])){display:block;width:100%;height:224px}
.course-hero-media:has(img[src^="images-optimized/hero_background_"]) img:not([src^="images-optimized/hero_background_"]){display:block;width:100%;height:100%;object-fit:cover;object-position:center 34%}
.course-hero-media:has(img[src^="images-optimized/hero_background_"]) figcaption{display:block}

/* art: the work itself is the visual evidence */
.art-hero{position:relative;isolation:isolate}
.art-hero::before{content:'';position:absolute;inset:0 0 0 70%;background:url('images-optimized/hero_background_5.webp') center 34%/cover no-repeat;opacity:.035;z-index:-1}
.art-hero .course-hero-media{width:410px;height:300px;display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:147px 147px;gap:6px;border:0;background:transparent}
.art-hero .course-hero-media figure{display:block;position:relative;margin:0;overflow:hidden;border:1px solid #dbe4e8;background:#eef2f4}
.art-hero .course-hero-media>figure:first-child{grid-row:1/3;height:auto}
.art-hero .course-hero-media img{width:100%;height:100%;object-fit:cover}
.art-hero .course-hero-media figcaption{position:absolute;left:0;bottom:0;padding:5px 8px;background:rgba(16,47,67,.82);color:#fff;font-size:9.5px;font-weight:700}

.student-portfolio{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:132px;gap:7px;grid-auto-flow:dense}
.student-portfolio figure,.teacher-portfolio figure{position:relative;margin:0;overflow:hidden;background:#e5ebee;border:1px solid #dde6ea}
.student-portfolio img,.teacher-portfolio img{width:100%;height:100%;object-fit:cover}
.student-portfolio figcaption,.teacher-portfolio figcaption{position:absolute;left:0;bottom:0;padding:5px 8px;background:rgba(16,47,67,.82);color:#fff;font-size:9.5px;font-weight:700}
.student-portfolio figure:nth-child(1){grid-column:span 5;grid-row:span 2}.student-portfolio figure:nth-child(2){grid-column:span 4;grid-row:span 2}.student-portfolio figure:nth-child(3){grid-column:span 3}.student-portfolio figure:nth-child(4){grid-column:span 3}.student-portfolio figure:nth-child(5){grid-column:span 3}
.teacher-portfolio{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:104px;gap:7px;grid-auto-flow:dense}
.teacher-portfolio figure:nth-child(1){grid-column:span 4;grid-row:span 2}.teacher-portfolio figure:nth-child(2){grid-column:span 3;grid-row:span 2}.teacher-portfolio figure:nth-child(3){grid-column:span 3}.teacher-portfolio figure:nth-child(4){grid-column:span 2}.teacher-portfolio figure:nth-child(5){grid-column:span 3}.teacher-portfolio figure:nth-child(6){grid-column:span 2}.teacher-portfolio figure:nth-child(7){grid-column:span 3;grid-row:span 2}.teacher-portfolio figure:nth-child(8){grid-column:span 3}.teacher-portfolio figure:nth-child(9){grid-column:span 3}.teacher-portfolio figure:nth-child(10){grid-column:span 3}.teacher-portfolio figure:nth-child(11){grid-column:span 3}.teacher-portfolio figure:nth-child(12){grid-column:span 3}
.portfolio-note{margin:12px 0 0;color:#71858e;font-size:11px}

/* school case — preserve the native width of text-heavy screenshots */
.school-hero{background:linear-gradient(180deg,#fcfdfe,#f5f9fa)}
.school-hero-case{justify-self:end;width:min(100%,430px);background:#fff;border-top:2px solid #173f55;border-bottom:1px solid #cad7dd;box-shadow:0 14px 34px rgba(23,63,85,.055)}
.school-hero-feature{position:relative;margin:0;padding:12px;background:#f4f8f9;border-bottom:1px solid #d9e3e7}
.school-hero-feature img{display:block;width:100%;height:auto;aspect-ratio:480/234;object-fit:contain;background:#fff;border:1px solid #dbe4e8}
.school-hero-feature figcaption{position:absolute;left:20px;bottom:20px;padding:5px 8px;background:rgba(16,47,67,.88);color:#fff;font-size:9.5px;font-weight:800}
.school-hero-result{padding:15px 18px 17px}.school-hero-result small{display:block;color:#6e838c;font-size:10px;font-weight:800}.school-hero-result strong{display:block;margin-top:4px;color:#173f55;font-size:29px;line-height:1.1}.school-hero-result p{margin:3px 0 0;color:#6d7f87;font-size:10.8px}.school-hero-result>div{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.school-hero-result b{padding:3px 6px;border:1px solid #cedbe0;color:#315767;font-size:9.8px;background:#fff}
.school-prep-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid #173f55;border-bottom:1px solid #d6e0e5;background:#fff}.school-prep-grid>div{padding:19px 21px;border-right:1px solid #dbe4e8}.school-prep-grid>div:last-child{border-right:0}.school-prep-grid small{display:block;color:#8b9da5;font-size:10px;font-weight:800}.school-prep-grid b{display:block;margin-top:4px;color:#315767;font-size:13px}.school-prep-grid span{display:block;margin-top:4px;color:#70838c;font-size:11px;line-height:1.55}
.school-case-section .case-report{margin-bottom:0}
.school-proof-block{margin-top:30px;padding-top:25px;border-top:1px solid #c9d6dc}.school-proof-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:18px}.school-proof-heading>div span{display:block;color:#6f8790;font-size:10px;font-weight:800}.school-proof-heading h3{margin:4px 0 0;color:#173f55;font-size:22px}.school-proof-heading p{margin:0;max-width:500px;color:#70838c;font-size:11px;line-height:1.65;text-align:right}
.evidence-group+.evidence-group{margin-top:28px}.evidence-group>header{display:flex;align-items:center;gap:12px;margin-bottom:11px;padding-bottom:8px;border-bottom:1px solid #d8e2e6}.evidence-group>header span{color:#8699a1;font-size:9.5px;font-weight:800;letter-spacing:.05em}.evidence-group>header b{color:#315767;font-size:12.5px}

.evidence-cover-row{display:grid;grid-template-columns:320px minmax(0,1fr);gap:28px;align-items:center;margin:0;padding:20px;background:#fff;border:1px solid #d7e1e6;border-top:3px solid #648899}
.evidence-cover-image{display:block;width:320px;max-width:100%;padding:0;background:#f5f8f9}.evidence-cover-image img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto;background:#fff}
.evidence-cover-row figcaption{padding-right:20px}.evidence-cover-row small{display:block;color:#82969f;font-size:10px;font-weight:800}.evidence-cover-row b{display:block;margin-top:6px;color:#254e61;font-size:18px;line-height:1.45}.evidence-cover-row span{display:block;margin-top:8px;color:#687e88;font-size:12px;line-height:1.7}.evidence-cover-row em{display:block;margin-top:14px;color:#2f7895;font-size:11px;font-style:normal;font-weight:800}

.school-proof-grid{display:grid;gap:12px;align-items:start}.question-proof-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.result-proof-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.school-proof-grid figure{position:relative;margin:0;background:#fff;border:1px solid #d7e1e6;overflow:hidden}.evidence-image-link{display:flex;align-items:flex-start;justify-content:center;width:100%;padding:14px;background:#f4f7f8;border-bottom:1px solid #e0e7ea}.evidence-image-link img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto;background:#fff;image-rendering:auto}.school-proof-grid figcaption{padding:11px 13px 13px;background:#fff}.school-proof-grid figcaption small{display:block;color:#879aa2;font-size:9.5px;font-weight:800;letter-spacing:.04em}.school-proof-grid figcaption b{display:block;margin-top:2px;color:#254e61;font-size:12.5px}.school-proof-grid figcaption span{display:block;margin-top:3px;color:#71838b;font-size:10.5px;line-height:1.45}.school-proof-grid .evidence-result{border-top:3px solid #173f55}.school-proof-grid .evidence-question{border-top:3px solid #91aab5}
.evidence-summary-card{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:14px;margin-bottom:12px;padding:16px 20px;background:#173f55;color:#fff;border-top:3px solid #8eb0bf}.evidence-summary-card small{grid-column:1/4;color:#9fb8c3;font-size:10px;font-weight:800}.evidence-summary-card strong{font-size:35px;line-height:1}.evidence-summary-card b{font-size:13px}.evidence-summary-card p{margin:0;color:#d7e4e9;font-size:10.5px;text-align:right}
.school-case-method{display:grid;grid-template-columns:repeat(3,1fr);margin-top:24px;border-top:1px solid #cad8de;border-bottom:1px solid #cad8de}.school-case-method>div{padding:14px 16px;border-right:1px solid #dbe4e8}.school-case-method>div:last-child{border-right:0}.school-case-method small{display:block;color:#8a9ba2;font-size:9.5px;font-weight:800}.school-case-method b{display:block;margin-top:3px;color:#315767;font-size:12px}.school-case-method span{display:block;margin-top:3px;color:#72858e;font-size:10.5px;line-height:1.5}

@media(max-width:1080px){
  .course-hero-media:has(img[src^="images-optimized/hero_background_"]){justify-self:start;width:min(100%,420px)}
  .art-hero .course-hero-media{justify-self:start;width:min(100%,460px)}
  .school-hero-case{justify-self:start;width:min(100%,560px)}
  .question-proof-grid,.result-proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .question-proof-grid figure:first-child{grid-column:1/3}
}
@media(max-width:760px){
  .student-portfolio{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}.student-portfolio figure,.student-portfolio figure:nth-child(n){grid-column:auto;grid-row:auto}.student-portfolio figure:first-child{grid-column:1/3}
  .teacher-portfolio{grid-template-columns:repeat(3,1fr);grid-auto-rows:138px}.teacher-portfolio figure,.teacher-portfolio figure:nth-child(n){grid-column:auto;grid-row:auto}.teacher-portfolio figure:first-child{grid-column:span 2;grid-row:span 2}.teacher-portfolio figure:nth-child(7){grid-row:span 2}
  .school-prep-grid{grid-template-columns:1fr}.school-prep-grid>div{border-right:0;border-bottom:1px solid #dbe4e8}.school-prep-grid>div:last-child{border-bottom:0}.school-proof-heading{display:block}.school-proof-heading p{margin-top:7px;text-align:left}
  .evidence-cover-row{grid-template-columns:250px minmax(0,1fr);gap:20px}.evidence-cover-image{width:250px}.evidence-cover-row b{font-size:16px}
  .question-proof-grid,.result-proof-grid{grid-template-columns:1fr}.question-proof-grid figure:first-child{grid-column:auto}.evidence-image-link{padding:12px}.school-case-method{grid-template-columns:1fr}.school-case-method>div{border-right:0;border-bottom:1px solid #dbe4e8}.school-case-method>div:last-child{border-bottom:0}
}
@media(max-width:620px){
  .course-hero-media:has(img[src^="images-optimized/hero_background_"]){width:100%;height:205px}.course-hero-media:has(img[src^="images-optimized/hero_background_"]) figure:has(img:not([src^="images-optimized/hero_background_"])){height:205px}
  .art-hero::before{display:none}.art-hero .course-hero-media{width:100%;height:286px;grid-template-rows:140px 140px}.student-portfolio{grid-auto-rows:142px}.teacher-portfolio{grid-template-columns:1fr 1fr;grid-auto-rows:126px}.teacher-portfolio figure:first-child{grid-column:1/3;grid-row:span 2}.teacher-portfolio figure:nth-child(7){grid-row:auto}
  .school-hero-case{width:100%}.school-hero-feature{padding:9px}.school-hero-feature figcaption{left:15px;bottom:15px}.school-hero-result strong{font-size:26px}
  .evidence-cover-row{grid-template-columns:1fr;padding:14px}.evidence-cover-image{width:min(100%,320px);justify-self:center}.evidence-cover-row figcaption{padding:0 2px 4px}.evidence-summary-card{grid-template-columns:auto 1fr;gap:8px 12px}.evidence-summary-card small{grid-column:1/3}.evidence-summary-card p{grid-column:1/3;text-align:left}.evidence-image-link{padding:10px}
}