/* ========= FULLBREDD HERO =========
   - Gör sektionen edge-to-edge även när innehållet i övrigt är centrerat med max-width. */
.hero {
  position: relative;
  width: 100vw;     
  margin-top: 1.2rem;                    /* full viewport width */
  margin-bottom: 0;
  margin-left: calc(50% - 50vw);        /* full-bleed trick */
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  background: var(--card-bg);

  /* Responsiv höjd som funkar ner till ca 340px skärm */
  height: clamp(300px, 56vw, 720px); /* More responsive height */
  aspect-ratio: 16/9; /* Maintain aspect ratio */
}

/* Inre slidar */
.slides {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform 360ms ease;
}

.slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fyller ytan utan att lämna glipor */
  display: block;
}

/* Ifall du inte har laddat in bilder än */
.slide-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #e9ecef;
  color: #495057;
  font-size: 1rem;
}
/* ========= PILAR ========= */
.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  width: 46px;
  height: 46px;
  border-radius: 10px; /* inte rund, lite kvadratisk */
  background: rgba(0,0,0,0.55);  /* mörkare */
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  transition: transform 160ms ease, background 160ms ease;
}

.nav-arrow:hover { transform: translateY(-50%) scale(1.04); 
background: var(--nav-hover);}
.nav-arrow.left  { left: 14px; }
.nav-arrow.right { right: 14px; }

/* ========= DOTS ========= */
.dots {
  position: absolute;
  bottom: 12px;
  left: 0; right: 0;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 0 0.5rem;
}

.dot {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 6px;
  background: rgba(255,255,255,0.55);
  cursor: pointer;
}

.dot.active {
  width: 24px;
  background: var(--nav-hover);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.22);
}

/* ========= MOBILJUSTERINGAR ========= */
@media (max-width: 640px) {
  .hero {
    height: clamp(280px, 65vw, 500px);
  }
  .nav-arrow { width: 42px; height: 42px; font-size: 24px; }
  .dot { width: 9px; height: 9px; }
  .dot.active { width: 20px; }
}
