/* PBC Swiss — Coming Soon block
   Placeholder section the curator can drop into an exhibition's Layout Builder
   list as a stand-in for a part of the exhibit that's still being curated
   (gallery not shot yet, spec table not compiled, etc.). Reuses the .hero /
   .vlabel / .hero-meta machinery from design-system.css + hero.css so it sits
   at the same vertical rhythm as an exhibit_hero block, framed top and bottom
   by diagonal caution-tape stripes that rhyme with the existing .uc-badge--
   striped pill so it reads as a clearly bounded "construction zone".

   Loaded on single-exhibition pages via the gate in functions.php alongside
   pbc-hero / pbc-exhibit. Class names are unique (.coming-soon, .coming-soon__*)
   so this file can't bleed into other layout sections. */

.coming-soon {
    background: var(--paper-2, #f4f4f2);
    position: relative;
    overflow: hidden;
    /* Tall enough that the rotated `COMING SOON` vlabel fits unclipped on
       the left edge — the .vlabel rotation needs the section to be at least
       its rendered text width, which lands around 150px for this string. */
    min-height: 160px;
    /* Internal padding clears both the 8px top stripe and the 8px bottom
       stripe so neither overlaps the rotated label or the meta cells, and
       leaves a comfortable breathing band above the title and below the
       ETA value so the content doesn't crowd the caution-tape edges. */
    padding-top: var(--s-6);
    padding-bottom: var(--s-6);
}

/* Vertically center the rotated `COMING SOON` label within the section.
   Base `.hero .vlabel` pins it to `top: var(--s-8)` (design-system.css:235)
   which leaves it riding the top edge. The translateY(-50%) pulls it back
   up by half its own height (which is the rendered text length thanks to
   writing-mode: vertical-rl) so the visual center lines up with the
   section's vertical middle; rotate(180deg) preserves the bottom-to-top
   reading direction the base .vlabel rule applies. */
.coming-soon .vlabel {
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
}

/* Mute the H2 by half a step from the inherited .hero-title h1 scale —
   the placeholder shouldn't shout louder than the surrounding real heroes. */
.coming-soon__title { margin-top: 0; }
.coming-soon__title h2 {
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.04;
    color: var(--ink, #1a1a1a);
    margin: 0;
}

.coming-soon__deck {
    max-width: 60ch;
    color: var(--ink-2, #4a4a48);
    margin-top: var(--s-2);
    font-size: 14px;
    line-height: 1.5;
}

/* Inline "OPENS / Summer 2026" block — sits inside the main .container.grid-12
   alongside the title and deck so it shares the section's paper-tint background
   instead of breaking out into a separate white meta-strip band the way the
   exhibit_hero's .hero-meta-wrap does. Matches the .hero-meta .cell typography
   (small uppercase label over a larger value) so the visual vocabulary stays
   consistent with the meta strips elsewhere on the site. */
.coming-soon__eta {
    grid-column: 4 / span 9;
    margin-top: var(--s-2);
    color: var(--ink-2, #4a4a48);
}
.coming-soon__eta .l {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted, #8a8a85);
}
.coming-soon__eta .v {
    font-size: 18px;
    margin-top: 4px;
    color: var(--ink, #1a1a1a);
}

/* Reuse the diagonal-tape pattern from .uc-badge--striped (hero.css:246+) but
   render it as thin full-width bands at the top AND bottom of the section so
   the placeholder reads as a clearly bounded "construction zone" — the two
   stripes frame the content the way caution tape frames an off-limits area. */
.coming-soon__stripe {
    position: absolute;
    left: 0;
    right: 0;
    height: 14px;
    background-color: #f5d300;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(0, 0, 0, .85) 0,
        rgba(0, 0, 0, .85) 10px,
        transparent 10px,
        transparent 22px
    );
    pointer-events: none;
    z-index: 2;
}
.coming-soon__stripe--top    { top: 0; }
.coming-soon__stripe--bottom { bottom: 0; }