/*
 * Shared article content styles.
 *
 * Loaded on the FRONT END and inside the BLOCK EDITOR from this one file,
 * so the editor always shows what the published page will show. Every rule
 * targets both containers:
 *
 *   .ntu-news-detail__content  - the published article body
 *   .ntu-block-editor__content - the NTU Editor block's nested content
 *
 * Do not duplicate these rules into app.css or the block's editor.css.
 * Changing them here changes both surfaces at once, which is the point.
 */

.ntu-news-detail__content,
.ntu-block-editor__content {
  color: var(--ntu-color-text);
  font-family: var(--ntu-font-sans);
  font-size: 16px;
  /* Match Events detail body typography on desktop and mobile. */
  line-height: 1.4;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ntu-news-detail__content > *,
.ntu-block-editor__content > * {
  margin: 0;
  min-width: 0;
  max-width: 100%;
}

/*
 * Vertical rhythm comes from CSS, not from empty spacer paragraphs.
 *
 * The NTU source spaces its paragraphs with empty ` ` paragraphs. Content
 * pasted from Google Docs (or written here) has none, so keying spacing off
 * those spacers left ordinary pasted text with no gaps at all. Spacing is
 * therefore a property of the stylesheet, and the spacers are stripped from
 * post content instead - one model that works whatever the source.
 */
.ntu-news-detail__content > * + *,
.ntu-block-editor__content > * + * {
  margin-top: 16px;
}

.ntu-news-detail__content > *:first-child,
.ntu-block-editor__content > *:first-child {
  margin-top: 0;
}

.ntu-news-detail__content > *:last-child,
.ntu-block-editor__content > *:last-child {
  margin-bottom: 0;
}

/*
 * Bottom margin rather than 0, so paragraphs space correctly even when nested
 * inside wrapper divs that the top-level sibling rule cannot reach. Adjacent
 * margins collapse, so a paragraph pair sits 16px apart, matching Events.
 */
.ntu-news-detail__content p,
.ntu-block-editor__content p {
  margin: 0 0 16px;
}

.ntu-news-detail__content p:last-child,
.ntu-block-editor__content p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------- Pasted structure -- */

/*
 * Elements that arrive from Google Docs and other word processors. They were
 * absent from the NTU article, so nothing styled them and pasted lists in
 * particular rendered with no markers or indent.
 */
.ntu-news-detail__content ul,
.ntu-news-detail__content ol,
.ntu-block-editor__content ul,
.ntu-block-editor__content ol {
  margin: 0;
  padding-left: 24px;
}

.ntu-news-detail__content ul,
.ntu-block-editor__content ul {
  list-style: disc outside;
}

.ntu-news-detail__content ol,
.ntu-block-editor__content ol {
  list-style: decimal outside;
}

.ntu-news-detail__content li,
.ntu-block-editor__content li {
  margin: 0 0 8px;
  line-height: inherit;
}

.ntu-news-detail__content li:last-child,
.ntu-block-editor__content li:last-child {
  margin-bottom: 0;
}

/* Nested lists sit tight to their parent item. */
.ntu-news-detail__content li > ul,
.ntu-news-detail__content li > ol,
.ntu-block-editor__content li > ul,
.ntu-block-editor__content li > ol {
  margin-top: 8px;
}

.ntu-news-detail__content hr,
.ntu-block-editor__content hr {
  height: 0;
  border: 0;
  border-top: 1px solid var(--ntu-color-border);
}

.ntu-news-detail__content sub,
.ntu-news-detail__content sup,
.ntu-block-editor__content sub,
.ntu-block-editor__content sup {
  font-size: 75%;
  line-height: 0;
}

.ntu-news-detail__content code,
.ntu-news-detail__content pre,
.ntu-block-editor__content code,
.ntu-block-editor__content pre {
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 0.9em;
}

.ntu-news-detail__content pre,
.ntu-block-editor__content pre {
  padding: 16px;
  overflow-x: auto;
  background: #f6f7f7;
  white-space: pre-wrap;
}

.ntu-news-detail__content figure,
.ntu-news-detail__content .wp-caption,
.ntu-news-detail__content .wp-block-image,
.ntu-block-editor__content figure,
.ntu-block-editor__content .wp-caption,
.ntu-block-editor__content .wp-block-image {
  margin: 32px 0;
}

.ntu-news-detail__content .aligncenter,
.ntu-news-detail__content .wp-caption.aligncenter,
.ntu-news-detail__content figure.aligncenter,
.ntu-news-detail__content .wp-block-image.aligncenter,
.ntu-block-editor__content .aligncenter,
.ntu-block-editor__content .wp-caption.aligncenter,
.ntu-block-editor__content figure.aligncenter,
.ntu-block-editor__content .wp-block-image.aligncenter {
  margin-left: auto;
  margin-right: auto;
}

.ntu-news-detail__content img.aligncenter,
.ntu-news-detail__content .aligncenter > img,
.ntu-news-detail__content .wp-caption.aligncenter img,
.ntu-news-detail__content figure.aligncenter img,
.ntu-block-editor__content img.aligncenter,
.ntu-block-editor__content .aligncenter > img,
.ntu-block-editor__content .wp-caption.aligncenter img,
.ntu-block-editor__content figure.aligncenter img {
  margin-left: auto;
  margin-right: auto;
}

.ntu-news-detail__content .alignleft,
.ntu-block-editor__content .alignleft {
  margin-right: auto;
}

.ntu-news-detail__content .alignright,
.ntu-block-editor__content .alignright {
  margin-left: auto;
}

.ntu-news-detail__content img,
.ntu-block-editor__content img {
  display: block;
  max-width: 100%;
  height: auto;
}

.ntu-news-detail__content iframe,
.ntu-news-detail__content video,
.ntu-news-detail__content embed,
.ntu-news-detail__content object,
.ntu-block-editor__content iframe,
.ntu-block-editor__content video,
.ntu-block-editor__content embed,
.ntu-block-editor__content object {
  display: block;
  width: 100%;
  max-width: 100%;
}

.ntu-news-detail__content [style*="width"],
.ntu-block-editor__content [style*="width"] {
  max-width: 100% !important;
}

.ntu-news-detail__content [style*="margin-left"],
.ntu-news-detail__content [style*="margin-right"],
.ntu-block-editor__content [style*="margin-left"],
.ntu-block-editor__content [style*="margin-right"] {
  max-width: 100% !important;
}

/* Article-body headings share the Events font family, not a single size.
   Preserve the hierarchy authored in the block editor. */
.ntu-news-detail__content :is(h1, h2, h3, h4, h5, h6),
.ntu-block-editor__content :is(h1, h2, h3, h4, h5, h6),
.ntu-event-detail__section-body :is(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 24px;
  color: var(--ntu-color-text);
  font-family: var(--ntu-font-serif);
  font-weight: 500;
  font-style: normal;
  line-height: 1.2;
}

.ntu-news-detail__content h1,
.ntu-block-editor__content h1,
.ntu-event-detail__section-body h1 { font-size: 32px; }

.ntu-news-detail__content h2,
.ntu-block-editor__content h2,
.ntu-event-detail__section-body h2 { font-size: 40px; }

.ntu-news-detail__content h3,
.ntu-block-editor__content h3,
.ntu-event-detail__section-body h3 { font-size: 28px; }

.ntu-news-detail__content h4,
.ntu-block-editor__content h4,
.ntu-event-detail__section-body h4 { font-size: 20px; }

.ntu-news-detail__content h5,
.ntu-block-editor__content h5,
.ntu-event-detail__section-body h5 { font-size: 18px; }

.ntu-news-detail__content h6,
.ntu-block-editor__content h6,
.ntu-event-detail__section-body h6 { font-size: 16px; }

/* Headings breathe more above than a plain sibling gap allows. */
.ntu-news-detail__content * + h1,
.ntu-news-detail__content * + h2,
.ntu-news-detail__content * + h3,
.ntu-news-detail__content * + h4,
.ntu-news-detail__content * + h5,
.ntu-news-detail__content * + h6,
.ntu-block-editor__content * + h1,
.ntu-block-editor__content * + h2,
.ntu-block-editor__content * + h3,
.ntu-block-editor__content * + h4,
.ntu-block-editor__content * + h5,
.ntu-block-editor__content * + h6 {
  margin-top: 56px;
}

/* Keep intentional bold emphasis without changing the heading font family. */
.ntu-news-detail__content :is(h1, h2, h3, h4, h5, h6) :is(strong, b),
.ntu-block-editor__content :is(h1, h2, h3, h4, h5, h6) :is(strong, b),
.ntu-event-detail__section-body :is(h1, h2, h3, h4, h5, h6) :is(strong, b) {
  font-weight: 700;
}

/* Body links: accent red, underlined. */
.ntu-news-detail__content a,
.ntu-block-editor__content a {
  color: var(--ntu-color-accent);
  text-decoration: underline;
}

/*
 * Pull quotes, matching the NTU COE article body: centred, 24px, with a large
 * accent quote mark centred above the text.
 *
 * The source draws that mark with a private-use glyph from its own icon font
 * ("icomoon"), which we do not load and should not copy. We render the
 * standard left double quotation mark instead, sized so it reads at the same
 * visual weight. Core's .wp-block-quote border is cleared so the two agree.
 */
.ntu-news-detail__content blockquote,
.ntu-block-editor__content blockquote {
  position: relative;
  margin: 24px 0;
  padding: 80px 32px 32px;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
  border: 0;
  color: var(--ntu-color-text);
  font-family: var(--ntu-font-sans);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  /* 37.2px at 24px. */
  line-height: 1.55;
  text-align: center;
}

.ntu-news-detail__content blockquote::before,
.ntu-block-editor__content blockquote::before {
  content: "\201C";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ntu-color-accent);
  font-family: var(--ntu-font-serif);
  font-size: 72px;
  line-height: 48px;
}

