/*
  McCord Journal — post content blocks
  ------------------------------------
  Shared by the public post page (post.html) and the journal editor
  (journal-editor.html) so what Angie sees while writing is exactly what
  visitors see. Everything is scoped under .post-body.
*/

.post-body::after { content: ""; display: block; clear: both; }

/* ---- Paragraph variants ------------------------------------------------ */
.post-body p.mc-lead {
  font-size: clamp(1.18rem, 2.2vw, 1.36rem);
  line-height: 1.55;
  font-weight: 700;
  color: var(--ink);
}
.post-body p.mc-small {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
  opacity: 0.85;
}
.post-body h4 {
  margin: 24px 0 8px;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--candy-red-dark);
}
.post-body mark { padding: 0.05em 0.2em; border-radius: 4px; color: inherit; }
.post-body s { opacity: 0.75; }

/* ---- Photos -------------------------------------------------------------- */
.post-body .mc-figure {
  margin: 30px auto;
  max-width: 100%;
}
.post-body .mc-figure[data-size="small"] { width: 36%; }
.post-body .mc-figure[data-size="medium"] { width: 54%; }
.post-body .mc-figure[data-size="large"] { width: 78%; }
.post-body .mc-figure[data-size="full"] { width: 100%; }

.post-body .mc-figure[data-align="left"] { margin-left: 0; margin-right: auto; }
.post-body .mc-figure[data-align="right"] { margin-left: auto; margin-right: 0; }

/* Text wrap: the photo floats and the paragraphs flow beside it. */
.post-body .mc-figure[data-wrap="1"][data-align="left"] { float: left; margin: 6px 30px 18px 0; }
.post-body .mc-figure[data-wrap="1"][data-align="right"] { float: right; margin: 6px 0 18px 30px; }

.post-body .mc-frame { position: relative; }
.post-body .mc-figure img,
.post-body .mc-gallery img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.post-body figcaption {
  margin-top: 12px;
  font-size: 0.92rem;
  line-height: 1.45;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
}
.post-body .mc-figure[data-align="left"] figcaption { text-align: left; }
.post-body .mc-figure[data-align="right"] figcaption { text-align: right; }

/* Frame styles (shared by single photos and galleries) --------------------- */
/* Simple: soft rounded corners, nothing else */
.post-body [data-frame="plain"] .mc-frame { border-radius: var(--radius-md); overflow: hidden; }

/* Classic card: the site's hard-edged card look */
.post-body [data-frame="card"] .mc-frame {
  border: var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--aged-paper);
}

/* Candy stripe: red + cream striped mat (same as the tours intro card) */
.post-body [data-frame="stripe"] .mc-frame,
.post-body [data-frame="gold"] .mc-frame {
  padding: 14px;
  border: var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  background: repeating-linear-gradient(45deg, var(--candy-red) 0 14px, var(--soft-white) 14px 28px);
}
.post-body [data-frame="gold"] .mc-frame {
  background: repeating-linear-gradient(45deg, var(--gold) 0 14px, var(--warm-cream) 14px 28px);
}
.post-body [data-frame="stripe"] .mc-frame img,
.post-body [data-frame="gold"] .mc-frame img {
  border: var(--line);
  border-radius: var(--radius-lg);
}

/* Polaroid: white print with a thick bottom lip, slightly tilted */
.post-body [data-frame="polaroid"] .mc-frame {
  padding: 12px 12px 46px;
  background: #fff;
  border: var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  transform: rotate(-1.6deg);
}
.post-body .mc-gallery[data-frame="polaroid"] .mc-frame:nth-child(even) { transform: rotate(1.4deg); }
.post-body [data-frame="polaroid"] .mc-frame img { border: 1px solid rgba(0, 0, 0, 0.18); }
.post-body .mc-figure[data-frame="polaroid"] figcaption {
  font-family: 'Lobster', Georgia, serif;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ink);
}

/* Gallery mat: aged-paper mat inside a thin double rule, like a framed print */
.post-body [data-frame="mat"] .mc-frame {
  padding: 18px;
  background: var(--aged-paper);
  border: var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-md), inset 0 0 0 6px var(--soft-white), inset 0 0 0 7.5px var(--ink);
}
.post-body [data-frame="mat"] .mc-frame img { border: var(--line); }

