/* ============================================

   AMOUR CRUISE — Things to Know

   Luxury travel guide UI

   ============================================ */



.ttk-page {

  background: linear-gradient(180deg, #FBF8F1 0%, #FFFFFF 50%, #FBF8F1 100%);

  min-height: 100vh;

}



/* ─── HERO ─── */

.ttk-hero {

  position: relative;

  padding: calc(var(--header-h, 88px) + 5rem) 0 5rem;

  text-align: center;

  /* background: linear-gradient(135deg, #0B1929 0%, #1A2C45 60%, #2C4A6E 100%); */
  background: #2e2e2e;

  color: #fff;

  overflow: hidden;

}



.ttk-hero::before {

  content: '';

  position: absolute;

  inset: 0;

  background-image:

    radial-gradient(circle at 25% 25%, rgba(201, 165, 92, 0.2) 0%, transparent 50%),

    radial-gradient(circle at 75% 75%, rgba(201, 165, 92, 0.12) 0%, transparent 50%);

  pointer-events: none;

}



.ttk-hero::after {

  content: '';

  position: absolute;

  bottom: -1px;

  left: 0;

  right: 0;

  height: 80px;

  background: linear-gradient(180deg, transparent 0%, #FBF8F1 100%);

}



.ttk-hero__inner {

  position: relative;

  max-width: 820px;

  margin: 0 auto;

  padding: 0 1.5rem;

  z-index: 2;

}



.ttk-hero__eyebrow {

  display: inline-block;

  font-size: .72rem;

  font-weight: 500;

  letter-spacing: .4em;

  text-transform: uppercase;

  color: #C9A55C;

  margin-bottom: 1.5rem;

  padding-bottom: .85rem;

  position: relative;

}

.ttk-hero__eyebrow::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 40px;

  height: 1px;

  background: #C9A55C;

}



.ttk-hero__title {

  font-family: 'Playfair Display', Georgia, serif;

  font-size: clamp(2.5rem, 6vw, 4.2rem);

  font-weight: 400;

  line-height: 1.1;
  color: #C1A36B;

  margin: 0 0 1.25rem;

  letter-spacing: -.015em;

}



.ttk-hero__subtitle {

  font-family: 'Cormorant Garamond', Georgia, serif;

  font-size: clamp(1.1rem, 2.2vw, 1.5rem);

  line-height: 1.5;

  color: rgba(255, 255, 255, .85);

  font-style: italic;

  margin: 0;

}



.ttk-hero__ornament {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: .75rem;

  margin-top: 2rem;

  color: rgba(201, 165, 92, .7);

}

.ttk-hero__ornament::before,

.ttk-hero__ornament::after {

  content: '';

  width: 56px;

  height: 1px;

  background: linear-gradient(90deg, transparent, #C9A55C, transparent);

}

.ttk-hero__ornament i {

  font-size: .7rem;

  letter-spacing: .5em;

  font-style: normal;

}



/* ─── CONTENT WRAPPER ─── */

.ttk-content {

  max-width: 1180px;

  margin: 0 auto;

  padding: 4rem 1.5rem 6rem;

}



/* ─── INTRO ─── */

.ttk-intro {

  text-align: center;

  margin-bottom: 4rem;

}

.ttk-lead {

  font-family: 'Cormorant Garamond', Georgia, serif;

  font-size: clamp(1.15rem, 2.2vw, 1.45rem);

  line-height: 1.6;

  color: #2C3E50;

  font-style: italic;

  max-width: 720px;

  margin: 0 auto;

}



/* ─── SECTION BLOCK ─── */

.ttk-block {

  margin-bottom: 5rem;

  scroll-margin-top: 100px;

}



.ttk-section-head {

  text-align: center;

  margin-bottom: 3rem;

  position: relative;

}



.ttk-section-number {

  display: inline-block;

  font-family: 'Playfair Display', Georgia, serif;

  font-size: 50px;

  font-weight: 300;

  line-height: 1;

  /* color: transparent; */

  -webkit-text-stroke: 1px rgba(201, 165, 92, .35);

  letter-spacing: .05em;

  margin-bottom: .5rem;

}



.ttk-section-head h2 {

  font-family: 'Playfair Display', Georgia, serif;

  font-size: clamp(1.75rem, 3.5vw, 2.4rem);

  font-weight: 400;

  color: #0B1929;

  margin: 0 0 .75rem;

  letter-spacing: -.01em;

  position: relative;

  display: inline-block;

}

.ttk-section-head h2::after {

  content: '';

  position: absolute;

  bottom: -.85rem;

  left: 50%;

  transform: translateX(-50%);

  width: 48px;

  height: 2px;

  background: linear-gradient(90deg, transparent, #C9A55C, transparent);

}



.ttk-section-sub {

  font-size: .95rem;

  color: #6B7280;

  margin: 1.5rem 0 0;

  font-weight: 400;

}



/* ─── CARD GRID ─── */

.ttk-card-grid {

  display: grid;

  gap: 1.5rem;

}

.ttk-card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.ttk-card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.ttk-card-grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }



/* ─── CARD ─── */

.ttk-card {

  background: #fff;

  border-radius: 4px;

  padding: 2rem 1.75rem;

  text-align: center;

  border: 1px solid rgba(201, 165, 92, .12);

  box-shadow:

    0 1px 3px rgba(11, 25, 41, .04),

    0 12px 32px rgba(11, 25, 41, .06);

  transition: all .4s cubic-bezier(.4, 0, .2, 1);

  position: relative;

  overflow: hidden;

}

.ttk-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 2px;

  background: linear-gradient(90deg, transparent, #C9A55C, transparent);

  transform: scaleX(0);

  transform-origin: center;

  transition: transform .5s ease;

}

.ttk-card:hover {

  transform: translateY(-6px);

  box-shadow:

    0 1px 3px rgba(11, 25, 41, .04),

    0 24px 48px rgba(11, 25, 41, .12);

  border-color: rgba(201, 165, 92, .35);

}

.ttk-card:hover::before { transform: scaleX(1); }



.ttk-card__icon {

  width: 64px;

  height: 64px;

  margin: 0 auto 1.25rem;

  border-radius: 50%;

  background: linear-gradient(135deg, #FBF8F1 0%, #F5EBC9 100%);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.6rem;

  color: #A88638;

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, .8),

    0 4px 12px rgba(201, 165, 92, .2);

  transition: all .35s ease;

}

.ttk-card:hover .ttk-card__icon {

  background: linear-gradient(135deg, #C9A55C 0%, #A88638 100%);

  color: #fff;

  transform: rotate(-8deg) scale(1.08);

}



.ttk-card h3 {

  font-family: 'Playfair Display', Georgia, serif;

  font-size: 1.2rem;

  font-weight: 500;

  color: #0B1929;

  margin: 0 0 .75rem;

  letter-spacing: -.005em;

}



.ttk-card p {

  font-size: .92rem;

  line-height: 1.65;

  color: #3A4A5C;

  margin: 0;

}



/* Variant minimal — no border, simpler shadow */

.ttk-card--minimal {

  box-shadow: 0 4px 16px rgba(11, 25, 41, .05);

  border: none;

  padding: 1.75rem 1.25rem;

}

.ttk-card--minimal .ttk-card__icon { width: 56px; height: 56px; font-size: 1.4rem; }

.ttk-card--minimal h3 { font-size: 1.05rem; }

.ttk-card--minimal p { font-size: .87rem; }



/* ─── TUAN CHAU FEATURE BLOCK ─── */

.ttk-block--feature {

  background: linear-gradient(135deg, #FBF8F1 0%, #FFFFFF 100%);

  padding: 4rem 2rem;

  margin: 5rem -1.5rem;

  border-top: 1px solid rgba(201, 165, 92, .2);

  border-bottom: 1px solid rgba(201, 165, 92, .2);

}



.ttk-feature__intro {

  max-width: 800px;

  margin: 0 auto 3rem;

  text-align: center;

  font-size: 1.05rem;

  line-height: 1.75;

  color: #3A4A5C;

}



.ttk-info-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 1rem;

  max-width: 1000px;

  margin: 0 auto 3rem;

  padding: 2rem;

  background: #fff;

  border-radius: 4px;

  border: 1px solid rgba(201, 165, 92, .25);

  box-shadow: 0 8px 24px rgba(11, 25, 41, .06);

}



.ttk-info-item {

  text-align: center;

  padding: .75rem;

  border-right: 1px solid rgba(201, 165, 92, .15);

}

.ttk-info-item:last-child { border-right: none; }



@media (max-width: 768px) {

  .ttk-info-item { border-right: none; border-bottom: 1px solid rgba(201, 165, 92, .15); }

  .ttk-info-item:last-child { border-bottom: none; }

}



.ttk-info-item__label {

  font-size: .75rem;

  font-weight: 500;

  letter-spacing: .15em;

  text-transform: uppercase;

  color: #A88638;

  margin-bottom: .5rem;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: .35rem;

}

.ttk-info-item__label i { font-size: .9rem; }



.ttk-info-item__value {

  font-family: 'Playfair Display', Georgia, serif;

  font-size: 1rem;

  color: #0B1929;

  line-height: 1.4;

}



/* ─── TIPS ─── */

.ttk-tips {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

  gap: 1rem;

  max-width: 1000px;

  margin: 0 auto;

}



.ttk-tip {

  display: flex;

  align-items: flex-start;

  gap: 1rem;

  padding: 1.25rem 1.5rem;

  background: #fff;

  border-radius: 4px;

  border-left: 3px solid #C9A55C;

  box-shadow: 0 4px 12px rgba(11, 25, 41, .04);

  transition: all .3s ease;

}

.ttk-tip:hover {

  transform: translateX(4px);

  box-shadow: 0 8px 20px rgba(11, 25, 41, .08);

  border-left-color: #A88638;

}

.ttk-tip i {

  color: #C9A55C;

  font-size: 1.25rem;

  flex-shrink: 0;

  margin-top: .15rem;

}

.ttk-tip span {

  font-size: .92rem;

  line-height: 1.6;

  color: #3A4A5C;

}



/* ─── SUSTAINABLE BLOCK ─── */

.ttk-block--sustain {

  background: linear-gradient(135deg, #F5F9F4 0%, #FBF8F1 100%);

  padding: 4rem 2rem;

  margin: 5rem -1.5rem 0;

  border-top: 1px solid rgba(76, 132, 84, .15);

}



.ttk-block--sustain .ttk-section-number {

  -webkit-text-stroke: 1px rgba(76, 132, 84, .35);

}

.ttk-block--sustain .ttk-section-head h2::after {

  background: linear-gradient(90deg, transparent, #4C8454, transparent);

}



.ttk-sustain__intro {

  display: flex;

  align-items: flex-start;

  gap: 1.5rem;

  max-width: 800px;

  margin: 0 auto 3rem;

  padding: 2rem;

  background: rgba(76, 132, 84, .06);

  border-left: 4px solid #4C8454;

  border-radius: 4px;

}



.ttk-sustain__leaf {

  font-size: 2rem;

  color: #4C8454;

  flex-shrink: 0;

}



.ttk-sustain__intro p {

  font-size: 1rem;

  line-height: 1.7;

  color: #2C3E50;

  margin: 0;

}



.ttk-card--sustain .ttk-card__icon {

  background: linear-gradient(135deg, #E8F0E5 0%, #C8DCC8 100%);

  color: #3A6B42;

}

.ttk-card--sustain:hover .ttk-card__icon {

  background: linear-gradient(135deg, #4C8454 0%, #3A6B42 100%);

  color: #fff;

}

.ttk-card--sustain::before {

  background: linear-gradient(90deg, transparent, #4C8454, transparent);

}



/* ─── RESPONSIVE ─── */

@media (max-width: 768px) {

  .ttk-content { padding: 2.5rem 1rem 4rem; }

  .ttk-block { margin-bottom: 3.5rem; }

  .ttk-block--feature,

  .ttk-block--sustain {

    padding: 2.5rem 1rem;

    margin-left: -1rem;

    margin-right: -1rem;

  }

  .ttk-section-number { font-size: 3rem; }

  .ttk-card { padding: 1.5rem 1.25rem; }

  .ttk-sustain__intro {

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 1.5rem;

  }

}



@media (prefers-reduced-motion: reduce) {

  .ttk-card,

  .ttk-card__icon,

  .ttk-tip {

    transition: none !important;

    animation: none !important;

  }

}