/**
 * SDC Work Grid Block Styles
 *
 * Work portfolio grid styles based on Figma design specifications
 * Uses a 6-column grid system for flexible item sizing
 *
 * @package SDC_Theme
 * @since 0.1.0
 */

/* ========================================
   WORK GRID CONTAINER
   ======================================== */

.sdc-work-grid {
    position: relative;
    width: 100%;
    background-color: var(--color-white);
    padding: var(--space-7xl) 0;
}

/* Full width alignment */
.sdc-work-grid.alignfull {
    width: 100%;
}

/* Wide alignment */
.sdc-work-grid.alignwide {
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   CONTAINER
   ======================================== */

.sdc-work-grid__container {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--site-padding);
}

@media (max-width: 768px) {
    .sdc-work-grid__container {
        padding: 0 var(--space-lg);
    }
}

/* ========================================
   HEADER SECTION
   ======================================== */

.sdc-work-grid__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2xl);
    gap: var(--space-xl);
}

@media (max-width: 768px) {
    .sdc-work-grid__header {
        flex-direction: column;
        gap: var(--space-lg);
    }
}

.sdc-work-grid__header-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.sdc-work-grid__title {
    font-family: var(--font-primary);
    font-size: var(--text-h2);
    font-weight: var(--font-weight-bold);
    font-style: var(--font-style-normal);
    line-height: var(--leading-normal);
    color: var(--color-accent);
    margin: 0;
}

@media (max-width: 768px) {
    .sdc-work-grid__title {
        font-size: clamp(28px, 8vw, var(--text-h2));
    }
}

.sdc-work-grid__description {
    font-family: var(--font-primary);
    font-size: var(--text-body-medium);
    font-weight: var(--font-weight-regular);
    font-style: var(--font-style-normal);
    line-height: var(--leading-loose);
    color: var(--color-contrast);
    margin: 0;
    max-width: 600px;
}

@media (max-width: 768px) {
    .sdc-work-grid__description {
        font-size: var(--text-body);
    }
}

.sdc-work-grid__header-action {
    flex-shrink: 0;
}

/* ========================================
   FILTER TABS
   ======================================== */

.sdc-work-grid__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
}

@media (max-width: 768px) {
    .sdc-work-grid__filters {
        gap: var(--space-md);
    }
}

.sdc-work-grid__filter {
    font-family: var(--font-primary);
    font-size: var(--text-label);
    font-weight: var(--font-weight-medium);
    font-style: var(--font-style-normal);
    line-height: var(--leading-tight);
    color: var(--color-tertiary);
    background: none;
    border: none;
    padding: var(--space-sm);
    cursor: pointer;
    transition: color 0.2s ease;
}

.sdc-work-grid__filter:hover {
    color: var(--color-secondary);
}

.sdc-work-grid__filter.is-active {
    color: var(--color-secondary);
    font-weight: var(--font-weight-bold);
}

/* ========================================
   GRID LAYOUT - 6 Column System
   ======================================== */

/* Main grid container - single column that holds rows */
.sdc-work-grid__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Each row is a 6-column grid */
.sdc-work-grid__row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--space-lg);
}

/* ========================================
   GRID ITEM SIZES (using 6-column system)
   ======================================== */

/* Large item: spans 4 columns (2/3 width) and 2 rows */
.sdc-work-grid__item--large {
    grid-column: span 4;
    grid-row: span 2;
}

/* Small item: spans 2 columns (1/3 width) and 1 row */
.sdc-work-grid__item--small {
    grid-column: span 2;
    grid-row: span 1;
}

/* Half-width item: spans 3 columns (1/2 width) */
.sdc-work-grid__item--half {
    grid-column: span 3;
    grid-row: span 2;
}

/* ========================================
   ROW LAYOUT VARIATIONS
   ======================================== */

/* Large-left layout: large at columns 1-4, smalls at columns 5-6 */
.sdc-work-grid__row--large-left .sdc-work-grid__item--large {
    grid-column: 1 / span 4;
    grid-row: 1 / span 2;
}

.sdc-work-grid__row--large-left .sdc-work-grid__item--small:nth-of-type(2) {
    grid-column: 5 / span 2;
    grid-row: 1;
}

.sdc-work-grid__row--large-left .sdc-work-grid__item--small:nth-of-type(3) {
    grid-column: 5 / span 2;
    grid-row: 2;
}

/* Large-right layout: large at columns 3-6, smalls at columns 1-2 */
.sdc-work-grid__row--large-right .sdc-work-grid__item--large {
    grid-column: 3 / span 4;
    grid-row: 1 / span 2;
}

