/* ════════════════════ CONTENT PAGE BODY ════════════════════ */
#content-page { padding: 0 0 64px; }
#content-page .wrap { max-width: var(--max, 1200px); margin: 0 auto; padding: 0 24px; }

/* ── Inner-page background + decoration (shared across every 內頁:
   section--bg-soft background color, flow-video.svg swoosh, a blurred
   blue glow orb) — trialled on Announcement first, now the default
   look for all content pages. ──────────────────────────────────── */
.nl-page-deco {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* The <section> itself is forced to padding-top:0 inline on every page
     that uses this class (to sit flush under the breadcrumb), so extra
     top space is added to its inner wrapper instead; padding-bottom is
     free to grow past .section's own 96px default here. */
  padding-bottom: 140px;
}
.nl-page-deco > .agenda-layout {
  padding-top: 56px;
}
@media (max-width: 640px) {
  .nl-page-deco { padding-bottom: 80px; }
  .nl-page-deco > .agenda-layout { padding-top: 32px; }
}
.nl-page-deco::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/home/images/flow-video.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: .35;
  pointer-events: none;
  z-index: -1;
}
.nl-page-deco::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 78%;
  width: 320px;
  height: 320px;
  background: var(--sp-blue);
  border-radius: 50%;
  filter: blur(70px);
  opacity: .35;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}

/* ── Content card: the main content column floats as a card over the
   page background — used on single-item/detail pages. List pages that
   already show their own grid of cards skip this (double-boxing reads
   redundant when the cards themselves already stand out). ──────────── */
.nl-card {
  position: relative;
  isolation: isolate;
  background: rgba(255, 255, 255, .65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(23, 26, 58, .1);
  padding: 32px 32px 48px;
  margin-top: 30px;
}
.nl-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url('/assets/home/images/pattern-grid.png');
  background-repeat: repeat;
  background-size: 70px 70px;
  opacity: .35;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 900px) {
  .nl-card { margin-top: 0; }
}
@media (max-width: 640px) {
  .nl-card { padding: 24px 20px 32px; }
}

/* When there is no side nav — full-width content keeps top spacing */
#content-page > .wrap > .cp-empty,
#content-page > .wrap > .news-content-block:first-child {
  margin-top: 40px;
}

/* ════════════════════ SHARED MOBILE SIDE-NAV SELECT ════════════════════
   _SideNav.cshtml swaps its <ul> for a <select> on narrow screens on
   every page that includes the partial (see the script in _SideNav.cshtml). */
