/* ===========================================================================
   photos.css — BILDPASSNING
   ---------------------------------------------------------------------------
   Identisk fil i alla tre förslagen. Laddas EFTER style.css. Ingen design
   rör den; formgivningen styr bara måtten via variablerna längst ned i
   respektive style.css.

   Regeln som gör att vita fält inte kan uppstå:

     object-fit: cover  — bilden fyller alltid hela sin box
     aspect-ratio: auto — boxen får bildens egna proportioner

   Tillsammans betyder de att fotot varken kan få vita kanter eller beskäras.
   Boxen är helt enkelt formad efter bilden. Byt aldrig cover mot contain.

   Bannern är det enda undantaget: den har en fast proportion, eftersom den
   ska vara lika hög på alla sidor. Där beskärs bilden i höjdled, vilket är
   avsikten, och object-position håller kvar rummets mitt.
   =========================================================================== */

img {
  max-width: 100%;
}

/* ---------- Bannern ---------- */
.hero-banner {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--banner-ratio, 3 / 1);
  object-fit: cover;
  object-position: var(--banner-pos, center 60%);
  margin: 0;
}

@media (max-width: 700px) {
  .hero-banner {
    aspect-ratio: var(--banner-ratio-mobile, 2 / 1);
    object-position: var(--banner-pos-mobile, var(--banner-pos, center 60%));
  }
}

/* ---------- Fotona ---------- */
.content-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;          /* bildens egna proportioner — ingen beskärning */
  object-fit: cover;           /* aldrig contain */
  max-width: var(--photo-max, 780px);
  /* Sidmarginalerna via variabler, så att en formgivning kan lägga fotot
     osymmetriskt utan att röra passningen. Standard är centrerat. */
  margin: var(--photo-gap, 3rem) var(--photo-mr, auto)
          var(--photo-gap, 3rem) var(--photo-ml, auto);
  border-radius: var(--photo-radius, 0);
  box-shadow: var(--photo-shadow, none);
}

.content-image--portrait {
  max-width: var(--photo-max-portrait, 440px);
}

.content-image--natural {
  max-width: var(--photo-max-natural, 620px);
}

/* Låser passningen mot allt annat på sidan. */
img.content-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* ---------- Två foton bredvid varandra (används av förslag C) ----------
   Spalterna växer i proportion till varje bilds format (--ar = bredd/höjd).
   Ett liggande och ett stående foto får då samma höjd utan att någon av dem
   beskärs — bredden anpassas i stället. */
.photo-row {
  display: flex;
  align-items: flex-start;
  gap: var(--photo-row-gap, 1.25rem);
  max-width: var(--photo-row-max, 900px);
  margin: var(--photo-gap, 3rem) auto;
  padding: 0 var(--gutter, 1.75rem);
}

.photo-row > :first-child { flex: var(--ar-a, 1) 1 0; min-width: 0; }
.photo-row > :last-child  { flex: var(--ar-b, 1) 1 0; min-width: 0; }

.photo-row .content-image {
  margin: 0;
  max-width: none;
}

@media (max-width: 700px) {
  .photo-row {
    display: block;
  }
  .photo-row .content-image {
    max-width: var(--photo-max-natural, 620px);
    margin: 0 auto var(--photo-gap, 3rem);
  }
  .photo-row .content-image:last-child { margin-bottom: 0; }
}

.hero img { object-fit: cover; object-position: 70% center; height: 220px; }
@media (min-width: 700px) { .hero img { height: auto; object-position: center; } }