/* 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; }

/* 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;
    }
}