/* Article body typography for any .base_html wrapper (post detail, feed post view, pages).
   Ported from qmelocal enduser/base_css.php; loaded once from the layouts and the feed post view. */


/* ---------- Headings (Mobile-first) ---------- */

.base_html h1 {
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0 0 0.9rem;
}

.base_html h2 {
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 0 0 0.8rem;
}

.base_html h3 {
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0 0 0.7rem;
}

.base_html h4 {
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 0 0 0.6rem;
}

.base_html h5 {
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 0 0 0.5rem;
}

.base_html h6 {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 0.45rem;
}


/* ---------- Paragraph & Inline Text ---------- */

.base_html p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1rem;
}

.base_html em,
.base_html i {
  font-style: italic;
}

.base_html strong,
.base_html b {
  font-weight: 700;
}

.base_html small {
  font-size: 0.875em;
}


/* ---------- Links ---------- */

.base_html a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}


/* ---------- Lists ---------- */

.base_html ul,
.base_html ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.base_html li {
  margin: 0.25rem 0;
}


/* ---------- Media (Images, Video, iframe) ---------- */

.base_html img,
.base_html video,
.base_html iframe,
.base_html svg {
  max-width: 100%;
  height: auto;
  display: block;
}

.base_html iframe {
  width: 100%;
  border: 0;
  margin: 0 0 1rem;
}
.base_html iframe[src*="youtube"],
.base_html iframe[src*="youtu.be"],
.base_html iframe[src*="vimeo"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
}

/* ---------- Responsive iframe wrapper ---------- */
/* Use when embedding YouTube, Vimeo, maps, etc. */

.base_html .iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  margin: 0 0 1rem;
}

.base_html .iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* clean_post_html() puts every YouTube / Vimeo embed in .iframe-wrap. The
   wrapper owns the size, over the unscoped iframe[src*="youtube.com/embed"]
   rule in partials/media_gallery_style.php (max-width / height !important). */
.base_html .iframe-wrap > iframe[src] {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  margin: 0;
  border: 0;
}

/* ---------- Wide tables (clean_post_html wraps them) ---------- */

.base_html .table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1rem;
}
.base_html .table-wrap > table {
  margin: 0;
}


/* ---------- Figure ---------- */

.base_html figure {
  margin: 0 0 1rem;
}

.base_html figcaption {
  font-size: 0.9rem;
  margin-top: 0.5rem;
}


/* ---------- Blockquote ---------- */

.base_html blockquote {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid currentColor;
}


/* ---------- Code ---------- */

.base_html code {
  font-size: 0.95em;
  padding: 0.15em 0.35em;
}

.base_html pre {
  margin: 0 0 1rem;
  padding: 1rem;
  overflow-x: auto;
}

.base_html pre code {
  padding: 0;
}


/* ---------- Tables ---------- */

.base_html table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1rem;
}

.base_html th,
.base_html td {
  padding: 0.6rem;
  text-align: left;
  vertical-align: top;
}


/* ---------- Horizontal Rule ---------- */

.base_html hr {
  border: 0;
  border-top: 1px solid currentColor;
  margin: 1.25rem 0;
}


/* ---------- Forms (content-safe) ---------- */

.base_html input,
.base_html textarea,
.base_html select,
.base_html button {
  font: inherit;
}


/* ---------- Utility ---------- */

.base_html > *:last-child {
  margin-bottom: 0;
}


/* =====================================================
   Responsive Scaling
   ===================================================== */


/* ---------- Tablet ≥ 768px ---------- */

@media (min-width: 768px) {
  .base_html h1 { font-size: 1.9rem; }
  .base_html h2 { font-size: 1.55rem; }
  .base_html h3 { font-size: 1.3rem; }
  .base_html h4 { font-size: 1.1rem; }
  .base_html h5 { font-size: 1rem; }
  .base_html h6 { font-size: 0.95rem; }

  .base_html p {
    font-size: 1.05rem;
  }
}


/* ---------- mmcx: images line up with the text and caption (were auto-centred) ---------- */
.base_html img { margin: 0 0 1rem !important; }

/* ---------- mmcx: Read More expands the article inside the feed card: keep an inner gap ---------- */
.ajax_content { padding: 4px 24px 24px; }
@media (max-width: 575.98px) { .ajax_content { padding: 4px 14px 18px; } }

/* ---------- mmcx (as qmelocal backend-feed.css): the opened post: gallery pictures at most 400px tall, left-aligned ---------- */
.ajax_content .gallery-section img, .ajax_content .jobs_spotlight_slider img { width: auto !important; max-width: 100%; max-height: 400px; height: auto !important; margin: 0 0 8px !important; border-radius: 10px; display: block; }
/* the picture slider: each picture fills its slide (400px tall), no letterbox; arrows sit on the picture */
.ajax_content #primary-slider { border-radius: 12px; overflow: hidden; }
.ajax_content #primary-slider .splide__slide { height: 400px; background-color: transparent !important; }
.ajax_content #primary-slider .splide__slide img { width: 100% !important; height: 100% !important; max-height: none; object-fit: cover; margin: 0 !important; border-radius: 12px; }
@media (max-width: 575.98px) { .ajax_content #primary-slider .splide__slide { height: 240px; } }
.ajax_content .play_icon img { width: 64px !important; height: auto !important; max-height: none !important; border-radius: 0 !important; }

/* ---------- mmcx: card pictures slightly rounded on every page (feeds, lists, home), not avatars or play icons ---------- */
.card .card-body img.img-fluid:not(.rounded-circle):not(.img-xs), .card .v_thumb { border-radius: 10px; }
.card .play_icon img { border-radius: 0 !important; }