/**
 * Dynamic Grid - All layout styles
 *
 * Layouts: default (card grid), bento, list, scroller, fullscreen
 * Uses data-attribute selectors exclusively.
 * Uses O6TK global CSS variables for radius, transitions, shadows.
 *
 * @package O6Toolkit
 * @since   3.0.0
 */

/* ================================================================
   SHARED BASE
   ================================================================ */

.o6tk-grid {
    width: 100%;
    box-sizing: border-box;
}

.o6tk-grid *,
.o6tk-grid *::before,
.o6tk-grid *::after {
    box-sizing: border-box;
}

.o6tk-grid [data-item] {
    position: relative;
    overflow: hidden;
    border-radius: var(--o6tk-radius-md, 8px);
    background: var(--o6tk-grid-card-bg, #ffffff);
    transition: transform var(--o6tk-dur-base, 0.25s) var(--o6tk-ease-default, ease),
                box-shadow var(--o6tk-dur-base, 0.25s) var(--o6tk-ease-default, ease);
}

.o6tk-grid [data-item]:hover {
    transform: translateY(-2px);
    box-shadow: var(--o6tk-shadow-md, 0 4px 12px rgba(0,0,0,0.1));
}

/* Image */
.o6tk-grid [data-slot="image-wrap"] {
    position: relative;
    overflow: hidden;
}

.o6tk-grid [data-slot="image"] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--o6tk-ease-default, ease);
}

.o6tk-grid [data-item]:hover [data-slot="image"] {
    transform: scale(1.03);
}

/* Overlay (bento, fullscreen) */
.o6tk-grid [data-slot="overlay"] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
    pointer-events: none;
}

/* Badge */
.o6tk-grid [data-slot="badge"] {
    display: inline-block;
    padding: 0.25em 0.75em;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--o6tk-radius-sm, 4px);
    background: var(--o6tk-grid-badge-bg, rgba(99,102,241,0.12));
    color: var(--o6tk-grid-badge-color, #6366f1);
    line-height: 1.4;
}

/* Content wrapper */
.o6tk-grid [data-slot="content"] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Title */
.o6tk-grid [data-slot="title"] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--o6tk-grid-title-color, #0f172a);
}

.o6tk-grid [data-slot="title"] a {
    color: inherit;
    text-decoration: none;
    transition: color var(--o6tk-dur-base, 0.25s) var(--o6tk-ease-default, ease);
}

.o6tk-grid [data-slot="title"] a:hover {
    color: var(--o6tk-primary, #6366f1);
}

/* Subtitle */
.o6tk-grid [data-slot="subtitle"] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--o6tk-grid-subtitle-color, #64748b);
    font-weight: 500;
}

/* Excerpt */
.o6tk-grid [data-slot="excerpt"] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--o6tk-grid-text-color, #475569);
}

