/* PBC Swiss — homepage hero variant
   The base .hero / .hero-num / .hero-title / .hero-deck / .hero-meta-wrap
   are defined in design-system.css. This file holds only the homepage-specific
   featured-exhibition treatment if it diverges from the inner-page archetype. */

/* Very light blue tint behind the featured-exhibition area. Picks up the
   --sw (software) accent in a faintly desaturated form, so the hero reads
   as a distinct band from the page-white sections below without becoming a
   colored block. */
.hero { background: #eef3fa; }

/* When the featured exhibit resolves an artifact image, the image is rendered
   as a real <img> inside a framed <figure> placed in the right columns of
   the hero grid (see `.hero-figure` below). The section background stays on
   the flat tint so the framed figure has a clean field behind it. The earlier
   approach used the image as a CSS background with a horizontal fade, which
   forced the title and deck to overlap the artwork and hurt legibility. */

/* Two-column composition when an artifact image is present:
   - num + title + deck stack in the left columns (2–8)
   - unframed figure occupies the right columns (9–12), bottom-aligned with
     the deck so the visual baseline lines up across the hero. */
.hero.hero--has-image                  { padding-top: var(--s-5); }
.hero--has-image .container.grid-12    { align-items: end; padding-bottom: 0; }
.hero--has-image .hero-num             { grid-column: 2 / span 2; grid-row: 1; font-size: 56px; }
.hero--has-image .hero-num small       { font-size: 12px; margin-top: 4px; }
.hero--has-image .hero-title           { grid-column: 4 / span 6; grid-row: 1; }
.hero--has-image .hero-deck            { grid-column: 4 / span 5; grid-row: 2; max-width: 52ch; margin-top: var(--s-3); font-size: 15px; line-height: 1.55; }
/* Headline scale when the hero has an artifact image — used on both the
   homepage featured-exhibition hero and the exhibition's own page. The
   `body .hero.hero--has-image` selector reaches specificity (0,3,2) so it
   beats the existing `body.home .hero-title h1` (0,2,2) rule for the home
   page AND the base `.hero-title h1` (0,1,1) rule for inner exhibit pages
   without needing two separate selectors. */
body .hero.hero--has-image .hero-title h1 {
    font-size: clamp(48px, 5vw, 78px);
    line-height: 1.02;
}

/* Exhibit-page hero defaults to a muted color on lines 2+ (with ::first-line
   inked) — that's the inner-page archetype. When mirroring the homepage hero
   (image variant), the whole headline should read as full-strength ink. */
.exhibit-hero.hero--has-image .hero-title h1            { color: var(--ink); }
.exhibit-hero.hero--has-image .hero-title h1::first-line { color: var(--ink); }

.hero-figure {
    grid-column: 10 / span 3;
    grid-row: 1 / span 2;
    align-self: end;
    justify-self: end;
    /* Bottom-align with the deck baseline, then nudge up slightly so the
       image doesn't press right against the meta-strip rule below. Also
       leaves a clear band along the hero's top edge for the UC badge. */
    margin: var(--s-6) 0 var(--s-3) 0;
    width: 100%;
    max-width: 320px;
}

/* The UC badge defaults to top-right of .hero (see the rule further down
   this file). With the artifact in the right columns, that anchor crashes
   into the figure. A plain `right: auto` override loses the specificity
   tie, leaving BOTH left and right set — which stretches the badge across
   the hero. Use a compound selector (`.hero.hero--has-image`) so this rule
   wins, and shrink the badge so it reads as a small status tag. */
.hero.hero--has-image .uc-badge {
    top: 14px;
    right: var(--gutter);
    left: auto;
    padding: 7px 15px;
    font-size: 12px;
    letter-spacing: .16em;
    box-shadow: none;
}
/* Frameless: the image sits directly on the hero's tint with a soft drop
   shadow only. No white card, no border, no padding. */
.hero-figure-frame {
    background: transparent;
    padding: 0;
    border: 0;
    box-shadow: 0 18px 38px -22px rgba(20, 40, 70, .35);
}
/* Fixed aspect-ratio frame; height:auto !important overrides the inline
   `height:N%` attribute that wp_get_attachment_image emits from the source
   file's native dimensions. */
.hero-figure-img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    max-width: none !important;
}

/* Compact plate caption beneath the image — single row of mono metadata,
   no top rule, sits flush on the tint. */
.hero-plate {
    margin-top: 10px;
    line-height: 1.45;
}
.hero-plate-row {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 11px;
    letter-spacing: .04em;
}
.hero-plate-row + .hero-plate-row { margin-top: 2px; }
.hero-plate-l {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    flex: 0 0 auto;
}
.hero-plate-v {
    font-weight: 500;
    color: var(--ink);
}

/* Pull the meta-strip closer to the hero copy since the figure no longer
   needs the extra breathing room a framed card demanded. */
.hero--has-image .hero-meta-wrap { margin-top: var(--s-4); }

/* Compact size + image: the default `.hero-compact` rules in design-system.css
   lose the cascade against `.hero--has-image` (equal specificity, hero.css
   loads later) so the image-grid layout stays but its font sizes don't shrink.
   These compound selectors restore the compact treatment when both classes
   are present, keeping the image-on-the-right composition but with smaller
   type and tighter padding. */
