/* Stories of Change - landing + story page styles.
   Palette follows style-2026.css: #2c442c dark, #5e8947 primary green, #8dc63f accent.
   #588143 = #5e8947 darkened 6% so white body text clears WCAG AA (4.53:1).
   #e3ecdc is the mockup's pale sage for the advice band (no site equivalent). */
/* min-height + cover keeps the baked-in, centred banner title legible on phones (crops the sky/fields at the sides only). */
.soc-banner img { width: 100%; height: auto; min-height: 9rem; object-fit: cover; display: block; }
.soc-landing { background: #2c442c; color: #fff; padding: 3rem 0 1rem; }
.soc-intro { max-width: 42rem; margin: 0 auto; font-size: 1.1rem; } /* ~75 characters per line */
.soc-landing ::selection, .soc-facts ::selection, .soc-summary ::selection, .soc-acg ::selection, .soc-more ::selection, .soc-advice ::selection { background: #8dc63f; color: #2c442c; }
.soc-grid-heading { color: #a7cc87; text-align: center; font-weight: 700; font-size: clamp(2rem, 1.5rem + 2vw, 2.5rem); margin: clamp(2.5rem, 6vw, 4rem) 0 2.5rem; }
.soc-card { display: flex; flex-direction: column; width: 100%; max-width: 340px; margin: 0 auto; text-align: center; } /* wide enough that the tile's baked-in caption stays readable */
.soc-card__img, .soc-card__placeholder { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; display: block; } /* tiles are 1000×625 */
.soc-card__placeholder { background: #4c5e2a; }
.soc-card__media { display: block; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); } /* faint edge: the tile's dark top band otherwise blends into the page */
.soc-card__media .soc-card__img { transition: transform .3s ease; }
.soc-card__media:hover .soc-card__img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .soc-card__media .soc-card__img { transition: none; } }
.soc-card__title { color: #fff; font-weight: 700; font-size: 1.25rem; line-height: 1.3; margin: 1rem 0 1.25rem; text-wrap: balance; }
.soc-card__link, .soc-card__link:visited { margin: auto auto 0; padding: .5rem 2rem; border: 2px solid #fff; border-radius: 50px; color: #fff; text-transform: uppercase; font-weight: 700; text-decoration: none; }
.soc-card__link:hover, .soc-card__link:focus-visible { background: #8dc63f; border-color: #8dc63f; color: #2c442c; text-decoration: none; }
.soc-card__link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Story page (white surfaces per mockup; some map assets have an opaque white ground) */
.soc-facts, .soc-acg, .soc-more { background: #fff; }
.soc-facts { padding: 3rem 0; }
.soc-facts__map { width: 100%; height: auto; display: block; }
@media (max-width: 767.98px) { .soc-facts__map { max-width: 20rem; margin: 0 auto; } }
.soc-facts__title { color: #2c442c; font-weight: 700; font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem); margin-bottom: .25rem; text-wrap: balance; }
.soc-facts__tagline { color: #5e8947; font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem); font-weight: 700; line-height: 1.25; margin-bottom: 1.25rem; text-wrap: balance; }
.soc-summary h2, .soc-more > .container > h2, .soc-advice h2 { font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2rem); text-wrap: balance; }
.soc-fact { margin-bottom: 1rem; }
.soc-summary { background: #588143; color: #fff; padding: 3rem 0; }
.soc-summary h2 { color: #fff; font-weight: 700; margin-bottom: 1rem; }
.soc-summary__tile { width: 100%; height: auto; border-radius: 16px; display: block; }
.soc-acg { padding: 3rem 0 1rem; }
.soc-acg__card { width: 100%; border: 1px solid #8dc63f; border-radius: 12px; padding: 1.5rem; background: #fff; }
.soc-acg__card h2 { color: #2c442c; font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.soc-acg__card ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.soc-acg__card > :last-child { margin-bottom: 0; }
.soc-more { padding: 2rem 0 3rem; }
.soc-more > .container > h2 { color: #2c442c; font-weight: 700; margin-bottom: 1rem; }
.soc-acc { padding-top: 2rem; } /* more space above each question than below it */
.soc-acc:first-of-type { padding-top: 0; }
.soc-acc summary { color: #5e8947; font-size: 1.25rem; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid #5e8947; }
.soc-acc summary::-webkit-details-marker { display: none; }
.soc-acc summary:focus-visible { outline: 2px solid #5e8947; outline-offset: 4px; }
.soc-acc summary::after { content: ""; flex: none; width: .6rem; height: .6rem; border-right: 2px solid #5e8947; border-bottom: 2px solid #5e8947; transform: rotate(45deg); transition: transform .2s; margin-right: .5rem; }
.soc-acc[open] summary::after { transform: rotate(-135deg); }
.soc-acc__body { padding-top: 1rem; }
.soc-acc__body > :last-child { margin-bottom: 0; }
/* Full-width rules/gallery, but running text capped at a readable measure (~75 characters). */
.soc-acc__body > *, .soc-advice .container > :not(h2):not(.soc-gallery) { max-width: 42rem; }
.soc-advice { background: #e3ecdc; padding: 3rem 0; }
.soc-advice h2 { color: #2c442c; font-weight: 700; margin-bottom: 1rem; }
.soc-gallery { display: flex; gap: 1.5rem; align-items: flex-start; margin-top: 2rem; }
.soc-gallery__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.soc-gallery__item { display: block; border-radius: 8px; overflow: hidden; cursor: zoom-in; }
.soc-gallery__item:focus-visible { outline: 3px solid #5e8947; outline-offset: 3px; }
.soc-gallery img { display: block; width: 100%; height: auto; transition: transform .3s ease; }
.soc-gallery__item:hover img { transform: scale(1.03); }
/* Phones: 2-column masonry. The 3 server-built columns dissolve and the photos reflow into CSS columns. */
@media (max-width: 575.98px) {
	.soc-gallery { display: block; columns: 2; column-gap: .75rem; }
	.soc-gallery__col { display: contents; }
	.soc-gallery__item { break-inside: avoid; margin-bottom: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .soc-gallery img { transition: none; } }
@media (prefers-reduced-motion: reduce) { .soc-acc summary::after { transition: none; } }