/* Paint natively: masks affect only short joins; the bottom cutout reveals the footer color. */
.courses-site main.joined-surfaces>#course-gallery{position:relative;isolation:isolate;background:linear-gradient(#282d35,#282d35) 0 0/100% calc(100% - var(--join-height)) no-repeat,linear-gradient(#17191d,#17191d) 0 100%/100% var(--join-height) no-repeat!important;color:#fff;padding:40px 0 calc(44px + var(--join-height));--gallery-photo-height:min(58vh,calc(100vh - 420px),620px);--gallery-photo-height:min(58svh,calc(100svh - 420px),620px)}
#course-gallery::before{content:"";position:absolute;top:calc(-1 * var(--join-height));left:0;right:0;height:calc(var(--join-height) + 1px);background:#282d35;pointer-events:none;-webkit-mask-image:var(--join-top);mask-image:var(--join-top);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
#course-gallery::after{content:"";position:absolute;top:auto;bottom:0;left:0;right:0;height:calc(var(--join-height) + 1px);background:#282d35;pointer-events:none;-webkit-mask-image:var(--join-bottom);mask-image:var(--join-bottom);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
#course-gallery>.shell{position:relative;z-index:1}
#course-gallery .course-section-head{display:block;margin-bottom:24px}
#course-gallery .course-section-head>.section-code{display:block;margin-bottom:18px}
#course-gallery .course-gallery{min-width:0;max-width:min(100%,calc(var(--gallery-photo-height) * 1.5));margin-inline:auto;color:#fff}
#course-gallery .course-gallery-stage{position:relative;width:100%;height:var(--gallery-photo-height);aspect-ratio:3/2;overflow:hidden;border-radius:26px;background:#1f232a;isolation:isolate}
#course-gallery .course-gallery-slide{position:absolute;inset:0;min-width:0}
#course-gallery .course-gallery-slide[hidden]{display:none!important}
#course-gallery .course-gallery-slide img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
#course-gallery .course-gallery-arrow{position:absolute;top:50%;z-index:1;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid #ffffff90;border-radius:50%;background:#ffffffeb;color:#242424;transform:translateY(-50%);box-shadow:0 3px 16px #17212f20}
#course-gallery .course-gallery-prev{left:18px}
#course-gallery .course-gallery-next{right:18px}
#course-gallery .course-gallery-arrow .ui-icon{width:25px;height:25px}
#course-gallery .course-gallery-controls{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;margin-top:20px}
#course-gallery .course-gallery-counter{font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
#course-gallery .course-gallery-dots{display:flex;align-items:center;justify-content:center;gap:6px}
#course-gallery .course-gallery-dot{display:grid;place-items:center;width:28px;height:32px;padding:0;border:0;border-radius:50%;background:none;color:inherit}
#course-gallery .course-gallery-dot::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:#b7c0cc}
#course-gallery .course-gallery-dot[aria-current="true"]::before{background:var(--gold,#f5a400);box-shadow:0 0 0 3px #f5a40024}
#course-gallery .course-gallery-toggle{justify-self:end;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid #ffffff70;border-radius:50%;background:transparent;color:#fff}
#course-gallery .course-gallery-toggle svg{width:18px;height:18px;fill:currentColor;stroke:none}
#course-gallery .course-gallery-toggle:disabled{opacity:.55;cursor:default}
#course-gallery .course-gallery-arrow:hover,#course-gallery .course-gallery-toggle:not(:disabled):hover{background:var(--gold,#f5a400)}
#course-gallery .course-gallery-toggle:not(:disabled):hover{color:#242424}
#course-gallery .course-gallery button:focus-visible,#course-gallery .course-gallery:focus-visible{outline:3px solid var(--gold,#f5a400);outline-offset:4px}
#course-gallery .course-gallery-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:700px){
 .courses-site main.joined-surfaces>#course-gallery{padding:44px 0 calc(44px + var(--join-height))}
 #course-gallery .course-gallery{max-width:100%;width:100%}
 #course-gallery .course-gallery-stage{height:auto;border-radius:20px}
 #course-gallery .course-gallery-arrow{width:42px;height:42px}
 #course-gallery .course-gallery-prev{left:10px}
 #course-gallery .course-gallery-next{right:10px}
 #course-gallery .course-gallery-controls{gap:8px;margin-top:16px}
 #course-gallery .course-gallery-counter{font-size:13px}
 #course-gallery .course-gallery-dots{gap:3px}
 #course-gallery .course-gallery-dot{width:24px;height:32px}
 #course-gallery .course-gallery-toggle{width:38px;height:38px}
}