/*
 * Theme Name:  Snera
 * Theme URI:   https://sneragroup.vn
 * Description: Snera Group — standalone WordPress theme (ported from Flatsome child). Full-scroll landing templates, shared header/footer, Max Mega Menu ready.
 * Author:      Snera Dev
 * Version:     1.0.0
 * Requires PHP: 7.4
 * Text Domain: snera
 */

/* ================================================================
   TABLE OF CONTENTS
   ----------------------------------------------------------------
   1.  Design Tokens (CSS Variables)
   2.  Typography
   3.  Global / Utilities
   4.  Buttons
   5.  Header — Desktop
   6.  Header — Mobile
   7.  Mobile Menu
   8.  Footer
   9.  Homepage
  10.  Why Vietnam Page
  11.  Our Philosophy Page
  12.  Our Team Page
  13.  Contact Page
  14.  Press & Blogs Page
  15.  Product Pages (Railway, Retreat, SDeli…)
  16.  Impress / Stats Cards
  17.  Partnership Pathways
  18.  Responsive — max 767px
   ================================================================ */


/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */
:root {
  /* Brand colours */
  --color-forest:      #152B1C;
  --color-gold:        #B18F4F;
  --color-gold-light:  rgba(177, 143, 79, 0.05);
  --color-white:       #ffffff;
  --color-border:      #dedede;

  /* Typography */
  --font-display: 'MyFont', sans-serif;
  --font-body:    'Lexend', sans-serif;

  /* Spacing */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  80px;

  /* Header */
  --header-height: 70px;

  /* Border radius */
  --radius-pill: 50px;
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   30px;
}


/* ================================================================
   2. TYPOGRAPHY
   ================================================================ */
