/* Mobile-specific styles for app_home/index.html */
/* Extracted from media queries: max-width: 768px and max-width: 480px */
/* ALL STYLES IN THIS FILE APPLY ONLY TO MOBILE DEVICES */

@media (max-width: 768px) {

/* Grid responsive adjustments */
.hero-section input[type="text"] {
  font-size: 0.9rem;
}

/* Make trending programs 2 columns on mobile tablets */
.trending-programs-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
}

/* Stack weekly sessions and training 101 on mobile */
.weekly-content-grid {
  grid-template-columns: 1fr !important;
  gap: 2rem !important;
}

/* Mobile-specific toggle style */
.section-toggle {
  background: transparent;
  border-radius: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  justify-content: center;
  gap: 2rem;
}

.toggle-btn {
  background: transparent !important;
  border-radius: 0 !important;
  transform: none !important;
  position: relative;
  padding: 1rem 0 0.75rem 0;
}

.toggle-btn.active {
  background: transparent !important;
}

.toggle-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #FFD700;
}

/* Responsive adjustments */
/* Prevent horizontal scrolling and ensure content visibility */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  position: relative;
}

/* Reset any margins that might push content down */
* {
  box-sizing: border-box;
}

/* Force all mobile content to stay within content area */
.homepage-container,
.hero-section,
.recent-activity,
.trending-header,
.features-grid,
.stats-section {
  box-sizing: border-box !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Fix content positioning and centering - highest specificity */
body .content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: calc(76px + env(safe-area-inset-top)) !important;
  position: relative;
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Override main CSS container rules on mobile */
.main-content-wrapper,
.hero-section,
.recent-activity,
.weekly-content-grid,
.features-grid,
.stats-section,
.trending-section {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Ensure main-content doesn't add extra margins */
body .content .main-content {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  max-width: 100%;
}

.hero-title {
  font-size: 2rem !important;
  text-align: center;
  padding: 0;
  margin: 0 0 1rem 0 !important;
  line-height: 1.2;
}

.hero-subtitle {
  display: block !important;
  font-size: 0.95rem !important;
  padding: 0;
  margin: 0 auto 1.5rem auto !important;
  text-align: center;
  max-width: 90%;
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.4 !important;
}

/* Search bar mobile fixes */
.hero-section > div {
  max-width: calc(100vw - 1rem) !important;
  margin: 1rem auto !important;
  padding: 0 !important;
}

.hero-section > div > div {
  padding: 0.5rem 0.75rem !important;
  margin: 0 !important;
}

.features-grid {
  grid-template-columns: 1fr;
  max-width: 100%;
  overflow-x: hidden;
}

.stats-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Trending programs mobile - 2 columns for tablets */
.trending-programs-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
  max-width: 100%;
  overflow-x: hidden;
}

/* Weekly content grid mobile */
.weekly-content-grid {
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0 0 2rem 0 !important;
  padding: 0 !important;
}

/* Fix main content alignment - equal margins */
.content {
  margin-left: 0 !important;
  padding: 8px !important;
}

/* Hero section mobile positioning - ensure it's the first visible element */
.hero-section {
  padding: 2rem 1rem !important;
  margin: 0 0 1.5rem 0 !important;
  position: relative;
  top: 0;
  order: -1;
  /* Keep the background image on mobile */
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), 
              url('/static/images/plc_playerlight_02.jpg') center/cover no-repeat !important;
  border-radius: 16px !important;
  min-height: 280px !important;
}

/* Section toggle mobile - inline with underline style */
.section-toggle {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 1rem !important;
  width: 100% !important;
  justify-content: center !important;
  gap: 2rem !important;
}

.toggle-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.75rem 0 !important;
  position: relative !important;
  font-size: 1rem !important;
}

.toggle-btn.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: #FFD700 !important;
}

/* Activity section mobile fixes */
.recent-activity {
  margin: 0 0 2rem 0 !important;
  max-width: 100vw;
  overflow-x: hidden;
  padding: 1rem !important;
}

/* Activity container mobile alignment */
.activity-container {
  margin: 0 -1rem !important;
  padding: 0 1rem !important;
}


/* Activity header mobile - remove entirely */
.recent-activity > div:first-child {
  display: none !important;
}

/* Filter tabs mobile - hide entirely */
.recent-activity > div:nth-child(2) {
  display: none !important;
}

/* Table header mobile - hide on small screens */
.recent-activity > div:nth-child(3) {
  display: none !important;
}

/* Activity items mobile - clean card layout */
.activity-item {
  display: block !important;
  padding: 1rem !important;
  margin: 0 0 0.75rem 0 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}


/* Activity table mobile layout - 2 columns */
.activity-item {
  grid-template-columns: 1fr 2.5fr !important;
  gap: 0.5rem !important;
  padding: 0.75rem !important;
}

/* Activity item content mobile */
.activity-item > div:nth-child(2) {
  margin-bottom: 0.75rem !important;
}

.activity-item > div:nth-child(1) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  margin-bottom: 0.5rem !important;
  gap: 2px !important;
}

/* Show mobile time placeholder only on mobile */
.mobile-time-placeholder {
  display: block !important;
}

/* Ensure activity items are visible on mobile */
.activity-item:nth-child(-n+6) {
  display: grid !important;
}

/* Make activity section fully visible */
#activity-section {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 200px !important;
}

.activity-item > div:nth-child(6) {
  display: flex !important;
  justify-content: flex-end !important;
}

/* Hide table columns on mobile */
.activity-item > div:nth-child(3),
.activity-item > div:nth-child(4),
.activity-item > div:nth-child(5) {
  display: none !important;
}

/* Trending section mobile fixes - consistent spacing */
.trending-programs-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure trending section is visible */
div[style*="margin-bottom: 4rem"] {
  margin: 0 0 2rem 0 !important;
  padding: 0 !important;
}

/* Trending buttons mobile - ensure they show */
div[style*="justify-content: space-between"] > div {
  display: flex !important;
  gap: 0.25rem !important;
  flex-wrap: wrap !important;
}

div[style*="justify-content: space-between"] button {
  padding: 0.25rem 0.75rem !important;
  font-size: 0.75rem !important;
  white-space: nowrap !important;
}

/* Stats grid mobile - show all 4 items in 2x2 grid */
.stats-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
}

.stat-item {
  text-align: center !important;
  padding: 0.75rem !important;
}

.stat-number {
  font-size: 1.8rem !important;
}

.stat-label {
  font-size: 0.75rem !important;
}

/* Trending header mobile */
.trending-header {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 1rem !important;
}

.trending-header h2 {
  font-size: 1.4rem !important;
}

.trending-header > div {
  display: flex !important;
  gap: 0.5rem !important;
  justify-content: center !important;
}

/* Mobile content sections spacing - work within content padding */
.homepage-container {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Hero section mobile styling - work within content area */
.hero-section {
  margin: 0 0 1rem 0 !important;
  padding: 1.5rem 0 !important;
  min-height: auto;
  width: 100%;
  max-width: 100%;
  background: transparent;
  box-sizing: border-box;
  text-align: center;
}

}

/* Small phones - match base.css breakpoint */
/* Additional styles for very small screens (max-width: 480px) */
@media (max-width: 480px) {
  body .content {
    padding-top: calc(68px + env(safe-area-inset-top)) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  /* Very small screens - single column for trending programs */
  .trending-programs-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}