/* PIBG2038 v2 hotfix – hero readability, background image recovery, section rhythm */

:root {
  --pibg-overlay-dark: rgba(15,15,16,.58);
  --pibg-overlay-mid: rgba(15,15,16,.32);
  --pibg-overlay-light: rgba(15,15,16,.12);
  --pibg-text-strong: #fbf9f6;
  --pibg-text-soft: rgba(251,249,246,.88);
}

/* 1) Recover / preserve hero background images after override CSS */
.page-hero,
.hero,
.section-hero,
.hero-banner,
.cover-hero,
.wp-block-cover.alignfull,
.wp-block-cover.is-light,
.wp-block-cover {
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.page-hero > .wp-block-cover__image-background,
.hero > .wp-block-cover__image-background,
.section-hero > .wp-block-cover__image-background,
.hero-banner > .wp-block-cover__image-background,
.wp-block-cover > .wp-block-cover__image-background {
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
}

/* 2) Universal hero readability */
.page-hero,
.hero,
.section-hero,
.hero-banner,
.wp-block-cover {
  position: relative;
  isolation: isolate;
}

.page-hero::before,
.hero::before,
.section-hero::before,
.hero-banner::before,
.wp-block-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15,15,16,.22) 0%, rgba(15,15,16,.38) 35%, rgba(15,15,16,.60) 100%),
    linear-gradient(90deg, rgba(15,15,16,.50) 0%, rgba(15,15,16,.18) 55%, rgba(15,15,16,0) 100%);
  pointer-events: none;
  z-index: 0;
}

.page-hero > *,
.hero > *,
.section-hero > *,
.hero-banner > *,
.wp-block-cover > * {
  position: relative;
  z-index: 1;
}

.page-hero h1,
.page-hero h2,
.hero h1,
.hero h2,
.section-hero h1,
.section-hero h2,
.hero-banner h1,
.hero-banner h2,
.wp-block-cover h1,
.wp-block-cover h2 {
  color: var(--pibg-text-strong) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.28) !important;
}

.page-hero p,
.hero p,
.section-hero p,
.hero-banner p,
.wp-block-cover p,
.page-hero .is-style-subtle,
.hero .is-style-subtle,
.section-hero .is-style-subtle,
.hero-banner .is-style-subtle {
  color: var(--pibg-text-soft) !important;
}

/* 3) Book page: lighten dark hero/image overlap */
main .book-hero::before,
main .publication-hero::before,
body .book-hero::before,
body .publication-hero::before,
body .page-hero.is-book::before {
  background:
    linear-gradient(180deg, rgba(15,15,16,.10) 0%, rgba(15,15,16,.26) 42%, rgba(15,15,16,.42) 100%),
    linear-gradient(90deg, rgba(15,15,16,.34) 0%, rgba(15,15,16,.10) 55%, rgba(15,15,16,0) 100%) !important;
}

main .book-hero h1,
main .publication-hero h1,
main .book-hero h2,
main .publication-hero h2,
main .book-hero p,
main .publication-hero p,
body .page-hero.is-book h1,
body .page-hero.is-book h2,
body .page-hero.is-book p {
  text-shadow: 0 1px 8px rgba(0,0,0,.18) !important;
}

/* 4) Tighten sparse pages a bit */
.section,
.wp-block-group,
.entry-content > * {
  --flow-space: 0;
}

.page-hero + .section,
.page-hero + .wp-block-group,
.hero + .section,
.hero + .wp-block-group {
  margin-top: 0 !important;
}

.section { padding-top: 72px !important; padding-bottom: 72px !important; }
.section-lg { padding-top: 96px !important; padding-bottom: 96px !important; }

/* 5) Card rhythm for works / shop */
.card-grid,
.works-grid,
.shop-grid,
.archive-grid {
  gap: 28px !important;
}

.card-media,
.work-card .card-media,
.shop-card .card-media,
.archive-card .card-media {
  overflow: hidden !important;
}

.card-media img,
.work-card img,
.shop-card img,
.archive-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 6) Make dark CTA sections clearer */
.cta-section,
.contact-cta,
.collab-cta,
.dark-cta {
  background: #111214 !important;
  color: #fbf9f6 !important;
}

/* 7) Mobile */
@media (max-width: 768px) {
  .page-hero,
  .hero,
  .section-hero,
  .hero-banner,
  .wp-block-cover {
    min-height: clamp(420px, 72vh, 640px) !important;
  }

  .page-hero::before,
  .hero::before,
  .section-hero::before,
  .hero-banner::before,
  .wp-block-cover::before {
    background:
      linear-gradient(180deg, rgba(15,15,16,.20) 0%, rgba(15,15,16,.34) 38%, rgba(15,15,16,.62) 100%),
      linear-gradient(90deg, rgba(15,15,16,.26) 0%, rgba(15,15,16,.08) 60%, rgba(15,15,16,0) 100%) !important;
  }
}