/**
 * Landing Page Styles for Ghost Gym
 * Matches existing card-based design system
 */

/* Hero Card */
.landing-hero-card {
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  margin-top: 4rem !important; /* Push entire card down to avoid menu button overlap */
}

.landing-hero-card h1 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--bs-heading-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-hero-card h1 i {
  color: var(--bs-primary);
}

.landing-hero-card p {
  font-size: 1rem;
}

/* Feature Cards */
.landing-feature-card {
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Clickable feature cards */
.landing-feature-link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}

.landing-feature-link:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  color: inherit;
  text-decoration: none;
}

.landing-feature-link:hover .landing-feature-icon {
  background: var(--bs-primary);
}

.landing-feature-link:hover .landing-feature-icon i {
  color: white;
}

/* Non-clickable cards have subtle hover */
.landing-feature-card:not(.landing-feature-link):hover {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.landing-feature-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
}

.landing-feature-text {
  flex: 1;
}

/* Card 2 - Reverse the order (icon on left) */
.row .col-12:nth-child(2) .landing-feature-content {
  flex-direction: row-reverse;
}

.landing-feature-text h5 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--bs-heading-color);
}

.landing-feature-text p {
  line-height: 1.5;
}

.landing-feature-icon {
  width: 80px;
  height: 80px;
  background: var(--gs-gray-100);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.3s ease;
}

.landing-feature-icon i {
  font-size: 2.5rem;
  color: var(--bs-primary);
  transition: color 0.3s ease;
}

/* Step-specific colors */
.landing-feature-card:nth-child(1) .landing-feature-icon i {
  color: var(--bs-primary);
}

.row .col-12:nth-child(2) .landing-feature-icon i {
  color: var(--gs-success);
}

.row .col-12:nth-child(2) .landing-feature-link:hover .landing-feature-icon {
  background: var(--gs-success);
}

.row .col-12:nth-child(3) .landing-feature-icon i {
  color: var(--gs-secondary);
}

/* CTA Card */
.landing-cta-card {
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.landing-cta-card h5 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bs-heading-color);
}

/* Responsive Design */
@media (max-width: 576px) {
  .landing-hero-card h1 {
    font-size: 1.5rem;
  }
  
  .landing-feature-content {
    gap: 1rem;
  }
  
  .landing-feature-icon {
    width: 60px;
    height: 60px;
  }
  
  .landing-feature-icon i {
    font-size: 2rem;
  }
  
  .landing-feature-text h5 {
    font-size: 1rem;
  }
}

@media (min-width: 768px) {
  .landing-hero-card h1 {
    font-size: 2.5rem;
  }
  
  .landing-feature-content {
    gap: 2rem;
  }
  
  .landing-feature-icon {
    width: 100px;
    height: 100px;
  }
  
  .landing-feature-icon i {
    font-size: 3rem;
  }
  
  .landing-feature-text h5 {
    font-size: 1.25rem;
  }
}

/* Smooth transitions */
.landing-feature-card,
.landing-hero-card .btn,
.landing-cta-card .btn {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Button hover effects */
.landing-hero-card .btn:hover,
.landing-cta-card .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(var(--bs-primary-rgb), 0.3);
}

/* Accessibility */
.landing-feature-card:focus-within {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* ============================================================================
   HOME PAGE LAYOUT - NOTEBOOK LAUNCHER
   ============================================================================ */

/* Home dashboard layout */
.home-dashboard-layout {
  display: flex;
  flex-direction: column;
  margin-top: -1rem;
}

/* Greeting section */
.home-greeting {
  padding-top: 0;
}

.home-greeting h4 {
  font-size: 1.25rem;
  font-weight: 600;
}

/* Notebook Prompt */
.notebook-prompt h6 {
  font-weight: 400;
  font-size: 0.95rem;
}

/* Favorites List (Stacked Cards) */
.favorites-list {
  display: flex;
  flex-direction: column;
}

/* Row-style Favorite Cards */
.favorite-card-row {
  border-left: 3px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.favorite-card-row:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.favorite-card-row .favorite-info {
  flex: 1;
  min-width: 0;
}

.favorite-card-row .favorite-info .fw-medium {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* In-Progress Card (Resume state) */
.favorite-card-row.in-progress {
  border-left-color: var(--bs-warning);
  background-color: rgba(255, 193, 7, 0.05);
}

/* View All Workouts Card */
.view-all-card {
  text-decoration: none;
  color: inherit;
  border-left-color: var(--bs-primary);
  background-color: rgba(var(--gs-primary-rgb), 0.03);
}

.view-all-card:hover {
  color: inherit;
  text-decoration: none;
  background-color: rgba(var(--gs-primary-rgb), 0.08);
}

/* Secondary Actions */
.home-secondary-actions {
  margin-top: 1.5rem;
}

/* ============================================================================
   DASHBOARD STATISTICS CARDS - DROPDOWN FIX
   ============================================================================ */

/* Ensure cards don't clip dropdown menus */
#authenticatedDashboard .card {
  overflow: visible !important;
  position: relative;
  z-index: 1;
}

/* Increase z-index when dropdown is open */
#authenticatedDashboard .card:has(.dropdown-menu.show) {
  z-index: 1060 !important;
}

/* Ensure dropdown menus appear on top of other cards */
#authenticatedDashboard .dropdown {
  position: static;
}

#authenticatedDashboard .dropdown-menu {
  position: absolute !important;
  z-index: 1050 !important;
  margin-top: 0.125rem;
}

/* Ensure the card body doesn't clip the dropdown */
#authenticatedDashboard .card-body {
  overflow: visible !important;
}

/* Make sure the row doesn't clip dropdowns either */
#authenticatedDashboard .row {
  overflow: visible !important;
}