/* Hallmark · macrostructure: Ecosystem Index · genre: editorial · tone: calm scholarly
 * theme: Institutional Quiet (light paper · roman-sans display · chromatic-olive accent)
 * enrichment: editor-supplied faculty photography · nav/footer: theme-owned, out of scope
 * pre-emit critique: P5 H5 E5 S4 R5 V4
 *
 * หน้าชีวิตนักศึกษา — สไตล์ของหน้าเว็บจริง
 *
 * ── สีมาจาก Elementor Global Colors ไม่ใช่เลขในไฟล์นี้ ──
 * PRODUCT.md ระบุ anti-reference ไว้ตรง ๆ ว่า "หลายสีที่ตั้งเองโดยไม่ผ่าน Elementor Global
 * Colors" · ทุกบทบาทที่คณะเป็นเจ้าของจึงอ่านจากตัวแปรของ Elementor พร้อมค่าที่วัดไว้เป็น
 * fallback แบบเดียวกับ home-page.css และ tokens.css ของหน้าหลักสูตร · วันที่มีคนเปลี่ยนสี
 * แบรนด์ใน Elementor หน้านี้เปลี่ยนตามเองโดยไม่ต้องออกปลั๊กอินรุ่นใหม่
 *
 * ── ไม่มีแถบเต็มความกว้าง และนั่นคือการตัดสินใจ ──
 * แบบที่ส่งมาวาดแถบพื้นหลังชนขอบจอบนเดสก์ท็อป · ทำได้ด้วย margin ติดลบ 50vw แต่ 100vw
 * นับรวมแถบเลื่อนแนวตั้งแบบคลาสสิกด้วย หน้าจึงเลื่อนออกข้างได้ ~15px ซึ่งเป็นข้อห้ามข้อแรก
 * ของงานจอเล็ก และเราไม่ได้เป็นเจ้าของคอนเทนเนอร์ที่ธีมวางเนื้อหาไว้ข้างใน · แถบทุกแถบจึง
 * เป็นพื้นผิวมุมมนที่อยู่ในกระแสปกติแทน ซึ่งเป็นสิ่งเดียวกับที่แบบ Tablet และ Mobile วาดไว้
 *
 * overflow-x: clip ที่รากยังอยู่เป็นหลักประกันชั้นสอง เผื่อวันหนึ่งมีลูกกว้างเกินหลุดมา ·
 * clip ไม่ใช่ hidden - hidden สร้าง scroll container ใหม่และทำให้ position: sticky ของธีมตาย
 */

