/* =========================================================
   VIDEOS PAGE
   Page-specific styles for /videos. Loaded after main.css so
   these rules override the shared base where they overlap.
   ========================================================= */

/* Soft lavender wash behind the gallery — matches the home/photos palette. */
.videos-page {
    background: #f7f4fb;
}

/* ---------- HEADER ----------
   The block at the top of the page with the back link, title,
   and tagline. Generous side padding so it lines up with the grid. */

.gallery-header {
    padding: 40px 60px 20px;
}

.gallery-header h1 {
    margin-bottom: 8px;
    font-size: 42px;
    color: #4b3b63; /* deep plum, used for primary headings */
}

.gallery-header p {
    color: #7a6b91; /* muted lavender for the subtitle */
}

/* ---------- BACK BUTTON ----------
   The "← Home" link styled as a soft text button (no border/background)
   that fades on hover to signal it's interactive. */

.back-button {
    display: inline-block;
    margin-bottom: 25px;
    text-decoration: none;
    color: #7c5fb2;
    font-weight: 500;
}

.back-button:hover {
    opacity: 0.7;
}

/* =========================================================
   VIDEO GRID
   Three-column responsive grid of video cards. Each card holds
   one <video> element rendered by templates/videos.html.
   ========================================================= */

.video-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* four equal columns on desktop — smaller tiles */
    gap: 14px;
    width: 100%;
    padding: 0 60px 60px;
}

/* Individual card: rounded corners + soft purple shadow so videos
   sit on a "raised" tile instead of bare against the background. */
.video-card {
    border-radius: 18px;
    overflow: hidden; /* clip the video's square corners to the card's radius */
    background: white;
    box-shadow: 0 4px 10px rgba(130, 90, 180, 0.08);
    transition: all 0.25s ease; /* smooth the hover lift below */
}

/* Gentle scale + deeper shadow on hover for a subtle "pick me up" feel. */
.video-card:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(130, 90, 180, 0.16);
}

/* Make the video fill its card and sit on black bars (rather than the
   card's white background) while loading or letterboxing. */
.video-card video {
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    display: block;
    background: #000;
}

/* =========================================================
   RESPONSIVE
   Collapse the grid as the viewport narrows so cards stay
   large enough to actually watch on tablet and phone widths.
   ========================================================= */

/* Tablet: drop to 3 columns. */
@media (max-width: 1200px) {
    .video-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Smaller tablet: drop to 2 columns. */
@media (max-width: 900px) {
    .video-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Phone: single column, and tighten the header padding so the
   title doesn't get pushed off-screen on narrow devices. */
@media (max-width: 700px) {
    .video-grid { grid-template-columns: 1fr; }
    .gallery-header { padding: 30px 20px; }
}