@font-face {
  font-family: 'MyFont';
  src: url('assets/fonts/BeautiqueDisplay-Regular.woff') format('woff');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

.heading-2,
.sub-tittle {
  font-family: var(--font-display);
  font-size:   3rem;
  font-weight: 300;
  color:       var(--color-forest);
}

h1.page-title {
  font-family: var(--font-display);
  font-size:   3em;
  font-weight: 400 !important;
}

h2.page-subtitle {
  font-family:    var(--font-display);
  font-size:      2em;
  font-weight:    400 !important;
  padding-top:    var(--space-lg);
  padding-bottom: var(--space-md);
}


/* ================================================================
   3. GLOBAL / UTILITIES
   ================================================================ */
/* Constrain content width 
.container,
.row {
  max-width: 89vw !important;
}
*/
/* WhatsApp popup label */
.wa__btn_popup_txt { display: none !important; }

/* Home hero height */
.home-hero { height: 100vh !important; }


/* ================================================================
   4. BUTTONS
   ================================================================ */
a.btn-outline,
.btn-outline {
  display:       inline-block;
  align-self:    flex-start;
  background:    var(--color-white);
  border:        1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  padding:       12px 30px;
  color:         var(--color-forest);
  font-size:     13px;
  font-weight:   400;
  line-height:   1.5;
  text-decoration: none;
  transition:    background 0.2s ease, color 0.2s ease;
}

a.btn-outline:hover,
.btn-outline:hover {
  background: var(--color-gold);
  color:      var(--color-white);
}

/* Button alignment utilities — thêm class vào thẻ <a> */
.btn-outline--left   { align-self: flex-start; margin-left: 0;    margin-right: auto; }
.btn-outline--center { align-self: center;      margin-left: auto; margin-right: auto; }
.btn-outline--right  { align-self: flex-end;    margin-left: auto; margin-right: 0;   }


/* ================================================================
   5. HEADER — DESKTOP
   ================================================================ */

/* Màu chữ menu: KHÔNG ép ở theme — theo cài đặt trong Max Mega Menu.
   (Đã bỏ các rule color trắng !important từng đè lên MMM.) */

/* Mega menu dropdown styling */
#mega-menu-wrap-primary
  #mega-menu-primary
  > li.mega-menu-flyout
  ul.mega-sub-menu {
  border-radius:    var(--radius-sm) !important;
  background-color: rgba(241, 241, 241, 0.71) !important;
}

#mega-menu-wrap-primary
  #mega-menu-primary
  > li.mega-menu-flyout
  ul.mega-sub-menu
  li.mega-menu-item
  a.mega-menu-link {
  background: none !important;
}


/* ================================================================
   6. HEADER — MOBILE
   ================================================================ */
@media (max-width: 768px) {
  /* Layout: logo left, hamburger right */
  .header-inner {
    display:         flex !important;
    flex-direction:  row !important;
    flex-wrap:       nowrap !important;
    justify-content: space-between !important;
    align-items:     center !important;
    width:           100% !important;
  }

  #logo {
    order:        0 !important;
    flex:         0 0 auto !important;
    margin-right: auto !important;
  }

  /* Hide desktop nav cols */
  .header-inner > .flex-col.hide-for-medium { display: none !important; }

  /* Hide empty right col */
  .header-inner > .flex-col.show-for-medium.flex-right { display: none !important; }

  /* Hamburger col — push right */
  .header-inner > .flex-col.show-for-medium.flex-left {
    display:         flex !important;
    order:           2 !important;
    flex:            0 0 auto !important;
    margin-left:     auto !important;
    margin-right:    0 !important;
    justify-content: flex-end !important;
  }

  /* Hamburger pill: 24×24 + 8px padding */
  .header-inner > .show-for-medium.flex-left .nav-icon > a {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           24px !important;
    height:          24px !important;
    padding:         8px !important;
    box-sizing:      content-box !important;
    border-radius:   6px !important;
    box-shadow:      none !important;
    transition:      background 0.2s ease, color 0.2s ease;
  }

  /* Hero (header giờ có nền trắng): icon màu forest.
     LƯU Ý: không đè background lên thẻ <i> — i.icon-menu dùng background
     làm VẠCH GIỮA của hamburger (đè transparent sẽ chỉ còn 2 vạch). */
  #header.has-transparent.transparent .show-for-medium.flex-left .nav-icon > a {
    color:      var(--color-forest) !important;
    background: transparent !important;
  }
  #header.has-transparent.transparent .show-for-medium.flex-left .nav-icon > a i {
    color: var(--color-forest) !important;
  }

  /* Opaque sections: dark icon on white pill */
  #header:not(.transparent) .show-for-medium.flex-left .nav-icon > a {
    color:      var(--color-forest) !important;
    background: var(--color-white) !important;
    box-shadow: none !important;
  }

  #header:not(.transparent) .show-for-medium.flex-left .nav-icon > a i {
    color: var(--color-forest) !important;
  }

  /* 3 vạch thu theo nút: 14px × 2px, giãn cách 5px */
  .header-inner > .show-for-medium.flex-left i.icon-menu,
  .header-inner > .show-for-medium.flex-left i.icon-menu::before,
  .header-inner > .show-for-medium.flex-left i.icon-menu::after { width: 14px !important; }
  .header-inner > .show-for-medium.flex-left i.icon-menu::before { top: -5px !important; }
  .header-inner > .show-for-medium.flex-left i.icon-menu::after  { top:  5px !important; }

  /* ================================================================
     LANGUAGE SWITCHER (Polylang) — bên trái hamburger
     ================================================================ */
  .header-inner > .flex-col.show-for-medium.flex-left {
    align-items: center !important;
    gap:         10px;
  }

  .snera-lang          { position: relative; display: flex; align-items: center; }
  .snera-lang-toggle {
    display:        flex;
    align-items:    center;
    gap:            5px;
    height:         24px;
    padding:        0 7px;
    background:     transparent;
    border:         1px solid currentColor;
    border-radius:  4px;
    color:          var(--color-forest, #152B1C);
    font-size:      12px;
    line-height:    1;
    letter-spacing: 0.04em;
    cursor:         pointer;
    transition:     color 0.2s ease, border-color 0.2s ease;
  }
  .snera-lang-caret {
    width: 0; height: 0;
    border-left:  3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top:   4px solid currentColor;
    transition:   transform 0.2s ease;
  }
  .snera-lang.is-open .snera-lang-caret { transform: rotate(180deg); }

  .snera-lang-list {
    position:      absolute;
    top:           calc(100% + 6px);
    right:         0;
    min-width:     100%;
    margin:        0;
    padding:       4px 0;
    list-style:    none;
    background:    var(--color-white, #fff);
    border-radius: 6px;
    box-shadow:    0 4px 14px rgba(0, 0, 0, 0.15);
    opacity:       0;
    visibility:    hidden;
    transform:     translateY(-4px);
    transition:    opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index:       60;
  }
  .snera-lang.is-open .snera-lang-list { opacity: 1; visibility: visible; transform: none; }
  .snera-lang-list li { margin: 0; }
  .snera-lang-item {
    display:         block;
    padding:         7px 14px;
    font-size:       12px;
    line-height:     1;
    letter-spacing:  0.04em;
    color:           var(--color-forest, #152B1C);
    text-decoration: none;
    white-space:     nowrap;
  }
  .snera-lang-item.is-current { font-weight: 600; opacity: 0.5; }

  /* Hero trong suốt: chữ trắng như hamburger */
  #header.snera-transparent-hero.snera-at-hero .snera-lang-toggle { color: #fff; }
}


/* ================================================================
   7. MOBILE MENU
   ================================================================ */
@media (max-width: 768px) {
  :root { --header-height: 70px; }

  /* Panel position */
  #main-menu {
    top:    var(--header-height) !important;
    height: calc(100dvh - var(--header-height)) !important;
  }

  .nav-overlay-bg { top: var(--header-height) !important; }

  /* All nav links */
  .off-canvas .nav-vertical li > a,
  .off-canvas .nav li > a,
  #main-menu .nav li > a {
    display:         flex !important;
    flex:            0 0 auto !important;
    width:           auto !important;
    max-width:       calc(100% - 48px) !important;
    text-transform:  none !important;
    text-align:      center !important;
    justify-content: center !important;
    letter-spacing:  0 !important;
    font-size:       16px !important;
    font-weight:     400 !important;
    padding:         16px 0 !important;
  }

  /* Li items: flex + centered */
  .off-canvas .nav li,
  #main-menu .nav li {
    display:         flex !important;
    flex-wrap:       wrap !important;
    align-items:     center !important;
    justify-content: center !important;
    position:        relative !important;
  }

  /* Submenu toggle button — inline next to text */
  .off-canvas .nav li > button.toggle,
  #main-menu .nav li > button.toggle {
    position:        static !important;
    flex:            0 0 auto !important;
    width:           24px !important;
    height:          auto !important;
    padding:         0 !important;
    margin-left:     4px !important;
    background:      transparent !important;
    border:          none !important;
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    transform:       none !important;
    top:             auto !important;
    right:           auto !important;
  }

  /* Invisible spacer to visually balance toggle button */
  .off-canvas .nav li.has-child::before,
  .off-canvas .nav li.menu-item-has-children::before,
  #main-menu .nav li.has-child::before,
  #main-menu .nav li.menu-item-has-children::before {
    content:     '' !important;
    display:     inline-flex !important;
    width:       28px !important;
    flex-shrink: 0 !important;
  }

  /* Dividers */
  .off-canvas .nav > li,
  #main-menu .nav > li {
    border-bottom: 1px solid rgba(21, 43, 28, 0.05) !important;
  }

  .off-canvas .nav > li:last-child,
  #main-menu .nav > li:last-child {
    border-bottom: none !important;
  }

  /* Submenu full width */
  .off-canvas .nav li > ul.sub-menu,
  #main-menu .nav li > ul.sub-menu {
    flex:  0 0 100% !important;
    width: 100% !important;
  }
}


