/* Clamp poem content to 15 lines and show fade for overflow */
.poem-content {
  display: -webkit-box;
  -webkit-line-clamp: 15;
  line-clamp: 15;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
  max-height: 25.5em;
  transition: max-height 0.3s;
}
.poem-content::after {
  content: '';
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.5em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--tw-bg-opacity,1) #fff 90%);
  pointer-events: none;
}
.dark .poem-content::after {
  background: linear-gradient(to bottom, rgba(30,41,59,0), #1e293b 90%);
}
.poem-content.expanded {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  max-height: none;
  overflow: visible;
}
.poem-content.expanded::after {
  display: none;
}
/* Preview line helpers: vary the number of visible lines in the preview so cards
   have visibly different heights (Pinterest-like). These classes override the
   default clamp by setting a different -webkit-line-clamp and a matching
   max-height (line-height ~1.6em). */
.preview-lines-3  { -webkit-line-clamp: 3;  max-height: calc(1.6em * 3); }
.preview-lines-4  { -webkit-line-clamp: 4;  max-height: calc(1.6em * 4); }
.preview-lines-5  { -webkit-line-clamp: 5;  max-height: calc(1.6em * 5); }
.preview-lines-6  { -webkit-line-clamp: 6;  max-height: calc(1.6em * 6); }
.preview-lines-7  { -webkit-line-clamp: 7;  max-height: calc(1.6em * 7); }
.preview-lines-8  { -webkit-line-clamp: 8;  max-height: calc(1.6em * 8); }
.preview-lines-9  { -webkit-line-clamp: 9;  max-height: calc(1.6em * 9); }
.preview-lines-10 { -webkit-line-clamp: 10; max-height: calc(1.6em * 10); }
.preview-lines-12 { -webkit-line-clamp: 12; max-height: calc(1.6em * 12); }
/* Force sun icon to hide in light mode and show only in dark mode */
.fa-sun {
  display: none !important;
}
.dark .fa-sun {
  display: inline !important;
}
/* Cleaner font for main content */
body, .poem-card, .masonry, .poem-card p, .poem-card h3 {
    font-family: 'Montserrat', 'Inter', 'Segoe UI', 'system-ui', 'Arial', sans-serif;
  font-size: 0.97rem;
}

/* Slightly smaller, cleaner Devanagari font */
.devanagari, h3.font-display:has([lang="ne"], [lang="hi"]) {
  font-size: 1.1rem;
  font-family: 'Noto Sans Devanagari', 'Mangal', 'Kalimati', 'Preeti', 'Arial', sans-serif;
}
.devanagari-line {
  font-size: 0.97rem;
  font-family: 'Noto Sans Devanagari', 'Mangal', 'Kalimati', 'Preeti', 'Arial', sans-serif;
}
/* Elegant faded background for the whole page */
.faded-bg {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 50%, #f0fdfa 100%);
  /* fallback for dark mode, will be overridden by Tailwind dark class */
}


/* Ensure dark background for dark UI using Tailwind's dark class */
.dark .faded-bg {
  background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #0f172a 100%);
}

/* Prevent background from repeating and keep it fixed to avoid visible repeats on scroll */
.faded-bg, .dark .faded-bg {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.masonry {
    column-gap: 1.5em;
}
/* Hide masonry until layout is stable to avoid column reflow flashes */
.masonry.invisible { visibility: hidden; }

/* Grid fallback when CSS columns miscalculate (keeps multiple columns without large single-column failure) */
.masonry.masonry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
.masonry.masonry-grid .poem-card { break-inside: unset; align-self: start; }
@media (min-width: 1024px) {
    .masonry {
    column-count: 4;
    }
  .masonry.masonry-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .masonry {
    column-count: 3;
    }
  .masonry.masonry-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 640px) and (max-width: 767px) {
    .masonry {
    column-count: 2;
    }
  .masonry.masonry-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 639px) {
    .masonry {
    column-count: 1;
    }
  .masonry.masonry-grid { grid-template-columns: repeat(1, minmax(0,1fr)); }
}
.break-inside {
    break-inside: avoid;
}
.poem-card {
    transition: all 0.3s ease;
}
.poem-card:hover {
    transform: translateY(-5px);
}

/* Randomized card height helpers (used when JS assigns h-sm / h-md / h-lg / h-xl)
  These set a minimum height so the masonry shows varied card heights while
  letting content expand naturally. Values chosen to look organic on narrow
  and wide columns. */
.poem-card.h-sm { min-height: 160px; }
.poem-card.h-md { min-height: 220px; }
.poem-card.h-lg { min-height: 300px; }
.poem-card.h-xl { min-height: 380px; }

/* Small visual tweak so truncated content still has room — allow content to
  expand beyond the min-height (no hard max) so the preview remains readable. */
.poem-card .poem-content { max-height: none; }

/* Use a per-card CSS variable set by JS to add extra bottom padding which
  guarantees visible height variation even when content is similarly-sized. */
.poem-card { padding-bottom: calc(1.5rem + var(--rand-pad, 0px)); }