/**
 * Enhanced Feature Story styles for RE:PUBLIC Ghost theme
 * Full-screen hero image with styled title/subtitle/byline and rounded content box
 */

/* Full-screen hero background image - header scrolls, background stays fixed */
.feature-story-hero {
  position: relative; /* Relative so header scrolls with content */
  width: 100vw;
  min-height: 40vh; /* Reserve ~40vh of space above header */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Background image stays fixed while content scrolls */
  z-index: 0;
  /* 
   * Background image behavior options:
   * - fixed: Background image stays in place while content scrolls (current)
   * - scroll: Background scrolls with content (change background-attachment to 'scroll')
   * - fade: Fades out on scroll (requires JavaScript - see comment below)
   */
}

/* Create a fixed background layer that extends behind entire page */
body:has(.feature-story-hero)::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  min-height: 100vh; /* Ensure it covers full height */
  z-index: -1;
  pointer-events: none;
  background-image: var(--hero-bg-image, none);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover; /* Safari-specific */
}

/* Add black semi-transparent overlay to dim background by 40% */
body:has(.feature-story-hero)::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.4); /* 40% black overlay */
}

/* Ensure body and html background is transparent so background image shows through */
body:has(.feature-story-hero),
html:has(.feature-story-hero) {
  background-color: transparent !important;
}

/* Ensure main-wrap doesn't have a background */
body:has(.feature-story-hero) .main-wrap {
  background: transparent !important;
  background-color: transparent !important;
}

/* Overlay for text readability */
.feature-story-hero__overlay {
  position: relative; /* Changed from absolute to relative so it affects document flow */
  top: 0; /* Reset top since we're using relative positioning */
  left: 0;
  right: 0;
  min-height: 40vh; /* Minimum height to reserve space above header */
  padding-top: 40vh; /* Reserve ~40vh of space above header content */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 2rem; /* Add bottom padding to create space before body content */
  z-index: 1;
  background: transparent; /* Transparent area under title/subtitle/byline */
}

/* Heading container */
.feature-story-heading {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0;
}

/* Title styling - white, large, with drop shadow */
.feature-story-heading .m-heading__title.in-post,
.feature-story-heading .m-heading__title,
.feature-story-heading h1.m-heading__title,
.feature-story-hero .m-heading__title.in-post,
.feature-story-hero h1.m-heading__title {
  color: white !important;
  font-size: 120px !important;
  font-weight: bold !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0.75 !important; /* Reduced line spacing */
  position: relative;
  z-index: 10;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  display: flex;
  align-items: flex-start; /* Top-align for split titles */
  justify-content: center;
  flex-wrap: wrap;
  gap: 0em;
}

/* Custom styling for titles with "The RE:PUBLIC" pattern */
/* Position "THE" absolutely so it doesn't affect centering of "RE:PUBLIC" */
/* Desktop positioning */
.feature-story-heading .m-heading__title.in-post .title-prefix,
.feature-story-heading .m-heading__title .title-prefix,
.feature-story-hero .m-heading__title.in-post .title-prefix,
.feature-story-hero h1.m-heading__title .title-prefix {
  font-size: 40px !important;
  line-height: 0.75 !important; /* Reduced line spacing */
  position: absolute;
  top: 16px; /* Desktop: 8px up from previous 10px position */
  left: 50%; /* Start from center */
  transform: translateX(calc(-100% - 310px)); /* Desktop: Move left by its full width plus 310px */
  vertical-align: top;
  display: inline-block;
  white-space: nowrap;
  pointer-events: none; /* Don't interfere with layout */
  z-index: 20 !important; /* Ensure "THE" appears in front of "RE:PUBLIC" */
}

/* When title-prefix exists, ensure title-main is centered independently */
.feature-story-heading .m-heading__title.in-post:has(.title-prefix),
.feature-story-heading .m-heading__title:has(.title-prefix),
.feature-story-hero .m-heading__title.in-post:has(.title-prefix),
.feature-story-hero h1.m-heading__title:has(.title-prefix) {
  justify-content: center;
}

.feature-story-heading .m-heading__title.in-post .title-main,
.feature-story-heading .m-heading__title .title-main,
.feature-story-hero .m-heading__title.in-post .title-main,
.feature-story-hero h1.m-heading__title .title-main {
  font-size: 120px !important;
  line-height: 1 !important; /* Reduced line spacing */
  vertical-align: top;
  display: inline-block;
  position: relative;
  margin: 0 auto; /* Center independently */
  z-index: 10; /* Lower than title-prefix so "THE" appears in front */
}