/* Quoted paragraphs inherit the blockquote's type. */
.ntu-news-detail__content blockquote p,
.ntu-block-editor__content blockquote p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* Attribution line under a quote. */
@media (max-width: 1023px) {
  .ntu-news-detail__content blockquote,
  .ntu-block-editor__content blockquote {
    padding: 64px 24px 24px;
    font-size: 20px;
    line-height: 1.4;
  }
}

/* Attribution line under a quote. */
.ntu-news-detail__content blockquote cite,
.ntu-block-editor__content blockquote cite {
  display: block;
  margin-top: 16px;
  font-size: 16px;
  font-style: normal;
}

/*
 * Two kinds of table live in this content and they need opposite treatment:
 *
 *   1. LAYOUT tables - used to place images side by side. The source site
 *      gives these no borders and sizes their columns with inline
 *      `style="width: n%"`. We must not fight either. This is the DEFAULT,
 *      so pasted content matches the source with no extra work.
 *   2. DATA tables - the faculty grids. These opt in to bordered cells by
 *      adding `ntu-data-table` in the block's Advanced > Additional CSS class.
 *
 * Do NOT key this off core's `has-fixed-layout`: Gutenberg adds that class to
 * ANY table block, including layout tables, so it cannot tell them apart.
 */
.ntu-news-detail__content table,
.ntu-block-editor__content table {
  display: table;
  max-width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent !important;
}

