/* codearts page-only layout, color, media and module styling. */

.codearts-training-page { overflow-x: hidden; color: #172c49; background: #fff; }

.codearts-training-page img { max-width: 100%; }

.codearts-hero { height: 430px; min-height: 430px; overflow: hidden; color: #fff; background-color: #031a43; background-image: url('/assets/images/training/codearts/hero.webp'); background-position: center; background-size: cover; background-repeat: no-repeat; }

.codearts-hero-inner { height: 430px; min-height: 430px; display: flex; align-items: center; }

.codearts-hero-copy { position: relative; z-index: 1; width: 42%; }

.codearts-hero-copy > span { color: #4bc9ff; font-weight: 600; letter-spacing: 1.2px; }

.codearts-hero-copy h1 { margin: 10px 0 8px; line-height: 1.15; letter-spacing: .2px; }

.codearts-hero-copy h2 { max-width: 580px; margin: 0; font-weight: 500; line-height: 1.55; }

.codearts-hero-copy p { max-width: 550px; margin: 15px 0 21px; color: #bdd2ea; line-height: 1.78; }

.codearts-hero-copy > div { display: flex; gap: 13px; }

.codearts-overview { padding: 55px 0 58px; background: #fff; }

.codearts-overview-grid { display: grid; grid-template-columns: minmax(0,30fr) minmax(0,70fr); align-items: center; gap: 34px; }

.codearts-overview-copy { min-width: 0; padding-right: 30px; border-right: 1px solid #dce9f7; }

.codearts-overview-copy h2 { margin: 0 0 14px; color: #172f53; line-height: 1.45; }

.codearts-overview-copy > p { margin: 0; color: #6a7c91; line-height: 1.8; }

.codearts-value-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 19px; }

.codearts-value-cards article { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid #d7e6f7; border-radius: 8px; background: #fbfdff; }

.codearts-value-cards b { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; color: #1478ee; border-radius: 50%; background: #edf6ff; }

.codearts-value-cards strong,.codearts-value-cards span { display: block; }

.codearts-value-cards strong { color: #27456e; }

.codearts-value-cards span { margin-top: 2px; color: #8190a3; }

.codearts-value-stream { min-width: 0; margin: 0; overflow: hidden; }

.codearts-value-stream img { width: 100%; height: auto; display: block; object-fit: contain; }

.codearts-courses { padding: 61px 0 68px; background: linear-gradient(180deg,#f1f8ff,#f8fbff); }

.codearts-courses .section-head { margin-bottom: 32px; }

.codearts-course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.codearts-course-card { min-width: 0; min-height: 190px; display: grid; grid-template-columns: minmax(0,48fr) minmax(0,52fr); align-items: stretch; overflow: hidden; border: 1px solid #cfe1f5; border-radius: 10px; background: #fff; box-shadow: 0 8px 22px rgba(28,83,151,.05); }

.codearts-course-featured { grid-column: 1/-1; min-height: 175px; grid-template-columns: minmax(0,35fr) minmax(0,65fr); }

.codearts-course-copy { min-width: 0; display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 4px; padding: 19px 15px 19px 19px; }

.codearts-course-copy > b { align-self: start; padding-top: 3px; color: #bed8f7; font-style: italic; line-height: 1; }

.codearts-course-copy h3 { margin: 0 0 8px; color: #193762; }

.codearts-course-copy p { margin: 8px 0 0; color: #6d7e92; line-height: 1.75; }

.codearts-tags { display: flex; flex-wrap: wrap; gap: 5px; }

.codearts-tags span { padding: 3px 7px; color: #317dce; border-radius: 10px; background: #edf6ff; line-height: 1; }

.codearts-course-card figure { min-width: 0; margin: 0; display: flex; align-items: center; justify-content: center; padding: 6px 10px; overflow: hidden; background: #fff; }

.codearts-course-card figure img { width: 100%; max-width: 100%; height: 175px; display: block; object-fit: cover; }

.codearts-course-featured figure img { height: 165px; object-fit: contain; }

.codearts-audience { padding: 57px 0 61px; background: #fff; }

.codearts-audience .section-head { margin-bottom: 27px; }

.codearts-audience-panel { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; border: 1px solid #d5e5f6; border-radius: 12px; background: linear-gradient(180deg,#fff,#f7fbff); box-shadow: 0 12px 28px rgba(28,83,151,.06); }

.codearts-audience-panel article { position: relative; min-height: 154px; padding: 25px 18px 18px; text-align: center; }

.codearts-audience-panel article:not(:last-of-type)::after { position: absolute; top: 51px; right: -22px; width: 44px; border-top: 2px dotted #9dc4ee; content: ""; }

.codearts-audience-panel img { width: 55px; height: 55px; object-fit: contain; }

.codearts-audience-panel h3 { margin: 9px 0 6px; color: #26436a; }

.codearts-audience-panel p { margin: 0; color: #7b8ba0; line-height: 1.65; }

.codearts-practice { padding: 58px 0 63px; background: #eef7ff; }

.codearts-practice .section-head { margin-bottom: 30px; }

.codearts-practice-panel { display: grid; grid-template-columns: minmax(0,48fr) minmax(0,27fr) minmax(0,25fr); overflow: hidden; border: 1px solid #cfe1f5; border-radius: 12px; background: #fff; box-shadow: 0 12px 28px rgba(28,83,151,.07); }

.codearts-practice-panel > figure { min-width: 0; margin: 0; padding: 16px; display: flex; align-items: center; }

.codearts-practice-panel > figure img { width: 100%; height: auto; display: block; object-fit: contain; }

.codearts-learning-path { margin: 0; padding: 27px 19px; display: grid; align-content: center; gap: 14px; list-style: none; border-left: 1px solid #e0ebf7; }

.codearts-learning-path li { display: flex; gap: 11px; }

.codearts-learning-path b { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #1375e8; }

.codearts-learning-path h3 { margin: 0 0 3px; color: #28466f; }

.codearts-learning-path p { margin: 0; color: #7d8da0; line-height: 1.55; }

.codearts-outcomes { margin: 26px 19px 26px 0; padding: 20px 18px; align-self: center; border: 1px solid #cde1f7; border-radius: 9px; background: #f9fcff; }

.codearts-outcomes h3 { margin: 0 0 14px; color: #3182da; text-align: center; }

.codearts-outcomes p { position: relative; margin: 0; padding: 8px 0 8px 25px; color: #5d7189; border-bottom: 1px solid #e8f0f8; }

.codearts-outcomes p:last-child { border-bottom: 0; }

.codearts-outcomes p::before { position: absolute; top: 7px; left: 0; width: 15px; height: 15px; display: grid; place-items: center; color: #12a8d8; border: 1.5px solid #53cbea; content: "✓"; font-weight: 700; }

.codearts-formats { padding: 58px 0 60px; background: #fff; }

.codearts-formats .section-head { margin-bottom: 29px; }

.codearts-format-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }

.codearts-format-grid article { position: relative; min-height: 160px; display: flex; align-items: center; gap: 18px; padding: 24px; border: 1px solid #d2e3f5; border-radius: 10px; background: #fff; box-shadow: 0 8px 21px rgba(28,83,151,.05); }

.codearts-format-grid article.is-recommended { border: 2px solid #4b93ed; box-shadow: 0 12px 27px rgba(41,117,212,.13); }

.codearts-format-grid em { position: absolute; top: -2px; left: -2px; padding: 7px 12px; color: #fff; border-radius: 9px 0 9px 0; background: #2279e8; font-style: normal; }

.codearts-format-grid img { width: 60px; height: 60px; flex: 0 0 auto; object-fit: contain; }

.codearts-format-grid h3 { margin: 0 0 8px; color: #1e3b67; }

.codearts-format-grid h3 span { margin-left: 8px; color: #4090e9; font-weight: 500; }

.codearts-format-grid p { margin: 0; color: #74859a; line-height: 1.72; }

.codearts-artifacts { margin-top: 14px; padding: 14px 24px; display: flex; align-items: center; justify-content: space-around; gap: 20px; color: #5f7690; border: 1px solid #d7e6f6; border-radius: 9px; background: #fbfdff; }

.codearts-artifacts b { color: #27466f; }

.codearts-artifacts span { color: #397fcc; }

.codearts-process { padding: 56px 0 62px; background: #fff; }

.codearts-process .section-head { margin-bottom: 34px; }

.codearts-process-track { position: relative; margin: 0; padding: 0 20px; display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; list-style: none; }

.codearts-process-track::before { position: absolute; z-index: 0; top: 19px; right: 8.333%; left: 8.333%; height: 2px; content: ""; background: #9bc4f1; }

.codearts-process-track li { position: relative; text-align: center; }

.codearts-process-track b { position: relative; z-index: 1; width: 40px; height: 40px; margin: 0 auto 12px; display: grid; place-items: center; color: #fff; border: 5px solid #fff; border-radius: 50%; background: #1674e5; box-shadow: 0 0 0 1px #bcd8f6; }

.codearts-process-track h3 { margin: 0 0 5px; color: #27466d; }

.codearts-process-track p { max-width: 125px; margin: 0 auto; color: #7b8ca1; line-height: 1.55; }

.codearts-trust { padding: 0 0 14px; background: #fff; }

.codearts-trust-inner { padding: 31px 36px 34px; color: #fff; border-radius: 11px; background: radial-gradient(circle at 50% 0,#0a438d,#021d48 72%); box-shadow: 0 14px 34px rgba(4,42,94,.16); }

.codearts-trust h2 { margin: 0 0 27px; text-align: center; }

.codearts-trust-inner > div { display: grid; grid-template-columns: repeat(4,1fr); }

.codearts-trust article { text-align: center; border-right: 1px solid rgba(80,204,255,.28); }

.codearts-trust article:last-child { border-right: 0; }

.codearts-trust img { width: 58px; height: 58px; object-fit: contain; }

.codearts-trust h3 { margin: 6px 0; color: #fff; }

.codearts-trust p { margin: 0; color: #a9c6e4; line-height: 1.7; }

.codearts-cta { padding: 34px 0; color: #fff; background: linear-gradient(90deg,#0975ed,#075bd0),url('/assets/images/cta-bg.webp') bottom/cover; }

.codearts-cta .page-shell { display: flex; align-items: center; justify-content: space-between; }

.codearts-cta h2 { margin: 0; }

.codearts-cta p { margin: 7px 0 0; color: #d7e8ff; }

.codearts-cta .button { min-width: 174px; color: var(--blue); background: #fff; box-shadow: 0 8px 20px rgba(0,40,110,.2); }

@media (max-width: 960px) {
.codearts-hero-copy { width: 50%; }
.codearts-overview-grid { grid-template-columns: 1fr; }
.codearts-overview-copy { padding-right: 0; padding-bottom: 25px; border-right: 0; border-bottom: 1px solid #dce9f7; }
.codearts-value-cards { max-width: 620px; }
.codearts-course-card { grid-template-columns: 1fr; }
.codearts-course-featured { grid-template-columns: minmax(0,40fr) minmax(0,60fr); }
.codearts-course-card figure { border-top: 1px solid #edf3fa; }
.codearts-practice-panel { grid-template-columns: 1fr 1fr; }
.codearts-practice-panel > figure { grid-column: 1/-1; max-width: 760px; margin: 0 auto; }
.codearts-learning-path { border-top: 1px solid #e0ebf7; border-left: 0; }
.codearts-outcomes { margin-top: 20px; }
.codearts-format-grid article { padding: 20px 16px; gap: 12px; }
.codearts-format-grid img { width: 50px; height: 50px; }
}

@media (max-width: 700px) {
.codearts-hero,.codearts-hero-inner { height: 430px; min-height: 430px; }
.codearts-hero { background-image: linear-gradient(180deg,rgba(3,24,62,.98) 0,rgba(3,24,62,.94) 60%,rgba(3,24,62,.38) 78%),url('/assets/images/training/codearts/hero.webp'); background-position: center,75% bottom; background-size: 100% 100%,auto 175px; }
.codearts-hero-inner { align-items: flex-start; }
.codearts-hero-copy { width: 100%; padding-top: 25px; }
.codearts-hero-copy h1 { margin-top: 7px; }
.codearts-hero-copy h2 { max-width: 96%; }
.codearts-hero-copy p { max-width: 96%; margin: 8px 0 12px; line-height: 1.55; }
.codearts-hero-copy > div { flex-wrap: wrap; gap: 9px; }
.codearts-hero-copy .button { min-width: 126px; padding: 10px 15px; }
.codearts-overview,.codearts-courses,.codearts-audience,.codearts-practice,.codearts-formats,.codearts-process { padding-top: 48px; padding-bottom: 52px; }
.codearts-value-cards { gap: 7px; }
.codearts-value-cards article { padding: 8px; }
.codearts-value-cards b { width: 27px; height: 27px; }
.codearts-value-stream { width: 100%; margin: 0; overflow: hidden; }
.codearts-value-stream img { width: 100%; max-width: 100%; height: auto; }
.codearts-course-grid { grid-template-columns: 1fr; }
.codearts-course-featured { grid-column: auto; grid-template-columns: 1fr; }
.codearts-course-card { grid-template-columns: 1fr; min-height: 0; }
.codearts-course-copy { grid-template-columns: 48px minmax(0,1fr); padding: 18px 14px; }
.codearts-course-card figure,.codearts-course-featured figure { min-height: 150px; padding: 4px 6px; }
.codearts-course-card figure img,.codearts-course-featured figure img { width: 100%; height: 150px; object-fit: contain; }
.codearts-audience-panel { grid-template-columns: 1fr 1fr; }
.codearts-audience-panel article { min-height: 145px; padding: 20px 10px 16px; }
.codearts-audience-panel article::after { display: none; }
.codearts-audience-panel article:nth-child(odd) { border-right: 1px solid #e3edf8; }
.codearts-audience-panel article:nth-child(-n+2) { border-bottom: 1px solid #e3edf8; }
.codearts-practice-panel { grid-template-columns: 1fr; }
.codearts-practice-panel > figure { padding: 8px; }
.codearts-learning-path { border-bottom: 1px solid #e0ebf7; }
.codearts-outcomes { margin: 15px; }
.codearts-format-grid { grid-template-columns: 1fr; }
.codearts-format-grid article { min-height: 140px; }
.codearts-artifacts { flex-wrap: wrap; justify-content: flex-start; gap: 12px 18px; }
.codearts-process-track { display: block; padding-left: 31px; }
.codearts-process-track::before { top: 0; right: auto; bottom: 0; left: 20px; width: 2px; height: auto; border: 0; border-left: 2px solid #9bc4f1; border-radius: 0; transform: none; }
.codearts-process-track li { min-height: 78px; padding-left: 45px; text-align: left; }
.codearts-process-track b { position: absolute; top: 0; left: -31px; margin: 0; }
.codearts-process-track h3 { padding-top: 7px; }
.codearts-process-track p { max-width: none; margin: 0; }
.codearts-trust { padding-bottom: 0; }
.codearts-trust-inner { padding: 29px 15px; border-radius: 0; }
.codearts-trust h2 { line-height: 1.5; }
.codearts-trust-inner > div { grid-template-columns: 1fr 1fr; gap: 25px 0; }
.codearts-trust article:nth-child(2) { border-right: 0; }
.codearts-trust img { width: 52px; height: 52px; }
.codearts-cta .page-shell { display: block; text-align: center; }
.codearts-cta h2 { line-height: 1.45; }
.codearts-cta p { line-height: 1.65; }
.codearts-cta .button { margin-top: 19px; }
}