/* ================================================================
   8. FOOTER
   ================================================================ */
#footer {
  background-image:    url(assets/images/footer-background.png);
  background-color:    var(--color-gold-light);
  background-repeat:   no-repeat;
  background-size:     cover;
  background-position: right;
}

#footer .section { padding-bottom: 0 !important; }

.absolute-footer       { display: none; }
.absolute-footer-link  { list-style: none; padding: 0; margin: 0; }
.absolute-footer-link li { display: inline; }

.footer-copyright {
  border-top:  1px solid var(--color-border);
  padding-top: 15px;
}

.footer-copyright .col { padding-bottom: 15px !important; }

/* Footer info block */
.snera-footer  { display: flex; flex-direction: column; }

.footer-logo img {
  max-width:     250px;
  margin-bottom: 2em;
}

.footer-info   { display: flex; flex-direction: column; gap: 18px; }
.info-row      { display: flex; align-items: center; }
.info-icon     { width: 24px; height: 24px; margin-right: 10px; flex-shrink: 0; }
.info-contact  { gap: var(--space-lg); }
.contact-item  { display: flex; align-items: center; }

/* Footer links — desktop only */
@media (min-width: 768px) {
  .footer-link .col-inner {
    display:         flex;
    justify-content: center;
    gap:             80px;
    padding-left:    0;
  }

  .footer-link ul {
    list-style:     none;
    padding:        0;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            32px;
  }

  .footer-link li {
    font-weight:   700;
    font-size:     1.125em;
    margin-bottom: 0 !important;
  }
}


