/* HeBi Showroom v1.7 — terminal treatment for the Project Show Room.
   Scoped to .page-id-536 throughout.

   Card selector note: the six project cards aren't built identically (five
   use border-width:2px on the inner column, MAT uses 1px), and the page
   content also holds a footer-style block (Pages / Follow us / social)
   made from the same Columns blocks. Rather than repeat a fragile
   attribute selector, hebi-showroom.php stamps a `hebi-psr-card` class on
   the real cards and everything below keys off that. */

/* ================================ */
/* 1. Intro line                    */
/* ================================ */
.page-id-536 .wp-block-post-content > p:first-of-type {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    color: rgba(224, 224, 224, 0.7) !important;
    line-height: 1.75;
}

.page-id-536 .wp-block-post-content {
    counter-reset: hebi-psr;
}

/* ================================ */
/* 1b. Two-up grid                  */
/* ================================ */

/* The project Groups are direct children of the content wrapper, alongside
   the intro paragraph and the footer-style block.

   Everything defaults to spanning the full row; only a Group that actually
   contains a project card opts into a single cell. That ordering matters:
   if :has() is unsupported, the opt-in rule is dropped, every child keeps
   its full-row span, and the page falls back to exactly the stacked layout
   it has today. Nothing breaks — it just doesn't go two-up. */
.page-id-536 .wp-block-post-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    /* stretch, not start: the two cards in a row match heights so their
       bottom edges line up */
    align-items: stretch;
}

/* Every wrapper between the grid cell and the card has to pass the stretched
   height down, or the card falls back to its content height.

   Deliberately descendant selectors, not a `>` chain: the cards are not
   nested to a uniform depth. Flipper sits inside an extra alignfull Group
   (group > group > columns > column) while the other five are one level
   shallower (group > columns > column). A fixed-depth chain silently missed
   Flipper, which is why it alone kept a dead gap under its description. */
.page-id-536 .wp-block-post-content .wp-block-group:has(.hebi-psr-card),
.page-id-536 .wp-block-post-content .wp-block-columns:has(.hebi-psr-card) {
    height: 100%;
}

.page-id-536 .wp-block-post-content > * {
    grid-column: 1 / -1;
    /* the constrained-layout rules cap children at the 650px content width,
       which would squash each grid cell */
    max-width: none !important;
}

.page-id-536 .wp-block-post-content > .wp-block-group:has(.hebi-psr-card) {
    grid-column: auto;
}

/* the intro keeps its own measure */
.page-id-536 .wp-block-post-content > p:first-of-type {
    max-width: 780px !important;
}

@media (max-width: 860px) {
    .page-id-536 .wp-block-post-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Strip the pre-redesign border colours (brown, baby blue, lavender,
   two greens) off the outer Columns wrappers. The card border below
   replaces them. */
.page-id-536 .wp-block-post-content .wp-block-columns {
    border-color: transparent !important;
    border-width: 0 !important;
    margin-bottom: 0 !important;
}

/* ================================ */
/* 2. Project card                  */
/* ================================ */
.page-id-536 .hebi-psr-card {
    position: relative;
    counter-increment: hebi-psr;
    /* Flex column so the image can absorb the slack — see section 4. Note
       if a -webkit-line-clamp is ever added to a paragraph in here it will
       silently do nothing: a flex item's display:-webkit-box gets blockified
       by the browser. Clamp inside a wrapper div, not on a direct child. */
    display: flex;
    flex-direction: column;
    /* width comes from the grid cell; spacing comes from the grid gap */
    margin: 0;
    height: 100%;
    background: #0a0a0a;
    border: 1px solid rgba(255, 0, 51, 0.25) !important;
    border-radius: 0 !important;
    padding: 30px 26px 18px !important;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.page-id-536 .hebi-psr-card:hover {
    border-color: rgba(255, 0, 51, 0.6) !important;
    box-shadow: 0 0 30px rgba(255, 0, 51, 0.12), 0 14px 34px rgba(0, 0, 0, 0.5);
    transform: translateY(-3px);
}

/* [01] index marker */
.page-id-536 .hebi-psr-card::before {
    content: "[" counter(hebi-psr, decimal-leading-zero) "]";
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 3;
    padding: 3px 8px;
    background: rgba(10, 10, 10, 0.9);
    border: 1px solid rgba(255, 0, 51, 0.4);
    color: #ff0033;
    font-family: 'Geist Mono', 'Courier New', monospace;
    font-size: 0.80rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    pointer-events: none;
}

/* scanline wash */
.page-id-536 .hebi-psr-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 65, 0.02) 2px,
        rgba(0, 255, 65, 0.02) 4px
    );
}

