/* =============================================================================
   f-p-o-style.css  —  featured-projects-overview
   Plugin-specific rules only. All shared grid/card/caption/token rules
   live in prjct-style.css which this plugin imports first.
   Version: 1.0.2
   ============================================================================= */



/* ── Block outer ─────────────────────────────────────────────────────────── */
.prjct-block {
    width:      100%;
    max-width:  var(--prjct-max-width);
    margin:     0 auto;
    box-sizing: border-box;
    padding:    0 var(--prjct-padding-x);
    position:   relative;
}

/* FSE alignment overrides — only applied when block is actually wide/full */
.wp-block-henkst-featured-projects.alignwide,
.wp-block-henkst-featured-projects.alignfull {
    max-width: none !important;
    width:     100% !important;
    position:     relative;
    left:         50%;
    right:        50%;
    margin-left:  -50vw !important;
    margin-right: -50vw !important;
    width:        100vw !important;
    max-width:    100vw !important;
}

.wp-block-henkst-featured-projects.alignwide .prjct-block,
.wp-block-henkst-featured-projects.alignfull .prjct-block {
    max-width: var(--prjct-max-width) !important;
    margin:    0 auto !important;
    padding:   0 var(--prjct-padding-x) !important;
}

/* ── JS-masonry grid (position:absolute items) ───────────────────────────── */
/*  featured-projects-overview uses its own JS masonry (not CSS columns).     */
/*  Items are positioned absolutely — do NOT apply display:none here.         */
.prjct-block .prjct-grid {
    position: relative;
    width:    100%;
    /* height set by JS */
    columns:  unset;      /* cancel CSS-columns from prjct-style.css */
}

.prjct-block .prjct-item {
    position:               absolute;
    display:                block;
    border-radius:          var(--prjct-radius);
    overflow:               hidden;
    background:             transparent;
    isolation:              isolate;               /* clean GPU layer for radius clip */
    -webkit-mask-image:     -webkit-radial-gradient(white, black); /* Safari corner fix */
    will-change:            transform;             /* own compositing layer → clean clip */
    /* reset CSS-column break rule that doesn't apply here */
    break-inside:           unset;
    margin-bottom:          0;
    animation:              none; /* JS controls stagger */
}

/* Card link */
.prjct-block .prjct-card {
    display:            block;
    text-decoration:    none;
    color:              inherit;
    position:           relative;
    background:         transparent;
    isolation:          isolate;
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari corner fix */
}

/* Image wrapper */
.prjct-block .prjct-img-wrap {
    display:    block;
    width:      100%;
    overflow:   hidden;
    background: transparent;
}

.prjct-block .prjct-img-wrap img {
    display:        block;
    width:          100%;
    height:         auto;
    vertical-align: bottom;   /* eliminates inline baseline gap (dark sliver) */
    transition:     var(--prjct-transition-img);
}

.prjct-block .prjct-card:hover .prjct-img-wrap img {
    transform: scale(1.03);
}

/* Caption uses white-gradient (light brand, not dark overlay like the others) */
.prjct-block .prjct-caption {
    background: linear-gradient(
        to top,
        rgba(255,255,255,0.98) 0%,
        rgba(255,255,255,0.7)  40%,
        rgba(255,255,255,0)    100%
    );
    color: var(--prjct-ink);
}

.prjct-block .prjct-card-title  { color: var(--prjct-ink); }
.prjct-block .prjct-card-payoff { color: var(--prjct-ink-muted); font-style: italic; }

/* Desktop-only items — hidden on mobile via JS, not CSS */
/* (CSS display:none breaks JS show/hide so we leave it to JS) */