/*
 * Garden: cut-out illustrations from the hero film, placed along the page (see home-garden.js).
 * All of it is decoration: it sits in its own bands or in the corners of a dark section, so it never
 * covers text, and it ignores the pointer.
 */

/* A band between two sections. It sits above the section after it so a plant can stand on its top edge. */
.garden-break{position:relative;z-index:1;pointer-events:none;overflow-x:clip}
.garden-break img,.garden-corner img{display:block;max-width:none;height:auto;user-select:none;-webkit-user-drag:none}

/* A plant stands on the top edge of the section that follows its band. The page frame (.rz) leaves a 10px gap
   between its children, so the band is pulled down over that gap and the plant's foot meets the section. */
.garden-break-plant{--plant-w:clamp(240px,32vw,470px);--rise:.56;height:calc(var(--plant-w) * var(--rise));margin-bottom:-10px}
.garden-spot{position:absolute;bottom:-8px;width:var(--plant-w)}
.garden-spot img{width:100%}
.garden-spot-bonsai{right:clamp(4%,10vw,15%)}

/* The reader sits under the FAQ intro. The text column stretches to the height of the question list and the
   figure takes the bottom of it, so its moss lines up with the last question. The 6px is the transparent
   margin around the cut-out. */
.split-faq>.txt{align-self:stretch}
.garden-figure{margin-top:auto;margin-bottom:-6px;width:min(100%,460px);pointer-events:none}
.garden-figure img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}

/* Corners of the dark sections: a fern in the automatic-status section, and a lily pad cluster and a fern in the closing one, like the corners of the hero. */
.garden-corner{position:absolute;z-index:0;pointer-events:none}
.garden-corner-lily{left:clamp(-24px,-1vw,0px);bottom:clamp(0px,1vw,14px);width:clamp(150px,22vw,330px)}
/* Pushed past the right edge: the section clips it, and the script slides it in from that side. */
.garden-corner-fern{right:clamp(-80px,-5vw,-28px);bottom:-8%;width:clamp(180px,29vw,430px);transform:scaleX(-1)}
/* Pushed past the left edge: the section clips it, and the script slides it in from that side. */
/* Sized to fit under the "Kobles til systemene" heading, which stands in the same column. */
.garden-corner-smart{left:clamp(-60px,-3vw,-20px);bottom:-14px;width:clamp(170px,18vw,240px)}
.garden-corner img{width:100%}

@media (max-width:720px){
  .garden-figure{width:min(100%,340px);margin-top:6px}
  .garden-break-plant{--plant-w:clamp(190px,56vw,260px)}
  .garden-corner-lily{width:132px;bottom:0}
  .garden-corner-fern{width:164px;right:-34px;bottom:-14px}
  .garden-corner-smart{width:150px;left:-30px;bottom:-12px}
  /* Room for the corner illustrations under the content. */
  .cta>.wrap{padding-bottom:clamp(120px,32vw,150px)}
  #smart>.wrap{padding-bottom:clamp(130px,36vw,160px)}
}