/* ============================================================================
   PHOTO-HERO TEMPLATE — shared layout for any HeroHeader used with a BgImage.

   Keyed on .hero-has-photo (added automatically whenever BgImage is passed), so
   every page that opts into a photographic hero gets the same premium banner:
     - taller banner with breathing room (extends DOWNWARD; top edge unchanged)
     - title anchored top-left; subtitle centred in the gap beneath it
     - primary action button top-right
     - compact standalone stat cards (icon + value + sub + progress bar) pinned
       flush onto the tab-strip baseline (bottom-right); on narrower laptops they
       drop to their own strip directly below the tabs (never floating up top)

   The photo, navy veil, blueprint-grid crosshatch and brand-blue glow live in
   HeroHeader.razor.css (also keyed on .hero-has-photo). This file is the LAYOUT.
   ============================================================================ */

/* Taller, roomier banner — extend downward, top edge stays put */
.hero-header.hero-has-photo { padding-top: 2.75rem; padding-bottom: 2.6rem; }
.hero-has-photo .hero-top { align-items: flex-start; min-height: 140px; }
.hero-has-photo .hero-top-left { align-self: stretch; }
.hero-has-photo .hero-top-right { align-self: flex-start; margin: 0; }

/* Title anchored top-left; subtitle centres in the gap beneath it (works for any
   amount of text — a longer subtitle just centres as a taller block). The tab
   strip's own top margin is removed so the subtitle centres against the FULL
   title-to-tabs gap; the subtitle's auto bottom-margin keeps clearance. */
.hero-has-photo .hero-top-left .hero-lead-text { display: flex; flex-direction: column; height: 100%; }
.hero-has-photo .hero-top-left .hero-lead-text h1 { margin-bottom: 0; }
.hero-has-photo .hero-top-left .hero-lead-text p { margin-top: auto; margin-bottom: auto; }
.hero-has-photo .hero-tabs { margin-top: 0; }

/* Stat cards — standalone (no frosted tray), compact, in one aligned row */
.hero-has-photo .hero-stats-row:has(> .hero-stat-card) {
    background: transparent; border: none; padding: 0; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    gap: 0.6rem; flex-wrap: nowrap; align-items: stretch;
}
.hero-has-photo .hero-stat-card {
    /* Fixed uniform size across EVERY hero banner. flex:1 1 0 made cards fill the tray, so
       their shared width tracked each page's widest label — inconsistent page-to-page. A hard
       142px (basis + max-width) makes every card identical everywhere; overflow:hidden stops a
       stray long label from stretching one card. align-items:stretch keeps heights equal. */
    flex: 0 0 142px; max-width: 142px; overflow: hidden;
    padding: 0.55rem 0.78rem 0.58rem; gap: 0.15rem;
    background: rgba(12,20,36,0.5);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    box-shadow: 0 10px 26px -14px rgba(0,0,0,0.55);
}
.hero-has-photo .hero-stat-card .hero-stat-label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.56rem; letter-spacing: 0.1em; }
.hero-has-photo .hero-stat-card .hero-stat-label i { font-size: 0.74rem; color: rgba(255,255,255,0.5); }
.hero-has-photo .hero-stat-card .hero-stat-value { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.12; margin-top: 0.12rem; }
.hero-has-photo .hero-stat-card .hero-stat-value-warn { color: #fca5a5; }
.hero-has-photo .hero-stat-card .hero-stat-value-empty { color: rgba(255,255,255,0.4); }
.hero-has-photo .hero-stat-card .hero-stat-sub { font-size: 0.64rem; }
.hero-has-photo .hero-stat-bar { display: block; height: 3px; margin-top: 0.4rem; background: rgba(255,255,255,0.13); border-radius: 3px; overflow: hidden; }
.hero-has-photo .hero-stat-bar-fill { display: block; height: 100%; border-radius: 3px; min-width: 4px; transition: width 0.4s ease; }
.hero-has-photo .hero-stat-link { cursor: pointer; transition: transform 0.14s, box-shadow 0.14s; }
.hero-has-photo .hero-stat-link:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.28) !important; }

/* Two-row hero nav — a section "hub tabs" pill (e.g. Materials section nav) sitting
   ABOVE the page's own local view tabs. Each .hero-tabs is an inline-flex pill, so by
   default two of them flow side-by-side on one line. Make each a block that hugs its
   content so the rows STACK: section nav on top, local tabs directly beneath. */
.hero-has-photo .hero-hubtabs,
.hero-has-photo .hero-hubtabs + .hero-tabs { display: flex; width: fit-content; }
.hero-has-photo .hero-hubtabs + .hero-tabs { margin-top: 0.45rem; }

/* Pin the stats flush onto the tab-strip baseline (bottom-right) */
.hero-has-photo .hero-stats-row { position: absolute; right: 1.7rem; bottom: 0; margin: 0; z-index: 3; }

/* Tab-less photo heroes (e.g. Dashboard, Lead Pipeline) must NOT look short just
   because there's nowhere to tab. Reserve the exact space a single tab strip would
   occupy (≈47px) below the title block, so the banner is the SAME height and the
   stats/ambient widget sit on the SAME baseline as every tabbed photo hero. */
.hero-header.hero-has-photo:not(:has(.hero-tabs)) { padding-bottom: 1.4rem; }
.hero-has-photo:not(:has(.hero-tabs)) .hero-inner { min-height: 187px; padding-bottom: 0; }

/* Laptop widths — no room beside the tabs: stats drop to their own strip below them */
@media (max-width: 1660px) {
    .hero-has-photo .hero-top { min-height: 104px; }
    .hero-has-photo .hero-inner { padding-bottom: 100px; }
    .hero-has-photo .hero-stats-row { bottom: 0.7rem; }
}
/* Phones: stack under the title */
@media (max-width: 900px) {
    .hero-has-photo .hero-top { flex-direction: column; }
    .hero-has-photo .hero-top-right { align-self: stretch; }
    .hero-has-photo .hero-inner { padding-bottom: 0; }
    .hero-has-photo .hero-stats-row { position: static; margin-top: 0.75rem; }
    .hero-has-photo .hero-stats-row:has(> .hero-stat-card) { flex-wrap: wrap; }
    .hero-has-photo .hero-stat-card { min-width: 120px; }
    /* stats stack under the title on phones — drop the reserved tab-strip space */
    .hero-has-photo:not(:has(.hero-tabs)) .hero-inner { min-height: 0; }
}