/* ==========================================================================
   Page: Journey — Hành Trình Dự Án
   Sections: Hero · HowItWorks (5 phases) · CaseStudy · Contact Form
   Values extracted from src/Wihub-v1.1/src/journey.html (Desktop frame ≥1280)
   ========================================================================== */


/* --------------------------------------------------------------------------
   SECTION: Hero — Hành trình kiến tạo giá trị
   v1.1 #Background_Image_1{padding:320px 48px 60px; row-gap:170px}
        #Highlight_Title_1 46px/130%/800 white
        #Breadcrumb_Link_1 14px/150%/500 white
        Gradient overlay tương tự Competence (dùng giá trị 88deg
        linear-gradient(88deg,#17144db3 35.7%,#11054300 99.3%))
   -------------------------------------------------------------------------- */
.journey-hero {
  position: relative;
  width: 100%;
  min-height: 480px;          /* v1.1 #Background_Image_1 total height 480 (pad 320/60) */
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background-color: var(--color-brand-dark);
}

.journey-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;          /* v1.1 #__220 opacity .5 (ảnh nền tối nửa) */
  z-index: 0;
}

.journey-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* v1.1 #__12: gradient TRÁI→PHẢI, tím đậm bên trái (vùng chữ) → trong suốt bên phải */
  background-image: linear-gradient(88deg,
    rgba(23, 20, 77, 0.70) 35.7%,
    rgba(17, 5, 67, 0.00) 99.3%);
  pointer-events: none;
}

.journey-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: 320px;        /* v1.1 #Background_Image_1 padding 320px 48px 60px */
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 170px;                /* v1.1 #Background_Image_1 row-gap:170px (breadcrumb → title) */
}

.journey-hero__breadcrumb {
  display: flex;
  align-items: center;
}

.journey-hero__breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  transition: opacity var(--transition-base);
  &:hover { opacity: 0.85; }
}

.journey-hero__breadcrumb-icon {
  display: block;
  flex-shrink: 0;
  width: 16px;                 /* v1.1 #Breadcrumb_Icon_1 16×16 */
  height: 16px;
  transform: rotate(180deg);   /* v1.1: mũi tên ← (back) */
}

.journey-hero__title {
  color: var(--color-white);
  font-family: var(--font-family);
  font-size: 46px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
  max-width: 1170px;
}

@media (max-width: 991.98px) {
  .journey-hero { min-height: 420px; }
  .journey-hero__inner {
    padding-top: 160px;
    padding-bottom: 40px;
    gap: 20px;
  }
}
@media (max-width: 575.98px) {
  .journey-hero { min-height: 600px; }   /* v1.1 mobile: hero cao ~600 (đo Docker 390), title sát đáy */
  .journey-hero__inner { padding-top: 120px; padding-bottom: 36px; }
}


/* --------------------------------------------------------------------------
   SECTION: HowItWorks — Hành trình 5 Giai Đoạn
   v1.1 white section, padding 120px 48px (desktop), row-gap 60px
        Heading: section-title 46px/130%/800 (em accent gradient)
        Subtitle: 18px/160%/400 secondary
        Phase grid: row-gap 32px between media & content; 80px between phases
        Phase video: border 2px white, border-radius 12px, height 250px,
                     shadow 0 .5px 2px #243f611f, 0 2px 12px #243f611c
        Phase badge "Giai đoạn N" (v1.1 Whiteboard id):
          background:var(--Brand-Dark); border-radius 40px 10px;
          padding 8px 20px; width:min-content; row-gap 40px
          Text: 20px/150%/700 white
        Phase title: 26px/150%/700 var(--Text-Main)
        Phase desc: 16px/150%/400 var(--Text-Secondary)
   -------------------------------------------------------------------------- */
.journey-howitworks {
  background-color: var(--color-white);
  padding-top: 120px;
  padding-bottom: 120px;
}

.journey-howitworks__header {
  max-width: 1170px;
  margin-bottom: 60px;
}

