/* ============================================================
   LSI BRAND UTILITIES
   Graphic devices derived from the Lafayette Square Institute
   Brand Book: diagonal stripes, cut-corner containers, band
   dividers, duotone photography, and topic icons.
   ============================================================ */


/* ============================================================
   1. DIAGONAL STRIPE PATTERN
   The striped fill inside the hexagon mark is the dominant
   brand motif. These utilities apply it as an overlay, an
   accent block, or a container fill.
   ============================================================ */

.stripe-bg,
.stripe-overlay::after {
  background-image: repeating-linear-gradient(
    var(--stripe-angle, 135deg),
    var(--stripe-color, var(--ls-navy-900)) 0,
    var(--stripe-color, var(--ls-navy-900)) var(--stripe-thickness, 2px),
    transparent var(--stripe-thickness, 2px),
    transparent calc(var(--stripe-thickness, 2px) + var(--stripe-gap, 6px))
  );
}

/* Layer a stripe pattern over a container (useful over photos
   or navy panels). Parent must be `position: relative`. */
.stripe-overlay { position: relative; }
.stripe-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
}

/* Stripe variants — pick the foreground color */
.stripe-teal    { --stripe-color: var(--ls-teal-500); }
.stripe-navy    { --stripe-color: var(--ls-navy-900); }
.stripe-white   { --stripe-color: var(--ls-white); }
.stripe-chartreuse { --stripe-color: var(--ls-chartreuse-500); }

/* Density variants */
.stripe-fine    { --stripe-thickness: 1px; --stripe-gap: 4px; }
.stripe-medium  { --stripe-thickness: 2px; --stripe-gap: 6px; }
.stripe-coarse  { --stripe-thickness: 3px; --stripe-gap: 10px; }

/* Big decorative stripe block — e.g., hero accent corner.
   Place inside a section with position: relative. */
.stripe-accent {
  position: absolute;
  inset: auto 0 0 auto;
  width: clamp(120px, 20vw, 240px);
  aspect-ratio: 1 / 1;
  background-image: repeating-linear-gradient(
    var(--stripe-angle, 135deg),
    var(--stripe-color, var(--ls-teal-500)) 0,
    var(--stripe-color, var(--ls-teal-500)) 2px,
    transparent 2px,
    transparent 8px
  );
  opacity: 0.8;
  pointer-events: none;
}


/* ============================================================
   2. CUT-CORNER CONTAINERS
   Chamfered rectangles seen on publication posters and
   conference banners. Apply to cards, CTAs, or feature blocks.
   ============================================================ */

.cut-corner {
  --cut: 18px;
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    0 100%
  );
}

.cut-corner--lg { --cut: 32px; }
.cut-corner--sm { --cut: 10px; }

/* Cut the bottom-left corner instead */
.cut-corner--bl {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  );
}


/* ============================================================
   3. BAND DIVIDERS
   Horizontal solid-color bands used between sections, drawn
   from the conference poster and 535 Insights covers.
   ============================================================ */

.band-divider {
  height: clamp(24px, 4vw, 56px);
  width: 100%;
}
.band-divider--navy      { background: var(--ls-navy-900); }
.band-divider--teal      { background: var(--ls-teal-500); }
.band-divider--chartreuse { background: var(--ls-chartreuse-500); }
.band-divider--light-teal { background: var(--ls-teal-100); }

/* Stacked three-band splash — navy / chartreuse / teal — for
   feature breaks on the homepage or topic pages. */
.band-stack {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: clamp(56px, 8vw, 120px);
}
.band-stack > * { display: block; }
.band-stack .band-navy      { background: var(--ls-navy-900); }
.band-stack .band-chartreuse { background: var(--ls-chartreuse-500); }
.band-stack .band-teal      { background: var(--ls-teal-500); }


/* ============================================================
   4. PHOTO DUOTONE + STRIPE OVERLAY
   Brand photography is desaturated with a teal cast. A subtle
   diagonal stripe overlay is often layered on top (see the
   homepage mockup's Capitol dome treatment).
   ============================================================ */

.photo-brand {
  position: relative;
  overflow: hidden;
  background: var(--ls-gray-200);
}
.photo-brand img,
.photo-brand picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
}
/* Gray linear cast laid over the grayscale image — neutral,
   editorial tone that works across all topic pages. */
.photo-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(58, 58, 52, 0.18),
    rgba(35, 35, 31, 0.42)
  );
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Diagonal stripe screen overlay */
.photo-brand.photo-brand--stripe::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18) 0,
    rgba(255, 255, 255, 0.18) 1px,
    transparent 1px,
    transparent 6px
  );
  pointer-events: none;
}

/* Hero backdrop — photo anchored behind a dark hero section. Use as
   a direct child of .page-hero or .about-hero. The treatment stacks:
   (1) grayscale image, (2) navy scrim that is strongest at top and
   bottom for h1 / lead legibility, (3) diagonal brand stripes at top
   that fade out halfway. Applied identically across every hero so the
   site feels consistent. */
