/* social-shares.css */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&display=swap');

/* Embed container styles - fully responsive */
#embed-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  width: 100%;
  direction: rtl;
  font-family: var(--font-heebo);
}

/* For single embeds, limit the max width but ensure responsive */
#embed-container.single-embed {
  display: block;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

/* Individual embed wrapper */
.embed-wrapper {
  width: 100%;
  margin-bottom: 20px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  min-width: 0; /* Critical for grid layout to respect container */
}

.embed-title {
  padding: 10px 15px;
  background: #f0f2f5;
  font-size: 14px;
  font-weight: 500;
  color: #65676B;
  border-bottom: 1px solid #ddd;
  text-align: right;
  font-family: var(--font-heebo);
}

.embed-content {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Responsive iframe container with max-height */
.responsive-iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  max-height: 700px; /* Prevent excessive height */
}

.responsive-iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important; /* Force override any inline styles */
  height: 100% !important;
  border: 0;
  max-width: 100% !important;
}

/* Force iframe scaling */
iframe {
  max-width: 100% !important;
}

/* Specific platform adjustments */
.facebook-embed .responsive-iframe-container {
  padding-bottom: 100%; /* Square for Facebook videos */
  max-height: 500px;
}

.facebook-post-embed .responsive-iframe-container {
  padding-bottom: 125%; /* Taller for Facebook posts */
  max-height: 600px; /* Limit height for single posts */
}

.facebook-page-embed .responsive-iframe-container {
  padding-bottom: 125%; /* Taller for Facebook pages */
  max-height: 600px;
}

/* Single post specific adjustments */
.single-embed .facebook-post-embed .responsive-iframe-container {
  padding-bottom: 0; /* Remove padding-based sizing for single posts */
  height: 600px; /* Fixed height for single post */
}

/* TikTok specific overrides to force responsiveness */
blockquote.tiktok-embed {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 200px !important; /* Override TikTok's min-width */
  margin: 0 !important;
}

.telegram-post {
  width: 100% !important;
}

.twitter-embed .twitter-tweet {
  margin: 0 auto !important;
  width: 100% !important;
}

/* Progressive enhancement for different screen sizes */
@media (max-width: 768px) {
  #embed-container {
    grid-template-columns: 1fr;
  }
  
  .responsive-iframe-container {
    max-height: 500px;
  }
  
  .facebook-post-embed .responsive-iframe-container,
  .facebook-page-embed .responsive-iframe-container {
    max-height: 500px;
  }
  
  .single-embed .facebook-post-embed .responsive-iframe-container {
    height: 500px;
  }
}

/* Extra small screens */
@media (max-width: 350px) {
  .responsive-iframe-container {
    max-height: 400px;
  }
  
  .single-embed .facebook-post-embed .responsive-iframe-container {
    height: 450px;
  }
}