/* NewsPrk theme CSS - loaded via <link> tags in layout.tsx */

/* Logo: theme caps .logo at 250px — enlarge so icon+text fill the header/footer */
.logo {
  max-width: 340px;
}
.logo img,
.footer_logo img {
  display: block;
  width: 100%;
  height: auto;
}
.footer_logo.logo {
  max-width: 340px;
}

/* Ensure Swiper and other interactive elements are visible */
.swiper { width: 100%; }
.swiper-wrapper { display: flex; }
.swiper-slide { flex-shrink: 0; }

/* Gallery section: match reference hero/thumb proportions */
.post_gallary_area .slider_demo2 .post_img {
  aspect-ratio: 730 / 500;
}
.post_gallary_area .slider_demo2 .post_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post_gallary_area .slider_demo1 .single_gallary_item {
  height: 61px;
}
.post_gallary_area .slider_demo1 .single_gallary_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Interactive play/bolt badges (newsprk.css .tranding 54px rule has no cursor) */
.post_gallary_area .tranding,
.mix_area .tranding,
.single_post .tranding {
  cursor: pointer;
}

/* Feature News: fixed 320px portrait cards like reference (our images are 16:9) */
.feature_carousel .post_type7 {
  height: 320px;
}
.feature_carousel .post_type7 .post_img,
.feature_carousel .post_type7 .post_img > a,
.feature_carousel .post_type7 .post_img img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.feature_carousel .post_type7 .single_post_text h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 42px;
}
.feature_carousel .post_type7 .single_post_text h4 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Trending carousel: fixed 70px rows like reference (clamp title to 2 lines, excerpt to 1) */
.carousel_posts1 .post_type5 .single_post_text h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 42px;
}
.carousel_posts1 .post_type5 .single_post_text h4 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.carousel_posts1 .post_type5 .single_post_text p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-height: 21px;
}

/* widgets_small thumbs: img_wrap must fill .post_img so img height:100% resolves against 77/64px, not intrinsic 16:9 */
.widgets_small .post_img .img_wrap {
  display: block;
  height: 100%;
  width: 100%;
}
.widgets_small .post_img img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* type8 (Most Viewed) uses 80x64 — same fill requirement */
.widgets_small.type8 .post_img .img_wrap,
.widgets_small.type8 .post_img img {
  height: 100%;
  width: 100%;
}
/* Real cards wrap the img in an inline <a> — img height:100% then resolves
   against an auto-height anonymous block and collapses to the intrinsic ratio
   (e.g. 80x45 inside the 80x70 thumb box, leaving a white strip). Make the
   intermediate anchor fill .img_wrap so the height chain reaches .post_img,
   matching what the ad cards already do. */
.widgets_small .post_img .img_wrap a {
  display: block;
  height: 100%;
  width: 100%;
}
/* Clamp widgets_small titles to 2 lines like reference (prevents 91px / 63px overflow cards) */
.widgets_small .single_post_text h4,
.widgets_small .single_post_text h4 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 42px;
}

/* Trending News carousel main image: match ref aspect ~1.4:1 (355x253.6); our images are 16:9 */
.trancarousel .single_post.post_type3 .post_img {
  aspect-ratio: 355 / 253.5625;
}
.trancarousel .single_post.post_type3 .post_img .img_wrap,
.trancarousel .single_post.post_type3 .post_img img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Mix carousel: ref slide/image is 540x420 (9:7); our 16:9 images render 540x303.75 */
.mix_carousel .single_post.post_type6 .post_img {
  aspect-ratio: 540 / 420;
}
.mix_carousel .single_post.post_type6 .post_img .img_wrap,
.mix_carousel .single_post.post_type6 .post_img .img_wrap a,
.mix_carousel .single_post.post_type6 .post_img img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.mix_carousel .single_post.post_type6 {
  height: auto;
}

