.banner-lahoda-2 {
    width: 100%;
    container-type: inline-size;
}

.banner-lahoda-2__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--space-6) var(--container-gutter);
}

@container (min-width: 768px) {
    .banner-lahoda-2__inner {
        padding: var(--space-7) var(--container-gutter);
    }
}

.banner-lahoda-2__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

@container (min-width: 768px) {
    .banner-lahoda-2__row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container (min-width: 1080px) {
    .banner-lahoda-2__row {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Exactly two tiles (e.g. /svadby: torta vs. zákusky) split the row in
       half instead of leaving the third column empty. */
    .banner-lahoda-2__row:has(> .banner-lahoda-2__tile:nth-child(2):last-child) {
        grid-template-columns: repeat(2, 1fr);
    }
}

.banner-lahoda-2__tile {
    display: flex;
    flex-direction: column;
    background: var(--bg-cream-deep);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition:
        box-shadow var(--transition-base),
        transform var(--transition-base);
}

/*
 * `:has()` scopes the lift to tiles whose link is a real `<a>` — a tile with
 * no `link` renders `.tile-link--static` (a plain div) and shouldn't offer a
 * hover affordance for interactivity it doesn't have.
 */
.banner-lahoda-2__tile:has(> a.banner-lahoda-2__tile-link):hover,
.banner-lahoda-2__tile:has(> a.banner-lahoda-2__tile-link):focus-within {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/*
 * The whole tile is one tap/click target when a link is set (mirrors
 * product-list-lahoda-1's card pattern) — only the trailing "Viac" text used
 * to be a real link, which didn't match the hover-lift on the whole card and
 * left mobile visitors tapping the photo/title with nothing happening.
 */
.banner-lahoda-2__tile-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.banner-lahoda-2__tile-link--static {
    cursor: default;
}

.banner-lahoda-2__image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.banner-lahoda-2__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.banner-lahoda-2__video {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition:
        opacity 0.5s ease,
        transform var(--transition-slow);
}

.banner-lahoda-2__video[data-video-ready="true"] {
    opacity: 1;
}

.banner-lahoda-2__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-5);
}

.banner-lahoda-2__title {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: 22px;
    margin: 0 0 var(--space-2);
}

.banner-lahoda-2__text {
    font-family: var(--font-body);
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 var(--space-3);
}

.banner-lahoda-2__link {
    /* Pushes the link to the bottom of .body regardless of title/text length, so it
       lines up across a row of grid-stretched tiles instead of sitting right after
       the text with leftover empty space below it on shorter tiles. */
    margin-top: auto;
    padding-top: var(--space-3);
    align-self: flex-start;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--brand-red);
    font-weight: 600;
    transition: color var(--transition-fast);
}

/* Now a <span> inside the whole-tile <a> (nested anchors aren't valid HTML) — its
   hover/focus feedback follows the parent link's state instead of its own. */
.banner-lahoda-2__tile-link:hover .banner-lahoda-2__link,
.banner-lahoda-2__tile-link:focus-visible .banner-lahoda-2__link {
    color: var(--brand-red-dark);
    text-decoration: underline;
}

/*
 * Phone (single column, below 768px): a 4:3 photo stacked over title + text
 * made each promo tile ~450px, three of them ~1 350px. Photo and text sit
 * side by side instead — the photo column stretches to the text's height —
 * which brings a tile down to ~170px. Tablet/desktop keep the stacked tile.
 * Kept after every base rule it overrides: a container query adds no
 * specificity, so source order decides.
 */
@container (max-width: 767.98px) {
    .banner-lahoda-2__tile-link {
        flex-direction: row;
        align-items: stretch;
    }

    .banner-lahoda-2__image {
        flex: 0 0 38%;
        aspect-ratio: auto;
        min-height: 140px;
    }

    .banner-lahoda-2__body {
        min-width: 0;
        padding: var(--space-4);
    }

    .banner-lahoda-2__title {
        font-size: 18px;
    }

    .banner-lahoda-2__text {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .banner-lahoda-2__tile,
    .banner-lahoda-2__tile:has(> a.banner-lahoda-2__tile-link):hover,
    .banner-lahoda-2__img,
    .banner-lahoda-2__tile:has(> a.banner-lahoda-2__tile-link):hover
        .banner-lahoda-2__img {
        transition: none;
        transform: none;
    }
}