.hero.hero--has-image.hero-compact { padding-top: 28px; }
.hero--has-image.hero-compact .hero-num { font-size: 40px; }
.hero--has-image.hero-compact .hero-num small { font-size: 11px; }
body .hero.hero--has-image.hero-compact .hero-title h1 {
    font-size: clamp(32px, 3.4vw, 52px);
    line-height: 1.04;
}
.hero--has-image.hero-compact .hero-deck {
    font-size: 14px;
    margin-top: var(--s-2);
    line-height: 1.5;
}
.hero--has-image.hero-compact .hero-figure {
    max-width: 220px;
    margin: var(--s-4) 0 var(--s-2) 0;
}
.hero--has-image.hero-compact .hero-meta-wrap { margin-top: var(--s-3); }

/* Banner-stripe overlay on the hero meta-wrap. Mirrors the same rule in
   exhibit.css so the treatment works on heroes outside the single-exhibit
   loader path (homepage, page_hero blocks). Keeps the exhibit.css copy as
   the source of truth for exhibit-only pages where hero.css isn't loaded. */
.exhibit-hero--banner-bar .hero-meta-wrap {
    background-color: var(--accent, #efefef);
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, .22) 40%, transparent 40%),
        linear-gradient(225deg, rgba(255, 255, 255, .14) 25%, transparent 25%);
}

/* Narrow viewports: collapse to a single column. The figure tucks under the
   copy at a contained width so it does not dominate. */
@media (max-width: 900px) {
    .hero--has-image .hero-num   { grid-column: 2 / span 11; grid-row: auto; }
    .hero--has-image .hero-title { grid-column: 2 / span 11; grid-row: auto; }
    .hero--has-image .hero-deck  { grid-column: 2 / span 11; grid-row: auto; max-width: none; }
    .hero-figure {
        grid-column: 2 / span 11;
        grid-row: auto;
        justify-self: start;
        max-width: 360px;
        margin-top: var(--s-5);
    }
}

/* Meta strip below the hero copy: switch from the default #efefef band to
   white so it reads as a clean break between the blue hero and the
   page-white sections below. */
.hero .hero-meta-wrap { background: #fff; }

/* Stretched click target covering only the upper area of the hero
   (the .container.grid-12 region). Lets the entire featured-exhibition
   block act as a single link to the exhibit, while the meta strip below
   remains non-interactive. The link sits on top via z-index so any click
   inside the hero hits it; visible text underneath is unaffected. */
.hero .container.grid-12 { position: relative; }
.hero-link {
  position: absolute;
  inset: calc(var(--s-8) * -1) 0 calc(var(--s-6) * -1) 0;  /* extend up over the section's top padding and down across the meta-wrap's margin gap */
  z-index: 2;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  background: transparent;
  transition: background-color .2s ease;
}
.hero-link:hover,
.hero-link:focus-visible {
  background: rgba(10, 10, 10, .025);
  outline: none;
}
.hero-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}

/* Subtle hover affordance on the title when the hero is clickable. */
.hero--linked .hero-title h1 { transition: color .2s ease; }
.hero--linked:hover .hero-title h1 { color: var(--ink-2); }

/* Homepage-only display-type tightening. The site-wide --t-h1/--t-h2 scale runs
   a little hot on the home page where several big headlines stack within a
   short scroll; trim each by ~12% on home only. Inner-page heroes and section
   heads keep their default scale. */
body.home .hero-title h1 {
  font-size: clamp(48px, 6.4vw, 112px);
}

/* ------------------------------------------------------------
   "Under Construction" badge — used on the single-exhibit hero,
   the homepage hero, and the homepage 3-up exhibit cards. Style
   variants are picked from the Layout Builder block UI. Lives in
   hero.css (not exhibit.css) so the homepage picks it up — only
   single-exhibit views enqueue exhibit.css.
   ------------------------------------------------------------ */
.uc-badge {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.uc-badge--amber {
    background: #f5b400;
    color: #1a1a1a;
}
.uc-badge--red {
    background: #d62828;
    color: #ffffff;
}
.uc-badge--striped {
    color: #1a1a1a;
    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
    );
    /* The diagonal pattern dims contrast — bump text legibility with a
       semi-opaque text shadow and a subtle outline so it reads over
       both yellow and black stripe stretches. */
    text-shadow: 0 0 4px #f5d300, 0 0 4px #f5d300, 0 0 4px #f5d300;
    padding: 10px 16px;
}
/* Hero positioning — covers both the single-exhibit page hero
   (`.hero.exhibit-hero`) and the homepage hero (`.hero`). */
.hero .uc-badge {
    position: absolute;
    top: var(--s-5);
    right: var(--gutter);
    z-index: 3;
}
/* Compact variant for the 3-up exhibit cards on the homepage,
   anchored to the card's `.exh-fig` (which is already relative). */
.exh .uc-badge--card {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    padding: 5px 9px;
    font-size: 10px;
    letter-spacing: .1em;
}
@media (max-width: 720px) {
    .hero .uc-badge {
        top: 12px;
        right: 12px;
        font-size: 11px;
        padding: 6px 10px;
    }
}