/* West Georgia Misfits — DESKTOP layout.
 *
 * Loaded as <link media="(min-width:1241px)">, so nothing in here can reach a
 * stacked viewport no matter what it selects. That is the point: the nav row,
 * the More dropdown card and the four-column footer used to sit in the shared
 * cascade and be un-styled again by a max-width block 60 lines later, which is
 * how a phone fix kept landing on desktop and vice versa. The "undo" rules do
 * not exist any more — the base simply is not there below 1241px.
 *
 * The only @media allowed in this file is (min-width:1440px) for a wide tier,
 * plus the feature queries (hover/pointer/resolution/print) that modify rules
 * living here. scripts/check-layout.mjs enforces that.
 */

/* ---------- header: the full-size link row ---------- */
.nav-links{display:flex;flex-wrap:wrap;align-items:stretch;margin-left:auto}
.nav-toggle{display:none}
/* "More" disclosure, as a real dropdown card. Below the break this is not a
   disclosure at all — the panel is already a stack, so the More links are
   simply more rows in it — which is why none of this belongs in the shared
   sheet. */
.nav-more-wrap{position:relative;display:flex;align-items:stretch}
.nav-more-menu{
  position:absolute;top:100%;right:0;z-index:var(--z-header);min-width:196px;
  display:flex;flex-direction:column;
  /* Opaque on purpose: at .98 the score ticker's text still ghosted through
     the LIVE row, because the header's backdrop-filter composites the card
     against the blurred ticker rather than the page. */
  background:#0b0b0d;border:1px solid var(--line);border-top:0;
  box-shadow:0 18px 40px rgba(0,0,0,.5);isolation:isolate;
}
.nav-more-menu a{padding:13px 16px;border-bottom:1px solid var(--line)}

/* ---------- footer ---------- */
/* Four columns is a desktop measure. mobile.css keeps them at 1025-1240 and
   collapses to two at its own tiers. */
.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}

/* ---------- roster cards: hover choreography ---------- */
/* Still gated on a fine pointer: a >=1241px viewport can still be a
   touchscreen, and :hover sticks there after a tap. */
@media (hover:hover) and (pointer:fine){
  .player-card:hover{
    border-color:rgb(var(--red-rgb) / .55);
    transform:translateY(-5px);
    box-shadow:0 18px 36px rgba(0,0,0,.45), 0 0 0 1px rgb(var(--red-rgb) / .12);
  }
  .player-card:hover::before{transform:scaleX(1)}
  .player-card:hover .pc-photo > img,
  .player-card:hover .pc-photo .pc-ph{transform:scale(1.1)}
  .player-card:hover .pc-photo::after{
    opacity:1;
    background:
      linear-gradient(180deg,rgb(var(--red-rgb) / .16) 0%,transparent 38%,rgba(0,0,0,.7) 100%),
      linear-gradient(135deg,rgb(var(--red-rgb) / .2),transparent 50%);
  }
  .player-card:hover .pc-ph img{opacity:.7;transform:scale(1.06)}
  .player-card:hover .pc-num{
    transform:skewX(var(--skew)) scale(1.1) translate(-1px,-2px);
    box-shadow:0 10px 22px rgb(var(--red-rgb) / .45);
  }
  .player-card:hover .pc-meta{transform:translateY(-2px)}
  .player-card:hover b{letter-spacing:.06em}
  .player-card:hover .pc-squad{color:var(--silver)}
  /* Active cards are <a class="player-card"> links, so this IS the focused
     element. The 1px red-tinted border it used to substitute for the ring
     blends to ~#730E1F over --ink: 1.7:1, i.e. no visible focus at all. */
  .player-card:focus-within{
    border-color:rgb(var(--red-rgb) / .55);
    outline:2px solid var(--white);outline-offset:2px;
  }
}
@media (hover:hover) and (pointer:fine){
  .roster-inactive .player-card:hover{
    transform:none;box-shadow:none;border-color:var(--line);
  }
  .roster-inactive .player-card:hover::before{transform:scaleX(0)}
  .roster-inactive .player-card:hover .pc-photo > img,
  .roster-inactive .player-card:hover .pc-photo .pc-ph{transform:none}
  .roster-inactive .player-card:hover .pc-num{
    transform:skewX(var(--skew));box-shadow:0 6px 16px rgba(0,0,0,.35);
  }
}

/* ---------- hero rungs ---------- */
/* The 1600px rung, for the arm of the old two-arm query that lived above the
   break: (min-width:1101px) and (max-resolution:1.5dppx). A 2x desktop keeps
   the 2400px master. See mobile.css for the full explanation of why these are
   media queries and not image-set(). */
@media (max-resolution:1.5dppx){
  .soc-hero{--hero-img:url("/assets/img/social-hero-1600.webp")}
  .sc-hero{--hero-img:url("/assets/img/scores-hero-1600.webp")}
  .cal-hero{--hero-img:url("/assets/img/calendar-hero-1600.webp")}
  .ro-hero{--hero-img:url("/assets/img/roster-hero-1600.webp")}
  .ph-hero{--hero-img:url("/assets/img/photos-hero-1600.webp")}
  .jn-hero{--hero-img:url("/assets/img/join-hero-1600.webp")}
  .og-hero{--hero-img:url("/assets/img/calendar-hero-1600.webp")}
  .sp-hero{--hero-img:url("/assets/img/sponsors-hero-1600.webp")}
}