/* Course catalogue and certificate check. Scoped so a theme change cannot
   reshape it, and sized from the same scale as the rest of the site. */

.glt-cat,.glt-cat-nav,.glt-cat-empty,.glt-vf,.glt-cat-tools,.glt-cat-none{
 --gc-ink:#0B160E; --gc-body:#4E5E54; --gc-mute:#6B7A72;
 --gc-green:#009721; --gc-deep:#003B0D; --gc-fire:#FF3B00;
 --gc-line:#E5EAE6; --gc-mist:#F5F8F5; --gc-white:#fff;
 --gc-sans:'Poppins','Segoe UI',system-ui,-apple-system,sans-serif;
 --gc-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

.glt-cat{display:grid;gap:clamp(18px,2.4vw,28px);margin:0 0 clamp(24px,3vw,36px)}
.glt-cat-1{grid-template-columns:minmax(0,1fr)}
.glt-cat-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.glt-cat-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.glt-cat-4{grid-template-columns:repeat(4,minmax(0,1fr))}

@media(max-width:1100px){.glt-cat-3,.glt-cat-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.glt-cat-2,.glt-cat-3,.glt-cat-4{grid-template-columns:minmax(0,1fr)}}

.glt-cc{display:flex;flex-direction:column;background:var(--gc-white);border:1px solid var(--gc-line);
 border-radius:18px;overflow:hidden;transition:border-color .25s,box-shadow .25s,transform .25s}
.glt-cc:hover{border-color:#C6E3CD;box-shadow:0 26px 50px -30px rgba(11,22,14,.34);transform:translateY(-3px)}

.glt-cc-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--gc-mist)}
.glt-cc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.glt-cc:hover .glt-cc-img img{transform:scale(1.04)}

.glt-cc-b{display:flex;flex-direction:column;flex:1;padding:clamp(18px,1.9vw,24px)}

.glt-cc-meta{font-family:var(--gc-mono);font-size:13.5px;font-weight:500;letter-spacing:.08em;
 text-transform:uppercase;color:var(--gc-mute);margin:0 0 10px;line-height:1.5}

.glt-cc-t{font-family:var(--gc-sans);font-weight:800;font-size:clamp(1.205rem,1.5vw,1.4875rem);
 line-height:1.28;letter-spacing:-.02em;margin:0 0 10px;color:var(--gc-ink)}
.glt-cc-t a{color:inherit;text-decoration:none}
.glt-cc-t a:hover{color:var(--gc-green)}

.glt-cc-x{font-size:17px;line-height:1.62;color:var(--gc-body);margin:0 0 16px}

.glt-cc-p{font-family:var(--gc-sans);font-weight:800;font-size:1.325rem;color:var(--gc-deep);
 margin:auto 0 14px;letter-spacing:-.02em}
.glt-cc-p del{color:var(--gc-mute);font-weight:500;font-size:0.9em;margin-right:6px}
.glt-cc-p ins{text-decoration:none}

.glt-cc-bar{height:7px;border-radius:99px;background:var(--gc-line);overflow:hidden;margin:auto 0 8px}
.glt-cc-bar span{display:block;height:100%;border-radius:99px;background:var(--gc-green)}
.glt-cc-pc{font-family:var(--gc-mono);font-size:13.5px;font-weight:500;letter-spacing:.07em;
 text-transform:uppercase;color:var(--gc-mute);margin:0 0 14px}

.glt-cc-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;
 min-height:50px;padding:14px 22px;border-radius:999px;background:var(--gc-green);color:#fff;
 font-family:var(--gc-sans);font-weight:700;font-size:17px;text-decoration:none;text-align:center;
 transition:background .2s,transform .2s}
