/* Article body for single news posts, announcements and recruitment notices.
   Kept out of frontend.css deliberately: these rules serve one template and
   every other page - the homepage, the listings, the eleven degree program
   pages whose payload is budgeted - would otherwise carry them unused.
   Enqueued by the content filter that renders an article. */
/* ── Article body ───────────────────────────────────────────────────────────
   One vocabulary for every post the plugin renders.

   The measure is a fixed rem rather than ch. `ch` is the advance of the "0"
   glyph in whatever font actually resolves, so a measure set in it drifts with
   the font the theme happens to load - between roughly 578px and 636px for the
   same declaration - and the one thing a measure exists to do is not drift.

   Line height is 1.85. Thai stacks vowels above the letter and tone marks above
   those; below about 1.75 they collide with the descenders of the line above,
   so 1.75 is the floor, not the setting. */
.rxsu-article {
  /* ── Why 44rem and not 34rem (0.71.2) ──────────────────────────────────
     Measured on the live post at a 1280px viewport: Elementor hands this
     element an 820px column. The album, the figures and the quote all take
     that 820px. The prose took 544px and left 276px of the column empty
     beside it - a third of the width - and the eye reads that gap as a
     mistake rather than as a reading measure, because the band directly
     below it is flush to both edges.

     44rem = 704px, roughly 74 Thai characters at this size. That sits
     inside the comfortable range (about 60-80) while closing most of the
     gap against the media that shares the column.

     ── 0.79.0: flush with the media, on the record ──────────────────────
     That trade has now been taken, deliberately and on request, after
     looking at the rendered post: the quote card and the paragraphs sat
     inside 704px while the photograph and the album above and below them
     took the full column, and three different left-to-right runs on one
     page read as three different mistakes rather than as one measure.

     Alignment won over line length here because this template's payload is
     short announcements, not long-form reading: the paragraphs on a real
     post run three to six lines, where the cost of a long measure (losing
     the start of the next line) barely accrues. On a page of running prose
     the answer would be the other way round, and the way back is this one
     declaration - `min(100%, 44rem)` - not a rewrite. */
  --rxsu-article-measure: 100%;
  color: var(--rxsu-text);
  font-size: 1.0625rem;
  line-height: 1.85;
  /* Thai breaks by dictionary on its own; a pasted URL is the one string in an
     article with no break opportunity anywhere in it, and the one string that
     would drag a 375px viewport sideways. break-word, not anywhere: anywhere
     also splits short Latin words that would have fitted on the next line. */
  overflow-wrap: break-word;
}

.rxsu-article > * {
  max-width: var(--rxsu-article-measure);
  margin-block: 0 1.1em;
}

.rxsu-article > *:last-child {
  margin-block-end: 0;
}

/* The paragraph that opens the article, one size step above body copy. The
   renderer decides which paragraph that is, because an article beginning with a
   heading or a photograph already has an entry point and must not get a second
   one - a distinction `p:first-child` cannot express. */
.rxsu-article__lead {
  font-size: 1.1875rem;
  line-height: 1.8;
}

.rxsu-article h2,
.rxsu-article h3 {
  margin-block: 2em 0.6em;
  color: var(--rxsu-text);
  font-weight: 700;
  /* 1.55, not the 1.4 this was: headings wrap on a phone, and the floor the
     top of this file sets for Thai applies to them too. Short and bold buys a
     little slack off 1.85, not the 0.35 that put line two's tone marks into
     line one's descenders. */
  line-height: 1.55;
  /* Negative tracking is a Latin display-type habit. Thai glyphs carry their
     vowels and tone marks in the vertical, and tightening the horizontal buys
     nothing while crowding the marks that distinguish one word from another. */
  letter-spacing: 0;
}

/* The short rule above a subheading is drawn here, which is why the editor
   tells the operator not to type one. Olive, flush to the text start edge, and
   on h2 only: an h3 is a step inside a section, not the start of one. */
.rxsu-article h2::before {
  display: block;
  width: 2.25rem;
  height: 2px;
  margin-block-end: 0.85rem;
  background: var(--rxsu-primary);
  content: "";
}

/* 22 and 20 against a 19px lede and 17px body. The old pair (21/18) put h3
   below the lede it was meant to govern, which reads as a demotion of the
   heading rather than a hierarchy. */
.rxsu-article h2 { font-size: 1.375rem; }
.rxsu-article h3 { font-size: 1.25rem; }
.rxsu-article > :is(h2, h3):first-child { margin-block-start: 0; }

.rxsu-article__list {
  padding-inline-start: 1.35em;
}

.rxsu-article__list li {
  margin-block-end: 0.4em;
}

.rxsu-article__list li::marker {
  color: var(--rxsu-primary);
}

