/* RELATED IMAGES WIDGET (switch-aware) */
.irw-wrap{ --irw-accent:#00d4a7; --irw-accent-2:#17c1a4; }
/* Title */
.irw-title-wrapper{
  font-size:1.2rem;
  font-weight:800;
  color:var(--text-related-img);
  border-left:5px solid color-mix(in srgb, var(--brand) 55%, #a855f7 45%);
  padding-left:10px;
  margin-bottom:1rem;
  background:linear-gradient(
    to right,
    color-mix(in srgb, var(--irw-accent) 14%, var(--base-2) 86%),
    var(--base-2)
  );
  border-radius:4px;
  text-transform: uppercase;
}

/* List */
.irw-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:var(--irw-gap);
  content-visibility:auto;
  contain:content;
}

/* Thumb */
.irw-thumb{
  display:block;
  border-radius:var(--irw-radius);
  overflow:hidden;
  background:var(--base-3);
  box-shadow:var(--irw-shadow);
  transition:transform .18s ease, box-shadow .18s ease;
  will-change:transform;
}
.irw-thumb:focus-visible{ outline:2px solid var(--irw-accent); outline-offset:2px; }
.irw-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.001); transition:transform .25s ease;
}
.irw-thumb:hover{ transform:translateY(-2px); }
.irw-thumb:hover img{ transform:scale(1.06); }

/* Dark tweaks */
html[data-theme="dark"] .irw-thumb{
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}

/* Mobile slider mode */
@media (max-width:768px){
  .irw-wrap{ position:relative; padding-bottom:18px; }

  .irw-list{
    display:flex !important;
    overflow-x:auto; overflow-y:hidden;
    gap:var(--irw-gap);
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:0 6px 10px;
    scrollbar-width:thin;
    scrollbar-color: color-mix(in srgb, var(--text) 40%, transparent) var(--base-3);
  }
  .irw-item{ flex:0 0 auto; min-width:clamp(68vw,78vw,420px); scroll-snap-align:start; }

  /* WebKit scrollbar */
  .irw-list::-webkit-scrollbar{ height:8px; }
  .irw-list::-webkit-scrollbar-track{ background:var(--base-3); border-radius:999px; }
  .irw-list::-webkit-scrollbar-thumb{
    background:linear-gradient(
      90deg,
      color-mix(in srgb, var(--text) 35%, var(--base-3) 65%),
      color-mix(in srgb, var(--text) 55%, var(--base-3) 45%)
    );
    border-radius:999px;
  }
  .irw-list::-webkit-scrollbar-thumb:hover{
    background:color-mix(in srgb, var(--text) 70%, var(--base-3) 30%);
  }

  /* Hint bar */
  .irw-wrap::after{
    content:""; position:absolute; left:36px; right:36px; bottom:2px;
    height:4px; border-radius:999px;
    background: color-mix(in srgb, var(--text) 18%, transparent);
  }
  .irw-wrap::before{
    content:""; position:absolute; left:36px; bottom:2px; width:72px; height:4px; border-radius:999px;
    background: linear-gradient(90deg, var(--irw-accent), var(--irw-accent-2));
    box-shadow:0 0 10px color-mix(in srgb, var(--irw-accent) 60%, transparent);
    animation:irw-hint 1.8s ease-in-out infinite;
  }

  .irw-wrap.irw-hint-hide::before,
  .irw-wrap.irw-hint-hide::after{ display:none; }
}

/* Columns upscaling */
@media (min-width:769px){ .irw-list{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); } }
@media (min-width:1200px){ .irw-list{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); } }

@media (prefers-reduced-motion:reduce){
  .irw-thumb, .irw-thumb img{ transition:none !important; }
}

/* Animation */
@keyframes irw-hint{
  0%  { transform:translateX(0); opacity:.25; }
  10% { opacity:1; }
  50% { transform:translateX(calc(100% - 72px)); opacity:1; }
  90% { opacity:.9; }
  100%{ transform:translateX(0); opacity:.25; }
}