/* Move blue circle down 24px for feature story title (adjusted up 2px) */
.feature-story-heading .logo-treatment .logo-colon::after,
.feature-story-hero .logo-treatment .logo-colon::after {
  margin-top: 32px !important; /* Original 10px + 24px - 2px = 32px */
}

/* Subtitle styling - white, Frame Italics, constrained width, with drop shadow */
.feature-story-heading .m-heading__subhead,
.feature-story-heading p.m-heading__subhead,
.feature-story-hero .m-heading__subhead,
.feature-story-hero p.m-heading__subhead {
  color: white !important;
  font-size: 28px !important;
  font-family: 'Frame Text', serif !important;
  font-style: italic !important;
  text-align: center !important;
  margin: 1rem auto 0 auto !important;
  padding: 0 !important;
  position: relative;
  z-index: 10;
  max-width: 800px !important; /* Match body content width */
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Byline/meta styling - white, with drop shadow */
.feature-story-heading .m-heading__meta,
.feature-story-hero .m-heading__meta {
  color: white !important;
  font-size: 18px !important;
  text-align: center !important;
  margin: 1rem 0 0 0 !important;
  padding: 0 !important;
  position: relative;
  z-index: 10;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.feature-story-heading .m-heading__meta__byline,
.feature-story-heading .m-heading__meta__time,
.feature-story-heading .m-heading__meta__divider,
.feature-story-heading .m-heading__meta span,
.feature-story-hero .m-heading__meta__byline,
.feature-story-hero .m-heading__meta__time,
.feature-story-hero .m-heading__meta__divider,
.feature-story-hero .m-heading__meta span {
  color: white !important;
}

/* Slug/tag styling */
.feature-story-heading .m-heading__slug {
  margin-bottom: 32px !important;
}

.feature-story-heading .m-heading__slug__link {
  color: white !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Mobile font size adjustments */
@media (max-width: 767px) {
  .feature-story-heading .m-heading__title.in-post,
  .feature-story-heading .m-heading__title,
  .feature-story-heading h1.m-heading__title,
  .feature-story-hero .m-heading__title.in-post,
  .feature-story-hero h1.m-heading__title {
    font-size:56 !important;
  }

  /* Mobile styling for split titles */
  .feature-story-heading .m-heading__title.in-post .title-prefix,
  .feature-story-heading .m-heading__title .title-prefix,
  .feature-story-hero .m-heading__title.in-post .title-prefix,
  .feature-story-hero h1.m-heading__title .title-prefix {
    font-size: 14px !important; /* Proportionally smaller on mobile */
  }

  .feature-story-heading .m-heading__title.in-post .title-main,
  .feature-story-heading .m-heading__title .title-main,
  .feature-story-hero .m-heading__title.in-post .title-main,
  .feature-story-hero h1.m-heading__title .title-main {
    font-size: 56px !important; /* Match mobile title size */
  }

  .feature-story-heading .m-heading__subhead,
  .feature-story-heading p.m-heading__subhead,
  .feature-story-hero .m-heading__subhead,
  .feature-story-hero p.m-heading__subhead {
    font-size: 18px !important;
    max-width: calc(100% - 2rem) !important; /* Constrain to viewport with padding on mobile */
  }

  .feature-story-heading .m-heading__meta,
  .feature-story-hero .m-heading__meta {
    font-size: 14px !important;
  }

  /* Adjust "THE" positioning on mobile - separate from desktop */
  .feature-story-heading .m-heading__title.in-post .title-prefix,
  .feature-story-heading .m-heading__title .title-prefix,
  .feature-story-hero .m-heading__title.in-post .title-prefix,
  .feature-story-hero h1.m-heading__title .title-prefix {
    top: 7px !important; /* Mobile: Move up 3px from desktop position */
    left: 50% !important; /* Start from center */
    transform: translateX(calc(-100% - 145px)) !important; /* Mobile: Move right 165px from desktop position (310px - 165px = 145px) */
  }

  .feature-story-hero {
    min-height: 30vh; /* Smaller reserved space on mobile */
    background-image: none !important; /* Remove background from hero element on mobile */
    background: none !important;
    background-attachment: scroll !important; /* Change from fixed to scroll on mobile */
  }
  
  /* Force remove inline background styles on mobile */
  .feature-story-hero[style*="background-image"] {
    background-image: none !important;
    background: none !important;
  }

  /* On mobile/iOS, hide the ::before pseudo-element and use JavaScript-created div instead */
  /* iOS Safari has a severe bug with background-attachment: fixed */
  body:has(.feature-story-hero)::before {
    content: none !important; /* Remove the pseudo-element entirely */
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background-image: none !important;
    background: none !important;
    pointer-events: none !important;
  }

  /* Also hide on html element if it has a background */
  html:has(.feature-story-hero)::before {
    content: none !important;
    display: none !important;
    background-image: none !important;
    background: none !important;
  }

  /* Style the iOS background fix div */
  #ios-bg-fix {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    z-index: -2 !important;
    pointer-events: none !important;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .feature-story-hero__overlay {
    min-height: 30vh; /* Smaller reserved space on mobile */
    padding-top: 30vh; /* Start after ~30vh on mobile */
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1.5rem; /* Less bottom padding on mobile */
  }

  /* No need for article padding-top on mobile since header overlay handles spacing */
  body:has(.feature-story-hero) article,
  .feature-story-hero ~ article {
    padding-top: 0 !important; /* Header overlay now handles spacing with relative positioning */
  }

  /* Move blue circle up 18px on mobile */
  .feature-story-heading .logo-treatment .logo-colon::after,
  .feature-story-hero .logo-treatment .logo-colon::after {
    margin-top: 15px !important; /* 32px - 18px = 14px */
  }

  /* Make both circles smaller on mobile */
  .feature-story-heading .logo-treatment .logo-colon::before,
  .feature-story-heading .logo-treatment .logo-colon::after,
  .feature-story-hero .logo-treatment .logo-colon::before,
  .feature-story-hero .logo-treatment .logo-colon::after {
    width: 0.18em !important; /* Smaller than default 0.2em */
    height: 0.18em !important; /* Smaller than default 0.2em */
  }

  /* Board bio mobile spacing - closer image to text */
  .feature-story-content .board-bio {
    gap: 18px !important; /* Reduced from 1.5rem (24px) to 18px */
    margin-top: 2rem !important; /* Ensure spacing from content above */
    margin-bottom: 2rem !important;
  }

  .feature-story-content .board-bio img {
    margin-bottom: 0 !important; /* Remove any bottom margin on image */
  }
}

/* Make ALL parent containers transparent so background shows through */
/* BUT exclude .feature-story-content which needs its own background */
body:has(.feature-story-hero) .main-wrap,
body:has(.feature-story-hero) .l-content,
body:has(.feature-story-hero) .l-wrapper.in-post,
body:has(.feature-story-hero) .l-post-content,
body:has(.feature-story-hero) article,
body:has(.feature-story-hero) .js-post-content,
body:has(.feature-story-hero) .pos-relative {
  background: transparent !important;
  background-color: transparent !important;
}

/* Explicitly exclude feature-story-content from transparent rule - handled by .feature-story-content rule below */

/* Specifically target main-wrap which might have a default background */
body:has(.feature-story-hero) main.main-wrap {
  background: transparent !important;
  background-color: transparent !important;
}

/* Fallback for browsers without :has() support */
.feature-story-hero ~ article .main-wrap,
.feature-story-hero ~ article .l-content,
.feature-story-hero ~ article .l-wrapper.in-post,
.feature-story-hero ~ article .l-post-content {
  background: transparent !important;
  background-color: transparent !important;
}

/* No need for article padding-top since header overlay now uses relative positioning and pushes content down naturally */
body:has(.feature-story-hero) article,
.feature-story-hero ~ article {
  padding-top: 0 !important; /* Header overlay now handles spacing with relative positioning */
}

/* Content area - rounded rectangle with opaque white background */
/* Use very high specificity to ensure it overrides parent transparent backgrounds */
body:has(.feature-story-hero) .feature-story-content,
.feature-story-content {
  position: relative;
  z-index: 1;
  background: #ffffff !important; /* Totally opaque white */
  background-color: #ffffff !important;
  border-radius: 12px;
  padding: 3rem 2rem;
  margin-top: 0 !important; /* No top margin since article has padding */
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px; /* Match standard post content width */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow like mapstory-paper */
}

/* Drop cap styling for feature story content */
/* Make drop cap exactly 3 lines tall: if body line-height is ~1.5em, then 3 lines = 4.5em */
/* With drop cap line-height of 0.9, font-size should be 4.5em / 0.9 = 5em */
.feature-story-content > p:first-of-type::first-letter {
  float: left !important;
  font-size: 5em !important; /* Height of 3 lines (5em * 0.9 = 4.5em ≈ 3 * 1.5em body line-height) */
  line-height: 0.9 !important;
  font-weight: 700 !important;
  margin-right: 0.08em !important;
  margin-top: 0.02em !important;
  font-style: normal !important;
  font-family: 'Brandon Grotesque', sans-serif !important;
}

/* If the first element is a figure or a Koenig card, apply the drop cap to the next paragraph */
.feature-story-content > .kg-card:first-child + p::first-letter,
.feature-story-content > figure:first-child + p::first-letter {
  float: left !important;
  font-size: 5em !important; /* Height of 3 lines (5em * 0.9 = 4.5em ≈ 3 * 1.5em body line-height) */
  line-height: 0.9 !important;
  font-weight: 700 !important;
  margin-right: 0.08em !important;
  margin-top: 0.02em !important;
  font-style: normal !important;
  font-family: 'Brandon Grotesque', sans-serif !important;
}

/* Reduce gap between byline and text content */
.feature-story-heading .m-heading__meta,
.feature-story-hero .m-heading__meta {
  margin-bottom: 1rem !important; /* Reduce from default */
}

/* Fallback for browsers without :has() support */
.feature-story-hero ~ article .l-content,
.feature-story-hero ~ article .l-wrapper.in-post,
.feature-story-hero ~ article .l-post-content {
  background: transparent !important;
}

/* Ensure content is above background */
.feature-story-content .js-post-content {
  position: relative;
  z-index: 2;
}

/* Dark mode support - use dark semi-transparent background */
html[data-theme="dark"] .feature-story-content {
  background: rgba(0, 0, 0, 0.95) !important;
  background-color: rgba(0, 0, 0, 0.95) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Dark mode text colors - all content elements */
html[data-theme="dark"] .feature-story-content p,
html[data-theme="dark"] .feature-story-content,
html[data-theme="dark"] .feature-story-content h1,
html[data-theme="dark"] .feature-story-content h2,
html[data-theme="dark"] .feature-story-content h3,
html[data-theme="dark"] .feature-story-content h4,
html[data-theme="dark"] .feature-story-content h5,
html[data-theme="dark"] .feature-story-content h6,
html[data-theme="dark"] .feature-story-content li,
html[data-theme="dark"] .feature-story-content ul,
html[data-theme="dark"] .feature-story-content ol,
html[data-theme="dark"] .feature-story-content blockquote,
html[data-theme="dark"] .feature-story-content code,
html[data-theme="dark"] .feature-story-content pre {
  color: #e5e7eb !important;
}

/* Dark mode links */
html[data-theme="dark"] .feature-story-content a {
  color: #FFE066 !important; /* Yellow for dark mode - better readability */
}

html[data-theme="dark"] .feature-story-content a:hover {
  color: #FFD700 !important; /* Slightly brighter yellow on hover */
}

/* Dark mode custom highlight styles */
html[data-theme="dark"] .feature-story-content .highlight-yellow {
  background: linear-gradient(
    transparent 60%,
    #6B7280 60% /* Medium gray highlight for dark mode */
  ) !important;
}

html[data-theme="dark"] .feature-story-content .marker {
  background: linear-gradient(
    transparent 60%,
    #6B7280 60% /* Medium gray highlight for dark mode */
  ) !important;
}

/* Dark mode tags section - add semi-transparent dark background */
html[data-theme="dark"] .feature-story-content .m-tags {
  background: rgba(0, 0, 0, 0.95) !important;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0;
}

html[data-theme="dark"] .feature-story-content .m-tags h3,
html[data-theme="dark"] .feature-story-content .m-tags a {
  color: #e5e7eb !important;
}

/* Light mode author section - add opaque white background */
body:has(.feature-story-hero) .m-author {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 800px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Dark mode author section - add semi-transparent dark background */
html[data-theme="dark"] body:has(.feature-story-hero) .m-author {
  background: rgba(0, 0, 0, 0.95) !important;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 800px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .m-author__name a,
html[data-theme="dark"] .m-author__bio,
html[data-theme="dark"] .m-author__info {
  color: #e5e7eb !important;
}

/* Light mode subscribe section - add opaque white background */
body:has(.feature-story-hero) .m-subscribe-section {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 800px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Dark mode subscribe section - add semi-transparent dark background */
html[data-theme="dark"] body:has(.feature-story-hero) .m-subscribe-section {
  background: rgba(0, 0, 0, 0.95) !important;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 800px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .m-subscribe-section__title,
html[data-theme="dark"] .m-subscribe-section__description {
  color: #e5e7eb !important;
}

/* Light mode related posts section - add opaque white background */
body:has(.feature-story-hero) .m-recommended {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 1200px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Dark mode related posts section - add semi-transparent dark background */
html[data-theme="dark"] body:has(.feature-story-hero) .m-recommended {
  background: rgba(0, 0, 0, 0.95) !important;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 1200px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .m-section-title.in-recommended {
  color: #e5e7eb !important;
}

/* Dark mode comments section - add semi-transparent dark background */
html[data-theme="dark"] body:has(.feature-story-hero) .m-comments {
  background: rgba(0, 0, 0, 0.95) !important;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 800px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Dark mode blockquotes */
html[data-theme="dark"] .feature-story-content blockquote {
  border-left-color: #374151 !important;
}

/* Dark mode code blocks */
html[data-theme="dark"] .feature-story-content pre {
  background: #1f2937 !important;
  border-color: #374151 !important;
}

html[data-theme="dark"] .feature-story-content code {
  background: #1f2937 !important;
}

/* CTA/Button card backgrounds - add backgrounds for both themes */
body:has(.feature-story-hero) .kg-cta-content,
body:has(.feature-story-hero) .kg-button-card,
body:has(.feature-story-hero) .kg-header-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 800px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Dark mode CTA/Button card backgrounds */
html[data-theme="dark"] body:has(.feature-story-hero) .kg-cta-content,
html[data-theme="dark"] body:has(.feature-story-hero) .kg-button-card,
html[data-theme="dark"] body:has(.feature-story-hero) .kg-header-card {
  background: rgba(0, 0, 0, 0.95) !important;
  background-color: rgba(0, 0, 0, 0.95) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Share buttons - ensure they're positioned in right margin, not inside content box */
.feature-story-content .m-share {
  display: none; /* Hide if accidentally inside content box */
}

/* Ensure share buttons work correctly in right margin - use default theme positioning from post.css */

/* Dark mode share buttons - no background or shadow */
html[data-theme="dark"] body:has(.feature-story-hero) .m-share {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.feature-story-hero) .m-share__content {
  background: transparent !important;
}

/* Board bio styling - number and title side-by-side */
.feature-story-content .board-bio {
  display: flex;
  gap: 1.5rem;
  margin: 2rem 0;
  margin-bottom: calc(2rem + 16px) !important; /* Add 16px extra spacing between rows */
}

.feature-story-content .board-bio img {
  flex-shrink: 0;
  width: 200px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.feature-story-content .board-bio > div {
  flex: 1;
  min-width: 0; /* Allow flex item to shrink and allow float to work */
}

/* Make number and title appear side-by-side in two columns */
/* Float the number to the left - width will be determined by content */
.feature-story-content .board-bio > div > h3:first-of-type {
  float: left !important;
  width: auto !important; /* Width fits the number content */
  min-width: 0 !important;
  margin-right: 0.5rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  line-height: 1 !important; /* Tight line-height to align with title text */
  clear: none !important;
  text-align: left !important;
}

/* Make the paragraph containing the title stay in its own column */
/* Calculate margin-left based on number font-size (3em) + gap (0.5rem) */
/* For numbers up to 99, we need roughly 4em width */
.feature-story-content .board-bio > div > p:first-of-type {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-left: calc(4em + 0.5rem) !important; /* Number width (approx 3.5-4em for 2 digits) + gap */
  padding-top: 0 !important;
  overflow: hidden !important; /* Creates block formatting context to sit beside float */
  display: block !important;
  clear: none !important; /* Don't clear the float - stay beside it */
}

/* Clear the float after the title paragraph so subsequent content doesn't wrap around the number */
.feature-story-content .board-bio > div > p:first-of-type::after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}

/* Style the h3 inside the paragraph (the title) */
.feature-story-content .board-bio > div > p:first-of-type h3 {
  display: inline !important;
  margin: 0 !important;
  font-size: inherit !important;
  line-height: 1.2 !important;
}

/* 
 * OPTIONAL: Fade out background image on scroll
 * Uncomment the JavaScript below and add it to the template's scripts block
 * to fade out the background image as user scrolls
 * 
 * <script>
 * (function() {
 *   const hero = document.querySelector('.feature-story-hero');
 *   const content = document.querySelector('.feature-story-content');
 *   if (!hero || !content) return;
 *   
 *   function updateOpacity() {
 *     const contentTop = content.getBoundingClientRect().top;
 *     const windowHeight = window.innerHeight;
 *     const fadeStart = windowHeight * 0.5; // Start fading at 50% of viewport
 *     const fadeEnd = 0; // Fully faded when content reaches top
 *     
 *     if (contentTop > fadeStart) {
 *       hero.style.opacity = '1';
 *     } else if (contentTop > fadeEnd) {
 *       const progress = (fadeStart - contentTop) / fadeStart;
 *       hero.style.opacity = Math.max(0, 1 - progress).toString();
 *     } else {
 *       hero.style.opacity = '0';
 *     }
 *   }
 *   
 *   window.addEventListener('scroll', updateOpacity, { passive: true });
 *   updateOpacity(); // Initial call
 * })();
 * </script>
 */