/*NEWSPAGE*/

/* ─── News Details Font Override ────────────────────────────────── */




 /* Breadcrumb */
    .breadcrumb {
      font-size: 0.9rem;
      margin: 16px 0;
      color: #555;
    }
    .breadcrumb a { color: #c01f2e; text-decoration: none; }
    .breadcrumb span { color: #333; }


    .share-buttons a {
      margin-left: 8px;
      font-size: 1.2rem;
      text-decoration: none;
    }

    /* Featured Image */
    .featured-image {
      margin: 20px 0;
      text-align: center;
    }
    .featured-image img {
      max-width: 100%;
      border-radius: 4px;
    }
    .featured-image figcaption {
      font-size: 0.8rem;
      color: #666;
      margin-top: 4px;
    }



/* ─── Scrollable Headlines Panel ─────────────────────────────────── */
.news-list {
  /* give it a fixed height and enable scrolling */
  max-height: 300px;
  overflow-y: auto;

  /* match the look of your other cards */
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
}

/* style the title inside it */
.news-list__title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: bold;
  color: #003366;
}

/* when you scroll, show the native scrollbar styled lightly */
.news-list::-webkit-scrollbar {
  width: 8px;
}
.news-list::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 4px;
}
/* ─── Video Section & Title Styling ─────────────────────────────── */
.video-section {
  margin-top: var(--inner-gap);
}

.video-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #c01f2e;            /* match your brand’s accent red */
  border-left: 4px solid #c01f2e;
  padding-left: 8px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Responsive YouTube Embed (as before) */
.video-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;     /* 16:9 aspect */
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}











/* remove any extra spacing on the button itself */
.share-btn.round {
  margin: 0;
}








/* Dark‐theme overrides */
[data-theme="dark"] {
  /* Base text/link colors */
  --bg-color:      #121212;
  --text-color:    #e0e0e0;
  --muted-color:   #b0b0b0;
  --link-color:    #64b5f6;
  --link-hover:    #90caf9;
  --card-bg:       #1e1e1e;
  --card-border:   #2c2c2c;
  --accent-color:  #bb86fc;
}

/* Page background and base text */
body[data-theme="dark"] {
  background: var(--bg-color);
  color: var(--text-color);
}

/* Article Detail */
[data-theme="dark"] .details-article {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 1.5rem;
  border-radius: 0.5rem;
}
[data-theme="dark"] .details-article h1,
[data-theme="dark"] .details-article h2,
[data-theme="dark"] .details-article h3 {
  color: var(--accent-color);
}
[data-theme="dark"] .details-article p {
  color: var(--text-color);
  line-height: 1.6;
}
[data-theme="dark"] .details-article a {
  color: var(--link-color);
}
[data-theme="dark"] .details-article a:hover {
  color: var(--link-hover);
}




/* Pre-Footer News Grid */
[data-theme="dark"] .pre-news-grid .news-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}
[data-theme="dark"] .pre-news-grid .news-card h4 {
  color: var(--accent-color);
}
[data-theme="dark"] .pre-news-grid .news-card p {
  color: var(--muted-color);
}

/* Ensure links in lists/titles follow theme */
[data-theme="dark"] .news-list__items a,
[data-theme="dark"] .category-cards a {
  color: var(--link-color);
}
[data-theme="dark"] .news-list__items a:hover,
[data-theme="dark"] .category-cards a:hover {
  color: var(--link-hover);
}

[data-theme="dark"] .breadcrumb a {
  color: var(--link-hover);    /* or use #ffffff for pure white */
}

[data-theme="dark"] .breadcrumb span,
[data-theme="dark"] .breadcrumb {
  color: var(--muted-color);   /* a soft grey so the “›” and current page are legible */
}
[data-theme="dark"] .article-body h2,
[data-theme="dark"] .article-body p strong:first-child {
  color: #80deea;        /* pale cyan rather than red */
}

[data-theme="dark"] .article-body h3 {
  color: #ffe082;        /* pale gold for tertiary headings */
}

