/* ===========================================================
   Concept (general) — resort + tiêu đề brush dọc + ảnh + bản đồ
   Mobile-first → PC ở cuối file.
   =========================================================== */
.concept {
  position: relative;
  z-index: 2;                 /* TRÊN hero → trượt lên PHỦ dần banner đang bị ghim */
  overflow: clip;             /* clip thay hidden: vẫn cắt tràn nhưng KHÔNG tạo scroll-container → .concept__bg sticky ghim theo viewport */
  background: var(--color-bg);
  padding: 0 0 90px;
  /* mép trên tan mềm: khi Concept trồi lên đè banner, cạnh dẫn đầu blend mượt (không thành lằn cứng) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 110px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 110px);
}

/* nền resort — GHIM theo viewport (sticky) để nội dung trượt phủ lên trên đến hết section */
.concept__bg {
  position: sticky;
  top: 0; left: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);  /* đúng 1 màn → ghim full viewport khi cuộn trong section */
  z-index: 0;
}
.concept__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%; /* lấy dải núi/trời tối (giữa-trên) → giai đoạn 1 phủ tối như mẫu; chỉnh 25–50% để kéo khung nhìn lên/xuống */
}
.concept__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  bottom: -1px;
  /* trong suốt ở mép trên (blend mượt với mây FV) → tối ĐẬM SỚM để phủ tối rõ khi trồi lên */
  background: linear-gradient(180deg,
    rgba(18, 19, 18, 0) 0%,
    rgba(18, 19, 18, 0.65) 30%,
    rgba(18, 19, 18, 1) 75%);
}

.concept__inner {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--vh, 1vh) * -100); /* kéo lên phủ lên nền sticky (bù 100vh nền chiếm trong flow) → nội dung trượt trên nền */
  padding: 200px 20px 0;      /* chừa vùng mây đè + đỉnh banner (rộng/căn giữa: .l-inner) */
}

/* ---- Hero composition: tiêu đề brush dọc + 3 ảnh ---- */
.concept__hero {
  position: relative;
  height: 600px;
}
.concept__headline {
  position: absolute;
  top: 40px;
  left: 6px;
  right: auto;
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;      /* main bên phải, sub bên trái */
  align-items: flex-start;
  gap: 14px;
  color: var(--color-white);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}
.concept__headline-main,
.concept__headline-sub {
  display: flex;
  flex-direction: row-reverse;      /* cột đầu (世界初 / 心と体…) nằm phải */
  align-items: flex-start;
  font-family: var(--font-brush);
  font-weight: 400;
}
.concept__headline-main { gap: 6px; }
.concept__headline-sub  { gap: 5px; margin-top: 40px; }

.concept__headline-main span,
.concept__headline-sub span {
  writing-mode: vertical-rl;
  line-height: 1.05;
}
.concept__headline-main span { font-size: 30px; letter-spacing: 0.06em; }
.concept__headline-sub  span { font-size: 14px; letter-spacing: 0.05em; }

/* so le các cột (nhỉnh lên / nhỉnh xuống) */
.concept__headline-main span:nth-child(1) { margin-top: 0; } /* 世界初 総合的な */
.concept__headline-main span:nth-child(2) { margin-top: 0; } /* 癒しのリゾート — 2 cột ngang nhau */
.concept__headline-sub  span:nth-child(1) { margin-top: 0; }    /* 心と体を… (cao hơn) */
.concept__headline-sub  span:nth-child(2) { margin-top: 30px; } /* 五感で… (thấp hơn) */

.concept__photo {
  position: absolute;
  height: auto;
  object-fit: cover;
  border-radius: 1px;
  box-shadow: -10px 14px 44px rgba(0, 0, 0, 0.6);
}
.concept__photo--1 { width: 41%; aspect-ratio: 143 / 218; top: 0;    right: 0; }
.concept__photo--2 { width: 47%; aspect-ratio: 173 / 122; top: 60%;  left: 0; z-index: 1; }
.concept__photo--3 { width: 72%; aspect-ratio: 268 / 151; top: 75%;  left: 24%; z-index: 1; }

