/**
 * img-shape.css – bildformsbeskärning + storleksstyrning
 *
 * Två separata klasser kombineras:
 *   .img-shape--{variant}  →  liggande | stående | kvadrat | rund
 *   .img-size--{size}      →  small | medium | large
 *
 * Beteende per form:
 *   Liggande / Stående  →  fyller alltid 100 % av kolumnbredden, storlek = höjd
 *   Kvadrat / Rund      →  fast bredd × höjd, centrerad i kolumnen
 *
 * Inget val = ingen påverkan, sektionens egna proportioner gäller.
 *
 * Klassen kan sättas på:
 *   A) en wrapper-div (__media) — bild inuti täcker med object-fit: cover
 *   B) direkt på <img>          — team, testimonials m.fl.
 */

/* ═══════════════════════════════════════════════════════════════════════
   A: KLASS PÅ WRAPPER-DIV
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Liggande: full bredd, höjd styr formen ── */
.img-shape--landscape {
  overflow: hidden;
  width: 100%;
  height: 390px; /* standard = medium */
}
.img-shape--landscape.img-size--small  { height: 220px; }
.img-shape--landscape.img-size--medium { height: 390px; }
.img-shape--landscape.img-size--large  { height: 520px; }

/* ── Stående: full bredd, taller höjd ── */
.img-shape--portrait {
  overflow: hidden;
  width: 100%;
  height: 500px; /* standard = medium */
}
.img-shape--portrait.img-size--small  { height: 340px; }
.img-shape--portrait.img-size--medium { height: 500px; }
.img-shape--portrait.img-size--large  { height: 660px; }

/* ── Kvadrat: fast storlek, centrerad ── */
.img-shape--square {
  overflow: hidden;
  aspect-ratio: 1;
  width: 400px; /* standard = medium */
  max-width: 100%;
  justify-self: center;
  margin-inline: auto;
}
.img-shape--square.img-size--small  { width: 200px; }
.img-shape--square.img-size--medium { width: 400px; }
.img-shape--square.img-size--large  { width: 550px; }

/* ── Rund: som kvadrat men cirkulär ── */
.img-shape--round {
  overflow: hidden;
  aspect-ratio: 1;
  width: 400px; /* standard = medium */
  max-width: 100%;
  border-radius: 50%;
  justify-self: center;
  margin-inline: auto;
}
.img-shape--round.img-size--small  { width: 200px; }
.img-shape--round.img-size--medium { width: 400px; }
.img-shape--round.img-size--large  { width: 550px; }

/* ── Bilden inuti formad wrapper täcker wrappern helt ── */
.img-shape--landscape img,
.img-shape--portrait  img,
.img-shape--square    img,
.img-shape--round     img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: unset;
  object-fit: cover;
}


/* ═══════════════════════════════════════════════════════════════════════
   B: KLASS DIREKT PÅ <img>  (team, testimonials m.fl.)
   ═══════════════════════════════════════════════════════════════════════ */

img.img-shape--landscape,
img.img-shape--portrait,
img.img-shape--square,
img.img-shape--round {
  display: block;
  object-fit: cover;
  max-width: 100%;
}

/* Liggande — full bredd, höjd */
img.img-shape--landscape              { width: 100%; height: 390px; }
img.img-shape--landscape.img-size--small  { height: 220px; }
img.img-shape--landscape.img-size--medium { height: 390px; }
img.img-shape--landscape.img-size--large  { height: 520px; }

/* Stående — full bredd, taller höjd */
img.img-shape--portrait               { width: 100%; height: 500px; }
img.img-shape--portrait.img-size--small  { height: 340px; }
img.img-shape--portrait.img-size--medium { height: 500px; }
img.img-shape--portrait.img-size--large  { height: 660px; }

/* Kvadrat — fast bredd, centrerad */
img.img-shape--square                 { aspect-ratio: 1; width: 400px; margin-inline: auto; }
img.img-shape--square.img-size--small  { width: 200px; }
img.img-shape--square.img-size--medium { width: 400px; }
img.img-shape--square.img-size--large  { width: 550px; }

/* Rund — som kvadrat men cirkulär */
img.img-shape--round                  { aspect-ratio: 1; width: 400px; margin-inline: auto; border-radius: 50%; }
img.img-shape--round.img-size--small  { width: 200px; }
img.img-shape--round.img-size--medium { width: 400px; }
img.img-shape--round.img-size--large  { width: 550px; }