/* ==============================
   RANKLY – KATEGORI-KARUSELL
   Robust mobil/desktop med D/M-variabler
============================== */

/* GÖM hela sektionen tills JS flyttat den */
.rankly-cat-wrapper:not(.is-ready){
  position: absolute !important;
  left: -99999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* När JS är klar */
.rankly-cat-wrapper.is-ready{
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;

  /* FAILSAFE: så pilar/skuggor kan ligga utanför */
  overflow: visible !important;
}

/* Wrapper */
.rankly-cat-carousel{
  /* Defaults om PHP inte hunnit */
  --cols: 14;

  --gapD: 8px;
  --icoBoxD: 60px;
  --icoSizeD: 50px;
  --labelFontD: 12px;

  --gapM: 10px;
  --icoBoxM: 48px;
  --icoSizeM: 38px;
  --labelFontM: 12px;

  /* Aktiva (desktop default) */
  --gap: var(--gapD);
  --icoBox: var(--icoBoxD);
  --icoSize: var(--icoSizeD);
  --labelFont: var(--labelFontD);

  --padX: 0px;
  --cardMin: 86px;
  --radius: 18px;
  --icoRadius: 18px;

  width: 100%;
  position: relative;

  overflow: visible !important;
}

/* Track – DESKTOP: INGEN bleed (100%) + skugga klipps inte */
.rankly-cat-track{
  width: 100%;
  display: flex;
  gap: var(--gap);
  padding: 8px 0;            /* styr “luft” inne i tracken på desktop */
  align-items: stretch;

  overflow-x: auto;
  overflow-y: visible;       /* skuggor syns */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  scrollbar-width: none;
  contain: layout;           /* inte paint */
}
.rankly-cat-track::-webkit-scrollbar{ display:none; }

.rankly-cat-carousel.is-centered .rankly-cat-track{ justify-content: center; }
.rankly-cat-carousel:not(.is-centered) .rankly-cat-track{ justify-content: flex-start; }

/* Card */
.rankly-cat-card{
  flex: 0 0 max(
    var(--cardMin),
    calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols))
  );

  display: grid;
  grid-template-rows: var(--icoBox) auto;
  justify-items: center;
  align-content: start;

  border-radius: var(--radius);
  text-decoration: none;
  color: #000;
  gap: 5px;
  background: transparent;
  transition: background-color .12s ease;
}

