/*
 * Pillar Design — Projects Gallery Page Styles
 * projects.css — place in stockholm-child/
 *
 * Load via functions.php — add this to pillar_case_study_styles():
 *
 *   if ( is_page( 'projects' ) ) {
 *       wp_enqueue_style(
 *           'pillar-projects',
 *           get_stylesheet_directory_uri() . '/projects.css',
 *           array(),
 *           '1.0.0'
 *       );
 *   }
 */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

/* ── Scroll fade-in ──────────────────────────────────────────────────────────── */

.pj-fade {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.pj-fade--in {
    opacity: 1;
    transform: translateY(0);
}

/* ── Break out of Stockholm containers ───────────────────────────────────────── */

body.page-template-page-projects #content,
body.page-template-page-projects #content_wrapper,
body.page-template-page-projects .content_wrapper,
body.page-template-page-projects .container,
body.page-template-page-projects .post_content_holder,
body.page-template-page-projects .post_content,
body.page-template-page-projects .entry-content,
body.page-template-page-projects .wpb_wrapper,
body.page-template-page-projects .vc_column-inner,
body.page-template-page-projects .content_inner {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

body.page-template-page-projects .title_outer,
body.page-template-page-projects #title_outer_holder,
body.page-template-page-projects .title_outer_holder,
body.page-template-page-projects .title_without_animation {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Page wrapper ────────────────────────────────────────────────────────────── */

.pj-page {
    font-family: 'Barlow', sans-serif;
    background: #fff;
    padding: 72px 48px 80px;
    max-width: 100%;
}

/* ── Filter buttons ──────────────────────────────────────────────────────────── */

.pj-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 48px;
}

.pj-filter {
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: #aaa;
    background: transparent;
    border: 1px solid #e0e0e0;
    padding: 8px 18px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pj-filter:hover {
    color: #1a1a1a;
    border-color: #1a1a1a;
}

.pj-filter--active {
    color: #1a1a1a;
    border-color: #1a1a1a;
    background: #1a1a1a;
    color: #fff;
}

/* ── Grid ────────────────────────────────────────────────────────────────────── */
/*
 * Two-column grid. Normal cards take 1 column. Featured (wide) cards
 * span both columns. Grid auto-places everything naturally.
 */

.pj-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

/* ── Card ────────────────────────────────────────────────────────────────────── */

.pj-card {
    display: block;
    text-decoration: none;
    color: #1a1a1a;
    position: relative;
    overflow: hidden;
}

.pj-card--wide {
    grid-column: 1 / -1;
}

.pj-card__img {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    background: #f0f0f0;
    position: relative;
}

.pj-card__img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    transition: background 0.3s ease;
    pointer-events: none;
}

.pj-card:hover .pj-card__img::after {
    background: rgba(255, 255, 255, 0.12);
}

.pj-card__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pj-card__default {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
    transition: opacity 0.3s ease;
}

.pj-card__hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pj-card:hover .pj-card__default {
    opacity: 0;
}

.pj-card:hover .pj-card__hover {
    opacity: 1;
}

.pj-card__title {
    font-family: 'Barlow', sans-serif;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 5px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.pj-card__tagline {
    font-family: 'Barlow', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.pj-card__services {
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    letter-spacing: 0.08em;
    font-style: italic;
    opacity: 0.7;
}

/* Normal card image — 3:2 ratio */
.pj-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
    aspect-ratio: 3 / 2;
}

/* Wide card image — wider, shallower ratio */
.pj-card--wide .pj-card__img img {
    aspect-ratio: 16 / 7;
}

.pj-card:hover .pj-card__img img {
    transform: scale(1.03);
}

/* ── Empty state ─────────────────────────────────────────────────────────────── */

.pj-empty {
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    color: #aaa;
    grid-column: 1 / -1;
    padding: 48px 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media ( max-width: 768px ) {

    .pj-page {
        padding: 40px 24px 56px;
    }

    .pj-grid {
        grid-template-columns: 1fr;
    }

    .pj-card--wide {
        grid-column: 1;
    }

    .pj-card--wide .pj-card__img img {
        aspect-ratio: 3 / 2;
    }
}

/* ── Project Archive ─────────────────────────────────────────────────────────── */

.pj-archive {
    padding: 80px 48px 80px;
    font-family: 'Barlow', sans-serif;
}

.pj-archive__header {
    margin-bottom: 40px;
}

.pj-archive__label {
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #aaa;
    font-style: italic;
}

.pj-archive__table {
    width: 100%;
}

.pj-archive__thead {
    display: grid;
    grid-template-columns: 200px 1fr 80px 1fr;
    padding: 0 0 12px;
    border-bottom: 1px solid #e8e8e8;
}

.pj-archive__col {
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #aaa;
    font-style: italic;
}

.pj-archive__row {
    display: grid;
    grid-template-columns: 200px 1fr 80px 1fr 24px;
    padding: 18px 0;
    border-bottom: 1px solid #e8e8e8;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.pj-archive__row:hover {
    opacity: 0.6;
}

.pj-archive__row .pj-archive__col {
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    font-style: normal;
    color: #1a1a1a;
}

.pj-archive__arrow {
    font-size: 18px;
    color: #aaa;
    text-align: right;
    transition: transform 0.25s ease;
    line-height: 1;
}

.pj-archive__row.is-open .pj-archive__arrow {
    transform: rotate(45deg);
}

.pj-archive__dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    border-bottom: 1px solid #e8e8e8;
}

.pj-archive__dropdown.is-open {
    max-height: 600px;
}

.pj-archive__dropdown-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding: 32px 0 40px;
    align-items: start;
}

.pj-archive__desc {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
}

.pj-archive__imgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pj-archive__imgs img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

@media ( max-width: 768px ) {
    .pj-archive {
        padding: 48px 24px 48px;
    }
    .pj-archive__thead {
        display: none;
    }
    .pj-archive__row {
        grid-template-columns: 1fr 1fr 40px 24px;
    }
    .pj-archive__col--services {
        display: none;
    }
    .pj-archive__dropdown-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}