/**
 * Single Game Main Content Styles
 * 2-column layout with main content blocks
 * 
 * @package GeneratePress_Child
 * @version 1.8.0
 */

/* ==========================================================================
   Single Game Layout
   ========================================================================== */

/* Reset parent theme containers that might interfere */
.gpcc-skin .inside-article {
  display: block;
  /* Remove any grid/flex from parent */
  grid-template-columns: none;
  flex-direction: initial;
  background-color: #1a2642; /* per request */
  padding-top: 24px;
  padding-bottom: 24px;
}

/* Force single games to not have sidebar layout */
.single-games .gpcc-skin .site-content,
.single-games .gpcc-skin .main,
.single-games .gpcc-skin .inside-article,
.single-game_v2 .gpcc-skin .site-content,
.single-game_v2 .gpcc-skin .main,
.single-game_v2 .gpcc-skin .inside-article {
  /* Override any parent theme 2-3 column layouts */
  display: block;
  grid-template-columns: none;
  flex-direction: initial;
}

/* Hide any potential sidebars on single games */
.single-games .sidebar,
.single-games .widget-area,
.single-games .secondary,
.single-games .site-sidebar,
.single-game_v2 .sidebar,
.single-game_v2 .widget-area,
.single-game_v2 .secondary,
.single-game_v2 .site-sidebar {
  display: none;
}

/* Wrapper should not look like a card and no outer padding */
.gpcc-skin .gpcc-single,
.gpcc-skin .gpcc-single__grid {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.gpcc-skin .gpcc-single__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
  /* remove any parent padding */
  padding: 0;
  grid-template-areas: none;
  width: 100%;
  box-sizing: border-box;
}

/* Fallback: hide GP page header/featured image on single games */
.gpcc-skin.is-singular-games .page-header-image-single,
.gpcc-skin.is-singular-games .featured-image { display: none; }

/* Desktop 2-column layout - more specific selector */
@media (min-width: 1024px) {
  .single-games .gpcc-skin .gpcc-single__grid,
  .single-game_v2 .gpcc-skin .gpcc-single__grid {
    grid-template-columns: 1fr 320px;
    gap: var(--gap);
    grid-template-areas: "main aside";
  }
  
  .single-games .gpcc-skin .gpcc-single__main,
  .single-game_v2 .gpcc-skin .gpcc-single__main {
    grid-area: main;
  }
  
  .single-games .gpcc-skin .gpcc-single__aside,
  .single-game_v2 .gpcc-skin .gpcc-single__aside {
    grid-area: aside;
  }
  
  /* Ensure no extra columns from parent theme */
  .single-games .site-content,
  .single-games .main,
  .single-games .content-area,
  .single-game_v2 .site-content,
  .single-game_v2 .main,
  .single-game_v2 .content-area {
    grid-template-columns: 1fr;
    flex-direction: column;
  }
}

@media (min-width: 1024px) {
  .gpcc-skin.is-singular-games .gpcc-single__grid,
  .gpcc-skin.is-singular-game_v2 .gpcc-single__grid,
  body.single-game_v2 .gpcc-skin .gpcc-single__grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: var(--gap);
    row-gap: var(--gap);
  }
  .gpcc-skin.is-singular-games .gpcc-single__main,
  .gpcc-skin.is-singular-game_v2 .gpcc-single__main,
  body.single-game_v2 .gpcc-skin .gpcc-single__main { 
    grid-area: auto; 
  }
  .gpcc-skin.is-singular-games .gpcc-single__aside,
  .gpcc-skin.is-singular-game_v2 .gpcc-single__aside,
  body.single-game_v2 .gpcc-skin .gpcc-single__aside { 
    grid-area: auto; 
  }
}

/* ==========================================================================
   Main Content Area
   ========================================================================== */

.gpcc-skin .gpcc-single__main {
  min-width: 0; /* Prevent overflow */
  width: 100%;
  /* Override any parent theme flex/grid interference */
  flex: none;
  padding-left: 0;
  padding-right: 0;
}

.gpcc-skin .gpcc-single__aside {
  min-width: 0; /* Prevent overflow */
  width: 100%;
  /* Override any parent theme flex/grid interference */
  flex: none;
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
   Content Blocks
   ========================================================================== */

.gpcc-skin .gpcc-block {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: var(--gap);
  margin-bottom: var(--gap);
}

.gpcc-skin .gpcc-block:first-child {
  margin-top: 0;
}

.gpcc-skin .gpcc-block:last-child {
  margin-bottom: 0;
}

/* First block should not create a big gap under hero */
.gpcc-skin .gpcc-single__main > .gpcc-block:first-child {
  margin-top: 0;
}

.gpcc-skin .gpcc-block__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text);
  margin: 0 0 var(--gap-sm) 0;
  line-height: var(--leading-tight);
}

/* ==========================================================================
   Horizontal Screenshots Slider
   ========================================================================== */

.gpcc-skin .gpcc-snap-container {
  position: relative;
}

.gpcc-skin .gpcc-snap {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: calc(var(--gap) / 3);
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted) transparent;
  border-radius: 0;
}

