/* ==========================================================================
   Trang chi tiết công trình
   Skill: cong-trinh-module | taste-skill
   Namespace: mn-page-congtrinh-detail / mn-ct-detail-*
   Reuse classes from style-cong-trinh.css:
   .mn-page-congtrinh-title, .mn-page-congtrinh-meta-box,
   .mn-page-congtrinh-card, .mn-page-congtrinh-link, .mn-page-congtrinh-btn
   ========================================================================== */

.mn-page-congtrinh-detail {
  --ctd-blue: var(--main-color, #255daa);
  --ctd-navy: var(--main-color-deep, #012556);
  --ctd-red: var(--second-main-color, #b33830);
  --ctd-red-hover: var(--second-text-color, #c92e2e);
  --ctd-red-soft: #ff6b63;
  --ctd-bg-soft: #f5f8fc;
  --ctd-text: #1f2a37;
  --ctd-text-mute: #5a6a7a;
  --ctd-line: #e8edf2;
  --ctd-radius-card: 12px;
  --ctd-radius-box: 8px;
  --ctd-radius-ctl: 6px;
  --ctd-shadow: 0 4px 22px rgba(1, 37, 86, 0.08);
  --ctd-shadow-hover: 0 14px 34px rgba(1, 37, 86, 0.14);
  /* Alias cho các class tái sử dụng từ style-cong-trinh.css */
  --pct-blue: var(--main-color, #255daa);
  --pct-navy: var(--main-color-deep, #012556);
  --pct-red: var(--second-main-color, #b33830);
  --pct-red-hover: var(--second-text-color, #c92e2e);
  --pct-red-soft: #ff6b63;
  --pct-bg-soft: #f5f8fc;
  --pct-text: #1f2a37;
  --pct-text-mute: #5a6a7a;
  --pct-line: #e8edf2;
  --pct-radius-card: 12px;
  --pct-radius-box: 8px;
  --pct-radius-ctl: 6px;
  --pct-shadow: 0 4px 22px rgba(1, 37, 86, 0.08);
  --pct-shadow-hover: 0 14px 34px rgba(1, 37, 86, 0.14);
  font-family: var(--normal-font, "Inter", sans-serif);
  color: var(--ctd-text);
}

/* ===== Focus visible (a11y) ===== */
.mn-page-congtrinh-detail a:focus-visible,
.mn-page-congtrinh-detail button:focus-visible {
  outline: 2px solid var(--ctd-blue);
  outline-offset: 2px;
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.mn-ct-detail-hero {
  position: relative;
  padding: 56px 0 80px;
  background:
    linear-gradient(
      115deg,
      rgba(1, 37, 86, 0.94) 0%,
      rgba(1, 37, 86, 0.82) 45%,
      rgba(1, 37, 86, 0.55) 100%
    ),
    var(--ct-detail-hero-img) center 30% / cover no-repeat;
}

/* Reuse breadcrumb color rules from style-cong-trinh.css */
.mn-ct-detail-hero .mn-page-congtrinh-breadcrumb {
  margin-bottom: 16px;
}

.mn-ct-detail-hero-title {
  max-width: 820px;
  margin: 0 0 18px;
  font-family: var(--title-font, "Be Vietnam Pro", sans-serif);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.38;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.mn-ct-detail-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.mn-ct-detail-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.mn-ct-detail-hero-meta iconify-icon {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--ctd-red-soft);
}

/* ==========================================================================
   2. INTRO + SIDEBAR
   ========================================================================== */
.mn-ct-detail-intro {
  padding: 45px 0 0;
}

.mn-ct-detail-lead {
  margin-bottom: 28px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ctd-text-mute);
}

.mn-ct-detail-lead p {
  margin: 0;
}

.mn-ct-detail-lead strong {
  color: var(--ctd-navy);
}

.mn-ct-detail-cover {
  margin-bottom: 30px;
  border-radius: var(--ctd-radius-card);
  overflow: hidden;
  box-shadow: var(--ctd-shadow);
}

.mn-ct-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mn-ct-detail-body {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ctd-text);
}

.mn-ct-detail-body p {
  margin-bottom: 1rem;
}

.mn-ct-detail-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ctd-radius-box);
}

/* Sidebar */
.mn-ct-detail-sidebar {
  position: sticky;
  top: 90px;
}

.mn-ct-detail-sidebar-card {
  background-color: #ffffff;
  border: 1px solid var(--ctd-line);
  border-radius: var(--ctd-radius-card);
  padding: 24px;
  box-shadow: var(--ctd-shadow);
}

.mn-ct-detail-sidebar-title {
  margin: 0 0 18px;
  font-family: var(--title-font, "Be Vietnam Pro", sans-serif);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ctd-navy);
}

.mn-ct-detail-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}

.mn-ct-detail-sidebar-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mn-ct-detail-sidebar-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ctd-text-mute);
}

.mn-ct-detail-sidebar-value {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ctd-navy);
}

.mn-ct-detail-sidebar .mn-page-congtrinh-btn {
  width: 100%;
}

/* Related mini list in sidebar */
.mn-ct-detail-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mn-ct-detail-related-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.mn-ct-detail-related-list li a img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--ctd-radius-box);
  flex-shrink: 0;
}

.mn-ct-detail-related-list li a span {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ctd-navy);
}

.mn-ct-detail-related-list li a:hover span {
  color: var(--ctd-red);
}

/* ==========================================================================
   3. BEFORE / AFTER
   ========================================================================== */
.mn-ct-detail-ba {
  padding: 40px 0;
  background-color: #ffffff;
}

.mn-ct-detail-ba-item {
  position: relative;
  border-radius: var(--ctd-radius-card);
  overflow: hidden;
  box-shadow: var(--ctd-shadow);
}

