/* The looks an article's writing can have, the ones Edit pages offers, for the
   article page (.post-body) and for the classic editor (.rt-editor), which does
   not load site.css. Linked from public/blog-post.html and admin/index.html.

   A phone's rules are under html:not(.pe-wide): the blog creator's frame is
   often narrower than a phone's rule allows while being shown at full width, so
   it marks itself .pe-wide unless Phone is pressed. */

/* ---- Sections with columns ---- */
:is(.post-body, .rt-editor) .post-section{ border-radius:8px; }
:is(.post-body, .rt-editor) .bs-cols{
  display:grid; grid-template-columns:repeat(var(--cols, 2), minmax(0, 1fr)); gap:var(--col-gap, 26px); align-items:start;
}
:is(.post-body, .rt-editor) .post-section-middle .bs-cols{ align-items:center; }
:is(.post-body, .rt-editor) .post-section-bottom .bs-cols{ align-items:end; }
:is(.post-body, .rt-editor) .post-section-prose{ text-align:center; }
:is(.post-body, .rt-editor) .bs-col{ display:flex; flex-direction:column; min-width:0; min-height:100%; }
:is(.post-body, .rt-editor) .bs-col > *{ margin-top:0; margin-bottom:26px; }
:is(.post-body, .rt-editor) .bs-col > *:last-child{ margin-bottom:0; }
:is(.post-body, .rt-editor) .bs-col > .post-place-middle{ margin-top:auto; margin-bottom:auto; }
:is(.post-body, .rt-editor) .bs-col > .post-place-bottom{ margin-top:auto; margin-bottom:0; }
.post-body .post-section-wide{ width:100vw; margin-left:calc(50% - 50vw); padding-left:32px; padding-right:32px; box-sizing:border-box; }
/* While writing: where a column is, as an empty one shows nothing. */
:is(.post-body[contenteditable="true"], .rt-editor) .bs-col{ outline:1px dashed var(--line); outline-offset:4px; }
@media (max-width:760px){
  html:not(.pe-wide) :is(.post-body, .rt-editor) .bs-cols{ grid-template-columns:1fr; }
  html:not(.pe-wide) .post-body .post-section-wide{ padding-left:20px; padding-right:20px; }
}

/* ---- A paragraph's and a heading's own look ---- */
:is(.post-body, .rt-editor) p.post-eyebrow{
  font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted);
}
:is(.post-body, .rt-editor) p.post-note{
  padding:14px 18px; background:var(--surface); border:1px solid var(--line); border-radius:8px;
  font-size:13.5px; line-height:1.5; text-align:center; color:var(--text-muted);
}
:is(.post-body, .rt-editor) :is(h2, h3).post-display{ font-size:clamp(34px, 6vw, 58px); line-height:1.1; }
:is(.post-body, .rt-editor) :is(h2, h3).post-label{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:13px; font-weight:400; line-height:1.5;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim);
}
:is(.post-body, .rt-editor) :is(h2, h3).post-label::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ---- A picture's own size and effects ---- */
:is(.post-body, .rt-editor) figure[style*="--img-w"]{ width:var(--img-w); margin-left:auto; margin-right:auto; }
:is(.post-body, .rt-editor) figure.post-image-soft img, .post-body figure.post-image-soft .ifx-pixel{
  border-color:transparent;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%);
          mask-image:linear-gradient(90deg, transparent 0, #000 22%);
}
.post-body figure[data-pixel]{ position:relative; }
.post-body figure .ifx-pixel{ position:absolute; pointer-events:none; border-radius:8px; }

/* ---- A panel or a border round paragraphs: they keep their gaps inside it ---- */
:is(.post-body, .rt-editor) .hd-panel > *, :is(.post-body, .rt-editor) .hd-bordered > *{ margin-top:0; margin-bottom:14px; }
:is(.post-body, .rt-editor) .hd-panel > *:last-child, :is(.post-body, .rt-editor) .hd-bordered > *:last-child{ margin-bottom:0; }

/* ---- Code within a line, given a capsule's offsets (site.css .hd-pill) ---- */
:is(.post-body, .rt-editor) :not(pre) > code[style*="--pill-r"]{ border-radius:var(--pill-r); }
:is(.post-body, .rt-editor) :not(pre) > code:is([style*="--pill-x"], [style*="--pill-y"]){
  display:inline-block; line-height:1.3; border:0;
  padding:var(--pill-y, calc(.44em + 1px)) var(--pill-x, calc(.55em + 1px));
  box-shadow:inset 0 0 0 1px var(--line);
}
:is(.post-body, .rt-editor) :not(pre) > code:is([style*="--pill-x"], [style*="--pill-y"])::before{ content:""; display:block; height:0; margin-bottom:-.28em; }
:is(.post-body, .rt-editor) :not(pre) > code:is([style*="--pill-x"], [style*="--pill-y"])::after{ content:""; display:block; height:0; margin-top:-.29em; }