/* ================================================================
   9. HOMEPAGE
   ================================================================ */

/* Partnership pathways */
.partnership_pathways {
  background-image:  url(assets/images/1000004284.png);
  background-size:   cover;
  background-repeat: no-repeat;
}

.partnership span {
  display:     inline-block;
  border-left: 2px solid var(--color-gold);
  padding-left: 14px;
  clip-path:   inset(0 100% 0 0);
  transition:  none;
  font-size:   3em;
  font-family: var(--font-display);
  color:       var(--color-forest);
}

.partnership_pathways.is-visible .partnership span {
  animation: wipeIn 0.8s cubic-bezier(0.77, 0, 0.18, 1) 0.5s forwards;
}

@keyframes wipeIn {
  to { clip-path: inset(0 0% 0 0); }
}

/* Partnership steps */
.step-1,
.step-2 {
  display:         flex;
  flex-direction:  row;
  justify-content: space-between;
}

.step-3 {
  display:         flex;
  flex-direction:  row;
  justify-content: space-between;
  align-items:     flex-end;
}

.step1, .step2, .step3 {
  width:      20%;
  text-align: justify;
  opacity:          0;
  transform:        translateY(20px);
  transition:       opacity 0.6s ease, transform 0.6s ease;
}

.partnership_pathways.is-visible .step-1 .step1 {
  opacity: 1; transform: translateY(0); transition-delay: 1.35s;
}
.partnership_pathways.is-visible .step-2 .step2 {
  opacity: 1; transform: translateY(0); transition-delay: 1.6s;
}
.partnership_pathways.is-visible .step-3 .step3 {
  opacity: 1; transform: translateY(0); transition-delay: 1.85s;
}

h4.step_title {
  text-transform: uppercase;
  color:          var(--color-gold);
  font-size:      2em;
  font-weight:    500;
  text-align:     right !important;
}

.step-2 .step_title { text-align: left !important; }


/* ================================================================
   10. WHY VIETNAM PAGE
   ================================================================ */
.why-vietnam { background-image: url("assets/images/why_vietnam_bg.png"); }
.why-us      { background-image: url("assets/images/why_us_bg.png"); }
.why-now     { background-image: url("assets/images/why_now_bg.png"); }
.why-wrapper { background-image: url(assets/images/image_38.png); }

/* Why Vietnam page decorative elements */
.why-vietnam-page .homepage-item-2 {
  position: relative;
  z-index:  2;
}

.why-vietnam-page .homepage-item-2::before {
  content:         "";
  position:        absolute;
  top:             -150px;
  bottom:          -150px;
  left:            50%;
  transform:       translateX(-50%);
  width:           100vw;
  background:      url("https://sneragroup.vn/wp-content/uploads/2026/03/Line-23.svg") center/cover no-repeat;
  z-index:         1;
  pointer-events:  none;
}

.why-vietnam-page,
.why-vietnam-page .section-content,
.why-vietnam-page .row,
.why-vietnam-page .col { overflow: visible !important; }

.why-vietnam-page .homepage-item-1,
.why-vietnam-page .homepage-item-3 { position: relative; z-index: 3; }

.why-vietnam-page .homepage-item-2 .col-inner { position: relative; z-index: 1; }

.why-vietnam-page .homepage-item-1 {
  position: relative;
  z-index:  2;
}