.mn-ct-detail-ba-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mn-ct-detail-ba-label {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  background-color: var(--ctd-red);
  border-radius: var(--ctd-radius-ctl);
  width: max-content;
  height: max-content;
}

/* ==========================================================================
   5. TIMELINE
   ========================================================================== */
.mn-ct-detail-timeline {
  padding: 72px 0;
  background-color: var(--ctd-bg-soft);
}

.mn-ct-detail-timeline-list {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding-left: 20px;
}
.mn-ct-detail-timeline-list::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: var(--ctd-line);
  z-index: 0;
}

.mn-ct-detail-timeline-item {
  position: relative;
  padding: 0 0 32px 30px;
}

.mn-ct-detail-timeline-item:last-child {
  padding-bottom: 0;
}

.mn-ct-detail-timeline-item::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 4px;
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border: 4px solid var(--ctd-red);
  border-radius: 50%;
}

.mn-ct-detail-timeline-time {
  display: inline-block;
  margin-bottom: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--ctd-navy);
  border-radius: var(--ctd-radius-ctl);
}

.mn-ct-detail-timeline-body h3 {
  margin: 0 0 6px;
  font-family: var(--title-font, "Be Vietnam Pro", sans-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ctd-navy);
}

.mn-ct-detail-timeline-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ctd-text-mute);
}

/* ==========================================================================
   6. GALLERY
   ========================================================================== */
.mn-ct-detail-gallery {
  padding: 72px 0;
  background-color: #ffffff;
}

.mn-ct-detail-gallery-item {
  display: block;
  border-radius: var(--ctd-radius-card);
  overflow: hidden;
  box-shadow: var(--ctd-shadow);
}

.mn-ct-detail-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   7. RELATED PROJECTS
   ========================================================================== */
.mn-ct-detail-related {
  padding: 72px 0 90px;
  background-color: var(--ctd-bg-soft);
}

/* Uses .mn-page-congtrinh-card structure from list CSS */
.mn-ct-detail-related-swiper {
  padding-bottom: 44px;
}

.mn-ct-detail-related-swiper .swiper-slide {
  display: flex;
  height: auto;
}

.mn-ct-detail-related-swiper .mn-page-congtrinh-card {
  width: 100%;
}

.mn-ct-detail-related-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.mn-ct-detail-related-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  opacity: 1;
  background-color: var(--ctd-line);
}

.mn-ct-detail-related-pagination .swiper-pagination-bullet-active,
.mn-ct-detail-related-pagination .swiper-pagination-bullet.active {
  background-color: var(--ctd-red);
}

/* ==========================================================================
   Motion (tắt hoàn toàn khi prefers-reduced-motion)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .mn-ct-detail-cover img,
  .mn-ct-detail-ba-item img,
  .mn-ct-detail-gallery-item img {
    transition: transform 0.5s ease;
  }

  .mn-ct-detail-cover:hover img,
  .mn-ct-detail-ba-item:hover img,
  .mn-ct-detail-gallery-item:hover img {
    transform: scale(1.06);
  }

  .mn-ct-detail-sidebar-card,
  .mn-ct-detail-ba-item,
  .mn-ct-detail-gallery-item {
    transition: box-shadow 0.25s ease;
  }

  .mn-ct-detail-sidebar-card:hover,
  .mn-ct-detail-ba-item:hover,
  .mn-ct-detail-gallery-item:hover {
    box-shadow: var(--ctd-shadow-hover);
  }

}

@media (prefers-reduced-motion: reduce) {
  .mn-ct-detail-cover img,
  .mn-ct-detail-ba-item img,
  .mn-ct-detail-gallery-item img {
    transition: none !important;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
  .mn-ct-detail-hero {
    padding: 48px 0 70px;
  }

  .mn-ct-detail-hero-title {
    font-size: 34px;
  }

  .mn-ct-detail-intro {
    padding: 56px 0 0;
  }

  .mn-ct-detail-sidebar {
    position: static;
  }

  .mn-ct-detail-ba,
  .mn-ct-detail-timeline,
  .mn-ct-detail-gallery,
  .mn-ct-detail-related {
    padding: 56px 0;
  }
}

@media (max-width: 768px) {
  .mn-ct-detail-hero {
    padding: 40px 0 50px;
  }

  .mn-ct-detail-hero-title {
    font-size: 28px;
  }

  .mn-ct-detail-hero-meta {
    gap: 10px 18px;
  }

  .mn-ct-detail-hero-meta span {
    font-size: 12.5px;
  }

  .mn-ct-detail-lead {
    font-size: 15px;
  }

  .mn-ct-detail-sidebar-card {
    padding: 20px;
  }

  .mn-ct-detail-timeline-list {
    padding-left: 14px;
  }

  .mn-ct-detail-timeline-item {
    padding-left: 22px;
  }

  .mn-ct-detail-timeline-item::before {
    left: -9px;
    width: 16px;
    height: 16px;
  }
  .mn-ct-detail-intro {
    padding: 30px 0 0;
  }
  .mn-ct-detail-ba,
  .mn-ct-detail-timeline,
  .mn-ct-detail-gallery,
  .mn-ct-detail-related {
    padding: 30px 0;
  }
}

@media (max-width: 576px) {
  .mn-ct-detail-hero-title {
    font-size: 25px;
  }

  .mn-ct-detail-hero-meta span {
    font-size: 12px;
  }

  .mn-ct-detail-sidebar-title,
  .mn-ct-detail-timeline-body h3 {
    font-size: 15px;
  }

}

@media (max-width: 350px) {
  .mn-ct-detail-hero-title {
    font-size: 22px;
  }

}