/* Infographics: the full-screen viewer (home page and /Infographics) and the /Infographics page. */

/* ---------- Viewer ---------- */
html.igv-open { overflow: hidden; }
.igv {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem 4.5rem;
    background: rgba(2, 6, 25, .97);
    backdrop-filter: blur(4px);
}
.igv[hidden] { display: none; }
.igv-figure { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: min(100%, 900px); max-height: 100%; }
.igv-img {
    display: block;
    max-width: 100%;
    height: calc(100vh - 8rem);   /* fill the screen height, even when the file is small */
    width: auto;
    object-fit: contain;
    border-radius: .5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    opacity: 0;
    transform: scale(.98);
    transition: opacity .25s, transform .25s;
}
.igv-img.is-in { opacity: 1; transform: none; }
.igv-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1.25rem;
    margin-top: .9rem;
    color: #fff;
    font-family: 'Maven Pro', sans-serif;
    text-align: center;
}
.igv-title { font-size: 1.05rem; font-weight: 600; }
.igv-story { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .9rem; border-radius: 2rem; background: #f5c127; color: #000a44; font-weight: 700; font-size: .9rem; text-decoration: none; }
.igv-story:hover { background: #fff; color: #000a44; }
.igv-story[hidden] { display: none; }
.igv-story .material-icons { font-size: 1rem; }
.igv-count { color: #9aa1c9; font-size: .85rem; }
.igv-close, .igv-nav {
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
}
.igv-close:hover, .igv-nav:hover, .igv-close:focus-visible, .igv-nav:focus-visible { background: #f5c127; border-color: #f5c127; color: #000a44; }
.igv-close { position: absolute; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; }
.igv-nav { position: absolute; top: 50%; width: 3rem; height: 3rem; transform: translateY(-50%); }
.igv-nav .material-icons { font-size: 2rem; }
.igv-prev { left: 1rem; }
.igv-next { right: 1rem; }
.igv-single .igv-nav { display: none; }
@media (max-width: 575.98px) {
    .igv { padding: 3.75rem .5rem 1rem; }
    .igv-nav { top: auto; bottom: 1rem; transform: none; width: 2.6rem; height: 2.6rem; }
    .igv-img { height: auto; max-height: calc(100vh - 11rem); width: 100%; }
}

/* Thumbnails that open the viewer */
[data-infographic] { cursor: zoom-in; }
[data-infographic]:focus-visible { outline: 3px solid #f5c127; outline-offset: 2px; }

/* ---------- /Infographics page ---------- */
.ig-page { max-width: 1280px; margin: 0 auto; padding: 1.5rem 1rem 3rem; font-family: 'Maven Pro', sans-serif; }
.ig-head { padding-bottom: .9rem; margin-bottom: 1.5rem; border-bottom: 3px solid #000a44; }
.ig-head h1 { margin: 0; font-family: 'Barlow', sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; color: #000a44; }
.ig-head p { margin: .3rem 0 0; color: #666; }
.ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1.25rem; }
.ig-item { display: flex; flex-direction: column; gap: .6rem; margin: 0; }
.ig-thumb {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: .75rem;
    background: #eef0f6;
    box-shadow: 0 4px 14px rgba(0, 10, 68, .08);
}
.ig-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.ig-thumb:hover img, .ig-thumb:focus-visible img { transform: scale(1.04); }
.ig-thumb::after {
    content: "zoom_in";
    font-family: 'Material Icons';
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(0, 10, 68, .75);
    color: #fff;
    font-size: 1.3rem;
    opacity: 0;
    transition: opacity .2s;
}
.ig-thumb:hover::after, .ig-thumb:focus-visible::after { opacity: 1; }
.ig-item figcaption { font-family: 'Barlow', sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: #1d1d29; }
.ig-item figcaption a { color: inherit; text-decoration: none; border-bottom: 2px solid transparent; }
.ig-item figcaption a:hover { border-bottom-color: #f5c127; }
.ig-empty { padding: 3rem 1rem; text-align: center; color: #666; }