/* ═══════════════════════════════════════════════════════════════════════
   Osnatmaor — shared components: buttons, chips, cards, course archive
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Buttons ────────────────────────────────────────────────────────── */

.om-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border: none;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--beige), var(--accent));
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.om-btn:hover { transform: translateY(-2px); color: #fff; }
.om-btn:active { box-shadow: var(--shadow-in); transform: none; }

.om-btn--outline {
  background: var(--cream);
  color: var(--brown);
  border: 1px solid var(--border-soft);
}
.om-btn--outline:hover { color: var(--brown); }

/* ── Chips & badges ─────────────────────────────────────────────────── */

.om-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--brown);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ── Card ───────────────────────────────────────────────────────────── */

.om-card {
  background: var(--cream);
  border-radius: var(--radius);
  box-shadow: var(--shadow-out);
  overflow: hidden;
}

/* ── Course Archive ─────────────────────────────────────────────────── */

.cnx-course-archive {
  background: var(--bg);
  padding: 24px 16px;
}

.cnx-course-archive__header {
  max-width: var(--max-wide);
  margin: 0 auto 24px;
  text-align: center;
}

.cnx-course-archive__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--text-primary);
}

.cnx-course-archive__grid {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 580px) {
  .cnx-course-archive { padding: 40px 20px; }
  .cnx-course-archive__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

@media (min-width: 900px) {
  .cnx-course-archive__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Course Card ────────────────────────────────────────────────────── */

.cnx-course-card {
  background: var(--cream);
  border-radius: var(--radius);
  box-shadow: var(--shadow-out);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.cnx-course-card:hover {
  transform: translateY(-3px);
  box-shadow: -7px -7px 18px rgba(255,255,255,0.92), 7px 7px 18px rgba(139,115,85,0.28);
}

.cnx-course-card__thumb-link { display: block; text-decoration: none; }

.cnx-course-card__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--beige);
}

.cnx-course-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.cnx-course-card:hover .cnx-course-card__thumb img { transform: scale(1.04); }

.cnx-course-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brown);
}

.cnx-course-card__thumb-placeholder .material-icons { font-size: 48px; }

.cnx-course-card .material-icons {
  font-size: 16px;
  vertical-align: middle;
  line-height: 1;
}

.cnx-course-card__body {
  padding: 18px 20px 70px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  position: relative;
}

.cnx-course-card__meta { display: flex; flex-wrap: wrap; gap: 6px; }

.cnx-course-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(139,115,85,0.10);
  color: var(--brown);
  font-size: 0.78rem;
  font-weight: 600;
}

.cnx-course-card__badge--level-beginner     { background: rgba(102,187,106,0.15); color: #2e7d32; }
.cnx-course-card__badge--level-intermediate { background: rgba(230,177,126,0.25); color: #7c5b2d; }
.cnx-course-card__badge--level-advanced     { background: rgba(211,47,47,0.12);  color: #b71c1c; }

.cnx-course-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.cnx-course-card__title a { text-decoration: none; color: var(--text-primary); }
.cnx-course-card__title a:hover { color: var(--brown); }

.cnx-course-card__excerpt {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
  margin: 0;
}

.cnx-course-card__cta {
  position: absolute;
  bottom: 20px;
  inset-inline-end: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brown);
  text-decoration: none;
  transition: gap 0.15s ease;
}

.cnx-course-card__cta:hover { gap: 8px; color: var(--accent); }

.cnx-course-archive__empty {
  grid-column: 1 / -1;
  color: var(--text-muted);
  padding: 20px 0;
  text-align: center;
}

/* ── Audio archive — meditation cards, two-column grid ──────────────── */

.om-audio-grid {
  max-width: 760px;
  margin: 0 auto;
  padding: 10px 16px 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: start;
}

.om-audio-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-out);
}

.om-audio-card audio { display: none; }

.om-audio-card__info {
  order: 1; /* leading side (right in RTL) */
  min-width: 0;
}

.om-audio-card__title { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.om-audio-card__title a { text-decoration: none; color: var(--text-primary); }
.om-audio-card__title a:hover { color: var(--brown); }

.om-audio-card__play {
  order: 2; /* trailing side (left in RTL) */
  flex: none;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--cream);
  color: var(--brown);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-btn);
  transition: transform 0.15s ease;
}

.om-audio-card__play:hover { transform: scale(1.06); }
.om-audio-card__play svg { width: 24px; height: 24px; }
.om-audio-card__icon-pause { display: none; }

.om-audio-card.playing .om-audio-card__play { box-shadow: var(--shadow-in); }
.om-audio-card.playing .om-audio-card__icon-play { display: none; }
.om-audio-card.playing .om-audio-card__icon-pause { display: block; }

.om-audio-grid__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
}

/* Narrow phones: stack the card — text above, play button below at the
   inline end — so titles aren't squeezed beside the button. Kept compact
   so two columns still read comfortably. */
