/* ============================================================
   Post Detail Styles
   Follows atomic design naming: m- molecules, o- organisms
   ============================================================ */

/* === MOLECULES === */

/* Hero image */
.m-post-hero {
  position: relative;
}

.m-post-hero-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Icon grid on cover image (gallery, video, audio, spokes) — wraps at 3 per row */
.m-post-hero-icons {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1rem;
  row-gap: 0.5rem;
  max-width: calc(3 * 2.25rem + 2 * 1rem); /* 8.75rem — exactly 3 icons + 2 gaps */
}

/* Gallery icon — <a> element */
.m-post-hero-gallery-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--omm-brand-color, #193857);
  color: #fff;
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1;
  transition: opacity 0.2s ease;
}

.m-post-hero-gallery-link:hover {
  color: #fff;
  text-decoration: none;
  opacity: 0.85;
}

/* Video/Audio icons — <button> elements, same style as gallery */
.m-post-hero-media-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: none;
  background-color: var(--omm-brand-color, #193857);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.m-post-hero-media-link:hover {
  opacity: 0.85;
}

/* CEWL (contacts, events, weblinks, locations) icon — top-right, smaller than media buttons */
.m-post-hero-cewl-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  background-color: var(--omm-brand-color, #193857);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

/* CEWL icon: top-right in both cover and placeholder */
.m-post-hero .m-post-hero-cewl-link {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}

.m-post-hero-cewl-link:hover {
  opacity: 0.85;
}

/* Placeholder when no cover image but post has media (Flutter: 256px empty area) */
.m-post-hero--placeholder {
  background: inherit;
  min-height: 164px;
}

.m-post-hero-placeholder-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem;
}

.m-post-hero-gallery-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #6c757d;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.m-post-hero-gallery-placeholder .bi-images {
  font-size: 2rem;
}

.m-post-hero-gallery-placeholder:hover {
  color: #495057;
  text-decoration: none;
}

/* Video/Audio placeholder buttons */
.m-post-hero-media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: #6c757d;
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.m-post-hero-media-placeholder i {
  font-size: 2rem;
}

.m-post-hero-media-placeholder:hover {
  color: #495057;
}

/* Meta detail row */
.m-post-meta-detail {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.85rem;
}

.m-post-meta-date {
  color: #888;
}

.m-post-meta-category a {
  color: #888;
  text-decoration: none;
}

.m-post-meta-category a:hover {
  color: var(--bs-primary, #0d6efd);
}

/* Author */
.m-post-author-avatar {
  object-fit: cover;
}

.m-post-author-avatar-placeholder {
  width: 32px;
  height: 32px;
  background: var(--bs-secondary-bg, #e9ecef);
  color: var(--bs-secondary, #6c757d);
  font-size: 0.75rem;
  font-weight: 600;
}

.m-post-author-name {
  font-size: 0.9rem;
  color: #555;
}

/* === ORGANISMS === */

/* Branded header zone (Flutter alignment) */
.o-post-header-zone {
  background-color: var(--omm-brand-color, #193857);
  color: #fff;
  margin-bottom: 1.5rem;
  overflow: visible;
  position: relative;
}


/* Inside header zone: move media buttons above the author overlap area */
.o-post-header-zone .m-post-hero-icons {
  bottom: 4rem;
}

/* Author circle overlapping cover image bottom */
.o-post-header-author-wrap {
  display: flex;
  justify-content: center;
  margin-top: -48px;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 3;
}

.o-post-header-author-img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.3);
}

.o-post-header-author-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 600;
  background: rgba(255,255,255,0.2);
  color: inherit;
  border: 3px solid rgba(255,255,255,0.3);
}


/* Top buffer when no hero renders at all */
.o-post-header-zone > .o-post-header-author-wrap:first-child {
  margin-top: 0;
  padding-top: 1.5rem;
}

.o-post-header-zone > .o-post-header-meta:first-child {
  padding-top: 1.5rem;
}

/* Header metadata (byline, location, date) */
.o-post-header-meta {
  text-align: center;
  padding: 0 1rem;
}

.o-post-header-byline {
  font-family: var(--omm-font-stack);
  font-size: 11px;
  font-weight: 500;
  padding: 0.5rem 0;
  color: inherit;
}

.o-post-header-location {
  font-family: var(--omm-font-stack);
  font-size: 11px;
  font-weight: 500;
  padding: 0.0625rem 0;
  color: inherit;
}

.o-post-header-date {
  font-family: var(--omm-font-stack);
  font-size: 11px;
  font-weight: 500;
  padding: 0.5rem 0;
  color: inherit;
}

/* Likes/views stats line (Flutter: ArticleLikesViewsArea — 12px w200) */
.o-post-header-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  gap: 1rem;
  padding: 0 1rem;
}

