/**
 * Obloko Sellout theme — Bento category grid styles.
 *
 * Hand-written plain CSS (no Tailwind CLI / build step available on this
 * environment — monolith / out-of-the-box only). This file supplies the
 * hover/pan/shadow/gradient effects that are not present in the
 * precompiled Hyvä `styles.css`, using our own scoped class names so we
 * don't depend on Tailwind's JIT output containing arbitrary utilities.
 *
 * Rows use CSS Grid (not flexbox) with `grid-template-columns` set
 * per-row via inline style (fr units matching each tile's weight — 1fr
 * for full-width, 1fr/2fr or 2fr/1fr for split rows). This guarantees
 * that column + gap widths always sum exactly to the row's full width,
 * so tile edges line up identically across all 3 rows regardless of row
 * type — unlike percentage-based flex widths, which overflow once a
 * `gap` is added.
 *
 * Tile anatomy (stacking order, bottom to top):
 *   .obl-bento-fg          — foreground layer: product image, filling the
 *                            whole tile. Hidden underneath the bg layer
 *                            by default, revealed as bg slides away.
 *   .obl-bento-bg          — background layer: category image or a soft
 *                            gradient fallback. Slides off toward the
 *                            nearest edge on hover (only when a product
 *                            preview actually exists underneath).
 *   .obl-bento-caption     — category name badge, always on top, never
 *                            moves or fades — independent of the bg/fg
 *                            hover animation.
 */

.obl-bento-row {
    display: grid;
    grid-template-columns: 1fr; /* overridden inline per-row on sm+ */
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Mobile: always a single column, one tile per row. Split rows collapse
   to just their first (wider/left) tile so only 3 categories total show
   up, stacked in one column — matching the 3-row limit. */
@media (max-width: 639.98px) {
    .obl-bento-row {
        grid-template-columns: 1fr !important;
    }

    .obl-bento-row--split .obl-bento-tile:nth-child(2) {
        display: none;
    }
}

@media (min-width: 640px) {
    .obl-bento-row {
        gap: 2rem;
        margin-bottom: 2rem;
    }
}

.obl-bento-row:last-child {
    margin-bottom: 0;
}

/* All rows share the same height so tile edges align vertically too. */
.obl-bento-row--full,
.obl-bento-row--split {
    height: 300px;
}

@media (min-width: 640px) {
    .obl-bento-row--full,
    .obl-bento-row--split {
        height: 430px;
    }
}

.obl-bento-tile {
    position: relative;
    display: block;
    min-width: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.25rem;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
    transition: box-shadow 350ms ease, transform 350ms ease;
}

.obl-bento-tile:hover {
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
    transform: translateY(-3px) scale(1.01);
}

/* Background layer (category image / gradient fallback) */
.obl-bento-bg {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    background: linear-gradient(135deg, #eef1f6 0%, #e4e9f2 100%);
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.obl-bento-bg-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform 500ms ease;
}

.obl-bento-tile:hover .obl-bento-bg-image {
    transform: scale(1.04);
}

/* Soft gradient fallback (no category image set) */
.obl-bento-fallback {
    height: 100%;
    width: 100%;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.6), transparent 45%),
        linear-gradient(135deg, #eef1f6 0%, #dde3ee 100%);
}

/* Foreground layer (product preview), sits behind the background layer
   and is revealed once the background slides away on hover. */
.obl-bento-fg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background-color: #ffffff;
}

.obl-bento-fg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1.06);
    transition: transform 500ms ease;
}

.obl-bento-tile--has-preview:hover .obl-bento-fg-image {
    transform: scale(1);
}

/* Hover: slide the background layer fully off toward its nearest edge,
   only when a product preview actually exists underneath. */
.obl-bento-tile--has-preview:hover .obl-bento-bg--pan-left {
    transform: translateX(-100%);
}

.obl-bento-tile--has-preview:hover .obl-bento-bg--pan-right {
    transform: translateX(100%);
}

.obl-bento-tile--has-preview:hover .obl-bento-bg--pan-up {
    transform: translateY(-100%);
}

.obl-bento-tile--has-preview:hover .obl-bento-bg--pan-down {
    transform: translateY(100%);
}

/* Gradient overlay for legibility over category images (real photos) */
.obl-bento-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0) 55%);
    pointer-events: none;
}

/* Category name badge — always on top (z-index 3), independent of the
   bg/fg hover animation, so it never moves, fades or disappears. */
.obl-bento-caption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 3;
    pointer-events: none;
}

.obl-bento-caption-title {
    display: inline-block;
    margin: 0;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 600;
    color: #0f172a; /* slate-900 */
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(4px);
}

@media (min-width: 640px) {
    .obl-bento-caption {
        left: 1.25rem;
        bottom: 1.25rem;
    }

    .obl-bento-caption-title {
        font-size: 1rem;
        padding: 0.5rem 1rem;
        text-transform: uppercase;
    }
}