/* ==========================================================================
   Exhibits & Events — Listing + Detail — La Habra Historical Museum
   Source of truth: Design/exhibits.html (archive/listing) and
   Design/exhibit-detail.html (single). Both templates share this one
   stylesheet since they're the same CPT (museum_program) and share most
   components (cards, tags, events, video). Nav + footer live in
   site-chrome.css. Scoped under .exhibits-page so it can't collide with
   tokens.css/base.css's own globals. Enqueued whenever viewing the
   museum_program archive or a single museum_program post.
   ========================================================================== */

.exhibits-page {
  --display: var(--font-display);
  --heritage: var(--font-heritage);
  --text: var(--font-text);
  font-family: var(--text);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}

.exhibits-page ::selection { background: var(--sage); color: var(--cream); }
.exhibits-page section { position: relative; }

/* ---------- placeholder photo utility ---------- */
.exhibits-page .ph-photo { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--sage-tint), var(--harbor-tint)); display: flex; align-items: center; justify-content: center; }
/* pointer-events:none — this stripe is purely decorative and must never
   catch clicks. Without it, a browser that stacks the ::before above the
   video (e.g. inside the reveal animation's transform context) would
   swallow every click on the video's own controls. Belt-and-suspenders
   alongside the video's z-index:1. */
.exhibits-page .ph-photo::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(30, 36, 32, .05) 0 10px, transparent 10px 20px); pointer-events: none; }
.exhibits-page .ph-photo span { position: relative; z-index: 1; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--deep-sage); text-align: center; padding: 0 16px; max-width: 85%; }
.exhibits-page .ph-photo .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 16px 12px; background: linear-gradient(180deg, transparent, rgba(30, 36, 32, .72) 60%); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-align: left; }
.exhibits-page .ph-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: relative; z-index: 1; }
.exhibits-page .ph-photo video { position: relative; z-index: 1; }
.exhibits-page .ph-r1 { border-radius: 40px 12px 12px 12px; }
.exhibits-page .ph-r2 { border-radius: 12px 40px 12px 12px; }
.exhibits-page .ph-r3 { border-radius: 12px 12px 12px 40px; }
.exhibits-page .ph-r4 { border-radius: 12px 12px 40px 12px; }

