/* ==========================================================================
   bi-inspiration.css — Badrumsinspiration.se
   Stående inspirationsingångar högst upp på startsidan.
   2026-08-22
   ========================================================================== */

.stilar{padding-top:clamp(58px,7vh,100px);padding-bottom:clamp(30px,4vh,52px)}
.stilar .sec-head{margin-bottom:clamp(30px,3.6vw,46px)}

.stilrad{
  display:grid;gap:clamp(12px,1.4vw,20px);
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:1180px){.stilrad{grid-template-columns:repeat(2,1fr);gap:16px}}

.stilkort{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  min-width:0;
}
.stilkort-bild{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  border-radius:12px;background:var(--sten);
  margin-bottom:14px;
}
.stilkort-bild img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease,cubic-bezier(.2,.7,.2,1));
}
.stilkort:hover .stilkort-bild img{transform:scale(1.055)}

/* mjuk botten så texten i bilden aldrig tappar läsbarhet */
.stilkort-bild::after{
  content:"";position:absolute;inset:auto 0 0 0;height:62%;
  background:linear-gradient(to top,rgba(14,25,23,.92) 0%,rgba(14,25,23,.62) 32%,rgba(14,25,23,.22) 66%,transparent 100%);
  pointer-events:none;
}
.stilkort-kod{
  position:absolute;left:18px;right:18px;bottom:calc(13px + 1.8em);z-index:2;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:#F3EFE8;opacity:.7;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}
.stilkort-namn{
  position:absolute;left:18px;right:18px;bottom:15px;z-index:2;
  font-family:"Newsreader",Georgia,serif;font-weight:400;
  font-size:clamp(1.12rem,1.5vw,1.42rem);line-height:1.16;
  color:#F3EFE8;margin:0;
  text-shadow:0 1px 14px rgba(0,0,0,.35);
}
.stilkort p{
  margin:0;font-size:.9rem;line-height:1.55;opacity:.66;max-width:34ch;
  padding-right:6px;
}

.stilrad-alla{
  display:inline-flex;align-items:center;gap:.6em;margin-top:clamp(26px,3vw,38px);
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--accent,#A8763F);
  transition:gap .3s ease;
}
.stilrad-alla i{
  width:1.4em;height:1px;background:currentColor;display:inline-block;
  transition:width .3s ease;
}
.stilrad-alla:hover{gap:.85em}
.stilrad-alla:hover i{width:2.1em}

/* --------------------------------------------------- Mobil: svepbart --- */
@media (max-width:760px){
  .stilrad{
    display:flex;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;
    margin-inline:calc(var(--gap) * -1);
    padding-inline:var(--gap);
    scroll-padding-inline-start:var(--gap);
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
  }
  .stilrad::-webkit-scrollbar{display:none}
  .stilkort{flex:0 0 74%;scroll-snap-align:start}
}
@media (max-width:420px){.stilkort{flex:0 0 82%}}