@charset "utf-8";

/*
   Hiking Arkansas Website
   Author: Mitchell Martin
   Date: December 10, 2025

   Filename: media.css
   Audio and Video media styles
*/

/* ===== MEDIA CONTAINER ===== */
.mediaContainer {
   background-color: white;
   border: 2px solid #2c5f2d;
   border-radius: 12px;
   padding: 25px;
   margin: 20px 0;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.mediaContainer h2 {
   margin-top: 0;
   color: #2c5f2d;
   font-family: Georgia, serif;
   border-bottom: 2px solid #2c5f2d;
   padding-bottom: 10px;
   margin-bottom: 20px;
}

.mediaContainer p {
   color: #333;
   line-height: 1.6;
   margin-bottom: 15px;
}

/* ===== VIDEO STYLES ===== */
video {
   width: 100%;
   max-width: 800px;
   height: auto;
   border-radius: 8px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   display: block;
   margin: 20px auto;
   background-color: #000;
}

video:focus {
   outline: 3px solid #2c5f2d;
   outline-offset: 3px;
}

/* Video wrapper for aspect ratio */
.videoWrapper {
   position: relative;
   width: 100%;
   max-width: 800px;
   margin: 20px auto;
   background-color: #000;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.videoWrapper video {
   margin: 0;
   box-shadow: none;
   border-radius: 0;
}

/* ===== AUDIO STYLES ===== */
audio {
   width: 100%;
   max-width: 500px;
   display: block;
   margin: 20px auto;
   border-radius: 30px;
}

audio:focus {
   outline: 3px solid #2c5f2d;
   outline-offset: 3px;
}

/* Audio container styling */
.audioContainer {
   background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
   padding: 25px;
   border-radius: 12px;
   text-align: center;
   margin: 20px 0;
}

.audioContainer h3 {
   color: #2c5f2d;
   margin-bottom: 15px;
   font-family: Georgia, serif;
}

.audioContainer p {
   color: #333;
   font-style: italic;
   margin-bottom: 15px;
}

/* ===== MEDIA FIGURE ===== */
figure.mediaFigure {
   margin: 25px 0;
   text-align: center;
}

figure.mediaFigure figcaption {
   background-color: #2c5f2d;
   color: white;
   padding: 12px 20px;
   border-radius: 0 0 8px 8px;
   font-style: italic;
   max-width: 800px;
   margin: 0 auto;
}

figure.mediaFigure video,
figure.mediaFigure audio {
   margin-bottom: 0;
}

figure.mediaFigure video {
   border-radius: 8px 8px 0 0;
}

/* ===== FALLBACK MESSAGE ===== */
.mediaFallback {
   background-color: #fff3cd;
   border: 1px solid #ffc107;
   color: #856404;
   padding: 15px 20px;
   border-radius: 8px;
   text-align: center;
   margin: 15px 0;
}

.mediaFallback a {
   color: #2c5f2d;
   font-weight: bold;
}

/* ===== MEDIA GRID LAYOUT ===== */
.mediaGrid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 25px;
   margin: 25px 0;
}

.mediaGrid .mediaItem {
   background-color: white;
   border: 2px solid #2c5f2d;
   border-radius: 12px;
   padding: 20px;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mediaGrid .mediaItem:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.mediaGrid .mediaItem h3 {
   color: #2c5f2d;
   margin-top: 0;
   font-family: Georgia, serif;
}

/* ===== PLAY BUTTON OVERLAY ===== */
.playOverlay {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 80px;
   height: 80px;
   background-color: rgba(44, 95, 45, 0.9);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s ease;
   pointer-events: none;
}

.playOverlay::after {
   content: "";
   width: 0;
   height: 0;
   border-left: 25px solid white;
   border-top: 15px solid transparent;
   border-bottom: 15px solid transparent;
   margin-left: 5px;
}

.videoWrapper:hover .playOverlay {
   background-color: rgba(44, 95, 45, 1);
   transform: translate(-50%, -50%) scale(1.1);
}

/* ===== RESPONSIVE MEDIA - TABLET ===== */
@media (max-width: 768px) {
   .mediaContainer {
      padding: 20px;
   }
   
   .mediaGrid {
      grid-template-columns: 1fr;
   }
   
   video {
      max-width: 100%;
   }
   
   figure.mediaFigure figcaption {
      font-size: 0.9em;
      padding: 10px 15px;
   }
}

/* ===== RESPONSIVE MEDIA - MOBILE ===== */
@media (max-width: 480px) {
   .mediaContainer {
      padding: 15px;
   }
   
   .mediaContainer h2 {
      font-size: 1.3em;
   }
   
   .audioContainer {
      padding: 20px 15px;
   }
   
   .videoWrapper {
      border-radius: 8px;
   }
   
   figure.mediaFigure figcaption {
      font-size: 0.85em;
      padding: 8px 12px;
   }
   
   .playOverlay {
      width: 60px;
      height: 60px;
   }
   
   .playOverlay::after {
      border-left-width: 18px;
      border-top-width: 11px;
      border-bottom-width: 11px;
   }
}