/* ==========================================================================
   "Hør det fra vores kunder." (arbejdskopien /forside2, kladde)
   Emil, 3.10.2026: sektionen fra hans kladde "JustStatics Forside", sat ind
   under resultaterne og stillet op som i kladden. Bygges af scripts/byg-forside2.js.

   Tre Trustpilot-anmeldelser som skærmbilleder, tapet fast på papiret,
   hver med en håndskrevet note om, hvem der har skrevet den: én stor i midten
   og to mindre under den. Overskriften står i midten, som i kladden; det er
   den eneste sektion på siden, der gør det.

   Sektionen har ingen baggrund selv. Den ligger på et ark ternet papir, og
   kanten er revet mod resultaternes prikkede ark over den og mod sidens hvide
   under den; arket og dets revne kanter står i /css/sektioner/papir.css.

   Størrelserne kommer fra grundsættet. Tapen, håndskriften (Caveat) og den
   store anmeldelses bredde findes ikke i grundsættet endnu og står som egne
   variabler øverst.
   ========================================================================== */

.anm {
  --anm-tape: rgb(249 115 22 / .32);     /* orange tape, som i kladden */
  --anm-tape-lys: rgb(255 255 255 / .7);
  --anm-haand: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;
  --anm-stor: clamp(34rem, 16rem + 22.5vw, 52rem);   /* 544 -> 832: den store anmeldelse */
  /* Ekstra luft foroven, op mod den revne kant og resultaterne (Emil, 3.10.2026). */
  position: relative; color: var(--text); padding-block: calc(var(--section-space) + var(--space-xl)) var(--section-space);
}

/* --- Opstillingen: overskriften, den store anmeldelse og de to mindre, alt i midten --- */
.anm__top { display: grid; gap: var(--space-2xl); justify-items: center; }
.anm .anm__titel { margin: 0; text-align: center; font-size: var(--type-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-weight: var(--weight-semi); color: var(--text); }
.anm__titel span { color: var(--accent); }
.anm__top .anm__en { width: min(100%, var(--anm-stor)); }
/* De to mindre side om side. Den anden står lidt lavere. Skærmbillederne er 587 px brede og må ikke blæses op. */
.anm__flere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); align-items: start; max-width: 67.5rem; margin: var(--space-2xl) auto 0; }
.anm__flere .anm__en:nth-child(2) { margin-top: var(--space-xl); }

/* --- Skærmbilledet, tapet fast, og den håndskrevne note under --------------------- */
.anm__en { position: relative; min-width: 0; }
.anm__kort { display: block; padding: var(--space-2xs); background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius-surface); box-shadow: 0 22px 48px -30px rgb(10 11 13 / .35); transform: rotate(-1.2deg); }
.anm__flere .anm__en:nth-child(1) .anm__kort { transform: rotate(1.4deg); }
.anm__flere .anm__en:nth-child(2) .anm__kort { transform: rotate(-1.6deg); }
.anm .anm__kort img { display: block; width: 100%; height: auto; border-radius: var(--radius-control); }
.anm__en::before { content: ""; position: absolute; z-index: 1; top: calc(var(--space-s) * -1); left: 50%; width: calc(var(--space-3xl) * 1.25); height: var(--space-l); background: var(--anm-tape); border-radius: 2px; transform: translateX(-50%) rotate(-3deg); }
.anm__flere .anm__en:nth-child(1)::before { background: var(--anm-tape-lys); box-shadow: 0 0 0 1px rgb(10 11 13 / .04); }
.anm .anm__hvem { margin: var(--space-m) 0 0; padding-left: var(--space-xl); display: flex; align-items: flex-start; gap: var(--space-xs); font: 700 var(--text-3xl)/1.05 var(--anm-haand); color: var(--text); transform: rotate(-1deg); }
.anm__flere .anm__hvem { font-size: var(--text-2xl); }
.anm__hvem b { font-weight: 700; color: var(--accent-strong); }
.anm__hvem svg { flex: none; width: var(--space-xl); margin-top: calc(var(--space-s) * -1); overflow: visible; }
.anm__hvem path { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: round; }

/* Smalle skærme: alt i én spalte. Under 860 px har .wrap ingen luft i siderne, så sektionen giver den selv. */
@media (max-width: 860px) {
  .anm { padding-inline: var(--space-l); }
  .anm__flere { grid-template-columns: minmax(0, 1fr); }
  .anm__flere .anm__en:nth-child(2) { margin-top: 0; }
  .anm .anm__hvem { padding-left: var(--space-s); }
}