/* Compiled styles for the HOW hero (plain CSS) - created so the asset pipeline/Propshaft can serve how_hero.css
  This mirrors the contents of how_hero.scss but in plain CSS form so Rails finds the asset at runtime.
*/
/* Compiled styles for the HOW hero (plain CSS) - created so the asset pipeline/Propshaft can serve how_hero.css
  This mirrors the contents of how_hero.scss but in plain CSS form so Rails finds the asset at runtime.
*/

/* Allow the header to overlap the hero on the HOW page while keeping the
   header logo visible. We remove the body offset (so the hero can sit at
   the top of the viewport) and make the header background transparent so
   the hero artwork is visible underneath. The logo itself retains its
   white background from existing header styles for legibility. */
body.how-hero-active {
  padding-top: 0 !important;
}

/* Keep header visible but allow it to sit on top of the hero. */
body.how-hero-active .header {
  background: transparent !important;
  box-shadow: none !important;
}

.how-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 150px;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.how-hero .left {
  background: #c62828;
  color: #fff;
  padding: clamp(20px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.how-hero .brand-square {
  width: 64px;
  height: 64px;
  background: #fff;
  color: #c62828;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: Georgia, 'Times New Roman', Times, serif;
  border-radius: 2px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;
}

.how-hero h1 {
  margin: 0 0 0.25rem 0;
  color: inherit;
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.0rem, 4.6vw, 3.25rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
}

.how-hero p.lead {
  margin: 0;
  color: rgba(255,255,255,0.95);
  max-width: 56ch;
  font-size: clamp(0.95rem, 1.6vw, 1.0625rem);
  line-height: 1.6;
}

.how-hero .right {
  position: relative;
  background: linear-gradient(180deg, rgba(0,0,0,0.03), transparent);
  display: block;
  min-height: 80px;
}

.how-hero .art {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 55% 30%, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.00) 28%), linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02));
  background-color: #b71c1c;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
  transform-origin: center;
}

