/* ==========================================================================
   THE TRIP HOLIC — "WHAT KIND OF TRIP ARE YOU LOOKING FOR?" SECTION
   Brand Direction: Clean, Modern, Human, Mature, Entire Card Clickable
   ========================================================================== */

.tth-experiences-section {
  background-color: var(--tth-white);
  position: relative;
}

/* --------------------------------------------------------------------------
   1. Experience Card (Entire Card Clickable, Consistent Heights)
   -------------------------------------------------------------------------- */
.tth-experience-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--tth-white);
  border: 1.5px solid var(--tth-border);
  border-radius: var(--tth-radius-md);
  padding: 1.65rem 1.45rem 1.35rem;
  text-decoration: none;
  color: var(--tth-dark);
  box-shadow: var(--tth-shadow-xs);
  transition: transform var(--tth-transition), box-shadow var(--tth-transition), border-color var(--tth-transition), background-color var(--tth-transition);
  outline: none;
}

/* Keyboard accessibility */
.tth-experience-card:focus-visible {
  outline: 3px solid var(--tth-primary);
  outline-offset: 3px;
  border-color: var(--tth-primary);
}

/* Subtle, restrained hover interaction */
.tth-experience-card:hover {
  transform: translateY(-5px);
  border-color: var(--tth-primary-border);
  box-shadow: 0 12px 28px -6px rgba(135, 218, 235, 0.35);
  color: var(--tth-dark);
  background-color: var(--tth-bg);
}

/* --------------------------------------------------------------------------
   2. Icon Styling (Mature, Not Childish)
   -------------------------------------------------------------------------- */
.tth-exp-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: var(--tth-radius-sm);
  background-color: var(--tth-primary-subtle);
  color: var(--tth-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  margin-bottom: 1.15rem;
  transition: background-color var(--tth-transition-fast), color var(--tth-transition-fast), transform var(--tth-transition-fast);
}

.tth-experience-card:hover .tth-exp-icon-wrap {
  background-color: var(--tth-primary);
  color: #0F172A;
  transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   3. Card Typography & Content
   -------------------------------------------------------------------------- */
.tth-exp-title {
  font-family: var(--tth-font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--tth-dark);
  line-height: 1.3;
  margin-bottom: 0.5rem;
  transition: color var(--tth-transition-fast);
}

.tth-experience-card:hover .tth-exp-title {
  color: var(--tth-primary);
}

.tth-exp-desc {
  font-size: 0.8875rem;
  color: var(--tth-muted);
  line-height: 1.55;
  margin-bottom: 1.15rem;
  flex-grow: 1; /* Ensures consistent card heights while pushing Explore link to bottom */
}

/* --------------------------------------------------------------------------
   4. Explore Link (Visual Indicator)
   -------------------------------------------------------------------------- */
.tth-exp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--tth-font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--tth-primary);
  margin-top: auto;
  transition: gap var(--tth-transition-fast), color var(--tth-transition-fast);
}

.tth-exp-link i {
  font-size: 0.8rem;
  transition: transform var(--tth-transition-fast);
}

.tth-experience-card:hover .tth-exp-link {
  color: var(--tth-primary-dark);
}

.tth-experience-card:hover .tth-exp-link i {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   5. Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tth-experience-card,
  .tth-exp-icon-wrap,
  .tth-exp-link,
  .tth-exp-link i {
    transition: none !important;
    transform: none !important;
  }
}