/* ============================================================
   Regency Analytics LLC — Artwork Page Background System
   Shared by: index.html, insights.html, services.html, about.html
   ============================================================

   Architecture
   ────────────
   .artwork-page          → position:relative wrapper; content drives height
   .artwork-page__bg      → <picture> absolutely fills the full wrapper
   .artwork-page__bg img  → object-fit:cover, anchored to center top
   .artwork-page__overlay → very light tint; does NOT darken the image
   .artwork-page__content → in-flow; sets the wrapper's total height

   Why this is stable at every zoom level
   ───────────────────────────────────────
   The wrapper height = the natural height of .artwork-page__content (the
   page sections). The <picture> is position:absolute; inset:0, so it always
   fills exactly that height — whether the browser is at 75%, 100%, or 125%
   zoom, and whether the screen is 390px or 1920px wide.

   Responsive images
   ─────────────────
   Each page provides three image variants via <picture><source> elements:
     mobile  (max-width 640px)  → *-bg-mobile.png
     tablet  (max-width 1024px) → *-bg-tablet.png
     desktop (default)          → *-bg-desktop.png
   Until resized versions are supplied, all three point to the original.
   ============================================================ */

/* ── Shared wrapper ─────────────────────────────────────────────────────── */
.artwork-page {
  position: relative;
  overflow: hidden;         /* keeps the absolute bg inside the wrapper */
}

/* ── Background <picture> element ──────────────────────────────────────────
   display:contents removes <picture> from the box model entirely.
   The <img> inside then positions itself directly against .artwork-page
   (position:relative), guaranteeing it always fills 100% of wrapper height
   at every zoom level — no height-inheritance chain to break.            */
.artwork-page__bg {
  display: contents;
}

.artwork-page__bg img {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}

/* ── Overlay ───────────────────────────────────────────────────────────────
   Keeps image colors intact. Cards/sections handle their own readability.  */
.artwork-page__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ── Content layer ─────────────────────────────────────────────────────────
   In-flow element — its height defines the total wrapper height.           */
.artwork-page__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── Page-specific variants ─────────────────────────────────────────────── */

/* Home — warm ivory marble
   background-image on the wrapper is the only approach guaranteed to fill
   100% of wrapper height at every zoom level — no img height-chain needed. */
.artwork-page--home {
  background-color: #f7f3ec;
  background-image: url('../images/home-bg-desktop.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.artwork-page--home .artwork-page__overlay {
  background: rgba(252, 250, 246, 0.08);
}
/* Hide the <picture> element — background-image handles rendering */
.artwork-page--home .artwork-page__bg {
  display: none;
}

/* Our Insights — deep navy */
.artwork-page--insights {
  background-color: rgb(6, 14, 30);
}
.artwork-page--insights .artwork-page__overlay {
  background: none;
}

/* What We Do — warm ivory */
.artwork-page--services {
  background-color: #f7f3ec;
}
.artwork-page--services .artwork-page__overlay {
  background: rgba(252, 250, 246, 0.08);
}

/* About — warm ivory */
.artwork-page--about {
  background-color: #f7f3ec;
}
.artwork-page--about .artwork-page__overlay {
  background: rgba(252, 250, 246, 0.08);
}

/* AI-Powered App — warm ivory, same system as home */
.artwork-page--app {
  background-color: #f7f3ec;
  background-image: url('../images/app-bg-desktop.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.artwork-page--app .artwork-page__overlay {
  background: rgba(252, 250, 246, 0.08);
}
/* Hide the <picture> — background-image handles visual rendering */
.artwork-page--app .artwork-page__bg {
  display: none;
}
@media (max-width: 1024px) {
  .artwork-page--app {
    background-image: url('../images/app-bg-tablet.png');
  }
}
@media (max-width: 640px) {
  .artwork-page--app {
    background-image: url('../images/app-bg-mobile.png');
  }
}

/* Publications — warm ivory marble */
.artwork-page--publications {
  background-color: #f7f3ec;
  background-image: url('../images/publications-bg-desktop.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.artwork-page--publications .artwork-page__overlay {
  background: rgba(252, 250, 246, 0.08);
}
.artwork-page--publications .artwork-page__bg {
  display: none;
}
@media (max-width: 1440px) {
  .artwork-page--publications {
    background-image: url('../images/publications-bg-laptop.png');
  }
}
@media (max-width: 1024px) {
  .artwork-page--publications {
    background-image: url('../images/publications-bg-tablet.png');
  }
}
@media (max-width: 640px) {
  .artwork-page--publications {
    background-image: url('../images/publications-bg-mobile.png');
  }
}

/* Contact — dark navy classical */
.artwork-page--contact {
  background-color: #0a0a0a;
  background-image: url('../images/contact-bg.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.artwork-page--contact .artwork-page__overlay {
  background: none;
}
.artwork-page--contact .artwork-page__bg {
  display: none;
}
@media (max-width: 1024px) {
  .artwork-page--contact {
    background-position: 30% top;
  }
}
@media (max-width: 640px) {
  .artwork-page--contact {
    background-position: 25% top;
  }
}

/* ── Mobile overlay adjustments ────────────────────────────────────────── */
@media (max-width: 768px) {
  .artwork-page--insights .artwork-page__overlay {
    background: none;
  }
  .artwork-page--home .artwork-page__overlay,
  .artwork-page--services .artwork-page__overlay,
  .artwork-page--about .artwork-page__overlay {
    background: rgba(252, 250, 246, 0.16);
  }
  .artwork-page--publications .artwork-page__overlay {
    background: rgba(252, 250, 246, 0.16);
  }
  .artwork-page--contact .artwork-page__overlay {
    background: none;
  }
}