/* ==========================================================================
   BELLARMINE PARTNERS — POLISH PASS 2  (asset integration)
   Loaded via js/polish2.js (self-injected) or a <link>. Fully reversible:
   delete this file + js/polish2.js and remove their tags to revert completely.

   Design intent: calmer, cleaner, more institutional. No copy/nav/IA/order/
   logo/color/font changes. Every image layer has a navy overlay and a
   graceful fallback so the page looks intentional with or without assets.

   ------------------------------------------------------------------------
   ASSET INSTALL v2 — TEMPORARY CDN HOTLINK PHASE
   (Alexander / contact@bellarminepartners.com — confirmed)
   ------------------------------------------------------------------------
   >>> TEMPORARY: images are hotlinked from Pexels/Unsplash CDNs so the site
   >>> feels complete IMMEDIATELY. This is a stopgap. The original brief calls
   >>> for SELF-HOSTED images/ — swap back once someone with shell access runs
   >>> the curl download block in images/README.md.
   >>>
   >>> TO SWAP BACK TO LOCAL: each CDN url below has its intended local path in
   >>> a /* local: ../images/NAME.jpg */ comment right beside it. Replace the
   >>> CDN url with that local path (a mechanical find/replace) and delete these
   >>> TEMPORARY notes.
   ------------------------------------------------------------------------

   Slots (21):
     hero.jpg                              hero still (Charleston Ravenel Bridge)
     insight-timing.jpg  insight-prepare.jpg  insight-tax.jpg  insight-ai.jpg
     industry-01-manufacturing.jpg ... industry-12-agriculture.jpg
     approach.jpg   contact.jpg   about-library.jpg
   ========================================================================== */

/* ---- 1) HERO: full-bleed Charleston Ravenel Bridge still ------------------ */
/* Dark navy overlay keeps the cream headline readable. The city video /
   Chicago canyon still has been removed (see js/polish2.js). */
.hero-media {
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.30), rgba(9,25,48,0.62)),
    /* local: ../images/hero.jpg */
    url("https://images.pexels.com/photos/18274327/pexels-photo-18274327.jpeg?auto=compress&cs=tinysrgb&w=2400");
  background-size: cover;
  background-position: center;
}
@media (prefers-reduced-motion: reduce) {
  .hero-media { transform: none; transition: none; }
}

/* ---- 2) OUR APPROACH: one restrained, low-contrast image band ------------ */
/* #approach (.philosophy) is a DARK NAVY section with cream text, so the band
   uses a strong NAVY overlay (darker, not lighter). The image reads as a faint
   architectural texture behind the existing copy — columns/blockquote untouched. */
#approach { position: relative; overflow: hidden; }
#approach .wrap { position: relative; z-index: 1; }
.approach-band {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.52), rgba(9,25,48,0.70)),
    /* local: ../images/approach.jpg */
    url("https://images.pexels.com/photos/33575259/pexels-photo-33575259.png?auto=compress&cs=tinysrgb&w=2400");
  background-size: cover; background-position: center;
  filter: grayscale(0.1);
  pointer-events: none;
}

/* ---- 2b) FIRM PAGE HERO: quiet library still behind the page-hero -------- */
/* firm.html .page-hero is navy with cream text; about-library drops in as a
   faint, heavily-overlaid backdrop. Only firm.html has an #firm section
   following its .page-hero, so we scope via :has(). Graceful: missing asset
   falls back to the existing navy .page-hero. */
body:has(#firm) .page-hero {
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.32), rgba(9,25,48,0.60)),
    /* local: ../images/about-library.jpg */
    url("https://images.pexels.com/photos/6333733/pexels-photo-6333733.jpeg?auto=compress&cs=tinysrgb&w=2400");
  background-size: cover;
  background-position: center;
}

/* ---- 3) INSIGHTS: photo-backed thumbs (win over polish placeholder) ------ */
/* Loaded after polish.css, so these override the flat placeholder gradients. */
/* local: ../images/insight-timing.jpg  */ .thumb-timing  { background-image: linear-gradient(150deg, rgba(11,31,58,0.10), rgba(11,31,58,0.30)), url("https://images.pexels.com/photos/10610187/pexels-photo-10610187.jpeg?auto=compress&cs=tinysrgb&w=2400");  background-size: cover; background-position: center; }
/* local: ../images/insight-prepare.jpg */ .thumb-prepare { background-image: linear-gradient(150deg, rgba(11,31,58,0.10), rgba(11,31,58,0.30)), url("https://images.pexels.com/photos/6028170/pexels-photo-6028170.jpeg?auto=compress&cs=tinysrgb&w=2400"); background-size: cover; background-position: center; }
/* local: ../images/insight-tax.jpg     */ .thumb-tax     { background-image: linear-gradient(150deg, rgba(11,31,58,0.10), rgba(11,31,58,0.30)), url("https://images.pexels.com/photos/5921494/pexels-photo-5921494.jpeg?auto=compress&cs=tinysrgb&w=2400");     background-size: cover; background-position: center; }
/* local: ../images/insight-ai.jpg      */ .thumb-ai      { background-image: linear-gradient(150deg, rgba(11,31,58,0.10), rgba(11,31,58,0.30)), url("https://images.pexels.com/photos/3520697/pexels-photo-3520697.jpeg?auto=compress&cs=tinysrgb&w=2400");      background-size: cover; background-position: center; }

