/* =============================================================================
   p-q-g-style.css  —  projects-queryable-grid
   Plugin-specific rules only. Shared grid/card/caption live in prjct-style.css.
   Version: 1.0.0
   ============================================================================= */


/* ── Force parent containers to allow wide width ─────────────────────────── */
main.wp-block-group.has-global-padding.is-layout-constrained,
.wp-block-post-content.has-global-padding.is-layout-constrained {
    max-width: none !important;
    padding:   0 !important;
    margin:    0 !important;
}
.entry-content { padding: 0 !important; margin: 0 !important; }

/* ── Display page title — Anton/HenkRed, same as project detail h1 ──────── */
/* Font, size and color are set in prjct-style.css section 14.             */
/* This block only handles layout/spacing.                                  */
.prjct-query-title {
    display:        flex;
    align-items:    baseline;
    flex-wrap:      wrap;
    gap:            0 0.2em;
    margin:         0 0 32px !important;
    padding:        16px 0 16px 0 !important;
    border-bottom:  1px solid rgba(0,0,0,0.08);
    text-transform: none !important;
}

.prjct-query-title-type,
.prjct-query-title-divider,
.prjct-query-title-value {
    text-transform: none !important;
    font-weight:    inherit !important;
    letter-spacing: inherit !important;
    color:          inherit !important;
}

.prjct-query-title-divider { margin: 0 0.1em !important; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .prjct-wrap         { padding: 0 16px !important; margin-top: 1.5rem !important; --prjct-gap: 12px; }
    .prjct-query-title  { margin-bottom: 20px !important; padding-bottom: 12px !important; font-size: 0.75rem; }
}
@media (max-width: 480px) {
    .prjct-wrap { padding: 0 12px !important; margin-top: 1rem !important; --prjct-gap: 10px; }
}

/* ── Center the grid wrap within its full-width block container ──────────── */
.prjct-wrap {
    margin-left:  auto !important;
    margin-right: auto !important;
}

/* ── JS-masonry grid (position:absolute items) ───────────────────────────── */
/*  p-q-g-script.js positions items absolutely — same engine as              */
/*  featured-projects-overview. Cancel CSS-columns from prjct-style.css.     */

.prjct-wrap .prjct-grid {
    position: relative;
    width:    100%;
    columns:  unset !important;
    /* height set by JS */
}

.prjct-wrap .prjct-grid.is-masonry .prjct-item {
    position:      absolute;
    break-inside:  unset;
    margin-bottom: 0;
    overflow:      hidden;
    border-radius: var(--prjct-radius);
}