@charset "utf-8";
/* HP4U – Sponsors grid (flexbox, responsive, WCAG friendly) */
:root{
	 --hp4u-sponsor-gap: 1.5rem;  
	--hp4u-sponsor-card-h: 80px;
}
.hp4u-sponsor-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hp4u-sponsor-gap);
    align-items: stretch;
    justify-content: flex-start;
}

.hp4u-sponsor-grid-item {
    flex: 0 0 calc((100% - (5 * var(--hp4u-sponsor-gap))) / 6);
    display: flex;
}

/* Clickable card (when linked) */
.hp4u-sponsor-link,
.hp4u-sponsor-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
	 min-height: var(--hp4u-sponsor-card-h);
    padding: 0.75rem 1.25rem;
    border-radius: var( --hp4u-radius);
    border: var(--hp4u-border-w) solid transparent;
    background-color:#fff;
    text-decoration: none;
    position: relative;     
    overflow: hidden;   
    transition:
        border-color 150ms ease,
        background-color 150ms ease;
}

.hp4u-sponsor-logo {
    background-color:#fff;
}

.hp4u-sponsor-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: rgba(var(--hp4u-accent-rgb), 0.5); 
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
	z-index:2;
	mix-blend-mode: multiply;
}

/* Figure & image */
.hp4u-sponsor-media {
    margin: 0;
    position: relative;
    z-index: 1;
}

.hp4u-sponsor-img {
    display: block;
    max-width: 100%;
    height: auto;
}

.hp4u-sponsor-link:hover::before,
.hp4u-sponsor-link:focus-visible::before {
    opacity: 1;
}

.hp4u-sponsor-link:hover,
.hp4u-sponsor-link:focus-visible {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Focus styles (keyboard): WCAG AA visible focus 
.hp4u-sponsor-link:focus {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.hp4u-sponsor-link:focus:not(:focus-visible) {
    outline: none;
}
*/
/* Visually hidden helper for SR-only text */
.hp4u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 4 columns */
@media (max-width: 1024px) {
    .hp4u-sponsor-grid-item {
        flex-basis: calc((100% - (3 * var(--hp4u-sponsor-gap))) / 4);
    }
}

/* 3 columns */
@media (max-width: 800px) {
    .hp4u-sponsor-grid-item {
        flex-basis: calc((100% - (2 * var(--hp4u-sponsor-gap))) / 3);
    }
}

/* 2 columns */
@media (max-width: 600px) {
    .hp4u-sponsor-grid-item {
        flex-basis: calc((100% - (1 * var(--hp4u-sponsor-gap))) / 2);
    }
}

/* 1 column */
@media (max-width: 400px) {
    .hp4u-sponsor-grid-item {
        flex-basis: 100%;
    }
}


/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .hp4u-sponsor-link,
    .hp4u-sponsor-logo,
    .hp4u-sponsor-media {
        transition: none;
    }

    .hp4u-sponsor-link::before {
        transition: none;
    }
}