/* A list read as pairs: a label and the thing it labels, on one row, separated
   by a hairline. The label column is fixed so the values line up down the page -
   the whole reason this shape is easier to read than a sentence. Below 30rem
   there is no room for two columns, so the label sits above its value rather
   than being squeezed to three characters a line. */
.rxsu-article__facts {
  display: grid;
  padding: 0;
  gap: 0.55em;
  list-style: none;
}

.rxsu-article__facts li {
  display: grid;
  padding-block-end: 0.55em;
  border-block-end: 1px solid var(--rxsu-border);
  gap: 0.25em 1em;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  font-size: 0.8125rem;
  line-height: 1.75;
}

.rxsu-article__facts li.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.rxsu-article__facts li:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

.rxsu-article__factkey {
  color: #7d8776;
  font-weight: 600;
}

/* Restated at a specificity that beats the theme, for the same reason the
   gallery rules below are: a theme that puts a marker back on a list would put
   one on every row of this table too. */
.rxsu-article .rxsu-article__facts,
.rxsu-article .rxsu-article__facts li { list-style: none; }

/* ── ทุกก้อนใช้ขอบซ้ายเส้นเดียวกัน (0.79.0) ─────────────────────────────────
   `<figure>` กับ `<blockquote>` ได้ `margin: 1em 40px` มาจาก user-agent stylesheet
   ของเบราว์เซอร์เอง · ไฟล์นี้เคยตั้งแต่ `margin-block` จึงไม่เคยล้าง 40px สองข้างนั้น
   ผลคือภาพ อัลบั้ม และคำกล่าว เยื้องเข้ามา 40px ส่วนย่อหน้าชิดขอบคอลัมน์ — สองขอบซ้าย
   ในหน้าเดียว ซึ่งตาอ่านว่าจัดวางพลาด ไม่ใช่ว่าตั้งใจ · วัดในเบราว์เซอร์จริงถึงเห็น:
   ในคอลัมน์ 820px ย่อหน้าได้ 820 แต่ภาพได้ 740 */
.rxsu-article__figure,
.rxsu-article__gallery,
.rxsu-article__quote {
  max-width: 100%;
  margin-inline: 0;
}

.rxsu-article__figure,
.rxsu-article__gallery {
  margin-block: 2em;
}

/* The album gets its own ground. The photographs are the record of the event,
   so the design gives them the full width the prose deliberately does not take,
   on a tint bounded top and bottom.

   The reference design bleeds this to the edge of its paper with a negative
   inline margin against the sheet's own padding. There is no sheet here - the
   article renders inside an Elementor container whose padding this stylesheet
   does not own - so a negative margin would push the band out of a box it does
   not control. The band takes the article's full width instead, which is
   already wider than the 34rem prose measure, and states the difference here
   rather than reaching outside. */
.rxsu-article__gallery {
  margin-block: 2.75em 0;
  padding: clamp(1rem, 3vw, 1.75rem) clamp(0.85rem, 3vw, 1.75rem);
  border-block: 1px solid var(--rxsu-border);
  background: var(--rxsu-band, #eef1e9);
}

.rxsu-article__galleryhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  margin-block-end: 1rem;
  gap: 0.35rem 1rem;
}

.rxsu-article__galleryhead h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}

/* No rule above this one. The olive bar marks the start of a section in the
   prose; the album already has a whole tinted ground announcing itself, and a
   second marker inside it reads as a mistake. */
.rxsu-article__galleryhead h2::before {
  content: none;
}