.sdc-work-grid__row--large-right .sdc-work-grid__item--small:nth-of-type(2) {
    grid-column: 1 / span 2;
    grid-row: 1;
}

.sdc-work-grid__row--large-right .sdc-work-grid__item--small:nth-of-type(3) {
    grid-column: 1 / span 2;
    grid-row: 2;
}

/* Half-width items row (for 2 items - each takes 1/2) */
.sdc-work-grid__row--halves .sdc-work-grid__item--half:first-child {
    grid-column: 1 / span 3;
    grid-row: 1 / span 2;
}

.sdc-work-grid__row--halves .sdc-work-grid__item--half:last-child {
    grid-column: 4 / span 3;
    grid-row: 1 / span 2;
}

/* Single item on left - half width (3 columns), explicitly left-aligned */
.sdc-work-grid__row--single-left .sdc-work-grid__item--half {
    grid-column: 1 / span 3 !important;
    grid-row: 1 / span 2;
}

/* Single large item (full width - takes 4 cols centered or all 6) */
.sdc-work-grid__row--single-large .sdc-work-grid__item--large {
    grid-column: 1 / span 4;
    grid-row: 1 / span 2;
}

/* All small items row (3 small items = 6 columns) */
.sdc-work-grid__row--all-small {
    grid-template-rows: 1fr;
}

.sdc-work-grid__row--all-small .sdc-work-grid__item--small:nth-child(1) {
    grid-column: 1 / span 2;
    grid-row: 1;
}

.sdc-work-grid__row--all-small .sdc-work-grid__item--small:nth-child(2) {
    grid-column: 3 / span 2;
    grid-row: 1;
}

.sdc-work-grid__row--all-small .sdc-work-grid__item--small:nth-child(3) {
    grid-column: 5 / span 2;
    grid-row: 1;
}

/* ========================================
   TABLET BREAKPOINT (max-width: 1024px)
   ======================================== */