/* Meta */
.o6tk-grid [data-slot="meta"] {
    font-size: 0.75rem;
    color: var(--o6tk-grid-meta-color, #94a3b8);
    font-weight: 500;
}

.o6tk-grid [data-slot="meta-row"] {
    display: flex;
    gap: 1rem;
    align-items: center;
}


/* ================================================================
   DEFAULT GRID (equal columns, card style)
   ================================================================ */

[data-grid="default"] {
    display: grid;
    gap: 1.5rem;
}

[data-grid="default"][data-grid-columns="1"] { grid-template-columns: 1fr; }
[data-grid="default"][data-grid-columns="2"] { grid-template-columns: repeat(2, 1fr); }
[data-grid="default"][data-grid-columns="3"] { grid-template-columns: repeat(3, 1fr); }
[data-grid="default"][data-grid-columns="4"] { grid-template-columns: repeat(4, 1fr); }
[data-grid="default"][data-grid-columns="5"] { grid-template-columns: repeat(5, 1fr); }
[data-grid="default"][data-grid-columns="6"] { grid-template-columns: repeat(6, 1fr); }

[data-grid="default"] [data-slot="image-wrap"] {
    aspect-ratio: 16 / 10;
}

[data-grid="default"] [data-slot="content"] {
    padding: 1.25rem;
}


/* ================================================================
   BENTO GRID
   ================================================================ */

[data-grid="bento"] {
    display: grid;
    gap: 1rem;
}

[data-grid="bento"][data-grid-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
}

[data-grid="bento"][data-grid-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

[data-grid="bento"][data-grid-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
}

/* Featured item spans 2 columns, taller */
[data-grid="bento"] [data-item="featured"] {
    grid-column: span 2;
    grid-row: span 2;
}

[data-grid="bento"] [data-slot="image-wrap"] {
    position: absolute;
    inset: 0;
}

[data-grid="bento"] [data-item]:not([data-item="featured"]) [data-slot="image-wrap"] {
    position: relative;
    aspect-ratio: 16 / 10;
}

[data-grid="bento"] [data-item="featured"] {
    min-height: 400px;
}

[data-grid="bento"] [data-item]:not([data-item="featured"]) {
    display: flex;
    flex-direction: column;
}

/* Content overlay for featured item */
[data-grid="bento"] [data-item="featured"] [data-slot="content"] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    z-index: 2;
    color: #ffffff;
}

[data-grid="bento"] [data-item="featured"] [data-slot="title"] a {
    color: #ffffff;
}

[data-grid="bento"] [data-item="featured"] [data-slot="subtitle"],
[data-grid="bento"] [data-item="featured"] [data-slot="excerpt"] {
    color: rgba(255,255,255,0.8);
}

[data-grid="bento"] [data-item="featured"] [data-slot="meta"] {
    color: rgba(255,255,255,0.6);
}

[data-grid="bento"] [data-item="featured"] [data-slot="badge"] {
    background: rgba(255,255,255,0.2);
    color: #ffffff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Non-featured items */
[data-grid="bento"] [data-item]:not([data-item="featured"]) [data-slot="content"] {
    padding: 1rem 1.25rem 1.25rem;
    flex: 1;
}


/* ================================================================
   LIST LAYOUT
   ================================================================ */

[data-grid="list"] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

[data-grid="list"] [data-item] {
    display: grid;
    grid-template-columns: 280px 1fr;
    align-items: stretch;
}

[data-grid="list"] [data-slot="image-wrap"] {
    aspect-ratio: auto;
    min-height: 180px;
}

[data-grid="list"] [data-slot="content"] {
    padding: 1.5rem;
    justify-content: center;
}

[data-grid="list"] [data-slot="title"] {
    font-size: 1.25rem;
}


/* ================================================================
   SCROLLER (horizontal snap-scroll)
   ================================================================ */

[data-grid="scroller"] {
    position: relative;
}

[data-scroller-track] {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
}

[data-scroller-track]::-webkit-scrollbar {
    display: none;
}

[data-grid="scroller"] [data-item] {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* Card width based on columns attribute */
[data-grid="scroller"][data-grid-columns="2"] [data-item] { width: calc(50% - 0.625rem); }
[data-grid="scroller"][data-grid-columns="3"] [data-item] { width: calc(33.333% - 0.833rem); }
[data-grid="scroller"][data-grid-columns="4"] [data-item] { width: calc(25% - 0.9375rem); }

[data-grid="scroller"] [data-slot="image-wrap"] {
    aspect-ratio: 16 / 10;
}

[data-grid="scroller"] [data-slot="content"] {
    padding: 1.25rem;
}

/* Navigation arrows */
[data-scroller-nav] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

[data-scroller-prev],
[data-scroller-next] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--o6tk-grid-border-color, #e2e8f0);
    border-radius: var(--o6tk-radius-sm, 4px);
    background: var(--o6tk-grid-card-bg, #ffffff);
    color: var(--o6tk-grid-text-color, #475569);
    cursor: pointer;
    transition: all var(--o6tk-dur-base, 0.25s) var(--o6tk-ease-default, ease);
    padding: 0;
}

[data-scroller-prev]:hover,
[data-scroller-next]:hover {
    background: var(--o6tk-primary, #6366f1);
    border-color: var(--o6tk-primary, #6366f1);
    color: #ffffff;
}


/* ================================================================
   FULLSCREEN (vertical full-viewport sections)
   ================================================================ */

[data-grid="fullscreen"] {
    position: relative;
}

[data-grid="fullscreen"] [data-item] {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    border-radius: 0;
    background: #0b0b0c;
    overflow: hidden;
}

[data-grid="fullscreen"] [data-item]:hover {
    transform: none;
    box-shadow: none;
}

[data-grid="fullscreen"] [data-slot="image-wrap"] {
    position: absolute;
    inset: 0;
}

[data-grid="fullscreen"] [data-slot="overlay"] {
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 40%, transparent 70%);
}

[data-grid="fullscreen"] [data-slot="content"] {
    position: relative;
    z-index: 2;
    padding: 4rem;
    padding-bottom: 6rem;
    max-width: 640px;
    color: #ffffff;
    gap: 0.75rem;
}

[data-grid="fullscreen"] [data-slot="title"] {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 700;
}

[data-grid="fullscreen"] [data-slot="title"] a {
    color: #ffffff;
}

[data-grid="fullscreen"] [data-slot="subtitle"],
[data-grid="fullscreen"] [data-slot="excerpt"] {
    color: rgba(255,255,255,0.8);
    font-size: 1rem;
}

[data-grid="fullscreen"] [data-slot="badge"] {
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* CTA link */
[data-grid="fullscreen"] [data-slot="cta"] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    margin-top: 0.5rem;
    transition: gap var(--o6tk-dur-base, 0.25s) var(--o6tk-ease-default, ease);
}

[data-grid="fullscreen"] [data-slot="cta"]:hover {
    gap: 0.75rem;
}

/* Fullscreen navigation */
[data-fullscreen-nav] {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    z-index: 100;
}

[data-fullscreen-counter] {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    gap: 0.25rem;
}

[data-fullscreen-current] {
    font-size: 1.25rem;
}

[data-fullscreen-separator] {
    opacity: 0.4;
}

[data-fullscreen-dots] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[data-fullscreen-dot] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.5);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all var(--o6tk-dur-base, 0.25s) var(--o6tk-ease-default, ease);
}

[data-fullscreen-dot].is-active {
    background: #ffffff;
    border-color: #ffffff;
    transform: scale(1.2);
}

[data-fullscreen-dot]:hover {
    border-color: #ffffff;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Tablet: <= 1023px */
@media (max-width: 1023px) {
    /* Default grid: max 2 columns */
    [data-grid="default"][data-grid-columns="3"],
    [data-grid="default"][data-grid-columns="4"],
    [data-grid="default"][data-grid-columns="5"],
    [data-grid="default"][data-grid-columns="6"] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Bento: simplify to 2 columns */
    [data-grid="bento"][data-grid-columns="3"],
    [data-grid="bento"][data-grid-columns="4"] {
        grid-template-columns: repeat(2, 1fr);
    }

    [data-grid="bento"] [data-item="featured"] {
        min-height: 320px;
    }

    /* List: narrower image */
    [data-grid="list"] [data-item] {
        grid-template-columns: 220px 1fr;
    }

    /* Scroller: show 2 cards */
    [data-grid="scroller"][data-grid-columns="3"] [data-item],
    [data-grid="scroller"][data-grid-columns="4"] [data-item] {
        width: calc(50% - 0.625rem);
    }

    /* Fullscreen nav */
    [data-fullscreen-nav] {
        right: 1rem;
    }

    [data-grid="fullscreen"] [data-slot="content"] {
        padding: 2rem;
        padding-bottom: 4rem;
    }
}

/* Mobile: <= 767px */
@media (max-width: 767px) {
    /* Default grid: single column */
    [data-grid="default"] {
        grid-template-columns: 1fr !important;
    }

    /* Bento: single column, no spanning */
    [data-grid="bento"] {
        grid-template-columns: 1fr !important;
    }

    [data-grid="bento"] [data-item="featured"] {
        grid-column: span 1;
        grid-row: span 1;
        min-height: 280px;
    }

    /* List: stack vertically */
    [data-grid="list"] [data-item] {
        grid-template-columns: 1fr;
    }

    [data-grid="list"] [data-slot="image-wrap"] {
        aspect-ratio: 16 / 9;
        min-height: auto;
    }

    /* Scroller: single card visible */
    [data-grid="scroller"] [data-item] {
        width: 85vw !important;
    }

    /* Fullscreen */
    [data-grid="fullscreen"] [data-slot="content"] {
        padding: 1.5rem;
        padding-bottom: 3rem;
    }

    [data-grid="fullscreen"] [data-slot="title"] {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    [data-fullscreen-nav] {
        position: fixed;
        right: auto;
        left: 50%;
        top: auto;
        bottom: 1.5rem;
        transform: translateX(-50%);
        flex-direction: row;
    }

    [data-fullscreen-counter] {
        flex-direction: row;
        gap: 0.25rem;
    }

    [data-fullscreen-dots] {
        flex-direction: row;
    }
}

/* Small mobile: <= 479px */
@media (max-width: 479px) {
    [data-grid="default"] [data-slot="content"],
    [data-grid="bento"] [data-item]:not([data-item="featured"]) [data-slot="content"],
    [data-grid="scroller"] [data-slot="content"] {
        padding: 1rem;
    }

    [data-grid="bento"] [data-item="featured"] [data-slot="content"] {
        padding: 1.5rem;
    }

    [data-grid="bento"] [data-item="featured"] {
        min-height: 240px;
    }

    .o6tk-grid [data-slot="title"] {
        font-size: 1rem;
    }

    .o6tk-grid [data-slot="excerpt"] {
        font-size: 0.8125rem;
    }
}