/* =========================
   Stable PS5-style hub (no grid-span reflow)
   ========================= */

.server-hub{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;      /* default equal */
  gap:20px;

  max-width:2000px;
  margin:0 auto;
  padding:40px 20px;

  transition: grid-template-columns .28s ease;
}

/* Base tile */
.tile{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  aspect-ratio:16 / 9;
  width:100%;

  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    opacity .2s ease;
}

/* Hover polish (no layout changes) */
.tile:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 16px 40px rgba(0,0,0,0.55);
}

/* Gradient overlay */
.tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.05)
  );
  pointer-events:none;
}

/* Media (image/video) */
.tile img,
.tile video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition: opacity .25s ease, transform .35s ease;
}

.tile video{ opacity:0; }

/* Crossfade image -> video */
.tile:hover video{ opacity:1; }
.tile:hover img{ opacity:0; }

/* Slight cinematic zoom */
.tile:hover img,
.tile:hover video{ transform:scale(1.05); }

/* Title overlay (keep if you want it) */
.tile .title{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  font-size:1.6rem;
  font-weight:600;
  color:white;

  opacity:0;
  background:rgba(0,0,0,0.35);
  transition:opacity .25s ease;
  pointer-events:none;
}

.tile:hover .title{ opacity:1; }

/* Dim others when hovering within hub */
.server-hub:hover .tile{ opacity:0.70; }
.server-hub:hover .tile:hover{ opacity:1; }

/* ===== PS5-style column growth (controlled by classes) ===== */
.server-hub.focus-1{ grid-template-columns: 1.7fr 1fr 1fr; }
.server-hub.focus-2{ grid-template-columns: 1fr 1.7fr 1fr; }
.server-hub.focus-3{ grid-template-columns: 1fr 1fr 1.7fr; }

/* 2 columns on typical laptops/tablets */
@media (max-width: 1100px){
  .server-hub{
    grid-template-columns:repeat(2, minmax(240px, 1fr));
    transition:none;
  }
  .server-hub.focus-1,
  .server-hub.focus-2,
  .server-hub.focus-3{
    grid-template-columns:repeat(2, minmax(240px, 1fr));
  }
}

/* 1 column on phones */
@media (max-width: 700px){
  .server-hub{
    grid-template-columns:1fr;
  }
  .server-hub.focus-1,
  .server-hub.focus-2,
  .server-hub.focus-3{
    grid-template-columns:1fr;
  }
}