/**
 * Rapid — Frontend CSS
 * Include in your template: <link rel="stylesheet" href="/site/modules/Rapid/rapid.css">
 * Or copy to your theme and customize.
 *
 * Covers all block types rendered by RapidRenderer:
 * paragraph, header, quote, nestedList, table, code,
 * delimiter, warning, checklist, raw, image, attaches,
 * embed, gallery, imageSlideshow, layoutSection
 */

/* ── Base block spacing ──────────────────────────────────────────────────── */

.rapid-block {
  margin-block: 1.25em;
}

.rapid-block:first-child { margin-top: 0; }
.rapid-block:last-child  { margin-bottom: 0; }

/* ── Paragraph ───────────────────────────────────────────────────────────── */

p.rapid-block {
  line-height: 1.7;
}

p.rapid-block.rapid-paragraph--large {
  font-size: 1.2em;
  line-height: 1.6;
}

/* ── Headers ─────────────────────────────────────────────────────────────── */

h1.rapid-block,
h2.rapid-block,
h3.rapid-block,
h4.rapid-block,
h5.rapid-block,
h6.rapid-block {
  font-weight: 700;
  line-height: 1.25;
  margin-block: 1.5em 0.5em;
}

h1.rapid-block { font-size: 2em; }
h2.rapid-block { font-size: 1.6em; }
h3.rapid-block { font-size: 1.35em; }
h4.rapid-block { font-size: 1.15em; }
h5.rapid-block { font-size: 1em; }
h6.rapid-block { font-size: 0.9em; }

/* ── Quote ───────────────────────────────────────────────────────────────── */

blockquote.rapid-block {
  border-left: 4px solid currentColor;
  opacity: 0.85;
  margin-inline: 0;
  padding: 0.75em 0 0.75em 1.25em;
}

blockquote.rapid-block figure {
  margin: 0;
}

blockquote.rapid-block p {
  margin: 0 0 0.35em;
  font-style: italic;
  font-size: 1.1em;
  line-height: 1.6;
}

blockquote.rapid-block figcaption {
  font-size: 0.85em;
  opacity: 0.7;
}

blockquote.rapid-block figcaption::before {
  content: "— ";
}

/* ── Lists ───────────────────────────────────────────────────────────────── */

.rapid-block ul,
.rapid-block ol {
  padding-inline-start: 1.5em;
  line-height: 1.7;
}

.rapid-block ul { list-style-type: disc; }
.rapid-block ol { list-style-type: decimal; }

.rapid-block li {
  margin-block: 0.25em;
}

.rapid-block li > ul,
.rapid-block li > ol {
  margin-block: 0.25em;
}

/* ── Table ───────────────────────────────────────────────────────────────── */

.rapid-block .rapid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

.rapid-block .rapid-table th,
.rapid-block .rapid-table td {
  padding: 0.5em 0.75em;
  border: 1px solid currentColor;
  opacity: inherit;
}

.rapid-block .rapid-table th {
  font-weight: 600;
  opacity: 0.9;
}

/* ── Code ────────────────────────────────────────────────────────────────── */

.rapid-block pre {
  background: #1e1e1e;
  color: #d4d4d4;
  border-radius: 6px;
  padding: 1em 1.25em;
  overflow-x: auto;
  font-size: 0.875em;
  line-height: 1.6;
}

.rapid-block pre code {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  background: none;
  padding: 0;
}

/* ── Delimiter ───────────────────────────────────────────────────────────── */

hr.rapid-block {
  border: none;
  text-align: center;
  margin-block: 2em;
  height: 1.5em;
  line-height: 1.5em;
  color: inherit;
  opacity: 0.4;
}

hr.rapid-block::before {
  content: "* * *";
  letter-spacing: 0.5em;
  font-size: 1.1em;
}

/* ── Warning ─────────────────────────────────────────────────────────────── */

.rapid-warning {
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
  padding: 0.875em 1.125em;
  border-radius: 0 6px 6px 0;
}

.rapid-warning__title {
  font-weight: 600;
  margin: 0 0 0.35em;
  color: #92400e;
}

.rapid-warning__message {
  margin: 0;
  color: #78350f;
  line-height: 1.6;
}

/* ── Checklist ───────────────────────────────────────────────────────────── */

.rapid-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.rapid-checklist__item {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  cursor: default;
  line-height: 1.6;
}

.rapid-checklist__item input[type="checkbox"] {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin: 0;
  accent-color: currentColor;
}

