/* ---------------- global goals: the UN's icons, tiles and badges ----------------
   Each goal shows the UN's own icon (js/sdgicons.js) as published: whole,
   square, with no rounding, shadow, tint or frame, as the UN's guidelines
   for the icons ask. An icon only ever moves as a whole: it pops in when it
   comes into view and lifts when it is pointed at or focused. These rules
   replace the older round badges in site.css. */
.gq { --gq: 64px; position: relative; flex: none; display: block; width: var(--gq); height: var(--gq); transition: transform .35s var(--ease); }
.gq .gi { display: block; width: 100%; height: 100%; }
/* the pop: from small and clear to a touch past full size, then still */
@keyframes gqPop { from { transform: scale(.4); opacity: 0; } 55% { transform: scale(1.06); opacity: 1; } to { transform: none; opacity: 1; } }

/* small square badges on programme and project cards */
.goal-row { gap: 10px; }
.goal-sq { display: inline-flex; flex: none; text-decoration: none; transition: transform .25s var(--ease); }
.goal-sq .gq { --gq: 48px; }
.goal-sq.sm .gq { --gq: 44px; }
a.goal-sq:hover, a.goal-sq:focus-visible { transform: translateY(-4px); }
/* a strip tile's focus ring is drawn round its icon, so it lifts with it */
a.gtile:focus-visible { outline: none; }
a.gtile:focus-visible .gq { outline: 3px solid var(--focus, var(--navy)); outline-offset: 4px; }

/* the Impact page: the icon heads each goal's card and pops in after it */
.sdg-h { gap: 20px; align-items: flex-start; }
.sdg-h .gq { --gq: 88px; }
/* tablets and small laptops get two cards to a row, so a goal's name and
   note keep a readable width; a card still too narrow for the icon and a
   long name side by side (the smallest phones) puts the name under it */
@media (min-width: 761px) and (max-width: 1180px) { .sdg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sdg-t { container: sdgt / inline-size; }
@container sdgt (max-width: 299px) { .sdg-h { flex-direction: column; gap: 12px; } }
.sdg-t.rv .gi { opacity: 0; }
.sdg-t.in .gi, .sdg-t.rv:focus-within .gi { opacity: 1; animation: gqPop .7s calc(var(--i, 0) * 90ms + .3s) var(--ease) both; }

/* the Home page strip: every goal's icon, nine to a row on wide screens,
   six on narrower ones and three on phones, lined up from the left as the
   UN asks of a group of icons. Each row comes in from left to right: an
   icon waits for its column, which goalsStrip() gives for each layout
   (--c9, --c6, --c3), then pops. */
.gs-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-bottom: 48px; }
.gs-top .sec-head { margin: 0; }
.gs-top .btn { flex: none; }
.gs-grid { --cols: 9; --gap: 16px; list-style: none; margin: 0; padding: 0; max-width: calc(var(--cols) * 150px + (var(--cols) - 1) * var(--gap)); display: flex; flex-wrap: wrap; gap: var(--gap); }
:lang(bn) .gs-grid { row-gap: 28px; }
.gs-grid > li { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
/* the icons that come into view together pop one after another in reading
   order (site.js numbers them --k); --c9 and the like are a fallback */
.gs-grid > .rv { --gd: calc(var(--k, var(--c9, 0)) * 55ms); transform: translateY(14px); transition-duration: .6s; transition-delay: var(--gd); }
.gs-grid > .rv.in { transform: none; }
.gs-grid > .rv .gi { opacity: 0; }
.gs-grid > .rv.in .gi, .gs-grid > .rv:focus-within .gi { opacity: 1; animation: gqPop .65s calc(var(--gd) + .12s) var(--ease) both; }
.gtile { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--navy); text-decoration: none; text-align: center; }
.gtile .gq { width: 100%; height: auto; aspect-ratio: 1; }
/* the English icon carries the goal's title, so only Bangla pages add one */
.gtile-t { display: none; max-width: 100%; font-weight: 600; font-size: 14.5px; line-height: 1.3; text-wrap: balance; overflow-wrap: break-word; }
.gtile-t:lang(bn) { display: block; }
a.gtile:hover .gq, a.gtile:focus-visible .gq { transform: translateY(-6px); }
@media (max-width: 1180px) {
  .gs-grid { --cols: 6; }
  .gs-grid > .rv { --gd: calc(var(--k, var(--c6, 0)) * 55ms); }
  .gtile-t { font-size: 14px; }
}
/* large phones and small tablets keep six to a row, so no icon is drawn
   bigger than its 360px file stays sharp for; phones take three */
@media (max-width: 760px) {
  .gs-grid { --gap: 12px; }
  .gtile { gap: 12px; }
  .gtile-t { font-size: 13.5px; }
}
@media (max-width: 539px) {
  .gs-grid { --cols: 3; }
  .gs-grid > .rv { --gd: calc(var(--k, var(--c3, 0)) * 55ms); }
}
/* the narrowest phones: on the Impact page a smaller icon and heading, so
   each goal's name fits whole */
@media (max-width: 359px) {
  .sdg-t { padding: 22px 20px; }
  .sdg-h { gap: 14px; }
  .sdg-h .gq { --gq: 68px; }
  .sdg-h h3 { font-size: 21px; }
}

/* the UN's credit line in the footer and the links in the Impact page's note */
.foot-sdg { margin: 0; padding-top: 20px; max-width: 90ch; font-size: 13px; line-height: 1.6; color: #8f9cc7; }
.foot .foot-sdg a { color: #dfe5f7; text-decoration: underline; text-underline-offset: 2px; }
.measure-note p { margin: 0 0 10px; }
.measure-note p:last-child { margin: 0; }
.measure-icons { padding-top: 6px; border-top: 1px solid rgba(20, 26, 46, .12); font-size: 15px; }

/* the banner's kites: seventeen take off in quick succession */
.kites .kite { animation-delay: calc(.3s + var(--i) * .07s), calc(1.5s + var(--i) * .07s); }

@media (prefers-reduced-motion: reduce) {
  .sdg-t.rv .gi, .gs-grid > .rv .gi { opacity: 1; animation: none !important; }
  .gs-grid > .rv { transform: none; }
  a.gtile:hover .gq, a.gtile:focus-visible .gq, a.goal-sq:hover, a.goal-sq:focus-visible { transform: none; }
}
/* A printed page that shows goal icons keeps the UN's statement and the
   addresses of its icon guidelines and SDG website: the footer prints that
   line alone, and the At a glance card, which prints without the footer,
   carries its own. */
.pb-un { display: none; }
@media print {
  .sdg-t.rv .gi, .gs-grid > .rv .gi { opacity: 1 !important; animation: none !important; }
  body:not(.print-glance):has(main .gi) .foot:has(.foot-sdg) { display: block !important; background: none; color: #000; padding: 6pt 0 0; }
  .foot .foot-top, .foot .foot-bottom { display: none !important; }
  .foot .foot-sdg { max-width: none; padding-top: 6pt; border-top: 1px solid #999; font-size: 8pt; color: #000; }
  .foot .foot-sdg a { color: #000; text-decoration: none; }
  .foot .foot-sdg a::after { content: ": " attr(href); overflow-wrap: anywhere; }
  body.print-glance .pb-un { display: block; margin: 8px 0 0; font-size: 7.5pt; line-height: 1.45; color: #333; overflow-wrap: anywhere; }
}