/* And any inline <span> or red text you inserted manually: */
[data-theme="dark"] .article-body .highlight-red,
[data-theme="dark"] .article-body span[style*="color: red"] {
  color: #80deea !important;
}
[data-theme="dark"] .article-body *[style*="color:"][style*="red"] {
  color: #80deea !important;
}

/* ─── Updated Dark-Mode Accent Colors ─────────────────────────────────── */

/* swap out your red accent for a pale cyan */
:root {
  --dark-accent:  #80deea;
  --dark-accent2: #ffe082;   /* tertiary heads */
  --dark-link:   #4eaaff;
  --dark-link-h: #76c9ff;
  --dark-muted:  #888;
}

/* Article Detail headings */
[data-theme="dark"] .details-article h1,
[data-theme="dark"] .details-article h2,
[data-theme="dark"] .details-article h3 {
  color: var(--dark-accent) !important;
}

/* Breadcrumb tweaks */
[data-theme="dark"] .breadcrumb a {
  color: var(--dark-link-h);
}
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .breadcrumb span {
  color: var(--dark-muted);
}

/* Article-body subheads */
[data-theme="dark"] .article-body h2,
[data-theme="dark"] .article-body p strong:first-child {
  color: var(--dark-accent);
}
[data-theme="dark"] .article-body h3 {
  color: var(--dark-accent2);
}

/* Force any inline “color:red” into your cyan */
[data-theme="dark"] .article-body *[style*="color:red"] {
  color: var(--dark-accent) !important;
}

/* Links in article & lists */
[data-theme="dark"] .details-article a,
[data-theme="dark"] .article-body a,
[data-theme="dark"] .news-list__items a,
[data-theme="dark"] .category-cards a {
  color: var(--dark-link);
}
[data-theme="dark"] .details-article a:hover,
[data-theme="dark"] .article-body a:hover,
[data-theme="dark"] .news-list__items a:hover,
[data-theme="dark"] .category-cards a:hover {
  color: var(--dark-link-h);
}

/* Pre-footer titles & text */
[data-theme="dark"] .pre-news-grid .news-card h4 {
  color: var(--dark-accent);
}
[data-theme="dark"] .pre-news-grid .news-card p {
  color: var(--dark-muted);
}







/* container */
.tags-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: #001a4d;         /* your dark navy background */
  padding: 0.5rem 1rem;
  gap: 0.5rem;
}

/* static “Tags” label */
.tags-bar__label {
  color: #fff;
  font-weight: 600;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

/* each pill */
.tags-bar__pill {
  display: inline-block;
  background: #fff;
  color: #001a4d;
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

.tags-bar__pill:hover {
  background: #c01f2e;
  color: #fff;
}


/* ─── Tags Bar Pills ───────────────────────────────────────── */
.tags-bar__pill {
  display: inline-block;
  margin: 0.25rem 0.5rem 0.25rem 0;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  color: #fff;
  background: #c01f2e;
  text-decoration: none;
  border-radius: 1rem;            /* fully rounded ends */
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.3),   /* light inner highlight */
    inset 0 -2px 4px rgba(0,0,0,0.2),        /* inner shadow */
      0 4px 6px rgba(0,0,0,0.2),              /* main drop shadow */
      0 2px 4px rgba(0,0,0,0.1);              /* softer secondary shadow */
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.tags-bar__pill:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,0.4),
    inset 0 -1px 3px rgba(0,0,0,0.3),
      0 6px 8px rgba(0,0,0,0.25),
      0 3px 5px rgba(0,0,0,0.15);
}









/*──────────────────────────────────────────────────────────
  Global Telugu text & article spacing
──────────────────────────────────────────────────────────*/
body,
.article-body,
.details-article {
  /* base font */
  font-family: 'Merriweather', sans-serif;
  font-size: 18px;

  /* exact line‐height from your screenshot (≈1.56×) */
  line-height: 28px;

  /* adds ≈1.8px between words */
  word-spacing: 0.1em;

  /* keep default letter spacing */
  letter-spacing: 0;

  /* optional page padding */
  margin: 2rem;
  color: #333;
}

