/**
 * Fab Puzzle Grid — Frontend Styles
 *
 * 6 Grid Layouts + base item/overlay/hover styles.
 *
 * @package Fab_Puzzle_Grid
 */

/* =============================================
   Base wrapper
   ============================================= */
.fpg-grid-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* =============================================
   Base Grid
   ============================================= */
.fpg-grid {
    display: grid;
    width: 100%;
}

/* =============================================
   Grid Item
   ============================================= */
.fpg-grid__item {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

/* =============================================
   Thumbnail
   ============================================= */
.fpg-grid__thumb {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.fpg-grid__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* =============================================
   Overlay (gradient + text)
   ============================================= */
.fpg-grid__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 60%);
    z-index: 2;
    pointer-events: none;
}

.fpg-grid__category {
    display: block;
    text-transform: uppercase;
    margin-bottom: 2px;
    line-height: 1.3;
}

.fpg-grid__title {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1.3;
    color: inherit;
}

.fpg-grid__price {
    display: block;
    margin-top: 4px;
    line-height: 1.3;
}

/* =============================================
   GRID 1 — 3 items
   2-col 2-row, item 1 tall (col 1, row 1-2)
   Items 2-3 col 2
   ============================================= */
.fpg-grid--1 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.fpg-grid--1 .fpg-grid__item--1 {
    grid-column: 1;
    grid-row: 1 / 3;
    aspect-ratio: auto;
}

.fpg-grid--1 .fpg-grid__item--2,
.fpg-grid--1 .fpg-grid__item--3 {
    grid-column: 2;
    aspect-ratio: 4 / 3;
}

/* =============================================
   GRID 2 — 3 items
   2-col 2-row, item 3 tall (col 2, row 1-2)
   Items 1-2 col 1
   ============================================= */
.fpg-grid--2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.fpg-grid--2 .fpg-grid__item--1,
.fpg-grid--2 .fpg-grid__item--2 {
    grid-column: 1;
    aspect-ratio: 4 / 3;
}

.fpg-grid--2 .fpg-grid__item--3 {
    grid-column: 2;
    grid-row: 1 / 3;
    aspect-ratio: auto;
}

/* =============================================
   GRID 3 — 2 items
   2-col 1-row, both 4:3
   ============================================= */
.fpg-grid--3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
}

.fpg-grid--3 .fpg-grid__item {
    aspect-ratio: 4 / 3;
}

/* =============================================
   GRID 4 — 3 items
   3-col 1-row, all 3:4 (portrait)
   ============================================= */
.fpg-grid--4 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
}

.fpg-grid--4 .fpg-grid__item {
    aspect-ratio: 3 / 4;
}

/* =============================================
   GRID 5 — 4 items
   2-col 2-row, all 4:3
   ============================================= */
.fpg-grid--5 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
}

.fpg-grid--5 .fpg-grid__item {
    aspect-ratio: 4 / 3;
}

/* =============================================
   GRID 6 — 6 items
   3-col 2-row, all 4:3
   ============================================= */
.fpg-grid--6 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
}

.fpg-grid--6 .fpg-grid__item {
    aspect-ratio: 4 / 3;
}

/* =============================================
   MOBILE — max-width 767px
   All grids become 1-column
   ============================================= */
@media (max-width: 767px) {

    /* All grids: single column */
    .fpg-grid--1,
    .fpg-grid--2,
    .fpg-grid--3,
    .fpg-grid--4,
    .fpg-grid--5,
    .fpg-grid--6 {
        grid-template-columns: 1fr;
    }

    /* Grid 1: item 1 no longer spans 2 rows, becomes 1:1; items 2-3 stay 4:3 */
    .fpg-grid--1 .fpg-grid__item--1 {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 1 / 1;
    }

    .fpg-grid--1 .fpg-grid__item--2,
    .fpg-grid--1 .fpg-grid__item--3 {
        grid-column: auto;
        aspect-ratio: 4 / 3;
    }

    /* Grid 2: item 3 no longer spans 2 rows, becomes 1:1; items 1-2 stay 4:3 */
    .fpg-grid--2 .fpg-grid__item--1,
    .fpg-grid--2 .fpg-grid__item--2 {
        grid-column: auto;
        aspect-ratio: 4 / 3;
    }

    .fpg-grid--2 .fpg-grid__item--3 {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 1 / 1;
    }

    /* Grid 3: both become 1:1 */
    .fpg-grid--3 .fpg-grid__item {
        aspect-ratio: 1 / 1;
    }

    /* Grid 4: all become 4:3 (from portrait 3:4) */
    .fpg-grid--4 .fpg-grid__item {
        aspect-ratio: 4 / 3;
    }

    /* Grid 5: all stay 4:3 — no aspect change needed */

    /* Grid 6: all become 1:1 */
    .fpg-grid--6 .fpg-grid__item {
        aspect-ratio: 1 / 1;
    }

    /* Overlay padding slightly smaller on mobile */
    .fpg-grid__overlay {
        padding: 12px;
    }
}