/* ===== THEME ===== */
/*
:root {
    --bg: #ffffff;
    --bg-tint: #f6f8fb;
    --text: #1b1f23;
    --muted: #5b6675;
    --primary: #0f6fff;
    --primary-600: #0d5cce;
    --primary-100: #e7efff;
    --ghost: #e8ecf4;
    --card: #ffffff;
    --stroke: #e5e8ee;
    --shadow: 0 6px 18px rgba(0,0,0,.08);
    --radius: 14px;
    --max: 1200px;
    --gap: 20px;
    --gap-lg: 28px;
    --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.container {
    max-width: var(--max);
    margin: auto;
    padding: 0 18px
}
*/
.jagoe-grev{ position:relative; overflow:hidden; }

/* Heading color variable (falls back to inherit) */
.jagoe-grev h1,
.jagoe-grev h2,
.jagoe-grev h3,
.jagoe-grev h4,
.jagoe-grev h5,
.jagoe-grev h6{
  color: var(--jtb-heading, inherit);
}

/* Attribution */
.jagoe-grev .jtb-attr{ display:flex; align-items:center; gap:.5rem; margin-top:1rem; opacity:.8; font-size:.875rem; }
.jagoe-grev .jtb-attr img{ height:18px; width:auto; }

/* Grid + cards (masonry/default) */
.jtb-grid-wrap{ --jtb-gap: 18px; }
.jtb-grid{ display:grid; grid-template-columns: repeat(var(--jtb-columns,3), minmax(0,1fr)); gap:var(--jtb-gap); list-style:none; padding:0; margin:0; }
.jtb-item{ background:#fff; color:inherit; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.06); padding:18px; display:flex; gap:14px; }
.jtb-avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.jtb-body{ min-width:0; }
.jtb-quote{ margin:.25rem 0 .5rem; font-size:1rem; line-height:1.45; }
.jtb-meta{ font-size:.9rem; color:#5a5a5a; }
.jtb-stars .star{ color:var(--jtb-accent,#179c52); font-size:1.05rem; margin-right:2px; }
.jtb-stars .empty{ color:#ccc; }
.jtb-stars .half{ background: linear-gradient(90deg, var(--jtb-accent,#179c52) 50%, #ccc 50%); -webkit-background-clip:text; color:transparent; }

/* Variants */
.jtb-grid-wrap.bordered .jtb-item{ border:1px solid rgba(0,0,0,.08); box-shadow:none; }
.jtb-grid-wrap.speech .jtb-item{ border-radius:16px 16px 16px 4px; }
.jtb-grid-wrap.mosaic .jtb-item:nth-child(5n){ grid-column: span 2; }

/* Responsive columns for masonry */
@media (max-width: 900px){ .jtb-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .jtb-grid{ grid-template-columns:1fr; } }

/* ========== Carousel mode (proper slider, no native scrollbar, arrows) ========== */
.jtb-grid-wrap.carousel{ position: relative; }

/* IMPORTANT OVERRIDES: turn off base grid-template-columns and make the scroller full width */
.jtb-grid-wrap.carousel .jtb-grid{
  /* cancel masonry columns */
  grid-template-columns: none !important;

  /* horizontal grid of fixed-width columns that fit exactly N per view */
  display:grid;
  grid-auto-flow: column;                                          /* MDN: grid-auto-flow column. */
  grid-auto-columns: calc((100% - (var(--cards,3) - 1) * var(--jtb-gap)) / var(--cards,3)); /* N cards per view */
  column-gap: var(--jtb-gap);
  width: 100%;

  /* scroller behavior */
  overflow-x: auto; 
  overflow-y: hidden;
  scroll-snap-type: x mandatory;                                   /* MDN: scroll-snap-type x mandatory. */
  scroll-behavior: smooth;

  /* Hide native scrollbar while keeping scrollability */
  scrollbar-width: none;                                           /* Firefox */
  -ms-overflow-style: none;                                        /* old Edge/IE */
  padding: 0; margin: 0;
}
.jtb-grid-wrap.carousel .jtb-grid::-webkit-scrollbar{ display:none; } /* WebKit */

/* Each slide locks to the center on snap */
.jtb-grid-wrap.carousel .jtb-item{
  scroll-snap-align: center;
  min-width: 0; /* prevent inner flex from forcing overflow */
}

/* Arrow buttons */
.jtb-grid-wrap.carousel .jtb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:#fff; color:#222; box-shadow:0 6px 18px rgba(0,0,0,.15);
  border:1px solid rgba(0,0,0,.06);
  cursor:pointer; user-select:none; z-index:2;
}
.jtb-grid-wrap.carousel .jtb-nav svg{ width:20px; height:20px; }
.jtb-grid-wrap.carousel .jtb-nav.prev{ left: -4px; }
.jtb-grid-wrap.carousel .jtb-nav.next{ right: -4px; }
.jtb-grid-wrap.carousel .jtb-nav.is-disabled{ opacity:.4; pointer-events:none; }