/*
Theme Name: Category Games + News
Theme URI: https://tjliebgott.com
Author: TJ Liebgott
Author URI: https://tjliebgott.com
Description: Template for the Games Category
Template: Betty Blog
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: betty-blog
*/

/* Mobile-only helper */
.betty-mobile-only { display: none; }
@media (max-width: 678px) {
  .betty-mobile-only { display: block; }
}

/* =========================
   Games Featured Overrides
   ========================= */

.games-category .betty-home-featured{
  padding-top: 0;
}

.games-category .betty-home-featured__inner{
  grid-template-columns: 2fr 1fr;
  margin-bottom: 80px;
}
.games-category .betty-home-featured__side{
  gap:0;
}
/* Rail wrapper should NOT behave like a rail on desktop */
.games-category .betty-home-featured__side-rail{
  display: block;
}

.games-category .betty-home-featured__main .betty-featured-card{
  padding: 0;
}

.games-category .betty-home-featured--games .betty-featured-card--big,
.games-category .betty-home-featured--games .betty-featured-card--side{
  padding: 0;
}

.games-category .betty-home-featured--games .betty-featured-card{
  background: none;
  border-radius: 0;
}

/* H1 in side column */
.games-category .betty-home-featured--games .betty-home-featured__side .heading-title{
  margin: 0;
}

/* =========================
   Side Cards Desktop Layout
   ========================= */

.games-category .betty-home-featured--games
.betty-featured-card--side .betty-featured-card__link{
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: var(--space-600);
  align-items: stretch;
  height: 100%;
  min-height: 90px;
}

/* Left column */
.games-category .betty-home-featured--games
.betty-featured-card--side .betty-featured-card__media{
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

.games-category .betty-home-featured--games
.betty-featured-card--side .betty-featured-card__below-media{
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  justify-self: start;
  margin: 0;
}

/* Right column */
.games-category .betty-home-featured--games
.betty-featured-card--side .betty-featured-card__body{
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0;
}

.games-category .betty-home-featured--games
.betty-featured-card--side .betty-featured-card__meta{
  margin-top: auto;
}

/* Desktop separators between side cards */
.games-category .betty-home-featured--games
.betty-featured-card--side:not(:last-child){
  border-bottom: 1px solid var(--accent);
}
.games-category .betty-home-featured--games
.betty-featured-card--side{
  padding: var(--space-800) 0;
}


/* Tighten title spacing */
.games-category .betty-home-featured--games
.betty-featured-card--side .betty-featured-card__title{
  margin: 0 0 var(--space-300) 0;
}
.cat-content .betty-home-featured__side{
  align-self: start;
}
/* =========================
   Responsive
   ========================= */

@media (max-width: 900px) {

  .games-category .betty-home-featured__inner{
    grid-template-columns: 1fr;
  }

  .games-category .betty-home-featured__main .betty-featured-card--big,
  .games-category .betty-home-featured__main .betty-featured-card--big .betty-featured-card__link,
  .games-category .betty-home-featured__main .betty-featured-card--big .betty-featured-card__media,
  .games-category .betty-home-featured__main .betty-featured-card--big .betty-featured-card__img{
    height: auto;
  }
}

/* =========================
   Mobile: Full-width + Rail
   ========================= */

@media (max-width: 678px) {

  /* FULL BLEED featured section */
  .games-category .betty-home-featured{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* Remove inner constraints so big card can be full width */
  .games-category .betty-home-featured__inner{
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;

    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-800);
    margin-bottom: var(--space-800);

    overflow-x: hidden;
  }

  .games-category .betty-home-featured__main,
  .games-category .betty-home-featured__side{
    display: block;
    width: 100%;
    overflow-x: hidden;
    touch-action: pan-y;
  }

  /* HARD force the BIG featured card to never cap */
  .games-category .betty-home-featured__main .betty-featured-card--big,
  .games-category .betty-home-featured__main .betty-featured-card--big .betty-featured-card__link{
    width: 100%;
    max-width: none;
  }

  /* =========================
     Side Featured Rail (peek)
     ========================= */

  .games-category .betty-home-featured__side-rail{
    display: flex;
    gap: var(--betty-gap);

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--container-pad);

    padding-bottom: var(--space-300);

    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }

  .games-category .betty-home-featured__side-rail::-webkit-scrollbar{
    display: none;
  }
  .games-category .betty-home-featured__side-rail{
    scrollbar-width: none;
  }

  /* Peek effect: next card shows */
  .games-category .betty-home-featured__side-rail .betty-featured-card--side{
    flex: 0 0 82%;
    width: 82%;
    max-width: 82%;
    scroll-snap-align: start;
  }

  /* Side cards become block layout on mobile */
  .games-category .betty-home-featured--games
  .betty-featured-card--side .betty-featured-card__link{
    display: block;
    height: auto;
  }

  .games-category .betty-home-featured--games
  .betty-featured-card--side .betty-featured-card__img{
    display: block;
    width: 100%;
    border-radius: var(--space-200);
    aspect-ratio: 21 / 9;
    object-fit: cover;
  }

  /* Pill spacing in rail (match your example tighter) */
  .games-category .betty-home-featured__side-rail .betty-featured-card__below-media{
    margin: 0;
    padding-top: var(--space-300); /* tighter than 600 */
  }

  .games-category .betty-home-featured__side-rail .betty-featured-card__below-media .betty-pill{
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 2px 10px;
    line-height: 1.2;
  }

  .games-category .betty-home-featured--games
  .betty-featured-card--side .betty-featured-card__body{
    padding: var(--space-300) 0 0;
  }

  /* Remove desktop separators on mobile */
  .games-category .betty-home-featured--games
  .betty-featured-card--side:not(:last-child){
    border-bottom: 0;
    padding-bottom: 0;
  }
}