/* ── Image ───────────────────────────────────────────────────────────────── */

figure.rapid-block {
  margin-inline: 0;
}

figure.rapid-block img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

figure.rapid-block figcaption {
  margin-top: 0.5em;
  font-size: 0.85em;
  opacity: 0.65;
  text-align: center;
}

/* Image variants */

.rapid-image--border img {
  border: 1px solid currentColor;
  opacity: 0.9;
}

.rapid-image--bg {
  background: #f3f4f6;
  padding: 1em;
  border-radius: 6px;
}

.rapid-image--stretched img {
  width: 100%;
}

/* ── Attaches ────────────────────────────────────────────────────────────── */

.rapid-attaches {
  display: inline-block;
}

.rapid-attaches__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 1em;
  border: 1px solid currentColor;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  font-size: 0.9em;
  opacity: 0.85;
  transition: opacity 0.15s;
}

.rapid-attaches__link:hover {
  opacity: 1;
}

.rapid-attaches__ext {
  display: inline-block;
  padding: 0.1em 0.45em;
  background: currentColor;
  border-radius: 3px;
  font-size: 0.7em;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  mix-blend-mode: normal;
}

.rapid-attaches__size {
  font-size: 0.8em;
  opacity: 0.55;
}

/* ── Embed ───────────────────────────────────────────────────────────────── */

.rapid-embed {
  margin-inline: 0;
}

.rapid-embed__ratio {
  position: relative;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
}

.rapid-embed__ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── Gallery ─────────────────────────────────────────────────────────────── */

.rapid-gallery {
  --rapid-col-width: 250px;
  --rapid-gap: 4px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--rapid-col-width), 1fr));
  gap: var(--rapid-gap);
}

.rapid-gallery__item {
  display: block;
  overflow: hidden;
  border-radius: 3px;
  aspect-ratio: 1;
}

.rapid-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.rapid-gallery__item:hover img {
  transform: scale(1.03);
}

/* ── ImageSlideshow ──────────────────────────────────────────────────────── */

.rapid-slideshow {
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
}

.rapid-slideshow .swiper-wrapper {
  align-items: center;
}

.rapid-slideshow__slide img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 70vh;
  object-fit: cover;
}

/* ── Layout Section ──────────────────────────────────────────────────────── */

.rapid-layout-section {
  --rapid-flex-gap: 1em;
  --rapid-flex-min-block-width: 200px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rapid-flex-gap);
  align-items: flex-start;
}

.rapid-layout-section > * {
  flex: 1 1 var(--rapid-flex-min-block-width);
  min-width: 0;
  margin-block: 0;
}

/* Justify / align helpers (set via tunes) */
.rapid-justify-center        { justify-content: center; }
.rapid-justify-flex-end      { justify-content: flex-end; }
.rapid-justify-space-between { justify-content: space-between; }
.rapid-align-center          { align-items: center; }
.rapid-align-flex-end        { align-items: flex-end; }
.rapid-align-stretch         { align-items: stretch; }

/* Card style */
.rapid-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.25em;
  box-shadow: var(--rapid-section-shadow, none);
}

/* ── Stretch / width tunes ───────────────────────────────────────────────── */

.rapid-stretched {
  width: 100%;
}

.rapid-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: flex-start;
}

.rapid-flex > * {
  flex: 1 1 200px;
  min-width: 0;
  margin-block: 0;
}

/* Width fractions (from layout.width tune) */
.rapid-w-1-2 { flex: 0 0 calc(50% - 0.5em); }
.rapid-w-1-3 { flex: 0 0 calc(33.333% - 0.667em); }
.rapid-w-2-3 { flex: 0 0 calc(66.666% - 0.333em); }
.rapid-w-1-4 { flex: 0 0 calc(25% - 0.75em); }
.rapid-w-3-4 { flex: 0 0 calc(75% - 0.25em); }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  h1.rapid-block { font-size: 1.6em; }
  h2.rapid-block { font-size: 1.35em; }
  h3.rapid-block { font-size: 1.15em; }

  .rapid-layout-section {
    flex-direction: column;
  }

  .rapid-w-1-2,
  .rapid-w-1-3,
  .rapid-w-2-3,
  .rapid-w-1-4,
  .rapid-w-3-4 {
    flex: 1 1 100%;
  }

  .rapid-gallery {
    --rapid-col-width: 120px;
  }
}