/*──────────────────────────────────────────────────────────
  Headings & paragraph gaps
──────────────────────────────────────────────────────────*/
h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

p,
.article-body p,
.details-article p {
  /* ≈18px gap after each paragraph */
  margin-bottom: 1em;
}





    /* Article Header & Meta */
    .article-header h1 {
      font-size: 2rem;
      margin-bottom: 8px;
      color: #003366;
    }
    .article-header .meta {
      font-size: 0.85rem;
      color: #777;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .article-header .meta .read-time {
      padding: 2px 6px;
      background: #eee;
      border-radius: 4px;
      font-size: 0.75rem;
    }
    /* Article Body */
    .article-body p,
    .article-body h2,
    .article-body blockquote,
    .article-body ul {
      margin-bottom: 16px;
    }
    .article-body h2 { color: #c01f2e; }
    .article-body blockquote {
      border-left: 4px solid #c01f2e;
      padding-left: 12px;
      font-style: italic;
      color: #555;
    }

    /* Tags & Follow */
    .article-tags {
      margin: 24px 0 8px;
      font-size: 0.85rem;
      color: #555;
    }
    .article-tags a {
      color: #c01f2e;
      text-decoration: none;
      margin-right: 8px;
    }
    .social-follow {
      font-size: 0.85rem;
      margin-bottom: 24px;
    }
    .social-follow a {
      color: #0077cc;
      text-decoration: none;
      margin-right: 12px;
    }

    /* Related & Sidebar */
    .details-container {
      display: flex;
      gap: var(--inner-gap);
    }
    .details-article { flex: 2; background: #fff; padding: 20px; border-radius: 8px; }
    .details-sidebar { flex: 1; display: flex; flex-direction: column; gap: 20px; }
    .related h3 {
      font-size: 1.1rem;
      margin-bottom: 8px;
      color: #003366;
    }
    .related ul { list-style: disc inside; }
    .related a:hover { color: #c01f2e; }

    /* Comments Section */
    .comments-section {
      margin-top: 40px;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
    }
    .comments-section h3 { margin-bottom: 16px; color: #003366; }
    .comment-form textarea {
      width: 100%;
      height: 100px;
      padding: 8px;
      margin-bottom: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      resize: vertical;
    }
    .comment-form button {
      background: #c01f2e;
      color: #fff;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
    }
    .comments-list li {
      border-bottom: 1px solid #eee;
      padding: 8px 0;
      font-size: 0.9rem;
    }
@media (max-width: 768px) {
  /* Stack article + sidebar vertically */
  .details-container {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--inner-gap) !important;
    margin: 0 var(--inner-gap) !important;
  }

  /* Make article and sidebar full-width */
  .details-article,
  .details-sidebar {
    flex: none !important;
    width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box;
  }

  /* Sidebar below the article */
  .details-sidebar {
    margin-top: var(--inner-gap);
  }

  /* Tweak headings for smaller screens */
  .article-header h1 {
    font-size: 1.5rem ;
    line-height: 1.3;
  }
  .article-header .meta {
    flex-wrap: wrap;
    font-size: 0.8rem;
    gap: 6px;
  }

  /* Shrink share icons */
  .share-buttons a {
    font-size: 1rem !important;
    margin-left: 6px !important;
  }

  /* Narrow figure margins */
  .featured-image {
    margin: 16px 0 !important;
  }



  /* Sidebar ad & widgets full-width */
  .details-sidebar .ad-square,
  .details-sidebar .news-list,
  .details-sidebar .video-section {
    width: 100% !important;
    margin-bottom: var(--inner-gap);
  }

  /* Reduce video-title spacing */
  .video-title {
    font-size: 1rem !important;
    margin-bottom: 6px !important;
  }

  /* Comments section full width if enabled */
  .comments-section,
  .comments-list,
  .comment-form textarea {
    width: 100% !important;
  }
}


/* ─── DETAILS SECTION TELUGU FONT STYLING ───────────────────────────────── */






/* only paragraphs, headings, lists, captions, etc… */

/** Reset icon elements to use FontAwesome **/
.share-btn i,
.fas, .far, .fal, .fab {
  font-family: 'Font Awesome 6 Free' !important;
  /*font-weight: 500;  for solid icons */
}




.share-btn.round {
  width: 40px;
  height: 40px;
  background: #c01f2e;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.share-btn.round i {
  color: #fff;
  font-size: 1.5rem;
}

/* make the article a positioning context */
.details-article {
  position: relative;
}

/* absolutely position the share button */
.details-article .share-buttons {
  position: absolute;
                 /* adjust as needed */
  right: 1rem;             /* inset from the right edge */
  margin: 0;               /* remove any auto margins */
  display: flex;           /* keep your flex layout */
  align-items: center;
  z-index: 5;
}



/* ── Optimize the article header & callout block ── */
.details-article .article-header {
  padding: 0 var(--inner-gap);       /* only small horizontal inset */
  margin-bottom: 0.5rem;             /* tighten gap to the ad below */
}

.details-article .article-header h1 {
  font-size: 1.75rem;                /* slightly smaller title */
  line-height: 1.2;                  /* compact the two lines */
  margin: 0 0 0.25rem;               /* small gap under the heading */
}

.details-article .article-header .meta {
  font-size: 0.875rem;               /* reduce date size */
  color: #555;                       /* softer gray */
  display: flex;
  align-items: center;
  gap: 0.5rem;                       /* space between date, separator, etc. */
  margin-bottom: 0.5rem;             /* gap before social buttons */
  padding: 0;                        /* remove any extra padding */
}

.details-article .article-header .share-buttons {
  margin: 0;                         /* align flush under the date */
  display: flex;
  gap: 0.5rem;                       /* tighten icon spacing */
}

/* tighten space between header and featured image */
.details-article .featured-image {
  margin: 0 var(--inner-gap) 0.75rem; /* small bottom gap */
}



  /* Body text slightly larger */
  .article-body p,
  .article-body h2 {
    font-size: 1.2rem ; /*article heading MAINSSS*/
	    line-height: 1.8;
  }
  
/* ── Flush the article header & image ── */
.details-article,
.details-article .article-header,
.details-article .article-header h1,
.details-article .article-header .meta,
.details-article .share-buttons,
.details-article .featured-image,
.details-article .featured-image img {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Remove default heading margins */
.details-article .article-header h1 {
  margin-block-start: 0 !important;
  margin-block-end:   0.25rem !important; /* just a tiny gap before the meta bar */

}

/* Meta bar right below the title, no extra gap */
.details-article .article-header .meta {
  margin-block-start: 0 !important;
  margin-block-end:   0.25rem !important;
  padding:            0 !important;
  font-size:         0.875rem;
}

/* Share icons flush under the meta */
.details-article .share-buttons {
  margin: 0 !important;
  padding: 0 !important;
}

/* Bring the featured image directly up against the header */
.details-article .featured-image {
  margin-block-start: 0 !important;
  margin-block-end:   0.5rem !important; /* small breathing room */
  padding:            0 !important;
}

.details-article .featured-image img {
  display: block;
  width:  100%;
  height: auto;
}
/* ── Slightly smaller title ── */
.details-article .article-header h1 {
  font-size: 1.2rem;        /*article heading MAINSSS*/
  line-height: 1.3;         /* keep the lines tight */
  margin-bottom: 0.5rem;    /* small gap before meta bar */
}

/* ── Scale featured image ── */
.details-article .featured-image img {
  display: block;
  width: 90%;               /* 90% of the article’s width */
  max-width: 700px;         /* optional cap for very wide screens */
  height: auto;
  margin: 0 auto 1rem;      /* center + bottom gap */
}
/* ── Base body-text optimization ── */
.details-article .article-body {
  /* justify paragraphs */
  
  text-justify: inter-word;
  /* allow breaks in long words to avoid gaps */
  word-break: break-word;
  hyphens: auto;
  /* gentle word-spacing for Telugu */
  word-spacing: 0.05em;
  /* consistent line height */
  line-height: 1.6;
}

.details-article .article-body p {
  margin: 0 0 1em;   /* ≈18px bottom gap */
}

/* ── Small-screen tweaks ── */
@media (max-width: 768px) {
  .details-article .article-body {
    /* slightly tighter line-height on mobile */
    
    /* for tiny viewports reduce word-spacing so words wrap more evenly */
    word-spacing: 0.03em;
  }
  .details-article .article-body p {
    margin-bottom: 0.8em;  /* ≈14px gap */
  }
  /* avoid last-line over-justification */
  .details-article .article-body p:last-child,
  .details-article .article-body p:only-child {
    text-align: left;
  }
}


@media (max-width: 768px) {
  /* 1) Make the article content truly full-width (minus native page padding) */
  .details-article {
    padding-inline: 0 !important;
    margin-inline: 0 !important;
  }

  /* 2) Remove any inner padding on the body text */
  .details-article .article-body {
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    
    /* 3) Comfortable line spacing for Telugu long-form text */

    /* 4) Prevent huge word gaps by letting words break if needed */
    word-break: break-word;
    hyphens:    auto;
   
    text-align-last: left;
  }

  /* 5) Tighten paragraph bottoms for compact flow */
  .details-article .article-body p {
    margin: 0 0 1em !important; /* ~16px bottom gap */
  }
}


/* increase vertical rhythm in article body */
.details-article .article-body {
  line-height: 1.8;  /* ~180% of your font-size for extra breathing room */
}


.inserted-sublink {
  margin: 1em 0;
  padding: 0.5em;
  background: #f9f9f9;
  border-left: 4px solid #c01f2e;
}
.inserted-sublink a {
  font-weight: bold;
  color: #c01f2e;
  text-decoration: none;
}
.inserted-sublink a:hover {
  text-decoration: underline;
}

.sub-article-callout {
  border-left: 4px solid #c01f2e;
  background: #f9f9f9;
  padding: 0.5em 1em;
  margin: 1em 0;
}
.sub-article-callout a {
  color: #c01f2e;
  font-weight: bold;
  text-decoration: none;
}

/* Shrink main body copy slightly */
.details-article .article-body {
  font-size: 0.6rem;    /* ~14.4px instead of 16px */
}

/* Restore classic link look in article body */
.details-article .article-body a,
.article-body a {
  color: #0066cc ;          /* old blue */
  text-decoration: underline;
}

/* Keep the underline on hover and darken the text */
.details-article .article-body a:hover,
.article-body a:hover {
  color: #004499 ;          /* darker blue */
  text-decoration: underline ;
}


/* Increase the sub-link / callout font size */
.inserted-sublink a,
.sub-article-callout a {
  font-size: 1rem;      /*SUBLINK MAINSSS */
  line-height: 1.4;
}



.details-article .article-body p { font-size: 0.89rem; }
.details-article .article-body p { line-height: 2; }

@media (max-width: 600px) {
  .details-article .article-body {
    font-size: 0.95rem;       /* slightly smaller text */
    line-height: 1.6;         /* to avoid too much scrolling */
    word-spacing: 0.03em;     /* tighter on narrow lines */
  }
  .details-article .article-body p {
	font-size: 1.25rem !important; 
    margin-bottom: 1em;       /* bottom gap ≈16px */
	 line-height: 2 !important; 
  }
  
/* Increase the sub-link / callout font size */
.inserted-sublink a,
.sub-article-callout a {
  font-size: 1.2rem;      /*SUBLINK MAINSSS */
  line-height: 1.4;
}
}


.details-article .article-body p {
  margin-bottom: 1.5em !important; /* ~1.5× the current font-size ≈ 24px if font-size is 16px */
}

.details-article .article-body p {
  -webkit-hyphens: none;
     -moz-hyphens: none;
          hyphens: none;
}





.image-grid {
  /* fill the width of its parent (.article-body / .details-article) */
  width: 100%;
  display: grid;
  /* auto‐fit as many columns as will fit, but never more than 2 */
  grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

/* ensure each img fills its cell and keeps aspect ratio */
.image-grid img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 4px;
}

/* on very narrow screens collapse to one column */
@media (max-width: 600px) {
  .image-grid {
    grid-template-columns: 1fr;
  }
}




/* ----------------------------------------------------------------------------
   Center the featured image on both desktop & mobile,
   and collapse the side‐gutters to just 1rem on each side.
   ---------------------------------------------------------------------------- */
@media (min-width: 768px) {
.details-article .featured-image {
  /* make the figure a block‐level box set to full available width minus 2rem */
  display: block;
  width: calc(100% - 1rem);   /* leaves 1rem padding on each side */
  max-width: 100%;
  margin: 1.2rem auto;        /* centers it horizontally, with vertical gap */
  padding: 0;                 /* inside the 2rem width you already accounted for */
}

.details-article .featured-image img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;                  /* no extra margin inside the figure */
  float: none;                /* override any legacy float rules */
  border-radius: 4px;         /* preserve your rounded corners */
}
}


@media (max-width: 768px) {
  .details-article .featured-image {
    padding: 0.25rem 0 !important;               /* almost no horizontal padding */
    max-width: calc(100% - 0.5rem) !important;    /* subtract 2×0.25rem */
    margin: 1rem auto 1.5rem auto !important;     /* keep top/bottom spacing */
  }
  .details-article .featured-image img {
    display: block;
    width: 100% !important;                      /* fill the figure */
    height: auto !important;
    margin: 0 !important;
    float: none !important;
  }
}

/* Increase the font-size of the news detail page H1 */
.details-article .article-header h1 {
  font-size: 1.6rem;      /* ← adjust this value to taste */
  line-height: 1.2;       /* keeps lines from getting too loose */
  margin-bottom: 0.75rem; /* give a little breathing room below */
}


/* ─── Shrink share‐icons & tighten spacing ───────────────────────── */
.details-article .share-buttons {
  /* remove any inherited gap */
  gap: 3px; /* if you’re using flexgap, otherwise see below */
}

.details-article .share-buttons a {
  /* override any margin-left */
  margin: 0; 
  display: inline-block;
  padding: 0;
}

.details-article .share-buttons a img,
.details-article .share-buttons a i {
  width: 27px !important;
  height: 27px !important;
  /* if you’re using <i> tags only, you can adjust font-size instead: */
  /* font-size: 24px !important; */
}

.details-article .share-buttons a + a {
  /* tighten the horizontal gap between icons */
  margin-left: 3px;
}



/* ─── Sub-Article Callout “Tiles” ───────────────────────────── */
.sub-article-callout {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin: 1.25rem 0;
  background: #f9f9f9;
  border-left: 4px solid #c01f2e;
  border-radius: 4px;
}

.sub-article-callout__thumb {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

.sub-article-callout a {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  color: #c01f2e;
  text-decoration: none;
  line-height: 1.3;
}

.sub-article-callout a:hover {
  text-decoration: underline;
}
/* Container for each sub-article callout */
.sub-article-callout {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5em 1em;
  background: #f9f9f9;
  border-left: 4px solid #c01f2e;
  margin: 1em 0;
}

/* Fixed-height box for the thumbnail */
.sub-article-callout__thumb-wrapper {
  flex: 0 0 auto;
  width: 75px;    /* whatever fixed width you need */
  height: 65px;   /* your fixed height */
  overflow: hidden;
  border-radius: 4px;
}

/* Make the image fill the wrapper completely */
.sub-article-callout__thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


  @media (min-width: 768px) {
    #carousel-section .ad-square {
      display: none !important;
    }
  }