/* =====================================================
   Amicare Carousel (navy + gold)
   Perfect header-match (1120px) + responsive + refined proportions
   ===================================================== */

.amicare-carousel{
  /* Layout tokens */
  --amicare-gap: 16px;
  --amicare-cols: 1;

  /* Header container match */
  --amicare-container: 1160px;   /* same as header */
  --amicare-gutter: 16px;        /* side padding on smaller viewports */

  /* Brand tokens */
  --amicare-primary: #132B5D;    /* navy */
  --amicare-accent:  #D8B26B;    /* gold */
  --amicare-text:    #0F172A;

  /* Proportions */
  --amicare-img-h: clamp(180px, 20vw, 240px); /* refined height */
  --amicare-radius: 18px;

  /* MATCH HEADER */
  width: 100%;
  max-width: var(--amicare-container);
  margin: 0 auto;
  padding: 0 var(--amicare-gutter);

  position: relative;
}

/* Viewport */
.amicare-carousel__viewport{
  width: 100%;
  overflow: hidden;
  border-radius: var(--amicare-radius);

  /* subtle “brand wash” behind images */
  background:
    radial-gradient(circle at 12% 0%, rgba(216,178,107,.16), transparent 48%),
    radial-gradient(circle at 100% 10%, rgba(19,43,93,.08), transparent 55%),
    rgba(255,255,255,.92);

  border: 1px solid rgba(19,43,93,.10);
  box-shadow: 0 12px 30px rgba(15,23,42,.10);
}

/* Track */
.amicare-carousel__track{
  display: flex;
  gap: var(--amicare-gap);
  will-change: transform;
  transition: transform .45s ease;
}

/* Slide */
.amicare-carousel__slide{
  flex: 0 0 calc((100% - (var(--amicare-gap) * (var(--amicare-cols) - 1))) / var(--amicare-cols));
  border-radius: calc(var(--amicare-radius) - 4px);
  overflow: hidden;

  background: rgba(255,255,255,.96);
  border: 1px solid rgba(19,43,93,.10);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);

  transform: translateZ(0);
}

.amicare-carousel__slide img{
  width: 100%;
  height: var(--amicare-img-h);
  object-fit: cover;
  display: block;
}

/* Arrows */
.amicare-carousel__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid rgba(216,178,107,.55);
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 32px rgba(15,23,42,.14);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  z-index: 2;
  color: var(--amicare-primary);
}

.amicare-carousel__arrow svg{
  width: 20px;
  height: 20px;
}

.amicare-carousel__arrow--prev{ left: 12px; }
.amicare-carousel__arrow--next{ right: 12px; }

.amicare-carousel__arrow:hover{
  border-color: rgba(216,178,107,.85);
  box-shadow: 0 16px 36px rgba(15,23,42,.16), 0 8px 20px rgba(216,178,107,.12);
  transform: translateY(-50%) scale(1.04);
}

.amicare-carousel__arrow:focus-visible{
  outline: 3px solid rgba(216,178,107,.25);
  outline-offset: 2px;
}

/* Dots */
.amicare-carousel__dots{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;

  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(19,43,93,.10);
  backdrop-filter: blur(10px);
}

.amicare-carousel__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(19,43,93,.28);
  cursor: pointer;
}

.amicare-carousel__dot:hover{
  background: rgba(19,43,93,.42);
}

.amicare-carousel__dot.is-active{
  background: rgba(216,178,107,.98);
  box-shadow: 0 0 0 3px rgba(216,178,107,.18);
}

/* =====================================================
   Responsive columns (JS can still override via CSS vars)
   ===================================================== */

/* Default: 1 */
.amicare-carousel{ --amicare-cols: 1; }

/* If you ever want CSS-only 2/3 columns by breakpoint:
   uncomment these and let JS set columns only when shortcode says so.
*/
/*
@media (min-width: 750px){
  .amicare-carousel{ --amicare-cols: 2; }
}
@media (min-width: 1100px){
  .amicare-carousel{ --amicare-cols: 3; }
}
*/

/* Responsivt finlir */
@media (max-width: 1200px){
  .amicare-carousel{
    padding: 0 var(--amicare-gutter);
  }
}

@media (max-width: 900px){
  .amicare-carousel{
    --amicare-img-h: clamp(170px, 24vw, 220px);
  }
}

@media (max-width: 750px){
  /* Mobile: always 1 per view */
  .amicare-carousel{
    --amicare-cols: 1 !important;
    --amicare-img-h: 190px;
  }

  .amicare-carousel__arrow{
    width: 42px;
    height: 42px;
  }

  .amicare-carousel__arrow--prev{ left: 10px; }
  .amicare-carousel__arrow--next{ right: 10px; }

  .amicare-carousel__dots{
    bottom: 10px;
    padding: 6px 10px;
  }
}

@media (max-width: 420px){
  .amicare-carousel{
    --amicare-img-h: 175px;
    --amicare-gap: 12px;
    --amicare-radius: 16px;
  }
}
/* =========================
   AMICARE HERO + SLIDER CLEANUP
========================= */

.amicare-floating-topbar {
  margin-top: -70px !important;
  padding: 0 24px 28px !important;
  z-index: 50;
}

.amicare-floating-topbar__inner {
  max-width: 1120px !important;
  padding: 34px 38px !important;
  border-radius: 34px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.14) !important;
}

/* Ta bort extra tung box-känsla runt slidern */
.amicare-floating-topbar .amicare-carousel {
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Gör slidern tajtare och snyggare */
.amicare-floating-topbar .amicare-carousel__viewport {
  border-radius: 22px !important;
  overflow: hidden !important;
}

.amicare-floating-topbar .amicare-carousel__slide img {
  height: 260px !important;
  object-fit: cover !important;
  border-radius: 20px !important;
}

/* Ta bort rubrik Start om den ligger i widget/topbar */
.amicare-floating-topbar .widget-title,
.amicare-floating-topbar h1,
.amicare-floating-topbar h2 {
  display: none !important;
}

/* Pilar mindre och renare */
.amicare-floating-topbar .amicare-carousel__arrow {
  width: 42px !important;
  height: 42px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14) !important;
}

/* Prickarna mer diskreta */
.amicare-floating-topbar .amicare-carousel__dots {
  bottom: 16px !important;
}

@media (max-width: 768px) {
  .amicare-floating-topbar {
    margin-top: -36px !important;
    padding: 0 16px 22px !important;
  }

  .amicare-floating-topbar__inner {
    padding: 20px !important;
    border-radius: 24px !important;
  }

  .amicare-floating-topbar .amicare-carousel__slide img {
    height: 210px !important;
  }
}