/* Infographics Gallery — everything is scoped under .ieig so the theme isn't affected */
.ieig {
    --ieig-ink: #0A0E1A;
    --ieig-surface: #121A2C;
    --ieig-surface-2: #17213A;
    --ieig-hairline: #2A3350;
    --ieig-paper: #ECEEF3;
    --ieig-muted: #8892AC;
    --ieig-gold: #C8960C;
    background: var(--ieig-ink);
    color: var(--ieig-paper);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    border-radius: 14px;
    padding: 44px 40px 56px;
    box-sizing: border-box;
    line-height: 1.5;
}
.ieig *, .ieig *::before, .ieig *::after { box-sizing: border-box; }

/* page wrapper from page-template.php; the theme header is fixed and 6rem tall, so leave room for it */
.ieig-page-inner {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: calc(6rem + 32px) 3.4rem 64px;
    box-sizing: border-box;
}
.ieig-page-inner > p:empty { display: none; }
@media (max-width: 768px) {
    .ieig-page-inner { padding: calc(6rem + 16px) 1rem 40px; }
}
.ieig h1, .ieig h2, .ieig .ieig-display {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0;
    color: var(--ieig-paper);
    text-transform: none;
}
.ieig button {
    font-family: 'Inter', sans-serif;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    line-height: 1.2;
}
.ieig img { max-width: 100%; border: 0; box-shadow: none; }

.ieig-loading, .ieig-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--ieig-muted);
}
.ieig-empty .ieig-display { font-size: 26px; margin-bottom: 8px; }

/* hero */
.ieig-hero h1 {
    font-size: clamp(38px, 6vw, 64px);
    line-height: 0.98;
    max-width: 820px;
}
.ieig-hero h1 .ieig-accent { color: var(--ieig-gold); }
.ieig-lede {
    color: var(--ieig-muted);
    font-size: 16px;
    line-height: 1.55;
    max-width: 560px;
    margin: 16px 0 0;
}
.ieig-stats { display: flex; gap: 32px; margin-top: 26px; flex-wrap: wrap; }
.ieig-stats div { display: flex; flex-direction: column; }
.ieig-stats .ieig-num { font-family: 'Barlow Condensed', sans-serif; font-size: 34px; font-weight: 700; line-height: 1.1; }
.ieig-stats .ieig-lab { font-size: 12.5px; color: var(--ieig-muted); }

/* sociable banner */
.ieig-banner {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    border: 1px solid var(--ieig-hairline); background: var(--ieig-surface);
    border-radius: 10px; padding: 14px 20px; margin-top: 30px;
}
.ieig-banner span { font-size: 14.5px; }
.ieig-banner strong { color: var(--ieig-gold); font-weight: 600; }
.ieig a.ieig-banner-btn {
    font-size: 13.5px; font-weight: 600; color: var(--ieig-ink);
    background: var(--ieig-gold); padding: 9px 16px; border-radius: 7px;
    text-decoration: none; white-space: nowrap;
}

/* collections (packs) */
.ieig-packs-title { font-size: 15px; color: var(--ieig-paper); margin-top: 26px; }
.ieig-packs-row { display: flex; gap: 14px; overflow-x: auto; padding: 10px 2px 6px; scrollbar-width: thin; }
.ieig-pack {
    position: relative; flex: 0 0 260px; height: 140px; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--ieig-hairline); background: var(--ieig-surface); cursor: pointer;
    transition: border-color .15s, transform .15s;
}
.ieig-pack:hover { border-color: var(--ieig-muted); transform: translateY(-2px); }
.ieig-pack.ieig-active { border-color: var(--ieig-gold); box-shadow: 0 0 0 1px var(--ieig-gold); }
.ieig-pack:focus-visible { outline: 2px solid var(--ieig-gold); outline-offset: 2px; }
.ieig-pack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.ieig-pack::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,14,26,.92) 0%, rgba(10,14,26,.55) 70%, rgba(10,14,26,.3) 100%); }
.ieig-pack-body { position: relative; z-index: 1; padding: 14px 16px; height: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.ieig-pack-label {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .04em;
    text-transform: uppercase; background: rgba(255,255,255,.14); color: var(--ieig-paper); padding: 2px 8px; border-radius: 4px;
}
.ieig-pack-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 24px; line-height: 1.1; margin-top: 8px; color: var(--ieig-paper); }
.ieig-pack-meta { font-size: 12.5px; color: rgba(236,238,243,.75); }
.ieig-pack-btn {
    margin-top: auto; font-size: 12.5px; font-weight: 600; color: var(--ieig-ink);
    background: var(--ieig-gold); padding: 5px 12px; border-radius: 6px;
}
.ieig-pack-chip {
    display: inline-flex; align-items: center; gap: 6px; margin-right: 12px;
    border: 1px solid var(--ieig-hairline); background: var(--ieig-surface-2); color: var(--ieig-paper);
    border-radius: 20px; padding: 5px 8px 5px 14px; font-size: 13px;
}
.ieig .ieig-pack-chip button {
    background: rgba(255,255,255,.1); border: 0; color: var(--ieig-paper); width: 20px; height: 20px;
    border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; padding: 0;
}
.ieig .ieig-pack-chip button:hover { background: rgba(255,255,255,.22); }

