/*
 * /labo/ section stylesheet: corrections that sit on top of the designer's
 * assets/css/column.css without editing it (that file belongs to the static
 * corporate workstream). Two jobs -- map WordPress body markup onto the design,
 * and undo layout that assumed a fixed number of cards.
 *
 * ---------------------------------------------------------------------------
 * 1. Card-count-independent layout (task 100)
 *
 * The drop hard-codes `.new_articles_container { height: 886px }` -- exactly two
 * rows of the 433px card, because the mockup had six cards. WordPress decides
 * the count now (表示設定 = 12 today), so at four rows the grid rendered ~986px
 * outside its container and collided with everything below it.
 *
 * Height is therefore driven by content. `justify-content: space-between`
 * survives from the drop and is harmless once the box is auto-sized.
 */

.new_articles_container {
  height: auto;
}

@media screen and (max-width: 1439px) {
  .new_articles_container {
    height: auto;
  }
}

/*
 * ---------------------------------------------------------------------------
 * 2. Gutenberg -> design mapping for article bodies (task 99).
 *
 * The designer drop styles hand-authored markup (.column_detail_section h3/h4/h5),
 * but WordPress emits h2/h3/h4.wp-block-heading directly inside
 * .column_detail_body. Without this file the body renders as undifferentiated
 * text -- headings are indistinguishable from paragraphs.
 *
 * Values are copied from assets/css/column.css so the two stay visually
 * identical; this file only re-points them at the WordPress element names.
 * It ships inside the /labo/ export on purpose: editing the shared
 * column.css would mean touching another workstream's deploy manifest.
 *
 * Heading level mapping:
 *   WP h2 -> designer section h3 (centred, ruled above and below)
 *   WP h3 -> designer h4 (red bar on the left)
 *   WP h4 -> designer h5
 */

.column_detail_area .column_detail_body h2 {
  margin: 96px 0 48px;
  padding: 28px 16px 25px;
  scroll-margin-top: 100px;
  text-align: center;
  font-weight: 600;
  font-size: 22px;
  line-height: 33px;
  font-family: var(--column_font_base);
  letter-spacing: 0;
  color: var(--column_color_text);
  border-top: 1px solid var(--column_color_text);
  border-bottom: 1px solid var(--column_color_text);
}

.column_detail_area .column_detail_body > h2:first-child {
  margin-top: 0;
}

.column_detail_area .column_detail_body h3 {
  position: relative;
  margin: 56px 0 21px;
  padding-left: 16px;
  scroll-margin-top: 100px;
  font-weight: 600;
  font-size: 22px;
  line-height: 33px;
  font-family: var(--column_font_base);
  letter-spacing: 0;
  color: var(--column_color_text_dark);
}

.column_detail_area .column_detail_body h3::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 0;
  width: 4px;
  height: 22px;
  background-color: var(--column_color_red);
}

.column_detail_area .column_detail_body h4 {
  margin: 56px 0 22px;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  font-family: var(--column_font_base);
  letter-spacing: 0;
  color: var(--column_color_text_dark);
}

.column_detail_area .column_detail_body p {
  margin: 0 0 20px;
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  color: var(--column_color_text);
}

.column_detail_area .column_detail_body strong {
  color: var(--column_color_red);
  font-weight: 600;
}

.column_detail_area .column_detail_body a {
  color: #0356cb;
  text-decoration: underline;
}

.column_detail_area .column_detail_body a:hover {
  opacity: 0.7;
}

.column_detail_area .column_detail_body ul,
.column_detail_area .column_detail_body ol {
  display: grid;
  gap: 12px;
  padding-left: 24px;
  margin: 0 0 24px;
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  color: var(--column_color_text);
}

.column_detail_area .column_detail_body li::marker {
  color: var(--column_color_red);
  font-weight: 600;
}

/* Editors insert images at arbitrary aspect ratios, so unlike the designer's
   fixed-ratio figures these keep their own proportions. */
.column_detail_area .column_detail_body figure {
  margin: 48px auto 24px;
  overflow: hidden;
  border-radius: 4px;
}

.column_detail_area .column_detail_body img {
  display: block;
  width: 100%;
  height: auto;
}

.column_detail_area .column_detail_body figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--column_color_text_light);
}

.column_detail_area .column_detail_body blockquote {
  margin: 32px 0;
  padding: 20px 24px;
  border-left: 4px solid var(--column_color_red);
  background-color: #f7f7f7;
}

.column_detail_area .column_detail_body table {
  width: 100%;
  margin: 32px 0;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 27px;
}

.column_detail_area .column_detail_body th,
.column_detail_area .column_detail_body td {
  padding: 12px 16px;
  border: 1px solid var(--column_color_line);
  text-align: left;
}

.column_detail_area .column_detail_body th {
  background-color: #f2f2f2;
  font-weight: 600;
}

/* Wide tables must scroll inside the article, never widen the page. */
.column_detail_area .column_detail_body .wp-block-table {
  overflow-x: auto;
}

@media screen and (max-width: 768px) {
  .column_detail_area .column_detail_body h2 {
    margin: 64px 0 32px;
    padding: 20px 12px 18px;
    font-size: 19px;
    line-height: 29px;
  }

  .column_detail_area .column_detail_body h3 {
    margin: 40px 0 16px;
    font-size: 18px;
    line-height: 28px;
  }

  .column_detail_area .column_detail_body h4 {
    margin: 32px 0 16px;
    font-size: 17px;
    line-height: 26px;
  }

  .column_detail_area .column_detail_body p,
  .column_detail_area .column_detail_body ul,
  .column_detail_area .column_detail_body ol {
    font-size: 15px;
    line-height: 27px;
  }
}