/**
 * Layout 22 — "Nổi bật 3 cột"
 *
 * Row 1 is a CSS grid so the two stacks of three can match the tall centre card
 * exactly. The gap follows the chosen gutter, same as layout 20.
 */

.saigonchess3 .jacl-layout__body > .jacl-row {
  --l22-gap: var(--grid-gutter-width, 32px);
}

.saigonchess3 .jacl-layout__body > .jacl-row.no-gutters {
  --l22-gap: 0px;
}

.saigonchess3 .jacl-layout__body > .jacl-row.small-gutters {
  --l22-gap: var(--gutter-small, 3px);
}

.saigonchess3 .jacl-layout__body > .jacl-row.large-gutters {
  --l22-gap: var(--gutter-large, 36px);
}

.saigonchess3 .jacl-layout__body > .jacl-row.extra-large-gutters {
  --l22-gap: var(--gutter-extra-large, 36px);
}

/* ------------------------------------------------------------------ row 1 */

.saigonchess3 .saigonchess3__top {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--l22-gap);
  align-items: stretch;
  margin: 0;
}

.saigonchess3 .saigonchess3__top > [class*="jacl-col"] {
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
  min-width: 0;
}

/* Three cards stacked at the module's usual 4:3, which is what sets the height
   of the whole row — the centre card then stretches to match. */
.saigonchess3 .saigonchess3__side {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: var(--l22-gap);
}

.saigonchess3 .saigonchess3__side .jacl-item__media,
.saigonchess3 .saigonchess3__side .jacl-item__media a {
  aspect-ratio: 4 / 3;
  height: auto;
  padding-bottom: 0;
}

/* The centre card fills whatever height the side stacks worked out to, and the
   picture is cropped rather than letterboxed. */
.saigonchess3 .saigonchess3__lead,
.saigonchess3 .saigonchess3__lead .jacl-item,
.saigonchess3 .saigonchess3__lead .jacl-item__inner,
.saigonchess3 .saigonchess3__lead .jacl-item__media,
.saigonchess3 .saigonchess3__lead .jacl-item__media a {
  height: 100%;
}

.saigonchess3 .saigonchess3__lead .jacl-item__media,
.saigonchess3 .saigonchess3__lead .jacl-item__media a {
  aspect-ratio: auto;
  padding-bottom: 0;
}

.saigonchess3 .saigonchess3__top .jacl-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The lead carries the largest headline in the module. */
.saigonchess3 .saigonchess3__lead .jacl-item__title {
  font-size: 1.6rem;
  line-height: 1.25;
}

.saigonchess3 .saigonchess3__lead .jacl-item__body {
  padding: 26px 24px 20px;
}

/* Side cards are a quarter of the width; keep their captions to two lines. */
.saigonchess3 .saigonchess3__side .jacl-item__title {
  font-size: .95rem;
  line-height: 1.3;
}

.saigonchess3 .saigonchess3__side .jacl-item__title a {
  -webkit-line-clamp: 2;
}

.saigonchess3 .saigonchess3__side .jacl-item__body {
  padding: 14px 14px 12px;
}

.saigonchess3 .saigonchess3__side .jacl-item__meta ul {
  font-size: 11px;
}

/* ------------------------------------------------------------------ row 2 */

/* Six across at md-2 each: about 170px wide on a desktop, so everything steps
   down a size — otherwise the caption covers the whole picture. */
.saigonchess3 .saigonchess3__bottom .jacl-item__media {
  min-height: 160px;
}

.saigonchess3 .saigonchess3__bottom .jacl-item__title {
  font-size: .82rem;
  line-height: 1.28;
  margin-bottom: 4px;
}

.saigonchess3 .saigonchess3__bottom .jacl-item__title a {
  -webkit-line-clamp: 2;
}

.saigonchess3 .saigonchess3__bottom .jacl-item__body {
  padding: 10px 10px 9px;
}

.saigonchess3 .saigonchess3__bottom .jacl-item__meta {
  margin-top: 4px;
}

