/* =========================================================
   cruise.css — สไตล์เฉพาะหน้า "การล่องเรือ" (cruise.php)
   ใช้ต่อจาก assets/css/style.css เดิม (ใช้ตัวแปรสี --navy / --teal ร่วมกัน)
   วิธีใช้: เพิ่มบรรทัดนี้ใน includes/header.php ต่อจากลิงก์ style.css
   <link rel="stylesheet" href="<?php echo asset('assets/css/cruise.css'); ?>">
   ========================================================= */

/* ---------- Hero ---------- */
.cruise-hero{
  position:relative;
  max-width:820px;
  padding-top:64px;
  padding-bottom:28px;
}
.cruise-hero .eyebrow{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:12.5px;
  font-weight:600;
  color:var(--teal-light,#7fb8c9);
  background:rgba(127,184,201,.12);
  border:1px solid rgba(127,184,201,.3);
  padding:6px 16px;
  border-radius:999px;
  margin-bottom:18px;
}
.cruise-hero h1{
  background:linear-gradient(90deg,#ffffff 0%,#cfe9f0 60%,var(--teal-light,#7fb8c9) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.cruise-hero .tagline{
  margin-top:4px;
}

/* คลื่นตกแต่งใต้ hero — วาดด้วย CSS ล้วน ไม่ต้องใช้ไฟล์รูป */
.cruise-wave{
  height:46px;
  max-width:1080px;
  margin:0 auto 8px;
  background:
    radial-gradient(circle at 10px -6px, transparent 12px, var(--teal,#3f8ea3) 13px, transparent 14px) 0 0/40px 40px repeat-x,
    linear-gradient(90deg, transparent, transparent);
  opacity:.35;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}

/* ---------- Route cards ---------- */
.cruise-route-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap,24px);
  max-width:1080px;
  margin:0 auto 8px;
}
.cruise-route-card{
  position:relative;
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:28px 24px 26px;
  overflow:hidden;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.cruise-route-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg, var(--teal,#3f8ea3), var(--teal-light,#7fb8c9));
}
.cruise-route-card__index{
  position:absolute;
  top:14px;
  right:20px;
  font-size:2.4rem;
  font-weight:800;
  color:rgba(255,255,255,.08);
  line-height:1;
  user-select:none;
}
.cruise-route-card__flags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
  position:relative;
  z-index:1;
}
.cruise-flag{
  font-size:.78rem;
  font-weight:600;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  padding:5px 11px;
  border-radius:999px;
  white-space:nowrap;
}
.cruise-route-card__title{
  font-size:1.15rem;
  font-weight:700;
  line-height:1.4;
  margin-bottom:12px;
  position:relative;
  z-index:1;
}
.cruise-route-card__text{
  font-size:.9rem;
  color:#cfe4ea;
  line-height:1.75;
  margin-bottom:20px;
  position:relative;
  z-index:1;
}
.cruise-route-card__link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.88rem;
  font-weight:700;
  color:var(--teal-light,#7fb8c9);
  position:relative;
  z-index:1;
}
.cruise-route-card__link span{transition:transform .2s ease;}
.cruise-route-card:hover{
  transform:translateY(-6px);
  border-color:rgba(127,184,201,.45);
  box-shadow:0 18px 36px rgba(0,0,0,.28);
}
.cruise-route-card:hover .cruise-route-card__link span{transform:translateX(4px);}

/* ---------- พื้นที่ภาพใหญ่ตรงกลาง ---------- */
.cruise-feature-photo{
  position:relative;
  max-width:1080px;
  aspect-ratio:21/9;
  margin:56px auto;
  border-radius:24px;
  overflow:hidden;
  background-color:rgba(255,255,255,.06);   /* สีพื้นหลังสำรอง ระหว่างที่ยังไม่ใส่ภาพ */
  background-size:cover;
  background-position:center;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.1);
  display:flex;
  align-items:flex-end;
}
.cruise-feature-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,29,44,0) 45%, rgba(10,29,44,.6) 100%);
  pointer-events:none;
}
.cruise-feature-photo__caption{
  position:relative;
  z-index:1;
  margin:0;
  padding:22px 28px;
  font-weight:700;
  font-size:1.05rem;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
@media (max-width:860px){
  .cruise-feature-photo{aspect-ratio:4/3;margin:40px auto;}
}
@media (max-width:560px){
  .cruise-feature-photo{aspect-ratio:1/1;}
  .cruise-feature-photo__caption{font-size:.95rem;padding:16px 18px;}
}

/* ---------- Closing highlight banner ---------- */
.cruise-highlight{
  max-width:900px;
  margin:56px auto 8px;
  padding:44px 32px;
  text-align:center;
  border-radius:22px;
  background:linear-gradient(135deg, rgba(63,142,163,.22), rgba(13,36,54,.6));
  border:1px solid rgba(127,184,201,.25);
}
.cruise-highlight .block-heading{margin-top:0;}
.cruise-highlight .cta-button-block{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.cta-button-block a.cruise-btn-outline{
  background:transparent;
  border:1.5px solid var(--teal-light,#7fb8c9);
  color:#fff;
}
.cta-button-block a.cruise-btn-outline:hover{
  background:rgba(127,184,201,.15);
}

/* ---------- Responsive ---------- */
@media (max-width:1024px) and (min-width:861px){
  .cruise-route-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  .cruise-route-grid{grid-template-columns:1fr;}
  .cruise-hero{padding-top:40px;}
  .cruise-highlight{padding:34px 22px;margin-top:40px;}
}
@media (max-width:560px){
  .cruise-highlight .cta-button-block{flex-direction:column;align-items:stretch;}
}