/* ===== Background: covers any screen ===== */
html, body { height: 100%; margin: 0; }
body{
  background:
    radial-gradient(1200px 700px at 15% 0%, #ffffff 0%, #f6f7f8 40%, #eef1f4 85%),
    url('../images/Background.png') center / cover no-repeat fixed;
  color:#111;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ===== Titles ===== */
.title{ text-align:center; margin: 18px 0 8px; }
.title h1{ font-size: 40px; line-height:1.1; margin: 0; color:#000; font-weight:800; }
.title h2{
  font-size: 18px; margin: 4px 0 12px; color:#111; font-weight:600;
  text-shadow: none;
}

/* ===== Section headings ===== */
.section{ width:min(1200px, 92vw); margin: 0 auto 28px; }
.section-heading{
  text-align:center; margin: 6px 0 14px;
  font-size: 22px; letter-spacing:.08em; font-weight:800; color:#111;
}

/* ===== Containers / grids ===== */
.container{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }

/* wide (16:9) grid */
.grid-wide .video-wide{ width: min(360px, 30vw); }

/* vertical (9:16) grid: 9 items; two rows on large screens */
.grid-vertical{ row-gap:18px; column-gap:16px; }
.grid-vertical .video-vert{ width: min(180px, 18vw); }

/* ===== Video cards =====
   We use aspect-ratio to keep shapes perfect across sizes. */
.video{
  position:relative;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.video-wide{ aspect-ratio: 16 / 9; }
.video-vert{ aspect-ratio: 9 / 16; }

.video:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.28); }

/* Clickable overlay fills the card */
.video a.video-link{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center;
  text-decoration:none; color:#fff;
}

/* Caption */
.video-title{
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.45);
  font-weight:700;
  font-size: 14px;
  text-align:center;
}

/* ===== Modal styles ===== */
.modal{ position:fixed; inset:0; display:grid; place-items:center;
        opacity:0; pointer-events:none; transition:.2s ease; z-index:9999; }
.modal[aria-hidden="false"]{ opacity:1; pointer-events:auto; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.82); }

.modal__dialog{
  position:relative;
  width:min(92vw, 1200px);
  aspect-ratio: 16 / 9;
  background:#000; border-radius: 14px; overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.modal__dialog.vertical{
  width:min(56vw, 540px);
  aspect-ratio: 9 / 16;
  max-height:92vh;
}

.player-wrap, .player-wrap iframe{ width:100%; height:100%; border:0; display:block; }

.close{
  position:absolute; top:8px; right:10px;
  width:36px; height:36px; border-radius:50%;
  border:0; background:rgba(255,255,255,.14); color:#fff;
  font-size:22px; line-height:36px; cursor:pointer;
}
.close:hover{ background:rgba(255,255,255,.26); }

.modal-open{ overflow:hidden; }

/* ===== Responsive tweaks ===== */
@media (max-width: 900px){
  .grid-wide .video-wide{ width: min(46vw, 420px); }
}
@media (max-width: 600px){
  .grid-wide .video-wide{ width: 92vw; }
  .grid-vertical .video-vert{ width: 44vw; }
}