/* ---------- BASE ---------- */
body{
  margin:0;
  font-family:system-ui,"Segoe UI",Arial,sans-serif;
  background:url("wall.png");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  color:#111;
  min-height:100vh;
  overflow-y:auto; /* allow scrolling */
}

/* ---------- PAGE WRAPPER ---------- */
.wholepage{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  min-height:100vh;
}

/* ---------- HEADER ---------- */
.glass-header{
  display:flex;
  align-items:center;
  justify-content:center;

  width:90%;
  max-width:1200px;
  height:10vh;
  margin-top:2vh;

  font-size:2vw;
  font-weight:700;
  color:#fff;

  border-radius:10vh;
  background:rgba(70,70,70,.45);
  backdrop-filter:blur(14px);

  border:.1vh solid rgba(255,255,255,.25);
  box-shadow:
    inset 0 .1vh 0 rgba(255,255,255,.35),
    0 2vh 4vh rgba(0,0,0,.35);
}

/* ---------- CONTAINER ---------- */
.container{
  display:flex;
  flex-wrap:wrap;           /* allow wrapping to next row */
  justify-content:center;
  gap:4vw;

  width:90%;
  max-width:1200px;
  margin:2vh 0;
}

/* ---------- CARD ---------- */
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  flex: 1 1 calc(33.333% - 4vw); /* max 3 per row */
  max-width: 25vw;
  min-width:250px;
  height:60vh;

  background:#1b2130;
  border-radius:2vw;
  overflow:hidden;

  box-shadow:0 1vh 3vh rgba(0,0,0,.6);
  transition:.25s;
}

.card:hover{
  transform:translateY(-.6vh) scale(1.02);
}

/* ---------- IMAGE ---------- */
.thumbnail{
  width:100%;
  height:30vh;
  object-fit:cover;
}

/* ---------- CONTENT ---------- */
.content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  width:100%;
  height:30vh;
  padding:0.5em;
}

/* ---------- TITLE ---------- */
.title{
  width:100%;
  text-align:center;

  font-size:1.4vw;
  font-weight:600;
  color:#fff;
  margin-bottom:0.5em;
}

/* ---------- DESCRIPTION ---------- */
.desc{
  width:100%;
  text-align:center;
  font-size:1vw;
  color:#fff;
  opacity:.85;
  margin-bottom:1em;
}

/* ---------- BUTTON ROW ---------- */
.buttons{
  display:flex;
  justify-content:center;
  gap:1vw;
  flex-wrap:wrap;
}

/* ---------- BUTTON ---------- */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;

  min-width:100px;
  padding:0.5em 1em;

  border-radius:1vh;
  text-decoration:none;

  font-size:.95vw;
  font-weight:600;
  transition:.2s;
}

/* ---------- BUTTON COLORS ---------- */
.watch{
  background:#ff0033;
  color:#fff;
}

.watch:hover{
  background:#cc0028;
}

.details{
  background:#2a3145;
  color:#fff;
}

.details:hover{
  background:#3a4461;
}

/* ---------- FOOTER ---------- */
footer{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  height:6vh;

  font-size:.9vw;
  color:#fff;
  opacity:.6;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
  .card{
    flex:1 1 calc(50% - 4vw); /* 2 per row */
  }
}

@media(max-width:600px){
  .card{
    flex:1 1 100%; /* 1 per row */
  }
}