/* Bellarmine Partners — polish.css
   =====================================================================
   CONSERVATIVE, REVERSIBLE VISUAL-POLISH PASS (loaded LAST, after
   style.css / extra.css / nav.css). Additive only: no existing rule is
   deleted or rewritten. To fully revert, remove the single
   <link rel="stylesheet" href="css/polish.css"> from each page head.

   Scope of this pass (finish + refinement, in the spirit of the
   Ariel / Charter Capital / Hyde Park Capital references):
     1. Optional stock-photo texture on navy panels (only appears if the
        licensed asset-pack files are present; graceful navy fallback if not)
     2. Slightly richer hero depth + accent underline detail
     3. Refined section rhythm, header depth-on-scroll, and hover finish
     4. Typographic tightening on large serif headings
   No content, services, claims, or regulated language added. Firm remains
   positioned exactly as before (independent boutique M&A advisory).
   ===================================================================== */

/* ---------------------------------------------------------------
   1. OPTIONAL STOCK TEXTURE ON DARK PANELS
   If the asset pack supplies these files, they layer in UNDER the
   existing navy gradients at low opacity for subtle texture/depth.
   If the files are absent, the browser simply falls back to the flat
   navy already defined in style.css — so this is safe with no assets.

   Expected (all optional) files in /images/:
     texture-navy.jpg   — subtle abstract/architectural texture for dark bands
   --------------------------------------------------------------- */
.philosophy,
.closing-quote,
.giving,
.page-hero {
  position: relative;
  isolation: isolate;
}
.philosophy::before,
.closing-quote::before,
.giving::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../images/texture-navy.jpg");
  background-size: cover;
  background-position: center;
  /* invisible until a real texture exists; then a whisper of it */
  opacity: 0.06;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
/* keep existing text/children above the texture layer */
.philosophy > .wrap,
.closing-quote > .wrap,
.giving > .wrap,
.page-hero > .wrap { position: relative; z-index: 1; }

/* ---------------------------------------------------------------
   2. HERO — a touch more depth + a refined accent detail
   --------------------------------------------------------------- */
.hero .eyebrow {
  display: inline-block;
  position: relative;
  padding-bottom: 14px;
}
.hero .eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: var(--steel);
  opacity: 0.9;
}
/* gentle vignette so a photographic hero (when added) reads cleanly */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(7,20,38,0.15) 0%, transparent 22%, transparent 60%, rgba(7,20,38,0.35) 100%);
  pointer-events: none;
}
.hero .btn-primary {
  box-shadow: 0 16px 30px -18px rgba(7, 20, 38, 0.65);
}

/* ---------------------------------------------------------------
   3. HEADER — subtle depth once the page is scrolled
   (class toggled by the tiny script appended to each page; if the
   script is absent the header simply stays flat — no breakage)
   --------------------------------------------------------------- */
.site-header {
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 10px 30px -22px rgba(11, 31, 58, 0.5);
  background: rgba(247, 244, 239, 0.92);
  backdrop-filter: saturate(1.1) blur(6px);
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
}

/* ---------------------------------------------------------------
   4. TYPOGRAPHIC + SURFACE FINISH
   --------------------------------------------------------------- */
/* Large serif headings: marginally tighter tracking, like the refs */
.hero h1,
.section-head h2,
.page-hero h1,
.philosophy blockquote,
.closing-quote blockquote {
  letter-spacing: -0.015em;
}

/* Card grid: refine hover + give the whole grid a soft lift */
.card-grid,
.industry-grid {
  box-shadow: 0 30px 60px -50px rgba(11, 31, 58, 0.55);
}
.card,
.industry {
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* Stat rule accent — echoes the reference sites' thin vertical markers */
.stat-list {
  border-left-width: 2px;
  border-left-color: var(--navy);
}

/* Contact form: slightly softer, more premium input finish */
.contact-form input,
.contact-form textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
  box-shadow: 0 0 0 3px rgba(11, 31, 58, 0.08);
}

/* Buttons: unify the ease + add a barely-there press feel */
.btn { transition: all 0.2s ease, transform 0.08s ease; }
.btn:active { transform: translateY(1px); }