/* ---------- section shared ---------- */
.exhibits-page .pad { padding: clamp(56px, 7.5vw, 100px) clamp(22px, 6vw, 72px); }
.exhibits-page .bg-cream { background: var(--cream); }
.exhibits-page .bg-tint { background: var(--sage-tint); }
.exhibits-page .bg-deep { background: var(--deep-sage); color: var(--cream); }
.exhibits-page .bg-harbor { background: var(--harbor); color: #fff; }
.exhibits-page .bg-harbor .label { color: #C8D8E5; }
.exhibits-page .bg-harbor .eyebrow { color: #C8D8E5; }
.exhibits-page .bg-harbor .copy { color: #DCE8F0; }
.exhibits-page .label { font-family: var(--text); font-weight: 700; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px; display: block; color: var(--deep-sage); }
.exhibits-page .bg-deep .label { color: #C9DDB4; }
.exhibits-page h1 { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 5.4vw, 58px); line-height: 1.06; letter-spacing: -.02em; margin-bottom: 16px; }
.exhibits-page h1 em { font-family: var(--heritage); font-style: italic; font-weight: 400; color: var(--meadow); letter-spacing: 0; }
.exhibits-page h2 { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4vw, 46px); line-height: 1.08; letter-spacing: -.015em; margin-bottom: 16px; }
.exhibits-page h2 em { font-family: var(--heritage); font-style: italic; font-weight: 400; }
.exhibits-page .eyebrow { font-family: var(--heritage); font-style: italic; font-size: clamp(17px, 1.8vw, 20px); color: var(--harbor); margin-bottom: 12px; }
.exhibits-page .bg-deep .eyebrow { color: #C9DDB4; }
.exhibits-page .section-inner { max-width: 1150px; margin: 0 auto; }
.exhibits-page .copy { font-size: 17.5px; line-height: 1.7; color: #3E4740; margin-bottom: 16px; }
.exhibits-page .bg-deep .copy { color: #DCE8DC; }

/* ---------- pill buttons ---------- */
.exhibits-page .pill { display: inline-block; font-family: var(--text); font-weight: 700; font-size: 15.5px; padding: 13px 26px; border-radius: 999px; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; }
.exhibits-page .pill.p { background: var(--deep-sage); color: var(--cream); box-shadow: 0 14px 28px -14px rgba(79, 107, 61, .6); }
.exhibits-page .pill.p:hover { background: #3F5730; transform: translateY(-2px); }
.exhibits-page .pill.ghost.on-cream { color: var(--ink); border: 2px solid rgba(30, 36, 32, .22); background: transparent; }
.exhibits-page .pill.ghost.on-cream:hover { border-color: var(--harbor); color: var(--harbor); transform: translateY(-2px); }
.exhibits-page .pill.ghost.on-deep { color: var(--cream); border: 2px solid rgba(241, 236, 221, .5); background: transparent; }
.exhibits-page .pill.ghost.on-deep:hover { border-color: var(--cream); background: rgba(241, 236, 221, .12); transform: translateY(-2px); }

/* ---------- type tags ---------- */
.exhibits-page .tag { display: inline-block; font-family: var(--text); font-weight: 700; font-size: 12.5px; letter-spacing: .03em; padding: 5px 14px; border-radius: 999px; color: #fff; margin-bottom: 8px; }
.exhibits-page .tag.exhibit { background: var(--harbor); }
.exhibits-page .tag.event { background: var(--meadow); color: var(--ink); }

/* ---------- spotlight (featured exhibit band) ---------- */
.exhibits-page .spotlight { position: relative; display: flex; border-radius: 56px 20px 20px 20px; overflow: hidden; min-height: 320px; align-items: flex-end; box-shadow: 0 30px 60px -32px rgba(20, 26, 18, .45); text-decoration: none; color: inherit; }
.exhibits-page .spotlight .ph-photo { position: absolute; inset: 0; height: 100%; border-radius: 0; }
.exhibits-page .spotlight::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 20, 14, .82) 0%, rgba(15, 20, 14, .15) 55%, transparent 80%); z-index: 1; }
.exhibits-page .spotlight-inner { position: relative; z-index: 2; padding: clamp(26px, 4vw, 44px); display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; width: 100%; flex-wrap: wrap; }
.exhibits-page .spotlight .tag { margin-bottom: 10px; }
.exhibits-page .spotlight h3 { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3vw, 30px); color: #fff; margin: 0; }

/* ---------- exhibit/event cards (blob-card system) ---------- */
.exhibits-page .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(16px, 2.4vw, 26px); max-width: 1150px; margin: 28px auto 0; }
.exhibits-page .card { background: var(--cream); border: 1px solid rgba(30, 36, 32, .08); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.exhibits-page .card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(20, 26, 18, .4); }
.exhibits-page .card:nth-child(4n+1) { border-radius: 120px 26px 26px 26px; }
.exhibits-page .card:nth-child(4n+2) { border-radius: 26px 120px 26px 26px; }
.exhibits-page .card:nth-child(4n+3) { border-radius: 26px 26px 26px 120px; }
.exhibits-page .card:nth-child(4n+4) { border-radius: 26px 26px 120px 26px; }
@media (max-width: 560px) {
  .exhibits-page .card:nth-child(4n+1) { border-radius: 80px 22px 22px 22px; }
  .exhibits-page .card:nth-child(4n+2) { border-radius: 22px 80px 22px 22px; }
  .exhibits-page .card:nth-child(4n+3) { border-radius: 22px 22px 22px 80px; }
  .exhibits-page .card:nth-child(4n+4) { border-radius: 22px 22px 80px 22px; }
}
.exhibits-page .card .ph-photo { height: 150px; }
.exhibits-page .card-body { padding: 18px 20px 22px; }
.exhibits-page .card h3 { font-family: var(--display); font-weight: 700; font-size: 19px; margin-bottom: 6px; }
.exhibits-page .card p { font-size: 15.5px; line-height: 1.55; color: #3E4740; margin-bottom: 12px; }
.exhibits-page .card .pill { padding: 8px 16px; font-size: 13.5px; }
.exhibits-page .cards .card:nth-child(4n+3) .pill { margin-left: 56px; }

/* ---------- upcoming events row ---------- */
.exhibits-page .events { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.exhibits-page .event-row { display: flex; gap: 16px; align-items: center; border: 1.5px solid rgba(30, 36, 32, .14); border-radius: 16px; padding: 12px; transition: border-color .2s, transform .2s; text-decoration: none; color: inherit; }
.exhibits-page .event-row:hover { border-color: var(--sage); transform: translateY(-2px); }
.exhibits-page .event-row .ph-photo { width: 80px; height: 60px; flex: none; border-radius: 10px; }
.exhibits-page .event-row .ph-photo span { font-size: 8px; padding: 0 4px; }
.exhibits-page .event-title { font-family: var(--display); font-weight: 700; font-size: 16px; margin-bottom: 2px; }
.exhibits-page .event-sub { font-size: 14px; color: #5a6a5a; }
.exhibits-page .event-date { margin-left: auto; background: var(--meadow); color: var(--ink); font-weight: 700; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }

/* ---------- video cross-promo ---------- */
.exhibits-page .video-promo { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (max-width: 760px) { .exhibits-page .video-promo { grid-template-columns: 1fr; } }
.exhibits-page .video-frame { border: 2px solid rgba(241, 236, 221, .45); border-radius: 999px 999px 20px 20px; background: rgba(0, 0, 0, .15); padding: 10px; }
.exhibits-page .video-frame .ph-photo { border-radius: 999px 999px 14px 14px; aspect-ratio: 4/3; }
.exhibits-page .video-frame video { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
/* border-radius:inherit lives on the <video> itself (not just its wrapper)
   so the arch crop shows correctly in normal playback — but that means it
   also travels into the browser's native fullscreen mode, clipping the
   video into the same arch shape there instead of filling the screen.
   Reset it specifically for the fullscreen state. */
.exhibits-page .video-frame video:fullscreen,
.exhibits-page .video-frame video:-webkit-full-screen,
.exhibits-page .video-frame video:-moz-full-screen { border-radius: 0 !important; }

/* ---------- exhibit/event detail hero ---------- */
.exhibits-page .detail-hero { position: relative; min-height: 56vh; min-height: min(540px, 62svh); display: flex; align-items: flex-end; overflow: hidden; }
.exhibits-page .detail-hero .ph-photo { position: absolute; inset: 0; border-radius: 0; overflow: hidden; background: #20261e; }
/* Blurred-backdrop hero: the tall portrait shows in full (hero-main,
   object-fit:contain — never crops the face) over a blurred, darkened cover
   copy of itself (hero-blur) that fills the wide banner so there are no
   placeholder gaps. Works for any source aspect ratio with zero per-image
   tuning. The stripe placeholder ::before is only for the no-image case, so
   it's hidden once a real photo is present. */
.exhibits-page .detail-hero .hero-media::before { display: none; }
.exhibits-page .detail-hero .hero-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(30px) brightness(.5) saturate(1.15); transform: scale(1.18); z-index: 0; }
.exhibits-page .detail-hero .hero-main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
.exhibits-page .detail-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 20, 14, .85) 0%, rgba(15, 20, 14, .28) 55%, transparent 85%); z-index: 1; }
.exhibits-page .detail-hero-inner { position: relative; z-index: 2; padding: clamp(28px, 5vw, 56px) clamp(22px, 6vw, 72px) clamp(40px, 6vw, 64px); max-width: 920px; }
.exhibits-page .back-link { display: inline-flex; align-items: center; gap: 6px; color: #DCE4EA; font-size: 14.5px; font-weight: 600; text-decoration: none; margin-bottom: 14px; transition: color .2s; }
.exhibits-page .back-link:hover { color: #fff; }
.exhibits-page .detail-hero h1 { color: #fff; margin-bottom: 10px; }

/* ---------- detail body ---------- */
.exhibits-page .detail-grid { max-width: 760px; margin: 0 auto; }
.exhibits-page .img-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 24px; }
.exhibits-page .img-row .ph-photo { aspect-ratio: 1; border-radius: 16px; }
/* QA finding, 2026-07-15: the approved comp had no mobile breakpoint here
   either — 3 equal columns squeezed each placeholder's caption text into
   an illegible, overlapping mess on real phone widths. */
@media (max-width: 560px) { .exhibits-page .img-row { grid-template-columns: 1fr; } }

/* ---------- related items ("Also on view") ---------- */
.exhibits-page .related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
@media (max-width: 560px) { .exhibits-page .related-grid { grid-template-columns: 1fr; } }
.exhibits-page .related-card { display: flex; gap: 12px; align-items: center; border: 1.5px solid rgba(30, 36, 32, .14); border-radius: 16px; padding: 10px; text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
.exhibits-page .related-card:hover { border-color: var(--sage); transform: translateY(-2px); }
.exhibits-page .related-card .ph-photo { width: 64px; height: 52px; flex: none; border-radius: 10px; }
.exhibits-page .related-card b { font-family: var(--display); font-weight: 700; font-size: 14.5px; display: block; margin-bottom: 2px; }
.exhibits-page .related-card span { font-size: 13px; color: #5a6a5a; }

/* ---------- share icons ---------- */
.exhibits-page .share-icons { display: flex; gap: 14px; }
.exhibits-page .share-icons a { width: 44px; height: 44px; border-radius: 50%; background: var(--sage-tint); display: flex; align-items: center; justify-content: center; color: var(--deep-sage); transition: background .22s ease, color .22s ease, transform .22s ease; }
.exhibits-page .share-icons a:hover { background: var(--sage); color: var(--cream); transform: translateY(-3px); }
.exhibits-page .share-icons svg { width: 19px; height: 19px; }

/* ---------- stay connected / social row ---------- */
.exhibits-page .notify-wrap { max-width: 640px; margin: 0 auto; text-align: center; }
.exhibits-page .social-row { text-align: center; padding: 36px 16px 40px; }
.exhibits-page .social-row .share { display: flex; gap: 14px; justify-content: center; margin-top: 16px; }
.exhibits-page .social-row .share a { width: 44px; height: 44px; border-radius: 50%; background: var(--sage-tint); display: flex; align-items: center; justify-content: center; color: var(--deep-sage); transition: background .22s ease, color .22s ease, transform .22s ease; box-shadow: 0 8px 18px -12px rgba(30, 36, 32, .35); }
.exhibits-page .social-row .share a:hover { background: var(--sage); color: var(--cream); transform: translateY(-3px); }
.exhibits-page .social-row .share svg { width: 19px; height: 19px; }