/* ============================================
   Layout: Full-width (no sidebar)
   ============================================ */

/* Main wrapper */
.cg-main {
  min-height: calc(100vh - var(--cg-header-height) - var(--cg-tab-bar-height));
  background-color: var(--cg-bg-primary);
  padding-top: var(--cg-spacing-lg);
  padding-bottom: var(--cg-spacing-2xl);
}

/* Container */
.cg-container {
  max-width: var(--cg-container-max-width);
  margin: 0 auto;
  padding: 0 var(--cg-spacing-lg);
}

/* Section title */
.cg-section-title {
  font-size: var(--cg-font-size-xl);
  font-weight: var(--cg-font-weight-bold);
  color: var(--cg-text-primary);
  margin-bottom: var(--cg-spacing-lg);
}

.cg-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--cg-spacing-lg);
}

.cg-section-link {
  font-size: var(--cg-font-size-sm);
  color: var(--cg-primary);
  font-weight: var(--cg-font-weight-medium);
}

.cg-section-link:hover {
  color: var(--cg-primary-light);
  text-decoration: underline;
}

/* ============================================
   Sliders (Recently Played, Recommended)
   ============================================ */

.cg-slider-section {
  margin-bottom: var(--cg-spacing-2xl);
  background-color: var(--cg-bg-secondary);
  border-radius: var(--cg-radius-lg);
  padding: var(--cg-spacing-xl);
  border: 1px solid var(--cg-border-light);
}

.cg-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--cg-spacing-md);
}

.cg-slider-title {
  font-size: var(--cg-font-size-lg);
  font-weight: var(--cg-font-weight-semibold);
  color: var(--cg-text-primary);
}

.cg-slider-controls {
  display: flex;
  gap: var(--cg-spacing-xs);
}

.cg-slider-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--cg-radius-md);
  border: 1px solid var(--cg-border);
  background: var(--cg-bg-primary);
  color: var(--cg-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: all var(--cg-transition-base);
}

.cg-slider-btn:hover:not(:disabled) {
  background: var(--cg-primary);
  border-color: var(--cg-primary);
  color: #ffffff;
}

.cg-slider-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cg-slider-viewport {
  overflow: hidden;
}

.cg-slider-container {
  overflow: hidden;
}

.cg-slider-track {
  display: flex;
  gap: var(--cg-spacing-md);
  transition: transform 0.35s ease;
}

/* Horizontal section (Recently Played, Recommended) */
.cg-horizontal-section {
  margin-bottom: var(--cg-spacing-2xl);
}

/* Detail page containers */
.cg-container-hero {
  max-width: var(--cg-container-max-width);
  margin: 0 auto;
  padding: 0 var(--cg-spacing-lg);
}

.cg-container-v {
  max-width: var(--cg-container-max-width);
  margin: 0 auto;
  padding: var(--cg-spacing-xl) var(--cg-spacing-lg) var(--cg-spacing-2xl);
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
  .cg-main {
    padding-top: var(--cg-spacing-md);
  }

  .cg-container {
    padding: 0 var(--cg-spacing-md);
  }

  .cg-slider-section {
    padding: var(--cg-spacing-md);
    border-radius: var(--cg-radius-md);
  }
}