/* ==========================================================================
   product-agriculture.html only.

   Everything here is scoped to this page's own classes, or overrides a rule
   site.css sets for a block that exists on no other page (.solgrid). Loaded
   after site.css, services.css, proof.css, explore.css and farm-live.css, and
   before assets/farm-pulse.css has anything to say, because the component is
   scoped to its own id.
   ========================================================================== */

/* ---------------------------- the two scroll films ----------------------------
   The stages inherit --travel:320svh. With six and five captions that is about
   half a screen of scroll each, which reads as rushed: a caption arrives and is
   gone before it has been read. A screen each is the pace they were drawn for.
   Classes rather than inline styles, so the 820px rule below can still take the
   pace down for a phone, where the same travel is a very long thumb. */
.svstage.film6{--travel:540svh}
.svstage.film5{--travel:450svh}
@media (max-width:820px){
  .svstage.film6{--travel:420svh}
  .svstage.film5{--travel:350svh}
}

/* ---------------------------- after the map film ----------------------------
   The film wipes to the page's cream and then releases its sticky stage over one
   more screen of scroll. It used to hand over to the hero, which filled that
   screen immediately; with the hero above it, whatever follows has to arrive
   promptly or the reader gets a blank screen and a half. The Explore strip moved
   up beside the hero, and the section that now follows the film loses most of its
   top padding so its heading rises into view as the wipe finishes.

   That alone still left one blank screen, because the film's stage is sticky and
   100svh tall: once the wipe is done it is released and scrolls away over exactly
   its own height, showing nothing. The page's own ground is what the wipe fades
   to, so the next section is pulled up by exactly that release and the join is
   invisible.

   The film has to stay on top while it is still playing, or the cards cover its
   closing shot, and it has to go behind once it is done or it covers the section
   pulled up under it. Leaving that to the default does not work either way: the
   entrances give the next section transformed children, which paint in the
   positioned layer in DOM order and so over the earlier stage. assets/agri.js
   marks the film once its release has begun, and the two swap over. */
#proof{z-index:1}
#proof[data-past]{z-index:0}
#proof + .sec{
  padding-top:clamp(26px,3.4vh,48px);
  margin-top:-100svh;position:relative;z-index:0;
  /* An anchor to this section (#systems: the Explore strip's "Applications", the
     product pages' "See every system") has to land past the hand-over, which agri.js
     judges with an 80px lead. The site's offset (nav + 24px = 108px) stopped 28px
     short, so the film's closing frame stayed over the cards until the first scroll.
     72px is past the hand-over and still clears the 84px bar. */
  scroll-margin-top:72px}