.how-pill {
  position: absolute;
  top: clamp(12px, 3vw, 48px);
  right: clamp(12px, 3vw, 48px);
  background: #fff;
  color: #c62828;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

@media (max-width: 1023px) {
  .how-hero { grid-template-columns: 1fr; }
  .how-hero .right { height: 80px; order: -1 }
  .how-pill { top: 12px; right: 12px }
  .how-hero { min-height: initial }
}

/* Desktop sizing: ensure the hero is between 300px and 400px on larger screens */
@media (min-width: 1024px) {
  .how-hero { min-height: 300px; max-height: 400px; }
}

/* Additional hero styles previously inline in how.html.erb */
.hero-container {
  position: relative;
  width: 100%;
  min-height: 0;
  overflow: visible;
  background: #f5f5f5;
}

@media (min-width: 768px) {
  .hero-container {
    min-height: 80vh;
    overflow: hidden;
  }
}

@media (min-width: 1024px) {
  .hero-container {
    min-height: 70vh;
  }
}

/* Background wrapper positioning */
.hero-bgimg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

@media (max-width: 767px) {
  .hero-bgimg-wrapper {
    position: relative;
    min-height: 300px;
  }
}

.hero-content-wrapper {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .hero-content-wrapper {
    background-color: #000;
    width: 100%;
  }
}

.hero-svg { width: 100%; height: 100%; display: none; }
@media (max-width: 767px) { .hero-svg.mobile { display: block; } }
@media (min-width: 768px) and (max-width: 1023px) { .hero-svg.tablet { display: block; } }
@media (min-width: 1024px) { .hero-svg.desktop { display: block; } }

.hero-content {
  position: relative;
  padding: 20px 24px;
  color: white;
  z-index: 10;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  max-width: 800px;
  text-align: left;
}

@media (min-width: 768px) {
  .hero-content {
    position: absolute;
    top: 40%;
    left: 24px;
    right: 24px;
    padding: 0;
  }
}

@media (max-width: 767px) {
  .hero-content {
    left: 20px;
    right: 20px;
    padding: 20px;
  }
}

.hero-content h1 {
  font-size: clamp(1.56rem, 3.75vw, 2.81rem);
  font-weight: 800;
  margin-bottom: 1.25rem;
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-family: 'Merriweather', Georgia, serif;
  max-width: 100%;
  word-break: break-word;
  color: white;
}

.hero-content p {
  font-size: clamp(1.19rem, 1.88vw, 1.38rem);
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 0;
  max-width: 30.5em;
  opacity: 0.96;
}

@media (max-width: 1023px) {
  .hero-content { left: 20px; right: 20px; }
  .page-content, .main-content, .how-main-content { padding-left: 20px !important; padding-right: 20px !important; }
}

/* Header transition rules used by the hero Stimulus controller */
.header {
  transition: background 0.3s, box-shadow 0.3s;
}
body.how-hero-active .header {
  background: transparent !important;
  box-shadow: none !important;
}
body.how-hero-active .header.header-solid {
  background: var(--primary-color) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Utility: copy of .hero-content typography for normal-flow sections
   Use this on sections that should visually match the hero foreground
   while remaining in document flow (no absolute positioning). */
.hero-copy {
  /* horizontal rhythm matches the hero foreground offsets
     Use the same fixed offsets the hero uses: 24px on desktop, 20px on smaller viewports.
     This keeps the left edge aligned with the absolutely-positioned .hero-content. */
  max-width: 800px;
  padding-left: 24px;
  padding-right: 24px;
  margin: 0 auto;
  color: var(--color-text-light);
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero-copy h1 {
  font-size: clamp(1.56rem, 3.75vw, 2.81rem);
  font-weight: 800;
  margin-bottom: 1.25rem;
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-family: 'Merriweather', Georgia, serif;
  word-break: break-word;
  color: var(--color-text-light);
}

.hero-copy p {
  font-size: clamp(1.19rem, 1.88vw, 1.38rem);
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 0;
  opacity: 0.96;
  color: var(--color-text-light);
}

@media (max-width: 1023px) {
  .hero-copy { padding-left: 20px; padding-right: 20px; }
}
@media (min-width: 1024px) {
  /* Desktop-only: force the hero-copy heading and paragraph to block widths
     that match the absolutely-positioned .hero-content for pixel parity. */
  .hero-copy h1 {
    display: block;
    max-width: 550px; /* 68.75% of 800px hero max-width */
    width: 100%;
    margin: 0 0 1.25rem 0;
  }

  .hero-copy p {
    display: block;
    margin: 0;
  }
}

/* ------------------------------------------------------------------
   Layout utilities for the `.one` section (full-bleed responsive grid)
   - `.one` is a full-bleed grid that spans the viewport like the hero
   - `.one-inner` controls how much of the grid the text spans across
     breakpoints (can be tuned to span more/less columns)
------------------------------------------------------------------ */
.one {
  /* create a 12-column grid to support column spans */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;

  /* make the section full-bleed (match hero full-bleed behavior) */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  /* horizontal padding that matches hero offsets */
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  background: transparent;
}

.one-inner {
  /* make the inner wrapper its own 12-column grid so children can
     occupy specific column spans (heading and paragraph can be placed
     independently). The outer `.one` provides full-bleed gutters; the
     inner grid controls typographic column spans. */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;

  /* default: leave a 1-column gutter on either side on desktop */
  grid-column: 2 / -2; /* spans columns 2..11 (leaving 1 col gutters)
                          change to 3 / -3 to tighten content width */
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Place the heading and paragraph into the inner grid columns */
.one-inner h1 {
  grid-column: 1 / -1; /* heading spans the full inner width */
}

.one > .one-p {
  /* place the paragraph on the outer `.one` grid so it can start one
     column further left than `.one-inner` (which leaves a 1-col gutter).
     Desktop: columns 1..7 (1 / 8). Mobile: full-width (handled below). */
  grid-column: 1 / 8;
  max-width: 900px;
  margin: 0;
}

  /* place the heading as a direct child so its left edge lines up with .one-p
     and span 4 columns on desktop */
  .one > .one-h1 {
    grid-column: 1 / 7; /* span columns 1..6 (six columns wide) */
    margin: 0 0 1rem 0;
  }

@media (max-width: 1023px) {
  .one {
    /* match hero mobile padding */
    padding-left: 20px;
    padding-right: 20px;
  }

  /* on smaller screens let the inner content span full width */
  .one-inner {
    grid-column: 1 / -1;
  }

  /* make the paragraph full width on small screens */
  .one > .one-p {
    grid-column: 1 / -1;
  }

  .one > .one-h1 {
    grid-column: 1 / -1; /* ensure full width on small screens */
  }
}

@media (min-width: 1400px) {
  /* optionally constrain very wide viewports so text doesn't get too long */
  .one-inner { max-width: 1400px; }
}



/* ------------------------------------------------------------------
   Descriptive-class demo styles
   These classes are semantic equivalents of `.one` / `.one-h1` / `.one-p`
   and are intended for demonstration and reuse elsewhere in the codebase.
------------------------------------------------------------------ */
.demo-bleed {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}


.demo-inner {
  grid-column: 2 / -2;
  max-width: 1424px;
  margin-left: auto;
  margin-right: auto;
  /* make inner a 12-column grid so child headings/paragraphs can use
     grid-column and align exactly like the `.one-inner` implementation */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}

/* Mobile-first: default to full-width blocks so small screens receive
   the simplest rules first. Tablet and desktop overrides follow. */
.layout-heading {
  grid-column: 1 / -1; /* mobile default: full width */
  /* Typography: match .hero-copy h1 exactly */
  font-size: clamp(1.56rem, 3.75vw, 2.81rem);
  font-weight: 800;
  margin-bottom: 1.25rem;
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-family: 'Merriweather', Georgia, serif;
  word-break: break-word;
  color: var(--color-text-light);
}

.layout-paragraph {
  grid-column: 1 / -1; /* mobile default: full width */
  margin: 0;
  /* Typography: match .hero-copy p exactly */
  font-size: clamp(1.19rem, 1.88vw, 1.38rem);
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 0;
  opacity: 0.96;
  color: var(--color-text-light);
}

/* Tablet: make the heading slightly wider (start earlier/extend less) */
@media (min-width: 768px) and (max-width: 1023px) {
  .demo-bleed { padding-left: 20px; padding-right: 20px; }
  .demo-inner { grid-column: 1 / -1; }
  .layout-heading { grid-column: 1 / 10; }
  /* paragraph remains full-width on tablet unless further tuning requested */
}

/* Desktop: apply the desktop column spans requested */
@media (min-width: 1024px) {
  .demo-bleed { padding-left: 40px; padding-right: 40px; }
  .demo-inner { grid-column: 2 / -2; }
  .layout-heading { grid-column: 1 / 8; }
  .layout-paragraph { grid-column: 1 / 9; }
}

/* Tablet: between 768px and 1023px, use a slightly wider heading span */
@media (min-width: 768px) and (max-width: 1023px) {
  .layout-heading { grid-column: 1 / 10; }
}


/* Research tools grid: make the Tailwind grid a child of the outer
   12-column full-bleed grid and enforce 1 / 2 / 3 columns at breakpoints.
   Mobile-first defaults to single-column for phones. Tablet: 2 cols.
   Desktop: 3 cols. The parent `.research-grid-span` spans 10 of 12
   columns on tablet+desktop (columns 2..11) to leave 1-col gutters. */
.research-grid-span { grid-column: 1 / -1; }

.research-grid-span > .grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr; /* mobile: single column */
  gap: 24px; /* match outer grid spacing */
}

@media (min-width: 768px) {
  /* Span 10 columns on tablet and larger */
  .research-grid-span { grid-column: 1 / -1; }
  .research-grid-span > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .research-grid-span > .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


  /* Ensure the inner Tailwind grid fills the research-grid-span width */

  .research-grid-span > .grid { width: 100%; }