/* Classroom cover: copy and academic illustration occupy separate grid areas. */
.ix2-merged .classroom-cover { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(36px, 5vw, 100px); isolation: isolate; min-height: calc(100svh - 80px); padding: clamp(48px, 6vh, 76px) clamp(24px, 7vw, 118px) clamp(58px, 7vh, 84px); overflow: hidden; background: #eeefec; color: #14231d; }
.classroom-cover::before { content: none; }
.classroom-cover-wave { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: clamp(110px, 18vw, 210px); fill: #f8f5ed; pointer-events: none; }
.classroom-cover-copy { position: relative; z-index: 2; width: 100%; max-width: 760px; margin: 0; text-align: left; }
.ix2-merged .classroom-cover .eyebrow { margin: 0 0 15px; color: #0a7759; font-size: clamp(.65rem, .85vw, .85rem); font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.ix2-merged .classroom-cover h1 { max-width: 760px; margin: 0; color: #14231d; font: 500 clamp(3.45rem, 4.4vw, 5.7rem)/.95 "Newsreader", Georgia, serif; letter-spacing: -.055em; text-wrap: balance; }
.ix2-merged .classroom-cover h1 em { display: inline; color: #1475ca; font-weight: 400; }
.classroom-cover-underline { display: block; width: min(300px, 58%); height: 16px; margin: 9px 0 18px 25%; fill: none; stroke: #ef766b; stroke-width: 4; stroke-linecap: round; }
.classroom-cover-lede { max-width: 620px !important; margin: 0 0 22px !important; color: #42534a !important; font-size: clamp(1rem, 1.25vw, 1.16rem) !important; line-height: 1.52 !important; }
.classroom-cover-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.classroom-cover-actions .button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 12px; padding: 13px 20px; border: 1px solid #164d3d; border-radius: 7px; background: #f8f5ed; color: #164d3d; text-align: center; text-decoration: none; font-size: .84rem; font-weight: 800; white-space: normal; }
.classroom-cover-actions .button--green { background: #0a5a42; color: #fff; }
.classroom-cover-actions .button:hover, .classroom-cover-actions .button:focus-visible { border-color: #14231d; background: #dfff65; color: #14231d; }
.classroom-cover-institution { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 17px; color: #50665b; font-size: .78rem; }
.classroom-cover-institution a { color: #07583f; font-weight: 800; text-decoration-color: #8cad9f; text-underline-offset: 4px; }
.classroom-cover-institution a:hover, .classroom-cover-institution a:focus-visible { color: #032f5d; text-decoration-thickness: 2px; }
.classroom-access-note { display: inline-flex; align-items: center; gap: 9px; max-width: 650px; margin: 14px 0 0; padding: 9px 13px; border-left: 3px solid #0a7759; background: #f8f5edaa; color: #435b4e; font-size: .74rem; font-weight: 700; line-height: 1.45; }
.classroom-access-note span { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #80a645; }
.classroom-cover-art { position: relative; z-index: 1; width: 100%; max-width: 620px; aspect-ratio: 1.06; justify-self: center; pointer-events: none; }
.classroom-cover-art::before { content: ""; position: absolute; inset: 8% 3% 6%; border: 1px solid rgba(23, 75, 59, .16); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f9f7f0 0, #e8efe9 72%); }
.classroom-cover-symbol { position: absolute; z-index: 1; height: auto; fill: none; stroke: #24362e; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.classroom-cover-symbol--books { top: 14%; left: 8%; width: 45%; transform: rotate(-8deg); }
.classroom-cover-symbol--writing { top: 10%; right: 7%; width: 38%; transform: rotate(10deg); }
.classroom-cover-symbol--ruler { top: 45%; left: 18%; width: 55%; transform: rotate(-7deg); }
.classroom-cover-symbol--graduation { right: 9%; bottom: 10%; width: 43%; transform: rotate(7deg); }
.classroom-cover-scroll { position: absolute; right: clamp(24px, 7vw, 118px); bottom: 23px; display: flex; align-items: center; gap: 9px; color: #235442; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.classroom-cover-scroll span { font-size: 1.3rem; }
@media (max-width: 1200px) { .ix2-merged .classroom-cover { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 30px; } .ix2-merged .classroom-cover h1 { font-size: clamp(3.2rem, 4.8vw, 4.6rem); } .classroom-cover-art { max-width: 470px; } }
@media (max-width: 900px) { .ix2-merged .classroom-cover { grid-template-columns: minmax(0, 1fr); min-height: calc(100svh - 70px); padding: 54px clamp(20px, 6vw, 48px) 70px; } .classroom-cover-art { display: none; } .ix2-merged .classroom-cover h1 { max-width: 740px; font-size: clamp(3.5rem, 7.2vw, 5.1rem); } }
@media (max-width: 700px) { .ix2-merged .classroom-cover { min-height: calc(100svh - 60px); padding: 42px 19px 62px; } .classroom-cover-wave { height: 100px; } .ix2-merged .classroom-cover h1 { font-size: clamp(2.8rem, 9.2vw, 4rem); } .classroom-cover-underline { width: 50%; margin-left: 35%; } .classroom-cover-lede { font-size: .98rem !important; } .classroom-cover-actions { display: grid; grid-template-columns: 1fr; } .classroom-cover-actions .button { min-height: 48px; } .classroom-cover-institution { margin-top: 15px; } .classroom-access-note { margin-bottom: 16px; font-size: .68rem; } .classroom-cover-scroll { right: 19px; bottom: 15px; font-size: .6rem; } }
@media (max-width: 410px) { .ix2-merged .classroom-cover { padding-top: 32px; } .ix2-merged .classroom-cover h1 { font-size: clamp(2.65rem, 10vw, 3.25rem); } .classroom-cover-scroll { left: 19px; right: auto; } }
@media (max-height: 720px) and (min-width: 901px) { .ix2-merged .classroom-cover { grid-template-columns: minmax(0, 1fr); padding-block: 28px 46px; } .classroom-cover-art { display: none; } .ix2-merged .classroom-cover h1 { max-width: 780px; font-size: clamp(3.2rem, 5.2vw, 5rem); } .classroom-cover-lede { margin-bottom: 12px !important; } .classroom-access-note { margin-top: 9px; } }