/* ---- 4) INDUSTRY COVERAGE: every tile photo-backed ----------------------- */
/* Applies on homepage (#industries) AND industries.html — same DOM order,
   so nth-child hits the right sector on both. Navy gradient keeps title/body
   readable; text recolored to ivory for contrast (still within the palette). */
#industries .industry {
  position: relative;
  color: var(--ivory);
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  isolation: isolate;
}
#industries .industry::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(160deg, rgba(11,31,58,0.78), rgba(9,25,48,0.90));
  transition: background 0.25s ease;
}
#industries .industry > * { position: relative; z-index: 1; }
#industries .industry h3 { color: var(--ivory); }
#industries .industry p { color: rgba(247,244,239,0.82); }
#industries .industry .ind-index { color: var(--steel); }
#industries .industry:hover { background-color: var(--navy); }
#industries .industry:hover::before {
  background: linear-gradient(160deg, rgba(11,31,58,0.70), rgba(9,25,48,0.84));
}
#industries .industry:hover .ind-index { color: var(--ivory); }

/* local: ../images/industry-01-manufacturing.jpg            */ #industries .industry:nth-child(1)  { background-image: url("https://images.pexels.com/photos/30990849/pexels-photo-30990849.jpeg?auto=compress&cs=tinysrgb&w=2400"); }
/* local: ../images/industry-02-professional-services.jpg    */ #industries .industry:nth-child(2)  { background-image: url("https://images.unsplash.com/photo-1497366216548-37526070297c?fm=jpg&q=90&w=2400"); }
/* local: ../images/industry-03-healthcare.jpg               */ #industries .industry:nth-child(3)  { background-image: url("https://images.unsplash.com/photo-1586773860418-d37222d8fce3?fm=jpg&q=90&w=2400"); }
/* local: ../images/industry-04-construction.jpg             */ #industries .industry:nth-child(4)  { background-image: url("https://images.pexels.com/photos/10143241/pexels-photo-10143241.jpeg?auto=compress&cs=tinysrgb&w=2400"); }
/* local: ../images/industry-05-consumer-retail.jpg          */ #industries .industry:nth-child(5)  { background-image: url("https://images.pexels.com/photos/5498024/pexels-photo-5498024.jpeg?auto=compress&cs=tinysrgb&w=2400"); }
/* local: ../images/industry-06-food-beverage.jpg            */ #industries .industry:nth-child(6)  { background-image: url("https://images.pexels.com/photos/7598915/pexels-photo-7598915.jpeg?auto=compress&cs=tinysrgb&w=2400"); }
/* local: ../images/industry-07-technology.jpg               */ #industries .industry:nth-child(7)  { background-image: url("https://images.pexels.com/photos/17489151/pexels-photo-17489151.jpeg?auto=compress&cs=tinysrgb&w=2400"); }
/* local: ../images/industry-08-distribution-logistics.jpg   */ #industries .industry:nth-child(8)  { background-image: url("https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?fm=jpg&q=90&w=2400"); }
/* local: ../images/industry-09-transportation-automotive.jpg*/ #industries .industry:nth-child(9)  { background-image: url("https://images.pexels.com/photos/11087830/pexels-photo-11087830.jpeg?auto=compress&cs=tinysrgb&w=2400"); }
/* local: ../images/industry-10-energy-environmental.jpg     */ #industries .industry:nth-child(10) { background-image: url("https://images.pexels.com/photos/9893731/pexels-photo-9893731.jpeg?auto=compress&cs=tinysrgb&w=2400"); }
/* local: ../images/industry-11-financial-insurance.jpg      */ #industries .industry:nth-child(11) { background-image: url("https://images.pexels.com/photos/1000740/pexels-photo-1000740.jpeg?auto=compress&cs=tinysrgb&w=2400"); }
/* local: ../images/industry-12-agriculture.jpg              */ #industries .industry:nth-child(12) { background-image: url("https://images.pexels.com/photos/10150971/pexels-photo-10150971.jpeg?auto=compress&cs=tinysrgb&w=2400"); }