/* Entertainment News grid cards: ref thumbs are 350x250 (7:5); our 16:9 render 350x196.9 */
.entertrainments .entertrainment_item .single_post.post_type3 .post_img {
  aspect-ratio: 350 / 250;
}
.entertrainments .entertrainment_item .single_post.post_type3 .post_img .img_wrap,
.entertrainments .entertrainment_item .single_post.post_type3 .post_img .img_wrap a,
.entertrainments .entertrainment_item .single_post.post_type3 .post_img img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Sports News featured: ref image 350x250 (7:5); our 16:9 renders 350x196.9 */
.sports .single_post.post_type3:not(.widgets_small) .post_img {
  aspect-ratio: 350 / 250;
}
.sports .single_post.post_type3:not(.widgets_small) .post_img .img_wrap,
.sports .single_post.post_type3:not(.widgets_small) .post_img a,
.sports .single_post.post_type3:not(.widgets_small) .post_img img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* Sports side thumbs: intermediate <a> must fill so img height:100% resolves against 77px */
.sports .widgets_small .post_img .img_wrap a {
  display: block;
  height: 100%;
  width: 100%;
}
.sports .widgets_small .post_img img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Business News (post_type12): ref image 350x250; our 16:9 renders 350x197 */
.businerss_news .single_post.post_type12 .post_img {
  aspect-ratio: 350 / 250;
}
.businerss_news .single_post.post_type12 .post_img .img_wrap,
.businerss_news .single_post.post_type12 .post_img a,
.businerss_news .single_post.post_type12 .post_img img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Category labels: always capitalize on article-card meta rows (meta/meta2/meta3/meta4/meta5) */
.single_post_text .meta a,
.single_post_text .meta2 a,
.single_post_text .meta3 a,
.single_post_text .meta4 a,
.single_post_text .meta5 a,
.meta a,
.meta2 a,
.meta3 a,
.meta4 a,
.meta5 a,
.p-category,
.p-category span {
  text-transform: capitalize;
}

/* Section topic titles: base theme paints .widget-title #fff (built for dark
   panels) — invisible on light section backgrounds. Default to dark ink and
   keep white only on genuinely dark surfaces. */
.widget-title {
  color: #17222b;
}
.primay_bg .widget-title,
.video_posts .widget-title,
.heading.white .widget-title {
  color: #fff;
}

/* AdSlot layout (website routes do not load Tailwind — keep ad UI self-contained) */
:root {
  --flex-gray-7: #f1f5f9;
}
.ad-skeleton {
  background-color: var(--flex-gray-7);
  border-radius: 8px;
  animation: ad-pulse 1.4s ease-in-out infinite;
}
@keyframes ad-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.ad-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
}
.ad-frame {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-media-wrapper {
  position: relative;
}
.ad-slot-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}
.ad-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 50;
  pointer-events: none;
  font: 700 9px/1.2 system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.9);
}

/* Sidebar sticky slot — static (in-flow). The 300×600 ad sits directly above
   the 350×280 sidebar-rectangle ad; making it position:sticky made it slide
   over the rectangle banner below it while scrolling (two ads overlapping). */
[data-ad-position="sidebar-sticky"] {
  height: auto !important;
  max-height: none;
}

/* Sticky footer ad — fixed to viewport bottom (slides up from below).
   Website routes have no Tailwind, so utility classes on the wrapper are inert. */
