/* ============================================================
   ASAS Certificate Column — certificates fly into an overlapping column
   while the page scrolls normally (no pinning). Fast-moving dimmed background.
   Namespaced .asas-cc*  |  Static column for visitors who prefer reduced motion.
   ============================================================ */
.asas-cc{
  --cc-w: clamp(260px, 26vw, 380px);   /* card width */
  --cc-show: .30;                       /* visible part of each covered card (0–1) */
  --cc-speed: .45;                      /* extra background speed (0 = moves with page, .45 = 45% faster) */
  --cc-dim: .86;                        /* navy overlay strength over the photo */
  --cc-navy: var(--mellis-base, #003366);
  --cc-deep: 7, 26, 46;                 /* overlay colour (rgb) */
  --cc-font: var(--mellis-font, 'Manrope', system-ui, sans-serif);
  --cc-display: var(--mellis-font-two, 'Libre Baskerville', Georgia, serif);
  position: relative; overflow: hidden; overflow: clip; isolation: isolate;   /* clip (not hidden) keeps the sticky heading working */
  background: rgb(var(--cc-deep)); color: #fff; font-family: var(--cc-font);
  padding-block: clamp(80px, 14vh, 140px);
}
/* The site wraps pages in .page-wrapper{overflow:hidden}, which disables sticky positioning.
   On pages with this section, clip instead (same look, sticky keeps working). */
.page-wrapper:has(.asas-cc){overflow:clip}
/* explicit colours so the site's global h1/h2/p colours can't override them */
.asas-cc__title,.asas-cc__name{color:#fff}
.asas-cc__text,.asas-cc__scope{color:rgba(255,255,255,.75)}
.asas-cc__eyebrow,.asas-cc__count,.asas-cc__tag{color:#9fc3e8}

/* fast background */
.asas-cc__bg{position:absolute;left:0;right:0;top:0;height:100%;z-index:-2;will-change:transform;
  background-repeat:repeat-y;background-size:max(100%,1200px) auto;background-position:center top}
.asas-cc::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--cc-deep),1) 0%, rgba(var(--cc-deep),var(--cc-dim)) 14%, rgba(var(--cc-deep),var(--cc-dim)) 86%, rgba(var(--cc-deep),1) 100%)}

.asas-cc__wrap{max-width:1200px;margin:0 auto;padding-inline:clamp(16px,4vw,48px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.asas-cc__intro{position:sticky;top:max(80px,22vh);display:grid;gap:26px;min-width:0}
.asas-cc__eyebrow{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#9fc3e8}
.asas-cc__title{margin:0;font-family:var(--cc-display);font-weight:400;font-size:clamp(28px,3.4vw,44px);line-height:1.2;text-wrap:balance}
.asas-cc__text{margin:14px 0 0;font-size:16px;line-height:1.7;color:rgba(255,255,255,.75);max-width:42ch}
.asas-cc__caption{border-top:1px solid rgba(255,255,255,.18);padding-top:22px;min-height:120px;display:grid;gap:6px;align-content:start}
.asas-cc__count{font-size:13px;font-weight:700;letter-spacing:.08em;color:#9fc3e8;font-variant-numeric:tabular-nums}
.asas-cc__count b{color:#fff;font-size:22px;font-weight:800;margin-right:2px}
.asas-cc__tag{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9fc3e8}
.asas-cc__name{margin:0;font-size:clamp(20px,2vw,26px);font-weight:800;line-height:1.25}
.asas-cc__scope{margin:0;font-size:15px;line-height:1.55;color:rgba(255,255,255,.75)}
.asas-cc__all{justify-self:start;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:#fff;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.asas-cc__all:hover{opacity:.8}
.asas-cc__all:focus-visible{outline:2px solid #fff;outline-offset:4px}
.asas-cc__caption.is-swap{animation:asas-cc-in .35s ease}
@keyframes asas-cc-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* the column */
.asas-cc__column{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;min-width:0}
.asas-cc__column>li{width:var(--cc-w);max-width:100%;position:relative}
.asas-cc__column>li+li{margin-top:calc(var(--cc-w) * 1.25 * (var(--cc-show) - 1))}  /* overlap like a line of playing cards */
.asas-cc__card{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;aspect-ratio:4/5;max-width:100%;padding:0;border:0;background:#fff;color:#1d2430;
  font:inherit;text-align:left;cursor:zoom-in;box-shadow:0 1px 2px rgba(0,0,0,.25),0 -6px 24px rgba(0,0,0,.25),0 18px 40px rgba(0,0,0,.35);
  transform-origin:50% 30%;will-change:transform}
.asas-cc__card:focus-visible{outline:3px solid #9fc3e8;outline-offset:4px}
.asas-cc__strip{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #e8ecf2;min-width:0}
.asas-cc__strip b{font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asas-cc__strip span{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cc-navy);white-space:nowrap}
.asas-cc__doc{display:flex;align-items:flex-start;justify-content:center;padding:6% 7% 7%;min-height:0}
.asas-cc__doc img{max-width:100%;max-height:100%;object-fit:contain;display:block;box-shadow:0 0 0 1px #e8ecf2}

@media (max-width:860px){
  .asas-cc{--cc-w:min(78vw,340px)}
  .asas-cc__wrap{grid-template-columns:1fr;gap:36px}
  .asas-cc__intro{position:static}
  .asas-cc__caption{display:none}
}

/* static (reduced motion) */
.asas-cc--static .asas-cc__card{visibility:visible!important}
.asas-cc--static .asas-cc__bg{transform:none!important}

/* lightbox */
.asas-cc__dialog{border:0;padding:0;max-width:min(920px,92vw);max-height:92vh;background:transparent;overflow:visible}
.asas-cc__dialog::backdrop{background:rgba(0,14,28,.86)}
.asas-cc__dialog img{display:block;max-width:100%;max-height:82vh;margin:0 auto;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.asas-cc__dialog p{margin:12px 0 0;text-align:center;color:#fff;font:600 14px/1.4 var(--mellis-font,'Manrope',system-ui,sans-serif)}
.asas-cc__close{position:absolute;top:-44px;right:0;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.asas-cc__close:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.asas-cc__caption.is-swap{animation:none}}