/* Games landing styles */
@layer components {
  .games-hero{
    position:relative;
    display:block;
    overflow:hidden;
    padding:clamp(1.2rem,3.2vh,1.9rem) 0 clamp(1.5rem,4vh,2.3rem);
    background:
      linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(249,249,250,.97) 58%, rgba(249,249,250,.94) 100%),
      var(--hero-art-layer, url("../img/brand/23-hero-general-light.png")) right -120px center / min(42vw, 420px) auto no-repeat,
      var(--brand-canvas, #f9f9fa);
    border-bottom:1px solid color-mix(in srgb,var(--brand-midnight, #091f3b) 10%, transparent);
    box-shadow:none;
    color:var(--brand-midnight, #091f3b);
  }
  .hero.hero--games.games-hero{
    display:block;
    background:
      linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(249,249,250,.97) 58%, rgba(249,249,250,.94) 100%),
      var(--hero-art-layer, url("../img/brand/23-hero-general-light.png")) right -120px center / min(42vw, 420px) auto no-repeat,
      var(--brand-canvas, #f9f9fa);
    border-bottom:1px solid color-mix(in srgb,var(--brand-midnight, #091f3b) 10%, transparent);
    box-shadow:none;
    color:var(--brand-midnight, #091f3b);
  }
  .games-hero .wrapper,
  .hero.hero--games.games-hero .wrapper{
    max-width:var(--container-max);
    display:grid;
    gap:10px;
    padding-block:0;
    text-align:left;
  }
  .games-hero .hero-eyebrow{
    margin:0;
    opacity:1;
    transform:none;
    animation:none;
  }
  .games-hero h1{
    margin:0;
    font-size:clamp(2.4rem, 7vw, 4.9rem);
    line-height:.98;
    letter-spacing:0;
  }
  .games-hero-copy{
    display:grid;
    gap:10px;
    max-width:56rem;
  }
  .games-hero-lead{
    margin:0;
    max-width:62rem;
    color:var(--brand-graphite, var(--text-muted));
    font-size:clamp(1rem, 2vw, 1.22rem);
    line-height:1.56;
  }

  .games-section{
    padding:clamp(2.8rem,6vh,3.6rem) 0;
  }
  .games-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(112.8px,132px));
    justify-content:start;
    gap:clamp(10px,1.8vw,14px);
    align-items:start;
    overflow:visible;
  }
  .game-card{
    position:relative;
    display:block;
    min-width:0;
    border-radius:8px;
    border:0;
    background:transparent;
    box-shadow:none;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  }
  .game-card:hover,
  .game-card:focus-within{
    z-index:30;
    transform:translateY(-1px);
    background:color-mix(in srgb,var(--brand-signal-blue, var(--primary)) 5%, transparent);
    box-shadow:none;
    outline:none;
  }
  .game-card > a{
    color:inherit;
    text-decoration:none;
  }
  .game-launch-card{
    position:relative;
    display:grid;
    min-height:132px;
    height:100%;
    gap:5px;
    justify-items:center;
    align-content:center;
    padding:8px 5px;
    text-align:center;
  }
  .game-icon{
    width:76.8px;
    height:76.8px;
    border-radius:10px;
    background:transparent;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--brand-signal-blue, var(--primary));
    box-shadow:none;
    flex-shrink:0;
  }
  .game-icon svg{
    width:43.2px;
    height:43.2px;
    color:currentColor;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .game-icon .icon-fill{
    fill:currentColor;
    stroke:none;
  }
  .game-card-main{
    display:grid;
    gap:4px;
    min-width:0;
  }
  .game-card-title{
    margin:0;
    color:var(--brand-midnight, var(--text-light));
    max-width:124.8px;
    font-size:.78rem;
    font-weight:760;
    line-height:1.12;
    letter-spacing:0;
    overflow-wrap:anywhere;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .game-card-details{
    position:absolute;
    z-index:20;
    top:calc(100% + 8px);
    left:50%;
    display:grid;
    width:min(280px, calc(100vw - 24px));
    gap:8px;
    padding:9px 10px;
    border-radius:8px;
    border:1px solid color-mix(in srgb,var(--brand-midnight, #091f3b) 14%, transparent);
    background:#fff;
    box-shadow:0 12px 28px rgba(9,31,59,.14);
    color:var(--brand-midnight, var(--text-light));
    text-align:left;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(-50%, 4px);
    transition:opacity .16s ease, visibility .16s ease, transform .16s ease;
  }
  .game-card-details::before{
    content:"";
    position:absolute;
    top:-6px;
    left:50%;
    width:12px;
    height:12px;
    border-left:1px solid color-mix(in srgb,var(--brand-midnight, #091f3b) 14%, transparent);
    border-top:1px solid color-mix(in srgb,var(--brand-midnight, #091f3b) 14%, transparent);
    background:#fff;
    transform:translateX(-50%) rotate(45deg);
  }
  .game-card:hover .game-card-details,
  .game-card:focus-within .game-card-details{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%, 0);
  }
  .game-card-summary{
    color:var(--brand-slate, var(--text-muted));
    font-size:.8rem;
    line-height:1.4;
  }
  .game-card-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .game-pill{
    padding:5px 8px;
    border-radius:8px;
    background:color-mix(in srgb,var(--brand-mist, #eef2f7) 66%, #ffffff 34%);
    border:1px solid color-mix(in srgb,var(--brand-midnight, #091f3b) 10%, transparent);
    color:var(--brand-midnight, var(--text-light));
    font-size:.75rem;
    font-weight:700;
    line-height:1.15;
    letter-spacing:0;
  }

  @media (max-width: 640px){
    .games-hero,
    .hero.hero--games.games-hero{
      padding:clamp(1rem,3.4vh,1.4rem) 0 clamp(1.1rem,3.8vh,1.55rem);
      background:
        linear-gradient(180deg, rgba(255,255,255,.99), rgba(249,249,250,.96)),
        var(--hero-art-layer, url("../img/brand/23-hero-general-light.png")) right -140px center / 320px auto no-repeat,
        var(--brand-canvas, #f9f9fa);
    }
    .games-hero .wrapper,
    .hero.hero--games.games-hero .wrapper{
      text-align:center;
    }
    .games-hero-copy{
      max-width:32rem;
      margin-inline:auto;
    }
    .games-grid{
      grid-template-columns:repeat(auto-fill,minmax(108px,1fr));
      justify-content:stretch;
    }
  }
}