.why-vietnam-page .homepage-item-1::before {
  content:            "";
  position:           absolute;
  top:                0;
  bottom:             -150px;
  left:               50%;
  transform:          translateX(-50%);
  width:              100vw;
  background:         url("https://sneragroup.vn/wp-content/uploads/2026/03/Component-32-2.svg");
  background-size:    contain;
  background-repeat:  no-repeat;
  pointer-events:     none;
}

/* Partnership page background */
.why-vietnam-page .homepage-item-2::before { z-index: 2; }

/* Decorative illustrations */
.illus-hat    { position: absolute; right: 8%;  top: 10%; width: 42%; opacity: .9; }
.cultural-image { position: absolute; right: 5%; top: 44%; width: 50%; opacity: .9; }
.guitar       { position: absolute; left: 5%;  top: 36%; width: 45%; opacity: .9; }
.lantern      { position: absolute; right: -2%; bottom: 9%; width: 42%; opacity: .9; }
.noodles      { position: absolute; left: 20%; top: 27%; width: 25%; opacity: .9; }


/* ================================================================
   11. OUR PHILOSOPHY PAGE
   ================================================================ */
.our-philosophy:not(:first-child) {
  aspect-ratio: 14 / 7;
  max-height:   700px;
}

.our-philosophy:first-child {
  padding:        var(--space-xl) 0;
  width:          50%;
  text-align:     center;
  display:        flex;
  flex-direction: column;
  justify-content: center;
}

.our-philosophy .label { font-size: 1.5em; }

.our-philosophy h3 {
  font-family:   var(--font-display);
  font-size:     3em;
  font-weight:   300;
  margin-bottom: 0;
}

.our-philosophy p { font-size: 18px; }

/* Philosophy layout grids */
.travel-grid {
  display:        flex;
  margin:         auto;
  flex-direction: column;
  align-items:    center;
  position:       relative;
}

.travel-grid .vision,
.travel-grid .culture {
  display:        flex;
  flex-direction: column;
  justify-content: center;
}

.travel-grid .mission,
.travel-grid .model {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  align-items:    flex-end;
}

.vision .content,
.mission .content,
.model .content { width: 50%; display: flex; flex-direction: column; }

.culture .content { width: 41%; }

.luxury-travel {
  padding:            var(--space-xl) 0;
  position:           relative;
  background-size:    cover !important;
  background-image:   url(https://sneragroup.vn/wp-content/uploads/2026/03/Frame-1000004292.svg);
  background-position: 100% 30%;
}

.model .content .dragonboat {
  position: absolute;
  left:     8%;
  bottom:   1%;
  width:    50%;
  opacity:  .9;
  z-index:  -1;
}

.travel-grid a.btn-outline {
  margin-top: 1.5em;
}

/* Page-specific backgrounds */
.page-id-45 #main,
.page-id-43 #main,
.page-id-47 #main,
.page-id-49 #main {
  background-image:    url("https://sneragroup.vn/wp-content/uploads/2026/03/Press-2.svg");
  background-position: center 680px;
  background-repeat:   no-repeat;
  background-size:     cover;
}

.page-id-45 .row.row-full-width,
.page-id-43 .row.row-full-width,
.page-id-47 .row.row-full-width,
.page-id-49 .row.row-full-width { max-width: 100% !important; }


/* ================================================================
   12. OUR TEAM PAGE
   ================================================================ */
.our-team .box-image {
  border-top-left-radius:  12px;
  border-top-right-radius: 12px;
}

.our-team .box-text {
  border-bottom-left-radius:  12px;
  border-bottom-right-radius: 12px;
  background: #D9D9D9;
  padding:    var(--space-sm);
}

.our-team .box-text .team-name        { font-size: 24px; font-weight: 400; }
.our-team .box-text .team-title       { font-size: 18px; font-weight: 300; }
.our-team .box-text .team-description { font-size: 14px; font-weight: 300; }


/* ================================================================
   13. CONTACT PAGE
   ================================================================ */
.contact-section { padding-top: 182px !important; }

