/* Article content blocks.
   Shared by the public article page (.article__content) and the admin editor (.mce-content-body),
   so what the author sees while editing is what visitors get.
   Colors are translucent tints, so they work on both dark and light backgrounds. */

/* ---------- callout boxes ---------- */
.ab { --ab-h: 356; position: relative; margin: 1.5rem 0; padding: 1rem 1.25rem; padding-inline-start: 3.6rem; border-radius: 1rem; border: 1px solid hsla(var(--ab-h), 70%, 55%, .4); background: hsla(var(--ab-h), 70%, 55%, .1); }
.ab::before { content: "i"; position: absolute; top: 1rem; inset-inline-start: 1rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: hsl(var(--ab-h), 65%, 48%); color: #fff; font: 700 .95rem/1 Georgia, serif; }
.ab--note { --ab-h: 356; }
.ab--info { --ab-h: 210; }
.ab--tip { --ab-h: 275; } .ab--tip::before { content: "\2726"; }
.ab--success { --ab-h: 145; } .ab--success::before { content: "\2713"; }
.ab--warning { --ab-h: 38; } .ab--warning::before { content: "!"; }
.ab--danger { --ab-h: 0; } .ab--danger::before { content: "\00D7"; font-size: 1.25rem; }
.ab > :first-child { margin-top: 0 !important; }
.ab > :last-child { margin-bottom: 0 !important; }
.ab p { margin: .4rem 0; }

/* pull quote */
.apull, blockquote.apull { position: relative; margin: 2rem 0; padding: 1.25rem 1.5rem; text-align: center; font-size: 1.25em; font-weight: 700; line-height: 1.9; border: 0; border-block: 2px solid hsla(356, 70%, 65%, .5); border-radius: 0; background: none; }
.apull::before { content: "\201C"; display: block; font: 700 3rem/1 Georgia, serif; color: hsl(356, 66%, 70%); margin-bottom: -.4rem; }
.apull p { margin: 0; }

/* ---------- columns ---------- */
.acols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 1.75rem 0; align-items: start; }
.acols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.acols--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.acols--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.acols--center { align-items: center; }
.acol { min-width: 0; }
.acol > :first-child { margin-top: 0 !important; }
.acol > :last-child { margin-bottom: 0 !important; }
.acols--cards .acol, .acol--box { padding: 1.25rem; border-radius: 1.25rem; border: 1px solid hsla(0, 0%, 55%, .28); background: hsla(0, 0%, 55%, .07); box-shadow: 0 10px 26px hsla(0, 0%, 0%, .1); }
.acols--cards .acol h3, .acols--cards .acol h4 { margin-top: 0 !important; }

/* ---------- image + text side by side ---------- */
.amedia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.75rem; align-items: center; margin: 2rem 0; }
.amedia--half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.amedia--end .amedia__img { order: 2; }
.amedia--top { align-items: start; }
.amedia__img { margin: 0; }
.amedia__img img { display: block; width: 100%; height: auto; border-radius: 1.25rem; box-shadow: 0 14px 34px hsla(0, 0%, 0%, .2); }
.amedia__text > :first-child { margin-top: 0 !important; }
.amedia__text > :last-child { margin-bottom: 0 !important; }

/* ---------- single image placement (class picked in the image dialog) ---------- */
:is(.article__content, .mce-content-body) img.aimg--start { float: inline-start; width: auto; max-width: 45%; margin: .3rem 0 1rem; margin-inline-end: 1.5rem; }
:is(.article__content, .mce-content-body) img.aimg--end { float: inline-end; width: auto; max-width: 45%; margin: .3rem 0 1rem; margin-inline-start: 1.5rem; }
:is(.article__content, .mce-content-body) img.aimg--center { display: block; float: none; margin: 1.5rem auto; }
:is(.article__content, .mce-content-body) img.aimg--full { display: block; float: none; width: 100%; margin: 1.5rem 0; }
:is(.article__content, .mce-content-body) img.aimg--round { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
:is(.article__content, .mce-content-body) img.aimg--shadow { box-shadow: 0 16px 38px hsla(0, 0%, 0%, .28); }
/* images aligned with the editor's own align buttons */
:is(.article__content, .mce-content-body) figure.image.align-left, :is(.article__content, .mce-content-body) img[style*="float: left"], :is(.article__content, .mce-content-body) img[style*="float:left"] { max-width: 45%; }
:is(.article__content, .mce-content-body) figure.image.align-right, :is(.article__content, .mce-content-body) img[style*="float: right"], :is(.article__content, .mce-content-body) img[style*="float:right"] { max-width: 45%; }
:is(.article__content, .mce-content-body) :is(h2, h3, h4), .aclear { clear: both; }
.aclear { height: 0; margin: 0; border: 0; }

/* ---------- video ---------- */
.avideo { margin: 2rem auto; max-width: 100%; }
.avideo__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 1.25rem; overflow: hidden; background: #000; box-shadow: 0 16px 40px hsla(0, 0%, 0%, .3); }
.avideo--4x3 .avideo__frame { aspect-ratio: 4 / 3; }
.avideo--1x1 .avideo__frame { aspect-ratio: 1; }
.avideo--9x16 { max-width: 380px; } .avideo--9x16 .avideo__frame { aspect-ratio: 9 / 16; }
.avideo__frame iframe, .avideo__frame video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; border-radius: 0 !important; }
.avideo figcaption { text-align: center; font-size: .9em; opacity: .75; margin-top: .6rem; }

/* ---------- button, divider, highlight, accordion ---------- */
.abtn-wrap { text-align: center; margin: 1.75rem 0; }
:is(.article__content, .mce-content-body) a.abtn { display: inline-block; padding: .75rem 1.8rem; border-radius: 3rem; font-weight: 700; text-decoration: none; color: #1a1020; background: linear-gradient(135deg, hsl(356, 66%, 75%), hsl(26, 75%, 68%)); box-shadow: 0 10px 24px hsla(356, 66%, 60%, .35); transition: transform .2s, box-shadow .2s; }
:is(.article__content, .mce-content-body) a.abtn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px hsla(356, 66%, 60%, .5); text-decoration: none; }
hr.adiv { border: 0; height: 3px; width: 6rem; margin: 2.25rem auto; border-radius: 3px; background: linear-gradient(90deg, hsl(356, 66%, 75%), hsl(26, 75%, 68%)); }
mark { background: hsla(48, 100%, 55%, .35); color: inherit; padding: .05em .3em; border-radius: .3em; }
details.mce-accordion { margin: 1rem 0; border: 1px solid hsla(0, 0%, 55%, .3); border-radius: 1rem; padding: .25rem 1.1rem; background: hsla(0, 0%, 55%, .06); }
details.mce-accordion > summary { cursor: pointer; font-weight: 700; padding: .7rem 0; }
details.mce-accordion[open] > summary { border-bottom: 1px solid hsla(0, 0%, 55%, .25); margin-bottom: .6rem; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .acols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .acols, .acols--3, .acols--4, .acols--1-2, .acols--2-1 { grid-template-columns: minmax(0, 1fr); }
  .amedia, .amedia--half { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .amedia--end .amedia__img { order: 0; }
  :is(.article__content, .mce-content-body) img.aimg--start, :is(.article__content, .mce-content-body) img.aimg--end,
  :is(.article__content, .mce-content-body) img[style*="float"] { float: none !important; display: block; max-width: 100%; margin: 1rem auto !important; }
  .ab { padding-inline-start: 3.2rem; }
}