/* ===================
 * Wall of Love — masonry grid + isolated lightbox.
 * All classes are `.wol-*` prefixed so nothing collides with the site-wide `.lightbox`.
 * =================== */

/* -------- Page header: center the title + subtitle on Wall of Love pages only.
 * Scoped via `:has(.wol-grid)` so this rule only matches pages that contain
 * a Wall of Love grid. Zero effect on any other page. -------- */
article.page:has(.wol-grid) .reveal-title,
article.page:has(.wol-grid) .reveal-subtitle,
article.page:has(.wol-grid) .post-subtitle {
    text-align: center;
}

/* Company logo above the title. We use flexbox + `display: contents` on the
 * content wrapper so the logo (rendered inside the markdown body) can be
 * reordered ABOVE the layout-rendered title without modifying _layouts/page.html. */
article.page:has(.wol-grid) {
    display: flex;
    flex-direction: column;
}
article.page:has(.wol-grid) > .reveal-content {
    display: contents;
}
article.page:has(.wol-grid) .wol-company-header { order: 1; }
article.page:has(.wol-grid) > .reveal-title { order: 2; }
article.page:has(.wol-grid) > .post-subtitle,
article.page:has(.wol-grid) > .reveal-subtitle { order: 3; }
article.page:has(.wol-grid) .wol-grid { order: 4; }
article.page:has(.wol-grid) > *:not(.wol-company-header):not(.reveal-title):not(.post-subtitle):not(.reveal-subtitle):not(.wol-grid) {
    order: 5;
}

.wol-company-header {
    text-align: center;
    margin-top: var(--space-1h);
    margin-bottom: 0;
    line-height: 0;        /* kill inline-box strut so logo hugs the title */
}

.wol-company-logo {
    display: inline-block;
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin: 0;
}

/* Space between logo and title on Wall of Love pages (scoped) */
article.page:has(.wol-grid) > .reveal-title {
    margin-top: var(--space-2);
}

/* -------- Masonry grid (via CSS columns) -------- */
/* Break out of the content container so the grid uses the full viewport width.
 * The 100vw trick lets images flow across the width axis without being capped
 * by the surrounding `.container.content` max-width. */
.wol-grid {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    padding: 0 var(--space-2);
    column-count: 4;
    column-gap: var(--space-sm);
    margin-top: var(--space-2h);
    margin-bottom: var(--space-4);
}

/* Extra-wide screens: more columns so individual tiles don't get huge */
@media (min-width: 1600px) { .wol-grid { column-count: 5; } }
@media (min-width: 2000px) { .wol-grid { column-count: 6; } }

.wol-item {
    display: block;
    width: 100%;
    margin: 0 0 var(--space-sm);
    padding: 0;
    background: none;
    border: 0;
    line-height: 0;        /* kill inline-text box space that leaks into the vertical gap */
    font-size: 0;
    cursor: pointer;
    break-inside: avoid;
    border-radius: var(--image-radius);
    overflow: hidden;
    transition: opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.wol-item:hover {
    opacity: 0.88;
}

.wol-item:focus-visible {
    outline: 2px solid var(--matcha, #3b82f6);
    outline-offset: 2px;
}

.wol-item img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;                /* override site-wide img margin that was leaking 48px vertical per tile */
    padding: 0;
    border-radius: inherit;
}

@media (max-width: 1200px) {
    .wol-grid { column-count: 3; }
}
@media (max-width: 900px) {
    .wol-grid { column-count: 2; padding: 0 var(--space-1); }
}
@media (max-width: 600px) {
    .wol-grid { column-count: 1; padding: 0 var(--space-1); }
}

/* -------- Lightbox shell -------- */
.wol-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.wol-lightbox[hidden] {
    display: none !important;
}

.wol-lightbox.active {
    opacity: 1;
}

/* Inner panel that holds image + context side by side */
.wol-lightbox-inner {
    position: relative;
    display: flex;
    gap: var(--space-2);
    width: 100%;
    max-width: min(1200px, 95vw);
    max-height: 90vh;
    background: var(--white);
    border-radius: var(--box-radius);
    padding: var(--space-1h);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
    outline: none;
}

/* When the clicked item has no context, shrink the panel to fit just the image */
.wol-lightbox-inner--image-only {
    width: auto;
    max-width: 95vw;
}
.wol-lightbox-inner--image-only .wol-lightbox-image-pane {
    flex: 0 1 auto;
}

.wol-lightbox-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: transparent;
    border: 0;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: var(--gray-700);
    z-index: 1001;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
}

.wol-lightbox-close:hover,
.wol-lightbox-close:focus-visible {
    background: var(--gray-100);
    color: var(--gray-900);
}

/* Image pane */
.wol-lightbox-image-pane {
    flex: 1 1 65%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wol-lightbox-image-pane img {
    max-width: 100%;
    max-height: calc(90vh - 3rem);
    object-fit: contain;
    border-radius: var(--image-radius);
    display: block;
}

/* Context pane */
.wol-lightbox-context-pane {
    flex: 1 1 35%;
    min-width: 260px;
    max-width: 400px;
    overflow-y: auto;
    font-family: var(--body-font);
    color: var(--gray-900);
    padding-right: 2rem; /* leave room for the close button */
}

.wol-lightbox-meta {
    font-family: var(--code-font);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gray-600);
    margin-bottom: var(--space-1);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wol-lightbox-from {
    font-weight: 700;
    color: var(--gray-900);
    font-size: 0.8rem;
}

.wol-lightbox-context p {
    margin: 0 0 var(--space-1);
    line-height: 1.55;
}

.wol-lightbox-context p:last-child {
    margin-bottom: 0;
}

/* -------- Mobile: stack vertically (image top, context bottom) -------- */
@media (max-width: 768px) {
    .wol-lightbox {
        padding: var(--space-sm);
    }
    .wol-lightbox-inner {
        flex-direction: column;
        max-height: 95vh;
        padding: var(--space-1);
        gap: var(--space-1);
    }
    .wol-lightbox-image-pane {
        flex: 0 0 auto;
    }
    .wol-lightbox-image-pane img {
        max-height: 50vh;
    }
    .wol-lightbox-context-pane {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
        padding-right: 0;
    }
    .wol-lightbox-close {
        top: 0.25rem;
        right: 0.5rem;
    }
}