/* ---- 5) CONTACT: quiet split panel (desktop only; mobile unchanged) ------- */
@media (min-width: 861px) {
  .contact-info.has-split {
    position: relative;
    padding-right: 40px;
    background-image:
      linear-gradient(90deg, var(--ivory) 58%, rgba(247,244,239,0.55) 78%, rgba(247,244,239,0) 100%),
      /* local: ../images/contact.jpg */
      url("https://images.pexels.com/photos/7377671/pexels-photo-7377671.jpeg?auto=compress&cs=tinysrgb&w=2400");
    background-repeat: no-repeat;
    background-position: left center, right center;
    background-size: auto, 42% auto;
  }
}
@media (max-width: 860px) {
  .contact-info.has-split { background-image: none; padding-right: 0; }
}

/* ---- Accessibility guard on new image-backed panels ---------------------- */
#industries .industry a:focus-visible,
.hero a:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; }

/* ==========================================================================
   BUGFIX PASS — 2 targeted overrides (owner-verified against live site)
   Placed LAST in the last-loaded stylesheet, with elevated specificity +
   !important, so no stale placeholder rule from an older deployed build can
   win the cascade. Nothing above is deleted; this only reinforces it.
   ========================================================================== */

/* (1) HERO — force the Charleston Ravenel Bridge still. Any city/Chicago
   video is stripped at runtime by js/polish2.js; this guarantees the still
   even if a stale .hero-media rule loads first. */
.hero .hero-media,
.hero-media {
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.30), rgba(9,25,48,0.62)),
    url("https://images.pexels.com/photos/18274327/pexels-photo-18274327.jpeg?auto=compress&cs=tinysrgb&w=2400") !important;
  background-size: cover !important;
  background-position: center !important;
}
/* Hide any injected hero <video>/city B-roll outright as a defensive guard. */
.hero video,
.hero .hero-video,
.hero-media video { display: none !important; }

/* (2) FEATURED INSIGHT THUMB — the blank navy "right time to sell" card.
   Higher specificity than any placeholder so the photo always renders. */
.insight-featured .feat-thumb.thumb-timing,
.insight-featured .thumb-timing,
.feat-thumb.thumb-timing,
.thumb-timing {
  background-image: linear-gradient(150deg, rgba(11,31,58,0.10), rgba(11,31,58,0.30)),
    url("https://images.pexels.com/photos/10610187/pexels-photo-10610187.jpeg?auto=compress&cs=tinysrgb&w=2400") !important;
  background-size: cover !important;
  background-position: center !important;
}

/* ==========================================================================
   POLISH PASS 3 — SUB-PAGE BANNER PHOTOGRAPHY + WARMER PHILANTHROPY
   (Alexander — confirmed. Visual polish only. No layout/nav/IA/copy changes.)
   --------------------------------------------------------------------------
   Two goals:
     (A) Every interior .page-hero / .article-hero gets a full-bleed CDN photo
         with a dark scrim so cream/ivory type stays readable — matching the
         homepage's photographic feel. Each page is scoped by its unique
         section id (#services, #industries, #insights, #affiliates, #contact)
         or, for articles, by a per-article body class.
     (B) Philanthropy reads as a calm charity page, not a navy sales panel:
         the homepage/giving band becomes a warm ivory field with navy text,
         cream pillar cards with a subtle navy border, and giving.html's
         page-hero uses a softer/warmer scrim over the same library photo.

   TEMPORARY CDN HOTLINK (same phase as above). Local swap paths noted inline.
   Every rule below is additive and reversible: delete this banner-to-EOF block
   to revert to the flat-navy interior heroes and the navy philanthropy band.
   ========================================================================== */

/* -----------------------------------------------------------------
   (A) SHARED: turn any photo-backed interior hero into a proper
   full-bleed banner. The scrim lives in the gradient layer of each
   scoped rule below; here we just guarantee cover/position/isolation
   and keep the decorative ::after ring subtle over photography.
   ----------------------------------------------------------------- */
.page-hero,
.article-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* SERVICES — institutional facade (non-industry — lightened for full color) */
/* local: ../images/page-services.jpg */
body:has(#services) .page-hero {
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.30), rgba(9,25,48,0.58)),
    url("https://images.pexels.com/photos/33575259/pexels-photo-33575259.png?auto=compress&cs=tinysrgb&w=2400");
}