/* Honour pasted column proportions instead of overriding them. */
.ntu-news-detail__content table[style*="width"],
.ntu-block-editor__content table[style*="width"] {
  table-layout: fixed;
}

.ntu-news-detail__content td[style*="width"],
.ntu-news-detail__content th[style*="width"],
.ntu-block-editor__content td[style*="width"],
.ntu-block-editor__content th[style*="width"] {
  min-width: 0;
}

/* Data tables: bordered cells. */
.ntu-news-detail__content table.ntu-data-table,
.ntu-block-editor__content table.ntu-data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.ntu-news-detail__content table.ntu-data-table td,
.ntu-news-detail__content table.ntu-data-table th,
.ntu-block-editor__content table.ntu-data-table td,
.ntu-block-editor__content table.ntu-data-table th {
  padding: 8px;
  /*
   * !important because legacy tables also carry core's `is-style-stripes`,
   * and `.wp-block-table.is-style-stripes td { border-color: transparent }`
   * (0,2,1) outranks this. Core prints that inline, so load order can't win.
   */
  border: 1px solid #e0e0e0 !important;
}

.ntu-news-detail__content tbody,
.ntu-block-editor__content tbody {
  display: table-row-group;
}

.ntu-news-detail__content tr,
.ntu-block-editor__content tr {
  background: transparent !important;
}