/* tabs + search */
.ieig-filters {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    margin-top: 26px;
}
.ieig .ieig-chip {
    font-size: 13.5px; font-weight: 500;
    padding: 8px 16px; border-radius: 20px; border: 1px solid var(--ieig-hairline);
    background: transparent; color: var(--ieig-paper); cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: border-color .15s, background .15s;
}
.ieig .ieig-chip:hover { border-color: var(--ieig-muted); background: transparent; color: var(--ieig-paper); }
.ieig .ieig-chip.ieig-active { background: var(--ieig-surface-2); border-color: var(--ieig-paper); }
.ieig .ieig-chip.ieig-sport { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .03em; padding: 7px 18px; }
.ieig .ieig-chip.ieig-sport.ieig-active { background: var(--ieig-gold); border-color: var(--ieig-gold); color: var(--ieig-ink); }
.ieig-filters.ieig-types { margin-top: 12px; }
.ieig-chip .ieig-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.ieig-sep { width: 1px; height: 24px; background: var(--ieig-hairline); margin: 0 4px; }
.ieig-search { position: relative; margin-left: auto; width: 260px; max-width: 100%; }
.ieig-search input {
    width: 100%; background: var(--ieig-surface); border: 1px solid var(--ieig-hairline);
    color: var(--ieig-paper); padding: 9px 14px 9px 36px; border-radius: 8px;
    font-size: 14px; font-family: 'Inter', sans-serif; margin: 0; box-shadow: none; height: auto;
}
.ieig-search input::placeholder { color: var(--ieig-muted); }
.ieig-search input:focus { outline: 2px solid var(--ieig-gold); outline-offset: 1px; }
.ieig-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ieig-muted); }
.ieig-count { font-size: 13px; color: var(--ieig-muted); margin-top: 14px; }

/* grid */
/* justified rows: each card's width and height are set in gallery.js */
.ieig-grid { margin-top: 14px; }
.ieig-day + .ieig-day { margin-top: 34px; }
.ieig .ieig-day-head {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px;
    font-size: 24px; line-height: 1.2; margin: 0 0 12px;
    padding-bottom: 8px; border-bottom: 1px solid var(--ieig-hairline);
}
.ieig-day-count { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; color: var(--ieig-muted); }
.ieig-day-grid { display: flex; flex-wrap: wrap; gap: 18px; }
.ieig .ieig-dl-all {
    margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; line-height: 1;
    color: var(--ieig-paper); background: transparent; border: 1px solid var(--ieig-hairline);
    border-radius: 7px; padding: 7px 12px; cursor: pointer; white-space: nowrap;
    transition: border-color .15s, background .15s;
}
.ieig .ieig-dl-all:hover { border-color: var(--ieig-gold); background: rgba(200,150,12,.12); }
.ieig .ieig-dl-all:disabled { opacity: .7; cursor: wait; }
.ieig-count .ieig-dl-all { margin-left: 12px; vertical-align: middle; }
.ieig-card { flex: 0 0 auto; }
.ieig-grid.ieig-single .ieig-card { width: 100%; }
@media (max-width: 768px) {
    .ieig { padding: 28px 16px 40px; border-radius: 10px; }
    .ieig-stats { gap: 22px; }
    .ieig-stats .ieig-num { font-size: 28px; }
    .ieig-banner { padding: 14px 16px; }
    .ieig-search { width: 100%; margin-left: 0; order: 10; }
    .ieig-sep { display: none; }
}
@media (max-width: 600px) {
    .ieig-filters { gap: 8px; }
    .ieig .ieig-chip { padding: 7px 13px; font-size: 13px; }
    .ieig-banner a.ieig-banner-btn { width: 100%; text-align: center; }
}