.gpcc-skin .gpcc-snap::-webkit-scrollbar {
  height: 6px;
}

.gpcc-skin .gpcc-snap::-webkit-scrollbar-track {
  background: transparent;
}

.gpcc-skin .gpcc-snap::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 3px;
}

.gpcc-skin .gpcc-snap::-webkit-scrollbar-thumb:hover {
  background: var(--text);
}

.gpcc-skin .gpcc-snap__item {
  scroll-snap-align: start;
  min-width: clamp(220px, 30vw, 360px);
  flex-shrink: 0;
  text-decoration: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-fast);
  height: 200px;
}

.gpcc-skin .gpcc-snap__item:hover {
  transform: translateY(-2px);
}

.gpcc-skin .gpcc-snap__item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.gpcc-skin .gpcc-snap__image {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Navigation buttons */
.gpcc-skin .gpcc-snap__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  opacity: 0.8;
}

.gpcc-skin .gpcc-snap__nav:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.9);
}

.gpcc-skin .gpcc-snap__nav:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.gpcc-skin .gpcc-snap__nav--prev {
  left: 8px;
}

.gpcc-skin .gpcc-snap__nav--next {
  right: 8px;
}

/* Hide nav buttons on small screens */
@media (max-width: 768px) {
  .gpcc-skin .gpcc-snap__nav {
    display: none;
  }
}

/* Uniform screenshot heights for slider */
@media (max-width: 1023px) {
  .gpcc-skin .gpcc-snap__item { height: 180px; }
}

@media (max-width: 768px) {
  .gpcc-skin .gpcc-snap__item { height: 150px; }
}

@media (min-width: 1600px) {
  .gpcc-skin .gpcc-snap__item { height: 220px; }
}

/* Ensure rounded corners come from the item wrapper */
.gpcc-skin .gpcc-snap__item { border-radius: var(--radius-lg); overflow: hidden; }

/* ==========================================================================
   Single Panel (when only one content)
   ========================================================================== */

.gpcc-skin .gpcc-single-panel__content {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text);
}

.gpcc-skin .gpcc-single-panel__content p {
  margin: 0 0 var(--gap-sm) 0;
}

.gpcc-skin .gpcc-single-panel__content p:last-child {
  margin-bottom: 0;
}

.gpcc-skin .gpcc-single-panel__content h3,
.gpcc-skin .gpcc-single-panel__content h4,
.gpcc-skin .gpcc-single-panel__content h5 {
  color: var(--text);
  font-weight: var(--font-semibold);
  margin: var(--gap) 0 var(--gap-sm) 0;
}

.gpcc-skin .gpcc-single-panel__content h3:first-child,
.gpcc-skin .gpcc-single-panel__content h4:first-child,
.gpcc-skin .gpcc-single-panel__content h5:first-child {
  margin-top: 0;
}

.gpcc-skin .gpcc-single-panel__content ul,
.gpcc-skin .gpcc-single-panel__content ol {
  margin: 0 0 var(--gap-sm) 0;
  padding-left: var(--gap);
}

.gpcc-skin .gpcc-single-panel__content li {
  margin-bottom: calc(var(--gap-xs) / 2);
}

.gpcc-skin .gpcc-single-panel__content a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.gpcc-skin .gpcc-single-panel__content a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.gpcc-skin .gpcc-single-panel__content a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Read More toggle (main content)
   ========================================================================== */

.gpcc-skin .gpcc-readmore-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.gpcc-skin .gpcc-readmore-toggle:hover {
  background: var(--surface-2);
}

.gpcc-skin .gpcc-readmore-toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

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

@media (max-width: 1023px) {
  .gpcc-skin .gpcc-single__grid {
    grid-template-columns: 1fr;
  }
  
  .gpcc-skin .gpcc-single__main {
    order: 1;
  }
  
  .gpcc-skin .gpcc-single__aside {
    order: 2;
  }
}

@media (max-width: 768px) {
  .gpcc-skin .gpcc-single {
    padding: 0 var(--gap-sm);
  }
  
  .gpcc-skin .gpcc-block {
    padding: var(--gap-sm);
    margin-bottom: var(--gap-sm);
  }
  
  .gpcc-skin .gpcc-block__title {
    font-size: var(--text-xl);
  }
  
  .gpcc-skin .gpcc-snap__item {
    min-width: clamp(180px, 40vw, 280px);
  }
}

/* ==========================================================================
   Screenshot Slider Navigation
   ========================================================================== */

.gpcc-skin .gpcc-snap__nav {
  display: flex;
  background: var(--surface-3);
  padding: calc(var(--gap-xs) / 2);
  border-radius: var(--radius-full);
  margin-top: var(--gap-sm);
  justify-content: center;
  gap: var(--gap-xs);
}

.gpcc-skin .gpcc-snap__nav-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: var(--surface-1);
  color: var(--text-muted);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.gpcc-skin .gpcc-snap__nav-btn:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
  transform: translateY(-1px);
}

.gpcc-skin .gpcc-snap__nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.gpcc-skin .gpcc-snap__nav-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.gpcc-skin .gpcc-snap__nav-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}