/* Media Section */
#media {
  padding: 50px 20px;
  text-align: center;
  background: var(--color-bg, #0a0a0a);
  transition: background 0.3s ease, color 0.3s ease;
}

#media h2 {
  color: var(--color-primary, #00ff88);
  
    margin-bottom: 30px;
  font-weight: 700;
}

/* Responsive Grid */
.media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  padding: 27px;
  justify-items: center;
  align-items: center;
}

/* 100% responsive for all devices */
@media (max-width: 900px) {
  .media-grid {
    grid-template-columns: 1fr; /* stack items */
  }
}

/* Card container */
.media-card,
.media-card-insta {
  background: var(--color-card-bg, #f8f8f8);
  padding: 15px;
  border-radius: 14px;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.15);
  transition: all 0.3s ease;
  width: 100%;
  max-width: 520px; /* prevents cards from stretching too wide */
  overflow: hidden;
}

/* heights auto for perfect responsiveness */
.media-card {
  height: auto;
}

.media-card-insta {
  height: 400px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

/* Hover effects */
.media-card:hover,
.media-card-insta:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 0 20px var(--color-primary, rgba(0, 255, 136, 0.4));
}

/* Fix YouTube iframe width issues */
.media-card iframe {
  width: 100% !important;
  height: 315px;
  border-radius: 10px;
  border: none;
}

/* Fix Instagram embed width issues */
.media-card-insta blockquote.instagram-media {
  max-width: 100% !important;
  min-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Light mode adjustments */
@media (prefers-color-scheme: light) {
  #media {
    background: #f4f4f4 !important;
  }

  .media-card,
  .media-card-insta {
    background: #fff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .instagram-media {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
  }

  #media h2 {
    color: #009f5f;
    text-shadow: none;
  }
}
/* Fix the Instagram blockquote width */
.media-card-insta blockquote.instagram-media {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
}

/* Fix the auto-generated wrapper Instagram puts around the content */
.media-card-insta iframe,
.media-card-insta .instagram-media-rendered {
  width: 100% !important;
  max-width: 100% !important;
  align-items: center;
  justify-content: center;
}