.saigonchess3 .saigonchess3__bottom .jacl-item__meta ul {
  font-size: 10px;
}

.saigonchess3 .saigonchess3__bottom .jacl-item__cat a {
  font-size: 8.5px;
  padding: 1px 5px;
}

.saigonchess3 .saigonchess3__bottom .scn-cat-top {
  top: 8px;
  left: 8px;
}

/* The intro would leave no picture at all at this size. */
.saigonchess3 .saigonchess3__bottom .jacl-item__intro,
.saigonchess3 .saigonchess3__bottom .jacl-item__introtext {
  display: none;
}

/* --------------------------------------------------------------- narrow */

@media (max-width: 991px) {
  .saigonchess3 .saigonchess3__top {
    grid-template-columns: 1fr;
  }

  /* Stacked on a phone the markup order would bury the newest article between
     the two side columns; it belongs at the top. */
  .saigonchess3 .saigonchess3__lead {
    order: -1;
  }

  .saigonchess3 .saigonchess3__lead .jacl-item__media,
  .saigonchess3 .saigonchess3__lead .jacl-item__media a {
    aspect-ratio: 4 / 3;
    height: auto;
  }

  .saigonchess3 .saigonchess3__lead {
    height: auto;
  }

  .saigonchess3 .saigonchess3__side {
    grid-template-rows: none;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 575px) {
  .saigonchess3 .saigonchess3__side {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   Kiểu bài bọc ảnh trong .scn-media-wrap
   -------------------------------------------------------------------------
   Khối ở trên đặt `height: 100%` theo chuỗi
       .saigonchess3__lead > .jacl-item > .jacl-item__inner > .jacl-item__media
   Ba kiểu bài scn-cat-in, scn-cat-in-intro và scn-overlay-intro chèn thêm một
   lớp `.scn-media-wrap` vào giữa. Lớp đó không nằm trong chuỗi nên cao tự động,
   mà `height: 100%` của ảnh lại tính theo nó → ra 0 → **ảnh biến mất**, phần chữ
   rơi xuống nền trắng. Đúng hiện tượng tin nổi bật mất ảnh.

   Thay vì nối dài chuỗi 100% (sẽ đè bẹp phần chữ nằm dưới ảnh của các kiểu
   "-intro"), dựng thẻ thành cột co giãn: ảnh ăn hết chỗ thừa, chữ lấy đúng
   chiều cao nó cần.
   ========================================================================= */

.saigonchess3 .saigonchess3__lead .jacl-item__inner {
  display: flex;
  flex-direction: column;
}

.saigonchess3 .saigonchess3__lead .scn-media-wrap {
  flex: 1 1 auto;
  min-height: 0;          /* thiếu dòng này thì ảnh không co lại được */
  margin-bottom: 0;
}

.saigonchess3 .saigonchess3__lead .scn-media-wrap .jacl-item__media,
.saigonchess3 .saigonchess3__lead .scn-media-wrap .jacl-item__media a {
  height: 100%;
  aspect-ratio: auto;
  padding-bottom: 0;
}

/* Chữ nằm dưới ảnh giữ chiều cao tự nhiên, không bị kéo giãn theo. */
.saigonchess3 .saigonchess3__lead .jacl-item__inner > .jacl-item__body {
  flex: 0 0 auto;
  /* `assets/style.css` (nền JA) đặt `height: 100%` cho MỌI .jacl-item__body.
     Trong thẻ flex dọc, phần chữ nuốt trọn chiều cao và ép khung ảnh còn 0 —
     đo được: body 763px, khung ảnh 0px. Trả về auto để ảnh lấy phần còn lại. */
  height: auto;
  padding-top: 12px;
}

/* .scn-overlay đặt body tuyệt đối lên ảnh nên không dính flex; trả padding về 0
   để không cộng thêm khoảng trống dưới đáy thẻ. */
.saigonchess3 .saigonchess3__lead .scn-overlay .jacl-item__inner > .jacl-item__body {
  padding-top: 0;
}