/* The count sits right even when there is no title to sit opposite. */
.rxsu-article__galleryhead span {
  margin-inline-start: auto;
  color: #55604f;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.rxsu-article__figure img,
.rxsu-article__gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.rxsu-article__gallery ul {
  display: grid;
  grid-template-columns: repeat(var(--rxsu-gallery-columns, 4), minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rxsu-article__gallery li {
  margin: 0;
}

.rxsu-article__gallery img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.rxsu-article :is(.rxsu-article__figure, .rxsu-article__gallery) figcaption {
  /* คำบรรยายภาพยังแคบกว่าเนื้อความโดยตั้งใจ แม้เนื้อความจะกว้างเต็มคอลัมน์แล้ว —
     มันเป็นคำอธิบายของภาพหนึ่งใบ ไม่ใช่เนื้อความที่อ่านต่อเนื่อง และการให้มันยาว
     เท่ากันทำให้เส้นแบ่งระหว่าง "ภาพ" กับ "เรื่อง" หายไป */
  max-width: min(100%, 44rem);
  margin-block-start: 0.7em;
  color: var(--rxsu-muted);
  font-size: 0.875rem;
  line-height: 1.75;
}

/* A full border and a tinted ground, not a coloured left edge. */
.rxsu-article__quote {
  margin-block: 2em;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--rxsu-border);
  border-radius: 11px;
  /* Tinted clear of the sheet. --rxsu-surface is within two points of white, so
     a card on it all but disappears against the page. */
  background: var(--rxsu-band, #eef1e9);
}

/* Set at the lede's size, not the body's. A pull quote that matches the
   paragraph above it carries no more weight than the paragraph above it. */
.rxsu-article__quote p {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.75;
}

.rxsu-article__quote cite {
  display: block;
  margin-block-start: 0.65rem;
  color: var(--rxsu-muted);
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 600;
}

.rxsu-article__document {
  margin-block: 1.5em;
}

/* Restated at a specificity that beats the theme. Measured on the live page:
   display, aspect-ratio, object-fit and max-width applied; list-style and
   border-radius lost, so every gallery carried a bullet beside each photograph
   and square corners. Only the two observed to lose are repeated here. */
.rxsu-article .rxsu-article__gallery ul,
.rxsu-article .rxsu-article__gallery li { list-style: none; }
.rxsu-article .rxsu-article__gallery img,
.rxsu-article .rxsu-article__figure img { border-radius: 10px; }

/* Two steps down, at the widths the design sets. The count chose a ceiling; the
   viewport lowers it. The [data-count] guards carry higher specificity than the
   plain rule, so a one- or two-photograph gallery is never widened into empty
   tracks by a step meant for a large album. */
@media (max-width: 48rem) {
  .rxsu-article__gallery ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rxsu-article__gallery[data-count="2"] ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rxsu-article__gallery[data-count="1"] ul { grid-template-columns: 1fr; }
}

@media (max-width: 30rem) {
  .rxsu-article__facts li { grid-template-columns: minmax(0, 1fr); }
  .rxsu-article__gallery ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rxsu-article__gallery[data-count="1"] ul { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Body type holds at 17px. Phones are where most of these posts are read and
     Thai at 16px with stacked marks is the wrong place to save space; only the
     spacing tightens. */
  .rxsu-article__figure,
  .rxsu-article__gallery,
  .rxsu-article__quote { margin-block: 1.5em; }
}

/* ── Enlarging a photograph ─────────────────────────────────────────────────
   Each thumbnail is a link to its full-size file. The link works on its own;
   article.js upgrades it to a dialog, whose appearance lives in lightbox.css
   and loads only for an article that actually has a gallery. */
.rxsu-article__enlarge {
  display: block;
  border-radius: 10px;
  box-shadow: none;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.rxsu-article__enlarge:hover {
  transform: scale(1.015);
  box-shadow: 0 8px 22px rgba(38, 49, 38, 0.18);
}

/* ── Author-chosen text size (0.72.0) ──────────────────────────────────────
   The toolbar writes these three classes and nothing else; the filter keeps
   these three and strips every other class off a span before it is stored.
   The scale is relative (em), so a size chosen inside a caption or a quote
   stays proportional to the type around it rather than jumping to body size.

   These same three numbers are repeated in the editor's content_style, which
   is what makes the control honest: what the author sees while typing is the
   size the reader gets. Change one, change both - the test suite checks. */
.rxsu-article .rxsu-t-sm { font-size: 0.875em; }
.rxsu-article .rxsu-t-lg { font-size: 1.15em; }
.rxsu-article .rxsu-t-xl { font-size: 1.35em; }

/* ── Inline formatting from the toolbar (0.70.0, styled 0.71.0) ────────────
   The editor writes links, underlines and strikethrough into body copy now.
   Until this block, none of the three had a rule here: links fell through to
   whatever the site theme sets - a blue that belongs to no part of this
   design, with no guaranteed underline and no focus ring at all.

   kses strips every class from author markup (the allowlist carries href,
   title, target and rel, nothing else), so `a:not([class])` is exactly the
   operator's links and can never match __enlarge or the document button. */
.rxsu-article a:not([class]) {
  color: var(--rxsu-secondary, #007c72);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  /* The default underline position runs straight through ุ and ู. A reader
     who cannot tell those two apart is reading a different word. */
  text-underline-offset: 0.22em;
  text-decoration-skip-ink: all;
}

.rxsu-article a:not([class]):hover {
  text-decoration-thickness: 2px;
}

.rxsu-article a:not([class]):focus-visible {
  outline: 3px solid var(--rxsu-secondary, #007c72);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Same reasoning as the link underline, for the underline the operator asked
   for deliberately. */
.rxsu-article u {
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: all;
}

/* LINE Seed Sans TH ships no italic cut, so em and i render as a synthesised
   oblique that slants the tone marks with the glyph. That is a limitation of
   the typeface, not something CSS can correct; it is recorded here so the next
   reader does not go looking for the rule that fixes it. */

/* The article's only focusable elements are these, the document button and now
   inline links, and a photograph grid with no visible focus is unusable from a
   keyboard. */
.rxsu-article__enlarge:focus-visible {
  outline: 3px solid var(--rxsu-secondary, #007c72);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .rxsu-article__enlarge { transition: none; }
  .rxsu-article__enlarge:hover { transform: none; }
}