/* ===============================
   NATURRO CARD DESIGN SYSTEM
   
   ⚠️ AUTHORITATIVE SOURCE ⚠️
   
   All card styling lives in components/cards.css.
   No page, section, or HTML file may override card appearance.
   
   This file is the constitution. Violations must be removed, not worked around.
   
   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
   
   ALLOWED CARD VARIANTS (only these three):
   1. Standard card: Neutral background, text + optional icon
      Used for: values, FAQ, info blocks
   2. Image card (bento): Image background, neutral dark overlay, no colored backgrounds
      Used for: hero-linked cards, bento grid
   3. Profile card: Image + neutral content area, same padding/radius/shadow as standard
      Used for: team members, people
   
   Everything else is a misuse. If a card does not fit one of these three, it is not allowed.
================================ */

/* ===============================
   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 */
  
  /* Unified Experience Card Sizing */
  --card-padding: 1.5rem;                  /* Reduced padding for tighter layout */
  --card-element-gap: 0.5rem;              /* Reduced vertical spacing between elements */
  --card-image-height: 240px;              /* Restrained image height (atmospheric, not tall) */
  --card-max-height-vh: 40;                /* Max card height as % of viewport (prevents dominance) */
  --card-max-width: 580px;                 /* Max card width for comfortable reading */
}

/* ===============================
   BASE CARD STYLES
   
   ⚠️ ENFORCEMENT RULE ⚠️
   All card components MUST include .naturro-card.
   Page-level or inline card styling is not allowed.
================================ */

/* Base class for all NaturRo cards */
.naturro-card,
.card,
.trip-card,
.value-card,
.bento-card {
  background: var(--color-nature-card-bg) !important; /* Force neutral background, ignore section inheritance */
  color: var(--color-nature-text-primary) !important; /* Force neutral text, ignore section inheritance */
  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; /* Keep for rounded corners, but content areas handle their own overflow */
  display: flex;
  flex-direction: column; /* Stack image and content vertically */
  height: 100%; /* Fill grid cell height for equal height cards */
}

/* Note: team-member-block excluded from base styling - handled in PROFILE CARDS section below */

/* Value cards - apply padding directly (for cards without content wrapper) */
.value-card {
  padding: var(--card-padding); /* Unified padding: 2rem */
}

/* Value cards with content wrapper - remove card padding, content wrapper handles it */
.value-card:has(.value-card-content) {
  padding: 0;
}

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

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

/* Card headings - always neutral, never accent colors */
.naturro-card h3,
.card h3,
.trip-card h3,
.value-card h3,
.team-member-block h3 {
  color: var(--color-nature-text-primary) !important; /* Force neutral, override any section or inline styles */
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem); /* Slightly smaller for calmer scale */
  line-height: 1.3;
  margin-bottom: var(--card-element-gap); /* Unified spacing: 0.75rem */
}

.card p,
.trip-card p,
.trip-card-text,
.value-card p,
.team-member-block p {
  color: var(--color-nature-text-secondary);
  line-height: 1.7; /* Tighter line-height for better fit */
  font-size: clamp(0.95rem, 1.8vw, 1.05rem); /* Slightly smaller */
  margin-bottom: var(--card-element-gap); /* Unified spacing: 0.75rem */
  /* Prevent text overflow */
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

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

/* Small labels/tags - subtle accent */
/* Card tags - transparent background with accent border only (never colored background) */
.card-tag,
.trip-card-tag,
.value-tag {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: transparent !important; /* Never use colored backgrounds on tags */
  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: var(--card-element-gap); /* Unified spacing: 0.75rem */
  opacity: 0.85;
}

/* Icons - quiet signposts */
.card-icon,
.value-card-icon {
  color: var(--color-green) !important; /* Use green color directly */
  opacity: 0.75;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 32px; /* FontAwesome icon size */
}

/* Trip card feature SVG styling moved to .trip-card-feature svg below (smaller size) */

.value-card-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* FontAwesome icons in value cards */
.value-card-icon i {
  color: var(--color-green) !important;
  font-size: 32px;
  line-height: 1;
}

/* ===============================
   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);
}

/* ===============================
   PROFILE CARDS (TEAM MEMBERS)
   
   Profile cards have a different structure: image + text side-by-side.
   They need special handling to avoid "rounded image in rounded box" effect.
================================ */

.team-member-block {
  /* Remove standard card styling that doesn't work for profile cards */
  border-radius: 0 !important; /* No rounded corners on container */
  border: none !important; /* No border - image has its own shadow */
  box-shadow: none !important; /* No container shadow - image has its own */
  overflow: visible !important; /* Allow image shadow to show */
  padding: 0 !important; /* No padding - grid handles spacing */
  background: transparent !important; /* Transparent background - let section show through */
}

/* Profile card text area - neutral background, subtle styling */
.team-member-text {
  background: var(--color-nature-card-bg);
  border-radius: 24px;
  padding: var(--card-padding); /* Unified padding: 2rem */
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* Profile card image - keep its own rounded corners and shadow */
/* Image container styling handled by page-specific CSS (om-naturro.html) */

/* ===============================
   IMAGE CARDS (BENTO/HERO-LINKED)
   
   EXCEPTION: Image cards are transparent for full-image overlays.
   This is the ONLY allowed exception to neutral backgrounds.
   Only applies to .bento-card and .card-with-image.
   .value-card should NOT be transparent (removed from this rule).
================================ */

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

/* Bento cards now use neutral background like trip cards (see base .bento-card rule above) */

.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);
}

