/* widgets/graes-blokke/graes-blokke.css
   Græs-blokke — indholdsbokse inde i fire håndtegnede organiske figurer.
   Kun var(--token); BEM med -graesmarken-suffix; 0 !important.
   Figur-SVG'ernes farver styres her via gb-*-klasser (hex i filerne er kun
   no-CSS-fallback, CTA-knapformernes mønster). Byggeplan: docs/to-do.md §7. */

/* ---- Intro ---- */
.graes-blokke-graesmarken__intro {
  max-width: var(--measure);
  margin-bottom: var(--space-xl);
}
.graes-blokke-graesmarken__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--color-heading);
  text-wrap: balance;
  margin: var(--space-sm) 0 0 0;
}
.graes-blokke-graesmarken__title em {
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--color-green-700);
}

/* ---- Grid: 1 rolig kolonne på mobil; 2 forskudte kolonner fra 768px ----
   Forskydningen er ren layout (statisk transform, ingen animation), så
   DOM-/læseorden er uberørt. Griddet kompenserer med padding-bottom, så de
   nedforskudte figurer ikke rager ud af sektionen. */
.graes-blokke-graesmarken__grid {
  --gb-stagger: var(--space-2xl);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  justify-items: center;
}
.graes-blokke-graesmarken__item {
  width: 100%;
  display: flex;
  justify-content: center;
}
@media (min-width: 768px) {
  .graes-blokke-graesmarken__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl) var(--space-md);
    align-items: start;
    padding-bottom: var(--gb-stagger);
  }
  .graes-blokke-graesmarken__item:nth-child(even) {
    transform: translateY(var(--gb-stagger));
  }
}

/* ---- Figuren: vokser i tre trin (S/M/L) efter tekstmængden ----
   Bredden sætter højden (SVG'ens aspekt 220/240 bevares — stråene deformeres
   ikke). max-width: none værner mod base-resettens img/svg-regel
   (elementor-overrides.md — fælden der ramte CTA i v1.0.15). */
.graes-blokke-graesmarken__figur {
  position: relative;
  width: min(100%, var(--gb-w, 21rem));
}
.graes-blokke-graesmarken__item--s .graes-blokke-graesmarken__figur { --gb-w: 17rem; }
.graes-blokke-graesmarken__item--m .graes-blokke-graesmarken__figur { --gb-w: 21rem; }
.graes-blokke-graesmarken__item--l .graes-blokke-graesmarken__figur { --gb-w: 25rem; }

.graes-blokke-graesmarken__svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  pointer-events: none;
}

/* ---- Figur-farver via tokens (grøn-trappen; hex i SVG = fallback) ---- */
.graes-blokke-graesmarken .gb-dark  { stroke: var(--color-green-900); }
.graes-blokke-graesmarken .gb-mid   { stroke: var(--color-green-700); }
.graes-blokke-graesmarken .gb-light { stroke: var(--color-green-300); }
.graes-blokke-graesmarken .gb-flade { fill: var(--color-green-700); }

/* ---- Indholdet: ligger i blob'ens sikre zone (procent-insets pr. figur,
   kalibreret efter hver blobs geometri i viewBox 220×240) ---- */
.graes-blokke-graesmarken__content {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xs);
  text-align: center;
}
.graes-blokke-graesmarken__item--tuen    .graes-blokke-graesmarken__content { inset: 28% 24% 13% 24%; }
.graes-blokke-graesmarken__item--stenen  .graes-blokke-graesmarken__content { inset: 27% 18% 14% 20%; }
.graes-blokke-graesmarken__item--boelgen .graes-blokke-graesmarken__content { inset: 38% 15% 14% 15%; }
.graes-blokke-graesmarken__item--bakken  .graes-blokke-graesmarken__content { inset: 33% 17% 14% 17%; }

/* ---- Tekst: paper på green-700-blob (= feature-citatets kombination);
   brødtekst dæmpet via opacity (design-stil §3.1) ---- */
.graes-blokke-graesmarken__bloktitel {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-text-inverse);
  text-wrap: balance;
  margin: 0;
}
.graes-blokke-graesmarken__tekst {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-inverse);
  opacity: 0.85;
  margin: 0;
}
.graes-blokke-graesmarken__tekst em {
  font-family: var(--font-heading);
  font-style: italic;
}