/* site/css/recognition.css — the Recognition chapter (root #recognition): the honours ledger, the certificate wall grouped
   by claims, the path, the certificate lightbox. Lane L4 (phase 2). Tokens from site/styles.css only; new ones carry --m-recog-. */
#recognition{--m-recog-gap:16px;--m-recog-tile-shadow:var(--shadow)}
:root[data-theme="dark"] #recognition{--m-recog-tile-shadow:var(--shadow)}
#recognition .mono{font-variant-numeric:tabular-nums}
html[lang="ar"] #recognition .mono{letter-spacing:0;text-transform:none}
html[dir="rtl"] #recognition .ic-arrow,html[dir="rtl"] #recognition .lb-nav.next .ic{transform:scaleX(-1)}
html[dir="rtl"] #recognition .lb-nav.prev .ic{transform:none}   /* RTL: previous points right, next points left */

/* ---------- honours: an editorial ledger ---------- */
#recognition .honors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px}
#recognition .honor{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px 0 22px;border-top:1px solid var(--hair)}
#recognition .ho-k{margin:0 0 4px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-t);display:flex;align-items:center;gap:8px}
#recognition .ho-arrow{font-family:var(--f-mono);font-size:13px;color:var(--gold)}
#recognition .ho-h{display:block;font-family:var(--f-head);font-weight:600;font-size:19px;line-height:1.3;letter-spacing:-.01em}
#recognition .honor.is-num .ho-h{font-size:34px;font-weight:800;line-height:1.05;letter-spacing:-.02em;margin-top:-2px}
#recognition .ho-s{display:block;font-size:13px;line-height:1.55;color:var(--dim)}
#recognition .ho-not{margin:2px 0 0;font-size:12.5px;line-height:1.55;color:var(--dim)}
#recognition .ho-not b,#recognition .cl-n b,#recognition .lb-n b{font-weight:500;color:var(--copper-t);margin-inline-end:6px}
#recognition .ho-cert{margin-top:auto;padding-top:8px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gold-t);text-decoration:none;min-height:32px}
#recognition .ho-cert .ic,#recognition .cl-link .ic{width:14px;height:14px;transition:transform .25s var(--ease)}
#recognition .ho-cert:hover,#recognition .cl-link:hover{text-decoration:underline}
#recognition .ho-cert:hover .ic{transform:translateX(3px)}
html[dir="rtl"] #recognition .ho-cert:hover .ic{transform:scaleX(-1) translateX(3px)}
/* the Guinness participation sits under the Kanz column (columns 3–4), a dashed rail marks the nesting */
#recognition .honor.nested{grid-column:3 / span 2;grid-row:2;border-top:0;padding:4px 0 8px;padding-inline-start:18px;border-inline-start:1px dashed var(--hair);margin-top:-6px}
@media (min-width:1000px){#recognition .honor.nested .ho-h{font-size:17px}}

/* ---------- the wall ---------- */
#recognition #certFilters{margin-bottom:22px}
#recognition #certGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--m-recog-gap)}
#recognition .claim{display:flex;flex-direction:column;gap:14px;min-width:0;padding:18px 18px 16px;background:var(--panel);border:1px solid var(--hair2);border-radius:var(--r);transition:border-color .3s}
#recognition .claim[hidden]{display:none}
#recognition .claim:hover{border-color:var(--hair)}
#recognition .cl-head{display:flex;flex-direction:column;gap:6px;min-width:0}
#recognition .cl-k{margin:0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-t);display:flex;flex-wrap:wrap;gap:0 6px}
#recognition .cl-k span+span::before{content:"·";margin-inline-end:6px;color:var(--faint)}
#recognition .cl-t{font-family:var(--f-head);font-weight:600;font-size:17.5px;line-height:1.3;letter-spacing:-.01em;margin:0;color:var(--ink)}
#recognition .cl-src{margin:0;font-size:12px;color:var(--faint)}
#recognition .cl-p,#recognition .cl-n{margin:0;font-size:13px;line-height:1.6;color:var(--dim)}
#recognition .cl-p b{font-weight:500;color:var(--gold-t);margin-inline-end:6px}
#recognition .cl-link{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font-size:12.5px;color:var(--gold-t);text-decoration:none;min-height:30px}
#recognition .cl-link:hover .ic{transform:translateX(3px)}
html[dir="rtl"] #recognition .cl-link:hover .ic{transform:scaleX(-1) translateX(3px)}
#recognition .cl-note{font-size:12.5px;color:var(--faint);margin-top:2px}
#recognition .cl-note summary{cursor:pointer;color:var(--copper-t);list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:30px}
#recognition .cl-note summary::-webkit-details-marker{display:none}
#recognition .cl-note summary::before{content:"+";font-family:var(--f-mono);color:var(--faint)}
#recognition .cl-note[open] summary::before{content:"−"}
#recognition .cl-note p{margin:6px 0 0;line-height:1.6}
/* card kinds */
@media (min-width:701px){#recognition .claim.k-chain,#recognition .claim.k-track,#recognition .claim.k-beside{grid-column:span 2}}
/* a single that ends the wall takes the whole last row (the grid is 4 or 2 columns, so it would otherwise stand alone) — 18/10 review */
#recognition #certGrid>.claim.k-single:last-child{grid-column:1 / -1}
@media (min-width:1000px){#recognition #certGrid>.claim.k-single:last-child{display:grid;grid-template-columns:260px minmax(0,1fr);gap:12px 28px;align-items:start}#recognition #certGrid>.claim.k-single:last-child .cl-tiles{order:-1;margin-top:0}}
#recognition .cl-tiles{display:grid;gap:12px;margin-top:auto}
#recognition .cl-tiles.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
#recognition .cl-tiles.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
#recognition .cl-tiles.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
#recognition .cl-tiles.n1{grid-template-columns:minmax(0,1fr)}
/* the rail: one node above each stage, the last one reached; the line runs from the first node centre to the last */
#recognition .cl-rail{position:relative;display:grid;height:14px;margin:2px 0 -4px}
#recognition .cl-rail.n4{grid-template-columns:repeat(4,1fr)}
#recognition .cl-rail.n3{grid-template-columns:repeat(3,1fr)}
#recognition .cl-rail.n2{grid-template-columns:repeat(2,1fr)}
#recognition .cl-rail::before{content:"";position:absolute;top:50%;height:1px;background:var(--hair);left:12.5%;right:12.5%}
#recognition .cl-rail.n3::before{left:16.667%;right:16.667%}
#recognition .cl-rail.n2::before{left:25%;right:25%}
#recognition .cl-rail i{justify-self:center;align-self:center;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--gold);background:var(--bg);position:relative}
#recognition .cl-rail i.on{background:var(--gold)}
/* tiles: a sheet of paper on the panel */
#recognition .cert-card{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}
#recognition .cert-thumb{display:block;width:100%;aspect-ratio:1.414/1;padding:0;border:1px solid var(--hair2);border-radius:8px;overflow:hidden;background:var(--bg2);cursor:zoom-in;box-shadow:var(--m-recog-tile-shadow);transition:transform .35s var(--ease),border-color .3s,box-shadow .35s var(--ease)}
#recognition .cert-thumb img{display:block;width:100%;height:100%;object-fit:cover}
#recognition .cert-card.tall .cert-thumb{aspect-ratio:1/1.414}
#recognition .cert-card.tall .cert-thumb img{object-fit:contain}
@media (pointer:fine){#recognition .cert-thumb:hover{transform:translateY(-3px);border-color:var(--now);box-shadow:var(--shadow-h)}}
#recognition .st-n{position:absolute;top:7px;inset-inline-start:7px;font-style:normal;font-size:10px;line-height:1;padding:4px 6px;border-radius:99px;background:var(--ink);color:var(--bg);letter-spacing:.06em;pointer-events:none}
#recognition .cert-body b{display:block;font-size:12.5px;font-weight:500;line-height:1.35}
#recognition .cert-body span{display:block;font-size:11px;line-height:1.45;color:var(--faint);margin-top:2px}
#recognition .pfx{display:none}
/* singles: text above, the document below (≥1000); document beside the text on narrower screens */
@media (max-width:999px){
  #recognition .claim.k-single{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px 16px;align-items:start}
  #recognition .claim.k-single .cl-tiles{order:-1;margin-top:0}
}
/* beside: Kanz and the Guinness participation, each as [document | text] */
#recognition .claim.k-beside{gap:16px}
#recognition .cl-half{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 18px;align-items:start;min-width:0}
#recognition .cl-half.nested{padding-top:14px;border-top:1px dashed var(--hair)}
#recognition .cl-half .cl-tiles{margin-top:0}
#recognition .cl-half .cert-card.tall .cert-thumb{width:106px}
#recognition .cl-same{grid-column:1 / -1;margin:0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-t);display:flex;align-items:center;gap:8px}
#recognition .cl-text{display:flex;flex-direction:column;gap:6px;min-width:0}
#recognition .cl-text .cl-t{font-size:16.5px}
/* collapsed wall: the tracks stay behind "Show all 18 certificates" (from the 4th card on phones); a filter shows everything it matches */
@media (min-width:701px){#recognition #certGrid:not(.all)>.claim:nth-child(n+7){display:none}}
@media (max-width:700px){#recognition #certGrid:not(.all)>.claim:nth-child(n+4){display:none}}
#recognition .certs-more{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#recognition .certs-dl:empty{display:none}

/* ---------- the path: one rail, the destination last ---------- */
#recognition .tl{max-width:860px}
#recognition .tl-item{position:relative;display:grid;grid-template-columns:104px 24px minmax(0,1fr);gap:0 14px;padding:0 0 24px}
#recognition .tl-item::before{content:"";position:absolute;top:.75em;bottom:-.2em;inset-inline-start:129px;width:1px;background:var(--hair)}
#recognition .tl-item::after{content:"";position:absolute;top:.35em;inset-inline-start:124px;width:11px;height:11px;border-radius:50%;border:2px solid var(--gold);background:var(--bg)}
#recognition .tl-item:last-child::before{display:none}
/* the path draws itself as it scrolls through (scroll-driven; a static line where unsupported or with reduced motion) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    #recognition .tl-item{view-timeline:--tl block}
    #recognition .tl-item::before{transform-origin:top;animation:tlDraw linear both;animation-timeline:--tl;animation-range:entry 35% cover 60%}
    #recognition .tl-item::after{animation:tlDot linear both;animation-timeline:--tl;animation-range:entry 20% entry 80%}
  }
}
@keyframes tlDraw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes tlDot{from{transform:scale(.35);opacity:.25}to{transform:none;opacity:1}}
#recognition .tl-item:last-child::after{background:var(--gold)}
#recognition .tl-item time{grid-column:1;text-align:end;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-t);padding-top:.5em;white-space:nowrap}
#recognition .tl-body{grid-column:3;min-width:0}
#recognition .tl-item h4{font-family:var(--f-head);font-weight:600;font-size:17px;line-height:1.3;margin:0 0 3px}
#recognition .tl-item p{margin:0;color:var(--dim);font-size:14px;line-height:1.6}
#recognition .tl-item:last-child h4{color:var(--gold-t)}
#recognition .tl-item.nested{margin-top:-10px}
#recognition .tl-item.nested time{visibility:hidden}
#recognition .tl-item.nested::after{width:7px;height:7px;inset-inline-start:126px;top:.55em;border-style:dashed}
#recognition .tl-item.nested .tl-body{padding-inline-start:14px;border-inline-start:1px dashed var(--hair)}
#recognition .tl-item.nested h4{font-size:15px}
#recognition .tl-item.nested p{font-size:13px}

/* ---------- the lightbox ---------- */
#lb{max-width:min(1120px,96vw);width:auto;background:transparent;border:0;box-shadow:none;padding:0;margin:auto}
#lb::backdrop{background:rgba(5,8,14,.84);backdrop-filter:blur(6px)}
.lb-card{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:94vh;background:var(--surface);color:var(--ink);border:1px solid var(--hair);border-radius:18px;overflow:hidden;box-shadow:0 40px 110px rgba(0,0,0,.5)}
.lb-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:start;padding:16px 20px 14px;border-bottom:1px solid var(--hair2)}
.lb-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.lb-k{margin:0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-t);display:flex;gap:0 6px;flex-wrap:wrap}
.lb-k span+span:not(:empty)::before{content:"·";margin-inline-end:6px;color:var(--faint)}
.lb-head h4{font-family:var(--f-head);font-weight:600;font-size:19px;line-height:1.3;margin:0;letter-spacing:-.01em}
.lb-sub{margin:0;font-size:13px;color:var(--dim)}
.lb-p{margin:2px 0 0;font-size:13px;line-height:1.55;color:var(--dim)}
.lb-p b{font-weight:500;color:var(--gold-t);margin-inline-end:6px}
.lb-stage{position:relative;display:grid;place-items:center;padding:18px 64px;background:var(--panel);touch-action:pan-y;user-select:none;-webkit-user-select:none;min-height:220px}
.lb-stage img{display:block;max-width:100%;max-height:min(66vh,820px);width:auto;height:auto;border-radius:8px;background:var(--bg2);box-shadow:0 22px 50px rgba(0,0,0,.35);transition:opacity .25s}
.lb-stage img.loading{opacity:.7}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid var(--hair2);background:var(--bg2);color:var(--dim);cursor:pointer;display:grid;place-items:center;transition:color .2s,border-color .2s,background .2s;z-index:2;padding:0}
.lb-nav .ic{width:20px;height:20px}
.lb-nav.prev .ic{transform:scaleX(-1)}
html[dir="rtl"] .lb-nav.prev .ic{transform:none}
.lb-nav:hover{color:var(--ink);border-color:var(--gold)}
.lb-nav.prev{inset-inline-start:14px}.lb-nav.next{inset-inline-end:14px}
.lb-bar{display:flex;align-items:center;gap:10px 14px;padding:12px 20px;border-top:1px solid var(--hair2);flex-wrap:wrap}
.lb-note{flex:1 1 100%;margin:0;font-size:12.5px;line-height:1.55;color:var(--faint)}
.lb-actions{display:flex;gap:8px;flex-wrap:wrap;margin-inline-start:auto}

/* ---------- narrower screens ---------- */
@media (max-width:999px){
  #recognition .honors{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
  #recognition .honor.nested{grid-column:1 / -1;grid-row:3;margin-top:0;padding-top:6px}
  #recognition #certGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  #recognition .honors{grid-template-columns:minmax(0,1fr);gap:0}
  #recognition .honor{padding:11px 0 13px;gap:3px}
  #recognition .honor:not(.nested) .ho-k,#recognition .ho-cert{display:none}
  #recognition .honor.nested{grid-column:auto;grid-row:auto;padding:6px 0 12px;padding-inline-start:16px;margin-top:-4px}
  #recognition .ho-h{font-size:16.5px}
  #recognition .honor.is-num .ho-h{font-size:28px}
  #recognition .ho-s{font-size:12.5px}
  #recognition .ho-cert{min-height:28px;padding-top:4px}
  #recognition #certs .sub-head p{display:none}
  #recognition #certFilters{margin-bottom:16px}
  #recognition #certGrid{grid-template-columns:minmax(0,1fr);gap:12px}
  #recognition .claim{padding:14px 14px 14px;gap:12px;border-radius:14px}
  #recognition .cl-t{font-size:16px}
  #recognition .cl-p,#recognition .cl-n{font-size:12.5px}
  #recognition .cl-tiles.n4,#recognition .cl-tiles.n3{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-14px;padding-inline:14px;padding-bottom:2px}
  #recognition .cl-tiles.n4::-webkit-scrollbar,#recognition .cl-tiles.n3::-webkit-scrollbar{display:none}
  #recognition .cl-tiles.n4 .cert-card,#recognition .cl-tiles.n3 .cert-card{flex:0 0 44%;scroll-snap-align:start}
  #recognition .cl-rail{display:none}
  #recognition .cert-body b{font-size:12px}
  #recognition .cert-body span{display:none}
  #recognition .claim.k-single{grid-template-columns:120px minmax(0,1fr);gap:10px 12px}
  #recognition .cl-half{grid-template-columns:120px minmax(0,1fr);gap:8px 12px}
  #recognition .cl-half .cert-card.tall .cert-thumb{width:88px}
  #recognition .cl-text .cl-t{font-size:15px}
  #recognition .certs-more{margin-top:14px}
  #recognition .tl-item{grid-template-columns:22px minmax(0,1fr);gap:0 12px;padding-bottom:14px}
  #recognition .tl-item::before{inset-inline-start:10px;top:1.1em}
  #recognition .tl-item::after{inset-inline-start:5px;top:.55em}
  #recognition .tl-item time{grid-column:2;text-align:start;padding-top:0;font-size:10.5px}
  #recognition .tl-body{grid-column:2}
  #recognition .tl-item h4{font-size:15.5px;margin:2px 0 2px}
  #recognition .tl-item p{font-size:13px;line-height:1.55}
  #recognition .tl-item.nested{margin-top:-6px}
  #recognition .tl-item.nested time{display:none}
  #recognition .tl-item.nested::after{inset-inline-start:7px;top:.4em}
  #recognition .tl-item.nested .tl-body{padding-inline-start:12px}
  #lb{max-width:100vw;width:100vw;height:100dvh;max-height:100dvh;margin:0}
  .lb-card{height:100%;max-height:none;border-radius:0;border:0}
  .lb-head{padding:14px 16px 12px}
  .lb-head h4{font-size:16px}
  .lb-p{font-size:12.5px}
  .lb-stage{padding:12px 12px;min-height:0}
  .lb-stage img{max-height:min(54vh,600px)}
  .lb-nav{width:36px;height:36px;top:auto;bottom:10px;transform:none}
  .lb-nav.prev{inset-inline-start:10px}.lb-nav.next{inset-inline-end:10px}
  .lb-bar{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .lb-actions{width:100%;margin-inline-start:0}
  .lb-actions .btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:420px){#recognition .claim.k-single,#recognition .cl-half{grid-template-columns:104px minmax(0,1fr)}#recognition .cl-half .cert-card.tall .cert-thumb{width:76px}}
@media (prefers-reduced-motion:reduce){#recognition .cert-thumb,#recognition .ho-cert .ic,#recognition .cl-link .ic,.lb-stage img{transition:none}}

/* the "same programme" hook is an SVG (no font dependency); it mirrors in Arabic */
#recognition .ho-arrow{display:inline-block;vertical-align:-1px;margin-inline-end:6px}
html[dir="rtl"] #recognition .ho-arrow{transform:scaleX(-1)}