/* Victorian arch: rounded arch window */
.post-body [data-frame="arch"] .mc-frame {
  border: var(--line);
  border-radius: 999px 999px var(--radius-md) var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* Circle: cropped to a circle (always square) */
.post-body [data-frame="circle"] .mc-frame {
  aspect-ratio: 1 / 1;
  border: var(--line);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.post-body [data-frame="circle"] .mc-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Galleries ----------------------------------------------------------- */
.post-body .mc-gallery { margin: 34px 0; clear: both; }
.post-body .mc-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
.post-body .mc-gallery[data-cols="3"] .mc-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.post-body .mc-gallery[data-ratio="square"] .mc-frame img { aspect-ratio: 1 / 1; object-fit: cover; }
.post-body .mc-gallery[data-ratio="landscape"] .mc-frame img { aspect-ratio: 4 / 3; object-fit: cover; }
.post-body .mc-gallery[data-ratio="portrait"] .mc-frame img { aspect-ratio: 3 / 4; object-fit: cover; }
.post-body .mc-gallery[data-frame="stripe"] .mc-frame,
.post-body .mc-gallery[data-frame="gold"] .mc-frame { padding: 10px; border-radius: var(--radius-lg); }
.post-body .mc-gallery[data-frame="stripe"] .mc-frame img,
.post-body .mc-gallery[data-frame="gold"] .mc-frame img { border-radius: var(--radius-md); }
.post-body .mc-gallery[data-frame="mat"] .mc-frame { padding: 12px; }
.post-body .mc-gallery[data-frame="polaroid"] .mc-frame { padding: 10px 10px 30px; }
.post-body .mc-gallery figcaption { margin-top: 16px; }

/* ---- Callout boxes ----------------------------------------------------- */
.post-body .mc-callout {
  margin: 28px 0;
  padding: 20px 24px;
  border: var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background: var(--butter-pale);
  color: var(--ink);
  clear: both;
}
.post-body .mc-callout > *:last-child { margin-bottom: 0; }
.post-body .mc-callout[data-tone="pink"] { background: #fde2ea; }
.post-body .mc-callout[data-tone="mint"] { background: #e2f0da; }
.post-body .mc-callout[data-tone="paper"] { background: var(--aged-paper); }
.post-body .mc-callout[data-tone="red"] { background: var(--candy-red); color: var(--butter-pale); }
.post-body .mc-callout[data-tone="red"] a,
.post-body .mc-callout[data-tone="red"] h2,
.post-body .mc-callout[data-tone="red"] h3,
.post-body .mc-callout[data-tone="red"] h4 { color: var(--butter-pale); }
.post-body .mc-callout[data-tone="stripe"] {
  padding: 26px 28px;
  background:
    linear-gradient(var(--soft-white), var(--soft-white)) padding-box,
    repeating-linear-gradient(45deg, var(--candy-red) 0 12px, var(--soft-white) 12px 24px) border-box;
  border: 10px solid transparent;
  outline: 1.5px solid var(--ink);
  outline-offset: -1px;
}

/* ---- Dividers ------------------------------------------------------------ */
.post-body hr.mc-divider,
.post-body hr {
  clear: both;
  margin: 38px auto;
  border: 0;
  height: 0;
  border-top: var(--line-dashed);
}
.post-body hr.mc-divider[data-style="stripe"] {
  height: 12px;
  border: var(--line);
  border-radius: var(--radius-pill);
  background: repeating-linear-gradient(45deg, var(--candy-red) 0 10px, var(--soft-white) 10px 20px);
  box-shadow: var(--shadow-sm);
}
.post-body hr.mc-divider[data-style="dots"] {
  height: auto;
  border: 0;
  text-align: center;
  overflow: visible;
}
.post-body hr.mc-divider[data-style="dots"]::after {
  content: "\2022\00a0\00a0\00a0\2022\00a0\00a0\00a0\2022";
  display: block;
  color: var(--candy-red);
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.1em;
}

/* ---- Buttons ------------------------------------------------------------- */
.post-body .mc-button-row { margin: 28px 0; text-align: center; clear: both; }
.post-body .mc-button-row[data-align="left"] { text-align: left; }
.post-body .mc-button-row[data-align="right"] { text-align: right; }
.post-body .mc-button-row .button { text-decoration: none; }
.post-body .mc-button-row .button-red { color: #fff; }
.post-body .mc-button-row .button-white,
.post-body .mc-button-row .button-gold { color: var(--ink); }
.post-body .mc-button-row .button-green { color: #fff; }
.post-body .mc-button-row .button-gold { background: var(--gold); }
.post-body .mc-button-row .button-gold:hover { background: #d9a73b; }

/* ---- Embeds (Instagram / TikTok / YouTube) ------------------------------- */
.post-body .mc-embed { margin: 32px auto; max-width: 560px; clear: both; }
.post-body .mc-embed[data-provider="youtube"] { max-width: 100%; }
.post-body .mc-embed-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border: var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--near-black);
}
.post-body .mc-embed-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-body .mc-embed > a {
  display: block;
  padding: 18px 22px;
  border: var(--line);
  border-radius: var(--radius-md);
  background: var(--soft-white);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.post-body .mc-embed .instagram-media,
.post-body .mc-embed .tiktok-embed { margin: 0 auto !important; }
/* Before Instagram/TikTok's script swaps in the player, their placeholder is a
   <blockquote>; don't let the post's quote style (red bar, italics) show on it. */
.post-body .mc-embed blockquote {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-style: normal;
}
.post-body .mc-embed blockquote > a,
.post-body .mc-embed blockquote section > a {
  display: block;
  padding: 18px 22px;
  border: var(--line);
  border-radius: var(--radius-md);
  background: var(--soft-white);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

/* ---- Tables (the older .post-table look is in styles.css) ---------------- */
.post-body table p { margin: 0; }

/* ---- Phones: never float, give small photos room ----------------------- */
@media (max-width: 640px) {
  .post-body .mc-figure[data-wrap="1"][data-align="left"],
  .post-body .mc-figure[data-wrap="1"][data-align="right"] { float: none; margin: 26px auto; }
  .post-body .mc-figure[data-size="small"] { width: 62%; }
  .post-body .mc-figure[data-size="medium"] { width: 82%; }
  .post-body .mc-figure[data-size="large"] { width: 100%; }
  .post-body .mc-gallery[data-cols="3"] .mc-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .post-body .mc-gallery .mc-gallery-grid { gap: 14px; }
}