/* "By Revelations" page layout. Scoped: enqueued only on page-revelations.php.
   Deliberately mirrors .home-strip (assets/css/pages/home.css): this page is the
   full version of the Home section of the same name, so the two read as one
   thing — a swipeable rail on mobile that becomes a grid from 768px up. The
   .cat-intro split from the category archive is mirrored for the same reason. */

.rev-intro { display: grid; gap: var(--mv-s5); }
.rev-intro h1 { font-size: clamp(4.5rem, 16vw, 10.5rem); line-height: 0.82; }

.rev-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--mv-s4); margin-bottom: var(--mv-s12); }

.rev-strip { margin-bottom: var(--mv-s12); }
.rev-strip__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--mv-s4); margin-bottom: var(--mv-s4); }
.rev-strip__title { display: flex; align-items: baseline; gap: var(--mv-s3); flex-wrap: wrap; }
.rev-strip__title .num { font-family: var(--mv-serif); font-style: italic; font-weight: 300; font-size: 1.375rem; color: var(--mv-highlight); }
.rev-strip__title h3 { font-family: var(--mv-serif); font-weight: 400; font-size: 1.625rem; margin: 0; color: var(--mv-default); }
.rev-strip__desc { margin: 0 0 var(--mv-s4); max-width: 560px; font-family: var(--mv-serif); font-style: italic; font-size: 0.9375rem; color: var(--mv-mute); }

/* min-width:0 + max-width:100% cap the rail box; overscroll-behavior-x:contain
   keeps a swipe inside the rail so it can't pan the page on mobile. */
.rev-strip__items { display: flex; gap: var(--mv-s4); min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory; }
.rev-strip__items::-webkit-scrollbar { height: 0; }
.rev-strip__items > .mv-card { flex: 0 0 46%; scroll-snap-align: start; }

.rev-empty { padding: var(--mv-s12) var(--mv-s8); border: 1px dashed var(--mv-hi-soft); text-align: center; }

@media (min-width: 768px) {
  .rev-intro { grid-template-columns: 1.3fr 1fr; align-items: end; gap: var(--mv-s12); }
  .rev-strip__items { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .rev-strip__items > .mv-card { flex: none; }
}
@media (min-width: 1024px) {
  .rev-strip__items { grid-template-columns: repeat(5, 1fr); }
}