/* Footer: hairline warmth at the very top edge */
footer {
  border-top: 1px solid rgba(168, 176, 184, 0.18);
}

/* Reveal groups: honor reduced motion (already handled upstream, restated
   here defensively so the polish layer never introduces motion) */
@media (prefers-reduced-motion: reduce) {
  .site-header.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .btn:active { transform: none; }
}

/* ---------------------------------------------------------------
   5. FEATURED INSIGHT — a slightly more editorial finish
   --------------------------------------------------------------- */
.insight-featured { box-shadow: 0 22px 45px -40px rgba(11, 31, 58, 0.5); }
.insight-featured .read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ===================================================================
   6. MOBILE-ONLY LAYOUT FIXES (max-width: 768px)
   Additive, mobile-scoped only. Desktop layouts are untouched — every
   rule here lives inside a max-width:768px media query. Guards against
   horizontal overflow and forces the multi-column grids to stack.
   =================================================================== */
@media (max-width: 768px) {
  /* prevent any accidental horizontal scroll on small screens
     (does not clip nav dropdowns, which are position:static on mobile) */
  html, body { overflow-x: hidden; }

  /* 1. Industry grid → single column */
  .industry-grid { grid-template-columns: 1fr !important; }
  .industry { padding: 24px 20px; }

  /* 2. Insights layout → stack */
  .insights-layout { grid-template-columns: 1fr !important; gap: 32px; }
  .insight-featured,
  .insight-list { width: 100%; max-width: 100%; }

  /* 3. Two-path / affiliate grids → stack */
  .affiliate-grid,
  .two-paths { grid-template-columns: 1fr !important; gap: 24px; }

  /* 4. Philanthropy / giving grid — stop horizontal scroll */
  .giving-grid { grid-template-columns: 1fr !important; gap: 40px; }
  .giving-pillars { width: 100%; max-width: 100%; }
  .giving,
  .giving-grid,
  .giving-pillars { overflow-x: hidden; }

  /* 5. Shorter mobile heroes */
  .hero { padding: 72px 0 64px !important; min-height: auto; }
  .page-hero,
  .article-hero { padding: 64px 0 56px !important; }

  /* 6. Hamburger touch target ≥44px */
  .nav-toggle { min-width: 44px; min-height: 44px; }
}

/* ===================================================================
   7. WIDER ARTICLE READING COLUMN (confirmed by Alexander)
   Overrides the earlier ~760px cap from extra.css so long-form
   articles read as a proper column on wide screens, while keeping a
   comfortable line length (~900–960px, not full-bleed).
   Loaded last, so these win without editing extra.css.
   =================================================================== */
.article-body { max-width: 920px; }
.article-standfirst { max-width: 920px; }
.article-hero h1 { max-width: 1000px; }

/* ===================================================================
   8. PHILANTHROPY — WARM / CALM RE-SKIN  (owner-confirmed)
   -------------------------------------------------------------------
   Brief: the Philanthropy section reads as "another navy sales panel."
   Convert the homepage #giving band and giving.html #giving to a warm
   ivory/cream band with navy type; pillar cards to light cards with a
   subtle navy border. Palette stays within existing --ivory / --navy /
   --steel tokens — no new colors, no layout/nav/order changes.
   Loaded after extra.css, so these win by cascade order (same specificity).
   To revert: delete section 8.
   =================================================================== */

/* Neutralize the navy-texture ::before layer from section 1 on the giving
   band so the warm background reads clean (texture-navy is for dark panels). */
.giving::before { display: none; }

/* The band itself: warm cream, not navy. */
.giving {
  background: var(--ivory);
  color: var(--charcoal);
  border-top: 1px solid rgba(11, 31, 58, 0.08);
  border-bottom: 1px solid rgba(11, 31, 58, 0.08);
}

/* Type back to the calm navy/charcoal system. */
.giving h2 { color: var(--navy); }
.giving .eyebrow { color: var(--pewter); }
.giving .rule { background: var(--steel); }
.giving p { color: var(--charcoal-soft); }

/* The homepage band links used inline color:var(--steel) for a dark bg;
   on cream that's too faint — bring them to navy for legibility. */
.giving .affiliate-link { color: var(--navy) !important; }
.giving .affiliate-link:hover { color: var(--navy-light) !important; }

