/* Archive listings for /main/news/ and /main/eserv-conf/.
   Kept out of frontend.css deliberately: these rules serve exactly two pages,
   and every other page on the site - including the eleven degree program pages
   whose payload is budgeted - would otherwise download them and never use one.
   Loaded by the shortcode that needs them.

   One vocabulary for both pages. They used to carry their own markup, which is
   how they ended up with filter buttons for a category that no longer exists. */
.rxsu-archive { color: var(--rxsu-text); }

.rxsu-archive__head { margin-block-end: 1.6rem; text-align: center; }
.rxsu-archive__head h2 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.012em;
}
.rxsu-archive__head hr {
  width: min(100%, 46rem);
  height: 2px;
  margin: 0 auto;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--rxsu-primary) 18%, var(--rxsu-primary) 82%, transparent);
}

/* The filters sit on their own ground, so they read as one control rather than
   as a row of loose buttons above the list. The band is inset by the section
   padding and bounded top and bottom, the same treatment the article gallery
   gets - one idea, used twice, from one token. */
.rxsu-archive__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block-end: 1.5rem;
  padding: 0.85rem clamp(0.75rem, 2.5vw, 1.25rem);
  border-block: 1px solid var(--rxsu-border);
  background: var(--rxsu-band, #eef1e9);
}
.rxsu-archive__chip {
  padding: 0.34rem 0.85rem;
  border: 1px solid var(--rxsu-border);
  border-radius: 999px;
  color: var(--rxsu-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  text-decoration: none;
  transition: border-color 180ms cubic-bezier(.22,1,.36,1), color 180ms cubic-bezier(.22,1,.36,1);
}
.rxsu-archive__chip:hover,
.rxsu-archive__chip:focus-visible { border-color: var(--rxsu-secondary); color: var(--rxsu-secondary); }
.rxsu-archive__chip[aria-current="true"] {
  background: #4f5528;
  border-color: #4f5528;
  color: #fbfcf9;
  font-weight: 600;
}
.rxsu-archive__chip .n { margin-inline-start: 0.35rem; opacity: 0.62; font-size: 0.75em; font-variant-numeric: tabular-nums; }

/* News reads as a list. Most posts carry no photograph, so a card grid fills
   the gap with the faculty banner repeated down the page, and uneven Thai
   headline lengths leave large holes under the short ones.

   ── แถวบรรณาธิการ (0.143.0) ─────────────────────────────────────────────
   ข้อความข้างบนเรื่อง "ข่าวส่วนใหญ่ไม่มีรูป" ไม่จริงแล้ว วัดบน production
   วันนี้: ข่าวเผยแพร่ 16 ใบ ทุกใบมีรูปจริง ไม่มีใบไหนตกไปใช้แผ่นสี
   แต่เลย์เอาต์ยังปฏิบัติกับรูปเหมือนของแถม

     เดสก์ท็อป 1280   รูป 120x90 = 10.5% ของความกว้างแถว = 7.6% ของพื้นที่
     มือถือ 375       display:none — 0%  บนเครื่องที่คนอ่านจริงมากที่สุด

   สามอย่างที่เปลี่ยน
     1. รูปได้ 20% ของแถว (228x152 ที่ 1140) กรอบ 3:2 ตามภาพถ่ายกิจกรรม
        ของคณะซึ่งครึ่งหนึ่งเป็น 3:2 เป๊ะอยู่แล้ว จึงไม่ถูกครอบเลย
     2. คอลัมน์อ่านลงจาก 893px (79 ตัวอักษร เกินเกณฑ์) เหลือ 780px (~69)
     3. มือถือได้รูปคืน วางไว้บนสุดเต็มความกว้าง

   ── ทำไมเป็น container query ไม่ใช่ media query ──────────────────────────
   หน้าตัวอย่างใน wp-admin (class-rxsu-content-editor.php) ห่อแถวด้วยคลาส
   .rxsu-archive--news ชุดเดียวกับหน้าจริง แต่คอลัมน์กว้างราว 399px
   ถ้าใช้ media query ตัวอย่างจะได้ผังเดสก์ท็อปในกล่องแคบแล้วล้น ซึ่ง
   .rxsu-surface-preview มี overflow:clip จึงถูกตัดเงียบโดยไม่มีใครเห็น
   container query ทำให้ตัวอย่างได้ผังมือถือเองตามความกว้างที่มันมีจริง */
.rxsu-archive__stream {
  display: grid;
  container-type: inline-size;
  container-name: rxsu-stream;
}
.rxsu-archive__item {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr) 20%;
  gap: 0.35rem 1.5rem;
  align-items: start;
  padding-block: 1.35rem;
  border-block-start: 1px solid var(--rxsu-border);
  color: inherit;
  text-decoration: none;
}
.rxsu-archive__item:last-child { border-block-end: 1px solid var(--rxsu-border); }
.rxsu-archive__item:hover .rxsu-archive__title,
.rxsu-archive__item:focus-visible .rxsu-archive__title {
  color: var(--rxsu-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rxsu-archive__date {
  display: grid;
  gap: 0.1rem;
  padding-block-start: 0.15rem;
  color: var(--rxsu-muted);
  font-size: 0.875rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.rxsu-archive__date b { color: var(--rxsu-text); font-size: 1.375rem; font-weight: 700; line-height: 1.1; }
/* date_rail() คืนค่าว่างได้จริงเมื่อวันที่ไม่ผ่าน sanitize — ห้ามเหลือกล่องเปล่าในแถว */
.rxsu-archive__date:empty { display: none; }

/* ── ข้อความเกาะขอบบน ไม่ใช่ยืดเต็มแถว (แก้ใน 0.144.0) ────────────────────
   0.143.0 ยืด __body เต็มความสูงแถวแล้วปักบรรทัดข้อมูลไว้ขอบล่าง ตั้งใจให้แถว
   ยึดกับขอบบนและขอบล่างของรูป · แต่วัดบนหน้าจริงแล้วมันเปิดรูกลางแถว

     แถวที่ไม่มีคำโปรย (6 ใน 12)  รูป 152px − หัวเรื่องสองบรรทัด 52 − ป้าย 24
                                  = ช่องว่าง 76px คั่นระหว่างหัวเรื่องกับป้าย

   ช่องว่างที่อยู่ "กลาง" กลุ่มข้อความอ่านเป็นของหาย ไม่ใช่ช่องไฟ · ย้ายให้ไปอยู่
   "ใต้" กลุ่มข้อความแทน โดยให้ทุกอย่างเกาะขอบบนแล้วปล่อยที่ว่างไว้ข้างล่างรูป
   ซึ่งเป็นจังหวะปกติของรายการที่ภาพเป็นตัวกำหนดความสูงแถว */
.rxsu-archive__body { min-width: 0; display: flex; flex-direction: column; }
.rxsu-archive__title { display: block; font-size: 1.0625rem; font-weight: 650; line-height: 1.55; }

/* คำโปรยมีอยู่ในฐานข้อมูลครบทุกใบมาตลอด แถวนี้แค่ไม่เคยพิมพ์มัน
   ตัวเรนเดอร์เงียบเมื่อคำโปรยซ้ำกับหัวเรื่อง จึงพิมพ์จริง 9 ใน 16 ใบ
   line-height 1.7 ไม่ใช่ค่าตกแต่ง — overflow:hidden ที่ระยะบรรทัดต่ำกว่านี้
   ตัดวรรณยุกต์และสระบนของไทยทิ้ง ซึ่งเป็นสิ่งที่เทสต์บรรทัด 96 มีไว้กัน */
.rxsu-archive__summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-block-start: 0.4rem;
  color: var(--rxsu-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.rxsu-archive__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin-block-start: 0.55rem;
  color: var(--rxsu-muted);
  font-size: 0.875rem;
}
/* ชิปนี้เคยรับสีตัวอักษรมาจาก .rxsu-archive__meta (สีจาง) แล้ววางบนพื้น --rxsu-surface
 * วัดได้ 4.07:1 ที่ขนาด 11px ซึ่งตกเกณฑ์ AA (ต้องการ 4.5:1) มาตลอดโดยไม่มีใครรายงาน
 * สีเข้มของธีมบนพื้นเดียวกันให้ 11.4:1 — ป้ายเล็กยิ่งต้องการคอนทราสต์มาก ไม่ใช่น้อยลง */
.rxsu-archive__kind {
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  background: var(--rxsu-surface);
  color: var(--rxsu-text);
  font-size: 0.6875rem;
  font-weight: 600;
}
/* ป้ายนี้เคยเป็นสีแบรนด์เต็มบนพื้นสีแบรนด์ 16% ซึ่งวัดได้ 4.07:1 ที่ 11px
 * ตกเกณฑ์ AA (4.5:1) มาตลอด · ผสมกับสีเข้มของธีมเล็กน้อยได้ 4.87:1 โดยยังอ่านเป็น
 * สีเดียวกับที่ประกาศ "เปิดรับอยู่" ใช้ทั้งเว็บ — แก้ที่ความเข้ม ไม่ใช่เปลี่ยนสี */
.rxsu-archive__kind.is-open {
  background: color-mix(in srgb, var(--rxsu-secondary) 16%, #fff);
  color: color-mix(in srgb, var(--rxsu-secondary) 82%, var(--rxsu-text));
}

/* 3:2 ไม่ใช่ 4:3 — ภาพถ่ายกิจกรรมของคณะครึ่งหนึ่งเป็น 3:2 เป๊ะจากกล้อง
   กรอบนี้จึงแสดงมันทั้งใบโดยไม่ครอบ · และแกนที่ถูกครอบก็สำคัญ: กรอบ 4:3
   ครอบภาพ 3:2 ที่ด้านข้าง ส่วนการ์ดหน้าแรก 16:9 ครอบที่หัวและท้าย
   object-position จุดเดียวจึงต้องรับใช้สองแกนที่สวนทางกัน ค่าที่ผู้ดูแลตั้งไว้
   (X 49-52% แทบไม่ขยับ · Y 3-12% ดันขึ้นบน) บอกว่าเขาตั้งเพื่อหน้าแรก
   พอที่นี่เป็น 3:2 ภาพครึ่งหนึ่งไม่ถูกครอบเลย ค่านั้นจึงเหลือรับใช้หน้าแรกอย่างเดียว */
.rxsu-archive__thumb { aspect-ratio: 3 / 2; border-radius: 7px; overflow: hidden; background: var(--rxsu-surface); }
.rxsu-archive__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Category plates stand in for a missing photograph, so a run of announcements
   is distinguishable from a run of activities without reading a word. */
.rxsu-archive__plate { display: block; width: 100%; height: 100%; background: #e9eee4; }
.rxsu-archive__plate.is-recruitment-procurement { background: #dbebe6; }
.rxsu-archive__plate.is-procurement { background: #eef2e8; }

/* ── คอลัมน์กลาง: ทิ้งรางวันที่ ไม่ใช่ทิ้งรูป ────────────────────────────────
   ที่ความกว้างนี้รางวันที่กิน 84+24=108px · ถ้าเก็บสามคอลัมน์ไว้ คอลัมน์อ่าน
   จะต่ำกว่าเกณฑ์ พอย้ายวันที่มาเป็นบรรทัดเหนือหัวเรื่องก็กลับเข้าเกณฑ์
   วันที่จึงได้รางของตัวเองเฉพาะตอนที่มีที่ให้มันโดยไม่กินความยาวบรรทัด */
@container rxsu-stream (max-width: 46rem) {
  .rxsu-archive__item { grid-template-columns: minmax(0, 1fr) 26%; }
  .rxsu-archive__date {
    grid-column: 1; grid-row: 1;
    display: flex; align-items: baseline; gap: 0.4rem;
    padding-block-start: 0;
  }
  .rxsu-archive__date b { font-size: 1rem; line-height: 1.4; }
  .rxsu-archive__body { grid-column: 1; grid-row: 2; }
  .rxsu-archive__thumb { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
}

/* ── แคบสุด: รูปขึ้นบนสุดเต็มความกว้าง ──────────────────────────────────────
   ทางเลือกอีกทางคือรูปย่อข้างข้อความ ซึ่งวัดแล้วบีบคอลัมน์หัวเรื่องเหลือ 207px
   แคบกว่าของเดิม (273px) แลกกับรูปที่ยังเป็นแสตมป์อยู่ดี — แย่ลงทั้งสองอย่าง
   16:9 ไม่ใช่ 3:2 เพราะเต็มความกว้างจอแล้วความสูงคือสิ่งที่ต้องประหยัด */
@container rxsu-stream (max-width: 34rem) {
  .rxsu-archive__item { grid-template-columns: minmax(0, 1fr); row-gap: 0.6rem; }
  .rxsu-archive__thumb { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 9; }
  .rxsu-archive__date { grid-column: 1; grid-row: 2; }
  .rxsu-archive__body { grid-column: 1; grid-row: 3; }
  /* โปสเตอร์และเอกสาร A4 ที่ผู้ดูแลตั้ง contain ไว้เอง จะกลายเป็นแถบพื้นเปล่า
     ราว 60% เต็มความกว้างจอ · แถวที่ไม่มีรูปจริงก็ได้บล็อกสีเปล่าเช่นกัน
     สองกรณีนี้รูปไม่ได้ทำงาน จึงไม่ควรกินความสูงของจอ */
  .rxsu-archive__thumb:has(img[style*="object-fit:contain"]),
  .rxsu-archive__thumb:has(.rxsu-archive__plate) { display: none; }
}

/* Programmes are a grid, because every one of them has a poster. */
.rxsu-archive__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 60rem) { .rxsu-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) { .rxsu-archive__grid { grid-template-columns: minmax(0, 1fr); } }

.rxsu-archive__card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid var(--rxsu-border);
  border-radius: 12px;
  overflow: clip;
  color: inherit;
  text-decoration: none;
  transition: border-color 180ms cubic-bezier(.22,1,.36,1);
}
.rxsu-archive__card:hover,
.rxsu-archive__card:focus-within { border-color: var(--rxsu-primary); }
.rxsu-archive__card:hover .rxsu-archive__cardtitle,
.rxsu-archive__card:focus-within .rxsu-archive__cardtitle { color: var(--rxsu-secondary); }

.rxsu-archive__poster { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--rxsu-surface); }
.rxsu-archive__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }

.rxsu-archive__state {
  position: absolute;
  inset-block-start: 0.7rem;
  inset-inline-start: 0.7rem;
  padding: 0.16rem 0.55rem;
  border: 1px solid var(--rxsu-border);
  border-radius: 999px;
  background: #fbfcf9;
  color: var(--rxsu-muted);
  font-size: 0.6875rem;
  font-weight: 650;
}
.rxsu-archive__state.is-open { background: var(--rxsu-secondary); border-color: var(--rxsu-secondary); color: #fbfcf9; }
.rxsu-archive__state.is-closed { background: #fdf6e7; border-color: #e8d5ab; color: #8a5b1f; }

.rxsu-archive__cardbody { display: grid; gap: 0.5rem; align-content: start; padding: 0.95rem 1.05rem 0.5rem; }
.rxsu-archive__cardtitle { font-size: 0.9375rem; font-weight: 650; line-height: 1.6; }

.rxsu-archive__facts { display: grid; gap: 0.2rem; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--rxsu-muted); }
.rxsu-archive__facts li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.6rem; line-height: 1.6; }
.rxsu-archive__facts .v { font-variant-numeric: tabular-nums; }
.rxsu-archive__facts .v.is-urgent { color: #8a5b1f; font-weight: 650; }

.rxsu-archive__cardfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 1.05rem 0.9rem;
  color: var(--rxsu-secondary);
  font-size: 0.875rem;
  font-weight: 650;
}
.rxsu-archive__cardfoot .out { color: var(--rxsu-muted); font-size: 0.6875rem; font-weight: 500; }

.rxsu-archive__empty { margin: 2rem 0; color: var(--rxsu-muted); text-align: center; }

.rxsu-archive__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-block-start: 1.75rem;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.rxsu-archive__pager a,
.rxsu-archive__pager span {
  min-width: 2.1rem;
  padding: 0.3rem 0.6rem;
  border-radius: 7px;
  color: var(--rxsu-muted);
  text-align: center;
  text-decoration: none;
}
.rxsu-archive__pager a:hover { background: var(--rxsu-surface); color: var(--rxsu-secondary); }
.rxsu-archive__pager .is-current { background: #4f5528; color: #fbfcf9; font-weight: 650; }

/* ── The faculty motto ──────────────────────────────────────────────────────
   Placed by shortcode, usually in the footer. Both languages are in the DOM and
   the inactive one is hidden with the `hidden` attribute, so it is out of sight
   and out of the accessibility tree together - a translation plugin can then
   swap them after the page is cached without the wrong line ever being read
   aloud. */
.rxsu-tagline { margin: 0; color: var(--rxsu-primary); font-size: 1.0625rem; font-weight: 650; line-height: 1.75; letter-spacing: 0; }
.rxsu-tagline.is-center { text-align: center; }
.rxsu-tagline.is-right { text-align: right; }
.rxsu-tagline__line[hidden] { display: none; }

/* ── หน้ารวมประกาศรับสมัครงาน (0.135.0) ─────────────────────────────────────
   แถวข่าวใช้ภาพย่อ 16:9 เพราะภาพข่าวเป็นแนวนอน · โปสเตอร์รับสมัครงานเป็นแนวตั้ง
   ทุกใบ (4:5) กรอบแนวนอนจะครอบเนื้อทิ้ง จึงมีชุดกฎของตัวเองแทนการยืมแล้วฝืน */
.rxsu-jobs__group { margin-block-end: 34px; }
.rxsu-jobs__group-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.15rem; font-weight: 700; }
.rxsu-jobs__count { display: inline-grid; place-items: center; min-inline-size: 26px; padding: 1px 8px; border-radius: 999px; background: var(--rxsu-soft, #f3f6ef); color: var(--rxsu-muted, #5d6b5f); font-size: 0.8rem; font-weight: 700; }
.rxsu-jobs__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 16px 0; border-block-end: 1px solid var(--rxsu-rule, #e8eee4); }
.rxsu-jobs__row:last-child { border-block-end: 0; }
/* ไม่มีโปสเตอร์ก็ไม่เหลือคอลัมน์ว่าง — ประกาศเก่ายังไม่มีภาพเกือบทั้งหมด */
.rxsu-jobs__row:not(:has(.rxsu-jobs__poster)) { grid-template-columns: minmax(0, 1fr) auto; }
.rxsu-jobs__poster { display: block; inline-size: 96px; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--rxsu-rule, #e8eee4); border-radius: 8px; background: var(--rxsu-soft, #f3f6ef); }
.rxsu-jobs__poster img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top center; }
.rxsu-jobs__body { display: flex; flex-direction: column; gap: 4px; }
.rxsu-jobs__status { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--rxsu-soft, #f3f6ef); color: var(--rxsu-secondary, #007c72); font-size: 0.75rem; font-weight: 700; }
.rxsu-jobs__row.is-soon .rxsu-jobs__status { background: #fdf3dd; color: #8a5a00; }
.rxsu-jobs__row.is-closed .rxsu-jobs__status { background: #eceff1; color: #5c6670; }
.rxsu-jobs__row.is-closed { opacity: 0.72; }
.rxsu-jobs__title { font-size: 1.02rem; font-weight: 700; line-height: 1.45; text-decoration: none; }
.rxsu-jobs__title:hover, .rxsu-jobs__title:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.rxsu-jobs__facts, .rxsu-jobs__when { color: var(--rxsu-muted, #5d6b5f); font-size: 0.875rem; }
.rxsu-jobs__apply { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border: 1px solid var(--rxsu-secondary, #007c72); border-radius: 9px; background: var(--rxsu-secondary, #007c72); color: #fefefc !important; font-size: 0.875rem; font-weight: 700; text-decoration: none !important; white-space: nowrap; }
.rxsu-jobs__apply:hover, .rxsu-jobs__apply:focus-visible { background: var(--rxsu-primary, #315c52); border-color: var(--rxsu-primary, #315c52); }
@media (max-width: 600px) {
  /* ปุ่มสมัครลงมาอยู่ใต้เนื้อหา ไม่งั้นคอลัมน์กลางเหลือแคบจนชื่อตำแหน่งแตกบรรทัด */
  .rxsu-jobs__row { grid-template-columns: 76px minmax(0, 1fr); }
  .rxsu-jobs__row:not(:has(.rxsu-jobs__poster)) { grid-template-columns: minmax(0, 1fr); }
  .rxsu-jobs__poster { inline-size: 76px; }
  .rxsu-jobs__action { grid-column: 1 / -1; }
  .rxsu-jobs__apply { inline-size: 100%; }
}