.form-contact,
.glass {
  background:          rgba(255, 255, 255, 0.15);
  backdrop-filter:     blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius:       var(--radius-md);
  border:              1px solid rgba(255, 255, 255, 0.2);
  box-shadow:          0 8px 32px rgba(0, 0, 0, 0.2);
  padding:             var(--space-lg) var(--space-xl);
}

.glass { margin-top: 182px; }

.glass h1.page-title { color: var(--color-white); font-size: 3rem; margin-bottom: var(--space-md); }
.glass h3.thin-font  { color: var(--color-white); }

.glass .searchform button         { display: none; }
.glass .searchform-wrapper        { max-width: 320px !important; }

.glass input.search-field {
  margin-top:         var(--space-md);
  background-color:   var(--color-white) !important;
  border-radius:      var(--radius-sm) !important;
  padding:            30px 40px !important;
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat:  no-repeat;
  background-position: 16px center;
}

.form-contact .col      { padding: 15px 15px 0px 15px; }
.form-contact label     { color: var(--color-white); font-weight: 300; }
.form-contact h1        { color: var(--color-white); text-align: center; }

.form-contact input,
.form-contact textarea {
  padding:       1em;
  font-size:     .75em;
  color:         rgba(21, 43, 28, 0.3) !important;
  border-radius: .5em;
  line-height:   150%;
  height:        unset;
}

.form-contact input.submit {
  color:          var(--color-white) !important;
  text-transform: unset !important;
  font-size:      1em !important;
}

.form-contact textarea {
  height:     85px !important;
  min-height: 85px !important;
}


/* ── Markup của plugin [snera_contact] (section.snera-contact-section) ──
   Port từ style section contact của theme gốc (page-why-vietnam):
   min-height 100dvh, ảnh nền Contact.png (fallback khi plugin chưa cấu hình
   Background trong Settings → Snera Contact), form căn giữa dọc,
   padding ngang panel kính = 1/2 --space-xl. */
.snera-contact-section {
  display: flex;
  align-items: center;
  min-height: 100dvh;
  padding-top: 120px !important;   /* chừa chỗ header overlay */
  padding-bottom: 60px;
  background: url(assets/images/Contact.png) center / cover no-repeat;
}
.snera-contact-section > .section-content { width: 100%; }

.snera-contact-section .form-contact,
.snera-contact-section .glass {
  padding-left:  calc(var(--space-xl, 80px) / 2);
  padding-right: calc(var(--space-xl, 80px) / 2);
}

/* Input/textarea nền trắng bo góc như thiết kế */
.form-contact input:not(.submit):not([type="checkbox"]):not([type="radio"]),
.form-contact textarea {
  background-color: var(--color-white);
  border: 0;
  width: 100%;
  display: block;
}

/* Nút gửi: full-width, nền forest, hover gold */
.form-contact input.submit,
.snera-contact-section input[type="submit"] {
  background-color: var(--color-forest);
  border: 0;
  width: 100%;
  padding: 1em;
  border-radius: .5em;
  cursor: pointer;
  transition: background-color .25s ease;
}
.form-contact input.submit:hover,
.snera-contact-section input[type="submit"]:hover {
  background-color: var(--color-gold);
}


/* ================================================================
   14. PRESS & BLOGS PAGE
   ================================================================ */
.page-id-51 #main {
  background-image:    url("https://sneragroup.vn/wp-content/uploads/2026/03/Press-2.svg");
  background-size:     cover;
  background-position: bottom;
}

.pcp-date,
.cap-date {
  font-size:   14px !important;
  font-weight: 500;
  line-height: 20px;
}


/* ================================================================
   15. PRODUCT PAGES
   ================================================================ */
.retreat-intro {
  padding: 10em !important;
}

.retreat-intro .col-inner {
  display:         flex;
  flex-direction:  row;
  justify-content: center;
  gap:             160px;
  align-items:     center;
}

.intro-content {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
  align-items:    flex-start;
}

.retreat-title {
  font-family: var(--font-display);
  font-size:   3em;
  color:       var(--color-forest);
  line-height: 1em;
}

.intro-content .label       { font-size: 24px; color: rgba(21, 43, 28, 0.3); }
.intro-content .description { color: rgba(21, 43, 28, 0.7); }

