/* ==========================================================================
   HORIZONTAL RAIL
   One line, scrolls sideways, snaps. Used by Featured collections.

   Why a rail rather than a wrapping grid: six tiles in a four-across grid leaves
   two orphans on a second row, which reads as a mistake. A rail keeps the band
   to one confident line at every width and makes it obvious there is more to the
   right.
   ========================================================================== */

.rail-wrap { position: relative; }

.rail {
  display: grid;
  grid-auto-flow: column;
  /* Deliberately shows a sliver of the next tile - the strongest possible
     signal that the row scrolls, and cheaper than any arrow or hint text. */
  grid-auto-columns: minmax(220px, calc(50% - var(--sp-3)));
  gap: var(--sp-4);
  overflow-x: auto;

  /* proximity, not mandatory.
     Mandatory snapping fights an in-progress smooth scroll: the browser keeps
     re-snapping mid-animation, which produced the yank at the end of every
     slide. proximity still tidies a manual swipe onto a tile without arguing
     with an animation.

     scroll-behavior is deliberately NOT smooth here — rail.js animates the
     scroll itself with the house easing curve, and the two would compete. */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;

  padding-bottom: var(--sp-3);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

/* Snapping is suspended for the duration of a scripted slide, so nothing
   interrupts the curve. rail.js adds and removes this. */
.rail.is-sliding { scroll-snap-type: none; }

@media (min-width: 640px)  { .rail { grid-auto-columns: minmax(230px, calc(33.333% - var(--sp-3))); } }
@media (min-width: 1024px) { .rail { grid-auto-columns: minmax(240px, calc(25% - var(--sp-4))); } }
@media (min-width: 1400px) { .rail { grid-auto-columns: minmax(250px, calc(20% - var(--sp-4))); } }

.rail > * { scroll-snap-align: start; }

.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-track { background: transparent; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.rail::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }

@media (prefers-reduced-motion: reduce) {
  /* rail.js also drops to an instant jump; this covers manual scrolling. */
  .rail { scroll-behavior: auto; scroll-snap-type: x mandatory; }
}

/* ---- Arrows ---------------------------------------------------------- */

.rail-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: none;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--tbs-green);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: opacity var(--dur-micro) var(--ease-brand),
              border-color var(--dur-micro) var(--ease-brand);
}

@media (min-width: 1024px) and (hover: hover) {
    /* Only on pointer devices — and now actually measured. min-width alone tests
     screen size, so a 1024px tablet got the arrows and then latched them on
     after the first tap. */
    .rail-wrap:hover .rail-btn,
    .rail-wrap:focus-within .rail-btn {
        display: grid;
    }
}

.rail-btn[disabled] { opacity: 0; pointer-events: none; }

.rail-btn--prev { left: calc(var(--sp-5) * -1); }
.rail-btn--next { right: calc(var(--sp-5) * -1); }

/* ---- Collection tile ------------------------------------------------- */

.ctile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--cream-deep);
  text-decoration: none;
}

.ctile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-section) var(--ease-brand);
}

@media (hover: hover) {
  .ctile:hover img { transform: scale(1.06); }
}

/* No artwork uploaded: a styled botanical mark rather than an empty box, so a
   half-loaded catalog still looks deliberate. */
.ctile--noimg {
  background: linear-gradient(155deg, var(--tbs-green) 0%, var(--tbs-green-deep) 100%);
}

.ctile__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(200, 169, 106, .5);
}

.ctile__fallback svg {
  width: 44%;
  height: auto;
  transition: transform var(--dur-section) var(--ease-brand);
}


.ctile__label {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--sp-7) var(--sp-4) var(--sp-4);
  background: linear-gradient(to top, rgba(0, 48, 31, .92) 14%, rgba(0, 48, 31, .5) 62%, transparent);
  color: var(--white);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.25;
}

.ctile__label small {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  opacity: .82;
  margin-top: 3px;
}

/* Pointer devices only — see the note at the end of base.css. */
@media (hover: hover) {
    .rail-btn:hover {
        border-color: var(--tbs-green);
    }

    .ctile--noimg:hover .ctile__fallback svg {
        transform: scale(1.08) rotate(-3deg);
    }
}