/* =============================================================
   TARA INDIA — single.css
   ============================================================= */

/* ── 1. CONTAINER ─────────────────────────────────────────────── */
.single .container {
  width: min(1200px, 88%);
  margin: 0 auto 2rem auto;
}

/* ── 2. HERO BANNER ──────────────────────────────────────────── */
.single .page-hero { max-height: 360px; position: relative; overflow: hidden; margin: 0 0 1.5rem 0; }
.single .page-hero__figure { margin: 0; line-height: 0; }
.single .page-hero__img { display: block; width: 100%; max-height: 360px; object-fit: cover; object-position: center 30%; }
.single .page-hero__noimg { background: #E3F0FB; height: 160px; }

/* ── 3. FONTS ────────────────────────────────────────────────── */
.single .page-heading {
  font-family: 'Poiret One', 'Josefin Sans', sans-serif !important;
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 400;
  line-height: 1.25;
  color: #1a1a1a;
  letter-spacing: 0.01em;
  margin: 0 0 12px;
}

/* ── 4. CATEGORY PILLS ──────────────────────────────────────── */
.single .post-category-scroll { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.single .post-category-pill {
  display: inline-block;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: #E3F0FB; color: #0D3D7A; border-radius: 99px; padding: 4px 12px;
  text-decoration: none; white-space: nowrap; transition: background .2s, color .2s;
}
.single .post-category-pill:hover { background: #1B6FBF; color: #fff; }

/* ── 5. SOCIAL ROW ───────────────────────────────────────────── */
.single .tara-social-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; align-items: center; }
.single .tara-social-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px;
  border-radius: 99px; border: 1.5px solid #e0e0e0; background: #fff; text-decoration: none;
  font-family: 'Josefin Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: #3a3a3a; transition: background .2s, border-color .2s, color .2s;
}
.single .tara-social-btn svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; display: inline-block; vertical-align: middle; }
.single .tara-social-btn--yt:hover { background: #fff0f0; border-color: #cc0000; color: #cc0000; }
.single .tara-social-btn--li:hover { background: #E3F0FB; border-color: #1B6FBF; color: #1B6FBF; }
.single .tara-social-btn--fb:hover { background: #E3F0FB; border-color: #1877F2; color: #1877F2; }
.single .tara-social-btn--ig:hover { background: #FDE8F3; border-color: #E83A8D; color: #E83A8D; }

/* ── 6. TWO-COLUMN LAYOUT ────────────────────────────────────── */
.tara-single-layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; }
.tara-single-layout__content { min-width: 0; }
.tara-single-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 80px; }

@media (max-width: 860px) {
  .tara-single-layout { grid-template-columns: 1fr; gap: 0; }
  .tara-single-sidebar { position: static; margin-top: 40px; flex-direction: row; flex-wrap: wrap; }
  .tara-sidebar-widget { flex: 1; min-width: 260px; }
}
@media (max-width: 560px) {
  .tara-single-sidebar { flex-direction: column; }
  .tara-sidebar-widget { min-width: 100%; }
}

/* ── 7. ARTICLE BODY TYPOGRAPHY ─────────────────────────────── */
.single .the-page-content { max-width: 720px; font-size: 16px; line-height: 1.8; color: #2a2a2a; margin: 0; }
.single .the-page-content p { margin-bottom: 20px; font-size: 16px; line-height: 1.8; color: #2a2a2a; }
.single .the-page-content > p:first-child {
  font-size: 17px; font-weight: 500; color: #0D3D7A; background: #E3F0FB;
  border-left: 4px solid #1B6FBF; padding: 18px 20px; border-radius: 0 8px 8px 0; line-height: 1.7; margin-bottom: 20px;
}
.single .the-page-content > p:first-child mark { background: none !important; color: #0D3D7A !important; }

/* ── 8. ARTICLE H2 HEADINGS ─────────────────────────────────── */
.single .the-page-content h2 {
  font-family: 'Josefin Sans', sans-serif; font-size: 20px; font-weight: 700;
  margin: 32px -4px 0; padding: 18px 20px 16px; border-left: 4px solid; border-radius: 0 8px 0 0; line-height: 1.3;
}
.single .the-page-content h2:nth-of-type(1) { background: #E3F0FB; border-color: #1B6FBF; color: #0D3D7A; }
.single .the-page-content h2:nth-of-type(2) { background: #FEF0E8; border-color: #EC672E; color: #7A2E08; }
.single .the-page-content h2:nth-of-type(3) { background: #E0F5F7; border-color: #04A1B2; color: #075A64; }
.single .the-page-content h2:nth-of-type(4) { background: #FDE8F3; border-color: #E83A8D; color: #7A1248; }
.single .the-page-content h2:nth-of-type(5) { background: #FFF9D6; border-color: #FEDC3A; color: #6B4700; }
.single .the-page-content h2:nth-of-type(6) { background: #E3F0FB; border-color: #1B6FBF; color: #0D3D7A; }
.single .the-page-content h2 mark { background: none !important; color: inherit !important; padding: 0; }

/* ── 9. ARTICLE IMAGES ──────────────────────────────────────── */
.single .the-page-content .wp-block-image { margin: 24px auto; text-align: center; }
.single .the-page-content .wp-block-image img {
  border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  max-width: 100%; max-height: 420px; height: auto; width: auto !important; display: block; margin: 0 auto;
}
.single .the-page-content .wp-block-image figcaption { font-size: 12px; color: #999; text-align: center; margin-top: 8px; font-style: italic; line-height: 1.5; }

/* ── 10. ARTICLE LINKS ──────────────────────────────────────── */
.single .the-page-content a { color: #1B6FBF; text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.single .the-page-content a:hover { color: #145899; }

/* ── 11. ARTICLE CTA BUTTON ─────────────────────────────────── */
.single .the-page-content .wp-block-button__link {
  background: #EC672E !important; color: #fff !important; font-family: 'Josefin Sans', sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: .06em; border-radius: 6px; padding: 14px 32px; text-decoration: none; transition: background .2s;
}
.single .the-page-content .wp-block-button__link:hover { background: #B84918 !important; }

/* ── 12. SIDEBAR WIDGETS ────────────────────────────────────── */
.tara-sidebar-widget { border-radius: 10px; padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.tara-sidebar-widget--newsletter { background: #E3F0FB; border-left: 4px solid #1B6FBF; }
.tara-sidebar-widget--sponsor    { background: #FDE8F3; border-left: 4px solid #E83A8D; }
.tara-sidebar-widget--donate     { background: #FEF0E8; border-left: 4px solid #EC672E; }

.tara-sidebar-widget__title { font-family: 'Josefin Sans', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin: 0; line-height: 1.3; }
.tara-sidebar-widget--newsletter .tara-sidebar-widget__title { color: #0D3D7A; }
.tara-sidebar-widget--sponsor   .tara-sidebar-widget__title { color: #7A1248; }
.tara-sidebar-widget--donate    .tara-sidebar-widget__title { color: #7A2E08; }

.tara-sidebar-widget__text { font-size: 13px; line-height: 1.6; margin: 0; }
.tara-sidebar-widget--newsletter .tara-sidebar-widget__text { color: #0D3D7A; opacity: .85; }
.tara-sidebar-widget--sponsor   .tara-sidebar-widget__text { color: #7A1248; opacity: .85; }
.tara-sidebar-widget--donate    .tara-sidebar-widget__text { color: #7A2E08; opacity: .85; }

.tara-sidebar-widget__success { font-size: 13px; color: #0D3D7A; font-weight: 600; margin: 0; }
.tara-sidebar-widget__note    { font-size: 11px; color: rgba(13,61,122,0.65); margin: 0; line-height: 1.5; }
.tara-sidebar-widget__note a  { color: #1B6FBF; text-decoration: underline; }

/* ── 13. SIDEBAR NEWSLETTER FORM ────────────────────────────── */
.tara-sidebar-newsletter-form { display: flex; flex-direction: column; gap: 8px; }
.tara-sidebar-newsletter-form__input {
  width: 100%; padding: 10px 12px; border: 1px solid rgba(27,111,191,0.3); border-radius: 6px;
  font-size: 13px; background: #fff; color: #1a1a1a; box-sizing: border-box;
}
.tara-sidebar-newsletter-form__input:focus { outline: none; border-color: #1B6FBF; box-shadow: 0 0 0 3px rgba(27,111,191,0.15); }
.tara-sidebar-newsletter-form__btn {
  width: 100%; padding: 10px; background: #1B6FBF; color: #fff; border: none; border-radius: 6px;
  font-family: 'Josefin Sans', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .05em; cursor: pointer; transition: background .2s;
}
.tara-sidebar-newsletter-form__btn:hover { background: #145899; }

/* ── 14. SIDEBAR CTA BUTTONS ────────────────────────────────── */
.tara-sidebar-widget__btn {
  display: block; text-align: center; text-decoration: none; font-family: 'Josefin Sans', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; padding: 11px 16px; border-radius: 6px; transition: opacity .2s;
}
.tara-sidebar-widget__btn:hover { opacity: .85; }
.tara-sidebar-widget--sponsor .tara-sidebar-widget__btn { background: #E83A8D; color: #fff !important; }
.tara-sidebar-widget__btn--outline { background: transparent; border: 2px solid #EC672E; color: #EC672E !important; }
.tara-sidebar-widget__btn--outline:hover { background: #FEF0E8; }

/* ── 15. LATEST POSTS — shadow fix + mobile layout ─────────────
   ---------------------------------------------------------------- */
.single .cards-grid {
  padding: 12px;
  margin: -12px;
  overflow: visible;
}

.single .latest-posts       { overflow: visible; }
.single .latest-blogs-title { margin-bottom: .8rem; }

/* Mobile: 2-column grid so cards wrap and the "View all" button
   sits below them rather than overflowing off-screen.            */
@media (max-width: 768px) {
  .single .cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .single .cards-grid > .read-more-wrapper {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 8px 0 !important;
    margin: 0 !important;
  }
}

/* Very small phones: single column */
@media (max-width: 400px) {
  .single .cards-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 16. RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .single .page-heading        { font-size: 22px; }
  .single .the-page-content    { font-size: 15px; }
  .single .the-page-content h2 { font-size: 17px; }
}

.single #the-page-content,
.single .the-page-content { padding-bottom: 48px !important; }

.single .single-after-content,
.single .sidebar-section,
.single .related-posts {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--ti-blue-600, #145899);
}