.ieig-card {
    border-radius: 10px; overflow: hidden;
    position: relative; cursor: pointer; background: var(--ieig-ink);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--ieig-hairline);
    opacity: 0; transform: translateY(10px);
    animation: ieigCardIn .45s ease forwards;
}
@keyframes ieigCardIn { to { opacity: 1; transform: translateY(0); } }
/* the card already has the graphic's shape, so cover only hides sub-pixel rounding */
.ieig-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ieig-grid.ieig-single .ieig-card img { height: auto; }
.ieig-card:hover img { transform: scale(1.03); }
.ieig-card:focus-visible { outline: 2px solid var(--ieig-gold); outline-offset: 2px; }
.ieig-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12.5px;
    letter-spacing: .03em; padding: 4px 10px; border-radius: 4px; text-transform: uppercase;
}
.ieig-cap {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px 12px 12px;
    background: linear-gradient(0deg, rgba(0,0,0,.88) 20%, rgba(0,0,0,0) 100%);
    transform: translateY(8px); opacity: 0; transition: opacity .18s ease, transform .18s ease;
}
.ieig-card:hover .ieig-cap, .ieig-card:focus-visible .ieig-cap { opacity: 1; transform: translateY(0); }
.ieig-cap .ieig-player { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 700; color: #fff; }
.ieig-cap .ieig-meta { font-size: 11.5px; color: rgba(255,255,255,.75); }

/* lightbox (sits outside the theme content, so it keeps its own font and colors) */
.ieig-lightbox {
    position: fixed; inset: 0; z-index: 100000; background: rgba(6,8,14,.92);
    display: none; align-items: center; justify-content: center; padding: 32px 80px;
    backdrop-filter: blur(4px);
    font-family: 'Inter', sans-serif; color: #ECEEF3;
}
.ieig-lightbox.ieig-open { display: flex; }
.ieig-lb-inner {
    max-width: 1100px; width: 100%; max-height: 92vh; background: #121A2C;
    border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
    border: 1px solid #2A3350;
}
.ieig-lb-img { background: #000; display: flex; align-items: center; justify-content: center; min-height: 200px; }
.ieig-lb-img img { max-width: 100%; max-height: 74vh; object-fit: contain; display: block; }
.ieig-lb-footer { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ieig-lb-title { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; }
.ieig-lb-sub { font-size: 12.5px; color: #8892AC; margin-top: 2px; }
.ieig-lb-actions { display: flex; gap: 10px; }
.ieig-lightbox .ieig-lb-btn {
    border: 1px solid #2A3350; background: #17213A; color: #ECEEF3;
    padding: 9px 16px; border-radius: 7px; font-size: 13.5px; cursor: pointer;
    font-family: 'Inter', sans-serif; text-decoration: none; line-height: 1.2;
    display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: normal;
}
.ieig-lightbox .ieig-lb-btn:hover { border-color: #C8960C; color: #ECEEF3; background: #17213A; }
.ieig-lightbox .ieig-lb-btn.ieig-primary { background: #C8960C; color: #1A1300; border-color: #C8960C; font-weight: 600; }
.ieig-lightbox .ieig-close {
    position: absolute; top: 16px; right: 24px; background: none; border: none;
    color: #fff; font-size: 32px; cursor: pointer; line-height: 1; padding: 4px;
}
.ieig-lightbox .ieig-nav {
    position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.2); color: #fff; width: 48px; height: 48px; border-radius: 50%;
    cursor: pointer; font-size: 24px; display: flex; align-items: center; justify-content: center; padding: 0;
}
.ieig-lightbox .ieig-nav:hover { background: rgba(255,255,255,.18); }
.ieig-lightbox .ieig-nav[disabled] { opacity: .25; cursor: default; }
.ieig-prev { left: 18px; }
.ieig-next { right: 18px; }
.ieig-counter { position: absolute; top: 22px; left: 26px; font-size: 13px; color: #8892AC; }
@media (max-width: 700px) {
    .ieig-lightbox { padding: 56px 12px 16px; }
    .ieig-lightbox .ieig-nav { display: none; }
}
body.ieig-noscroll { overflow: hidden; }