/* === BLOG / SOCIAL — mirrors Contact section, 50/50 split (5px narrower) === */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --background-light: #f8f9fa;
  --border-color: #ced4da;
  --font-family: 'Arial', sans-serif;
}

/* --- SECTION WRAPPER --- */
.social-section {
  padding: 80px 0;
  background-color: var(--background-light);
  font-family: var(--font-family);
}

/* --- MAIN CONTAINER --- */
.social-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 25px;
}

/* --- TITLE --- */
.section-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #343a40;
  margin-bottom: 40px;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -15px;
  width: 80px;
  height: 4px;
  background-color: var(--primary-color);
  border-radius: 2px;
}

/* --- GRID --- */
.social-grid {
  display: flex;
  gap: 50px;             /* matches contact section spacing */
  align-items: stretch;
  justify-content: center;
  flex-wrap: nowrap;     /* ✅ keep both cards on the same row on desktop */
}

/* --- 50/50 columns, reduced by 5px each to compensate for gap --- */
.social-grid > .social-card {
  flex: 0 0 calc(50% - 30px);   /* was 50% - 25px → now 5px narrower */
  max-width: calc(50% - 30px);
  background: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  min-height: 450px;            /* same visual height as contact map */
}

/* --- HEADER --- */
.social-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border-color);
}
.social-card__head h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0b3d2e;
}
.head-badge {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: rgba(0, 123, 255, 0.08);
  border-radius: 6px;
}
.head-badge img { width: 18px; height: 18px; object-fit: contain; }

/* --- BODY / EMBEDS --- */
.social-card__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.social-card__body iframe,
.social-card__body .twitter-timeline {
  display: block;
  width: 100% !important;
  height: 450px !important;
  border: 0;
  border-radius: 8px;
  background: #fff;
}

/* --- FALLBACK --- */
.noscript-note { text-align: center; margin-top: 10px; color: #555; }

/* --- RESPONSIVE: stack on tablets/phones --- */
@media (max-width: 992px) {
  .social-grid {
    flex-wrap: wrap;           /* allow stacking */
    gap: 40px;
    justify-content: stretch;
  }
  .social-grid > .social-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* in static/css/blog_social.css */
.social-card__body.twitter-embed {
  display: block;        /* override grid if any */
  padding: 0;
}

/* in static/css/blog_social.css */
.twitter-timeline { opacity: 0; transition: opacity .2s ease; }
.twitter-timeline-rendered { opacity: 1; } /* Twitter adds this class when ready */


.btn-learn {
  display: inline-block;
  background: #fff;
  color: #000;
  border-radius: 12px;
  padding: 18px 45px;   /* much bigger size */
  font-size: 1.25rem;   /* noticeably larger text */
  font-weight: 800;
  text-decoration: none;
  border: 2px solid #ccc;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.btn-learn:hover {
  background: var(--highlight);
  color: #fff;
  border-color: var(--highlight);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}

.embed-wrap {
  text-align: center;
}