/* ============================================
   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%);
  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;
  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: 4rem;
  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;
  }
}