/*================================================
Skeleton / loading placeholders  (global, reusable)
=================================================
One system for every kind of loading state in the theme.

1) Image wrappers (server-rendered content)
   Add `.sk-media` to the element that wraps an <img>. While the image loads it shows an animated
   placeholder; assets/js/skeleton.js adds `.is-loaded` (or `.is-error`) when the image settles.
   Modifiers: `.is-empty` = the post has no image (static block, no animation).
   Placeholders only exist when JS runs (html[data-sk-js], set in <head>), so visitors without
   JavaScript always see the real content.

2) Component placeholders (AJAX / async content)
   Markup comes from inc/skeleton.php (aadhar_skeleton() / <template data-sk-tpl>), and is inserted
   with AadharSkeleton.show( container, 'media', 5 ) / removed with AadharSkeleton.hide( container ).
   They reuse the real component's wrapper classes, so spacing matches; the pieces below only add
   the shimmering blocks.

Theming: override the custom properties on any container.
=================================================*/

:root {
  --sk-bg: #e9ecf1;
  --sk-shine: rgba(255, 255, 255, 0.7);
  --sk-radius: 4px;
  --sk-speed: 1.4s;
}

.theme-dark {
  --sk-bg: #1f1f21;
  --sk-shine: rgba(255, 255, 255, 0.08);
}

@keyframes sk-shimmer {
  100% { transform: translateX(100%); }
}

/* ---- Base block -------------------------------------------------- */
.sk {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--sk-bg);
  border-radius: var(--sk-radius);
  color: transparent;
  user-select: none;
  pointer-events: none;
}

.sk::after,
[data-sk-js] .sk-media:not(.is-loaded):not(.is-empty):not(.is-error)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--sk-shine), transparent);
  animation: sk-shimmer var(--sk-speed) ease-in-out infinite;
}

/* ---- Image wrappers ---------------------------------------------- */
.sk-media {
  position: relative;
  overflow: hidden;
}

/* Cover layer: hidden by default, so content is never blocked. */
.sk-media::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-color: var(--sk-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

[data-sk-js] .sk-media:not(.is-loaded):not(.is-empty)::before {
  opacity: 1;
  visibility: visible;
  transition: none;
}

/* Post without an image: calm static block that keeps the layout. */
.sk-media.is-empty {
  background-color: var(--sk-bg);
  min-height: 1px;
}

/* Broken image: static block, no animation, broken-image icon hidden. */
.sk-media.is-error img {
  visibility: hidden;
}

/* Advert images have no known size: reserve space until they load. */
.sk-media--ad {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

[data-sk-js] .sk-media--ad:not(.has-dims):not(.is-loaded):not(.is-empty) {
  min-height: var(--sk-min-h, 250px);
  min-width: min(100%, var(--sk-min-w, 300px));
}

/* Known size (width/height attributes): the browser already reserves the exact box. */
.sk-media--ad.has-dims img {
  display: block;
  max-width: 100%;
}

/* ---- Text and layout pieces -------------------------------------- */
.sk-line {
  height: 1em;
  margin: 0 0 0.6em;
}

.sk-line--title { height: 1.15em; margin-bottom: 0.5em; }
.sk-line--heading { height: 1.6em; margin-bottom: 0.9em; }

.sk-w-20 { width: 20%; }
.sk-w-30 { width: 30%; }
.sk-w-60 { width: 60%; }
.sk-w-70 { width: 70%; }
.sk-w-80 { width: 80%; }
.sk-w-90 { width: 90%; }
.sk-w-100 { width: 100%; }

.sk-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
}

.sk-btn {
  display: inline-block;
  width: 120px;
  height: 44px;
}

/* ---- Component placeholders (dimensions mirror the real cards) ----- */
.sk-group {
  display: block;
}

/* Lead story: image is 270px high in style.css */
.sk-block--featured { height: 270px; margin-bottom: 15px; }
.sk-item--featured .news-content { padding: 0; }

/* Compact list row: 110 x 70 thumbnail */
.international-news-list .news-media > .sk-thumb,
.sk-item--media > .sk-thumb {
  flex: none;
  width: 110px;
  height: 70px;
  border-radius: 0 4px 4px 0;
}

/* Grid card: image is up to 180px high in .special-news */
.sk-block--card { height: 180px; }
.sk-item--card .news-content { margin-top: 12px; }

/* Archive row: image column */
.sk-block--archive { height: 246px; }

.sk-item--text { margin-bottom: 1.2em; }

.sk-item--meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sk-item--meta .sk-line { margin: 0; }

/* Breaking-news ticker: shown until Owl Carousel has initialised, then removed.
   1px + 16px + 1px = 18px, the height of one line of .single-breaking-news p (16px text). */
.sk-ticker {
  height: 16px;
  width: 60%;
  margin: 1px 0;
  --sk-bg: rgba(255, 255, 255, 0.28);
  --sk-shine: rgba(255, 255, 255, 0.4);
}

.breaking-news-content .sk-group {
  float: left;
  width: 80%;
}

.breaking-news-content .sk-group .sk-ticker { width: 60%; }

/* Only while JS can replace it, and only until the carousel is ready */
.breaking-news-content .sk-group { display: none; }
[data-sk-js] .breaking-news-content .sk-group { display: block; }
.breaking-news-content .breaking-news-slides.owl-loaded ~ .sk-group { display: none !important; }

/* ---- Containers that are being (re)loaded --------------------------- */
[aria-busy="true"] > .sk-group ~ * { display: none; }

.sk-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Motion preferences ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sk::after,
  .sk-media::after {
    animation: none !important;
    display: none !important;
  }

  .sk-media::before {
    transition: none;
  }
}