/* ==========================================================================
   PAGE BANNER  (styles_banner.css) — wide brand banner at the top of a page
   Used by insights.html. Sits inside the dark .page-hero and is toned so it
   reads as part of the hero rather than a pasted rectangle.
   ========================================================================== */

.page-banner {
  position: relative;
  z-index: 1;
  margin: var(--space-5) 0 0;
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(244, 239, 228, 0.13);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.75);
}

.page-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2.45 / 1;          /* cinematic band: keeps the branding in frame */
  object-fit: cover;
  object-position: 42% 50%;
  filter: saturate(0.96) contrast(0.97) brightness(1.03);
}

/* merge the banner into the hero: dark fade at the top, copper breath bottom-left */
.page-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20, 32, 26, 0.55) 0%, rgba(20, 32, 26, 0) 34%),
    linear-gradient(0deg, rgba(20, 32, 26, 0.45) 0%, rgba(20, 32, 26, 0) 40%),
    radial-gradient(80% 120% at 8% 100%, rgba(201, 123, 74, 0.18), transparent 60%);
}

.page-banner figcaption {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  z-index: 2;
  max-width: calc(100% - var(--space-4));
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
  color: rgba(244, 239, 228, 0.92);
  /* chip, so the caption stays readable on top of a busy photograph */
  background: rgba(20, 32, 26, 0.74);
  border: 1px solid rgba(244, 239, 228, 0.14);
  border-radius: 8px;
  padding: 0.32rem 0.6rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---------- tablet ---------- */
@media (max-width: 980px) {
  .page-banner img { aspect-ratio: 2.1 / 1; }
}

/* ---------- phones: taller crop, focused on the emblem ---------- */
@media (max-width: 640px) {
  .page-banner { margin-top: var(--space-4); border-radius: 14px; }
  .page-banner img {
    aspect-ratio: 16 / 10;
    object-position: 34% 50%;
  }
  .page-banner figcaption { font-size: 0.62rem; left: var(--space-2); bottom: 0.6rem; }
}

/* ---------- wide variant: source is already panoramic, so no side cropping ----- */
.page-banner--wide img { aspect-ratio: 3 / 1; object-position: 50% 50%; }

/* the source lockup sits tight to the left edge; soften that edge so it reads as
   part of the hero rather than a hard cut */
.page-banner--wide::after {
  background:
    linear-gradient(90deg, rgba(20, 32, 26, 0.55) 0%, rgba(20, 32, 26, 0) 12%),
    linear-gradient(180deg, rgba(20, 32, 26, 0.5) 0%, rgba(20, 32, 26, 0) 32%),
    linear-gradient(0deg, rgba(20, 32, 26, 0.42) 0%, rgba(20, 32, 26, 0) 38%),
    radial-gradient(80% 120% at 10% 100%, rgba(201, 123, 74, 0.16), transparent 60%);
}

/* keep the source's own 3:1 ratio at every width, so the in-image branding and
   the factory->warehouse->customer flow are never cropped */
@media (max-width: 980px) {
  .page-banner--wide img { aspect-ratio: 3 / 1; }
}
@media (max-width: 640px) {
  /* phone: purpose-cropped art direction, so the scene reads instead of a
     cramped strip with unreadable overlay text baked in */
  .page-banner--wide img { aspect-ratio: 2.5 / 1; }
}