.ntu-news-detail__content td,
.ntu-news-detail__content th,
.ntu-block-editor__content td,
.ntu-block-editor__content th {
  /* Matches the source: 10px padding, no border, middle-aligned. */
  padding: 10px;
  border: 0;
  vertical-align: middle;
  color: var(--ntu-color-text);
  font-family: var(--ntu-font-sans);
  font-size: 16px;
  line-height: 1.55;
  text-align: left !important;
  background: transparent !important;
  word-break: break-word;
}

.ntu-news-detail__content td > :first-child,
.ntu-news-detail__content th > :first-child,
.ntu-block-editor__content td > :first-child,
.ntu-block-editor__content th > :first-child {
  margin-top: 0 !important;
}

.ntu-news-detail__content td > :last-child,
.ntu-news-detail__content th > :last-child,
.ntu-block-editor__content td > :last-child,
.ntu-block-editor__content th > :last-child {
  margin-bottom: 0 !important;
}

/*
 * Layout tables show images at their natural proportions, as the source does.
 * The square crop below is reserved for data grids, where uniform portraits
 * are the intended look.
 */
.ntu-news-detail__content table img,
.ntu-block-editor__content table img {
  display: block;
  max-width: 100%;
  height: auto;
}

.ntu-news-detail__content table.ntu-data-table img,
.ntu-block-editor__content table.ntu-data-table img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.ntu-news-detail__content table p,
.ntu-block-editor__content table p {
  margin: 0 !important;
}

.ntu-news-detail__content table p + p,
.ntu-block-editor__content table p + p {
  margin-top: 14px !important;
}

.ntu-news-detail__content table strong,
.ntu-block-editor__content table strong {
  font-weight: 700;
}

/* Events uses 24px section headings and 16px heading/body gaps on mobile. */
@media (max-width: 1023.98px) {
  .ntu-news-detail__content :is(h1, h2, h3, h4, h5, h6),
  .ntu-block-editor__content :is(h1, h2, h3, h4, h5, h6),
  .ntu-event-detail__section-body :is(h1, h2, h3, h4, h5, h6) {
    margin-bottom: 16px;
  }

  .ntu-news-detail__content h2,
  .ntu-block-editor__content h2,
  .ntu-event-detail__section-body h2 { font-size: 24px; }

  .ntu-news-detail__content h3,
  .ntu-block-editor__content h3,
  .ntu-event-detail__section-body h3 { font-size: 22px; }

  .ntu-news-detail__content * + h1,
  .ntu-news-detail__content * + h2,
  .ntu-news-detail__content * + h3,
  .ntu-news-detail__content * + h4,
  .ntu-news-detail__content * + h5,
  .ntu-news-detail__content * + h6,
  .ntu-block-editor__content * + h1,
  .ntu-block-editor__content * + h2,
  .ntu-block-editor__content * + h3,
  .ntu-block-editor__content * + h4,
  .ntu-block-editor__content * + h5,
  .ntu-block-editor__content * + h6 {
    margin-top: 32px;
  }

}

@media (max-width: 767px) {
  /*
   * Only data grids get a minimum width and scroll sideways on small screens.
   * Layout tables must be free to shrink, or a simple two-image row forces the
   * whole article to scroll.
   */
  .ntu-news-detail__content table.ntu-data-table,
  .ntu-block-editor__content table.ntu-data-table {
      min-width: 760px;
  }

  .ntu-news-detail__content td,
  .ntu-news-detail__content th,
  .ntu-block-editor__content td,
  .ntu-block-editor__content th {
      font-size: 14px;
      line-height: 1.45;
  }

  .ntu-news-detail__content table.ntu-data-table td,
  .ntu-news-detail__content table.ntu-data-table th,
  .ntu-block-editor__content table.ntu-data-table td,
  .ntu-block-editor__content table.ntu-data-table th {
      min-width: 172px;
  }

}