.o-post-header-stat {
  font-family: var(--omm-font-stack);
  font-size: 12px;
  font-weight: 200;
  color: inherit;
}

/* Like button (Flutter: ArticleLikeIconBloc — 48x48 centered) */
.o-post-header-like {
  display: flex;
  justify-content: center;
  padding-bottom: 0.75rem;
}

.o-post-header-like-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease;
}

.o-post-header-like-btn:hover {
  opacity: 0.7;
}

/* Header title — 35px w200 centered */
.o-post-header-title {
  font-family: var(--omm-font-stack);
  font-size: 35px;
  font-weight: 200;
  line-height: 1.3;
  text-align: center;
  padding: 0.5rem 1rem 1.5rem;
  margin: 0;
  color: inherit;
}

/* Title (legacy, kept for other views) */
.o-post-detail-title {
  font-family: var(--omm-font-stack);
  font-size: 2rem;
  font-weight: 200;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

/* Excerpt */
.o-post-detail-excerpt {
  font-size: 1.05rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

/* Content blocks container */
.o-post-detail-blocks {
  margin-top: 1rem;
}

/* Block divider */
.o-block-divider {
  margin: 2rem 0;
  border-color: var(--bs-border-color, #dee2e6);
  opacity: 0.5;
}

/* Block heading */
.o-block-heading {
  font-size: 1.35rem;
  font-weight: 400;
  margin-bottom: 1rem;
  color: #333;
}

/* Block intro/lede — accordion intro_text, collection description */
.o-block-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 1rem;
}

/* --- Text block --- */
.o-block-text-content {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
}

.o-block-text-content h1 {
  font-size: 1.75rem;
  font-weight: 300;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.o-block-text-content h2 {
  font-size: 1.4rem;
  font-weight: 400;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.o-block-text-content h3 {
  font-size: 1.2rem;
  font-weight: 500;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.o-block-text-content h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.o-block-text-content p {
  margin-bottom: 1rem;
}

.o-block-text-content blockquote {
  border-left: 3px solid var(--bs-border-color, #dee2e6);
  padding-left: 1rem;
  margin: 1rem 0;
  color: #555;
  font-style: italic;
}

.o-block-text-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.375rem;
  margin: 0.5rem 0;
}

.o-block-text-content a {
  color: var(--bs-primary, #0d6efd);
}

.o-block-text-content a:hover {
  color: var(--bs-primary, #0d6efd);
  text-decoration: underline;
}

.o-block-text-content ul,
.o-block-text-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.o-block-text-content li {
  margin-bottom: 0.25rem;
}

/* Tables fit the column width and wrap, mirroring the Flutter app's
   ContentTableExtension (FlexColumnWidth(maxChars.clamp(6, 26))): columns size
   proportionally to content so text-heavy columns get more room, floored by
   min-width so short columns never collapse to slivers. width:100% fills the
   column; overflow-x is a fallback for genuinely wide (many-column) tables and
   rarely triggers. */
.o-block-text-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.o-block-text-content th,
.o-block-text-content td {
  border: 1px solid var(--bs-border-color, #dee2e6);
  padding: 0.4rem 0.65rem;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
  min-width: 4.5em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.o-block-text-content thead th {
  background: var(--bs-secondary-bg, #e9ecef);
  font-weight: 600;
  white-space: normal;
}

/* Zebra + hover: scan dense rows at rest, and track one row while scrolling wide. */
.o-block-text-content tbody tr:nth-child(even) {
  background: var(--bs-tertiary-bg, #f8f9fa);
}

.o-block-text-content tbody tr:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Long code lines scroll instead of overflowing. */
.o-block-text-content pre {
  max-width: 100%;
  overflow-x: auto;
  background: var(--bs-tertiary-bg, #f8f9fa);
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  margin: 1rem 0;
}

/* --- Media block --- */
.o-block-media-img {
  display: block;
}

.o-block-media-video {
  background: #000;
}

.o-block-media-audio-thumb {
  max-height: 200px;
  object-fit: cover;
}

.o-block-media-doc {
  background: var(--bs-light, #f8f9fa);
}

.o-block-media-doc a {
  color: var(--bs-body-color, #212529);
  text-decoration: none;
}

.o-block-media-doc a:hover {
  color: var(--bs-primary, #0d6efd);
}

/* --- Media collection --- */
.o-block-mc-thumb {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* Placeholder styles now in omm_media.css */

/* --- Accordion block --- */
.o-block-accordion .accordion-item {
  border: none;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.o-block-accordion .accordion-item:last-child {
  border-bottom: none;
}

.o-block-accordion .accordion-button {
  background: transparent;
  padding: 0.75rem 0;
  font-size: 0.9rem;
  color: #333;
  box-shadow: none;
}

.o-block-accordion .accordion-button:not(.collapsed) {
  background: transparent;
  color: #333;
  box-shadow: none;
}

.o-block-accordion .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

/* Plus/minus icons — NEUTRAL #333, matching the button's own label colour set at :574/:580
   directly above. Deliberately unbranded: these do not need the brand colour.
   The two rules below paint %23333333: a colour written inside an SVG data: URI is
   URL-encoded, `%23` for `#`.
   ⛔ AND THEY CANNOT BE THEMED. The colour is URL-ENCODED INSIDE a data: URI, where a CSS
   var() cannot be interpolated — theming them would mean rewriting both rules as mask-image +
   background-color, on a live reader surface, for two icons. Neutral is correct on both tiers,
   which drops them out of the theming work entirely. Same change applied to the Studio twin in
   content_block_partials.gohtml. */
.o-block-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23333333' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
  transition: all 0.3s ease;
}

.o-block-accordion .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23333333' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
  transform: rotate(0deg);
}

.o-block-accordion .accordion-body {
  padding: 0 0 0.75rem 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #555;
}

/* --- CEWL blocks (contact / event / weblink / location) ---
   Mirror the CEWL lightbox row. The left column (date tile / thumb / placeholder icon)
   REUSES the .m-cewl-row-* classes from omm_cewl.css (already loaded on this page for the
   lightbox), so it matches by construction. The rules below cover the wrapping card text,
   the shared card chrome, and the inline hyperlinks the blocks keep in place of the
   lightbox's swipe/"..." actions. */

/* Card text — matches .m-cewl-row-title/-subtitle sizing, but wraps (full page width) */
.o-block-cewl-title {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
}

.o-block-cewl-subtitle {
  font-weight: 200;
  font-size: 11px;
  line-height: 1.3;
}

/* Inline action links (email / phone / website / map) — stand-in for swipe actions */
.o-block-cewl-meta {
  font-size: 11px;
  line-height: 1.4;
  margin-top: 0.125rem;
}

.o-block-cewl-meta a {
  color: inherit;
  text-decoration: none;
}

.o-block-cewl-meta a:hover {
  color: inherit;
  text-decoration: underline;
}

/* Shared card chrome (row separators) */
.o-block-contact-card,
.o-block-event-card,
.o-block-weblink-card,
.o-block-location-card {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,0.05));
}

.o-block-contact-card:last-child,
.o-block-event-card:last-child,
.o-block-weblink-card:last-child,
.o-block-location-card:last-child {
  border-bottom: none;
}

/* Title-as-link (weblink title; event title when it has an external URL) —
   plain body text, underline only on hover (no blue link color) */
.o-block-weblink-title,
.o-block-event-title-link {
  color: inherit;
  text-decoration: none;
}

.o-block-weblink-title:hover,
.o-block-event-title-link:hover {
  color: inherit;
  text-decoration: underline;
}

/* === FOOTER === */
.o-post-detail-footer {
  padding-top: 1.5rem;
  margin-top: 1rem;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.o-post-detail-back {
  color: var(--bs-secondary, #6c757d);
  text-decoration: none;
  font-size: 0.9rem;
}

.o-post-detail-back:hover {
  color: var(--bs-primary, #0d6efd);
}

/* === RESPONSIVE === */

/* Mobile: < 768px */
@media (max-width: 767.98px) {
  .o-post-header-zone {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
  }

  .o-post-header-title {
    font-size: 1.5rem;
  }

  .o-post-detail-excerpt {
    font-size: 0.95rem;
  }
}

/* Tablet: 768px – 1199px */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .o-post-header-title {
    font-size: 28px;
  }
}

/* ============================================================
   Tag block — compact grey chips, group-only
   path. Selectors are scoped under .o-block-tag so the chips outrank the
   .o-post-detail-blocks a link rule; their hover and focus states are below.
   ============================================================ */
.o-block-tag { margin-bottom: 1.5rem; }
.o-block-tag .o-block-tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.o-block-tag .o-block-tag-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  background: #f0f0f0;
  font-size: 12px; color: #555;
  text-decoration: none;
}
.o-block-tag .o-block-tag-chip .o-block-tag-facet { color: #999; font-size: 10px; margin-right: 3px; }
.o-block-tag .o-block-tag-chip:hover,
.o-block-tag .o-block-tag-chip:focus { background: #e3e3e3; color: #222; text-decoration: none; }
.o-block-tag .o-block-tag-chip:hover .o-block-tag-facet,
.o-block-tag .o-block-tag-chip:focus .o-block-tag-facet { color: #666; }

/* === Post embed container ===
   o-block-post: left rail + faint field mark "another post's ground"; the
   eyebrow is the attribution AND the exit; inner blocks render with their
   normal organisms. The body is length-governed: clamped by default with a
   fade; the post-embed compiler drops the clamp when content fits, otherwise
   "Show the rest" expands in place ("Read the full post" navigates). */
.o-block-post {
  margin: 0 0 2rem;
  border-left: 3px solid #212529;
  background: rgba(33, 37, 41, 0.03);
  padding: 1rem 1.25rem 1.25rem;
}
.o-block-post-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.o-block-post-eyebrow-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6c757d;
}
.o-block-post-eyebrow-title {
  font-size: 14px;
  font-weight: 600;
}
.o-block-post-eyebrow-title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(33, 37, 41, 0.35);
}
.o-block-post-eyebrow-title a:hover {
  border-bottom-color: currentColor;
}
.o-block-post-footer {
  margin-top: 0.25rem;
  font-size: 13px;
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.o-block-post-footer a {
  color: #6c757d;
  text-decoration: none;
}
.o-block-post-footer a:hover {
  color: #212529;
}
.o-block-post-body {
  position: relative;
}
.o-block-post--clamped .o-block-post-body {
  max-height: 24rem;
  overflow: hidden;
}
.o-block-post--clamped .o-block-post-body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5rem;
  background: linear-gradient(rgba(247, 247, 248, 0), #f7f7f8);
}
.o-block-post-expand {
  border: 0;
  background: none;
  padding: 0;
  font-size: 13px;
  color: #6c757d;
  cursor: pointer;
  text-decoration: underline;
}
.o-block-post-expand:hover {
  color: #212529;
}
/* the compact card sits on the tinted field inside an embed */
.o-block-post .m-post-card--embed {
  background: #fff;
  margin-bottom: 1rem;
}