/* Blog layout override: make blog posts fluid on desktop and comfy on mobile.
   This file MUST be loaded after /assets/css/style.css.
*/

:root{
  --blogMaxW: 1320px;
  --blogProseW: 1120px;
  --blogGutter: clamp(16px, 3vw, 48px);
}

/* Post body section is also a .container in this project */
section.section.prose,
section#post-body.section.prose{
  max-width: var(--blogMaxW) !important;
}

/* Tame overly large side padding inside post sections */
section.section.prose.container,
section#post-body.section.prose.container{
  padding-left: var(--blogGutter) !important;
  padding-right: var(--blogGutter) !important;
}

/* Kill any “book column” caps (like 70ch) and set a readable wide measure */
section.section.prose > :where(p,ul,ol,h2,h3,h4,blockquote,pre,table,figure,div,hr),
section#post-body.section.prose > :where(p,ul,ol,h2,h3,h4,blockquote,pre,table,figure,div,hr){
  width: min(var(--blogProseW), 100%) !important;
  max-width: min(var(--blogProseW), 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Catch nested content too (some posts may wrap content in extra divs) */
section.section.prose :where(p,ul,ol,blockquote,pre,table,figure),
section#post-body.section.prose :where(p,ul,ol,blockquote,pre,table,figure){
  max-width: none; /* let the parent width rule control it */
}

/* Lists should keep indentation inside the wider column */
section.section.prose :where(ul,ol),
section#post-body.section.prose :where(ul,ol){
  padding-left: 1.2em !important;
}

/* Media should not overflow */
section.section.prose img,
section.section.prose video,
section.section.prose iframe,
section#post-body.section.prose img,
section#post-body.section.prose video,
section#post-body.section.prose iframe{
  max-width: 100% !important;
  height: auto;
}

/* Presentation / embed blocks: always centered (prevents “drifting” after layout overrides) */
section.section.prose .slider,
section#post-body.section.prose .slider,
section.section.prose .pdf-embed,
section#post-body.section.prose .pdf-embed,
section.section.prose .pdf-frame,
section#post-body.section.prose .pdf-frame,
section.section.prose .pdf-cover,
section#post-body.section.prose .pdf-cover{
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}

/* Mobile: let content breathe edge-to-edge with gutters */
@media (max-width: 900px){
  :root{ --blogProseW: 100%; }
  section.section.prose > :where(p,ul,ol,h2,h3,h4,blockquote,pre,table,figure,div,hr),
  section#post-body.section.prose > :where(p,ul,ol,h2,h3,h4,blockquote,pre,table,figure,div,hr){
    width: 100% !important;
    max-width: 100% !important;
  }
}