/* ==========================================================================
   section-5-duan.css — Dự án tiêu biểu (Figma node 1134:1265)
   Nền gradient hồng nhạt → trắng, tiêu đề trái / intro + link phải,
   dải gallery ngang 5 ảnh dự án (full-bleed, cuộn ngang có scroll-snap).
   ========================================================================== */

.duan {
  position: relative;
  background-image: linear-gradient(180deg, #ffe5e8 14%, var(--dsh-white) 37%);
  padding-block: clamp(64px, 7vw, 120px);
  overflow: hidden;
}

/* -------- Đầu section: tiêu đề trái · intro + link phải -------- */
.duan-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }

.duan-title {
  color: var(--dsh-ink);
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.06;
  margin: 0;
}

.duan-intro {
  color: var(--dsh-slate);
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  line-height: 1.3;
  margin-bottom: var(--space-3);
}

/* Link "Xem tất cả dự án →" */
.duan-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--dsh-red);
  font-weight: 500;
  text-decoration: none;
}

.duan-link .duan-link-icon {
  width: 24px;
  height: 24px;
  transition: transform var(--transition-base);
}

.duan-link:hover { color: var(--dsh-red); }
.duan-link:hover .duan-link-icon { transform: translateX(4px); }

/* -------- Slider ảnh dự án (full-bleed) --------
   Bề rộng thẻ = (viewport − 4 gap) / 4 ⇒ thẻ được snap nằm giữa, hai thẻ kề
   hiện đủ, hai thẻ ngoài cùng bị cắt đúng một nửa. */
.duan-slider {
  --duan-gap: 10px;
  --duan-card: calc((100vw - 4 * var(--duan-gap)) / 4);
  position: relative;
  /* Tràn hết bề rộng viewport, bỏ giới hạn .container */
  margin-inline: calc(50% - 50vw);
}

.duan-gallery {
  display: flex;
  gap: var(--duan-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Chừa chỗ cho box-shadow của thẻ khi hover, tránh bị overflow cắt mất */
  padding-block: var(--space-4);
  margin-block: calc(-1 * var(--space-4));
}

.duan-gallery::-webkit-scrollbar { display: none; }

/* Thẻ có chiều cao cố định. Ảnh KHÔNG co lại khi hover — caption là lớp phủ
   trượt lên đè trên ảnh nên layout dải slider giữ nguyên, không nhảy. */
.duan-item {
  flex: 0 0 var(--duan-card);
  scroll-snap-align: center;
  position: relative;
  display: block;
  height: clamp(260px, 24vw, 408px);
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  background-color: transparent;
  transition: box-shadow var(--transition-base);
}

.duan-thumb {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
}

.duan-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

/* -------- Caption phủ trên ảnh, trượt lên khi hover -------- */
.duan-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-5) var(--space-4) var(--space-3);
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, .55) 40%,
    rgba(0, 0, 0, .92) 100%
  );
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.duan-caption h3 {
  color: var(--dsh-white);
  font-size: clamp(1.125rem, 1.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 var(--space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.duan-caption p {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, .8);
  font-size: clamp(.875rem, 1vw, 1rem);
  line-height: 1.1;
  margin: 0;
}

/* Icon pin: ép sang trắng cho hợp chữ trắng trên overlay tối */
.duan-caption p img {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  filter: brightness(0) invert(1);
}

.duan-item:hover,
.duan-item:focus-within {
  box-shadow: 0 1rem 2.5rem rgba(13, 37, 69, .14);
}

.duan-item:hover .duan-thumb img,
.duan-item:focus-within .duan-thumb img { transform: scale(1.04); }

.duan-item:hover .duan-caption,
.duan-item:focus-within .duan-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Tôn trọng người dùng tắt hiệu ứng chuyển động */
@media (prefers-reduced-motion: reduce) {
  .duan-item,
  .duan-caption,
  .duan-thumb img { transition: none; }
}

/* -------- Nút điều hướng slider -------- */
.duan-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .9);
  box-shadow: 0 .5rem 1.5rem rgba(13, 37, 69, .18);
  transition: background-color var(--transition-base);
}

.duan-nav:hover { background-color: var(--dsh-white); }
.duan-nav img { width: 24px; height: 24px; }
.duan-nav--prev { left: clamp(8px, 2vw, 32px); }
.duan-nav--prev img { transform: rotate(180deg); }
.duan-nav--next { right: clamp(8px, 2vw, 32px); }

/* Mobile (Figma op1-3-mobile): bỏ slider ngang, xếp các dự án theo cột dọc,
   caption (tên + địa điểm) luôn hiện dưới ảnh vì thiết bị cảm ứng không hover. */
@media (max-width: 767.98px) {
  /* Huỷ full-bleed: dải nằm gọn trong .container */
  .duan-slider { margin-inline: 0; }

  .duan-gallery {
    flex-direction: column;
    gap: clamp(1.5rem, 5vw, 2rem);
    overflow: visible;
    scroll-snap-type: none;
    padding-block: 0;
    margin-block: 0;
  }

  .duan-item {
    flex: 1 1 auto;
    height: auto;
    padding: 0;
    overflow: visible;
    background-color: transparent;
    box-shadow: none;
  }

  .duan-thumb {
    height: clamp(200px, 54vw, 260px);
  }

  /* Caption luôn hiển thị dưới ảnh (không overlay vì thiết bị cảm ứng không hover) */
  .duan-caption {
    position: static;
    opacity: 1;
    transform: none;
    background-image: none;
    padding: var(--space-3) 0 0;
  }

  .duan-caption h3 { color: var(--dsh-ink); white-space: normal; text-shadow: none; }
  .duan-caption p { color: rgba(0, 0, 0, .5); }
  .duan-caption p img { filter: none; }

  .duan-nav { display: none; }
}