/* Pillar cards: light cream/white with a subtle navy hairline border,
   replacing the translucent-on-navy treatment. */
.giving-pillars > div {
  background: #ffffff;
  border: 1px solid rgba(11, 31, 58, 0.14);
}
.giving-pillars > div:hover {
  background: #ffffff;
  border-color: rgba(11, 31, 58, 0.30);
  box-shadow: 0 20px 40px -32px rgba(11, 31, 58, 0.45);
}
.giving-pillars h4 { color: var(--navy); }
.giving-pillars p { color: var(--charcoal-soft); }

/* ===================================================================
   9. INTERIOR PAGE-HERO PHOTOGRAPHY  (owner-confirmed)
   -------------------------------------------------------------------
   Every inner .page-hero was flat navy. Add a full-bleed background
   photo + dark scrim so cream/ivory type stays readable, matching the
   homepage's photographic treatment. Pages are targeted via :has() on
   an ID that only exists on that page's interior template — the exact
   pattern already used in polish2.css (body:has(#firm) .page-hero).

   TEMPORARY: images hotlinked from Pexels CDN (same stopgap as the rest
   of the site; local-hosting swap tracked in images/README.md).

   Scrims: standard interior heroes use a firm navy scrim (~0.72–0.86)
   for headline contrast. The Philanthropy hero uses a deliberately
   LIGHTER / WARMER scrim so it reads calm, not like a blue wall.
   To revert: delete section 9.
   =================================================================== */

/* Shared: photo cover + position for every image-backed interior hero. */
body:has(#firm) .page-hero,
body:has(#services) .page-hero,
body:has(#industries) .page-hero,
body:has(#insights) .page-hero,
body:has(#affiliates) .page-hero,
body:has(#giving) .page-hero {
  background-size: cover;
  background-position: center;
}

/* firm.html — library / institutional
   (polish2.css already sets this same image on firm; restated here so the
   treatment is identical on pages that don't load polish2.) */
body:has(#firm) .page-hero {
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.82), rgba(9,25,48,0.90)),
    url("https://images.pexels.com/photos/6333733/pexels-photo-6333733.jpeg?auto=compress&cs=tinysrgb&w=2400");
}

/* services.html — facade */
body:has(#services) .page-hero {
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.80), rgba(9,25,48,0.90)),
    url("https://images.pexels.com/photos/33575259/pexels-photo-33575259.png?auto=compress&cs=tinysrgb&w=2400");
}

/* industries.html — workshop */
body:has(#industries) .page-hero {
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.80), rgba(9,25,48,0.90)),
    url("https://images.pexels.com/photos/30990849/pexels-photo-30990849.jpeg?auto=compress&cs=tinysrgb&w=2400");
}

/* insights.html — road / horizon */
body:has(#insights) .page-hero {
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.78), rgba(9,25,48,0.88)),
    url("https://images.pexels.com/photos/10610187/pexels-photo-10610187.jpeg?auto=compress&cs=tinysrgb&w=2400");
}

/* affiliates.html (Principal Investing) — columns */
body:has(#affiliates) .page-hero {
  background-image:
    linear-gradient(180deg, rgba(11,31,58,0.80), rgba(9,25,48,0.90)),
    url("https://images.pexels.com/photos/1000740/pexels-photo-1000740.jpeg?auto=compress&cs=tinysrgb&w=2400");
}

/* giving.html — Philanthropy hero.
   Keep the photo, but a LIGHTER, WARMER scrim than the navy interior heroes
   so it reads as a calm charity page, not a blue wall. Warm-charcoal base
   with a soft navy wash; deepened slightly at the top only so the ivory
   headline/lede stay legible while the overall panel feels softer.
   NOTE: this comes AFTER the shared block above, so it wins for #giving.
   giving.html doesn't load polish2, so polish.css is authoritative here. */
body:has(#giving) .page-hero {
  background-image:
    linear-gradient(180deg, rgba(42,44,46,0.66) 0%, rgba(42,44,46,0.50) 45%, rgba(11,31,58,0.48) 100%),
    url("https://images.pexels.com/photos/1000740/pexels-photo-1000740.jpeg?auto=compress&cs=tinysrgb&w=2400");
}