/* ---- Lead: tiêu đề + body ---- */
.concept__lead { margin-top: 40px; }
.concept__title {
  font-family: var(--font-serif);
  font-weight: 200;
  font-size: 25.47px;                 /* Figma SP: ExtraLight 25.47px */
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-white);
  padding: 8px 0 8px 20px;
  border-left: 0.5px solid var(--color-white);
  margin-bottom: 28px;
}
.concept__body p {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 14px;                    /* Figma SP: 14px / 2.3em */
  line-height: 2.3;
  color: var(--color-white);
}
.concept__body p + p { margin-top: 1.6em; }

/* ---- Bản đồ Nhật (kích thước thực 543×619) ---- */
.concept__map {
  position: relative;
  width: 262px;               /* SP: theo Figma */
  max-width: 100%;
  margin: 64px auto 0;
}
.concept__map img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* đường kẻ nối nhãn → marker (co giãn theo bản đồ) */
.concept__map-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* marker tam giác đỏ tại Aso (Kyushu) */
.concept__map-pin {
  position: absolute;
  left: 21%;
  top: 77%;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid #F08585;
  transform: translate(-50%, -50%);
}
/* nhãn dọc (trái Kyushu), nối vào marker */
.concept__map-label {
  position: absolute;
  left: -8%;
  top: 60%;
  display: flex;
  flex-direction: row-reverse;      /* 大自然阿蘇 (phải) / 健康の森 (trái) */
  align-items: flex-start;
  gap: 4px;
  font-family: var(--font-brush);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--color-white);
}
.concept__map-label span { writing-mode: vertical-rl; }
/* cột trái (健康の森) lệch xuống → so le */
.concept__map-label span:nth-child(2) { margin-top: 14px; }

/* ===========================================================
   PC (≥1024px)
   =========================================================== */
@media (min-width: 1024px) {
  .concept {
    padding: 0 0 140px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 220px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 220px);
  }
  .concept__inner {
    /* margin-top -100vh giữ nguyên (kế thừa từ base) → nội dung trượt phủ lên nền sticky */
    padding: 300px 40px 0;  /* chừa vùng trời của general-banner trước khi tới nội dung */
  }

  .concept__hero { height: 760px; }
  .concept__headline {
    top: -60px;
    right: 45%;
    gap: 22px;
  }
  .concept__headline-main { gap: 10px; }
  .concept__headline-sub  { gap: 8px; margin-top: 64px; }
  .concept__headline-main span { font-size: 44px; }
  .concept__headline-sub  span { font-size: 18px; }
  .concept__headline-main span:nth-child(1) { margin-top: 0; } /* 世界初 総合的な */
  .concept__headline-main span:nth-child(2) { margin-top: 0; } /* 癒しのリゾート — 2 cột ngang nhau */

  .concept__photo--1 { width: 277px; aspect-ratio: 277 / 156; top: 6%; left: 4%;  right: auto; }
  .concept__photo--2 { width: 300px; aspect-ratio: 302 / 247; top: -15%;  right: 0%;  left: auto; }
  .concept__photo--3 { width: 398px; aspect-ratio: 398 / 224; top: 41%; left: 60%;  right: auto; }

  /* lead: khối trái */
  .concept__lead {
    position: relative;
    max-width: 520px;
    margin-top: -200px;
  }
  .concept__title {
    font-size: 30px;                  /* Figma PC: ExtraLight 30px */
    padding: 10px 0 10px 24px;
    margin-bottom: 34px;
  }
  .concept__body p { font-size: 18px; line-height: 2.3; }

  /* bản đồ: góc phải-dưới, kích thước thực 543px */
  .concept__map {
    width: 543px;
    margin: -220px 0 0 auto;
  }
  .concept__map-label { font-size: 20px; }
  .concept__map-label span:nth-child(2) { margin-top: 20px; }
}