/* ============================================================
   index.css — home page: quote carousel and entry index list
   ============================================================ */


/* --- carousel --- */

.carousel {
  margin-bottom: var(--space-l);
  /* fixed min-height prevents layout shift when slides swap at different heights.
     tall enough for a two-line quote at base font size */
  min-height: 6.5rem;
  cursor: default;
}

.carousel-slide { display: none; }

.carousel-slide.active {
  display: block;
  /* opacity only — no translateY, so the container height stays stable */
  animation: slide-appear 0.55s ease;
}

@keyframes slide-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.carousel-text {
  font-style:  italic;
  font-size:   1.04rem;
  line-height: 1.9;
}

.carousel-attribution {
  margin-top:     0.38rem;
  font-size:      0.69rem;
  color:          var(--muted);
  letter-spacing: 0.04em;
}


/* --- index list --- */

.index-list { list-style: none; }

/* each row is an anchor — flex, context between left group and right group */
.index-item {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         0.76rem 0;
  border-bottom:   1px solid var(--border);
  gap:             1rem;
  text-decoration: none;
  color:           var(--ink);
}

.index-item:first-child  { border-top: 1px solid var(--border); }
.index-item:hover .index-title { color: var(--rose); }

/* left: [type badge?] [title] [thread label?] */
.index-item-left {
  display:     flex;
  align-items: baseline;
  gap:         0.5rem;
  flex:        1;
  min-width:   0; /* allows text-overflow to work inside a flex child */
}

/* "quote" or "thought" — only rendered for non-essay entries */
.index-type {
  font-size:      0.57rem;
  color:          var(--faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink:    0;
}

.index-title {
  font-style:  italic;
  font-size:   0.92rem;
  line-height: 1.4;
  transition:  color 0.2s;
}

/* thread label — teal, sits after the title */
.index-thread {
  font-size:      0.57rem;
  color:          var(--teal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink:    0;
}

/* right: [marginalia dots] [date] */
.index-item-right {
  display:     flex;
  align-items: center;
  gap:         0.42rem;
  flex-shrink: 0;
}

.index-date {
  font-size:   0.67rem;
  color:       var(--faint);
  white-space: nowrap;
}

/* marginalia dots — data-slug attr used by marginalia.js (Phase 5) to inject dots */
.index-dots {
  display:     flex;
  gap:         3px;
  align-items: center;
}

.index-dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  flex-shrink:   0;
}

/* shown when a piece has more than 3 guests */
.index-dots-overflow {
  font-size:   0.58rem;
  color:       var(--faint);
  line-height: 1;
}


/* --- mobile --- */

@media (max-width: 540px) {
  /* quotes and thoughts can be very long — truncate so they don't collapse the row.
     essay titles wrapping to a second line is fine and expected. */
  .index-item--quote  .index-title,
  .index-item--thought .index-title {
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
  }
}