/* =========================================
   GLOBAL GUTTERS
========================================= */

:root{
  --site-gutter: 30px;
  --rail-nav-width: 65px;
  --rail-nav-gap: 12px;
  --rail-safe-gap: 16px;
}

@media (max-width:1024px){
  :root{
    --site-gutter: 20px;
  }
}

@media (max-width:640px){
  :root{
    --site-gutter: 16px;
  }
}

/* =========================================
   RAIL SCOPE (theme variables)
========================================= */

.wjkrail-scope{
  --ink:#2b281f;
  --muted:#6e6a62;
  --title:#53492c;
  --cta:#53492c;

  --nav-bg:rgba(255,255,255,.92);
  --nav-ink:#2b281f;

  --dot:rgba(255,255,255,.55);
  --dot-active:#fff;

  --radius:18px;

  --rail-left: var(--site-gutter);
  --rail-right: var(--site-gutter);

  --nav-lane: calc(
      var(--rail-nav-width)
      + var(--rail-nav-gap)
      + var(--rail-safe-gap)
  );
}

/* =========================================
   RAIL LAYOUT
========================================= */

.wjkrail-rail{
  position:relative;

  display:grid;
  grid-template-columns:
      var(--rail-left)
      var(--nav-lane)
      minmax(0,1fr);

  align-items:stretch;
  width:100%;
}

/* =========================================
   SIDE NAV
========================================= */

.wjkrail-side-nav{
  grid-column:2;

  display:flex;
  flex-direction:column;
  gap:12px;

  align-self:center;
  justify-self:start;

  width:var(--nav-lane);
  z-index:5;
}

.wjkrail-rail-btn{
  all:unset;

  width:65px;
  height:65px;

  border-radius:10px;

  display:grid;
  place-items:center;

  border:1px solid #4e4325;
  color:#4e4325;

  font-size:18px;
  cursor:pointer;
}

.wjkrail-rail-btn:active{
  transform:scale(.97);
}

/* =========================================
   VIEWPORT
========================================= */

.wjkrail-viewport{
  grid-column:3;

  min-width:0;

  overflow-y:hidden;

  padding:0;

  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;

  scrollbar-width:none;
}

.wjkrail-viewport::-webkit-scrollbar{
  display:none;
}

/* =========================================
   TRACK
========================================= */

.wjkrail-track{
  display:flex;

  gap:clamp(16px,2vw,24px);

  padding:12px 0 24px 0;

  width:max-content;
  min-width:100%;

  box-sizing:border-box;
}

/* trailing spacer prevents right-edge bleed */
.wjkrail-track::after{
  content:"";
  flex:0 0 var(--rail-right);
}

/* =========================================
   CARDS
========================================= */

.wjkrail-card{
  scroll-snap-align:start;

  flex:0 0 clamp(280px,30vw,360px);

  color:var(--ink);
}

/* =========================================
   MEDIA SLIDER
========================================= */

.wjkrail-media{
  position:relative;

  overflow:hidden;

  border-radius:12px;
  background:#e9e9e9;

  aspect-ratio:4/5;
  min-height:420px;
}

@supports not (aspect-ratio:4/5){
  .wjkrail-media::before{
    content:"";
    display:block;
    padding-top:125%;
  }
}

.wjkrail-slides{
  display:flex;
  height:100%;

  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}

.wjkrail-slides img{
  width:100%;
  height:100%;

  object-fit:cover;

  flex:0 0 100%;
}

/* =========================================
   DOTS
========================================= */

.wjkrail-dots{
  position:absolute;

  left:50%;
  bottom:10px;

  transform:translateX(-50%);

  display:flex;
  gap:8px;

  z-index:2;
}

.wjkrail-dot{
  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--dot);
}

.wjkrail-dot.is-active{
  background:var(--dot-active);
}

/* =========================================
   IMAGE NAV
========================================= */

.wjkrail-thumb{
  all:unset;

  position:absolute;
  bottom:10px;

  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:var(--nav-bg);
  color:var(--nav-ink);

  font-size:24px;

  box-shadow:0 8px 20px rgba(0,0,0,.18);

  opacity:0;
  visibility:hidden;

  cursor:pointer;

  transition:opacity .2s ease, transform .15s ease;
}

.wjkrail-thumb.prev{ left:10px; }
.wjkrail-thumb.next{ right:10px; }

.wjkrail-media:hover .wjkrail-thumb,
.wjkrail-media:focus-within .wjkrail-thumb{
  opacity:1;
  visibility:visible;
}

.wjkrail-media:not(:has(img:nth-child(2))) .wjkrail-thumb,
.wjkrail-media:not(:has(img:nth-child(2))) .wjkrail-dots{
  display:none!important;
}

/* =========================================
   CARD INFO
========================================= */

.wjkrail-info{
  padding:clamp(16px,1.8vw,22px) clamp(6px,1vw,8px);
}

.wjkrail-title{
  margin:18px 0 0;

  font-family:Lora,serif;
  font-size:30px;
  font-weight:500;

  color:#53492c;
}

.wjkrail-cta{
  display:inline-block;

  font-family:"Montserrat",sans-serif;
  font-size:14px;
  font-weight:500;

  letter-spacing:.08em;
  text-transform:uppercase;

  color:#53492c;
  text-decoration:none;

  position:relative;
  padding-bottom:4px;
}

.wjkrail-cta::after{
  content:"";

  position:absolute;
  left:0;
  bottom:0;

  width:0;
  height:2px;

  background:#53492c;

  transition:width .3s ease;
}

.wjkrail-cta:hover::after{
  width:100%;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width:640px){

  .wjkrail-rail{
    grid-template-columns:1fr!important;
  }

  .wjkrail-scope{
    --rail-left:0px!important;
    --rail-right:0px!important;
    --nav-lane:0px!important;
  }

  .wjkrail-viewport{
    grid-column:1/-1!important;

    overflow:visible!important;
    scroll-snap-type:none!important;

    padding:0!important;
  }

  .wjkrail-track{
    display:block!important;

    gap:0!important;
    padding:0!important;

    width:100%!important;
    min-width:0!important;
  }

  .wjkrail-track::after{
    display:none!important;
  }

  .wjkrail-card{
    flex:1 1 100%!important;

    max-width:none!important;

    scroll-snap-align:unset!important;

    margin:0 0 24px 0;
  }

  .wjkrail-side-nav{
    display:none!important;
  }
}

/* =========================================
   JS STATE
========================================= */

.wjkrail-scope.wjkrail--no-nav{
  --nav-lane:0px!important;
}

.wjkrail-scope.wjkrail--no-nav .wjkrail-side-nav{
  display:none!important;
}