/* Navbar Bootstrap-icon glyphs (<i class="bi …">) render ~.125em low because
   the icon font's glyph baseline sits below the em box; the .bi class normally
   offsets that with vertical-align, but that is ignored once the parent link is
   a flexbox (d-flex). Without this, font-glyph items (Contacts, How to
   Visualize) sat slightly lower than the <img>/inline-flex items (Statistics,
   Grand-Challenge). Center the glyph in its own line box like the others. */
.navbar-nav .navbar-brand .bi {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* Navbar spacing. Icon->label spacing is the link's flex .gap-1 (matching the
   right-hand Ditto/user side); here we just add a little more room between the
   items themselves (Bootstrap's default .navbar-brand margin is 1rem). */
.navbar .navbar-brand {
    margin-right: 1.25rem;
}
/* DB-defined additional-page icons carry an inline margin-right; drop it so the
   link's flex gap is the only icon->label spacing, matching the other items. */
.navbar .navbar-brand [aria-hidden="true"] {
    margin-right: 0 !important;
}

#footer {
    background-color: #ECECEC;
}

.footer-position {
    position: relative;
    z-index: 1030;
}

@media (min-width: 768px) {
    .footer-position {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
    }
}

.b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-top-width: medium;
    border-right-width: medium;
    border-bottom-width: medium;
    border-left-width: medium;
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.alert {
    z-index: 1031;
}

.copy-button {
    position : absolute;
    bottom   : 15px;
    right: 15px;
}

/* overflow paper bib */

.fixed-len-card {
    height: 400px;
}

@media only screen and (max-width: 600px) {
    .fixed-len-card {
        height: auto;
    }
}

.custom-button {
    width: 200px !important;
    height: 200px !important;
    margin-right: 20px !important;
}

.custom-button:hover{
    background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.4));
}

#cite_box {
    overflow-y: auto;
    max-height: 320px;
}

/* ------------------------------------------------------------------ */
/* Page editor "layout" super-blocks (rendered on dataset pages)       */
/* ------------------------------------------------------------------ */

/* Responsive image container: one image fills the width; several form a
   mosaic. Gallery presets pin a fixed number of columns. */
.ds-media {
    display: grid;
    grid-template-columns: 1fr;   /* single column; the image is centered within it */
    gap: 0.6rem;
    margin: 0.25rem 0;
    justify-items: center;        /* centre the image instead of forcing it full-width */
}

/* Grid items default to min-width:auto, which lets a large image overflow its
   column; min-width:0 lets the track (and the image) shrink to fit. */
.ds-media > * { min-width: 0; }

/* Image (optionally wrapped in a link) keeps its natural or explicitly set size,
   capped to the cell width, and is centered by the grid above. */
.ds-media a { display: inline-block; max-width: 100%; }

.ds-media img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 0.3rem;
}

.ds-gallery-2 { grid-template-columns: repeat(2, 1fr); }
.ds-gallery-3 { grid-template-columns: repeat(3, 1fr); }
.ds-gallery-4 { grid-template-columns: repeat(4, 1fr); }

/* Galleries fill each track rather than centering at intrinsic size. */
.ds-media[class*="ds-gallery"] { justify-items: stretch; }
.ds-media[class*="ds-gallery"] a { display: block; }
.ds-media[class*="ds-gallery"] img { width: 100%; }

@media (max-width: 576px) {
    .ds-gallery-3, .ds-gallery-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Carousel: the markup is built at runtime by the carousel script from a
   .ds-l-carousel block into a multi-item slider — several images fill the page
   width and the strip rotates through the set. The viewport clips the track;
   the track slides via translateX; prev/next chevrons sit over the edges. */
.dataset-page-body .ds-mcarousel { position: relative; }
.dataset-page-body .ds-mcarousel-viewport { overflow: hidden; width: 100%; }
.dataset-page-body .ds-mcarousel-track { display: flex; gap: 12px; transition: transform 0.4s ease; }
.dataset-page-body .ds-mcarousel-item { flex: 0 0 auto; }
.dataset-page-body .ds-mcarousel-item img {
    width: 100%; height: 240px; object-fit: contain;
    background: #f0f0f0; border-radius: 0.3rem;
}
.dataset-page-body .ds-mcarousel-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border: none; border-radius: 50%;
    background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 1.1rem;
    cursor: pointer; z-index: 2;
}
.dataset-page-body .ds-mcarousel-btn:hover { background: rgba(0, 0, 0, 0.75); }
.dataset-page-body .ds-mcarousel-btn.prev { left: 0.4rem; }
.dataset-page-body .ds-mcarousel-btn.next { right: 0.4rem; }

/* Image placeholders are an editor-only affordance — never shown publicly. */
.ds-img-placeholder { display: none; }

/* Default text style for browser-configured pages: matches the look of the
   existing static dataset pages (Bootstrap .lead, justified). */
.dataset-page-body p,
.dataset-page-body li {
    font-size: 1.25rem;
    font-weight: 300;
    text-align: justify;
}

/* Bootstrap 5 has text-start/center/end but no justify utility; the alignment
   buttons emit these classes (they persist; inline styles would be sanitized). */
.text-justify { text-align: justify; }

/* ------------------------------------------------------------------ */
/* "Variant A" page starter (editor → page_form.html "Page starter").  */
/* Hero + sticky table-of-contents + sections. Sections use the        */
/* Variant-F heading style (no card box, underlined <h2>). Scoped to    */
/* .dataset-page-body so nothing leaks to other pages, and to outweigh  */
/* the default .dataset-page-body p/li styling above.                   */
/* ------------------------------------------------------------------ */

.dataset-page-body {
    --ds-accent: #5B5191;
    --ds-accent-2: #A99FE0;
    --ds-muted: #6b7280;
    --ds-line: #e5e7eb;
    --ds-bg: #f7f7fb;
}