/* INDUSTRIES — workshop (industry coverage — keeps the navy overlay) ------- */
/* local: ../images/page-industries.jpg */
body:has(#industries) .page-hero {
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.84), rgba(9,25,48,0.92)),
    url("https://images.pexels.com/photos/30990849/pexels-photo-30990849.jpeg?auto=compress&cs=tinysrgb&w=2400");
}

/* INSIGHTS — road / horizon (non-industry — lightened for full color) ------ */
/* local: ../images/page-insights.jpg */
body:has(#insights) .page-hero {
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.28), rgba(9,25,48,0.56)),
    url("https://images.pexels.com/photos/10610187/pexels-photo-10610187.jpeg?auto=compress&cs=tinysrgb&w=2400");
}

/* PRINCIPAL INVESTING (affiliates) — columns (non-industry — lightened) ---- */
/* local: ../images/page-affiliates.jpg */
body:has(#affiliates) .page-hero {
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.30), rgba(9,25,48,0.58)),
    url("https://images.pexels.com/photos/1000740/pexels-photo-1000740.jpeg?auto=compress&cs=tinysrgb&w=2400");
}

/* CONTACT — conference room (non-industry — lightened for full color) ------ */
/* local: ../images/page-contact.jpg */
body:has(#contact) .page-hero {
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.30), rgba(9,25,48,0.58)),
    url("https://images.pexels.com/photos/7377671/pexels-photo-7377671.jpeg?auto=compress&cs=tinysrgb&w=2400");
}

/* ARTICLE HEROES — reuse the four insight images per article ---------------
   Each article body carries a per-article class (added in the HTML) so the
   right image lands on the right piece. Editorial, non-industry photos, so
   the scrim is lightened to let color through; cream headline + standfirst
   stay readable via the text-shadow rule added in polish3.css. */
body.article-timing  .article-hero {
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.30), rgba(9,25,48,0.58)),
    url("https://images.pexels.com/photos/10610187/pexels-photo-10610187.jpeg?auto=compress&cs=tinysrgb&w=2400");
}
body.article-prepare .article-hero {
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.30), rgba(9,25,48,0.58)),
    url("https://images.pexels.com/photos/6028170/pexels-photo-6028170.jpeg?auto=compress&cs=tinysrgb&w=2400");
}
body.article-tax     .article-hero {
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.30), rgba(9,25,48,0.58)),
    url("https://images.pexels.com/photos/5921494/pexels-photo-5921494.jpeg?auto=compress&cs=tinysrgb&w=2400");
}
body.article-ai      .article-hero {
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.30), rgba(9,25,48,0.58)),
    url("https://images.pexels.com/photos/3520697/pexels-photo-3520697.jpeg?auto=compress&cs=tinysrgb&w=2400");
}

/* -----------------------------------------------------------------
   (B) PHILANTHROPY — warm, calm, charity-forward
   Applies to BOTH the homepage #giving band and giving.html.
   Overrides extra.css's navy #10233f block with a warm ivory field
   and navy type. Pillar cards become cream/white with a subtle navy
   border instead of translucent-on-navy.
   ----------------------------------------------------------------- */
.giving {
  background: var(--ivory) !important;
  color: var(--charcoal) !important;
}
/* neutralize the polish.css texture overlay that assumes a dark band */
.giving::before { display: none !important; }

.giving h2 { color: var(--navy) !important; }
.giving .eyebrow { color: var(--pewter) !important; }
.giving .rule { background: var(--steel) !important; }
.giving p { color: var(--charcoal-soft) !important; }

.giving-pillars > div {
  background: #ffffff !important;
  border: 1px solid rgba(11,31,58,0.14) !important;
  box-shadow: 0 18px 40px -34px rgba(11,31,58,0.4);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.giving-pillars > div:hover {
  background: #ffffff !important;
  border-color: rgba(11,31,58,0.3) !important;
  transform: translateY(-3px);
}
.giving-pillars h4 { color: var(--navy) !important; }
.giving-pillars p  { color: var(--charcoal-soft) !important; }

/* giving.html page-hero — same library photo, LIGHTER / WARMER scrim so it
   reads as calm and inviting rather than a blue wall. Softer navy at ~44%,
   warmed toward charcoal at the base. Scoped to the philanthropy page only. */
/* local: ../images/about-library.jpg */
body:has(#giving) .page-hero {
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.44), rgba(42,44,46,0.58)),
    url("https://images.pexels.com/photos/6333733/pexels-photo-6333733.jpeg?auto=compress&cs=tinysrgb&w=2400");
  background-size: cover;
  background-position: center;
}