/* =============================================================
   Kids Science Cards — Front-end Stylesheet
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Fredoka+One&display=swap');

/* ---- CSS Variables ---- */
:root {
  --ksc-font-heading : 'Fredoka One', cursive;
  --ksc-font-body    : 'Nunito', sans-serif;
  --ksc-radius       : 18px;
  --ksc-radius-sm    : 10px;
  --ksc-shadow       : 0 8px 32px rgba(0,0,0,.12);
  --ksc-shadow-hover : 0 18px 48px rgba(0,0,0,.2);
  --ksc-transition   : .35s cubic-bezier(.34,1.56,.64,1);

  /* Colour palette — 6 accent slots */
  --ksc-c1 : #FF6B6B;  /* coral-red   */
  --ksc-c2 : #FFC75F;  /* sunny-yellow*/
  --ksc-c3 : #6BCB77;  /* leaf-green  */
  --ksc-c4 : #4D96FF;  /* sky-blue    */
  --ksc-c5 : #C77DFF;  /* lavender    */
  --ksc-c6 : #FF9A3C;  /* orange      */

  --ksc-c1-light: #fff0f0;
  --ksc-c2-light: #fffbf0;
  --ksc-c3-light: #f0fff2;
  --ksc-c4-light: #f0f6ff;
  --ksc-c5-light: #f9f0ff;
  --ksc-c6-light: #fff5ec;
}

/* ---- Container ---- */
.ksc-container {
  font-family: var(--ksc-font-body);
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0 40px;
}

/* ---- Section title ---- */
.ksc-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
  position: relative;
}
.ksc-title-icon {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,.15));
}
.ksc-section-title h2 {
  font-family: var(--ksc-font-heading);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #4D96FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ksc-title-deco {
  flex: 1;
  height: 4px;
  background: linear-gradient(90deg, #4D96FF, #C77DFF, transparent);
  border-radius: 4px;
  margin-top: 4px;
}

/* ---- Grid ---- */
.ksc-grid {
  display: grid;
  gap: 28px;
}
.ksc-cols-1 { grid-template-columns: 1fr; }
.ksc-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ksc-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ksc-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .ksc-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .ksc-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ksc-cols-2,
  .ksc-cols-3,
  .ksc-cols-4 { grid-template-columns: 1fr; }
}

/* ---- Card ---- */
.ksc-card {
  background: #fff;
  border-radius: var(--ksc-radius);
  box-shadow: var(--ksc-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--ksc-transition), box-shadow var(--ksc-transition);
  border: 2px solid transparent;
}
.ksc-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: var(--ksc-shadow-hover);
}

/* Colour border on hover per slot */
.ksc-card.ksc-color-1:hover { border-color: var(--ksc-c1); }
.ksc-card.ksc-color-2:hover { border-color: var(--ksc-c2); }
.ksc-card.ksc-color-3:hover { border-color: var(--ksc-c3); }
.ksc-card.ksc-color-4:hover { border-color: var(--ksc-c4); }
.ksc-card.ksc-color-5:hover { border-color: var(--ksc-c5); }
.ksc-card.ksc-color-6:hover { border-color: var(--ksc-c6); }

/* Top colour bar */
.ksc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  z-index: 2;
}
.ksc-card.ksc-color-1::before { background: var(--ksc-c1); }
.ksc-card.ksc-color-2::before { background: var(--ksc-c2); }
.ksc-card.ksc-color-3::before { background: var(--ksc-c3); }
.ksc-card.ksc-color-4::before { background: var(--ksc-c4); }
.ksc-card.ksc-color-5::before { background: var(--ksc-c5); }
.ksc-card.ksc-color-6::before { background: var(--ksc-c6); }

/* ---- Card image ---- */
.ksc-card-image-wrap {
  display: block;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/9;
  background: #f0f4ff;
  text-decoration: none;
}
.ksc-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  display: block;
}
.ksc-card:hover .ksc-card-image { transform: scale(1.07); }

/* Overlay shimmer on hover */
.ksc-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.35) 100%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.ksc-card:hover .ksc-image-overlay { opacity: 1; }