/* keep real content above the scanline layer */
.page-id-536 .hebi-psr-card > * {
    position: relative;
    z-index: 2;
}

/* ================================ */
/* 3. Titles                        */
/* ================================ */
.page-id-536 .hebi-psr-title {
    font-family: 'Orbitron', 'Geist Mono', monospace !important;
    font-size: clamp(1.05rem, 2.6vw, 1.5rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ff0033 !important;
    text-shadow: 0 0 14px rgba(255, 0, 51, 0.3);
    margin: 0 0 8px !important;
    line-height: 1.25;
}

/* the AMOS-style subtitle sitting right under a title */
.page-id-536 .hebi-psr-title + p {
    color: rgba(0, 255, 65, 0.7) !important;
    font-family: 'Geist Mono', 'Courier New', monospace;
    font-size: 0.87rem !important;
    letter-spacing: 0.08em;
    margin-top: 0;
}

/* ================================ */
/* 4. Imagery                       */
/* ================================ */

/* Inline styles force 300x400 with object-fit:cover plus a 100px radius,
   which crops landscape art into a portrait pill. Show it whole, sharp. */
.page-id-536 .hebi-psr-card .wp-block-image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 360px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    border: 1px solid rgba(255, 0, 51, 0.2);
    filter: brightness(0.9) saturate(0.95);
    transition: filter 0.3s ease, border-color 0.3s ease;
}

.page-id-536 .hebi-psr-card:hover .wp-block-image img {
    filter: brightness(1.02) saturate(1.1);
    border-color: rgba(255, 0, 51, 0.45);
}

/* The image area soaks up whatever height the grid stretch adds to a short
   card. Without this the slack collects as one dead gap under the last
   paragraph — most obvious on Flipper, which shares a row with the much
   taller AMOS. The art keeps its own aspect ratio and max-height and simply
   sits centred in the space, which reads as deliberate breathing room. */
.page-id-536 .hebi-psr-card .wp-block-image {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px auto 14px;
}

/* ================================ */
/* 5. Body copy                     */
/* ================================ */
.page-id-536 .hebi-psr-card p {
    color: rgba(224, 224, 224, 0.68) !important;
    line-height: 1.75;
}

/* the editor left empty spacer paragraphs behind */
.page-id-536 .hebi-psr-card p:empty {
    display: none;
}

/* Descriptions run in full — no line clamp. Card bottoms are already
   levelled by the grid stretch, and truncating a project's description with
   no "read more" would hide the very copy this page exists to show. */
.page-id-536 .hebi-psr-card p:last-of-type {
    margin-bottom: 0;
}

/* ================================ */
/* 6. Link chips                    */
/* ================================ */

/* Only links directly inside a card paragraph. Excludes the image links
   (those live in <figure>) and the footer block's nav/social links. */
.page-id-536 .hebi-psr-card p > a {
    display: inline-block;
    padding: 3px 9px;
    margin: 3px 4px 3px 0;
    border: 1px solid rgba(0, 255, 65, 0.4);
    background: rgba(0, 255, 65, 0.05);
    color: #00ff41 !important;
    font-family: 'Geist Mono', 'Courier New', monospace;
    font-size: 0.80rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.page-id-536 .hebi-psr-card p > a::before {
    content: "[";
    opacity: 0.55;
    margin-right: 2px;
}

.page-id-536 .hebi-psr-card p > a::after {
    content: "]";
    opacity: 0.55;
    margin-left: 2px;
}

.page-id-536 .hebi-psr-card p > a:hover,
.page-id-536 .hebi-psr-card p > a:focus-visible {
    color: #ff0033 !important;
    border-color: rgba(255, 0, 51, 0.6);
    background: rgba(255, 0, 51, 0.07);
    box-shadow: 0 0 14px rgba(255, 0, 51, 0.18);
}

/* ================================ */
/* 7. Responsive                    */
/* ================================ */
@media (max-width: 600px) {
    .page-id-536 .hebi-psr-card {
        padding: 30px 16px 16px !important;
    }
    .page-id-536 .hebi-psr-card .wp-block-image img {
        max-height: 260px !important;
    }
}

/* ================================ */
/* 8. Reduced motion                */
/* ================================ */
@media (prefers-reduced-motion: reduce) {
    .page-id-536 .hebi-psr-card,
    .page-id-536 .hebi-psr-card .wp-block-image img,
    .page-id-536 .hebi-psr-card p > a {
        transition: none !important;
    }
    .page-id-536 .hebi-psr-card:hover {
        transform: none;
    }
}