/* Academy tiles: image background, name over the image, description on hover. */
.cmgh-academies{list-style:none;margin:0;padding:0;display:grid;gap:4px;grid-template-columns:repeat(3,1fr)}
.cmgh-academies--cols-1{grid-template-columns:1fr}
.cmgh-academies--cols-2{grid-template-columns:repeat(2,1fr)}
.cmgh-academies--cols-4{grid-template-columns:repeat(4,1fr)}
.cmgh-academies__item{list-style:none;margin:0;padding:0;aspect-ratio:16/9}

/* Full-width tiles: height follows the 16:9 image shape. */
.cmgh-academies--fill{box-sizing:border-box;position:relative;width:100vw !important;max-width:100vw !important;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;padding:0 !important;list-style:none !important}
body:has(.cmgh-academies--fill){overflow-x:clip}

.cmgh-academies__link{position:relative;display:block;height:100%;overflow:hidden;color:#fff;text-decoration:none;background:#1f2a37}
.cmgh-academies__media{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s ease}
.cmgh-academies__media--empty{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#334155,#0f172a)}
.cmgh-academies__initial{font-size:6rem;font-weight:700;color:rgba(255,255,255,.25)}
.cmgh-academies__shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.05) 100%);transition:background .35s ease}
.cmgh-academies__body{position:absolute;left:0;right:0;bottom:0;display:block;padding:28px}
.cmgh-academies__name{display:block;font-size:clamp(1.25rem,1.1rem + .8vw,1.9rem);font-weight:700;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.cmgh-academies__desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;max-height:0;opacity:0;overflow:hidden;margin-top:0;font-size:1rem;line-height:1.5;transform:translateY(8px);transition:max-height .45s ease,opacity .35s ease,margin-top .35s ease,transform .35s ease}

.cmgh-academies__link:hover .cmgh-academies__media,
.cmgh-academies__link:focus-visible .cmgh-academies__media{transform:scale(1.06)}
.cmgh-academies__link:hover .cmgh-academies__shade,
.cmgh-academies__link:focus-visible .cmgh-academies__shade{background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.6) 60%,rgba(0,0,0,.35) 100%)}
.cmgh-academies__link:hover .cmgh-academies__desc,
.cmgh-academies__link:focus-visible .cmgh-academies__desc{max-height:6em;opacity:1;margin-top:8px;transform:none}
.cmgh-academies__link:focus-visible{outline:3px solid #fff;outline-offset:-6px}

/* Touch screens cannot hover, so the description stays visible. */
@media (hover:none){
	.cmgh-academies__desc{max-height:4.5em;-webkit-line-clamp:3;line-clamp:3;opacity:1;margin-top:6px;transform:none}
	.cmgh-academies__shade{background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 60%,rgba(0,0,0,.1) 100%)}
}

@media (max-width:900px){
	.cmgh-academies,.cmgh-academies--cols-3,.cmgh-academies--cols-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
	.cmgh-academies,.cmgh-academies--cols-2,.cmgh-academies--cols-3,.cmgh-academies--cols-4{grid-template-columns:1fr}
	.cmgh-academies__body{padding:16px}
	.cmgh-academies__desc{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
	.cmgh-academies__media,.cmgh-academies__shade,.cmgh-academies__desc{transition:none}
}

/* Inside the block editor: keep the preview a sensible size and inside the canvas. */
.editor-styles-wrapper .cmgh-academies--fill{width:auto !important;max-width:100% !important;margin-left:0 !important;margin-right:0 !important;grid-auto-rows:auto}
.cmgh-academies__empty{padding:12px;background:#fff8e5;border:1px solid #f0d58a}