.agenda-side__select {
  display: none;
  width: 100%;
  padding: 16px 20px;
  border: 1.5px solid var(--sp-indigo, #1B2B74);
  border-radius: 10px;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink, #171a3a);
  background: #fff;
  box-shadow: 0 2px 10px rgba(27, 43, 116, .1);
  margin-top: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}
/* <option> can carry its own font/weight independent of <select> — keep
   the opened list at the original look while the closed box stays bold. */
.agenda-side__select option {
  font-size: 16px;
  font-weight: 400;
}
@media (max-width: 900px) {
  .agenda-side__select { display: block; }
  .agenda-side ul { display: none; }
}

/* ════════════════════ SHARED DETAIL TITLE ════════════════════
   Used at the top of the content column on ContentPage, AnnouncementDetail
   and NewsDetail so every "content + sidebar" page shares one title style. */
.detail-title {
  font-family: var(--sans);
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 800;
  color: var(--sp-indigo, #1B2B74);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 auto;
  max-width: 900px;
  text-align: center;
}

.detail-divider {
  width: 100%; height: 4px; border-radius: 2px;
  background: var(--spectrum, linear-gradient(90deg, #30B9D5, #1B2B74, #7A4597, #A560A2, #F5C63E, #F39A2C, #E63E46));
  margin: 20px 0 32px;
}

/* Shared "date group" table header row, used by AgendaPage's table mode and AgendaOverview */
.sched .ag-sess-row td { background: var(--sp-indigo, #1B2B74); color: #fff; font-weight: 600; }
.sched .ag-time-cell { color: var(--sp-indigo, #1B2B74); font-weight: 700; white-space: nowrap; }

/* Agenda layout: sidebar missing → content spans full width */
.agenda-layout > :only-child { grid-column: 1 / -1; }

/* ════════════════════ SESSION CARD INFO (spectrum supplement) ════════════════════
   Each field is its own flex row (not a shared grid) so a row with an extra
   alt-language line, or a long value like a disclaimer sentence, can never
   throw off the column alignment of the other rows. */
.session-card__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  padding: 20px 24px;
  background: var(--paper-2, #F5F6FB);
  border-radius: 12px;
  font-size: 16px;
}
.session-card__info > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 2px;
}
.session-card__info-label {
  flex: 0 0 auto;
  min-width: 90px;
  color: var(--ink-2, #5c6080);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.session-card__info-value {
  flex: 1 1 240px;
  min-width: 0;
  color: var(--ink, #171a3a);
  font-size: 17px;
  font-weight: 500;
}
.session-card__info-alt {
  flex: 1 1 100%;
  min-width: 0;
  color: var(--ink-2, #5c6080);
  font-size: 15px;
  font-weight: 400;
}

/* ════════════════════ SCHEDULE SPEAKERS ════════════════════ */
.schedule-speakers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.schedule-speaker-thumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(27,43,116,.07);
  border-radius: 100px;
  padding: 4px 12px 4px 8px;
}
.schedule-speaker-thumb__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--sp-indigo, #1B2B74);
}

/* ════════════════════ TABLE WRAP / SCHED ════════════════════ */
.table-wrap { overflow-x: auto; margin-top: 16px; }
/* When the table is the first thing in the content column (no title above
   it, e.g. AgendaOverview) it shouldn't sit lower than the sidebar next to it. */
.table-wrap:first-child { margin-top: 0; }
.sched {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  background: var(--paper, #fff);
}
.sched th, .sched td {
  border: 1px solid var(--rule, #e8eaf0);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.sched th {
  background: var(--sp-indigo, #1B2B74);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
/* ════════════════════ CONTENT BLOCKS ════════════════════ */
.news-content-block {
  padding: 32px 0;
  border-bottom: 1px solid var(--rule, #e8eaf0);
}
.news-content-block:last-child { border-bottom: none; }

.news-block-title {
  font-size: 22px; font-weight: 700; color: var(--ink, #171a3a);
  margin-bottom: 20px; letter-spacing: -.01em;
}

/* Type 1 — image above text */
.news-block-img-wrap { margin-bottom: 20px; }
.news-block-img-wrap img { max-width: 100%; border-radius: 8px; }

/* Types 2 & 3 — side-by-side */
.news-block-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start;
}
.news-block-split-rev { direction: rtl; }
.news-block-split-rev > * { direction: ltr; }
.nbs-img img { width: 100%; border-radius: 8px; }

/* Type 4 — list */
.news-list-v {
  list-style: disc; padding-left: 20px; color: var(--ink-2, #5c6080);
  display: flex; flex-direction: column; gap: 10px;
}
.news-list-v li { font-size: 16px; line-height: 1.6; }
.news-list-v li a { color: var(--sp-indigo, #1B2B74); text-decoration: underline; }

/* Type 5 — cards */
.news-hcards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px;
}
.nhcard {
  border: 1px solid var(--rule, #e8eaf0); border-radius: 10px; overflow: hidden;
  background: var(--paper, #fff); transition: box-shadow .2s;
}
.nhcard:hover { box-shadow: 0 4px 16px rgba(27,43,116,.12); }
.nhcard-img { width: 100%; height: 160px; object-fit: cover; display: block; }
.nhcard-body { padding: 16px; }
.nhcard-title { font-size: 17px; font-weight: 700; color: var(--ink, #171a3a); margin-bottom: 8px; }
.nhcard-desc { font-size: 16px; color: var(--ink-2, #5c6080); line-height: 1.6; margin-bottom: 12px; }
.nhcard-link { font-size: 16px; color: var(--sp-indigo, #1B2B74); font-weight: 600; }
.nhcard-link:hover { text-decoration: underline; }

/* Type 6 — buttons */
.news-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-fill {
  display: inline-flex; align-items: center; padding: 10px 24px; border-radius: 6px;
  background: var(--sp-indigo, #1B2B74); color: #fff;
  font-size: 16px; font-weight: 600; text-decoration: none; transition: background .15s;
}
.btn-fill:hover { background: var(--sp-violet, #4B3FA0); color: #fff; text-decoration: none; }
.btn-outline {
  display: inline-flex; align-items: center; padding: 10px 24px; border-radius: 6px;
  border: 1px solid var(--rule, #e8eaf0); color: var(--ink-2, #5c6080);
  font-size: 16px; font-weight: 600; text-decoration: none; transition: all .15s;
}
.btn-outline:hover { border-color: var(--sp-indigo, #1B2B74); color: var(--sp-indigo, #1B2B74); text-decoration: none; }

/* Type 7 — table */
.cms-table-wrap { overflow-x: auto; }
.cms-table {
  width: 100%; border-collapse: collapse; font-size: 16px;
}
.cms-table th, .cms-table td {
  border: 1px solid var(--rule, #e8eaf0); padding: 10px 14px; text-align: left;
}
.cms-table th { background: var(--soft, #f5f6fb); font-weight: 700; color: var(--ink, #171a3a); }
.cms-table tbody tr:hover { background: var(--soft, #f5f6fb); }

/* ════════════════════ CMS RICH TEXT ════════════════════ */
.cms-content { line-height: 1.8; color: var(--ink-2, #5c6080); font-size: 16px; }
.cms-content p { margin-bottom: 12px; }
.cms-content h1, .cms-content h2, .cms-content h3 {
  margin: 20px 0 10px; font-weight: 700; color: var(--ink, #171a3a);
}
.cms-content ul, .cms-content ol { padding-left: 20px; margin-bottom: 12px; }
.cms-content li { margin-bottom: 6px; }
.cms-content a { color: var(--sp-indigo, #1B2B74); text-decoration: underline; }
.cms-content img { max-width: 100%; border-radius: 6px; }
.cms-content blockquote { border-left: 4px solid var(--rule, #e0e3ef); padding-left: 16px; margin: 12px 0; color: var(--ink-2); }
.cms-content pre { background: var(--paper-2, #f4f5fa); border-radius: 6px; padding: 12px 16px; overflow-x: auto; font-size: 14px; }

/* Quill 對齊 */
.cms-content .ql-align-center { text-align: center; }
.cms-content .ql-align-right  { text-align: right; }
.cms-content .ql-align-justify { text-align: justify; }

/* Quill 字體大小 */
.cms-content .ql-size-small  { font-size: 0.875em; }
.cms-content .ql-size-large  { font-size: 1.25em; }
.cms-content .ql-size-huge   { font-size: 1.75em; }

/* Quill 縮排 */
.cms-content .ql-indent-1 { padding-left: 3em; }
.cms-content .ql-indent-2 { padding-left: 6em; }
.cms-content .ql-indent-3 { padding-left: 9em; }
.cms-content .ql-indent-4 { padding-left: 12em; }
.cms-content .ql-indent-5 { padding-left: 15em; }
.cms-content .ql-indent-6 { padding-left: 18em; }
.cms-content .ql-indent-7 { padding-left: 21em; }
.cms-content .ql-indent-8 { padding-left: 24em; }

/* Quill 清單縮排 */
.cms-content li.ql-indent-1 { padding-left: 3em; }
.cms-content li.ql-indent-2 { padding-left: 6em; }
.cms-content li.ql-indent-3 { padding-left: 9em; }

/* ════════════════════ EMPTY STATE ════════════════════ */
.cp-empty {
  text-align: center; color: var(--ink-2, #5c6080); font-size: 16px; padding: 80px 20px;
}

/* ════════════════════ Responsive ════════════════════ */
@media (max-width: 900px) {
  #content-page { padding: 0 0 48px; }
  .news-block-split { grid-template-columns: 1fr; }
  .news-block-split-rev { direction: ltr; }
}
@media (max-width: 640px) {
  .news-hcards-grid { grid-template-columns: 1fr; }
  .session-card { padding: 24px 20px; }
  .session-card__info { padding: 16px 18px; }
  .session-card__info > div { flex-direction: column; align-items: flex-start; gap: 2px; }
  /* flex-basis on .session-card__info-value/-alt sizes *width* in the
     desktop row layout above, but once the row switches to flex-direction:
     column here, that same basis is read as *height* — forcing each value
     into a tall box and leaving a big blank gap below its text. */
  .session-card__info-value,
  .session-card__info-alt { flex: none; }
}