/* =============================================================================
   prjct-style.css  —  Shared project-grid tokens & rules
   All plugins import this file. Plugin-specific rules stay in their own
   stylesheet (f-p-o-style.css / p-d-s-style.css / p-q-g-style.css / p-f-g-style.css).
   Version: 1.1.0
   ============================================================================= */

/* ── 0. WP Admin Bar ─────────────────────────────────────────────────────── */
.admin-bar .hh-header { top: 32px; }
.admin-bar .fancybox__container {
    top:    32px !important;
    height: calc(100vh - 32px) !important;
}
@media screen and (max-width: 782px) {
    .admin-bar .hh-header { top: 46px; }
    .admin-bar .fancybox__container {
        top:    46px !important;
        height: calc(100vh - 46px) !important;
    }
}

/* ── 1. Design tokens ────────────────────────────────────────────────────── */
:root {
    --prjct-font:         var(--wp--preset--font-family--body,    'DM Sans', system-ui, sans-serif);
    --prjct-font-display: var(--wp--preset--font-family--heading,  Georgia, serif);

    --prjct-ink:          var(--wp--preset--color--foreground,          #111111);
    --prjct-ink-muted:    var(--wp--preset--color--foreground-muted,    #5a5a5a);
    --prjct-surface:      var(--wp--preset--color--background,          #f7f6f2);
    --prjct-surface-alt:  var(--wp--preset--color--surface-alt,         #e8e6e0);
    --prjct-border:       var(--wp--preset--color--border,              #ddd9d0);
    --prjct-accent:       var(--wp--preset--color--accent,              #000000);

    --prjct-gap:          24px;
    --prjct-radius:       var(--wp--preset--border--radius,             8px);
    --prjct-max-width:    var(--wp--style--global--wide-size,           1200px);
    --prjct-padding-x:    var(--wp--style--root--padding-left,          20px);

    --prjct-caption-gradient: linear-gradient(
        to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%
    );
    --prjct-transition-img:     transform 0.35s cubic-bezier(0.25,0.45,0.45,0.95);
    --prjct-transition-caption: opacity 280ms ease, transform 280ms ease;
}

/* ── 2. Shared outer wrapper ─────────────────────────────────────────────── */
.prjct-wrap {
    font-family:   var(--prjct-font);
    width:         100%;
    max-width:     var(--prjct-max-width);
    margin-left:   auto;
    margin-right:  auto;
    padding-left:  var(--prjct-padding-x);
    padding-right: var(--prjct-padding-x);
    box-sizing:    border-box;
    background:    var(--prjct-surface);
    position:      relative;
}

/* ── 3. Grid container ───────────────────────────────────────────────────── */
.prjct-grid {
    column-gap: var(--prjct-gap);
    width:      100%;
}

.prjct-cols-1 { columns: 1; }
.prjct-cols-2 { columns: 2; }
.prjct-cols-3 { columns: 3; }
.prjct-cols-4 { columns: 4; }
.prjct-cols-5 { columns: 5; }

@media (max-width: 1200px) { .prjct-cols-5 { columns: 4; } }
@media (max-width:  992px) { .prjct-cols-4, .prjct-cols-5 { columns: 3; } }
@media (max-width:  768px) {
    .prjct-cols-3,
    .prjct-cols-4,
    .prjct-cols-5 { columns: 2; column-gap: 16px; }
    .prjct-cols-2 { columns: 2; column-gap: 16px; }
    .prjct-wrap   { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 480px) {
    .prjct-grid { columns: 1 !important; column-gap: 0; }
}

/* ── Single visible item — cap to viewport ───────────────────────────────── */
/* CSS columns fallback (filter grid). JS masonry plugins handle this in JS. */
.prjct-grid.prjct-single-result {
    columns: 1 !important;
}
.prjct-grid.prjct-single-result .prjct-item {
    max-width:    60vw;
    margin-left:  auto;
    margin-right: auto;
}
.prjct-grid.prjct-single-result .prjct-img {
    max-height: 65vh;
    object-fit: cover;
    width:      100%;
}

/* Mobile: single result goes full width but still capped by height */
@media (max-width: 768px) {
    .prjct-grid.prjct-single-result .prjct-item {
        max-width: 100%;
    }
    .prjct-grid.prjct-single-result .prjct-img {
        max-height: 70vh;
    }
}
.prjct-item {
    break-inside:  avoid;
    display:       inline-block; /* keeps column tops flush — no offset between columns */
    width:         100%;
    margin-bottom: var(--prjct-gap);
    border-radius: var(--prjct-radius);
    overflow:      hidden;
}
.prjct-item.prjct-hidden { display: none; }

/* ── 5. Card link ────────────────────────────────────────────────────────── */
.prjct-card {
    display:         block;
    text-decoration: none;
    color:           inherit;
    position:        relative;
}

/* ── 6. Figure / image ───────────────────────────────────────────────────── */
.prjct-fig {
    position:      relative;
    overflow:      hidden;
    margin:        0;
    border-radius: var(--prjct-radius);
    background:    var(--prjct-surface-alt);
}

.prjct-img {
    display:        block;
    width:          100%;
    height:         auto;
    vertical-align: bottom;
    transition:     var(--prjct-transition-img);
    will-change:    transform;
}

.prjct-img-empty {
    aspect-ratio: 4/3;
    background:   linear-gradient(135deg, var(--prjct-surface-alt) 0%, var(--prjct-border) 100%);
}

.prjct-card:hover .prjct-img,
.prjct-card:focus-visible .prjct-img { transform: scale(1.04); }

/* ── 7. Caption overlay ──────────────────────────────────────────────────── */
.prjct-caption {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    gap:             4px;
    padding:         50px 14px 14px;
    background:      var(--prjct-caption-gradient);
    color:           #fff;
    opacity:         0;
    transform:       translateY(6px);
    transition:      var(--prjct-transition-caption);
    pointer-events:  none;
}

.prjct-card:hover .prjct-caption,
.prjct-card:focus-visible .prjct-caption { opacity: 1; transform: translateY(0); }

@media (hover: none) { .prjct-caption { opacity: 1; transform: translateY(0); } }

/* ── 8. Caption text ─────────────────────────────────────────────────────── */
.prjct-card-title {
    font-size:      var(--wp--preset--font-size--small, 0.9rem);
    font-weight:    600;
    color:          #fff;
    line-height:    1.3;
    letter-spacing: -0.01em;
    text-shadow:    0 1px 2px rgba(0,0,0,0.25);
}

.prjct-card-payoff {
    font-size:   var(--wp--preset--font-size--x-small, 0.78rem);
    color:       rgba(255,255,255,0.82);
    line-height: 1.3;
}

/* ── 9. Empty state ──────────────────────────────────────────────────────── */
.prjct-empty {
    text-align:    center;
    padding:       60px 20px;
    color:         var(--prjct-ink-muted);
    font-size:     0.95rem;
    background:    var(--prjct-surface-alt);
    border-radius: var(--prjct-radius);
    margin-top:    20px;
}

/* ── 10. Filter buttons ──────────────────────────────────────────────────── */
.prjct-filters {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             8px;
    margin-bottom:   40px;
}

.prjct-filter-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       64px;
    padding:         8px 20px;
    background:      transparent;
    color:           var(--prjct-ink);
    border:          1px solid var(--prjct-border);
    border-radius:   0;
    font:            inherit;
    font-size:       0.8rem;
    font-weight:     500;
    letter-spacing:  0.05em;
    text-transform:  uppercase;
    cursor:          pointer;
    transition:      background 0.2s, color 0.2s, border-color 0.2s;
}
.prjct-filter-btn:hover         { background: var(--prjct-surface-alt); border-color: var(--prjct-ink-muted); }
.prjct-filter-btn.is-active     { background: var(--prjct-accent); color: #fff; border-color: var(--prjct-accent); }
.prjct-filter-btn:focus-visible { outline: 2px solid var(--prjct-accent); outline-offset: 2px; }

@media (max-width: 767px) {
    .prjct-filters    { margin-bottom: 24px; gap: 6px; }
    .prjct-filter-btn { padding: 6px 14px; font-size: 0.7rem; min-width: 52px; }
}
@media (max-width: 480px) {
    .prjct-filter-btn { padding: 5px 12px; font-size: 0.65rem; min-width: 44px; }
}

/* ── 11. Show more button ────────────────────────────────────────────────── */
.prjct-more-wrap {
    text-align:    center;
    margin-top:    48px;
    padding-top:   16px;
    margin-bottom: 20px;
}

.prjct-more-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           10px;
    padding:       12px 32px;
    border:        1px solid var(--prjct-border);
    border-radius: 40px;
    background:    transparent;
    font-size:     0.875rem;
    font-weight:   500;
    color:         var(--prjct-ink);
    cursor:        pointer;
    transition:    all 250ms ease;
}
.prjct-more-btn:hover {
    background:   var(--prjct-accent);
    border-color: var(--prjct-accent);
    color:        #fff;
    transform:    translateY(-2px);
    box-shadow:   0 4px 12px rgba(0,0,0,0.12);
}
.prjct-more-count             { font-weight: 400; opacity: 0.65; font-size: 0.8rem; }
.prjct-more-btn.prjct-all-shown { display: none; }

/* ── 12. Slide-in animation ──────────────────────────────────────────────── */
.prjct-animate {
    opacity:    0;
    transform:  translateY(12px);
    transition: opacity 500ms ease, transform 500ms ease;
}
.prjct-animate.prjct-visible { opacity: 1; transform: translateY(0); }

/* ── 13. Stagger entrance ────────────────────────────────────────────────── */
@keyframes prjct-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
}
.prjct-item              { animation: prjct-in 400ms cubic-bezier(0.2, 0.9, 0.4, 1.1) both; }
.prjct-item:nth-child(1) { animation-delay:   0ms; }
.prjct-item:nth-child(2) { animation-delay:  30ms; }
.prjct-item:nth-child(3) { animation-delay:  60ms; }
.prjct-item:nth-child(4) { animation-delay:  90ms; }
.prjct-item:nth-child(5) { animation-delay: 120ms; }
.prjct-item:nth-child(6) { animation-delay: 150ms; }

/* ── 14. Anton display font ──────────────────────────────────────────────── */
.wp-block-post-title,
.prjct-detail-title,
.wp-block-heading,
.prjct-query-title {
    font-family:    var(--wp--preset--font-family--anton, 'Anton', sans-serif) !important;
    font-weight:    50 !important;
    letter-spacing: -0.01em;
    text-transform: none;
    color:          var(--wp--preset--color--henk-red, #510424) !important;
    opacity:        0.75;
    font-size:      clamp(1.4rem, 3vw, 2.4rem) !important;
    line-height:    1.1 !important;
    margin-bottom:  0.5em;
}

/* Popup headings — all states merged into one block */
.fancybox__container.hh-fb-popup .hh-fancybox-body h1.wp-block-heading,
.fancybox__container.hh-fb-popup .wp-block-heading,
.fancybox__container.hh-fb-popup.is-opening .hh-fancybox-body h1.wp-block-heading,
.fancybox__container.hh-fb-popup.is-idle    .hh-fancybox-body h1.wp-block-heading,
.hh-fb-popup .hh-fancybox-body h1.wp-block-heading {
    font-family:    var(--wp--preset--font-family--anton, 'Anton', sans-serif) !important;
    font-weight:    50 !important;
    letter-spacing: -0.01em;
    text-transform: none;
    color:          var(--wp--preset--color--henk-red, #510424) !important;
    opacity:        0.75;
    font-size:      clamp(1.4rem, 3vw, 2.4rem) !important;
    line-height:    1.1 !important;
    margin-bottom:  0.5em !important;
}

/* Title spans — regular + popup merged */
.prjct-query-title-type,
.prjct-query-title-divider,
.prjct-query-title-value,
.fancybox__container.hh-fb-popup .prjct-query-title-type,
.fancybox__container.hh-fb-popup .prjct-query-title-divider,
.fancybox__container.hh-fb-popup .prjct-query-title-value,
.hh-fb-popup .prjct-query-title-type,
.hh-fb-popup .prjct-query-title-divider,
.hh-fb-popup .prjct-query-title-value {
    font-family: inherit !important;
    font-weight: inherit !important;
    color:       inherit !important;
    font-size:   inherit !important;
}

/* Mobile font size — regular + popup merged */
@media (max-width: 600px) {
    .wp-block-post-title,
    .prjct-detail-title,
    .wp-block-heading,
    .prjct-query-title-value,
    .prjct-query-title,
    .fancybox__container.hh-fb-popup .wp-block-heading,
    .fancybox__container.hh-fb-popup .prjct-query-title-value,
    .fancybox__container.hh-fb-popup .prjct-query-title,
    .hh-fb-popup .wp-block-heading,
    .hh-fb-popup .prjct-query-title-value,
    .hh-fb-popup .prjct-query-title { font-size: 1.4rem !important; }
}

/* ── 15. Tags ────────────────────────────────────────────────────────────── */
.prjct-tags {
    display:   flex;
    flex-wrap: wrap;
    gap:       5px;
    margin:    0;
}

.prjct-tag {
    display:         inline-block;
    padding:         3px 10px;
    border:          1px solid rgba(0,0,0,0.15);
    border-radius:   20px;
    font-size:       0.74rem;
    color:           var(--prjct-ink-muted);
    text-decoration: none;
    transition:      background 180ms, color 180ms;
    line-height:     1.6;
}
a.prjct-tag:hover { background: var(--prjct-accent); color: #fff; border-color: var(--prjct-accent); }

/* ── 16. Meta label ──────────────────────────────────────────────────────── */
.prjct-meta-label {
    font-family:    var(--wp--preset--font-family--body);
    font-size:      var(--wp--preset--font-size--x-small, 0.65rem);
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--prjct-ink-muted);
    margin:         0 0 4px;
}

/* ── 17. Fancybox shared overrides ───────────────────────────────────────── */
.fancybox__backdrop { background: rgba(0,0,0,0.92) !important; }

.fancybox__slide.has-image,
.fancybox__slide.has-html5video,
.fancybox__slide.has-iframe,
.fancybox__slide.has-video { overflow: visible !important; }

.fancybox__slide.has-html5video .fancybox__content,
.fancybox__slide.has-iframe     .fancybox__content,
.fancybox__slide.has-video      .fancybox__content { overflow: hidden !important; }

.fancybox__slide.has-html5video { background: #000 !important; }
.fancybox__slide.has-image .fancybox__content { overflow: visible !important; }

.fancybox__content > .f-button.is-close-btn {
    --f-button-color:            #fff !important;
    --f-button-hover-color:      #fff !important;
    --f-button-bg:               transparent !important;
    --f-button-hover-bg:         transparent !important;
    --f-button-active-bg:        transparent !important;
    --f-button-svg-width:        24px !important;
    --f-button-svg-height:       24px !important;
    --f-button-svg-stroke-width: 2.5 !important;
    --f-button-svg-filter:       drop-shadow(0 1px 4px rgba(0,0,0,0.9)) !important;
    opacity: 1 !important;
    top:    -40px !important;
    right:   0 !important;
}
.fancybox__content > .f-button.is-close-btn:hover { opacity: 0.7 !important; }
.fancybox__container > .f-button.is-close-btn     { display: none !important; }

.has-youtube .fancybox__content,
.has-vimeo   .fancybox__content {
    width:        min(80vw, 1100px) !important;
    height:       auto !important;
    aspect-ratio: 16 / 9 !important;
    max-width:    min(80vw, 1100px) !important;
    max-height:   82vh !important;
    padding:      0 !important;
    background:   #000 !important;
}
.has-youtube .fancybox__iframe,
.has-vimeo   .fancybox__iframe { width: 100% !important; height: 100% !important; }

.fancybox__slide.has-html5video {
    padding:         0 !important;
    align-items:     center !important;
    justify-content: center !important;
}
.has-html5video .fancybox__content {
    width:       min(90vw, 1100px) !important;
    max-width:   min(90vw, 1100px) !important;
    height:      calc(min(90vw, 1100px) * 9 / 16) !important;
    max-height:  82vh !important;
    padding:     0 !important;
    background:  #000 !important;
    border:      none !important;
    box-shadow:  none !important;
    flex-shrink: 0 !important;
}
.has-html5video .fancybox__html5video { width: 100% !important; height: 100% !important; display: block !important; }

.fancybox__container:not([data-hh-popup]) .fancybox__slide.has-image .fancybox__content {
    max-width: min(90vw, 1100px) !important; border-radius: 10px !important;
}

.prjct-video-thumb:focus,
.prjct-video-thumb:focus-visible,
.prjct-video-thumb.fancybox__trigger:focus { outline: none !important; box-shadow: none !important; border: none !important; }
img:focus-visible { outline: none !important; }

@media (max-width: 1024px) {
    .has-youtube .fancybox__content,
    .has-vimeo   .fancybox__content { width: min(88vw, 1100px) !important; max-width: min(88vw, 1100px) !important; }
    .fancybox__container:not([data-hh-popup]) .fancybox__slide.has-image .fancybox__content { max-width: 92vw !important; }
}
@media (max-width: 600px) {
    .has-youtube .fancybox__content,
    .has-vimeo   .fancybox__content,
    .has-html5video .fancybox__content { width: 96vw !important; max-width: 96vw !important; }
    .fancybox__container:not([data-hh-popup]) .fancybox__slide.has-image .fancybox__content {
        max-width: 96vw !important; border-radius: 6px !important;
    }
}

/* ── 18. Loading spinner ─────────────────────────────────────────────────── */
.hpd-spinner {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             14px;
    background:      rgba(0,0,0,0.85);
    z-index:         50;
    pointer-events:  none;
    border-radius:   inherit;
}
.hpd-spinner__ring {
    width:         44px;
    height:        44px;
    border:        3px solid rgba(255,255,255,0.15);
    border-top:    3px solid #fff;
    border-radius: 50%;
    animation:     hpd-spin 0.8s linear infinite;
    flex-shrink:   0;
}
@keyframes hpd-spin { to { transform: rotate(360deg); } }

.hpd-spinner__text {
    margin:         0;
    font-family:    var(--prjct-font, system-ui, sans-serif);
    font-size:      0.8rem;
    font-weight:    500;
    letter-spacing: 0.05em;
    color:          rgba(255,255,255,0.7);
    text-transform: uppercase;
}