/**
 * HKB Logo Group widget (includes/elementor-widgets/class-logo-group-widget.php).
 *
 * Base look lives here; the widget's Style-tab controls override per instance.
 * Depends on the `main` stylesheet for the :root CSS variables.
 */

.hkb-logo-group:not(:has(.hkb-logo-group__grid)) .hkb-logo-group__topic {
    margin: 0 !important;
}

.hkb-logo-group__topic {
    font-family: var(--ff-gotham, 'Metropolis', 'Gotham', Arial, sans-serif);
    letter-spacing: 0.5px;
    font-size: 18px;
    line-height: 23.5px;
    color: var(--clr-blue-100, #211650);
    margin: 0 0 40px;
}

/* These mirror the Columns and Gap control defaults (4 per row / 40px, dropping
   to 2 per row / 20px on mobile) so a freshly dropped widget looks right even
   before Elementor regenerates its per-element CSS. Elementor's own rules are
   far more specific, so any value the editor sets still wins. */
.hkb-logo-group__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 40px;
    /* Mixed logo heights in one row sit nicer on a common center line. */
    /*align-items: center;*/
    justify-items: start;
}

@media (max-width: 767px) {
    .hkb-logo-group__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 20px;
        row-gap: 20px;
    }

    .hkb-logo-group__topic {
        font-size: 16px;
        line-height: 23px;
    }
}

.hkb-logo-group__item {
    max-width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}
.hkb-logo-group__item > img,
.hkb-logo-group__item a {
    display: inline-block;
    max-width: 100%;
    flex-grow: 1;
    display: flex;
    align-items: center;
	object-position: bottom
}

.hkb-logo-group__item > img{
	object-fit: contain;
}

/* Keep Art Basel close to its caption even beside taller partner logos. */
.hkb-logo-group__item > img[src*="/2026/09/ArtBasel.jpeg"],
.hkb-logo-group__item > img[src*="Art-Basel-Hong-Kong-2026-source-"] {
    flex: 0 0 auto;
    height: auto;
}

/* Keep the older Art Basel entry aligned at the top of its row. */
.hkb-logo-group__grid > .hkb-logo-group__item:has(> img[src*="/2026/09/ArtBasel.jpeg"]) {
    align-self: start;
}

/* Line up the 2026/27 Art Basel artwork with the logos in the same row. */
.hkb-logo-group__grid > .hkb-logo-group__item:has(> img[src*="Art-Basel-Hong-Kong-2026-source-"]) {
    align-self: stretch;
}
.hkb-logo-group__item > img[src*="Art-Basel-Hong-Kong-2026-source-"] {
    margin-top: auto;
}

.hkb-logo-group__item img {
    display: block;
    max-width: 100%;
    height: auto;

    /* Lets the per-logo width and height controls be set together — the artwork
	   letterboxes inside that box instead of stretching to fill it. 
	object-fit: contain;
	object-position: left center;
}

/* The per-logo description sits ABOVE its logo, as on the source pages. */
    .hkb-logo-group__name {
        display: block;
        margin: 0 0 16px;
        font-family: var(--ff-gotham, 'Metropolis', 'Gotham', Arial, sans-serif);
        letter-spacing: 0.5px;
        font-size: 14px;
        font-weight: 400;
        line-height: 16.8px;
        color: var(--clr-blue-100, #211650);
    }

    .hkb-logo-group__name em,
    .hkb-logo-group__name i {
        font-style: italic;
    }