.elementor-3130 .elementor-element.elementor-element-58f100f{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-96031f4 *//* ============================================================
   LEARNING SUTRA – Blog Loader Styles
   Theme: The Curious Storybook Aesthetic
   Paste into Elementor > Site Settings > Custom CSS
   ============================================================ */

.ls-blog {
  --ls-parchment: #F8F5F3;
  --ls-orchid:    #E662D9;
  --ls-sky:       #45A8FF;
  --ls-lavender:  #EDE5FA;
  --ls-blush:     #FCE6FA;
  --ls-ink:       #202020;
  --ls-slate:     #77727C;
  --ls-white:     #FFFFFF;

  --ls-display: 'Urbanist', 'Poppins', system-ui, sans-serif;
  --ls-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ls-radius:  24px;
  --ls-radius-sm: 14px;
  --ls-border:  1.5px solid rgba(32, 32, 32, .10);
  --ls-shadow:  0 2px 0 rgba(32, 32, 32, .04), 0 10px 24px -14px rgba(119, 114, 124, .35);
  --ls-shadow-hover: 0 3px 0 rgba(32, 32, 32, .05), 0 18px 30px -16px rgba(119, 114, 124, .45);
  --ls-ease: cubic-bezier(.22, .61, .36, 1);

  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(8px, 2vw, 16px);
  box-sizing: border-box;
  font-family: var(--ls-body);
  color: var(--ls-ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.ls-blog *,
.ls-blog *::before,
.ls-blog *::after { box-sizing: border-box; }

/* ---------- Category chips ---------- */
.ls-blog__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 0 clamp(24px, 4vw, 40px);
}
.ls-blog__filters[hidden] { display: none; }

.ls-chip {
  appearance: none;
  font-family: var(--ls-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  padding: 11px 20px;
  color: var(--ls-ink);
  background: var(--ls-white);
  border: var(--ls-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .25s var(--ls-ease), border-color .25s var(--ls-ease),
              color .25s var(--ls-ease), transform .25s var(--ls-ease);
}
.ls-chip:hover {
  background: var(--ls-blush);
  border-color: rgba(230, 98, 217, .45);
  transform: translateY(-1px);
}
.ls-chip.is-active {
  background: var(--ls-ink);
  border-color: var(--ls-ink);
  color: var(--ls-parchment);
}
.ls-chip:focus-visible,
.ls-blog__more:focus-visible,
.ls-card a:focus-visible {
  outline: 3px solid var(--ls-sky);
  outline-offset: 3px;
}

/* ---------- Grid ---------- */
.ls-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
}

/* ---------- Card ---------- */
.ls-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ls-white);
  border: var(--ls-border);
  border-radius: var(--ls-radius);
  box-shadow: var(--ls-shadow);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  animation: ls-rise .6s var(--ls-ease) forwards;
  animation-delay: var(--ls-delay, 0ms);
  transition: transform .35s var(--ls-ease), box-shadow .35s var(--ls-ease), border-color .35s var(--ls-ease);
}
.ls-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ls-shadow-hover);
  border-color: rgba(230, 98, 217, .35);
}

@keyframes ls-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Media: framed like a storybook plate, with an inner paper margin */
.ls-card__media {
  display: block;
  position: relative;
  margin: 10px 10px 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--ls-radius) - 8px);
  background: var(--ls-lavender);
  text-decoration: none;
}
.ls-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ls-ease);
}
.ls-card:hover .ls-card__media img { transform: scale(1.04); }

.ls-card__media.is-empty {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 25% 30%, var(--ls-blush) 0 28%, transparent 29%),
    radial-gradient(circle at 78% 72%, rgba(69, 168, 255, .18) 0 24%, transparent 25%),
    var(--ls-lavender);
}
.ls-card__spark {
  font-size: 42px;
  color: var(--ls-orchid);
  opacity: .8;
}

.ls-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 26px;
}

.ls-card__tag {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ls-ink);
  background: var(--ls-blush);
  border: 1.5px dashed rgba(230, 98, 217, .55);
  border-radius: 999px;
}

