/* Home page (front-page.php). Loaded after style.css; the layout itself is Tailwind classes in the template. */

/* The intro comes from the editor as paragraphs; Tailwind resets their spacing and the look of links. */
.barami-home .home-intro p + p {
    margin-top: 1em;
}

.barami-home .home-intro a {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

/* Category tiles: the name appears on hover. Screens without hover (phones) and keyboard focus would never
   show it, so there it is always on. */
.barami-home .home-tile:focus-visible .home-tile__veil,
.barami-home .home-tile:focus-visible .home-tile__name {
    opacity: 1;
    transform: none;
}

@media (hover: none) {
    .barami-home .home-tile__veil,
    .barami-home .home-tile__name {
        opacity: 1;
        transform: none;
    }
}

/* Logos: each in its own rounded tile. */
.barami-home .home-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e7e4dc;
    border-radius: 22px;
}

/* White artwork (file name with "-ondark") sits on a dark tile. */
.barami-home .home-logo--dark {
    background: #161616;
    border-color: #161616;
}

/* The header styles every marquee picture for logos lying straight on the band (fixed height, multiply
   blend). Inside a tile the logo fills the tile instead, and multiply would hide white artwork on dark. */
.barami-home .home-logo .home-logo__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: normal;
}

/* The tiles need less air between them than bare logos did. The second copy starts where the first ends,
   so the gap after the last tile equals the gap between tiles. */
.barami-home .marquee-group {
    gap: 28px;
    padding-right: 28px;
}

/* No moving band for visitors who asked for less motion: one copy, scrolled by hand. */
@media (prefers-reduced-motion: reduce) {
    .barami-home .marquee-track {
        animation: none;
    }

    .barami-home .home-marquee {
        overflow-x: auto;
    }

    .barami-home .marquee-group[aria-hidden="true"] {
        display: none;
    }
}