/* ===============================
   NATURRO CARD DESIGN SYSTEM

   Mental model: A NaturRo card is a quiet surface that holds an experience.

   Rules:
   - Cards are calm, not loud
   - Max ONE accent usage per card
   - Neutral backgrounds always
   - Soft shadows, minimal borders
   - Typography for relaxed reading
================================ */

/* ===============================
   CARD COLOR TOKENS
================================ */

:root {
  /* Card-specific nature theme colors */
  --color-nature-card-bg: #f4f6f2;        /* warm, green-tinted off-white */
  --color-nature-text-primary: #1f2d24;   /* deep forest charcoal */
  --color-nature-text-secondary: #4a5a50; /* softened moss gray */
  --color-nature-border: rgba(0,64,14,0.08); /* barely visible green */
  --color-nature-accent: var(--color-green); /* use sparingly */
}

/* ===============================
   BASE CARD STYLES
================================ */

.card,
.trip-card,
.value-card,
.team-member-block,
.bento-card {
  background: var(--color-nature-card-bg);
  border-radius: 24px;
  border: 1px solid var(--color-nature-border);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transition: all 0.4s ease;
  overflow: hidden;
}

.card:hover,
.trip-card:hover,
.value-card:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  transform: translateY(-4px);
}

/* ===============================
   CARD TYPOGRAPHY
================================ */

.card h3,
.trip-card h3,
.value-card h3,
.team-member-block h3 {
  color: var(--color-nature-text-primary);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  line-height: 1.3;
  margin-bottom: 1rem;
}

.card p,
.trip-card p,
.trip-card-text,
.value-card p,
.team-member-block p {
  color: var(--color-nature-text-secondary);
  line-height: 1.8;
  font-size: clamp(1rem, 2vw, 1.1rem);
}

/* ===============================
   ACCENT ELEMENTS (MAX ONE PER CARD)
================================ */

/* Small labels/tags - subtle accent */
.card-tag,
.trip-card-tag,
.value-tag {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: transparent;
  color: var(--color-nature-accent);
  border: 1px solid var(--color-nature-accent);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  opacity: 0.85;
}

/* Icons - quiet signposts */
.card-icon,
.trip-card-feature svg {
  color: var(--color-nature-accent);
  opacity: 0.75;
  width: 20px;
  height: 20px;
}

/* ===============================
   CTA STYLES (INVITATIONS, NOT PUSHES)
================================ */

/* Text link CTA (preferred) */
.card-cta-link,
.trip-card-cta-text {
  color: var(--color-nature-accent);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.card-cta-link:hover {
  gap: 0.75rem;
}

/* Button CTA (rare, decision cards only) */
.card-cta,
.trip-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: var(--color-nature-accent);
  color: #f9f6d0; /* yellow-tinted white */
  text-decoration: none;
  font-weight: 500;
  border-radius: 30px;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 64, 14, 0.15);
}

.card-cta:hover,
.trip-card-cta:hover {
  background: var(--color-moss-accent);
  box-shadow: 0 6px 18px rgba(0, 64, 14, 0.25);
  transform: translateX(3px);
}

/* ===============================
   IMAGE CARDS (BENTO/HERO-LINKED)
================================ */

.card-with-image,
.bento-card,
.value-card {
  background: transparent;
  border: none;
}

.card-image-container {
  position: relative;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Neutral overlay for readability - never tinted */
.card-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.65),
    rgba(0,0,0,0.25),
    transparent
  );
}

/* Text on images */
.card-image-text {
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,0.92);
}

/* ===============================
   CONTENT PADDING & SPACING
================================ */

.card-content,
.trip-card-content,
.value-card-content {
  padding: 2.5rem;
}

@media (max-width: 768px) {
  .card-content,
  .trip-card-content,
  .value-card-content {
    padding: 2rem;
  }
}

/* ===============================
   FEATURE LISTS (QUIET, NOT PROMINENT)
================================ */

.card-features,
.trip-card-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(0,0,0,0.02); /* barely visible */
  border-radius: 16px;
  border: 1px solid var(--color-nature-border);
}

.card-feature,
.trip-card-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-nature-text-secondary);
  font-size: 0.95rem;
}

/* ===============================
   ACCESSIBILITY (50+ OPTIMIZED)
================================ */

.card,
.trip-card,
.value-card {
  /* Generous click areas */
  min-height: 400px;
}

.card-cta,
.trip-card-cta {
  /* Minimum 44x44px touch target */
  min-height: 44px;
  min-width: 44px;
  padding: 1rem 2rem;
}

/* Ensure WCAG AA contrast */
.card h3,
.trip-card h3 {
  /* 7:1 contrast ratio */
  color: var(--color-nature-text-primary);
}

.card p,
.trip-card-text {
  /* 4.5:1 contrast ratio minimum */
  color: var(--color-nature-text-secondary);
  font-size: 16px; /* never below 16px */
}

/* ===============================
   FINAL RULE: CARDS STAY CALM

   If a card feels like it's trying to be beautiful, it's wrong.
   If it feels like it's allowing something beautiful to happen, it's right.
================================ */