.ls-card__title {
  margin: 0 0 10px;
  font-family: var(--ls-display);
  font-weight: 800;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ls-ink);
}
.ls-card__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--ls-orchid), var(--ls-orchid));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size .35s var(--ls-ease), color .25s var(--ls-ease);
}
.ls-card:hover .ls-card__title a { background-size: 100% 2px; }

.ls-card__excerpt {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 400;
  color: var(--ls-slate);
}

.ls-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ls-slate);
  border-top: 1.5px dashed rgba(119, 114, 124, .25);
}
.ls-card__dot { font-size: 8px; color: var(--ls-orchid); }

.ls-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ls-ink);
  text-decoration: none;
}
.ls-card__arrow {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 15px;
  color: var(--ls-ink);
  background: var(--ls-lavender);
  border-radius: 50%;
  transition: transform .3s var(--ls-ease), background-color .3s var(--ls-ease), color .3s var(--ls-ease);
}
.ls-card__link:hover .ls-card__arrow,
.ls-card:hover .ls-card__arrow {
  transform: translateX(4px);
  background: var(--ls-orchid);
  color: var(--ls-white);
}

/* ---------- Status / empty / error ---------- */
.ls-blog__status {
  margin: 24px auto 0;
  max-width: 520px;
  padding: 18px 24px;
  text-align: center;
  font-size: 15px;
  color: var(--ls-slate);
  background: var(--ls-lavender);
  border: 1.5px dashed rgba(119, 114, 124, .4);
  border-radius: var(--ls-radius-sm);
}
.ls-blog__status[hidden] { display: none; }
.ls-blog__status.is-error {
  color: var(--ls-ink);
  background: var(--ls-blush);
  border-color: rgba(230, 98, 217, .55);
}

/* ---------- Load more ---------- */
.ls-blog__footer {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 48px);
}
.ls-blog__more {
  appearance: none;
  font-family: var(--ls-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 16px 32px;
  color: var(--ls-parchment);
  background: var(--ls-ink);
  border: 2px solid var(--ls-ink);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .3s var(--ls-ease), color .3s var(--ls-ease),
              transform .3s var(--ls-ease), border-color .3s var(--ls-ease);
}
.ls-blog__more[hidden] { display: none; }
.ls-blog__more:hover {
  background: var(--ls-orchid);
  border-color: var(--ls-orchid);
  color: var(--ls-white);
  transform: translateY(-2px);
}
.ls-blog__more:active { transform: translateY(0); }

/* ---------- Skeleton loading ---------- */
.ls-card--skeleton {
  opacity: 1;
  transform: none;
  animation: none;
  pointer-events: none;
}
.ls-card--skeleton:hover { transform: none; box-shadow: var(--ls-shadow); border-color: rgba(32, 32, 32, .10); }
.ls-card--skeleton .ls-card__media { background: var(--ls-lavender); }

.ls-sk {
  display: block;
  height: 14px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ls-lavender) 25%, var(--ls-parchment) 50%, var(--ls-lavender) 75%);
  background-size: 200% 100%;
  animation: ls-shimmer 1.6s ease-in-out infinite;
}
.ls-card--skeleton .ls-card__media {
  background: linear-gradient(90deg, var(--ls-lavender) 25%, var(--ls-parchment) 50%, var(--ls-lavender) 75%);
  background-size: 200% 100%;
  animation: ls-shimmer 1.6s ease-in-out infinite;
}
.ls-sk--chip  { width: 90px; height: 24px; margin-bottom: 16px; }
.ls-sk--title { width: 85%; height: 22px; margin-bottom: 16px; }
.ls-sk--short { width: 55%; }

@keyframes ls-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .ls-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .ls-blog__grid { grid-template-columns: 1fr; gap: 20px; }
  .ls-blog__filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin-inline: -4px;
    padding: 4px 4px 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ls-blog__filters::-webkit-scrollbar { display: none; }
  .ls-chip { flex: 0 0 auto; }
  .ls-card { border-radius: 20px; }
  .ls-card__body { padding: 20px 20px 24px; }
  .ls-blog__more { width: 100%; max-width: 360px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ls-blog *,
  .ls-blog *::before,
  .ls-blog *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ls-card { opacity: 1; transform: none; }
  .ls-card:hover,
  .ls-card:hover .ls-card__media img { transform: none; }
}/* End custom CSS */