/* ==========================================================================
   GRILLAPE — GALLERY + UPDATES COMPONENT STYLES
   Covers: page-gallery.php, archive-post.php, single.php
   ========================================================================== */

/* ------------------------------------------------------------------
   GALLERY HERO
------------------------------------------------------------------ */
.gallery-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-4);
}

.gallery-hero__eyebrow {
    color: var(--color-yellow);
    opacity: 1;
}

/* ------------------------------------------------------------------
   GALLERY SECTION
------------------------------------------------------------------ */
.gallery-section {
    padding-block: var(--section-pad-sm);
}

/* Card wrapper — green island sitting on the cream section */
.gallery-card {
    position: relative;
    overflow: hidden;
    background-color: var(--color-green);
    color: var(--color-off-white);
    border-radius: 1.5rem;
    padding: var(--section-pad-sm);
}

.gallery-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../../img/noise.svg');
    background-repeat: repeat;
    background-size: 256px 256px;
    pointer-events: none;
    z-index: 0;
}

/* ------------------------------------------------------------------
   GALLERY FILTER BAR
------------------------------------------------------------------ */
.gallery-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
    margin-bottom: var(--sp-12);
    position: relative;
    z-index: 1;
}

/* Base pill: outlined on dark bg (inherits .btn sizing/shape) */
.gallery-filter__btn {
    background-color: transparent;
    color: var(--color-off-white);
    border-color: var(--color-off-white);
}

.gallery-filter__btn:hover {
    background-color: var(--color-off-white);
    color: var(--color-green);
}

/* Active state: yellow filled */
.gallery-filter__btn.is-active {
    background-color: var(--color-yellow);
    color: var(--color-green);
    border-color: var(--color-yellow);
}

.gallery-filter__btn.is-active:hover {
    background-color: #e5a820;
    border-color: #e5a820;
    color: var(--color-green);
}

/* ------------------------------------------------------------------
   GALLERY GRID
------------------------------------------------------------------ */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    position: relative;
    z-index: 1;
}

@media (min-width: 40rem) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-8);
    }
}

/* ------------------------------------------------------------------
   GALLERY ITEM — shared base
------------------------------------------------------------------ */
.gallery-item {
    border-radius: var(--radius-card);
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.05);
    transition: transform var(--t-base), box-shadow var(--t-base);
}

.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

/* Photo items */
.gallery-item__link {
    display: block;
    line-height: 0;
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform var(--t-slow);
}

.gallery-item:hover img {
    transform: scale(1.03);
}

/* Empty / placeholder state */
.gallery-empty {
    max-width: 36rem;
    margin-inline: auto;
}

/* ------------------------------------------------------------------
   GALLERY ITEM — VIDEO
------------------------------------------------------------------ */
.gallery-item--video {
    position: relative;
}

.gallery-item__video-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-card);
}

/* Poster image shown before play */
.gallery-item__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: opacity var(--t-base);
}

/* Placeholder when no poster thumbnail */
.gallery-item__poster-placeholder {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

/* Native video element (hidden until play is clicked) */
.gallery-item__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Play button overlay */
.gallery-item__play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform var(--t-fast);
}

.gallery-item__play-btn:hover {
    transform: scale(1.1);
}

.gallery-item__play-btn svg {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

/* When video is playing, hide poster and play button */
.gallery-item--playing .gallery-item__poster,
.gallery-item--playing .gallery-item__poster-placeholder,
.gallery-item--playing .gallery-item__play-btn {
    opacity: 0;
    pointer-events: none;
}

.gallery-item--playing .gallery-item__video {
    z-index: 3;
}

/* ------------------------------------------------------------------
   LIGHTBOX
------------------------------------------------------------------ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base);
}

.lightbox.is-open {
    opacity: 1;
    pointer-events: all;
}

.lightbox__figure {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-16) var(--sp-20);
}

.lightbox__img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-card);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    transition: opacity var(--t-fast);
    display: block;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast), transform var(--t-fast);
}

.lightbox__close {
    position: fixed;
    top: var(--sp-6);
    right: var(--sp-6);
    width: 2.75rem;
    height: 2.75rem;
    z-index: 10001;
}

.lightbox__prev,
.lightbox__next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 3.25rem;
    height: 3.25rem;
    z-index: 10001;
}

.lightbox__prev { left: var(--sp-6); }
.lightbox__next { right: var(--sp-6); }

.lightbox__close:hover { background: rgba(255, 255, 255, 0.18); }
.lightbox__prev:hover  { background: rgba(255, 255, 255, 0.18); transform: translateY(-50%) translateX(-2px); }
.lightbox__next:hover  { background: rgba(255, 255, 255, 0.18); transform: translateY(-50%) translateX(2px); }

/* Hide nav arrows when only one photo */
.lightbox[data-count="1"] .lightbox__prev,
.lightbox[data-count="1"] .lightbox__next { display: none; }

@media (max-width: 40rem) {
    .lightbox__prev { left: var(--sp-2); }
    .lightbox__next { right: var(--sp-2); }
    .lightbox__close { top: var(--sp-3); right: var(--sp-3); }
}

/* ------------------------------------------------------------------
   UPDATES HERO  (archive-post.php)
------------------------------------------------------------------ */
.updates-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-4);
}