/* Hero header */
.dataset-page-body .ds-hero {
    background: linear-gradient(135deg, var(--ds-accent) 0%, #39356a 100%);
    color: #fff;
    border-radius: 1rem;
    padding: 2.5rem;
    margin-bottom: 2rem;
}
.dataset-page-body .ds-hero-inner { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.dataset-page-body .ds-hero-logo { flex: 0 0 auto; width: 160px; margin: 0; display: flex; align-items: center; justify-content: center; }
.dataset-page-body .ds-hero-logo br { display: none; }   /* stray editor break that pushed the logo off-center */
.dataset-page-body .ds-hero-logo img { max-height: 150px; background: #fff; border-radius: 0.8rem; padding: 0.6rem; }

/* Tighten the vertical white space around inserted layout blocks. We override the
   Bootstrap my-3 utility, and must also zero the row's vertical gutter (--bs-gutter-y):
   otherwise the columns keep their +gutter top margin while our margin-top replaces the
   row's compensating negative margin, leaving a blank strip on top. */
.dataset-page-body .ds-layout { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; --bs-gutter-y: 0; }
.dataset-page-body .ds-layout + p { margin: 0; }

/* Vertically center the image against the text in image+text / text+image rows
   (the row's align-items:center handles it; we just remove the stray editor
   line-break that otherwise sits above the image and pushes it off-center). */
.dataset-page-body .ds-layout.ds-l-imgtext,
.dataset-page-body .ds-layout.ds-l-textimg { align-items: center; }
.dataset-page-body .ds-media br { display: none; }
.dataset-page-body .ds-hero-text { flex: 1 1 280px; min-width: 0; }
.dataset-page-body .ds-hero h1 { color: #fff; font-weight: 800; font-size: 2.3rem; margin: 0 0 0.4rem; }
.dataset-page-body .ds-tagline { color: var(--ds-accent-2); font-size: 1.05rem; margin-bottom: 1.2rem; text-align: left; }
.dataset-page-body .ds-cta { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.dataset-page-body .btn-hero {
    background: #fff; color: var(--ds-accent); font-weight: 600;
    border-radius: 0.6rem; padding: 0.55rem 1.1rem; text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.dataset-page-body .btn-hero:hover { color: #39356a; }
.dataset-page-body .btn-hero.ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.6); }
.dataset-page-body .btn-hero.ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Two-column body: sticky table of contents + main column */
.dataset-page-body .ds-layout-toc { display: grid; grid-template-columns: 210px 1fr; gap: 2rem; align-items: start; }
.dataset-page-body .ds-toc { position: sticky; top: 80px; }
.dataset-page-body .ds-toc p { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; color: var(--ds-muted); margin-bottom: 0.5rem; }
.dataset-page-body .ds-toc a { display: block; padding: 0.35rem 0.6rem; border-left: 2px solid var(--ds-line); color: var(--ds-muted); text-decoration: none; font-size: 0.95rem; }
.dataset-page-body .ds-toc a:hover { color: var(--ds-accent); border-left-color: var(--ds-accent); }
.dataset-page-body .ds-main { min-width: 0; }

/* Sections — Variant F look: no card box, underlined heading. */
/* overflow-wrap so a long unbreakable string (e.g. a URL) wraps inside the
   column instead of forcing it wider than the page. min-width:0 on .ds-main
   (above) lets the grid track shrink; this breaks the content itself. */
.dataset-page-body .ds-section { margin-bottom: 2rem; scroll-margin-top: 80px; overflow-wrap: break-word; }
.dataset-page-body .ds-section > h2 {
    font-weight: 700; margin: 1.8rem 0 0.8rem; padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--ds-line);
}
.dataset-page-body .ds-section > h2:first-child { margin-top: 0; }

/* Figure + prose row */
.dataset-page-body .ds-figrow { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; margin: 1rem 0; }

/* Plain author-written tables inside a section. The [[feature_table]] block
   renders its own Bootstrap-classed .table, so exclude that one (:not(.table)). */
.dataset-page-body .ds-section table:not(.table) { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.dataset-page-body .ds-section table:not(.table) th,
.dataset-page-body .ds-section table:not(.table) td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--ds-line); vertical-align: top; }
.dataset-page-body .ds-section table:not(.table) th { background: var(--ds-bg); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ds-muted); }

@media (max-width: 768px) {
    .dataset-page-body .ds-hero { padding: 1.5rem; }
    .dataset-page-body .ds-layout-toc { grid-template-columns: 1fr; }
    .dataset-page-body .ds-toc { display: none; }
    .dataset-page-body .ds-figrow { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* Contacts page (per-dataset "Meet the team")                         */
/* ------------------------------------------------------------------ */

.authors-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 0 3rem;
}

.authors-intro {
    margin-bottom: 2rem;
}

.authors-heading {
    font-weight: 700;
}

.authors-subtitle {
    color: #6b7280;
    font-size: 1.1rem;
    margin-bottom: 0;
}

.author-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.5rem;
}

.author-card {
    margin: 0;
    text-align: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.6rem;
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.author-card:hover {
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Author photos are cropped to 3:4 portrait in the admin; show them at that
   ratio so the grid is uniform. */
.author-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #f1f3f5;
}

.author-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.author-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #adb5bd;
}

.author-info {
    padding: 0.85rem 0.75rem 1.1rem;
}

.author-name {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.15rem;
}

.author-position {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0;
}

.authors-contact {
    margin-top: 2.5rem;
    text-align: center;
    color: #495057;
    font-size: 1.05rem;
}

.authors-contact i {
    margin-right: 0.4rem;
}

@media screen and (max-width:900px), screen and (max-height:500px) {
#author {display:none;}
}