/*
** [yln_honeycomb] - see inc/shortcodes/shortcode-yln-honeycomb.php
** Each hex is a square box (--hex-w, 200px max like the previous live grid)
** clipped to a hexagon 5%-95% of its height, so the visible hex is
** --hex-w x --hex-h (0.9 x --hex-w). The gap is ~10% of the width.
** 7 columns = 5.5 x --hex-w + 6 gaps = 6.1 x --hex-w wide: at 200px that is
** 1220px, wider than the 1080px Divi row, so the grid overflows the row
** evenly on both sides. 14.5vw keeps it within ~88% of the viewport.
*/
.yln-honeycomb {
    --hex-w: min(200px, 14.5vw);
    --hex-h: calc(var(--hex-w) * 0.9);
    --hex-gap: calc(var(--hex-w) * 0.1);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0 auto;
}

.yln-honeycomb-col {
    display: flex;
    flex-direction: column;
    gap: var(--hex-gap);
    flex-shrink: 0;
}

.yln-honeycomb-col + .yln-honeycomb-col {
    margin-left: calc(var(--hex-gap) - var(--hex-w) * 0.25);
}

/* Pull each hex up by the transparent 5% bands above and below the shape */
.yln-hex + .yln-hex {
    margin-top: calc(var(--hex-w) * -0.1);
}

/* 5-logo columns sit half a hex lower than the 6-logo ones */
.yln-honeycomb-col:nth-child(odd) {
    padding-top: calc((var(--hex-h) + var(--hex-gap)) / 2);
}

.yln-hex {
    width: var(--hex-w);
    height: var(--hex-w);
    background: #fff;
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.yln-hex img {
    max-width: 66%;
    max-height: 46%;
    object-fit: contain;
}

/* Too narrow for readable hexes - fall back to a tile grid */
@media (max-width: 767px) {
    .yln-honeycomb {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .yln-honeycomb-col {
        display: contents;
    }

    .yln-hex {
        width: auto;
        height: auto;
        aspect-ratio: 3 / 2;
        border-radius: 8px;
        clip-path: none;
    }

    .yln-hex + .yln-hex {
        margin-top: 0;
    }

    .yln-hex img {
        max-height: 50%;
    }
}

@media (max-width: 479px) {
    .yln-honeycomb {
        grid-template-columns: repeat(2, 1fr);
    }
}