.glt-cc-go:hover{background:#00701A;color:#fff;transform:translateY(-2px)}
.glt-cc-go:focus-visible{outline:3px solid var(--gc-fire);outline-offset:3px}

.glt-cat-empty{font-size:18px;line-height:1.65;color:var(--gc-body);margin:0}

.glt-cat-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:clamp(20px,2.6vw,30px) 0 0}
.glt-cat-nav .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:46px;
 min-height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--gc-line);background:#fff;
 color:var(--gc-ink);font-family:var(--gc-sans);font-weight:600;font-size:17px;text-decoration:none}
.glt-cat-nav .page-numbers:hover{border-color:var(--gc-green);color:var(--gc-green)}
.glt-cat-nav .page-numbers.current{background:var(--gc-deep);border-color:var(--gc-deep);color:#fff}

/* ------------------------------------------------------ certificate check */

.glt-vf{max-width:560px}
.glt-vf-l{display:block;font-family:var(--gc-sans);font-weight:700;font-size:16px;
 color:var(--gc-ink);margin:0 0 8px}
.glt-vf-row{display:flex;gap:10px;flex-wrap:wrap}
.glt-vf-row input{flex:1 1 220px;min-width:0;min-height:54px;padding:14px 16px;border-radius:12px;
 border:1.5px solid var(--gc-line);background:#fff;font-family:var(--gc-mono);font-size:18px;
 letter-spacing:.06em;color:var(--gc-ink);text-transform:uppercase}
.glt-vf-row input:focus{outline:0;border-color:var(--gc-green);box-shadow:0 0 0 4px rgba(0,151,33,.14)}
.glt-vf-row button{flex:0 0 auto;min-height:54px;padding:14px 28px;border:0;border-radius:999px;
 background:var(--gc-fire);color:#fff;font-family:var(--gc-sans);font-weight:700;font-size:17px;
 cursor:pointer;transition:background .2s,transform .2s}
.glt-vf-row button:hover{background:#E03400;transform:translateY(-2px)}
.glt-vf-row button:focus-visible{outline:3px solid var(--gc-deep);outline-offset:3px}
.glt-vf-h{font-size:15.5px;line-height:1.55;color:var(--gc-mute);margin:10px 0 0}
.glt-vf-note{margin:16px 0 0;font-size:17px}
.glt-vf-note a{color:var(--gc-green);font-weight:700}
.glt-vf-bad{margin:14px 0 0;font-size:16.5px;font-weight:600;color:#C42B00}

@media(prefers-reduced-motion:reduce){
 .glt-cc,.glt-cc-img img,.glt-cc-go,.glt-vf-row button{transition:none}
 .glt-cc:hover,.glt-cc-go:hover,.glt-vf-row button:hover{transform:none}
 .glt-cc:hover .glt-cc-img img{transform:none}
}

/* ------------------------------------------- a course with no cover yet */

.glt-cc-blank{display:flex;align-items:center;justify-content:center;
 background:
  radial-gradient(420px 220px at 82% -20%,rgba(74,222,128,.16),transparent 62%),
  linear-gradient(168deg,#00330C,#001E06)}
.glt-cc-blank,.glt-cc-blank span{text-decoration:none}
.glt-cc-blank span{font-family:var(--gc-sans);font-weight:800;font-size:clamp(2.1875rem,4vw,3.0875rem);
 letter-spacing:-.04em;color:rgba(255,255,255,.88);line-height:1;
 text-decoration:none;-webkit-text-decoration:none}

/* ------------------------------------------------------- one card alone */
/* A three column grid holding a single card left it stranded against the
   left edge with two empty columns beside it. Below four cards the grid
   stops stretching and sits in the middle of the page instead. */

/* One card in a three column grid stretched across a third of the screen with
   two empty columns beside it. It is capped instead, and it stays on the same
   left edge as the heading above it: centring it would have lined it up with
   nothing. */
.glt-cat:has(> .glt-cc:only-child){grid-template-columns:minmax(0,430px);justify-content:start}
.glt-cat:has(> .glt-cc:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,430px));justify-content:start}

@media(max-width:700px){
 .glt-cat:has(> .glt-cc:only-child),
 .glt-cat:has(> .glt-cc:nth-child(2):last-child){grid-template-columns:minmax(0,1fr)}
}

/* ----------------------------------------------------- every screen size */

@media(max-width:380px){
 .glt-cc-b{padding:16px}
 .glt-cc-t{font-size:1.225rem}
 .glt-cc-go{padding:14px 16px;font-size:17px}
}

@media(pointer:coarse){
 .glt-cc-go{min-height:52px}
 .glt-cc:hover{transform:none}
}

@media(min-width:1921px){
 .glt-cat{gap:32px}
 .glt-cc-t{font-size:1.6375rem}
 .glt-cc-x{font-size:19px}
 .glt-cc-go{font-size:19px;min-height:58px}
}

@media(prefers-reduced-motion:reduce){
 .glt-cc,.glt-cc-img img{transition:none!important}
 .glt-cc:hover{transform:none!important}
 .glt-cc:hover .glt-cc-img img{transform:none!important}
}

@media(forced-colors:active){
 .glt-cc{border:1px solid CanvasText}
 .glt-cc-blank{background:Canvas}
 .glt-cc-blank span{color:CanvasText}
}

/* ------------------------------------------------ 4.5: find a course */

.glt-cat-tools{margin:0 0 clamp(18px,2.4vw,28px);font-family:var(--gc-sans)}
.glt-cat-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.glt-cat-search input,.glt-cat-field select{width:100%;min-height:50px;padding:11px 14px;border:1.5px solid var(--gc-line);border-radius:12px;background:#fff;color:var(--gc-ink);font-family:var(--gc-sans);font-size:16.5px}
.glt-cat-search input:focus,.glt-cat-field select:focus{outline:0;border-color:var(--gc-green);box-shadow:0 0 0 4px rgba(0,151,33,.14)}
.glt-cat-field label{display:block;font-family:var(--gc-mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gc-mute);margin:0 0 6px}
.glt-cat-apply{flex:0 0 auto;min-height:50px;padding:12px 22px;border:0;border-radius:999px;background:var(--gc-green);color:#fff;font-family:var(--gc-sans);font-weight:700;font-size:16.5px;cursor:pointer;white-space:nowrap}
.glt-cat-apply:hover{background:#00701A}
.glt-cat-apply:focus-visible{outline:3px solid var(--gc-fire);outline-offset:3px}
.glt-cat-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.glt-chip{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 16px;border-radius:999px;border:1px solid var(--gc-line);background:#fff;color:var(--gc-ink);font-weight:600;font-size:15.5px;text-decoration:none}
.glt-chip span{font-family:var(--gc-mono);font-size:13px;color:var(--gc-mute)}
.glt-chip:hover{border-color:var(--gc-green);color:var(--gc-green)}
.glt-chip.is-on{background:var(--gc-deep);border-color:var(--gc-deep);color:#fff}
.glt-chip.is-on span{color:rgba(255,255,255,.7)}
.glt-cat-count{margin:12px 0 0;font-family:var(--gc-mono);font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gc-mute)}
.glt-cat-count a{margin-left:10px;color:var(--gc-green);font-weight:600}
.glt-cat-none{padding:28px;border:1px dashed var(--gc-line);border-radius:16px;text-align:center;color:var(--gc-body);font-size:17px}
.glt-cat-none p{margin:0 0 8px}
.glt-cat-none a{color:var(--gc-green);font-weight:700}
.glt-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* card extras */
.glt-cc{scroll-margin-top:90px}
.glt-cc-top{position:relative}
.glt-cc-badge{position:absolute;left:12px;top:12px;padding:6px 12px;border-radius:999px;background:var(--gc-fire);color:#fff;font-family:var(--gc-sans);font-weight:700;font-size:13.5px;line-height:1.2;box-shadow:0 6px 16px -8px rgba(0,0,0,.4)}
.glt-wish{margin:0}
.glt-cc-wish{position:absolute;right:10px;top:10px}
.glt-wish-b{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:var(--gc-ink,#0B160E);cursor:pointer;box-shadow:0 6px 18px -8px rgba(0,0,0,.45);transition:transform .2s,color .2s}
.glt-wish-b svg{fill:none;stroke:currentColor;stroke-width:2}
.glt-wish-b:hover{transform:scale(1.06);color:var(--gc-fire,#FF3B00)}
.glt-wish-b[aria-pressed="true"]{color:var(--gc-fire,#FF3B00)}
.glt-wish-b[aria-pressed="true"] svg{fill:currentColor}
.glt-wish-b:focus-visible{outline:3px solid var(--gc-green,#009721);outline-offset:2px}
.glt-cc-rate{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-2px 0 10px;font-size:15px;color:var(--gc-mute)}
.glt-cc-rate strong{color:var(--gc-ink);font-size:15.5px}
.glt-cc-rate .glt-stars{display:inline-flex;gap:2px}
.glt-cc-rate .glt-star.is-full{fill:#F5A623}
.glt-cc-rate .glt-star.is-half{fill:#F5A623;opacity:.55}
.glt-cc-rate .glt-star.is-none{fill:#D6DED9}
.glt-cc-up{margin:-6px 0 14px;font-family:var(--gc-mono);font-size:13px;letter-spacing:.05em;color:var(--gc-mute)}
.glt-ref{display:block;margin-top:4px;font-family:var(--gc-sans);font-size:15px;font-weight:600;color:var(--gc-mute);letter-spacing:0}
.glt-ref[hidden]{display:none}

@media(max-width:480px){
 .glt-cat-apply{flex:1 1 100%}
 .glt-chip{min-height:40px;padding:7px 13px;font-size:15px}
}
@media(min-width:1921px){
 .glt-cat-search input,.glt-cat-field select,.glt-cat-apply{min-height:58px;font-size:18px}
}
@media(prefers-reduced-motion:reduce){.glt-wish-b{transition:none}.glt-wish-b:hover{transform:none}}
@media(forced-colors:active){.glt-wish-b{border:1px solid ButtonText}.glt-chip.is-on{border:2px solid Highlight}}

/* ------------------------------------------------- theme-proof links */
/* Some themes colour every link with a rule as strong as a single class, and
   print it after this file. These repeat the important colours one step
   stronger so buttons stay white on green and chips keep their look. */
.glt-shell .glt-cc-go,.glt-shell .glt-cc-go:hover{color:#fff;text-decoration:none}
.glt-shell .glt-cc-t a{color:inherit;text-decoration:none}
.glt-shell .glt-cc-t a:hover{color:#00701A}
.glt-shell .glt-chip{color:var(--gc-ink);text-decoration:none}
.glt-shell .glt-chip:hover{color:#00701A}
.glt-shell .glt-chip.is-on{color:#fff}
.glt-shell .glt-cat-count a,.glt-shell .glt-cat-none a,.glt-shell .glt-vf-note a{color:#00701A}
.glt-shell .glt-cat-nav .page-numbers{color:var(--gc-ink);text-decoration:none}
.glt-shell .glt-cat-nav .page-numbers.current{color:#fff}
.glt-shell .glt-cc-img,.glt-shell .glt-cc-blank span{text-decoration:none}

/* ------------------------------------- the catalogue follows its column */
/* The grid used to follow the screen width only. Inside a narrow page
   column that squeezed three cards into a space meant for one. It now
   follows the width of the column it sits in, where the browser can tell. */
.glt-cat-search{flex:2 1 240px;min-width:0}
.glt-cat-field{flex:1 1 150px;min-width:0}
@supports (container-type:inline-size){
 .glt-shell{container-type:inline-size}
 @container (max-width:980px){.glt-cat-3,.glt-cat-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
 @container (max-width:600px){.glt-cat-2,.glt-cat-3,.glt-cat-4{grid-template-columns:minmax(0,1fr)}.glt-cat-apply{flex:1 1 100%}}
}