.section-services {
  border-top:    2px solid rgba(21, 43, 28, 0.8);
  background:    var(--color-gold-light);
  padding:       var(--space-lg) 0 !important;
  margin-bottom: 30px;
}

.services-header {
  display:       inline-block;
  background:    rgba(21, 43, 28, 0.8);
  color:         var(--color-white);
  padding:       10px 20px;
  border-radius: 10px 10px 0 0;
  margin-left:   2.5%;
}

.section-gallery { border-top: 2px solid rgba(21, 43, 28, 0.8); padding-top: 4px !important; }

.gallery-header {
  display:       block;
  width:         fit-content;
  margin-left:   auto;
  margin-right:  2.5%;
  background:    rgba(21, 43, 28, 0.8);
  color:         var(--color-white);
  padding:       10px 32px;
  border-radius: 10px 10px 0 0;
}


/* ================================================================
   16. IMPRESS / STATS CARDS
   ================================================================ */
.impress-number .col { padding-bottom: 0; }

.impress-card {
  position:      relative;
  border-radius: var(--radius-lg);
  overflow:      visible;
  background:    var(--color-white);
}

.impress-card > * { position: relative; z-index: 1; }

.impress-card::after {
  content:       "";
  position:      absolute;
  top:           5px;
  left:          5px;
  width:         100%;
  height:        100%;
  background:    #e5dccb;
  border-radius: var(--radius-lg);
  z-index:       0;
}

.impress-card-top {
  background:              #f2f2f2;
  padding:                 var(--space-sm) var(--space-md);
  text-align:              center;
  border-top-left-radius:  24px;
  border-top-right-radius: 24px;
  border:                  2px solid #3f5448;
}

.impress-card-top h2 {
  margin:      0;
  font-size:   48px;
  color:       #0f2d1f;
  font-weight: 800;
}

.impress-card-bottom {
  background:                  #4b5f53;
  padding:                     var(--space-sm) var(--space-md);
  text-align:                  center;
  border-bottom-left-radius:   24px;
  border-bottom-right-radius:  24px;
}

.impress-card-bottom p {
  margin:         0;
  color:          var(--color-white);
  letter-spacing: 2px;
  font-size:      16px;
}

.suffix { font-size: 23px; vertical-align: super; margin-left: 5px; }


/* ================================================================
   17. PARTNERSHIP PATHWAYS (Why Vietnam page reuse)
   ================================================================ */
/* (rules already defined in section 9 above) */


/* ================================================================
   18. RESPONSIVE — max 767px
   ================================================================ */
@media (max-width: 767px) {
  .container,
  .row { max-width: 100vw !important; }

  .glass h1.page-title { font-size: 2em; }

  /* Retreat */
  .retreat-intro { padding: 1em !important; }

  .retreat-intro .col-inner {
    flex-direction: column;
    gap:            1em;
    align-items:    center;
  }

  /* Mobile banner */
  .mobile-banner img {
    height:    100vh;
    width:     auto;
    max-width: fit-content;
  }

  /* Philosophy */
  .our-philosophy {
    height:          100vh;
    padding:         var(--space-xl) 2em;
    width:           100% !important;
    text-align:      center;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-start !important;
  }

  .our-philosophy h3 { font-size: 2em; }

  .philosophy   { background: url("assets/images/philosophy.png") bottom no-repeat; }
  .vision       { background: url("assets/images/our-vision.png") bottom no-repeat; }
  .mission      { background: url("assets/images/Mission.png") bottom no-repeat; }
  .cultural     { background: url("assets/images/Cultural.png") bottom no-repeat; }
  .luxury-travel { background: url("assets/images/Luxury-travel.png") bottom no-repeat; }

  /* Philosophy carousel */
  .carousel-track-row {
    display:    flex;
    overflow:   hidden;
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  .our-philosophy-section {
    min-width:  100vw;
    height:     100vh;
    flex-shrink: 0;
  }

  /* Impress cards */
  .impress-card-top h2   { font-size: 24px; }
  .impress-card-top .suffix { font-size: 15px; }
  .impress-number .col   { padding: 0 5px; }
  .impress-card-bottom p { font-size: 8px; overflow-wrap: break-word; }
}