#proof[data-past] + .sec{z-index:1}
/* without JS the stage is not sticky and there is nothing to pull up */
html:not(.js) #proof + .sec{margin-top:0;scroll-margin-top:calc(var(--nav-h) + 24px)}
@media (prefers-reduced-motion:reduce){#proof + .sec{margin-top:0;scroll-margin-top:calc(var(--nav-h) + 24px)}}

/* ------------------------------ the seven cards ------------------------------
   site.css lays these out three across. There are seven, so the seventh sat on
   a row of its own with two empty columns beside it. It takes the whole last
   row instead, as a wide card with its picture beside its words. */
.solgrid>.solcard:last-child{
  grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  align-items:stretch}
.solgrid>.solcard:last-child .solart{aspect-ratio:auto;height:100%;min-height:220px}
.solgrid>.solcard:last-child .soltx{justify-content:center;padding:clamp(22px,2.6vw,38px)}
.solgrid>.solcard:last-child .soltx h3{font-size:clamp(1.3rem,2vw,1.75rem)}
.solgrid>.solcard:last-child .soltx p{margin-top:10px;font-size:1rem;max-width:44ch}
.solgrid>.solcard:last-child .sollearn{margin-top:20px;padding-top:0}
@media (max-width:920px){
  /* two columns up here, so an odd last card still spans the row */
  .solgrid>.solcard:last-child{grid-template-columns:minmax(0,.46fr) minmax(0,.54fr)}
}
@media (max-width:560px){
  .solgrid>.solcard:last-child{grid-template-columns:1fr}
  .solgrid>.solcard:last-child .solart{aspect-ratio:16/10;min-height:0}
}

/* ------------------------------ lightning protection ------------------------------
   A dark band between two light sections: the figure the page already states,
   the three things that are installed, and what that buys. */
.lp{background:var(--gr-0,#12160F);color:var(--bone,#F5EFE5);position:relative;overflow:hidden}
.lp::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(56% 42% at 84% 6%,rgba(224,86,22,.14),transparent 70%),
    radial-gradient(48% 40% at 6% 96%,rgba(134,179,154,.12),transparent 70%)}
.lp>.wrap{position:relative;z-index:1}
.lp .kicker{color:var(--sage,#9DB08C)}
.lp .h2{color:var(--bone,#F5EFE5)}

.lp-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(24px,4vw,64px);align-items:end}
/* the strike figure, set as a number rather than buried in the sentence */
.lp-fig{justify-self:end;text-align:right}
.lp-n{font-family:var(--display);font-weight:300;line-height:.9;letter-spacing:-.03em;
  font-size:clamp(4rem,9vw,7.5rem);color:var(--bone,#F5EFE5)}
.lp-n i{font-style:normal;font-size:.44em;color:var(--accent,#E05616);margin-left:.06em;
  vertical-align:.34em}
/* the label reads on two lines beside the figure, not four: 22ch of tracked mono
   was 139px wide, which broke "strikes per square kilometre, every year" apart */
.lp-l{margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage,#9DB08C);line-height:1.8;max-width:34ch;
  margin-left:auto}
.lp-lede{margin:clamp(22px,3vh,32px) 0 0;max-width:62ch;font-size:clamp(1rem,1.3vw,1.12rem);
  line-height:1.75;color:rgba(245,239,229,.78)}

.lp-grid{list-style:none;margin:clamp(34px,4.6vh,56px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.lp-grid li{
  background:rgba(245,239,229,.045);border:1px solid rgba(245,239,229,.14);
  border-radius:20px;padding:clamp(22px,2.4vw,30px);
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease)}
.lp-grid li:hover{border-color:rgba(157,176,140,.5);background:rgba(245,239,229,.07);
  transform:translateY(-3px)}
.lp-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:rgba(224,86,22,.16);color:var(--accent-hover,#F0752E)}
.lp-ic svg{width:24px;height:24px}
.lp-grid h3{margin:18px 0 8px;font-family:var(--display);font-weight:400;
  font-size:clamp(1.12rem,1.6vw,1.34rem);line-height:1.2;color:var(--bone,#F5EFE5)}
.lp-grid p{margin:0;font-size:.97rem;line-height:1.65;color:rgba(245,239,229,.72)}

.lp-end{display:grid;gap:6px;margin:clamp(26px,3.4vh,40px) 0 0;
  padding-left:clamp(18px,2vw,24px);border-left:2px solid var(--accent,#E05616)}
.lp-end b{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:400;color:var(--sage,#9DB08C)}
.lp-end span{font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.7;color:rgba(245,239,229,.86);
  max-width:64ch}

@media (max-width:980px){
  .lp-head{grid-template-columns:1fr;align-items:start}
  .lp-fig{justify-self:start;text-align:left}
  .lp-l{margin-left:0}
}
@media (max-width:860px){.lp-grid{grid-template-columns:1fr}}

/* ------------------------------ the Telegram note ------------------------------
   Sits directly under the component, in the page's own words, and carries the
   one thing the component itself does not say in a sentence. */
.fpnote{background:#f5f2e9;padding:0 max(24px,calc((100% - 1240px)/2)) 74px}
.fpnote p{margin:0;max-width:78ch;font-size:.9rem;line-height:1.65;color:#65746a}
@media (max-width:900px){.fpnote{padding:0 24px 52px}}
@media (max-width:680px){.fpnote{padding:0 18px 42px}}

@media print{
  .lp{background:#fff!important;color:#111!important}
  .lp::before{display:none}
  .lp .h2,.lp-n,.lp-grid h3,.lp-end span{color:#111!important}
  .lp .kicker,.lp-l,.lp-end b{color:#2D6E57!important}
  .lp-lede,.lp-grid p{color:#222!important}
  .lp-grid{grid-template-columns:1fr 1fr}
  .lp-grid li{border-color:#ccc!important;background:none!important;break-inside:avoid}
  .lp-ic{background:none!important;color:#2D6E57!important}
  .fpnote{padding:0 0 6mm!important;background:#fff!important}
}