/* Impact page + story page */
.impact-urgent { background: linear-gradient(180deg, #fff, var(--acqua-50)); padding-top: 20px; }
.impact-urgent .container { display: flex; gap: 20px; align-items: center; }
.impact-urgent .pic { flex: 1 0 0; height: 684px; display: flex; align-items: flex-end; justify-content: center; }
.impact-urgent .pic img { max-height: 100%; width: auto; }
.impact-urgent .content { flex: 1 0 0; }
.impact-urgent .content p { margin-bottom: 10px; }
.impact-urgent .content .actions { margin-top: 26px; }

.impact-stats { position: relative; background-size: cover; background-position: center; color: var(--white); padding: var(--sec-l); box-shadow: inset 6px 12px 6px rgba(0,0,0,.5); }
.impact-stats .container { max-width: 1280px; padding: 20px 0; }
.impact-stats h2 { color: var(--white); }
.impact-stats .section-title p { font-size: var(--t-lg); margin-bottom: 10px; }
.impact-stats .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 64px; border-top: 1px solid var(--white); margin: 40px 0 0; text-align: center; }
.impact-stats .stats > div { padding-top: 40px; }
.impact-stats dt { font-family: var(--font-head); font-weight: 700; font-size: var(--h1); line-height: 1.2; }
.impact-stats dd { margin: 8px 0 0; font-size: var(--t-md); font-weight: 700; text-transform: uppercase; }
.impact-stats dd.medium { font-weight: 500; }

.impact-wrap .container.second { margin-top: 64px; }
.impact-wrap .container.second .text { text-align: left; }

/* stories */
.stories { background: var(--white); padding: var(--pad) 0; }
.stories > .container { max-width: 1366px; display: flex; flex-direction: column; gap: 40px; }
.story-search { background: var(--acqua-50); border-radius: var(--radius-m); padding: 20px; display: flex; justify-content: center; }
.search-box { display: flex; align-items: center; gap: 8px; width: 560px; max-width: 100%; padding: 16px 12px; border: 1px solid var(--acqua-600); border-radius: var(--radius-s); background: rgba(255,255,255,.6); box-shadow: inset 0 4px 4px rgba(0,0,0,.15); }
.search-box input { flex: 1 0 0; min-width: 0; border: none; background: none; font: 16px/1.5 var(--font-body); color: var(--body); outline: none; }
.search-box input::placeholder { color: var(--acqua-500); }
.search-box button { background: none; border: none; padding: 0; cursor: pointer; display: flex; }
.featured-story { border-top: 1px solid #84efff; border-bottom: 1px solid #84efff; padding: 40px 0; display: flex; align-items: stretch; }
.featured-story .text { flex: 1 0 0; display: flex; align-items: center; padding: var(--pad) var(--pad) var(--pad) 0; }
.featured-story .text > div { max-width: 560px; }
.featured-story .text h2 { margin-bottom: 24px; }
.featured-story .text .summary, .featured-story .text p { font-size: 18px; margin-bottom: 24px; }
.featured-story .text .summary p:last-child { margin-bottom: 0; }
.featured-story .pic { flex: 1 0 0; min-height: 720px; position: relative; }
.featured-story .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.featured-story .pic::after { content: ""; position: absolute; inset: 0; box-shadow: inset 10px 6px 10px rgba(0,0,0,.25); }
.story-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 10px; }
.story-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--heading); }
.story-card .img { aspect-ratio: 302 / 300; box-shadow: var(--shadow-card); overflow: hidden; background: #ddd; }
.story-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.story-card:hover .img img { transform: scale(1.04); }
.story-card p { margin: 0; font-weight: 700; font-size: 18px; text-align: center; }
.story-card[hidden] { display: none; }
.story-grid .no-results { grid-column: 1 / -1; text-align: center; font-size: var(--t-md); }
.pagination { border-top: 1px solid #84efff; padding: 20px 0; display: flex; justify-content: center; align-items: center; gap: 20px; }
.pagination[hidden] { display: none; }
.pagination .pages { display: flex; gap: 20px; }
.pagination .pg { min-width: 40px; padding: 6px 12px; border-radius: var(--radius-s); border: 1px solid var(--acqua-100); background: linear-gradient(180deg, #fff, var(--acqua-50)); color: var(--acqua-500); font: 400 18px/1.5 var(--font-body); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pagination .pg.current { border-color: transparent; background: none; color: var(--acqua-600); font-weight: 700; font-size: 20px; }
.pagination .pg.prev, .pagination .pg.next { border-color: transparent; background: none; }
.pagination .pg[disabled] { opacity: .35; cursor: default; }

/* story page */
.story-page { border-top: 1px solid var(--acqua-100); padding: var(--pad) 0; }
.story-page > .container { display: flex; align-items: flex-start; }
.story-main { flex: 1 0 0; min-width: 0; padding-right: var(--sec-s); }
.story-main .story-img { margin-bottom: 32px; }
.story-main .story-img img { width: 100%; height: auto; }
.story-main h1 { font-size: var(--h2); margin-bottom: 24px; }
.story-main .byline { font-size: 14px; font-weight: 700; margin-bottom: 24px; }
.story-main p { margin-bottom: 24px; }
/* the body is editor html from the story in MQ */
.story-body { font-size: var(--t-md); }
.story-body img { margin: 0 auto 24px; border-radius: var(--radius-s); }
.story-body h2, .story-body h3, .story-body h4 { margin-top: 32px; }
.story-body a { text-decoration: underline; text-underline-position: from-font; }
.story-body .pull-quote { margin: 32px 0; padding: 0 0 0 24px; border-left: 4px solid var(--acqua-300); }
.story-body .pull-quote p { font-size: var(--h5); font-style: italic; color: var(--acqua-700); margin-bottom: 8px; }
.story-body .pull-quote footer { font-size: 16px; font-weight: 600; color: var(--heading); }
.story-main .back { border-top: 1px solid #84efff; padding: 20px 0; display: flex; justify-content: center; margin-top: 8px; }
.story-side { width: 360px; flex-shrink: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 32px; }
.story-side .story-search { background: none; padding: 0; }
.story-side .search-box { width: 100%; }
.story-side h3 { margin: 0; padding-bottom: 15px; border-bottom: 1px solid #84efff; }
.story-side .categories { margin: 0; padding-left: 30px; font-size: var(--t-lg); color: var(--heading); }
.story-side .categories a { color: var(--heading); text-decoration: none; }
.story-side .categories a:hover { text-decoration: underline; }
.story-side .latest { display: flex; flex-direction: column; gap: 24px; }
.story-side .latest .story-card p { text-align: left; }
.story-side .latest .story-card .img { aspect-ratio: 340 / 300; }

@media (max-width: 991px) {
    .impact-urgent .container { flex-direction: column; }
    .impact-urgent .pic { height: auto; width: 100%; }
    .impact-urgent .pic img { max-height: 550px; }
    .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .featured-story { flex-direction: column-reverse; }
    /* stacked columns: "flex: 1 0 0" would leave the picture zero pixels tall and the photo would vanish */
    .featured-story .pic { flex: none; width: 100%; min-height: 0; aspect-ratio: 4 / 3; }
    .featured-story .text { padding: 32px 0 0; }
    .story-page > .container { flex-direction: column; gap: 48px; }
    .story-main { padding-right: 0; }
    .story-side { width: 100%; padding-left: 0; }
}
@media (max-width: 768px) {
    .impact-urgent { padding-top: 0; }
    .impact-urgent .container { gap: 24px; }
    .impact-urgent .content { padding-bottom: 24px; }
    .impact-stats { padding: var(--sec-m) var(--pad); }
    .impact-stats .stats { grid-template-columns: 1fr; gap: 24px; }
    .impact-stats .stats > div { padding-top: 24px; }
    .impact-stats dt { font-size: 48px; }
    .stories { padding: var(--sec-s) 0; }
    .stories > .container { gap: 24px; }
    .story-grid { grid-template-columns: 1fr; gap: 32px; }
    .story-card .img { aspect-ratio: 1 / 1; }
    .featured-story { padding: 24px 0; }
    .story-main .story-img { margin: 0 -20px 24px; }
    .story-main h1 { font-size: var(--h2); }
}