/* =========================================================================
   Reusable media components (loaded per page via $pageStylesheets):
   .md-prose            long-form Markdown article typography
   .markdown-editor     partials/markdown-editor.php
   .image-uploader      partials/image-uploader.php
   .admin-image-manager partials/admin-image-manager.php
   .media-gallery       partials/image-gallery.php
   Colours come from the admin (--dashboard-*) tokens with the public
   (--color-*) palette as fallback, so every component works on both.
   ========================================================================= */

.md-prose {
  --prose-text: var(--dashboard-text, var(--color-text, #172033));
  --prose-heading: var(--dashboard-heading, var(--color-heading, #101828));
  --prose-muted: var(--dashboard-muted, var(--color-muted, #667085));
  --prose-accent: var(--dashboard-accent, var(--color-primary, #5b4de8));
  --prose-border: var(--dashboard-border, var(--color-border, #dfe4ee));
  --prose-soft: color-mix(in srgb, var(--prose-accent) 7%, var(--dashboard-surface, var(--color-surface, #fff)));
  color: var(--prose-text);
  font-size: 1.075rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.md-prose > :first-child { margin-top: 0; }
.md-prose > :last-child { margin-bottom: 0; }

.md-prose h1,
.md-prose h2,
.md-prose h3,
.md-prose h4 {
  color: var(--prose-heading);
  line-height: 1.25;
  letter-spacing: -0.01em;
  scroll-margin-top: 5.5rem;
}

.md-prose h1 { font-size: clamp(1.8rem, 3.2vw, 2.3rem); margin: 2.2rem 0 1rem; }
.md-prose h2 {
  position: relative;
  font-size: clamp(1.45rem, 2.6vw, 1.8rem);
  margin: 2.6rem 0 0.9rem;
  padding-bottom: 0.55rem;
}
.md-prose h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.25rem;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--prose-accent), color-mix(in srgb, var(--prose-accent) 30%, #14b8a6));
}
.md-prose h3 { font-size: 1.25rem; margin: 2rem 0 0.6rem; }
.md-prose h4 { font-size: 1.08rem; margin: 1.6rem 0 0.5rem; }

.md-prose p,
.md-prose ul,
.md-prose ol,
.md-prose table,
.md-prose pre,
.md-prose blockquote { margin: 0 0 1.15rem; }

.md-prose ul,
.md-prose ol { padding-left: 1.4rem; }
.md-prose li { margin: 0.35rem 0; padding-left: 0.2rem; }
.md-prose li::marker { color: var(--prose-accent); font-weight: 700; }

.md-prose a {
  color: var(--prose-accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}
.md-prose a:hover { text-decoration-thickness: 0.14em; }

.md-prose strong { color: var(--prose-heading); font-weight: 700; }

.md-prose blockquote {
  position: relative;
  padding: 1.1rem 1.4rem 1.1rem 3.1rem;
  border: 1px solid color-mix(in srgb, var(--prose-accent) 22%, var(--prose-border));
  border-left: 4px solid var(--prose-accent);
  border-radius: 0 16px 16px 0;
  background: var(--prose-soft);
  color: var(--prose-heading);
  font-size: 1.12rem;
  font-style: italic;
}
.md-prose blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0.85rem;
  top: 0.15rem;
  color: var(--prose-accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.8rem;
  font-style: normal;
  line-height: 1;
}
.md-prose blockquote p:last-child { margin-bottom: 0; }

.md-prose code {
  padding: 0.12em 0.4em;
  border-radius: 6px;
  background: color-mix(in srgb, var(--prose-accent) 10%, transparent);
  color: var(--prose-heading);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.9em;
}
.md-prose pre {
  overflow: auto;
  padding: 1rem 1.15rem;
  border-radius: 14px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 0.92rem;
  line-height: 1.65;
}
.md-prose pre code { padding: 0; background: none; color: inherit; }

.md-prose table {
  display: table;
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--prose-border);
  border-radius: 12px;
  font-size: 0.97rem;
}
.md-prose th,
.md-prose td { padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--prose-border); text-align: left; vertical-align: top; }
.md-prose th { background: var(--prose-soft); color: var(--prose-heading); font-weight: 700; white-space: nowrap; }
.md-prose tr:last-child td { border-bottom: 0; }
/* Narrow screens: wide tables scroll inside themselves, never the page. */
@media (max-width: 640px) {
  .md-prose table { display: block; overflow-x: auto; }
}

.md-prose hr {
  height: 1px;
  margin: 2.4rem 0;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--prose-border), transparent);
}

.md-prose img { display: block; max-width: 100%; height: auto; margin: 1.4rem auto; border-radius: 14px; box-shadow: 0 14px 34px -18px rgba(15, 23, 42, 0.45); }

/* Form footer used by media-heavy admin forms. The site's .btn is
   full-width by default; buttons inside these components size to content. */
.form-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.form-actions .btn,
.image-uploader__actions .btn,
.admin-image-card .btn { width: auto; }

/* ---------------------------------------------------------------- editor */
.markdown-editor__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.markdown-editor__modes {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--dashboard-border, var(--color-border));
  border-radius: 999px;
  background: var(--dashboard-surface-soft, var(--color-surface-soft));
}
.markdown-editor__modes button {
  min-height: 34px;
  padding: 0 0.95rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--dashboard-muted, var(--color-muted));
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.markdown-editor__modes button[aria-selected="true"] {
  background: var(--dashboard-accent, var(--color-primary));
  color: var(--dashboard-on-accent, #fff);
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--dashboard-accent, var(--color-primary)) 60%, transparent);
}
.markdown-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.6rem 0 0;
  padding: 0.45rem;
  border: 1px solid var(--dashboard-border, var(--color-border));
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: var(--dashboard-surface-soft, var(--color-surface-soft));
}
.markdown-editor__toolbar button {
  min-width: 2.4rem;
  min-height: 2.2rem;
  padding: 0 0.6rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--dashboard-text, var(--color-text));
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.markdown-editor__toolbar button:hover,
.markdown-editor__toolbar button:focus-visible {
  border-color: var(--dashboard-border, var(--color-border));
  background: var(--dashboard-surface, var(--color-surface));
}
.markdown-editor__sep { width: 1px; margin: 0.3rem 0.2rem; background: var(--dashboard-border, var(--color-border)); }
.markdown-editor__panes {
  display: grid;
  gap: 0;
  border: 1px solid var(--dashboard-border, var(--color-border));
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  background: var(--dashboard-surface, var(--color-surface));
}
.markdown-editor__panes[data-mode="split"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.markdown-editor__panes textarea {
  width: 100%;
  min-height: 26rem;
  padding: 1rem 1.1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--dashboard-text, var(--color-text));
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.92rem;
  line-height: 1.7;
  resize: vertical;
}
.markdown-editor__panes textarea:focus { outline: 2px solid var(--dashboard-accent, var(--color-primary)); outline-offset: -2px; }
.markdown-editor__preview {
  min-height: 26rem;
  max-height: 44rem;
  overflow: auto;
  padding: 1.2rem 1.4rem;
  border-left: 1px solid var(--dashboard-border, var(--color-border));
  font-size: 1rem;
  transition: opacity 0.2s ease;
}
.markdown-editor__panes[data-mode="preview"] .markdown-editor__preview { border-left: 0; }
.markdown-editor__preview.is-loading { opacity: 0.55; }
.markdown-editor__placeholder { color: var(--dashboard-muted, var(--color-muted)); font-style: italic; }
.markdown-editor__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-top: 0.45rem; }
.markdown-editor__stats { color: var(--dashboard-muted, var(--color-muted)); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }

@media (max-width: 760px) {
  .markdown-editor__panes[data-mode="split"] { grid-template-columns: minmax(0, 1fr); }
  .markdown-editor__panes[data-mode="split"] .markdown-editor__preview { border-left: 0; border-top: 1px solid var(--dashboard-border, var(--color-border)); }
}

/* -------------------------------------------------------------- uploader */
.image-uploader { display: grid; gap: 0.85rem; margin-bottom: 1.4rem; }
.image-uploader__drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 1.8rem 1.2rem;
  border: 2px dashed color-mix(in srgb, var(--dashboard-accent, var(--color-primary)) 45%, var(--dashboard-border, var(--color-border)));
  border-radius: 18px;
  background: color-mix(in srgb, var(--dashboard-accent, var(--color-primary)) 5%, var(--dashboard-surface, var(--color-surface)));
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.image-uploader__drop:hover,
.image-uploader__drop.is-dragging {
  border-color: var(--dashboard-accent, var(--color-primary));
  background: color-mix(in srgb, var(--dashboard-accent, var(--color-primary)) 11%, var(--dashboard-surface, var(--color-surface)));
}
.image-uploader__drop.is-dragging { transform: scale(1.01); }
.image-uploader__drop:focus-within { outline: 2px solid var(--dashboard-accent, var(--color-primary)); outline-offset: 3px; }
.image-uploader__icon { width: 2.3rem; height: 2.3rem; color: var(--dashboard-accent, var(--color-primary)); }
.image-uploader__title { color: var(--dashboard-heading, var(--color-heading)); font-size: 1.02rem; font-weight: 750; }
.image-uploader__hint { color: var(--dashboard-muted, var(--color-muted)); font-size: 0.85rem; }
.image-uploader__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.image-uploader__queue {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.image-uploader__file {
  overflow: hidden;
  border: 1px solid var(--dashboard-border, var(--color-border));
  border-radius: 12px;
  background: var(--dashboard-surface, var(--color-surface));
}
.image-uploader__file img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.image-uploader__file.is-invalid { border-color: var(--color-danger, #c6283e); }
.image-uploader__file-meta { display: block; padding: 0.35rem 0.5rem; color: var(--dashboard-muted, var(--color-muted)); font-size: 0.72rem; overflow-wrap: anywhere; }
.image-uploader__file.is-invalid .image-uploader__file-meta { color: var(--color-danger, #c6283e); }
.image-uploader__message { margin: 0; color: var(--dashboard-muted, var(--color-muted)); font-size: 0.86rem; font-weight: 600; }
.image-uploader__message.is-error { color: var(--color-danger, #c6283e); }
.image-uploader__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.image-uploader__actions [hidden] { display: none; }
.image-uploader.is-uploading { opacity: 0.8; pointer-events: none; }

/* ----------------------------------------------------- admin image manager */
.admin-image-manager { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.admin-image-manager__empty { color: var(--dashboard-muted, var(--color-muted)); }
.admin-image-card {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.85rem;
  border: 1px solid var(--dashboard-border, var(--color-border));
  border-radius: 16px;
  background: var(--dashboard-surface, var(--color-surface));
  scroll-margin-top: 6rem;
}
.admin-image-card.is-cover { border-color: color-mix(in srgb, #d97706 55%, var(--dashboard-border, var(--color-border))); box-shadow: 0 0 0 3px color-mix(in srgb, #f59e0b 14%, transparent); }
.admin-image-card__preview {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--dashboard-surface-soft, var(--color-surface-soft));
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}
.admin-image-card__preview img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.admin-image-card__preview:hover img { transform: scale(1.04); }
.admin-image-card__preview:focus-visible { outline: 3px solid var(--dashboard-accent, var(--color-primary)); outline-offset: 2px; }
.admin-image-card__position {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  display: grid;
  place-items: center;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}
.admin-image-card__cover-badge {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  box-shadow: 0 4px 12px -4px rgba(217, 119, 6, 0.7);
}
.admin-image-card__body { display: grid; gap: 0.6rem; min-width: 0; }
.admin-image-card__details { display: grid; gap: 0.5rem; }
.admin-image-card__details > .btn { justify-self: start; }
.admin-image-card__details .field { margin: 0; }
.admin-image-card__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.admin-image-card__actions form { margin: 0; }
.admin-image-card__delete { color: var(--color-danger, #c6283e); }

@media (max-width: 640px) {
  .admin-image-card { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------- public gallery */
.media-gallery__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; margin-bottom: 1rem; }
.media-gallery__title { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.media-gallery__count { color: var(--color-muted, #667085); font-size: 0.88rem; font-weight: 600; }
.media-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  grid-auto-rows: 11rem;
  grid-auto-flow: dense;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.media-gallery__item--wide { grid-column: span 2; }
.media-gallery__item--tall { grid-row: span 2; }
.media-gallery__trigger {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #0f172a;
  cursor: zoom-in;
  box-shadow: 0 10px 26px -16px rgba(15, 23, 42, 0.55);
}
.media-gallery__trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0, 0, 1), filter 0.3s ease;
}
.media-gallery__trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(2, 6, 23, 0.78));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.media-gallery__trigger:hover img,
.media-gallery__trigger:focus-visible img { transform: scale(1.06); }
.media-gallery__trigger:hover::after,
.media-gallery__trigger:focus-visible::after { opacity: 1; }
.media-gallery__trigger:focus-visible { outline: 3px solid var(--color-primary, #5b4de8); outline-offset: 3px; }
.media-gallery__zoom {
  position: absolute;
  right: 0.65rem;
  top: 0.65rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.media-gallery__zoom svg { width: 1rem; height: 1rem; }
.media-gallery__trigger:hover .media-gallery__zoom,
.media-gallery__trigger:focus-visible .media-gallery__zoom { opacity: 1; transform: scale(1); }
.media-gallery__caption {
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.7rem;
  z-index: 1;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.media-gallery__trigger:hover .media-gallery__caption,
.media-gallery__trigger:focus-visible .media-gallery__caption { opacity: 1; transform: none; }

@media (hover: none) {
  .media-gallery__zoom,
  .media-gallery__caption { opacity: 1; transform: none; }
  .media-gallery__trigger::after { opacity: 1; }
}
@media (max-width: 520px) {
  .media-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 9rem; }
  .media-gallery__item--wide { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .media-gallery__trigger img,
  .media-gallery__zoom,
  .media-gallery__caption,
  .image-uploader__drop,
  .admin-image-card__preview img { transition: none; }
}