/* journal-grid.css — Skanda Vale static site. Authored file, like
   sv-style/shop-v2.css and sv-style/ninja-match-gravity.css.
   Linked only from /journal/index.html.

   Written 2026-08-11 (owner: "there are some gaps in the grid").
   The JetEngine listing lays its cards out with flex-wrap. When cards
   have different heights — and they do, because excerpt lengths vary —
   flex wrapping leaves ragged holes: two rows on the journal page were
   ending up with a single card and an empty half.
   A two-column CSS grid cannot leave a hole, so we switch to one.
   Cards are top-aligned; the original flex rules are neutralised. */

.jet-listing-grid--69075 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem 2.5rem;
  align-items: start;
}

.jet-listing-grid--69075 > .jet-listing-grid__item {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  flex: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Two decorative strips are injected into the listing that just read
   "Teachings" and "Stories". They carry no link and no information —
   every card already shows its own category tag — but each one forced a
   row break, which is what left two rows holding a single card. Hiding
   them makes the grid come out even. Delete this rule to bring them
   back (they will reintroduce the gaps). */
.jet-listing-grid--69075 > .jet-listing-grid__items {
  display: none;
}

@media (max-width: 767px) {
  .jet-listing-grid--69075 {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ---- progressive reveal --------------------------------------------
   Every post is present in the HTML (good for search engines, and the
   page works with JavaScript switched off). Where JavaScript IS
   available, sv-journal-more.js adds .sv-paged to the grid and shows a
   button, so a visitor meets a manageable number of cards at a time
   rather than all 38 at once. Without JS, none of this applies and the
   full list simply shows. */

.jet-listing-grid--69075.sv-paged > .jet-listing-grid__item.sv-hidden {
  display: none;
}

.sv-more-wrap {
  display: flex;
  justify-content: center;
  margin: 2.5rem 0 1rem;
}

.sv-more-btn {
  font: inherit;
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: .85em 2.2em;
  color: #ca4d2a;
  background: transparent;
  border: 2px solid #ca4d2a;
  border-radius: 2px;
  transition: background-color .15s ease, color .15s ease;
}

.sv-more-btn:hover,
.sv-more-btn:focus-visible {
  background: #ca4d2a;
  color: #fff;
}

.sv-more-count {
  display: block;
  text-align: center;
  margin-top: .75rem;
  font-size: .85rem;
  opacity: .7;
}

/* ---- card images ----------------------------------------------------
   The cards used Elementor's 600x346 crops, which look soft on a
   high-resolution screen once a card is ~590px wide. They now point at
   the full-size originals instead, so the crop has to be reproduced in
   CSS: 600/346 is Elementor's ratio and object-fit:cover centres it the
   same way. Lazy loading keeps the extra weight off the first paint. */
.jet-listing-grid--69075 .jet-listing-dynamic-image img,
.jet-listing-grid--69075 .elementor-widget-image img{
  aspect-ratio: 600 / 346;
  object-fit: cover;
  width: 100%;
  height: auto;
}