/* EcoPlot: interactive "A fuller picture" tool tiles + "Hands in soil" programs (unit 3).
   Overrides farmer-first.css / landing.css without editing them. */
:root{--lp-green:#173b25;--lp-cream:#f8f8f0;--lp-sage:#6b7d63;--lp-line:#ced7c7;--lp-amber:#ab6a26;--lp-ease:cubic-bezier(.2,.7,.2,1)}

/* ---------- Tool illustrations (shown in plain cards and in tabs) ---------- */
.tool-art{display:block;width:76px;height:76px;margin-bottom:1.2rem}
:is(.tool-art,.tool-tab-icon) .art-bg{fill:#e3e9da}
:is(.tool-art,.tool-tab-icon) .art-fill{fill:var(--lp-green)}
:is(.tool-art,.tool-tab-icon) .art-soft{fill:#5f8a54}
:is(.tool-art,.tool-tab-icon) .art-spark{fill:var(--lp-amber)}
:is(.tool-art,.tool-tab-icon) .art-dot{fill:var(--lp-amber)}
:is(.tool-art,.tool-tab-icon) :is(.art-stroke,.art-line,.art-grid,.art-beam,.art-stroke-box){fill:none;stroke:var(--lp-green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
:is(.tool-art,.tool-tab-icon) .art-line{stroke:#e3e9da;stroke-width:2.5}
:is(.tool-art,.tool-tab-icon) .art-grid{stroke:#9fb193;stroke-width:1.5}
:is(.tool-art,.tool-tab-icon) .art-beam{stroke:var(--lp-amber);stroke-width:1.5;stroke-dasharray:3 4}
:is(.tool-art,.tool-tab-icon) .art-stroke-box{stroke-width:2;fill:#f8f8f0}
:is(.tool-art,.tool-tab-icon) .art-orbit .art-line{stroke:var(--lp-green);stroke-width:2}

.tool-more{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.55rem;font-size:.88rem;line-height:1.55;color:#2e4430}
.tool-more li{position:relative;padding-left:1.3rem}
.tool-more li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;border-radius:50%;background:#5f8a54}

/* Plain cards (no JS) still get a gentle hover */
.tool-grid>article{transition:border-color .25s ease,box-shadow .25s ease}
.tool-grid>article:hover{border-color:#9fb193;box-shadow:0 14px 30px #173b2512}

/* ---------- Tabbed mode (set by land-programs.js) ---------- */
.tool-grid.is-tabbed{grid-template-columns:minmax(250px,.85fr) 2fr;align-items:stretch}
.tool-tabs{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.tool-tab{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:1rem;padding:1.1rem 1.2rem;border:1px solid var(--lp-line);border-radius:16px;background:var(--lp-cream);color:var(--lp-green);flex:1;min-height:44px;position:relative;transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease,translate .25s var(--lp-ease)}
.tool-tab:hover{border-color:#9fb193;box-shadow:0 12px 26px #173b2514;translate:0 -2px}
.tool-tab:focus-visible{outline:3px solid var(--lp-amber);outline-offset:4px;box-shadow:0 0 0 7px #fff8dc}
.tool-tab[aria-selected=true]{background:var(--lp-green);border-color:var(--lp-green);color:var(--lp-cream);box-shadow:0 16px 34px #173b2526}
.tool-tab[aria-selected=true]::after{content:"";position:absolute;right:-.55rem;top:50%;width:1rem;height:1rem;background:var(--lp-green);transform:translateY(-50%) rotate(45deg);border-radius:2px}
.tool-tab-icon{flex:none;width:52px;height:52px;transition:transform .35s var(--lp-ease)}
.tool-tab:hover .tool-tab-icon{transform:rotate(-6deg) scale(1.05)}
.tool-tab[aria-selected=true] .tool-tab-icon .art-bg{fill:#2b5238}
.tool-tab[aria-selected=true] .tool-tab-icon .art-fill{fill:var(--lp-cream)}
.tool-tab[aria-selected=true] .tool-tab-icon .art-soft{fill:#a8c49a}
.tool-tab[aria-selected=true] .tool-tab-icon .art-stroke,.tool-tab[aria-selected=true] .tool-tab-icon .art-stroke-box,.tool-tab[aria-selected=true] .tool-tab-icon .art-orbit .art-line{stroke:var(--lp-cream)}
.tool-tab[aria-selected=true] .tool-tab-icon .art-stroke-box{fill:#2b5238}
.tool-tab[aria-selected=true] .tool-tab-icon .art-line{stroke:#2b5238}
.tool-tab[aria-selected=true] .tool-tab-icon .art-grid{stroke:#6f9461}
.tool-tab-label{display:grid;gap:.3rem;min-width:0}
.tool-tab-index{font-size:.67rem;font-weight:550;letter-spacing:.14em;color:var(--lp-sage)}
.tool-tab[aria-selected=true] .tool-tab-index{color:#c9d8bd}
.tool-tab-title{font-family:Instrument,Georgia,serif;font-size:1.45rem;line-height:1.1}

.tool-grid.is-tabbed>article{grid-column:2;grid-row:1;display:grid;grid-template-columns:1fr minmax(150px,220px);grid-template-areas:"index art" "title art" "body art" "more more" "note note";column-gap:2rem;align-content:start;padding:2.6rem;box-shadow:0 20px 44px #173b2514}
.tool-grid.is-tabbed>article[hidden]{display:grid;visibility:hidden}
.tool-grid.is-tabbed>article.is-active{animation:lp-panel-in .45s var(--lp-ease)}
.tool-grid.is-tabbed>article:hover{border-color:var(--lp-line)}
.tool-grid.is-tabbed>article:focus-visible{outline:3px solid var(--lp-amber);outline-offset:4px}
.tool-grid.is-tabbed .tool-index{grid-area:index}
.tool-grid.is-tabbed h3{grid-area:title;font-size:clamp(2.4rem,3.6vw,3.4rem);line-height:1.05;margin:1rem 0}
.tool-grid.is-tabbed>article>p{grid-area:body;font-size:1rem;max-width:52ch}
.tool-grid.is-tabbed .tool-art{grid-area:art;width:100%;height:auto;max-width:220px;margin:0;align-self:center;justify-self:end}
.tool-grid.is-tabbed .tool-more{grid-area:more;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid #7c8f7840}
.tool-grid.is-tabbed small{grid-area:note}
.tool-grid.is-tabbed .is-active .art-orbit{animation:lp-orbit 6s ease-in-out infinite}
.tool-grid.is-tabbed .is-active .art-spark{transform-box:fill-box;transform-origin:center;animation:lp-spark 2.6s ease-in-out infinite}
.tool-grid.is-tabbed .is-active .art-dot{animation:lp-dot 3s ease-in-out infinite}
.tool-grid.is-tabbed .is-active .art-dot:nth-of-type(2){animation-delay:.6s}
.tool-grid.is-tabbed .is-active .art-dot:nth-of-type(3){animation-delay:1.2s}

@keyframes lp-panel-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes lp-orbit{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
@keyframes lp-spark{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.18) rotate(20deg)}}
@keyframes lp-dot{0%,100%{opacity:1}50%{opacity:.35}}

@media(max-width:1000px){
  .tool-grid.is-tabbed>article{grid-template-columns:1fr 130px;padding:2rem}
  .tool-grid.is-tabbed .tool-more{grid-template-columns:1fr}
}
@media(max-width:800px){
  .tool-grid.is-tabbed{grid-template-columns:1fr;gap:1rem}
  .tool-tabs{flex-direction:row;gap:.5rem}
  .tool-tab{flex:1 1 0;flex-direction:column;align-items:flex-start;gap:.55rem;padding:.8rem .75rem;border-radius:14px}
  .tool-tab[aria-selected=true]::after{right:auto;top:auto;left:50%;bottom:-.5rem;transform:translateX(-50%) rotate(45deg)}
  .tool-tab-icon{width:38px;height:38px}
  .tool-tab-index{font-size:.56rem;letter-spacing:.1em}
  .tool-tab-title{font-size:1.02rem}
  .tool-grid.is-tabbed>article{grid-column:1;grid-row:2;grid-template-columns:1fr 84px;grid-template-areas:"index art" "title title" "body body" "more more" "note note";padding:1.5rem}
  .tool-grid.is-tabbed .tool-art{max-width:84px;align-self:start}
  .tool-grid.is-tabbed h3{font-size:2.3rem}
}
@media(max-width:420px){
  .tool-tab-index{display:none}
  .tool-tab{padding:.75rem .6rem}
}

/* ---------- Programs: photo ---------- */
.community-photo{overflow:hidden;border-radius:.7rem;isolation:isolate;align-self:start}
@media(min-width:801px){.community-photo{height:min(680px,82vh)}.community-photo img{height:100%;max-height:none}}
@media(min-width:1101px){.community-photo{position:sticky;top:6rem}}
.community-photo img{display:block;width:100%;transition:transform 1.1s var(--lp-ease)}
.community-photo:hover img,.community-photo:focus-within img{transform:scale(1.045)}
.community-photo figcaption{transition:padding .45s var(--lp-ease),background .45s ease}
.photo-note{display:block;font-family:Instrument,Georgia,serif;font-size:1.35rem;line-height:1.25;color:#fbfbef;max-width:30ch;overflow:hidden;max-height:0;opacity:0;margin:0;transition:max-height .5s var(--lp-ease),opacity .4s ease,margin .5s var(--lp-ease)}
.community-photo:hover .photo-note,.community-photo:focus-within .photo-note{max-height:6em;opacity:1;margin:.45rem 0 .6rem}
.community-photo:hover figcaption,.community-photo:focus-within figcaption{padding-top:5rem;background:linear-gradient(transparent,#0c201cf2 55%)}
@media(hover:none){.photo-note{max-height:none;opacity:1;margin:.3rem 0 .45rem;font-size:1rem}.community-photo figcaption{padding-top:4rem;background:linear-gradient(transparent,#0c201cf2 50%)}}

/* ---------- Programs: cards ---------- */
.programs .program-card{position:relative;transition:opacity .7s ease,transform .7s var(--lp-ease),translate .35s var(--lp-ease),box-shadow .35s ease,border-color .35s ease}
.programs .program-card:hover,.programs .program-card:has(:focus-visible){translate:0 -5px;box-shadow:0 24px 44px #173b2522;border-color:#9fb193}
.programs .program-card>a{margin-top:1.3rem;padding:.8rem 1.1rem;border:1px solid currentColor;border-radius:999px;justify-content:space-between;gap:1rem;transition:background-color .25s ease,color .25s ease}
.programs .program-card>a span{transition:transform .25s var(--lp-ease)}
.programs .program-card>a:hover span,.programs .program-card>a:focus-visible span{transform:translate(3px,-3px)}
.programs .youth-card>a{background:var(--lp-cream);color:var(--lp-green);border-color:var(--lp-cream)}
.programs .youth-card>a:hover{background:#e3ecd8}
.programs .garden-card>a{background:var(--lp-green);color:var(--lp-cream);border-color:var(--lp-green)}
.programs .garden-card>a:hover{background:#245236}

.program-toggle{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;margin-top:1.3rem;padding:.6rem 0;border-top:1px solid #7c8f7840;font-size:.8rem;font-weight:550;letter-spacing:.04em}
.program-toggle:focus-visible{outline:3px solid var(--lp-amber);outline-offset:4px;border-radius:4px}
.program-toggle:hover{text-decoration:underline;text-underline-offset:3px}
.program-toggle-mark{position:relative;width:1.6rem;height:1.6rem;border:1px solid currentColor;border-radius:50%;flex:none}
.program-toggle-mark::before,.program-toggle-mark::after{content:"";position:absolute;left:50%;top:50%;width:.6rem;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .3s var(--lp-ease)}
.program-toggle-mark::after{transform:translate(-50%,-50%) rotate(90deg)}
.program-toggle[aria-expanded=true] .program-toggle-mark::after{transform:translate(-50%,-50%) rotate(0)}
.program-more{font-size:.86rem;line-height:1.65}
.program-more>p{margin-top:.9rem;font-weight:550}
.is-collapsible .program-more>p:first-child{display:none}
.program-more ul{margin:.5rem 0 0;padding:0;list-style:none;display:grid;gap:.4rem}
.program-more li{position:relative;padding-left:1.2rem}
.program-more li::before{content:"";position:absolute;left:0;top:.6em;width:.45rem;height:.45rem;border-radius:50%;background:currentColor;opacity:.6}
.is-collapsible .program-more:not([hidden]){animation:lp-panel-in .4s var(--lp-ease)}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .tool-tab,.tool-tab-icon,.community-photo img,.community-photo figcaption,.photo-note,.programs .program-card,.programs .program-card>a span,.program-toggle-mark::before,.program-toggle-mark::after{transition:none!important}
  .tool-tab:hover,.programs .program-card:hover,.programs .program-card:has(:focus-visible){translate:none}
  .tool-tab:hover .tool-tab-icon,.community-photo:hover img,.community-photo:focus-within img,.programs .program-card>a:hover span{transform:none}
  .tool-grid.is-tabbed>article.is-active,.tool-grid.is-tabbed .is-active .art-orbit,.tool-grid.is-tabbed .is-active .art-spark,.tool-grid.is-tabbed .is-active .art-dot,.is-collapsible .program-more:not([hidden]){animation:none!important}
}
html[data-motion=reduce] :is(.tool-tab,.tool-tab-icon,.community-photo img,.community-photo figcaption,.photo-note,.programs .program-card,.programs .program-card>a span){transition:none!important}
html[data-motion=reduce] :is(.tool-tab:hover,.programs .program-card:hover,.programs .program-card:has(:focus-visible)){translate:none}
html[data-motion=reduce] :is(.tool-tab:hover .tool-tab-icon,.community-photo:hover img,.community-photo:focus-within img,.programs .program-card>a:hover span){transform:none}
html[data-motion=reduce] :is(.tool-grid.is-tabbed>article.is-active,.tool-grid.is-tabbed .is-active .art-orbit,.tool-grid.is-tabbed .is-active .art-spark,.tool-grid.is-tabbed .is-active .art-dot,.is-collapsible .program-more:not([hidden])){animation:none!important}