[data-sticky-footer-ad] {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 8px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1000;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
[data-sticky-footer-ad].is-visible {
  transform: translateY(0);
  opacity: 1;
}
[data-sticky-footer-ad] > * {
  pointer-events: auto;
  position: relative;
}
[data-sticky-footer-ad] .sticky-ad-close {
  position: absolute;
  top: -12px;
  right: -12px;
  z-index: 60;
  width: 24px;
  height: 24px;
  border: 1px solid #e4e4e7;
  border-radius: 9999px;
  background: #fff;
  color: #52525b;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.15s ease;
  padding: 0;
}
[data-sticky-footer-ad] .sticky-ad-close:hover {
  color: #18181b;
}
[data-sticky-footer-ad]:hover .sticky-ad-close,
[data-sticky-footer-ad] .sticky-ad-close:focus {
  opacity: 1;
}

/* ── Native in-feed ads ───────────────────────────────────────────
   The ad ROOT element is the .single_post card itself (same classes and
   same DOM depth as real article cards) and it renders inside the same
   section containers, so every section sizing/aspect-ratio rule above
   (gallery 730/500, feature 320px, trancarousel 355/253, mix 540/420,
   entertainment/sports/business 350/250, widgets_small 100×77,
   type8/type5 boxes…) applies to the ad automatically. The sponsored
   card therefore adopts the surrounding feed's image size, ratio,
   alignment and margins with zero hardcoding here. Sponsor disclosure
   lives in the card's meta row as plain "category / sponsored" links —
   no background pill is drawn over the card. Only the image fill chain
   and meta casing live in this block. */
.native-ad-card {
  cursor: pointer;
}
/* Sponsor disclosure — plain-text ::after overlay, NO chip/background.
   Reads "{category} / {sponsor}" from the root's data attributes. */
.native-ad-card::after {
  content: attr(data-ad-category) " / " attr(data-sponsor);
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}
/* Thumb-left cards: the right column is the text panel — plain dark label
   pinned bottom-right instead of white-on-image. */
.native-ad-card[data-card-style="widgets-small"]::after,
.native-ad-card[data-card-style="widgets-small-sep"]::after,
.native-ad-card[data-card-style="type8"]::after,
.native-ad-card[data-card-style="type10"]::after,
.native-ad-card[data-card-style="widgets-type4"]::after,
.native-ad-card[data-card-style="post-type12"]::after {
  top: auto;
  bottom: 6px;
  right: 8px;
  left: auto;
  color: #17222b;
  opacity: 0.6;
  text-shadow: none;
  font-weight: 500;
}
.dark-theme .native-ad-card[data-card-style="widgets-small"]::after,
.dark-theme .native-ad-card[data-card-style="widgets-small-sep"]::after,
.dark-theme .native-ad-card[data-card-style="type8"]::after,
.dark-theme .native-ad-card[data-card-style="type10"]::after,
.dark-theme .native-ad-card[data-card-style="widgets-type4"]::after,
.dark-theme .native-ad-card[data-card-style="post-type12"]::after {
  color: #fff;
  opacity: 0.75;
}
/* post-type5 (trending carousel): disclosure is rendered INLINE on the title
   line (NativeAdCard renders .native-sponsor-inline right after the headline).
   Kill the absolute ::after overlay — pinned bottom-right it landed on top of
   the excerpt line below the title. */
.native-ad-card[data-card-style="post-type5"]::after {
  content: none;
}
.native-ad-card .native-sponsor-inline {
  display: inline-block;
  margin-left: 10px;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-weight: 600;
  color: #888;
  white-space: nowrap;
  vertical-align: middle;
}
.dark-theme .native-ad-card .native-sponsor-inline {
  color: #9aa4ad;
}
/* The carousel normally clamps the headline to a 42px/2-line box and renders
   the <a> as a block-level -webkit-box — that would push the inline label onto
   its own line and then clip it. For the ad card: title flows inline so the
   label sits right after it on the title line, and the h4 is not capped so the
   label can never be cut off (it must stay visible as disclosure). */
.carousel_posts1 .native-ad-card[data-card-style="post-type5"] .single_post_text h4 {
  display: block;
  max-height: none;
  overflow: visible;
}
.carousel_posts1 .native-ad-card[data-card-style="post-type5"] .single_post_text h4 a {
  display: inline;
  -webkit-line-clamp: unset;
  -webkit-box-orient: horizontal;
  overflow: visible;
}
/* Theme meta separators draw "/" before the LAST link — suppress it when the
   meta has only one link (category only), so no orphan ::before slash shows. */
.native-ad-card .meta a:only-child::before,
.native-ad-card .meta2 a:only-child::before,
.native-ad-card .meta3 a:only-child::before,
.native-ad-card .meta5 a:only-child::before,
.dark-theme .native-ad-card .meta a:only-child::before,
.dark-theme .native-ad-card .meta2 a:only-child::before,
.dark-theme .native-ad-card .meta3 a:only-child::before,
.dark-theme .native-ad-card .meta5 a:only-child::before {
  content: none;
}
/* NOTE: do NOT force widths/heights on the ad root or its .single_post_text —
   real cards take those from the theme/section rules and the ad must inherit
   identically (parity is what makes it blend into the feed). */
/* Image fill chain — lets section .post_img aspect-ratio/height rules reach
   the ad image through img_wrap > a (mirrors the fill patches globals.css
   applies to real anchor-wrapped thumbs). */
.native-ad-card .post_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.native-ad-card .post_img .img_wrap {
  display: block;
  width: 100%;
  height: 100%;
}
.native-ad-card .post_img .img_wrap a {
  display: block;
  width: 100%;
  height: 100%;
}
.native-ad-card .post_img > a {
  display: block;
  width: 100%;
  height: 100%;
}
.native-ad-card .meta a,
.native-ad-card .meta2 a,
.native-ad-card .meta3 a,
.native-ad-card .meta4 a,
.native-ad-card .meta5 a {
  text-transform: capitalize;
}
.native-sponsored-tag {
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #888;
  font-weight: 500;
}
/* Our Latest Blog (post_type15) — the feed's images are 16:9 (800×450), but
   .post_img has no theme box, so card height followed each image's natural
   ratio (an 800×500 ad creative rendered taller than its neighbours). Lock
   every thumb — real and native — to the same 16:9 box with cover-crop;
   display:block also removes the inline descender gap on real thumbs, so the
   ad card height matches the surrounding article cards exactly. Declared
   after the .native-ad-card fill chain so height:auto wins over height:100%. */
.post_type15 .post_img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ── Our Latest Blog grid (article cards + native ad card) ─────────
   Every cell renders the same .post_type15 markup (the native ad mirrors the
   article card), but title/excerpt length differs per post, so cards ended at
   different heights: the tallest cell set the row height and the shorter cards
   floated above the bottom edge — and since the ad displaces a RANDOM cell on
   every page load, the "odd" card moved around. Columns are flex containers so
   each card fills its (already equal-height) cell, the white text panel grows
   to the bottom, and title/excerpt clamps keep one long post from making the
   whole row taller. Applies to both the real card and the native ad card. */
.latest-blog-grid > [class*="col-"] {
  display: flex;
  flex-direction: column;
}
.latest-blog-grid .single_post.post_type15 {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}
.latest-blog-grid .single_post.post_type15 .single_post_text {
  flex: 1 1 auto;
}
.latest-blog-grid .single_post.post_type15 .single_post_text > a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.latest-blog-grid .single_post.post_type15 .single_post_text .post-p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── All Categories page (/categories) ───────────────────────────── */
.categories-grid > [class*="col-"] {
  margin-bottom: 20px;
}
.category-card {
  display: block;
  height: 100%;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.category-card:hover {
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}
.category-card_img {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.category-card_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.category-card_dot {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
}
.category-card_body {
  display: block;
  padding: 14px 16px 16px;
}
.category-card_body h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  color: #101010;
  text-transform: capitalize;
}
.category-card_body p {
  margin: 0;
  font-size: 13px;
  color: #888;
}
.dark-theme .category-card {
  background: #16191d;
  border-color: #2a2d33;
}
.dark-theme .category-card_body h4 {
  color: #f1f1f1;
}

/* ── About page (/about) ─────────────────────────────────────────── */
.about-hero_tagline {
  max-width: 640px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  line-height: 1.7;
}
.about_intro p {
  margin-bottom: 16px;
  color: #444;
  font-size: 15.5px;
  line-height: 1.9;
}
.about_intro p:last-child {
  margin-bottom: 0;
}
.about_stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 576px) {
  .about_stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.about_stat {
  padding: 22px 14px;
  border: 1px solid #eee;
  border-radius: 6px;
  background: #fff;
  text-align: center;
}
.about_stat i {
  display: block;
  margin-bottom: 10px;
  color: #1091ff;
  font-size: 22px;
}
.about_stat strong {
  display: block;
  color: #17222b;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}
.about_stat span {
  display: block;
  margin-top: 4px;
  color: #888;
  font-size: 13px;
}
.about_values {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .about_values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.about_value {
  padding: 24px 20px;
  border: 1px solid #eee;
  border-radius: 6px;
  background: #fff;
}
.about_value_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(16, 145, 255, 0.1);
  color: #1091ff;
  font-size: 18px;
}
.about_value h4 {
  margin: 14px 0 8px;
  color: #17222b;
  font-size: 17px;
  font-weight: 600;
}
.about_value p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.7;
}
.about_cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 34px 30px;
  margin-bottom: 10px;
  border-radius: 6px;
}
.about_cta h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
}
.about_cta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
}
.about_cta_actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}
.about_cta_link {
  color: #fff;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.about_cta_link:hover {
  color: #1091ff;
}
.dark-theme .about_intro p {
  color: #b9bec6;
}
.dark-theme .about_stat {
  background: #16191d;
  border-color: #2a2d33;
}
.dark-theme .about_stat strong {
  color: #f1f1f1;
}
.dark-theme .about_value {
  background: #16191d;
  border-color: #2a2d33;
}
.dark-theme .about_value h4 {
  color: #f1f1f1;
}
.dark-theme .about_value p {
  color: #9aa0a8;
}

/* ── Article page (/post) ──────────────────────────────────────────
   The sidebar (widget stacks + 300×600 sticky and 300×250 rectangle ad
   slots) is often taller than a short article. Because .row is flex with
   stretch, the main column grew to the row height and the leftover space
   piled up as a dead gap BELOW the next/previous block. Make the main column
   a flex column and pin .next_prev to its bottom (margin-top:auto): the
   leftover space moves ABOVE the block, so next/prev ends flush with the
   sidebar and the bottom of the row instead of floating with whitespace
   under it. On stacked (single-column) layouts there is no free space, so
   the rule is inert. */
.article-main-col {
  display: flex;
  flex-direction: column;
}
.article-main-col .next_prev {
  margin-top: auto;
}