/* ===============================
   UNIFIED CARD IMAGE HEIGHTS
   
   All card images use the same restrained height
   for consistent, calm scale across all pages.
================================ */

.value-card-image {
  width: 100%;
  height: var(--card-image-height); /* Unified: 240px */
  overflow: hidden;
  border-radius: 24px 24px 0 0; /* Rounded top corners only */
  flex-shrink: 0; /* Prevent image from shrinking */
}

.value-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* Remove inline spacing */
}

/* Trip card images (direct img tag, not in container) */
.trip-card-image {
  width: 100%;
  height: var(--card-image-height); /* Unified: 240px */
  object-fit: cover;
  border-radius: 24px 24px 0 0; /* Rounded top corners only */
  flex-shrink: 0; /* Prevent image from shrinking */
  display: block; /* Ensure proper display */
}

/* Bento card images - same as trip cards */
.bento-card-image {
  width: 100%;
  height: var(--card-image-height); /* Unified: 240px */
  object-fit: cover;
  border-radius: 24px 24px 0 0; /* Rounded top corners only */
  flex-shrink: 0; /* Prevent image from shrinking */
  display: block; /* Ensure proper display */
}

/* Responsive image heights */
@media (max-width: 768px) {
  .value-card-image,
  .trip-card-image,
  .bento-card-image {
    height: calc(var(--card-image-height) * 0.85); /* ~204px on tablet */
    min-height: 180px; /* Ensure minimum height */
  }
  
  .value-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 500px) {
  .value-card-image,
  .trip-card-image,
  .bento-card-image {
    height: calc(var(--card-image-height) * 0.75); /* ~180px on mobile */
    min-height: 160px; /* Ensure minimum height on very small screens */
    max-width: 100%; /* Prevent overflow */
  }
  
  .value-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

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

/* Card content padding - standardized globally */
.card-content,
.trip-card-content,
.value-card-content,
.bento-card-content {
  padding: var(--card-padding); /* Unified padding: 1.5rem */
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allow content to grow and push CTA to bottom */
  width: 100%;
  box-sizing: border-box;
  gap: var(--card-element-gap); /* Consistent spacing between elements */
  min-width: 0; /* Allow flex item to shrink below content size */
  overflow-wrap: break-word; /* Break long words if needed */
  word-wrap: break-word; /* Legacy support */
}

.bento-card-content h3 {
  margin: 0 0 0.5rem 0; /* Reduced margin */
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  line-height: 1.3;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.bento-card-content p {
  margin: 0 0 1rem 0; /* Reduced margin */
  line-height: 1.6;
  flex-shrink: 0; /* Don't shrink description */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.bento-card-cta-wrapper {
  margin-top: auto; /* Push CTA to bottom */
  padding-top: 1rem; /* Reduced padding */
}

/* Trip card content - ensure consistent positioning */
/* Text area grows, features and CTA stay fixed via flex properties below */

.trip-card-text {
  flex: 1 1 auto; /* Text grows to fill available space */
  min-height: 0; /* Allow text to shrink if needed */
}

.trip-card-features {
  flex-shrink: 0; /* Features stay fixed size */
}

.trip-card-cta {
  flex-shrink: 0; /* Button stays fixed size */
  margin-top: auto; /* Push button to bottom */
}

/* Card content spacing - unified element gaps */
.card-content > * + *,
.trip-card-content > * + *,
.value-card-content > * + * {
  margin-top: var(--card-element-gap); /* Unified spacing: 0.75rem between elements */
}

/* Override for headings (they already have margin-bottom) */
.card-content h3,
.trip-card-content h3,
.value-card-content h3 {
  margin-top: 0;
}

/* Override for last element (no bottom margin needed) */
.card-content > *:last-child,
.trip-card-content > *:last-child,
.value-card-content > *:last-child {
  margin-bottom: 0;
}

/* Ensure trip-card-text paragraphs have proper spacing */
.trip-card-text {
  margin-bottom: var(--card-element-gap);
}

.trip-card-text p {
  margin-bottom: var(--card-element-gap);
}

.trip-card-text p:last-child {
  margin-bottom: 0;
}

/* Content areas size dynamically - no forced scrolling */
/* Cards grow naturally to fit content */

@media (max-width: 768px) {
  .card-content,
  .trip-card-content,
  .value-card-content,
  .bento-card-content {
    padding: calc(var(--card-padding) * 0.8); /* Slightly smaller on mobile: ~1.6rem */
  }
  
  .card-features,
  .trip-card-features {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem;
  }
  
  /* Make bento card features single column on mobile to prevent squishing */
  .bento-card-features {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1rem;
  }
  
  /* Allow text to wrap on mobile instead of ellipsis */
  .bento-card-feature span {
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
  }
}

@media (max-width: 500px) {
  .card-content,
  .trip-card-content,
  .value-card-content,
  .bento-card-content {
    padding: calc(var(--card-padding) * 0.75); /* Smaller on mobile: ~1.5rem */
  }
  
  .card,
  .trip-card,
  .value-card,
  .bento-card {
    min-height: auto; /* Allow cards to be smaller on mobile */
    width: 100%; /* Ensure full width on mobile */
    max-width: 100%; /* Prevent overflow */
  }
  
  .card-cta,
  .trip-card-cta {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1.5rem;
  }
  
  /* Further reduce feature grid padding on very small screens */
  .bento-card-features {
    padding: 0.75rem;
    gap: 0.5rem;
  }
  
  /* Ensure images don't overflow on mobile */
  .bento-card-image,
  .trip-card-image,
  .value-card-image img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* ===============================
   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);
}

/* Trip card features - 2x2 grid, smaller size */
.trip-card-features,
.bento-card-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Fixed 2x2 grid */
  gap: 0.5rem; /* Reduced gap */
  margin: 0.75rem 0; /* Reduced margin */
  padding: 0.75rem; /* Reduced padding */
  flex-shrink: 0; /* Fixed size - doesn't grow/shrink */
  background: rgba(0,0,0,0.02); /* barely visible */
  border-radius: 12px;
  border: 1px solid var(--color-nature-border);
  align-items: stretch; /* Ensure all grid items have same height */
}

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

/* Trip card features - smaller icons and text */
.trip-card-feature,
.bento-card-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Smaller gap between icon and text */
  font-size: 0.8rem; /* Smaller text for tighter layout */
  line-height: 1.4;
  color: var(--color-nature-text-secondary);
}

.trip-card-feature svg,
.bento-card-feature i,
.bento-card-feature svg {
  width: 18px; /* Consistent icon size */
  height: 18px;
  min-width: 18px; /* Prevent icon from shrinking */
  flex-shrink: 0; /* Icons don't shrink */
  color: var(--color-nature-accent);
  opacity: 0.75;
  display: inline-flex; /* Better alignment for icons */
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  vertical-align: middle;
}

.bento-card-feature span {
  flex: 1; /* Allow text to take remaining space */
  min-width: 0; /* Allow text to shrink if needed */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===============================
   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 */
}

/* Value card meta text - subtle, italic summary */
.value-card-meta {
  font-size: 0.9rem;
  color: var(--color-nature-text-secondary);
  opacity: 0.8;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-nature-border);
  font-style: italic;
  line-height: 1.6;
}

/* ===============================
   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.
================================ */