/* ---- Placeholder image ---- */
.ksc-placeholder-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e0eaff 0%, #f9e7ff 100%);
  width: 100%;
  height: 100%;
}
.ksc-card.ksc-color-1 .ksc-placeholder-image { background: linear-gradient(135deg, var(--ksc-c1-light), #ffe0e0); }
.ksc-card.ksc-color-2 .ksc-placeholder-image { background: linear-gradient(135deg, var(--ksc-c2-light), #fff3cc); }
.ksc-card.ksc-color-3 .ksc-placeholder-image { background: linear-gradient(135deg, var(--ksc-c3-light), #d0f5d5); }
.ksc-card.ksc-color-4 .ksc-placeholder-image { background: linear-gradient(135deg, var(--ksc-c4-light), #d6e8ff); }
.ksc-card.ksc-color-5 .ksc-placeholder-image { background: linear-gradient(135deg, var(--ksc-c5-light), #ead6ff); }
.ksc-card.ksc-color-6 .ksc-placeholder-image { background: linear-gradient(135deg, var(--ksc-c6-light), #ffe4c4); }

.ksc-placeholder-emoji { font-size: 3.5rem; line-height: 1; }

/* ---- Reading time badge ---- */
.ksc-read-time {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: .72rem;
  font-weight: 700;
  color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  z-index: 3;
}

/* ---- Card body ---- */
.ksc-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* ---- Category badge ---- */
.ksc-cat-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  width: fit-content;
  transition: transform .2s, opacity .2s;
}
.ksc-cat-badge:hover { transform: scale(1.06); opacity: .85; }

.ksc-card.ksc-color-1 .ksc-cat-badge { background: var(--ksc-c1-light); color: var(--ksc-c1); border: 1.5px solid var(--ksc-c1); }
.ksc-card.ksc-color-2 .ksc-cat-badge { background: var(--ksc-c2-light); color: #b8860b; border: 1.5px solid var(--ksc-c2); }
.ksc-card.ksc-color-3 .ksc-cat-badge { background: var(--ksc-c3-light); color: #2d7a3a; border: 1.5px solid var(--ksc-c3); }
.ksc-card.ksc-color-4 .ksc-cat-badge { background: var(--ksc-c4-light); color: #1a5dbf; border: 1.5px solid var(--ksc-c4); }
.ksc-card.ksc-color-5 .ksc-cat-badge { background: var(--ksc-c5-light); color: #7b2fbf; border: 1.5px solid var(--ksc-c5); }
.ksc-card.ksc-color-6 .ksc-cat-badge { background: var(--ksc-c6-light); color: #b85c00; border: 1.5px solid var(--ksc-c6); }

/* ---- Title ---- */
.ksc-card-title {
  font-family: var(--ksc-font-heading);
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0;
  color: #1a1a2e;
}
.ksc-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}
.ksc-card-title a:hover { color: #4D96FF; }

/* ---- Excerpt ---- */
.ksc-card-excerpt {
  font-size: .88rem;
  color: #555;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

/* ---- Meta row ---- */
.ksc-card-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .74rem;
  color: #888;
  font-weight: 600;
}

/* ---- CTA button ---- */
.ksc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 40px;
  font-family: var(--ksc-font-body);
  font-size: .85rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform var(--ksc-transition), box-shadow .2s, filter .2s;
  width: fit-content;
  margin-top: auto;
  border: none;
  cursor: pointer;
  color: #fff;
}
.ksc-btn:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  color: #fff;
  filter: brightness(1.08);
}
.ksc-btn-arrow { transition: transform .25s; display: inline-block; }
.ksc-btn:hover .ksc-btn-arrow { transform: translateX(4px); }

.ksc-card.ksc-color-1 .ksc-btn { background: linear-gradient(135deg, var(--ksc-c1), #ff4757); }
.ksc-card.ksc-color-2 .ksc-btn { background: linear-gradient(135deg, var(--ksc-c2), #ffaa00); color: #3d2c00; }
.ksc-card.ksc-color-3 .ksc-btn { background: linear-gradient(135deg, var(--ksc-c3), #38a349); }
.ksc-card.ksc-color-4 .ksc-btn { background: linear-gradient(135deg, var(--ksc-c4), #1a5dbf); }
.ksc-card.ksc-color-5 .ksc-btn { background: linear-gradient(135deg, var(--ksc-c5), #9b3dd4); }
.ksc-card.ksc-color-6 .ksc-btn { background: linear-gradient(135deg, var(--ksc-c6), #e0620a); }

/* ---- Decorative dots ---- */
.ksc-card-deco-dots {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  opacity: .12;
  background-image: radial-gradient(circle, #000 1.5px, transparent 1.5px);
  background-size: 7px 7px;
  pointer-events: none;
}

/* ---- Card styles: rounded ---- */
.ksc-style-rounded .ksc-card           { border-radius: 28px; }
.ksc-style-rounded .ksc-card-image-wrap{ border-radius: 20px 20px 0 0; }
.ksc-style-rounded .ksc-cat-badge      { border-radius: 8px; }
.ksc-style-rounded .ksc-btn            { border-radius: 8px; }

/* ---- Card styles: flat ---- */
.ksc-style-flat .ksc-card { box-shadow: none; border: 2px solid #e8ecf4 !important; }
.ksc-style-flat .ksc-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

/* ---- Entrance animation ---- */
.ksc-animate .ksc-card {
  opacity: 0;
  transform: translateY(30px);
  animation: kscFadeUp .55s forwards;
}
.ksc-animate .ksc-card:nth-child(1) { animation-delay: .05s; }
.ksc-animate .ksc-card:nth-child(2) { animation-delay: .12s; }
.ksc-animate .ksc-card:nth-child(3) { animation-delay: .19s; }
.ksc-animate .ksc-card:nth-child(4) { animation-delay: .26s; }
.ksc-animate .ksc-card:nth-child(5) { animation-delay: .33s; }
.ksc-animate .ksc-card:nth-child(6) { animation-delay: .40s; }
.ksc-animate .ksc-card:nth-child(n+7) { animation-delay: .45s; }

@keyframes kscFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ---- No posts ---- */
.ksc-no-posts {
  text-align: center;
  padding: 60px 20px;
  background: #f9fafb;
  border-radius: var(--ksc-radius);
  border: 2px dashed #d1d9e0;
}
.ksc-no-posts-icon { font-size: 3.5rem; display: block; margin-bottom: 16px; }
.ksc-no-posts p { color: #666; font-size: 1rem; font-weight: 600; }

/* ---- Pagination ---- */
.ksc-pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.ksc-pagination .page-numbers {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.ksc-pagination .page-numbers li { margin: 0; }
.ksc-pagination .page-numbers a,
.ksc-pagination .page-numbers span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  font-family: var(--ksc-font-body);
  font-weight: 800;
  font-size: .9rem;
  text-decoration: none;
  transition: all .25s;
  border: 2px solid transparent;
  color: #444;
  background: #f0f4ff;
}
.ksc-pagination .page-numbers a:hover {
  background: #4D96FF;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(77,150,255,.4);
}
.ksc-pagination .page-numbers .current {
  background: linear-gradient(135deg, #4D96FF, #C77DFF);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(77,150,255,.45);
}
.ksc-pagination .page-numbers .dots { background: transparent; border: none; }