/* Ikonplatta */
.rankly-cat-card-ico{
  width: var(--icoBox);
  height: var(--icoBox);
  border-radius: var(--icoRadius);

  background-color: var(--cat, #eee);
  border: 1px solid rgba(0,0,0,.12);

  background-color: color-mix(in srgb, var(--cat, #eee) 100%, #fff);
  border: 1px solid color-mix(in srgb, var(--cat, #eee) 50%, rgba(0,0,0,.12));

  background-image: var(--ico, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icoSize) var(--icoSize);

  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  transition: transform .12s ease;
  transform-origin: center;
}

/* Label */
.rankly-cat-card-label{
  display: inline-block;
  font-size: var(--labelFont);
  font-weight: 500;
  text-align: center;
  line-height: 1.15;
  padding-top: 10px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-shadow: none;
}
.rankly-cat-amp{ display:inline-block; line-height:1; }

/* Hover-effekter (desktop) */
@media (hover:hover) and (pointer:fine){
  .rankly-cat-card:hover .rankly-cat-card-ico{ transform: scale(1.07); }
}

/* När man scrollar */
.rankly-cat-carousel.is-scrolling .rankly-cat-card,
.rankly-cat-carousel.is-scrolling .rankly-cat-card-ico{
  transition: none !important;
  transform: none !important;
}

/* Tablet */
@media (max-width: 900px){
  .rankly-cat-carousel{ --cardMin: 72px; }
}

/* Mobil – byt till mobilvärden + bleed ENDAST på mobil */
@media (max-width: 600px){
  .rankly-cat-carousel{
    --gap: var(--gapM);
    --icoBox: var(--icoBoxM);
    --icoSize: var(--icoSizeM);
    --labelFont: var(--labelFontM);
    --cardMin: 65px;
  }

  /* Mobil:
     - gå ut till höger skärmkant (bleed ur wrapperns 12px padding)
     - 4px vänster innan första kategori
  */
  .rankly-cat-track{
    width: calc(100% - 4px);    /* bleed endast åt höger */
    margin-right: 0px;         /* matcha wrapperns padding-right: 12px */
    margin-left: 0px;
    padding: 10px 10px 10px 4px; /* T R B L */
  }
}

/* Head */
.rankly-cat-head{ text-align: left; margin: 0 0 5px 12px; }
.rankly-cat-title{ margin: 0; font-size: 22px; font-weight: 650; line-height: 1.1; }

/* Vit bakgrund på hela blocket */
.theme-wrapper.rankly-cat-wrapper.is-ready{
  background: #FFFEFE;
  border-radius: 10px;
  padding: 5px 0px 0px 0px; /* T R B L */
  box-sizing: border-box;
}

/* Alltid svart text på länkar */
.theme-wrapper.rankly-cat-wrapper a.rankly-cat-card,
.theme-wrapper.rankly-cat-wrapper a.rankly-cat-card:link,
.theme-wrapper.rankly-cat-wrapper a.rankly-cat-card:visited,
.theme-wrapper.rankly-cat-wrapper a.rankly-cat-card:hover,
.theme-wrapper.rankly-cat-wrapper a.rankly-cat-card:active,
.theme-wrapper.rankly-cat-wrapper a.rankly-cat-card:focus,
.theme-wrapper.rankly-cat-wrapper a.rankly-cat-card:focus-visible{
  color: #000 !important;
  text-decoration: none !important;
}
.theme-wrapper.rankly-cat-wrapper a.rankly-cat-card *{ color: #000 !important; }

/* ==============================
   PILAR – transparent bakgrund + svart pil
   - UTANFÖR karusellen
   - syns endast vid hover (desktop)
============================== */

.theme-wrapper.rankly-cat-wrapper .rankly-cat-carousel .rankly-cat-nav{
  display: none; /* desktop */
  position: absolute;
  top: calc(10px + (var(--icoBox) / 2));
  transform: translateY(-50%);
  width: 32px;
  height: 32px;

  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;

  padding: 0 !important;
  margin: 0 !important;

  font-size: 0 !important;
  line-height: 0 !important;

  cursor: pointer;
  z-index: 999 !important;
  user-select: none;

  opacity: 0;
  pointer-events: none;

  transition: opacity .15s ease, transform .15s ease;
  -webkit-appearance: none !important;
  appearance: none !important;
}

@media (min-width: 901px){
  .theme-wrapper.rankly-cat-wrapper .rankly-cat-carousel .rankly-cat-nav{ display: block; }
}

/* Placering UTANFÖR karusellen */
.theme-wrapper.rankly-cat-wrapper .rankly-cat-carousel .rankly-cat-nav--prev{
  left: -30px !important;
  right: auto !important;
}
.theme-wrapper.rankly-cat-wrapper .rankly-cat-carousel .rankly-cat-nav--next{
  right: -30px !important;
  left: auto !important;
}

/* Pil-ikonen */
.theme-wrapper.rankly-cat-wrapper .rankly-cat-carousel .rankly-cat-nav::before{
  content:"";
  display:block;
  width: 20px;
  height: 20px;
  margin: 0 auto;

  background: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 4l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

  opacity: .85;
  transition: opacity .15s ease;
}
.theme-wrapper.rankly-cat-wrapper .rankly-cat-carousel .rankly-cat-nav--prev::before{
  transform: rotate(180deg);
}

/* Desktop: Visa ENDAST vid hover när overflow finns */
@media (min-width: 901px){
  .theme-wrapper.rankly-cat-wrapper .rankly-cat-carousel:not(.is-centered) .rankly-cat-nav:not(.is-disabled){
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .theme-wrapper.rankly-cat-wrapper .rankly-cat-carousel:not(.is-centered):hover .rankly-cat-nav:not(.is-disabled){
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .theme-wrapper.rankly-cat-wrapper .rankly-cat-carousel:not(.is-centered) .rankly-cat-nav:not(.is-disabled):hover{
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .theme-wrapper.rankly-cat-wrapper .rankly-cat-carousel:not(.is-centered) .rankly-cat-nav:not(.is-disabled):focus-visible{
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Hover: lite tydligare pil, fortfarande transparent */
@media (hover:hover) and (pointer:fine){
  .theme-wrapper.rankly-cat-wrapper .rankly-cat-carousel .rankly-cat-nav:hover{
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }
  .theme-wrapper.rankly-cat-wrapper .rankly-cat-carousel .rankly-cat-nav:not(.is-disabled):hover{
    transform: translateY(-50%) scale(1.06);
  }
  .theme-wrapper.rankly-cat-wrapper .rankly-cat-carousel .rankly-cat-nav:not(.is-disabled):hover::before{
    opacity: 1 !important;
  }
}

/* Disabled = aldrig synlig */
.theme-wrapper.rankly-cat-wrapper .rankly-cat-carousel .rankly-cat-nav.is-disabled{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Fokus */
.theme-wrapper.rankly-cat-wrapper .rankly-cat-carousel .rankly-cat-nav:focus{ outline: none; }
.theme-wrapper.rankly-cat-wrapper .rankly-cat-carousel .rankly-cat-nav:focus-visible{
  opacity: 1 !important;
  pointer-events: auto !important;
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 2px;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}