.journey-howitworks__title {
  font-family: var(--font-family);
  font-size: 46px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 16px;
  color: var(--color-text-main);
  & em {
    font-style: normal;
    background-image: linear-gradient(93.7deg, #6598ea 29.5%, #1b5bd2 70.7%);  /* v1.1 #__225 93.7deg */
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}

.journey-howitworks__desc {
  color: var(--color-text-secondary);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  max-width: 800px;   /* v1.1 #Subtitle_1 max-width 800 */
}


/* --- Phase list ----------------------------------------------------------- */
.journey-phases {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: phase;
}

/* v1.1: timeline 3 cột — media (trái) | chấm+đường nối (giữa) | text (phải) */
.journey-phase {
  position: relative;
  display: flex;
  gap: 48px;                 /* v1.1 #Phase_9 grid-column-gap:48px */
  align-items: start;        /* v1.1 #Phase_9 align-items:start (cột timeline tự stretch qua align-self) */
  /* v1.1 #HowItWorks_Desktop row-gap:0 → các phase DÍNH nhau; mỗi cột timeline align-self:stretch cao bằng
     phase (500), đường #Rectangle height:100% → các đoạn nối liên tiếp 1→5. */
}

.journey-phase__media {
  flex: 1 1 250px;           /* v1.1 #Video_container_9 flex-grow:1; flex-basis:250px (CỘT video = cột content) */
  min-width: 250px;          /* v1.1 #Video_container_9 min-width:250px */
  align-self: flex-start;    /* khung video pin ở đỉnh, không kéo cao theo phase (#_5Phase_Video max-height:350) */
  border: 4px solid var(--color-white);   /* v1.1 #_5Phase_Video_1_9 border 4px white */
  border-radius: 16px;                     /* v1.1 #_5Phase_Video_1_9 border-radius:16px */
  overflow: hidden;
  background-color: #e5edf5;
  box-shadow: 0 0.5px 2px rgba(36, 63, 97, 0.12),
              0 2px 12px rgba(36, 63, 97, 0.11);
}

/* Timeline giữa = v1.1 #Container_43 (width:28px; align-self:stretch; column; row-gap:0;
   justify-content:flex-start; align-items:center). Bên trong:
     · #Circle_container_9 (padding:4px) > #Ellipse_20_11 (chấm 10px)  → chấm ở TRÊN CÙNG
     · #Container_44 (flex-grow:1; height:100%) > #Rectangle_9 (width:1px; height:100%) → đường lấp phần còn lại
   Mô phỏng: dot = phần tử thật ở top; line = pseudo chạy từ dưới circle-container (18px = pad4+dot10+pad4)
   xuống đáy phase. Mỗi phase (kể cả cuối) đều có đoạn line này → v1.1 vẽ line ở MỌI phase. */
.journey-phase__timeline {
  flex: 0 0 28px;            /* v1.1 #Container_43 width:28px; min-width:28px */
  min-width: 28px;
  position: relative;
  align-self: stretch;       /* v1.1 #Container_43 align-self:stretch → cao bằng phase */
}
.journey-phase__timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 18px;                 /* dưới #Circle_container (padding4 + dot10 + padding4) */
  bottom: 0;                 /* #Container_44 flex-grow:1 + #Rectangle height:100% → chạm đáy phase */
  width: 1px;                /* v1.1 #Rectangle width:1px */
  background-color: var(--color-border-divider);   /* var(--Border-Divider-Divider) = #c8d2e1 */
}
/* node (chấm) = v1.1 #Ellipse_20_11: 10px, ở đầu cột (sau #Circle_container padding 4px) */
.journey-phase__dot {
  position: absolute;
  left: 50%;
  top: 4px;                  /* v1.1 #Circle_container padding:4px → chấm sát đỉnh */
  transform: translateX(-50%);
  width: 10px;               /* v1.1 #Ellipse_20_11 height:10px; aspect-ratio:1 */
  height: 10px;
  border-radius: 50%;        /* v1.1 #Ellipse_20_11 border-radius:50% */
  background-color: var(--color-border-divider);   /* var(--Border-Divider-Divider) = #c8d2e1 */
  z-index: 1;
}

.journey-phase__video {
  display: block;
  width: 100%;
  height: 342px;            /* v1.1 #__228 video inner height 342 */
  object-fit: cover;
}

.journey-phase__content {
  flex: 1 1 250px;          /* v1.1 #Phase_container flex-grow:1; flex-basis:250px (content RỘNG hơn video) */
  min-width: 250px;         /* v1.1 #Phase_container min-width:250px */
  min-height: 500px;        /* v1.1 #Phase_container height:500px → định chiều cao phase → đường nối đều + liền mạch */
  display: flex;
  flex-direction: column;
  gap: 12px;                /* v1.1 #Phase_text_container gap 12 */
  padding-top: 4px;
}

.journey-phase__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  padding: 8px 20px;
  background-color: var(--color-brand-dark);
  color: var(--color-white);
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 40px 10px;
  margin-bottom: 0;          /* v1.1: text container gap 12 uniform — no extra badge gap */
}