@media (max-width: 1024px) {
    .sdc-work-grid__row {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        gap: var(--space-md);
    }

    /* On tablet, adjust spans for 4-column grid */
    .sdc-work-grid__item--large {
        grid-column: span 2;
        grid-row: span 2;
    }

    .sdc-work-grid__item--small {
        grid-column: span 2;
        grid-row: span 1;
    }

    .sdc-work-grid__item--half {
        grid-column: span 2;
        grid-row: span 2;
    }

    /* Large-left on tablet */
    .sdc-work-grid__row--large-left .sdc-work-grid__item--large {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
    }

    .sdc-work-grid__row--large-left .sdc-work-grid__item--small:nth-of-type(2) {
        grid-column: 3 / span 2;
        grid-row: 1;
    }

    .sdc-work-grid__row--large-left .sdc-work-grid__item--small:nth-of-type(3) {
        grid-column: 3 / span 2;
        grid-row: 2;
    }

    /* Large-right on tablet */
    .sdc-work-grid__row--large-right .sdc-work-grid__item--large {
        grid-column: 3 / span 2;
        grid-row: 1 / span 2;
    }

    .sdc-work-grid__row--large-right .sdc-work-grid__item--small:nth-of-type(2) {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .sdc-work-grid__row--large-right .sdc-work-grid__item--small:nth-of-type(3) {
        grid-column: 1 / span 2;
        grid-row: 2;
    }

    /* Halves on tablet */
    .sdc-work-grid__row--halves .sdc-work-grid__item--half:first-child {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
    }

    .sdc-work-grid__row--halves .sdc-work-grid__item--half:last-child {
        grid-column: 3 / span 2;
        grid-row: 1 / span 2;
    }

    /* Single-left on tablet - explicitly left-aligned */
    .sdc-work-grid__row--single-left .sdc-work-grid__item--half {
        grid-column: 1 / span 2 !important;
        grid-row: 1 / span 2;
    }

    /* All-small on tablet */
    .sdc-work-grid__row--all-small .sdc-work-grid__item--small:nth-child(1) {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .sdc-work-grid__row--all-small .sdc-work-grid__item--small:nth-child(2) {
        grid-column: 3 / span 2;
        grid-row: 1;
    }

    .sdc-work-grid__row--all-small .sdc-work-grid__item--small:nth-child(3) {
        grid-column: 1 / span 2;
        grid-row: 2;
    }
}

/* ========================================
   MOBILE BREAKPOINT (max-width: 600px)
   ======================================== */

@media (max-width: 600px) {
    .sdc-work-grid__row {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: var(--space-md);
    }

    /* All items stack on mobile */
    .sdc-work-grid__item--large,
    .sdc-work-grid__item--small,
    .sdc-work-grid__item--half {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}

/* ========================================
   GRID ITEMS
   ======================================== */

.sdc-work-grid__item {
    position: relative;
    overflow: hidden;
}

.sdc-work-grid__item.is-hidden {
    display: none;
}

/* ========================================
   PROJECT CARDS
   ======================================== */

.sdc-work-grid__grid article {
    border-radius: var(--radius-lg);
}

.sdc-work-grid__card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.sdc-work-grid__card:hover {
    transform: scale(1.02);
}

/* Small card aspect ratio - roughly 3:2 */
.sdc-work-grid__item--small .sdc-work-grid__card {
    aspect-ratio: 377 / 280;
    min-height: 280px;
}

/* Half card aspect ratio */
.sdc-work-grid__item--half .sdc-work-grid__card {
    aspect-ratio: 16 / 10;
    min-height: 320px;
}

/* Large card spans more space */
.sdc-work-grid__item--large .sdc-work-grid__card {
    aspect-ratio: 16 / 10;
    min-height: 584px;
}

@media (max-width: 1024px) {
    .sdc-work-grid__item--small .sdc-work-grid__card {
        min-height: 240px;
    }

    .sdc-work-grid__item--half .sdc-work-grid__card {
        min-height: 280px;
    }

    .sdc-work-grid__item--large .sdc-work-grid__card {
        min-height: 480px;
    }
}

@media (max-width: 600px) {
    .sdc-work-grid__item--small .sdc-work-grid__card,
    .sdc-work-grid__item--half .sdc-work-grid__card,
    .sdc-work-grid__item--large .sdc-work-grid__card {
        aspect-ratio: 16 / 10;
        min-height: 240px;
    }
}

/* ========================================
   CARD BACKGROUND
   ======================================== */

.sdc-work-grid__card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.sdc-work-grid__card-bg--fallback {
    background-color: var(--color-tertiary);
}

/* ========================================
   CARD OVERLAY
   ======================================== */

.sdc-work-grid__card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: background-color 0.3s ease;
}

.sdc-work-grid__card:hover .sdc-work-grid__card-overlay {
    background-color: rgba(0, 0, 0, 0.4);
}

/* ========================================
   CARD CONTENT (LOGO)
   ======================================== */

.sdc-work-grid__card-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
    width: 100%;
    max-width: 80%;
}

.sdc-work-grid__card-logo {
    max-width: 100%;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.sdc-work-grid__item--large .sdc-work-grid__card-logo {
    max-height: 160px;
}

.sdc-work-grid__item--half .sdc-work-grid__card-logo {
    max-height: 140px;
}

/* Text fallback for when no logo */
.sdc-work-grid__card-title-fallback {
    font-family: var(--font-primary);
    font-size: var(--text-h3);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    text-align: center;
    line-height: var(--leading-snug);
}

.sdc-work-grid__item--large .sdc-work-grid__card-title-fallback {
    font-size: var(--text-h2);
}

.sdc-work-grid__item--half .sdc-work-grid__card-title-fallback {
    font-size: var(--text-h3);
}

@media (max-width: 768px) {
    .sdc-work-grid__card-title-fallback {
        font-size: var(--text-h4);
    }

    .sdc-work-grid__item--large .sdc-work-grid__card-title-fallback,
    .sdc-work-grid__item--half .sdc-work-grid__card-title-fallback {
        font-size: var(--text-h3);
    }
}

/* ========================================
   LOAD MORE BUTTON
   ======================================== */

.sdc-work-grid__load-more {
    display: flex;
    justify-content: center;
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
}

.sdc-work-grid__load-more.is-hidden {
    display: none;
}

/* Loading state for ajax */
.sdc-work-grid__load-more.is-loading .sdc-work-grid__load-more-btn {
    opacity: 0.7;
    cursor: not-allowed;
}

.sdc-work-grid__loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-white);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: var(--space-sm);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   EMPTY STATE
   ======================================== */

.sdc-work-grid__empty {
    text-align: center;
    padding: var(--space-4xl) 0;
}

.sdc-work-grid__empty p {
    font-family: var(--font-primary);
    font-size: var(--text-body-medium);
    color: var(--color-muted);
}

/* ========================================
   EDITOR MODE STYLES
   ======================================== */

.wp-block-acf-work-grid .sdc-work-grid__card {
    pointer-events: none;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .sdc-work-grid__card,
    .sdc-work-grid__card-overlay,
    .sdc-work-grid__loading-spinner {
        transition: none;
        animation: none;
    }

    .sdc-work-grid__card:hover {
        transform: none;
    }
}

/* Focus styles */
.sdc-work-grid__card:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.sdc-work-grid__filter:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}