/* The irrigation page (irrigation.html). The top follows the Irrigation page of the old Google Site: a banner photo, then
   "Why irrigation matters" and "The gap" told as statements, each with its pictures beside the facts (the "story" rows),
   then the studies. The studies, reading list and library keep their styles in study-grid.css and site.css. */

.irrigation-page main > section { scroll-margin-top: 16px; }

/* Hero: the canal-at-dawn banner from the old page, with the title over it. */
.ir-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(380px, 44vw, 500px); margin-top: 24px; padding: clamp(22px, 4vw, 44px); border-radius: 16px; overflow: hidden; color: #fff;
  background: linear-gradient(to top, rgba(8,20,26,.86) 0%, rgba(8,20,26,.55) 42%, rgba(8,20,26,.08) 78%), url("irrigation/hero-canal.webp") center 58% / cover no-repeat, #3B4A3F; }
.ir-hero h1 { margin: 0; max-width: 20ch; font: 500 clamp(2.1rem, 4.6vw, 3.4rem)/1.08 var(--head); letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.ir-lead { max-width: 60ch; margin: 16px 0 0; font-size: 1.1rem; line-height: 1.55; color: rgba(255,255,255,.9); }
.ir-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.ir-toc a { padding: 6px 13px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; font-size: .88rem; color: #fff; text-decoration: none; background: rgba(255,255,255,.08); transition: background .15s, border-color .15s; }
.ir-toc a:hover { background: rgba(255,255,255,.2); border-color: #fff; }
.ir-toc a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ir-hero-credit { position: absolute; top: 12px; right: 14px; font-size: .74rem; color: rgba(255,255,255,.78); text-decoration: none; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.ir-hero-credit:hover { color: #fff; text-decoration: underline; }

/* Story: each row is a statement, then its pictures beside the facts. .ir-flip puts the pictures on the right;
   .ir-row-wide gives a wide picture the full width, with the facts under it. */
.ir-why, .ir-gap { margin-top: 56px; }
:is(.ir-why, .ir-gap) > h2 { margin-top: 0; }
.ir-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "say say" "media text"; gap: 18px 40px; align-items: start; margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line); }
:is(.ir-why, .ir-gap) > h2 + .ir-row { margin-top: 18px; padding-top: 0; border-top: 0; }
.ir-flip { grid-template-areas: "say say" "text media"; }
.ir-row-wide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "say" "media" "more"; }
.ir-say { grid-area: say; max-width: 40ch; margin: 0; font: 600 clamp(1.25rem, 2.1vw, 1.55rem)/1.28 var(--head); letter-spacing: -.01em; color: var(--ink); }
.ir-media { grid-area: media; display: block; min-width: 0; margin: 0; }
.ir-text { grid-area: text; min-width: 0; }
.ir-media img, .ir-clip { display: block; width: 100%; height: auto; border-radius: 10px; }
.ir-media figcaption, .ir-cap, .ir-note { display: block; margin-top: 8px; font-size: .84rem; line-height: 1.45; color: var(--ink-2); }
.ir-note { grid-area: more; margin: 0; }
.ir-text h4 { margin: 20px 0 6px; font: 600 1.02rem/1.35 var(--head); color: var(--ink); }
.ir-text h4:first-child { margin-top: 0; }
.ir-text ul { margin: 0; padding-left: 1.15em; }
.ir-text li { margin: 0 0 8px; font-size: .96rem; line-height: 1.55; color: var(--ink); }
.ir-text li::marker { color: var(--r3); }
:is(.ir-why, .ir-gap) .src { font-size: .78rem; white-space: nowrap; color: var(--ink-2); }
:is(.ir-why, .ir-gap) a.src { color: var(--link); }

/* Fresh water: the 100-litre bottles and, under them, the old page's "70%" line, both on a white card
   (the lettering was drawn for a white page), so they read the same in light and dark mode. */
.ir-fresh { padding: clamp(12px, 2.4vw, 26px) clamp(12px, 2.6vw, 30px); border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ir-fresh img { max-height: 340px; object-fit: contain; border-radius: 0; }
.ir-strip { margin: clamp(10px, 1.8vw, 18px) 0 0 !important; }
.ir-strip img { max-height: none; }
/* Doubling food production: the canal across the top, the two smaller pictures under it. */
.ir-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ir-mosaic img { aspect-ratio: 670 / 384; object-fit: cover; }
.ir-mosaic .ir-m-wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
/* The water-stress map links to the interactive map. */
.ir-map { text-decoration: none; }
.ir-map img { border: 1px solid var(--line); transition: box-shadow .15s; }
.ir-map:hover img { box-shadow: 0 10px 26px var(--shadow); }
.ir-map .ir-cap { color: var(--link); }
/* Diagrams and maps drawn on white keep a white card in dark mode. */
.ir-white img { padding: 6px; border: 1px solid var(--line); background: #fff; }
/* Modeling is hard: the two clips side by side. */
.ir-clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ir-clips figure { margin: 0; min-width: 0; }
.ir-clip { aspect-ratio: 1; object-fit: cover; background: #DCE3D5; }
.ir-bridge { max-width: 66ch; margin: 36px 0 0; padding-left: 14px; border-left: 3px solid var(--r3); font-size: 1.02rem; line-height: 1.55; color: var(--ink); }

/* The agent's four steps above the research library. */
.ir-agent { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: none; }
.ir-agent li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 46px; border: 1px solid var(--line); border-radius: 10px; font-size: .84rem; line-height: 1.45; color: var(--ink-2); }
.ir-agent li b { font: 600 .95rem/1.3 var(--head); color: var(--ink); }
.ir-agent-n { position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tag-bg); color: var(--ink); font: 600 .78rem/1 var(--sans); }
.ir-agent li:not(:last-child)::after { content: ""; position: absolute; right: -10px; top: 50%; width: 8px; height: 8px; border-top: 1.5px solid var(--ink-2); border-right: 1.5px solid var(--ink-2); transform: translateY(-50%) rotate(45deg); opacity: .6; }
.ir-agent-link { margin: 10px 0 0; font-size: .86rem; }

@media (max-width: 1000px) {
  .ir-agent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ir-agent li:nth-child(2)::after { display: none; }
}
@media (max-width: 760px) {
  .ir-row, .ir-flip { grid-template-columns: minmax(0, 1fr); grid-template-areas: "say" "media" "text"; gap: 14px; }
  .ir-row-wide { grid-template-areas: "say" "media" "more"; }
  .ir-hero { min-height: 440px; margin-top: 16px; padding: 44px 18px 22px; border-radius: 12px;
    background: linear-gradient(to top, rgba(8,20,26,.9) 0%, rgba(8,20,26,.66) 55%, rgba(8,20,26,.42) 100%), url("irrigation/hero-canal.webp") 30% 58% / cover no-repeat, #3B4A3F; }
  .ir-lead { font-size: 1rem; }
  .ir-why, .ir-gap { margin-top: 56px; }
:is(.ir-why, .ir-gap) > h2 { margin-top: 0; }
  .ir-fresh img { max-height: none; }
}
@media (max-width: 620px) {
  .ir-agent { grid-template-columns: 1fr; }
  .ir-agent li::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ir-toc a, .ir-map img { transition: none; } }