.journey-phase__title {
  color: var(--color-text-main);
  font-family: var(--font-family);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.journey-phase__desc {
  color: var(--color-text-secondary);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  & + .journey-phase__desc { margin-top: 12px; }
}

@media (max-width: 991.98px) {
  .journey-howitworks { padding-top: 80px; padding-bottom: 80px; }
  .journey-howitworks__header { margin-bottom: 40px; }
  /* TIMELINE DỌC (v1.1 mobile): rail dot+line bên TRÁI | nội dung phải; dot thẳng badge, line LIỀN */
  .journey-phases { gap: 0; }
  .journey-phase {
    display: grid;
    grid-template-columns: 24px 1fr;   /* rail | nội dung */
    gap: 24px 32px;                    /* v1.1: row-gap 24 (badge→video→title→desc) · column-gap 32 (rail↔nội dung) */
    padding-bottom: 80px;              /* v1.1 #Phase_text_container padding-bottom 80 — line chạy qua để liền */
  }
  .journey-phase:last-child { padding-bottom: 0; }
  .journey-phase__timeline {
    grid-column: 1;
    grid-row: 1;
    position: static;                  /* hủy relative desktop — chấm + đường nối vẽ absolute theo PHASE */
  }
  .journey-phase__timeline::before { content: none; }   /* tắt đường nối desktop khi ở mobile */
  /* v1.1 tablet (đo Docker 768): thứ tự badge → VIDEO → title → desc.
     content display:contents để tách badge lên trên video (CSS-only) */
  .journey-phase__content { display: contents; }
  .journey-phase__badge  { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  .journey-phase__media  { grid-column: 2; grid-row: 2; max-width: 589px; border-width: 2px; border-radius: 12px; }  /* v1.1 mobile/tablet: viền 2px, radius 12 */
  .journey-phase__title,
  .journey-phase__desc,
  .journey-phase__link   { grid-column: 2; }
  .journey-phase__desc + .journey-phase__desc { margin-top: 0; }   /* grid row-gap 24 lo khoảng cách → bỏ margin chồng */
  .journey-phase__video { height: 250px; }   /* v1.1 #_5Phase_Video mobile/tablet height 250 */
  /* Đường nối DỌC: absolute trên PHASE (position relative) → chạy SUỐT chiều cao phase,
     xuyên padding-bottom 40 → chạm phase kế (parent gap 0) → LIỀN MẠCH, không đứt. */
  .journey-phase::before {
    content: "";
    position: absolute;
    left: 12px;                        /* tâm cột rail 24px */
    top: 0;
    bottom: -40px;
    width: 1px;
    background-color: var(--color-border-divider);
    transform: translateX(-50%);
  }
  .journey-phase:first-child::before { top: 14px; }                 /* phase đầu: bắt đầu từ chấm */
  .journey-phase:last-child::before  { bottom: 0; }                  /* phase cuối: line chạy HẾT chiều cao phase (xuống hết giai đoạn 5) — khớp desktop */
  /* chấm: absolute theo phase, tâm rail, thẳng hàng badge */
  .journey-phase__dot { top: 14px; left: 12px; }
}
@media (max-width: 575.98px) {
  .journey-howitworks { padding-top: 56px; padding-bottom: 56px; }
  .journey-howitworks__desc { font-size: 16px; }
  .journey-phases { gap: 0; }   /* cách phase = padding-bottom (để line chạy qua liền) */
  /* v1.1 mobile GIỮ NGUYÊN typography phase (badge 20 · title 26 · desc 16) + video 250 — KHÔNG ép nhỏ */
}

/* CaseStudy section + carousel + card → main.css (shared .casestudy* / .casestudy-card*). */

/* --------------------------------------------------------------------------
   SECTION: CaseStudy — override RIÊNG cho journey
   v1.1 #Header_7 align-items:center → tiêu đề "Dự Án WiHub" + subtitle CĂN GIỮA
   ở MỌI breakpoint (desktop · tablet · mobile).
   Chỉ journey (index dùng chung component nhưng giữ căn trái).
   -------------------------------------------------------------------------- */
.casestudy__header { text-align: center; }

/* Contact section CSS → main.css (shared, 1 nguồn) */

/* ==========================================================================
   WORDPRESS BRIDGE — icon mũi tên nút điều hướng carousel Dự Án WiHub
   (inline SVG trong nút bị trình soạn thảo loại bỏ khi lưu page content,
   nên vẽ lại bằng CSS mask, màu theo currentColor như thiết kế gốc)
   ========================================================================== */
.casestudy__control::before {
  content: "";
  display: block;
  width: 15px;
  height: 13px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.casestudy__control--prev::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 13'%3E%3Cpath d='M15 6.25a.63.63 0 01-.63.63H2.13l4.56 4.56a.63.63 0 11-.88.88L.18 6.69a.63.63 0 010-.88L5.81.18a.63.63 0 11.88.88L2.13 5.62H14.38a.63.63 0 01.62.63z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 13'%3E%3Cpath d='M15 6.25a.63.63 0 01-.63.63H2.13l4.56 4.56a.63.63 0 11-.88.88L.18 6.69a.63.63 0 010-.88L5.81.18a.63.63 0 11.88.88L2.13 5.62H14.38a.63.63 0 01.62.63z' fill='%23000'/%3E%3C/svg%3E");
}
.casestudy__control--next::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 13'%3E%3Cpath d='M14.82 6.69L9.19 12.32a.62.62 0 11-.88-.88l4.55-4.57H.62a.62.62 0 010-1.25h12.25L8.31 1.07a.62.62 0 11.88-.88L14.82 5.81a.62.62 0 010 .88z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 13'%3E%3Cpath d='M14.82 6.69L9.19 12.32a.62.62 0 11-.88-.88l4.55-4.57H.62a.62.62 0 010-1.25h12.25L8.31 1.07a.62.62 0 11.88-.88L14.82 5.81a.62.62 0 010 .88z' fill='%23000'/%3E%3C/svg%3E");
}
/* Nếu inline SVG được thêm lại vào nút thì ẩn icon CSS, tránh mũi tên đôi */
.casestudy__control:has(svg)::before { display: none; }