/* ---- A card's picture of its own in the light theme ---- */
.post-card-image.post-card-image-light{ display:none; }
:root[data-theme="light"] .post-card-image.has-light{ display:none; }
:root[data-theme="light"] .post-card-image.post-card-image-light{ display:block; }

/* ---- site.css's capsule, panel and border, for the classic editor ---- */
.rt-editor .hd-pill, .pe-rich .hd-pill{
  font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:.92em;
  background:var(--pill, var(--bg-2)); border:1px solid var(--line);
  border-color:var(--pill, color-mix(in srgb, var(--houdini) 35%, var(--line)));
  padding:calc(.15em + var(--pill-pad, 0px)) calc(.55em + var(--pill-pad, 0px));
  border-radius:var(--pill-r, 4px); color:var(--houdini);
  line-height:calc(1.62em + 2 * var(--pill-pad, 0px) + 2px);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.rt-editor .hd-pill:is([style*="--pill-x"], [style*="--pill-y"]){
  display:inline-block; line-height:1.3; border:0;
  padding:var(--pill-y, calc(max(0px, .15em + var(--pill-pad, 0px)) + .29em + 1px)) var(--pill-x, calc(max(0px, .55em + var(--pill-pad, 0px)) + 1px));
  box-shadow:inset 0 0 0 1px var(--pill, color-mix(in srgb, var(--houdini) 35%, var(--line)));
}
.rt-editor .hd-pill:is([style*="--pill-x"], [style*="--pill-y"])::before{ content:""; display:block; height:0; margin-bottom:-.28em; }
.rt-editor .hd-pill:is([style*="--pill-x"], [style*="--pill-y"])::after{ content:""; display:block; height:0; margin-top:-.29em; }
.rt-editor .hd-panel{ display:block; margin:14px 0; padding:14px 18px; background:var(--surface); border:1px solid var(--line); border-radius:8px; }
.rt-editor .hd-panel.hd-panel-fit{ display:inline-block; width:auto; max-width:100%; }
.rt-editor .hd-bordered{ display:block; border:1px solid var(--line); border-radius:6px; padding:10px 14px; }

/* ---- The elements ---- */
/* The elements an article can hold besides writing (public/post-elements.js
   draws them). A button is the site's own .btn-block, colours and animations
   included; the article's link rule would otherwise underline it and turn
   its words orange, so it and the cards are taken out of that rule. */
:is(.post-body, .rt-editor) a.btn-block{color:var(--btn-ink, var(--on-accent,#0A0C10)); text-decoration:none;}
:is(.post-body, .rt-editor) a.post-card{color:inherit; text-decoration:none;}
:is(.post-body, .rt-editor) a.sf-patreon-btn{color:var(--btn-ink, var(--on-accent,#0A0C10)); text-decoration:none;}
:is(.post-body, .rt-editor) a.view-all{color:var(--btn-ink, var(--houdini));}
.post-button{display:flex;}
.post-button.align-center{justify-content:center;}
.post-button.align-right{justify-content:flex-end;}
.post-cta{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px;
}
.post-cta.align-center{text-align:center;}
.post-cta-heading{font-size:20px; line-height:1.3; color:var(--text); margin:0 0 8px;}
.post-cta-text{color:var(--text-muted); white-space:pre-line;}
.post-cta-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px;}
.post-cta.align-center .post-cta-actions{justify-content:center;}
/* A card group's own card width and height (--card-w, --card-h) and place
   in the article (.align-*): narrower cards sit left, centred or right. */
.post-cards{display:grid; grid-template-columns:repeat(var(--cols, 3), var(--card-w, minmax(0, 1fr))); gap:18px;}
.post-cards.align-center{justify-content:center;}
.post-cards.align-right{justify-content:end;}
.post-cards > .post-card{min-height:var(--card-h, auto);}
.post-card{
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.post-card-image{display:block; width:100%; aspect-ratio:16/9 !important; object-fit:cover; border-bottom:1px solid var(--line-soft);}
.post-card-body{display:flex; flex-direction:column; gap:6px; flex:1; padding:14px 16px 16px;}
.post-card-heading{font-size:15px; line-height:1.35; color:var(--text); margin:0;}
.post-card-text{font-size:14px; line-height:1.6; color:var(--text-muted); white-space:pre-line;}
.post-card-link{margin-top:auto; padding-top:6px; font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:12px; color:var(--houdini);}
.post-gallery{display:grid; grid-template-columns:repeat(var(--cols, 3), minmax(0, 1fr)); gap:12px;}
:is(.post-body, .rt-editor) .post-gallery-item{margin:0;}
.post-gallery-item img{display:block; width:100%; aspect-ratio:1/1 !important; object-fit:cover; border-radius:8px; border:1px solid var(--line);}
:is(.post-body, .rt-editor) .post-gallery-item figcaption{margin-top:6px; text-align:left;}
@media(max-width:700px){
  .post-cards{grid-template-columns:minmax(0, 1fr);}
  .post-gallery{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

/* The classic editor does not load site.css, and its own rules for headings,
   pictures and links would otherwise win: what they take from the site. */
.rt-editor{ --radius:10px; }
.rt-editor [data-el]{ font-family:var(--font-body,'Inter',sans-serif); font-size:16px; line-height:1.75; color:var(--post-ink, #D6D9DE); }
.rt-editor :is(.post-cta-heading, .post-card-heading){ font-size:18px; line-height:1.4; margin:12px 0 4px; }
.rt-editor .post-card-heading{ color:var(--post-ink, #D6D9DE); }
.rt-editor :is(.post-cta-text, .post-card-text){ font-family:var(--font-body,'Inter',sans-serif); }
.rt-editor .post-card-image{ border-radius:0; border-width:0 0 1px; }
.rt-editor .btn-block{
  display:inline-flex; align-items:center; gap:8px; position:relative; box-sizing:border-box; justify-content:center; text-align:center;
  width:var(--btn-w, auto); min-height:var(--btn-h, auto); max-width:100%;
  font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:13px; font-weight:500;
  padding:12px 26px; border-radius:8px;
  background:var(--btn-bg, var(--houdini)); border:1px solid var(--btn-border, transparent);
}
.rt-editor a.sf-patreon-btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center; text-align:center;
  font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:13px; font-weight:500;
  padding:12px 26px; border-radius:8px;
  background:var(--btn-bg, var(--houdini));
}

/* ---- A big card, as on the Assets hub ---- */
.post-cards-big{ gap:24px; }
/* Without weight, as on the hub: a hover effect chosen for the group wins. */
:where(.post-cards-big > .post-card){ transition:.2s; }
:where(.post-cards-big) > a:where(.post-card):hover{ border-color:var(--card-accent, var(--houdini)); transform:translateY(-3px); }
.post-cards-big .post-card-image{ object-fit:contain; }
.post-cards-big .post-card-body{ padding:36px 30px; gap:14px; }
:is(.post-body, .rt-editor) .post-cards-big .post-card-heading{ font-size:22px; margin:0; }
.post-cards-big .post-card-text{ flex:1; }
.post-cards-big .post-card-link{ margin-top:0; padding-top:0; font-size:13px; color:var(--text); }
.post-cards-big > a.post-card:hover .post-card-link{ color:var(--card-accent, var(--houdini)); }
.post-card-tag{
  align-self:flex-start; font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:11px;
  padding:5px 12px; border-radius:20px; letter-spacing:.04em; border:1px solid var(--line); color:var(--text-muted);
}
.post-card.free .post-card-tag{ background:#12351f; color:#5FBF7A; border-color:#1e5334; }
.post-card.premium .post-card-tag{ background:#3a2a12; color:var(--houdini); border-color:#5a3f1c; }

/* A card with no link has nothing for the reveal bar to say, as elsewhere. */
.post-cards.hv-rise > div.post-card .card-reveal-clip{ display:none; }
.post-cards.hv-rise > div.post-card:hover > *:not(.card-reveal-clip):not(.card-fx){ transform:none; }

/* ---- A table ---- */
:is(.post-body, .rt-editor) table{ display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; font-size:15px; line-height:1.5; }
:is(.post-body, .rt-editor) :is(th, td){ border:1px solid var(--line); padding:8px 12px; text-align:left; vertical-align:top; }
:is(.post-body, .rt-editor) th{ background:var(--surface); color:var(--text); font-weight:600; }
:is(.post-body, .rt-editor) caption{ padding:0 0 8px; text-align:left; font-size:13px; color:var(--text-muted); }
/* While writing: an empty cell stays big enough to click into. */
:is(.post-body[contenteditable="true"], .rt-editor) :is(th, td){ min-width:80px; height:1.5em; }

/* ---- Custom HTML ---- */
/* Its colour scheme is the one inside it, or a browser paints it solid. */
.post-html-frame{ display:block; width:100%; height:150px; border:0; background:transparent; color-scheme:dark; }
:root[data-theme="light"] .post-html-frame{ color-scheme:light; }
/* While writing it can be selected and moved rather than played with; it plays in Preview and on the site. */
:is(.post-body[contenteditable="true"], .rt-editor) .post-html-frame{ pointer-events:none; outline:1px dashed var(--line); outline-offset:2px; }