/* New Titles carousel */
.new-titles { padding: 30px 0 10px; }
.new-titles__header { text-align: center; margin-bottom: 14px; }
.new-titles__header h2 { font-size: 36px; line-height: 1.1; margin: 0; }

.nt-carousel {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 10px;
}

/* Viewport fixed to 1100px and centered */
.nt-viewport {
  /* Hide horizontal overflow to keep the 1100px frame;
     allow vertical overflow so the hover lift/shadow is visible */
  overflow-x: hidden;
  overflow-y: visible;
  width: 1100px;
  margin: 0 auto;
  position: relative;
}

/* Exactly 5 cards visible, centered */
.nt-track {
  --gap: 19px;
  --visible: 5;

  display: grid;
  grid-auto-flow: column;

  /* 1100px row => 5 equal columns with 4 gaps */
  grid-auto-columns: calc((1100px - (var(--visible) - 1) * var(--gap)) / var(--visible));
  gap: var(--gap);
  align-items: stretch;

  will-change: transform;
  transform: translateX(0);
}

/* Tablet: let the carousel scale to the display width */
@media (max-width: 1024px) {
  .nt-carousel { max-width: 100%; }
  .nt-viewport { width: 100%; max-width: 100%; }
  .nt-track {
    grid-auto-columns: calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
  }
}

/* Card */
.nt-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  /* allow shadow to show outside; image itself will be clipped by its wrapper */
  overflow: visible;
  user-select: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

/* Lift the whole card slightly on hover (no scaling, so nothing is cut off) */
.nt-card:hover {
  transform: translateY(-6px);
  z-index: 10;
  box-shadow: 0 14px 35px rgba(0,0,0,0.25);
}

/* Image wrapper keeps rounded corners and clips the zoomed image cleanly */
.nt-imgwrap {
  aspect-ratio: 2 / 3;
  width: 100%;
  background: #f5f5f5;
  overflow: hidden; /* important: clip zoomed image inside the card */
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* Image fills the wrapper; only the image scales on hover */
.nt-imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

/* Zoom effect: image only (1.2–1.3 as you like) */
.nt-card:hover .nt-imgwrap img {
  transform: scale(1.1);
}

.nt-title {
  display: block;
  padding: 10px 12px 14px;
  color: #111;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
}

/* Arrows */
.nt-nav {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  cursor: pointer;
}
.nt-nav--prev { left: -6px; }
.nt-nav--next { right: -6px; }
.nt-nav:hover { background: #fff; }

/* Optional: when track is hovered, slightly dim non-hovered cards */
.nt-track:hover .nt-card:not(:hover) { filter: brightness(.95); }

/* Mobile: keep 5 columns inside viewport width with smaller gaps */
@media (max-width: 640px) {
  .nt-track {
    grid-auto-columns: calc((100vw - 32px - (var(--visible) - 1) * 12px) / var(--visible));
    gap: 12px;
  }
  .nt-nav--prev { left: 4px; }
  .nt-nav--next { right: 4px; }
}