.updates-hero__eyebrow {
    color: var(--color-yellow);
    opacity: 1;
}

.updates-hero__desc {
    max-width: 55ch;
    opacity: 0.8;
    margin-top: var(--sp-2);
}

/* ------------------------------------------------------------------
   ARCHIVE CATEGORY FILTER
------------------------------------------------------------------ */
.archive-filter-section {
    margin-inline: var(--sp-8);
    border-radius: 1.5rem;
    padding-block: var(--sp-6);
}

.archive-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
    position: relative;
    z-index: 1;
}

/* Pill link base */
.archive-filter__btn {
    background-color: transparent;
    color: var(--color-off-white);
    border-color: var(--color-off-white);
    text-decoration: none;
}

.archive-filter__btn:hover {
    background-color: var(--color-off-white);
    color: var(--color-green);
}

/* Active category */
.archive-filter__btn.is-active {
    background-color: var(--color-yellow);
    color: var(--color-green);
    border-color: var(--color-yellow);
}

.archive-filter__btn.is-active:hover {
    background-color: #e5a820;
    border-color: #e5a820;
}

/* ------------------------------------------------------------------
   ARCHIVE POSTS SECTION
------------------------------------------------------------------ */
.archive-posts {
    padding-block: var(--section-pad);
}

/* Post card category label */
.post-card__cat a {
    color: var(--color-off-white);
    transition: color var(--t-fast);
    opacity: 0.7;
}
.post-card__cat a:hover {
    opacity: 1;
    color: var(--color-yellow);
}

/* ------------------------------------------------------------------
   POST HERO  (single.php)
------------------------------------------------------------------ */
.post-hero {
    position: relative;
    min-height: 60svh;
    display: flex;
    align-items: flex-end;
    padding-block: var(--section-pad-lg);
}

/* Featured image background */
.post-hero--has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--post-hero-bg);
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Dark overlay on top of image */
.post-hero--has-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(26, 92, 58, 0.55) 0%,
        rgba(26, 92, 58, 0.85) 60%,
        rgba(26, 92, 58, 0.97) 100%
    );
    z-index: 0;
}

/* Watermark sits above image layers but below text */
.post-hero .watermark {
    z-index: 1;
}

.post-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    max-width: var(--container-max);
    width: 100%;
}

.post-hero__back {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--color-yellow);
    opacity: 0.9;
    margin-bottom: var(--sp-4);
    transition: opacity var(--t-fast), gap var(--t-fast);
    text-decoration: none;
}
.post-hero__back:hover {
    opacity: 1;
    gap: var(--sp-3);
}

.post-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.post-hero__date {
    color: var(--color-off-white);
    opacity: 0.75;
}

.post-hero__sep {
    color: var(--color-off-white);
    opacity: 0.75;
}

.post-hero__cat {
    color: var(--color-yellow);
    opacity: 0.9;
    transition: opacity var(--t-fast);
    text-decoration: none;
}
.post-hero__cat:hover {
    opacity: 1;
}

.post-hero__title {
    line-height: 1;
    margin: 0;
}

/* ------------------------------------------------------------------
   POST CONTENT SECTION
------------------------------------------------------------------ */
.post-content {
    padding-block: var(--section-pad-sm);
}

.post-content__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-10);
    max-width: 72ch;
    margin-inline: auto;
}

/* Tags row */
.post-content__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding-top: var(--sp-6);
    border-top: 1px solid rgba(26, 92, 58, 0.15);
}

/* ------------------------------------------------------------------
   POST NAVIGATION
------------------------------------------------------------------ */
.post-nav {
    padding-block: var(--section-pad-sm);
    border-top: 1px solid rgba(26, 92, 58, 0.1);
}

.post-nav__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
}

.post-nav__prev,
.post-nav__next {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
    max-width: 18rem;
}

.post-nav__all {
    /* Centre-ish on wider screens */
    flex-shrink: 0;
}

.post-nav__label {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}

.post-nav__post-title {
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14ch;
}

/* On small screens, stack nav links */
@media (max-width: 47.9rem) {
    .post-nav__links {
        flex-direction: column;
        align-items: stretch;
    }

    .post-nav__prev,
    .post-nav__next {
        max-width: 100%;
        justify-content: center;
    }

    .post-nav__post-title {
        max-width: 20ch;
    }
}