/* Conservation page composition — a long-form editorial layout, not a
   grid of stat cards. Reusable primitives (tag, placeholder chip/block,
   surfaces) live in style.css; this file is the arrangement particular
   to conservation.html. */

.story-intro {
  max-width: var(--content-width-prose);
  margin-inline: auto;
}
.story-intro p.lead {
  max-width: 56ch;
  margin-inline: auto;
}

/* Plain prose sections (.story without .story-split) narrow and center the
   whole wrap, not just the paragraphs inside it - otherwise the h2 (full
   .wrap width, no measure of its own) and the paragraphs beneath it
   (centered at --measure via the global p fix) end up in two different,
   visibly mismatched columns. .story-split keeps the plain, full-width
   .wrap - it needs the room for its text+image grid. */
.story:not(.story--split) .wrap {
  max-width: var(--content-width-prose);
  margin-inline: auto;
}

.story h2 {
  margin-top: var(--space-md);
}
/* Overrides the global p { max-width: var(--measure) } - .story .wrap above
   already narrows the whole section to a readable column, so a paragraph
   inside it doesn't need its own separate, narrower cap on top of that
   (that was the actual over-correction: two nested max-widths stacking,
   leaving the paragraph noticeably narrower than the heading right above
   it). Letting it fill .story .wrap directly keeps headings and body copy
   in the exact same column. */
.story p {
  max-width: none;
}
.story-list {
  max-width: none;
  margin-block: var(--space-sm);
  padding-left: 1.25em;
  list-style: disc;
}
.story-list li {
  margin-bottom: var(--space-3xs);
  line-height: var(--leading-relaxed);
}
.story-list li:last-child {
  margin-bottom: 0;
}

/* Full-bleed lead photo, opening the page (moved ahead of the intro text -
   this is the visual lead-in, not a mid-article break). Sized and treated
   the same way as the activity pages' hero (.activity-header in
   activity.css): a fixed viewport-relative height rather than img's natural
   aspect ratio, so it reads as a deliberate hero frame instead of a small
   inline photo, plus the same bottom gradient scrim + Zilla Slab overlay
   title convention used there.
   The crop/scrim/overlay live in __frame, an inner box that is the thing
   actually sized to min-height - the img inside it is position:absolute so
   its height:100% resolves against __frame's used height (matching
   .activity-header's noscript-wrapped-img trick), not against .figure-break
   itself, whose height is auto (frame height + the figcaption below it). A
   plain-flow img with height:100% here would fall back to its intrinsic
   aspect ratio and silently ignore min-height entirely - this was the bug
   that made the previous "enlarge/reduce hero height" passes not actually
   change what rendered. */
.figure-break {
  margin: 0;
  width: 100%;
}
.figure-break__frame {
  position: relative;
  width: 100%;
  min-height: 63vh; /* 70vh reduced by 10% per the latest hero-sizing pass */
  overflow: hidden;
}
.figure-break__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.figure-break__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 25, 0, 0) 45%, rgba(20, 25, 0, 0.75) 100%);
  pointer-events: none;
}
.figure-break__overlay {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--space-xl);
  max-width: 780px;
  margin: 0;
  font-family: var(--font-hero);
  font-weight: 700;
  color: var(--white);
  font-size: clamp(1.25rem, 0.9rem + 1.8vw, 1.85rem);
  line-height: 1.15;
  text-shadow: 0 2px 16px rgba(20, 20, 0, 0.5), 0 1px 4px rgba(20, 20, 0, 0.4);
}
.figure-break figcaption {
  padding-top: var(--space-sm);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--moss);
}

@media (max-width: 640px) {
  .figure-break__frame {
    min-height: 45vh; /* 50vh reduced by 10% */
    max-height: 67.5vh; /* 75vh reduced by 10%, still capped so the hero doesn't force excessive scrolling on small screens */
  }
  .figure-break__overlay {
    bottom: var(--space-lg);
  }
}

/* Text + image pairing for the community story. */
.story-split {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-xl);
  align-items: center;
}
.story-split .figure {
  aspect-ratio: 3 / 4;
}

@media (max-width: 760px) {
  .story-split {
    grid-template-columns: 1fr;
  }
}

.figure {
  overflow: hidden;
}
.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* FAQ accordion (about.html#faqs) - native <details>/<summary>, no JS, the
   same disclosure pattern already used for Annie's own Booking Policies
   accordion (client/src/components/detail/PolicySection.jsx) translated to
   this site's plain-CSS conventions instead of Tailwind. Collapsed by
   default (no [open] attribute in the markup) - the browser handles
   expand/collapse and keyboard/screen-reader semantics natively. */
.faq-group {
  margin-top: var(--space-xl);
}
.faq-group:first-of-type {
  margin-top: var(--space-md);
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.faq-item {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--white);
  padding: var(--space-sm) var(--space-md);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: var(--space-xl);
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--moss);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--moss);
}
.faq-item[open] summary::after {
  content: "\2212";
}
.faq-item p {
  margin-top: var(--space-sm);
  margin-bottom: 0;
}