/* =========================================================
   Hemängen – gemensamma guidebilder
   public/css/guider/guide-images.css

   Används av t.ex.
   /guider/raktval
   /guider/tvalbok

   Mål:
   - samma bildspråk i alla guider
   - 1:1-bildkort på innehållssidor
   - mjuk "morgondis" medan bilden laddar
   - riktig <img> används, inte CSS background-image
   - stabil layout utan CLS
   ========================================================= */

:root{
  --guide-img-bg: #f4f1e8;
  --guide-img-border: rgba(83, 88, 45, .16);
  --guide-img-shadow: 0 10px 24px rgba(44, 45, 32, .12);
  --guide-img-radius: 16px;
}

.guideImage{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 38%,
      rgba(255,255,255,.96) 0%,
      rgba(248,246,239,.92) 42%,
      rgba(236,235,224,.88) 100%);
  border: 1px solid var(--guide-img-border);
  border-radius: var(--guide-img-radius);
  box-shadow: var(--guide-img-shadow);
}

/* "Morgondis" utan extra bildfil */
.guideImage::before{
  content:"";
  position:absolute;
  inset:-12%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), transparent 38%),
    radial-gradient(circle at 70% 68%, rgba(214,220,195,.46), transparent 42%),
    linear-gradient(135deg, rgba(245,244,235,.95), rgba(230,232,218,.78));
  filter: blur(18px);
  transform: scale(1.08);
}

.guideImage > img,
.card.guideImage > img,
.illusStack .card.guideImage > img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  padding: clamp(8px, 3%, 18px);
}

.guideImage--cover > img,
.guideImage--photo > img,
.card.guideImage--cover > img,
.card.guideImage--photo > img{
  object-fit:cover;
  padding:0;
}

.guideImage--hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.20), rgba(0,0,0,.38));
}

.guideImage__overlay{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(14px, 4vw, 32px);
  color:#fff;
}

.sideCol > .guideImage{
  width:100%;
  max-width:100%;
  flex:0 0 auto;
}

/* En ensam innehållsbild i högerspalten får samma stabila 1:1-format
   i båda guiderna. Illustrationstackar behåller sin egen boklayout. */
.sideCol > .guideImage{
  aspect-ratio:1 / 1;
}

@media (max-width:760px){
  .guideImage{
    border-radius:14px;
    box-shadow:0 6px 16px rgba(44,45,32,.10);
  }

  .guideImage > img,
.card.guideImage > img,
.illusStack .card.guideImage > img{
    padding:6px;
  }

  .guideImage--cover > img,
  .guideImage--photo > img{
    padding:0;
  }

  .sideCol > .guideImage{
    aspect-ratio:1 / 1;
    min-height:0;
  }
}

@media (max-width:390px){
  .guideImage{
    border-radius:12px;
  }
}