:root {
  --rxsu-campus-primary: var(--e-global-color-primary, #7d8f6a);
  --rxsu-campus-secondary: var(--e-global-color-secondary, #007c72);
  --rxsu-campus-ink: var(--e-global-color-text, #263126);
  --rxsu-campus-canvas: var(--e-global-color-canvas-white, #fbfcf9);
  --rxsu-campus-surface: var(--e-global-color-9f80574, #e9eee4);
  --rxsu-campus-band: var(--e-global-color-96482ee, #f7f8f2);
  --rxsu-campus-deep: var(--e-global-color-9dc8f35, #4f5528);

  /* เฉพาะของหน้านี้ และตั้งใจไม่ให้เป็น Elementor global: โทนรองที่อยู่ระหว่างสีที่คณะ
   * เป็นเจ้าของ · เปลี่ยนที่นี่ไม่กระทบหน้าอื่น */
  --rxsu-campus-muted: #5f6b5c;
  --rxsu-campus-hairline: #dbe3d6;
  --rxsu-campus-paper: #ffffff;
  --rxsu-campus-ink-on-deep: #f2f6ec;
  --rxsu-campus-ink-on-deep-quiet: #cfdcbe;

  /* วงแหวนโฟกัสไม่ตามตัวแปรของ Elementor โดยตั้งใจ · ตัวบอกโฟกัสต้องคงคอนทราสต์ไว้ได้
   * ไม่ว่าวันหนึ่งใครจะเปลี่ยนสีแบรนด์เป็นอะไร */
  --rxsu-campus-focus: #007c72;

  --rxsu-campus-radius: 16px;
  --rxsu-campus-radius-sm: 8px;
  --rxsu-campus-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ดูเหตุผลในหมายเหตุหัวไฟล์ · clip ไม่ใช่ hidden */
html:has(.rxsu-campus),
body:has(.rxsu-campus) {
  overflow-x: clip;
}

.rxsu-campus {
  /* ── ความกว้างและระยะขอบของเนื้อหา ─────────────────────────────────────
   * 1140px คือความกว้างคอนเทนเนอร์ที่ Elementor ใช้ทั้งเว็บ (วัดจาก
   * --container-max-width บนหน้าจริง 9 ส.ค. 2569) · หน้านี้ต้องมีจังหวะเดียวกับหน้าอื่น
   * ไม่ใช่เลขที่ผมเลือกเอง
   *
   * ทำไมต้องคุมเอง: ตัวยึดแทนที่ the_content ของหน้า Elementor ซึ่งแปลว่ามาร์กอัปของเรา
   * ไปนั่งใน .elementor-558 ตรง ๆ · คอนเทนเนอร์ที่คุมความกว้างของ Elementor คือ
   * .e-con-inner ที่อยู่ "ข้างใน" แต่ละ section ของหน้าเดิม - พอเนื้อหาเดิมถูกแทนที่
   * กล่องพวกนั้นก็หายไปด้วย ไม่มีอะไรเหลือคุม เนื้อหาจึงชนขอบจอทั้งสองข้าง
   * (เจ้าของเว็บเห็นบนหน้าจริงหลังสลับ 0.97.0) */
  /* box-sizing ประกาศเองโดยตั้งใจ: ถ้าปล่อยให้ขึ้นกับ reset ของธีม ความกว้างเนื้อหาจริง
   * จะเป็น 1140 หรือ 1076 แล้วแต่ว่าหน้าที่มันไปอยู่ตั้ง border-box ไว้หรือไม่ · สูตรนี้
   * บวกระยะขอบเข้าไปในเพดานเอง เนื้อหาจึงกว้าง 1140 เป๊ะทุกกรณี */
  box-sizing: border-box;
  --rxsu-campus-edge: clamp(1rem, 4vw, 2rem);
  width: 100%;
  /* 1280 ไม่ใช่ 1140 ของ Elementor · เจ้าของเว็บดูหน้าจริงแล้วบอกว่าเนื้อหาเข้าไปเยอะ
   * เกิน (0.97.2) และหน้านี้มีแถบเลื่อนสามแถบที่ได้ประโยชน์จากที่กว้างขึ้นจริง - การ์ด
   * ต่อแถวเท่าเดิมแต่หายใจได้มากกว่า · หน้าอื่นยังเป็น 1140 ตามเดิม ไม่ถูกแตะ */
  max-width: calc(1280px + 2 * var(--rxsu-campus-edge));
  margin-inline: auto;
  padding-inline: var(--rxsu-campus-edge);
  --rxsu-campus-gutter: clamp(1rem, 4vw, 1.5rem);
  color: var(--rxsu-campus-ink);
  font-family: "LINE Seed Sans TH", "Noto Sans Thai", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  /* ตัวอักษรยาว ๆ ที่ไม่มีช่องว่าง (URL ที่ผู้ดูแลวาง) ต้องตัดในคำได้ ไม่ใช่ดันกล่องจนล้น */
  overflow-wrap: anywhere;
}

.rxsu-campus :where(h2, h3) {
  color: var(--rxsu-campus-ink);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.rxsu-campus :where(p, ul, ol) {
  margin: 0;
}

/* ── จุดหน้ารายการ ──────────────────────────────────────────────────────────
 * :where() มี specificity เป็น "ศูนย์" ตามสเปก · กฎเดิมจึงหนักแค่ .rxsu-campus (0,1,0)
 * และแพ้กฎ li ของธีมที่มีคลาสนำหน้า · ผลคือจุดของธีมโผล่หน้าทุกการ์ดในแผงทางลัดและ
 * หน้าปุ่มโซเชียล (เจ้าของเว็บเห็นบนหน้าจริง 0.97.2)
 *
 * รีเซ็ตที่ li ตรง ๆ ด้วย เพราะ marker เกิดที่ li ไม่ใช่ที่ ul · ::marker กับ ::before
 * ปิดทั้งคู่ เพราะธีมใช้คนละวิธีกันในแต่ละที่ · จุดที่หน้านี้วาดเองมีคลาสกำกับ จึงหนักกว่า
 * และรอดมาได้ (ดู .rxsu-campus__note-points li::before)
 *
 * ── ทำไม padding ถึงถูกยกออกจากบรรทัด li (0.98.1) ──
 * รุ่น 0.97.5 เขียน `padding: 0` ไว้ที่ `.rxsu-campus li` ด้วย ซึ่งหนัก (0,1,1) และทับ
 * `.rxsu-campus__service` กับ `.rxsu-campus__follow-org` ที่หนักแค่ (0,1,0) — การ์ดสองใบนั้น
 * เป็น <li> จึงเสีย padding ที่เพิ่งเพิ่มให้ในรุ่นเดียวกันนั้นเอง เนื้อหาเลยไปชิดขอบกล่อง
 * (เจ้าของเว็บเห็นบนหน้า preview) · การ์ดใบอื่นเป็น <article>/<figure> จึงไม่โดน ซึ่งเป็น
 * เหตุผลที่มันดูเหมือนพังแค่บางที่
 *
 * ระยะเยื้อง 40px ที่รีเซ็ตนี้เกิดมาเพื่อลบ อยู่ที่ ul/ol ตามค่าตั้งต้นของเบราว์เซอร์ ไม่ใช่
 * ที่ li · การถอด padding ออกจากบรรทัด li จึงไม่ได้ทำให้เยื้องกลับมา */
.rxsu-campus ul,
.rxsu-campus ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rxsu-campus li {
  list-style: none;
  margin: 0;
}

.rxsu-campus li::marker {
  content: "";
}

.rxsu-campus li::before {
  content: none;
}

.rxsu-campus :where(a) {
  color: inherit;
}

.rxsu-campus :where(a):focus-visible,
.rxsu-campus :where(button):focus-visible {
  /* ปรากฏทันที ไม่มี transition · วงแหวนที่ค่อย ๆ โผล่คือวงแหวนที่มาช้ากว่าสายตา */
  outline: 2px solid var(--rxsu-campus-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.rxsu-campus img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── ปุ่ม ─────────────────────────────────────────────────────────────────── */

.rxsu-campus__cta,
.rxsu-campus__more,
.rxsu-campus__service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* ทุกเป้าที่กดได้สูงอย่างน้อย 44px ตามที่ PRODUCT.md กำหนดไว้ */
  min-height: 44px;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.4;
}

.rxsu-campus__cta {
  background: var(--rxsu-campus-deep);
  color: var(--rxsu-campus-ink-on-deep);
  padding: 0.625rem 1.5rem;
  border-radius: 999px;
  transition: background-color 180ms var(--rxsu-campus-ease), transform 180ms var(--rxsu-campus-ease);
}

.rxsu-campus__cta:hover {
  background: color-mix(in oklab, var(--rxsu-campus-deep) 88%, black);
  transform: translateY(-1px);
}

.rxsu-campus__cta.is-outline {
  background: transparent;
  color: var(--rxsu-campus-ink);
  border: 1px solid var(--rxsu-campus-primary);
  padding: 0.5rem 1.25rem;
}

.rxsu-campus__cta.is-outline:hover {
  background: var(--rxsu-campus-surface);
  transform: none;
}

/* "ดูทั้งหมด" เป็นปุ่มขอบมนตามแบบ ไม่ใช่ลิงก์ขีดเส้นใต้ · มันเป็นทางออกจากส่วนนี้ไปยัง
 * หน้ารวม ซึ่งเป็นการกระทำระดับเดียวกับปุ่มใน Hero ไม่ใช่ลิงก์ในเนื้อความ */
.rxsu-campus__more {
  color: var(--rxsu-campus-ink);
  border: 1px solid var(--rxsu-campus-primary);
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
  transition: background-color 180ms var(--rxsu-campus-ease);
}

.rxsu-campus__more:hover {
  background: var(--rxsu-campus-surface);
}

/* ส่วน "รายละเอียด" ในการ์ดบริการยังเป็นลิงก์ในเนื้อความ · การ์ดสี่ใบที่มีปุ่มขอบมนสี่ปุ่ม
 * เรียงกันจะแย่งน้ำหนักกับปุ่มจริงของหน้า และแบบก็วาดไว้เป็นลิงก์ */
.rxsu-campus__service-link {
  color: var(--rxsu-campus-secondary);
  border-block-end: 1px solid transparent;
  transition: border-color 180ms var(--rxsu-campus-ease);
}

.rxsu-campus__service-link:hover {
  border-block-end-color: currentColor;
}

.rxsu-campus__chevron {
  flex: none;
}

/* ── 1. Hero ──────────────────────────────────────────────────────────────── */

.rxsu-campus__hero {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
  background: var(--rxsu-campus-band);
  border-radius: var(--rxsu-campus-radius);
  /* ภาพวิ่งชนขอบขวาของแถบ · กล่องที่ตัดภาพต้องซ่อนส่วนที่ล้นออกไป ไม่งั้นมุมมนหายไปด้วย */
  overflow: hidden;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  /* ที่ว่างท้าย Hero เผื่อไว้ให้แผงทางลัดซ้อนขึ้นมาทับได้โดยไม่บังข้อความ · ตัวเลขนี้กับ
   * margin ติดลบของแผงเป็นคู่กัน แก้ทีละข้างแล้วแผงจะไปทับย่อหน้าเปิด */
  padding-block-end: clamp(2.5rem, 7vw, 5.5rem);
}

@media (min-width: 60rem) {
  .rxsu-campus__hero {
    /* minmax(0, …) ไม่ใช่ 1fr เปล่า · แทร็กที่มีภาพอยู่ข้างในจะไม่ยอมหดต่ำกว่าภาพถ้าไม่
     * บอกว่าหดได้ แล้วกริดทั้งแถวจะกว้างเกินพ่อของมัน */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    /* ── ภาพวิ่งชนขอบ (0.100.0) ──────────────────────────────────────────
     * แบบที่เจ้าของเว็บส่งมาไม่มีกรอบรอบภาพ · ภาพเริ่มจากกลางแถบแล้ววิ่งออกไปชนขอบขวา
     * และขอบบน-ล่าง · การไล่ระยะขอบของแถบให้เป็นศูนย์เฉพาะฝั่งขวาคือสิ่งที่ทำให้มันเป็น
     * "พื้นที่ที่แบ่งกัน" แทนที่จะเป็น "กล่องสองใบวางข้างกัน" */
    padding-inline-end: 0;
    padding-block-start: 0;
    align-items: stretch;
  }

  .rxsu-campus__hero-copy {
    /* คืนระยะขอบบนให้เฉพาะฝั่งข้อความ เพราะฝั่งภาพเป็นคนเอาออก */
    padding-block: clamp(2rem, 5vw, 3.5rem) 0;
    justify-content: center;
  }

  .rxsu-campus__hero.is-textonly {
    grid-template-columns: minmax(0, min(60ch, 100%));
    padding-inline-end: clamp(1.5rem, 5vw, 3.5rem);
    padding-block-start: clamp(1.5rem, 5vw, 3.5rem);
  }
}

.rxsu-campus__hero-copy {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-width: 0;
}

.rxsu-campus__hero-title {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  line-height: 1.15;
}

.rxsu-campus__hero-tagline {
  color: var(--rxsu-campus-secondary);
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
  font-style: italic;
  font-weight: 600;
}

.rxsu-campus__hero-lede {
  color: var(--rxsu-campus-muted);
  max-width: 62ch;
}

.rxsu-campus__hero-action {
  margin-block-start: 0.5rem;
}

/* ── ภาพ Hero ─────────────────────────────────────────────────────────────
 * บนจอแคบยังเป็นภาพมุมมนธรรมดา เพราะการตัดเฉียงบนความกว้างเท่าคอลัมน์เดียวกินเนื้อภาพ
 * ไปมากจนเหลือแต่ริ้ว · ลูกเล่นทั้งหมดเปิดที่ 60rem ขึ้นไปพร้อมกับกริดสองคอลัมน์ */
.rxsu-campus__hero-figure {
  position: relative;
  min-width: 0;
  border-radius: var(--rxsu-campus-radius);
  overflow: hidden;
}

.rxsu-campus__hero-frame {
  display: block;
}

/* ลายจุด — ของประดับที่พาสายตาจากข้อความไปหาภาพ · ไม่มีความหมาย จึง aria-hidden ที่มาร์กอัป
 * ไม่ทับตัวอักษรใด ๆ เพราะมันนั่งอยู่บนแทร็กของภาพเท่านั้น */
.rxsu-campus__hero-dots {
  display: none;
}

@media (min-width: 60rem) {
  .rxsu-campus__hero-figure {
    /* ยืดกลับออกไปกินระยะขอบบน-ล่างของแถบ · ตัวเลขต้องเป็นชุดเดียวกับ padding ของแถบ
     * ไม่งั้นจะเหลือเส้นพื้นหลังบาง ๆ คั่นอยู่ที่มุม ซึ่งอ่านเหมือนภาพวางไม่ตรง */
    margin-block: 0 calc(-1 * clamp(2.5rem, 7vw, 5.5rem));
    border-radius: 0;
    overflow: visible;
  }

  .rxsu-campus__hero-frame {
    height: 100%;
    /* ขอบซ้ายเฉียงเล็กน้อย · 4% ของความกว้าง ไม่ใช่องศาตายตัว เพื่อให้ความชันคงที่
     * เมื่อเทียบกับตัวภาพในทุกความกว้างจอ */
    clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%);
  }

  .rxsu-campus__hero-frame img {
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }

  .rxsu-campus__hero-dots {
    display: block;
    position: absolute;
    z-index: 1;
    inset-block-start: clamp(1.5rem, 4vw, 2.75rem);
    inset-inline-start: clamp(1rem, 3vw, 2.25rem);
    width: clamp(3.5rem, 7vw, 5.5rem);
    height: clamp(2.5rem, 5vw, 3.75rem);
    background-image: radial-gradient(currentColor 1.5px, transparent 1.6px);
    background-size: 12px 12px;
    color: var(--rxsu-campus-paper);
    opacity: 0.75;
    pointer-events: none;
  }
}

.rxsu-campus__hero-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ── 2. ทางลัด ────────────────────────────────────────────────────────────── */

.rxsu-campus__shortcuts {
  background: var(--rxsu-campus-paper);
  border: 1px solid var(--rxsu-campus-hairline);
  border-radius: var(--rxsu-campus-radius);
  /* เงาเดียวบาง ๆ · แผงนี้ลอยอยู่เหนือ Hero ในแบบ และความสูงนั้นคือสิ่งที่เงาบอก */
  box-shadow: 0 10px 28px rgba(38, 49, 38, 0.06);
  /* ซ้อนขึ้นไปทับ Hero ตามแบบ · จอกว้างทับมาก จอแคบทับน้อย เพราะบนจอแคบแผงสูงกว่า
   * และการทับมากจะดันเนื้อหาที่เหลือชนกัน */
  margin-block-start: clamp(-7rem, -9vw, -1.5rem);
  position: relative;
  z-index: 1;
}

.rxsu-campus__shortcuts > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ── เส้นคั่นระหว่างช่อง (0.100.0) ────────────────────────────────────────
 * แบบที่เจ้าของเว็บส่งมาคั่นช่องด้วยเส้นบาง ๆ ไม่ใช่ช่องไฟ · วาดด้วยเส้นขอบของช่องเอง
 * ไม่ใช่ gap + พื้นหลัง เพราะ gap ทำให้พื้นที่กดได้ของแต่ละช่องขาดจากกัน และเส้นจะไม่ชน
 * ขอบบน-ล่างของแผง
 *
 * สำนวนเดียวกันทุกเบรกพอยต์: ให้เส้นทุกช่อง แล้วลบของช่องแรกในแต่ละแถว · จำนวนคอลัมน์
 * เปลี่ยนสามครั้งในไฟล์นี้ ตัวเลขใน nth-child จึงต้องเปลี่ยนตามทั้งสามที่ ไม่งั้นจะมีเส้น
 * ลอยอยู่ที่ขอบซ้ายของแผงในบางความกว้าง */
.rxsu-campus__shortcut {
  border-inline-start: 1px solid var(--rxsu-campus-hairline);
}

.rxsu-campus__shortcut:nth-child(2n + 1) {
  border-inline-start: 0;
}

.rxsu-campus__shortcut > a,
.rxsu-campus__shortcut-inert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1rem, 2vw, 1.25rem);
  min-height: 44px;
  height: 100%;
  text-decoration: none;
  transition: background-color 180ms var(--rxsu-campus-ease);
}

.rxsu-campus__shortcut > a:hover {
  background: var(--rxsu-campus-band);
}

/* ที่ยังไม่ได้ใส่ลิงก์ต้องดูต่างจากที่กดได้ ไม่ใช่ดูเหมือนกันแล้วกดไม่ติด */
.rxsu-campus__shortcut-inert {
  color: var(--rxsu-campus-muted);
  cursor: default;
}

.rxsu-campus__shortcut-icon {
  color: var(--rxsu-campus-deep);
  display: inline-flex;
}

.rxsu-campus__shortcut-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.rxsu-campus__shortcut-label {
  font-weight: 600;
  line-height: 1.35;
}

.rxsu-campus__shortcut-note {
  color: var(--rxsu-campus-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* เส้นคั่นเป็นเส้นผมเดียว ไม่ใช่กรอบรอบทุกช่อง · การ์ดซ้อนการ์ดคือสิ่งที่ PRODUCT.md
 * ห้ามไว้ตรง ๆ และแผงนี้เป็นการ์ดอยู่แล้วหนึ่งใบ */
.rxsu-campus__shortcut:nth-child(n + 3) {
  border-block-start: 1px solid var(--rxsu-campus-hairline);
}

@media (min-width: 46rem) {
  .rxsu-campus__shortcuts > ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rxsu-campus__shortcut:nth-child(n + 3) {
    border-block-start: 0;
  }

  .rxsu-campus__shortcut:nth-child(n + 4) {
    border-block-start: 1px solid var(--rxsu-campus-hairline);
  }

  .rxsu-campus__shortcut {
    border-inline-start: 1px solid var(--rxsu-campus-hairline);
  }

  .rxsu-campus__shortcut:nth-child(3n + 1) {
    border-inline-start: 0;
  }
}

@media (min-width: 68rem) {
  .rxsu-campus__shortcuts > ul {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .rxsu-campus__shortcut:nth-child(n + 4) {
    border-block-start: 0;
  }

  .rxsu-campus__shortcut:nth-child(n + 7) {
    border-block-start: 1px solid var(--rxsu-campus-hairline);
  }

  .rxsu-campus__shortcut {
    border-inline-start: 1px solid var(--rxsu-campus-hairline);
  }

  .rxsu-campus__shortcut:nth-child(6n + 1) {
    border-inline-start: 0;
  }
}

/* ── หัวแถบที่ใช้ร่วมกัน ──────────────────────────────────────────────────── */

.rxsu-campus__band {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.rxsu-campus__band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.rxsu-campus__band-copy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 20rem;
}

.rxsu-campus__band-copy h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
}

.rxsu-campus__band-summary {
  color: var(--rxsu-campus-muted);
  max-width: 62ch;
}

/* ── 3. การ์ดกิจกรรม + 6. แถบภาพ (แถบเลื่อนร่วมกัน) ──────────────────────── */

/* บนจอกว้าง คอลัมน์เกริ่นย้ายไปอยู่ซ้ายของแถบเลื่อน ตามแบบ Desktop ที่ส่งมา · เป็นท่าที่
 * ทำให้หน้านี้ไม่ใช่กองบล็อกที่ซ้อนกันลงมาเฉย ๆ และเป็นสิ่งที่แบบ Tablet/Mobile ยอมสละ
 * ไปเองเมื่อที่ไม่พอ - ที่นี่จึงสลับกลับเป็นหัวแถบแนวนอนตั้งแต่ต่ำกว่า 68rem ลงมา */
@media (min-width: 68rem) {
  .rxsu-campus__activities,
  .rxsu-campus__gallery {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: start;
  }

  .rxsu-campus__activities > .rxsu-campus__band-head,
  .rxsu-campus__gallery > .rxsu-campus__band-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .rxsu-campus__activities > .rxsu-campus__band-head .rxsu-campus__band-copy,
  .rxsu-campus__gallery > .rxsu-campus__band-head .rxsu-campus__band-copy {
    flex: 0 1 auto;
  }
}

.rxsu-campus__scroller {
  position: relative;
  min-width: 0;
}

.rxsu-campus__cards,
.rxsu-campus__frames {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* พื้นที่ให้วงแหวนโฟกัสของใบแรก/ใบสุดท้ายไม่ถูกตัด */
  padding: 0.25rem;
  margin: -0.25rem;
  /* ต้องเท่ากับ padding ด้านข้าง · ไม่มีบรรทัดนี้ เบราว์เซอร์จะ snap ใบแรกโดยเลื่อนแถบ
   * ไป 4px ตั้งแต่โหลดเสร็จ แล้วปุ่ม "ก่อนหน้า" จะไม่ถูกปิดทั้งที่อยู่ต้นแถบแล้ว - ปุ่มที่
   * กดได้แต่ไม่มีอะไรเกิดขึ้น ซึ่งเป็นสิ่งที่โปรเจกต์นี้จ่ายค่าเรียนไปแล้วสองครั้ง */
  scroll-padding-inline: 0.25rem;
  /* ซ่อนแถบเลื่อน · แถบเทา ๆ ใต้การ์ดเป็นของเบราว์เซอร์ ไม่ใช่ของดีไซน์ และเจ้าของเว็บ
   * เห็นแล้วบอกให้เอาออก (0.97.2) · การเลื่อนยังทำได้ครบทุกทาง: ปัดนิ้ว · ลากเมาส์
   * (campus-life.js) · ปุ่มลูกศร · แป้นพิมพ์เมื่อโฟกัสอยู่ในแถบ · ล้อ shift+scroll
   * ไม่ได้ตัดทางเข้าถึงทางไหนออกไป แค่ไม่วาดรางเทา */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rxsu-campus__cards::-webkit-scrollbar,
.rxsu-campus__frames::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .rxsu-campus__cards,
  .rxsu-campus__frames {
    scroll-behavior: auto;
  }
}

/* ลากด้วยเมาส์ได้ · ระหว่างลากปิดการเลือกข้อความและ snap ไว้ ไม่งั้นเบราว์เซอร์จะแย่ง
 * ดึงกลับเข้าจุด snap ทุกครั้งที่ปล่อยนิ้วกลางทาง และตัวหนังสือจะถูกไฮไลต์ไปด้วย */
.rxsu-campus__scroller.is-dragging .rxsu-campus__cards,
.rxsu-campus__scroller.is-dragging .rxsu-campus__frames {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}

.rxsu-campus__card {
  flex: 0 0 min(100%, 20rem);
  scroll-snap-align: start;
}

@media (min-width: 46rem) {
  .rxsu-campus__card {
    flex-basis: min(48%, 22rem);
  }
}

@media (min-width: 68rem) {
  .rxsu-campus__card {
    /* สามใบพอดีคอลัมน์ขวา · เศษของช่องไฟสองช่องถูกหักออกก่อนหาร ไม่งั้นใบที่สามจะล้น
     * ออกไปหนึ่งช่องไฟ แล้วปุ่มเลื่อนจะโผล่มาทั้งที่ตั้งใจให้พอดี */
    flex-basis: calc((100% - 2 * clamp(0.75rem, 2vw, 1.25rem)) / 3);
  }

  .rxsu-campus__frame {
    flex-basis: calc((100% - 3 * clamp(0.75rem, 2vw, 1.25rem)) / 4);
  }
}

.rxsu-campus__card > a,
.rxsu-campus__card-inert {
  position: relative;
  display: block;
  height: 100%;
  border-radius: var(--rxsu-campus-radius);
  overflow: hidden;
  background: var(--rxsu-campus-surface);
  text-decoration: none;
  isolation: isolate;
}

.rxsu-campus__card-media {
  display: block;
  position: relative;
}

.rxsu-campus__card-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 240ms var(--rxsu-campus-ease);
}

.rxsu-campus__card > a:hover .rxsu-campus__card-media img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .rxsu-campus__card-media img,
  .rxsu-campus__cta {
    transition: none;
  }

  .rxsu-campus__card > a:hover .rxsu-campus__card-media img,
  .rxsu-campus__cta:hover {
    transform: none;
  }
}

/* ป้ายวันที่ · สองน้ำหนัก ไม่ใช่สองสี */
.rxsu-campus__plate {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.25rem;
  padding: 0.375rem 0.5rem;
  background: var(--rxsu-campus-paper);
  border-radius: var(--rxsu-campus-radius-sm);
  color: var(--rxsu-campus-ink);
  line-height: 1.1;
}

.rxsu-campus__plate-day {
  font-size: 1.25rem;
  font-weight: 700;
}

.rxsu-campus__plate-month {
  font-size: 0.6875rem;
  color: var(--rxsu-campus-muted);
}

.rxsu-campus__card-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: clamp(1rem, 2vw, 1.25rem);
  background: var(--rxsu-campus-surface);
}

/* การ์ดที่มีภาพวางข้อความทับบนไล่เฉด แบบเดียวกับที่แบบส่งมา · การ์ดที่ยังไม่มีภาพใช้พื้น
 * เรียบของการ์ดแทน ไม่ใช่ไล่เฉดที่ไล่จากความว่างเปล่า */
.rxsu-campus__card.has-media .rxsu-campus__card-body {
  margin-block-start: -3.75rem;
  position: relative;
  background: linear-gradient(to top, rgba(28, 35, 27, 0.94) 58%, rgba(28, 35, 27, 0));
  color: #f3f7ef;
}

.rxsu-campus__card.has-media .rxsu-campus__card-kind {
  color: var(--rxsu-campus-ink-on-deep-quiet);
}

.rxsu-campus__card-title {
  font-weight: 600;
  line-height: 1.4;
}

.rxsu-campus__card-kind {
  font-size: 0.8125rem;
  color: var(--rxsu-campus-muted);
}

/* ปุ่มลูกศรที่ campus-life.js เติมให้ · ไม่มี JavaScript ก็ยังปัดแถบได้ตามปกติ */
.rxsu-campus__nav {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-block-start: 0.75rem;
}

/* display: flex ชนะ `[hidden] { display: none }` ของเบราว์เซอร์เสมอ เพราะเป็นกฎของผู้เขียน
 * ไม่ใช่ของ user agent · ไม่มีบรรทัดนี้ สคริปต์จะตั้ง nav.hidden = true ได้สำเร็จทุกครั้ง
 * แต่ปุ่มยังอยู่บนหน้าจอ - และข้อสอบที่ถามว่า `nav.hidden === true` ก็ยังเขียว
 * วัดจากเบราว์เซอร์จริงที่ 1440px: การ์ดสามใบพอดีคอลัมน์ (max = 0) แต่ปุ่มยังโผล่ */
.rxsu-campus__nav[hidden] {
  display: none;
}

.rxsu-campus__nav button {
  inline-size: 44px;
  block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rxsu-campus-hairline);
  border-radius: 999px;
  background: var(--rxsu-campus-paper);
  color: var(--rxsu-campus-ink);
  cursor: pointer;
  transition: background-color 180ms var(--rxsu-campus-ease);
}

.rxsu-campus__nav button:hover:not(:disabled) {
  background: var(--rxsu-campus-band);
}

.rxsu-campus__nav button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── 4. บล็อกเนื้อหาเพิ่ม ─────────────────────────────────────────────────── */

.rxsu-campus__notes {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 60rem) {
  .rxsu-campus__notes {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  }
}

.rxsu-campus__note {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: var(--rxsu-campus-band);
  border-radius: var(--rxsu-campus-radius);
  min-width: 0;
}

.rxsu-campus__note-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.125rem;
}

.rxsu-campus__note-icon {
  color: var(--rxsu-campus-deep);
  display: inline-flex;
  flex: none;
}

.rxsu-campus__note p {
  color: var(--rxsu-campus-muted);
}

.rxsu-campus__note-points {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.rxsu-campus__note-points li {
  padding-inline-start: 1rem;
  position: relative;
  color: var(--rxsu-campus-muted);
}

.rxsu-campus__note-points li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.6875rem;
  inset-inline-start: 0;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--rxsu-campus-primary);
}

.rxsu-campus__note-points strong {
  color: var(--rxsu-campus-ink);
}

/* ── 5. การ์ดบริการ ─────────────────────────────────────────────────────────
 * ระยะขอบในการ์ดทุกใบของหน้านี้ถูกเพิ่มใน 0.97.5 · เจ้าของเว็บดูหน้าจริงแล้วบอกว่า
 * เนื้อหาชิดขอบการ์ดเกินไป · ค่าเดิม (1.125–1.5rem) มาจากตอนที่หน้ากว้าง 1140 และ
 * การ์ดแคบกว่านี้ พอขยายเป็น 1280 การ์ดกว้างขึ้นแต่ระยะขอบเท่าเดิม สัดส่วนจึงเพี้ยน */

.rxsu-campus__service-grid {
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.rxsu-campus .rxsu-campus__service {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--rxsu-campus-paper);
  border: 1px solid var(--rxsu-campus-hairline);
  border-radius: var(--rxsu-campus-radius);
  min-width: 0;
}

.rxsu-campus__service-icon {
  color: var(--rxsu-campus-deep);
  display: inline-flex;
}

.rxsu-campus__service-title {
  font-size: 1.0625rem;
}

.rxsu-campus__service-body {
  color: var(--rxsu-campus-muted);
  font-size: 0.9375rem;
  flex: 1 1 auto;
}

.rxsu-campus__service-link {
  align-self: flex-start;
  font-size: 0.9375rem;
}

/* ── 6. แถบภาพ ────────────────────────────────────────────────────────────── */

.rxsu-campus__frame {
  flex: 0 0 min(80%, 18rem);
  scroll-snap-align: start;
  position: relative;
  border-radius: var(--rxsu-campus-radius);
  overflow: hidden;
  min-width: 0;
}

@media (min-width: 46rem) {
  .rxsu-campus__frame {
    flex-basis: min(38%, 16rem);
  }
}

.rxsu-campus__frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.rxsu-campus__frame-caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 1.75rem 0.75rem 0.625rem;
  font-size: 0.8125rem;
  color: #f3f7ef;
  background: linear-gradient(to top, rgba(31, 38, 30, 0.85), rgba(31, 38, 30, 0));
}

/* ── 7. ศิษย์เก่า ─────────────────────────────────────────────────────────── */

.rxsu-campus__alumni {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}

@media (min-width: 60rem) {
  .rxsu-campus__alumni {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

.rxsu-campus__alumni-copy {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.rxsu-campus__alumni-copy h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
}

.rxsu-campus__alumni-proof {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  min-width: 0;
}

.rxsu-campus__quote {
  margin: 0;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: var(--rxsu-campus-band);
  border-radius: var(--rxsu-campus-radius);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rxsu-campus__quote blockquote {
  margin: 0;
  font-style: italic;
  color: var(--rxsu-campus-ink);
}

/* ── เครื่องหมายคำพูด (0.99.0) ────────────────────────────────────────────
 * รุ่นก่อนวาง “ ตัวใหญ่ไว้มุมบนซ้ายด้วย ::before แบบ absolute และไม่มีตัวปิด · เจ้าของเว็บ
 * อ่านแล้วเห็นเป็น "เครื่องหมายหายไปหนึ่งอัน" ซึ่งถูก - เครื่องหมายคำพูดมาเป็นคู่ในความ
 * รู้สึกของผู้อ่าน ไม่ใช่ลายประดับที่ลอยอยู่คนละที่กับข้อความ
 *
 * ตอนนี้ตัวอักขระอยู่ในมาร์กอัป (ดู alumni_quotes ในตัวเรนเดอร์) ไหลไปกับข้อความจริง ·
 * ที่นี่เหลือแค่การให้น้ำหนักสายตา ไม่ได้เป็นคนสร้างตัวอักขระ - เนื้อหาที่มีความหมายไม่ควร
 * อยู่ในสไตล์ชีต ซึ่งหายไปทั้งหมดเมื่อผู้อ่านพิมพ์หน้าหรือคัดลอกข้อความไปวาง */
.rxsu-campus__quote-mark {
  color: var(--rxsu-campus-primary);
  font-size: 1.375em;
  font-style: normal;
  line-height: 0;
  /* ให้เครื่องหมายนั่งเสมอกับเส้นฐานของข้อความ ไม่ใช่ดันบรรทัดแรกให้สูงกว่าบรรทัดอื่น */
  vertical-align: -0.15em;
}

.rxsu-campus__quote figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* รูปบุคคลเป็นวงกลมเล็ก ไม่ใช่ภาพประกอบ · ขนาดคงที่เพื่อให้ทุกใบในรางสูงเท่ากัน */
.rxsu-campus__quote-portrait img {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
}

.rxsu-campus__quote-who {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.rxsu-campus__quote-link {
  margin: 0;
}

/* ── ราง "เสียงจากศิษย์เก่า" ────────────────────────────────────────────
 * เสียงเดียวไม่ต้องมีราง (is-single) เพราะปุ่มเลื่อนที่เลื่อนไปไหนไม่ได้คือปุ่มที่หลอกคนกด ·
 * หลายเสียงใช้แบบแผนเดียวกับอีกสามรางในหน้านี้ทุกข้อ */
.rxsu-campus__quotes {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* ต้องเท่ากับ padding ของราง ไม่งั้น scroll-snap ทำให้ใบแรกเยื้องตั้งแต่เปิดหน้า */
  scroll-padding-inline: 0.25rem;
  padding: 0.25rem;
  scrollbar-width: none;
}

.rxsu-campus__quotes::-webkit-scrollbar {
  display: none;
}

.rxsu-campus__quotes.is-single {
  display: block;
  overflow: visible;
  padding: 0;
}

.rxsu-campus__quote-item {
  flex: 0 0 min(100%, 30rem);
  scroll-snap-align: start;
  display: flex;
}

.rxsu-campus__quotes.is-single .rxsu-campus__quote-item {
  display: block;
}

.rxsu-campus .rxsu-campus__quote {
  flex: 1 1 auto;
}

.rxsu-campus__quote-name {
  font-weight: 600;
}

.rxsu-campus__quote-role {
  color: var(--rxsu-campus-muted);
  font-size: 0.875rem;
}

.rxsu-campus__alumni-figures {
  display: grid;
  gap: clamp(0.75rem, 2vw, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.rxsu-campus__alumni-figures li {
  min-width: 0;
  border-radius: var(--rxsu-campus-radius);
  overflow: hidden;
}

.rxsu-campus__alumni-figures img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ── 8. แถบติดตาม ─────────────────────────────────────────────────────────── */

/* 0.97.0: พื้นสว่าง ไม่ใช่เข้ม · footer ของธีมที่อยู่ถัดลงไปเป็นสีเขียวเข้ม และแถบเข้ม
 * สองแถบซ้อนกันคือการกลบ footer ตามที่เจ้าของเว็บชี้บนหน้าจริง · จุดจบสีเข้มของหน้า
 * มีจุดเดียวคือ footer จริง */
.rxsu-campus__follow {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--rxsu-campus-band);
  border: 1px solid var(--rxsu-campus-hairline);
  border-radius: var(--rxsu-campus-radius);
  color: var(--rxsu-campus-ink);
}

.rxsu-campus__follow-copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.rxsu-campus__follow-copy h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
}

.rxsu-campus__follow-copy p {
  color: var(--rxsu-campus-muted);
  font-size: 0.9375rem;
}

.rxsu-campus__follow-orgs {
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.rxsu-campus .rxsu-campus__follow-org {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--rxsu-campus-paper);
  border: 1px solid var(--rxsu-campus-hairline);
  border-radius: var(--rxsu-campus-radius);
  min-width: 0;
}

.rxsu-campus__follow-org-copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.rxsu-campus__follow-org-copy h3 {
  font-size: 1.0625rem;
}

.rxsu-campus__follow-org-copy p {
  color: var(--rxsu-campus-muted);
  font-size: 0.875rem;
}

.rxsu-campus__follow-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ไม่มีวงรีครอบ · โลโก้แพลตฟอร์มเป็นรูปทรงที่คนจำได้อยู่แล้ว การเอากรอบมาครอบอีกชั้น
 * คือกรอบซ้อนกรอบ (การ์ดองค์กรเป็นกรอบอยู่แล้วหนึ่งชั้น) และเป็นสิ่งที่เจ้าของเว็บบอกให้
 * เอาออก (0.97.2) · เป้าที่กดได้ยังสูง 44px เท่าเดิม แค่ไม่มีเส้น */
.rxsu-campus__follow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.25rem 0.25rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--rxsu-campus-ink);
  /* ป้ายอยู่บรรทัดเดียวเสมอ · ป้ายสองบรรทัดในเป้าที่กดได้เป็นข้อห้ามของงานจอเล็ก */
  white-space: nowrap;
  transition: color 180ms var(--rxsu-campus-ease);
}

.rxsu-campus__follow-pill:hover {
  color: var(--rxsu-campus-secondary);
}

/* มาร์กแพลตฟอร์มวางบนพื้นของ pill ตรง ๆ ไม่มีวงกลมหรือกระเบื้องรอง ตามที่ DESIGN.md
 * กำหนดไว้สำหรับ Social Navigation Component · ขนาดเท่าตัวอักษรสองบรรทัดพอดี ไม่ใหญ่
 * จนแย่งชื่อ ซึ่งเป็นสิ่งที่บอกปลายทางจริง */
.rxsu-campus__follow-mark {
  display: inline-flex;
  flex: none;
}

.rxsu-campus__follow-mark img {
  inline-size: 28px;
  block-size: 28px;
  object-fit: contain;
}

.rxsu-campus__follow-links {
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

/* ── การ์ดเรื่องราวศิษย์เก่า (carousel เลื่อนวน) ─────────────────────────── */

.rxsu-campus__card.is-story {
  flex-basis: min(75%, 15rem);
}

@media (min-width: 46rem) {
  .rxsu-campus__card.is-story {
    flex-basis: min(45%, 15rem);
  }
}

.rxsu-campus__card.is-story .rxsu-campus__card-media img {
  aspect-ratio: 1 / 1;
}

.rxsu-campus__card.is-story.has-media .rxsu-campus__card-body {
  margin-block-start: -3.25rem;
}

/* ── 7ข. ความภาคภูมิใจของศิษย์ (0.100.0) ──────────────────────────────────
 *
 * สองแถบซ้อนกันในแนวตั้ง ไม่ใช่สองคอลัมน์ · ประกาศแสดงความยินดีของคณะเป็นภาพแนวนอนที่มี
 * ตัวหนังสืออยู่ในภาพทั้งใบ · บีบให้เหลือครึ่งความกว้างแล้วอ่านชื่อกับรางวัลไม่ออกเลย
 * แม้แต่บนจอเดสก์ท็อป ซึ่งทำให้การแบ่งคอลัมน์เป็นการประหยัดที่ราคาแพงกว่าที่ได้
 *
 * ตารางเป็น auto-fit ไม่ใช่จำนวนคอลัมน์ตายตัว — จำนวนข่าวในแต่ละแถบไม่เท่ากันและ
 * เปลี่ยนทุกสัปดาห์ */
.rxsu-campus__pride {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.rxsu-campus__pride-lanes {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4.5vw, 3rem);
}

/* ── แถบต้องกินความกว้างทั้งส่วน (0.104.0) ────────────────────────────────
 * ส่วนศิษย์เก่าเป็นกริดสองคอลัมน์อยู่แล้ว (ข้อความ | คำพูด) · แถบที่วางต่อท้ายจึงตกไปนั่งใน
 * คอลัมน์เดียวโดยอัตโนมัติ แล้วรางกว้างแค่ 186px เห็นการ์ดใบเดียว ทั้งที่ที่ว่างมีถึง 1200px
 * (เจ้าของเว็บชี้ว่ารางควรยาวจนสุดหน้า · วัดแล้วเป็นแบบนั้นจริง)
 *
 * 1 / -1 ไม่ใช่ span 2 — จำนวนคอลัมน์ของส่วนนี้เปลี่ยนตามเบรกพอยต์ และเลขที่พิมพ์ตายตัว
 * จะถูกต้องอยู่ความกว้างเดียว */
.rxsu-campus__pride-lanes,
.rxsu-campus__figures {
  grid-column: 1 / -1;
}

.rxsu-campus__pride-lane,
.rxsu-campus__figures {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1.125rem);
}

/* ── หัวข้อซ้าย รางขวา ยาวจนสุด (0.104.0) ────────────────────────────────
 * แบบเดียวกับการ์ดกิจกรรมและแถบภาพด้านบน · รุ่นก่อนวางหัวข้อไว้บนแล้วรางอยู่ล่าง ซึ่ง
 * ทำให้รางเริ่มจากขอบซ้ายและจบกลางหน้า เห็นการ์ดได้น้อยกว่าที่ที่ว่างมีจริง
 * (เจ้าของเว็บชี้บนหน้าจริง)
 *
 * เบรกพอยต์ 68rem ตรงกับสองแถบนั้นเป๊ะ · สามรางที่สลับเลย์เอาต์คนละจุดคือสามจังหวะที่
 * ผู้อ่านต้องปรับสายตาใหม่ระหว่างเลื่อนหน้าเดียว */
@media (min-width: 68rem) {
  .rxsu-campus__pride-lane,
  .rxsu-campus__figures {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: start;
  }
}

/* แผงภาพที่คณะเลือกเอง · พื้นผิวต่างจากแถบข่าวโดยตั้งใจ — ผู้อ่านต้องบอกได้ทันทีว่านี่คือ
 * ภาพที่คนเลือกมาให้ดู ไม่ใช่ข่าวที่เพิ่งขึ้น และผู้ดูแลต้องรู้ว่าจะไปแก้ที่ไหน */
.rxsu-campus__figures {
  background: var(--rxsu-campus-band);
  border-radius: var(--rxsu-campus-radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

/* หัวแถบมีเส้นนำสายตาต่อจากชื่อ · เส้นทำให้สองแถบอ่านเป็นสองชั้นของเรื่องเดียวกัน
 * ไม่ใช่สองส่วนที่บังเอิญวางต่อกัน — และถูกกว่าการตีกรอบรอบทั้งแถบ */
.rxsu-campus__pride-lane-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.875rem;
  min-width: 0;
}

@media (min-width: 68rem) {
  .rxsu-campus__pride-lane-head {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ในคอลัมน์แคบ เส้นนำสายตาหลังหัวข้อดันบรรทัดจนตัวอักษรหักคำ · เส้นเป็นของประดับ
   * ตัวอักษรไม่ใช่ */
  .rxsu-campus__pride-lane-head h3::after {
    display: none;
  }
}

.rxsu-campus__pride-lane-head h3 {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  margin: 0;
}

.rxsu-campus__pride-lane-head h3::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: clamp(1.5rem, 4vw, 3rem);
  height: 1px;
  margin-inline-start: 0.875rem;
  background: var(--rxsu-campus-hairline);
}

.rxsu-campus__pride-lane-head p {
  color: var(--rxsu-campus-muted);
  font-size: 0.9375rem;
}

/* ── ราง ไม่ใช่ตาราง (0.103.0) ─────────────────────────────────────────────
 * ตารางที่ยาวลงไปเรื่อย ๆ ผลักส่วนที่เหลือของหน้าตกจอ · ประกาศรางวัลหกใบกินความสูงเท่ากับ
 * เนื้อหาอีกสามส่วนรวมกัน ทั้งที่มันเป็นหนึ่งในแปดส่วน (เจ้าของเว็บเห็นบนหน้า preview) ·
 * รางกินความสูงคงที่ไม่ว่าจะมีสิบใบหรือร้อยใบ
 *
 * ค่าทุกตัวตรงกับรางอื่นในหน้านี้ (แถบภาพ · การ์ดกิจกรรม · เสียงศิษย์เก่า) โดยตั้งใจ —
 * สี่รางที่ปัดคนละระยะและมีปุ่มคนละที่ คือสี่สิ่งที่ผู้อ่านต้องเรียนรู้แยกกัน */
.rxsu-campus__pride-tiles {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* ต้องเท่ากับ padding ของราง ไม่งั้น scroll-snap ทำให้ใบแรกเยื้องตั้งแต่เปิดหน้า */
  scroll-padding-inline: 0.25rem;
  padding: 0.25rem;
  scrollbar-width: none;
}

.rxsu-campus__pride-tiles::-webkit-scrollbar {
  display: none;
}

.rxsu-campus__pride-tile {
  /* การ์ดขนาดพอดีมือ · ใหญ่กว่านี้แล้วเห็นทีละใบครึ่ง ซึ่งอ่านเหมือนหน้าเสีย ไม่ใช่ราง */
  flex: 0 0 min(78%, 15rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
}

/* ── ภาพที่กดขยายได้ ────────────────────────────────────────────────────
 * ลิงก์ทำงานได้เองแม้สคริปต์ถูกบล็อก (กดแล้วเปิดไฟล์ภาพ) · แว่นขยายจึงเป็นป้ายบอกว่า
 * "กดได้" ไม่ใช่ปุ่มที่ต้องมีสคริปต์ถึงจะมีความหมาย */
.rxsu-campus__pride-figure {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--rxsu-campus-hairline);
  border-radius: var(--rxsu-campus-radius-sm);
  background: var(--rxsu-campus-paper);
}

.rxsu-campus__pride-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  /* contain ไม่ใช่ cover · ประกาศแสดงความยินดีมีชื่อและรางวัลพิมพ์อยู่ในภาพทั้งใบ การ
   * ครอบตัดจึงตัดตัวหนังสือทิ้ง ซึ่งเป็นการทำลายเนื้อหา ไม่ใช่การจัดหน้า · พื้นหลังรองไว้
   * ให้ใบที่สัดส่วนไม่ตรงไม่ดูเหมือนภาพลอย */
  object-fit: contain;
  background: var(--rxsu-campus-band);
  transition: transform 260ms var(--rxsu-campus-ease);
}

a.rxsu-campus__pride-figure:hover img,
a.rxsu-campus__pride-figure:focus-visible img {
  transform: scale(1.02);
}

.rxsu-campus__pride-zoom {
  position: absolute;
  inset-block-end: 0.5rem;
  inset-inline-end: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--rxsu-campus-paper) 88%, transparent);
  color: var(--rxsu-campus-deep);
  /* ปรากฏตลอด ไม่ใช่โผล่ตอน hover · เครื่องหมายที่เห็นเฉพาะตอนชี้ ไม่มีอยู่จริงสำหรับ
   * ผู้ใช้จอสัมผัส ซึ่งเป็นคนส่วนใหญ่ของหน้านี้ */
  opacity: 0.92;
}

.rxsu-campus__pride-copy {
  min-width: 0;
}

.rxsu-campus__pride-title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}

a.rxsu-campus__pride-title:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .rxsu-campus__pride-figure img {
    transition: none;
  }

  a.rxsu-campus__pride-figure:hover img,
  a.rxsu-campus__pride-figure:focus-visible img {
    transform: none;
  }
}

/* ปุ่มไปคลังข่าวอยู่ในหัวแถบ · บนจอกว้างหัวแถบเป็นคอลัมน์ซ้าย ปุ่มจึงอยู่ใต้ชื่อแถบพอดี
 * ไม่ต้องปัดรางไปจนสุดถึงจะเจอ */
.rxsu-campus__pride-more {
  margin: 0.25rem 0 0;
}