/* ============================================================
   ToneThread Blog — post-components.css
   Styling for the four Live-Edit insertable components:
     • tt-figure-right  — float-right click-to-expand image
     • tt-hero          — full-width banner with bg image + text
     • tt-image-pair    — two equal-width images, shared caption
     • tt-gallery       — multi-image slider with prev/next + dots
   Loaded by post.njk on the published page (both themed-inline
   and isolated render modes) and by editor.njk's preview iframe
   so the editor preview matches the published output.
   ============================================================ */

/* ── tt-figure-right ───────────────────────────────────── */
.tt-figure-right {
  float: right;
  clear: right;
  width: 42%;
  max-width: 360px;
  margin: 0.4em 0 1.1em 1.4em;
  padding: 0;
}
.tt-figure-right .tt-figure-right-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.tt-figure-right img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}
.tt-figure-right figcaption {
  margin-top: 0.5em;
  font-family: 'DM Mono', monospace;
  font-size: 0.78em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.7;
  text-align: left;
}
@media (max-width: 640px) {
  .tt-figure-right {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 1.2em 0;
  }
}

/* ── Lightbox overlay (opened by JS for [data-tt-lightbox-src]) ── */
.tt-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.tt-lightbox img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.tt-lightbox-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.tt-lightbox-close:focus { outline: 2px solid #c8a96e; }

/* ── tt-hero ───────────────────────────────────────────── */
.tt-hero {
  position: relative;
  margin: 1.6em 0 2em;
  min-height: 280px;
  padding: 60px 32px;
  background-size: cover;
  background-position: center;
  background-color: #1a1828;
  color: #fff;
  display: flex;
  align-items: flex-end;
  border-radius: 4px;
  overflow: hidden;
}
.tt-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
}
.tt-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
}
.tt-hero-headline {
  margin: 0 0 0.3em;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.4em;
  line-height: 1.15;
  color: #fff;
}
.tt-hero-subhead {
  margin: 0;
  font-family: 'DM Mono', monospace;
  font-size: 0.9em;
  letter-spacing: 0.06em;
  color: #f5f2ec;
  opacity: 0.92;
}
@media (max-width: 640px) {
  .tt-hero { min-height: 200px; padding: 40px 20px; }
  .tt-hero-headline { font-size: 1.7em; }
}

/* ── tt-image-pair ────────────────────────────────────── */
/* Two equal-width images side by side with one shared caption.
   Stacks to a single column on narrow viewports so neither image
   is squeezed below a readable size. */
.tt-image-pair {
  margin: 1.4em 0 1.8em;
  padding: 0;
}
.tt-image-pair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.tt-image-pair-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  margin: 0;
}
.tt-image-pair figcaption {
  margin-top: 0.6em;
  font-family: 'DM Mono', monospace;
  font-size: 0.78em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.7;
  text-align: center;
}
@media (max-width: 640px) {
  .tt-image-pair-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ── tt-gallery ───────────────────────────────────────── */
.tt-gallery {
  position: relative;
  margin: 1.8em 0 2.2em;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  overflow: hidden;
}
[data-mode="bark"] .tt-gallery { background: rgba(255, 255, 255, 0.04); }
.tt-gallery-viewport {
  overflow: hidden;
}
.tt-gallery-track {
  display: flex;
  transition: transform 0.32s ease;
  will-change: transform;
}
.tt-gallery-slide {
  flex: 0 0 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  min-width: 0;
}
.tt-gallery-slide img {
  display: block;
  width: 100%;
  max-height: 480px;
  object-fit: contain;
  margin: 0 auto;
  background: #000;
}
.tt-gallery-slide figcaption {
  padding: 0.7em 1em 1em;
  font-family: 'DM Mono', monospace;
  font-size: 0.78em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.75;
}
.tt-gallery-prev, .tt-gallery-next {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
}
.tt-gallery-prev { left: 10px; }
.tt-gallery-next { right: 10px; }
.tt-gallery-prev:hover, .tt-gallery-next:hover { background: rgba(0, 0, 0, 0.85); }
.tt-gallery-prev:focus, .tt-gallery-next:focus { outline: 2px solid #c8a96e; }
.tt-gallery-dots {
  display: flex;
  gap: 7px;
  justify-content: center;
  padding: 0 0 12px;
}
.tt-gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: 0;
  padding: 0;
  cursor: pointer;
}
[data-mode="bark"] .tt-gallery-dot { background: rgba(255, 255, 255, 0.3); }
.tt-gallery-dot.active { background: #c8a96e; }