.photo-brand--hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--ls-navy-900);
}
.photo-brand--hero img {
  filter: grayscale(1) contrast(1.08) brightness(0.48);
  object-position: center 30%;
}
/* Navy scrim: heavy at top (~88%) for white headline + logo, stays
   solid across the full height (never drops below ~62%) so lead copy
   and buttons sit on a reliably dark field. Deeper still at the
   bottom so the hero reads as a cohesive dark band. */
.photo-brand--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 32, 43, 0.88) 0%,
    rgba(15, 32, 43, 0.76) 30%,
    rgba(15, 32, 43, 0.66) 55%,
    rgba(15, 32, 43, 0.82) 100%
  );
  mix-blend-mode: normal;
  pointer-events: none;
}
/* Diagonal stripe screen — brand linework. Concentrated at the top
   third (behind eyebrow / breadcrumb / h1), fades to nothing past
   the mid-line so the lower image stays clean. */
.photo-brand--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(127, 225, 212, 0.22) 0,
    rgba(127, 225, 212, 0.22) 1px,
    transparent 1px,
    transparent 7px
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.55) 35%,
    rgba(0, 0, 0, 0) 60%
  );
          mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.55) 35%,
    rgba(0, 0, 0, 0) 60%
  );
  pointer-events: none;
}
.page-hero.has-photo,
.about-hero.has-photo { isolation: isolate; }
.page-hero.has-photo,
.about-hero.has-photo { min-height: clamp(360px, 46vw, 560px); }
.page-hero.has-photo > .container,
.about-hero.has-photo > .container { position: relative; z-index: 1; }

/* Text-shadow backstop inside photo heroes — subtle navy shadow keeps
   every line of type readable even if a bright patch of the underlying
   photograph leaks through the scrim. Only applies to .has-photo
   variants so the non-photo heroes stay flat. */
.page-hero.has-photo .eyebrow,
.page-hero.has-photo .breadcrumb,
.page-hero.has-photo h1,
.page-hero.has-photo .lead,
.about-hero.has-photo .about-hero__eyebrow,
.about-hero.has-photo .breadcrumb,
.about-hero.has-photo h1,
.about-hero.has-photo .lead {
  text-shadow: 0 1px 2px rgba(8, 20, 30, 0.55),
               0 0 18px rgba(8, 20, 30, 0.35);
}

/* Photo tile — editorial photograph used as a side image inside a
   content section. Fixed aspect so layouts stay stable. */
.photo-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ls-gray-200);
}
.photo-tile.photo-tile--wide { aspect-ratio: 16 / 9; }
.photo-tile.photo-tile--square { aspect-ratio: 1 / 1; }


/* ============================================================
   5. TOPIC ICONS
   Branded topic marks (home, employee-ownership, job-quality)
   sit inside a color block matched to the topic accent.
   ============================================================ */

.topic-icon {
  --bg: var(--ls-teal-500);
  --fg: var(--ls-navy-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: var(--bg);
  color: var(--fg);
  flex-shrink: 0;
}
.topic-icon svg { width: 70%; height: 70%; display: block; }

.topic-icon--housing {
  --bg: var(--ls-teal-500);
  --fg: var(--ls-navy-900);
}
.topic-icon--employee-ownership {
  --bg: var(--ls-chartreuse-500);
  --fg: var(--ls-navy-900);
}
.topic-icon--job-quality {
  --bg: var(--ls-purple-500);
  --fg: var(--ls-white);
}
.topic-icon--lg { width: 112px; height: 112px; }
.topic-icon--sm { width: 48px; height: 48px; }

/* When the topic icon is placed at the top of a page hero, give
   it breathing room above the breadcrumb. */
.page-hero .topic-icon { margin-bottom: var(--space-5); }


/* ============================================================
   6. CHARTREUSE BUTTON VARIANT
   Brand Book uses chartreuse sparingly as a high-attention
   accent. Useful for "Now available" or urgent CTAs.
   ============================================================ */

.btn--chartreuse {
  background: var(--ls-chartreuse-500);
  color: var(--ls-navy-900);
  border-color: var(--ls-chartreuse-500);
}
.btn--chartreuse:hover {
  background: var(--ls-chartreuse-400);
  border-color: var(--ls-chartreuse-400);
  color: var(--ls-navy-900);
}


/* ============================================================
   7. OVERSIZE OUTLINED NUMERAL
   Reserved for statistics and data callouts. Mirrors the
   huge population figures on the 535 Insights covers.
   ============================================================ */

.stat-numeral {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(3.5rem, 10vw, 7rem);
  line-height: 0.9;
  letter-spacing: var(--tracking-tight);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ls-navy-900);
  background-image: repeating-linear-gradient(
    135deg,
    var(--ls-teal-500) 0,
    var(--ls-teal-500) 2px,
    transparent 2px,
    transparent 8px
  );
  -webkit-background-clip: text;
          background-clip: text;
  display: inline-block;
}