@media (max-width: 559px) {
  .om-audio-grid { gap: 12px; padding-inline: 12px; }

  .om-audio-card { gap: 10px; padding: 12px 14px; }

  .om-audio-card__play { width: 42px; height: 42px; }
  .om-audio-card__play svg { width: 18px; height: 18px; }
  .om-audio-card__title { font-size: 0.92rem; }
}

@media (min-width: 700px) {
  .om-audio-grid { gap: 20px; padding-inline: 20px; }
  .om-audio-card { padding: 18px 20px; }
  .om-audio-card__play { width: 60px; height: 60px; }
  .om-audio-card__play svg { width: 26px; height: 26px; }
}

/* ── Posts navigation (older / newer) ───────────────────────────────── */

.posts-navigation,
.post-navigation {
  max-width: var(--max);
  margin: 0 auto;
  padding: 4px 20px 36px;
}

.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.posts-navigation a,
.post-navigation a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--brown);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: var(--shadow-btn);
  transition: transform 0.15s ease;
}

.posts-navigation a:hover,
.post-navigation a:hover { transform: translateY(-2px); color: var(--brown); }
.posts-navigation a:active,
.post-navigation a:active { box-shadow: var(--shadow-in); transform: none; }

/* ── Page hero — band between the app bar and the content ───────────── */

.om-hero {
  text-align: center;
  padding: 20px 20px 4px;
}

.om-hero__title {
  margin: 0 0 6px;
  font-size: var(--fs-h1);
  font-weight: 800;
  color: var(--text-primary);
}

.om-hero__logo {
  display: block;
  margin: 0 auto;
  width: var(--om-hero-logo, 120px);
  max-width: 60%;
  height: auto;
}

/* SVG marks are drawn as a mask filled with the brand colour, matching the
   cnx-fungi landing, so the logo follows the Customizer palette. */
.om-hero__logo--mask {
  height: var(--om-hero-logo, 120px);
  background-color: var(--brown);
  -webkit-mask: var(--om-hero-mask) no-repeat center / contain;
  mask: var(--om-hero-mask) no-repeat center / contain;
}

@media (max-width: 559px) {
  .om-hero { padding: 14px 16px 2px; }
}

/* ── Plugin output: adopt the theme's button design ─────────────────────
   Plugin CSS is enqueued after the theme's, so these need the extra
   `body` specificity to win. */

body .cpt-grid-load-more,
body .cnx-archive-load-more,
body .cpt-slider-load-more {
  padding: 12px 28px;
  border: none;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--beige), var(--accent));
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: var(--shadow-btn);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body .cpt-grid-load-more:hover,
body .cnx-archive-load-more:hover,
body .cpt-slider-load-more:hover {
  background: linear-gradient(135deg, var(--beige), var(--accent));
  transform: translateY(-2px);
}

body .cpt-grid-load-more:active,
body .cnx-archive-load-more:active,
body .cpt-slider-load-more:active {
  box-shadow: var(--shadow-in);
  transform: none;
}

body .cpt-grid-load-more:disabled,
body .cnx-archive-load-more:disabled {
  background: var(--cream);
  color: var(--text-muted);
  box-shadow: none;
  transform: none;
}

/* ── Single post ────────────────────────────────────────────────────── */

/* Featured image: square crop, Instagram-style, capped so a tall portrait
   photo can't dominate the screen. Purely a display crop — object-fit
   reframes the original upload, no new image file is created. */
.om-post__thumb {
  margin: 0 auto 20px;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream);
}

.om-post__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Images the editor placed in post content keep their shape but never run
   away vertically on portrait shots. Scoped to paragraphs and figures so
   it never touches images inside shortcode output (plugin cards), whose
   thumbnails must stay flush with the card body. */
.om-page__content > p img,
.om-page__content > figure img,
.om-page__content > .wp-block-image img {
  max-height: 70vh;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-sm);
}

/* Plugin card thumbnails: square bottom edge so the image meets the card
   body with no gap (the card's own overflow:hidden rounds the top). */
body .cpt-grid-card img,
body .cpt-slider-card img,
body .cnx-archive-item img,
body .cnx-archive-card img {
  border-radius: 0;
  max-height: none;
}

/* ── Generic content page ───────────────────────────────────────────── */

.om-page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px 20px 40px;
}

.om-page__title { text-align: center; margin-bottom: 0.8em; }

/* Invitation shown when members-only meditations are hidden from the list. */
.om-audio-locked {
  max-width: 760px;
  margin: 0 auto 32px;
  padding: 22px 20px;
  text-align: center;
  background: var(--cream);
  border-radius: var(--radius);
  box-shadow: var(--shadow-out);
}

.om-audio-locked p { margin: 0 0 14px; color: var(--text-primary); }