/**
 * Saigonchess additions.
 *
 * Kept in its own file so re-cloning JA Content Listing never overwrites it.
 * Loaded from mod_saigonchess_news.php.
 *
 * Colours come from variables the module prints per instance, so two blocks on
 * the same page can carry different colours without extra classes.
 */

.jacl-layout {
  --scn-h-from: #c62828;
  --scn-h-to: #ef6c00;
  --scn-h-text: #ffffff;
}

/* ------------------------------------------------------- heading: gradient */

/* A solid gradient plate with a cut corner, and a hairline that carries the eye
   across the rest of the width. */
.mod-heading.heading-gradient {
  position: relative;
  text-align: left;
  margin-bottom: calc(var(--global-spacing, 16px) * 1.2);
}

.mod-heading.heading-gradient .heading-title {
  display: inline-block;
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 9px 34px 9px 18px;
  background: linear-gradient(120deg, var(--scn-h-from) 0%, var(--scn-h-to) 100%);
  color: var(--scn-h-text);
  text-transform: uppercase;
  letter-spacing: .015em;
  border-radius: 4px 0 0 4px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}

.mod-heading.heading-gradient .heading-title span {
  color: inherit;
}

/* The rule runs behind the plate, level with its middle. */
.mod-heading.heading-gradient::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: linear-gradient(to right,
    var(--scn-h-from) 0%,
    rgba(127, 127, 127, .25) 35%,
    rgba(127, 127, 127, 0) 100%);
}

.mod-heading.heading-gradient .heading-desc {
  margin-top: 10px;
}

/* ------------------------------------------------------------ heading: bar */

/* Quieter: a thick coloured bar, the title beside it, a thin line finishing the
   row. Suits blocks that sit close together. */
.mod-heading.heading-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  margin-bottom: var(--global-spacing, 16px);
}

.mod-heading.heading-bar .heading-title {
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 6px solid;
  border-image: linear-gradient(to bottom, var(--scn-h-from), var(--scn-h-to)) 1;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.15;
  white-space: nowrap;
}

.mod-heading.heading-bar::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(127, 127, 127, .28);
}

.mod-heading.heading-bar .heading-desc {
  flex-basis: 100%;
  order: 3;
  margin-top: 8px;
}

/* ---------------------------------------------------------- heading: sport */

/* The loudest of the three: dark plate, italic caps, and the two-piece mark at
   the trailing edge. */
.mod-heading.heading-sport {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;          /* the title sits on the middle line */
  min-height: 50px;
  text-align: left;
  margin-bottom: calc(var(--global-spacing, 16px) * 1.2);
  overflow: hidden;
  border-radius: 5px;
  background: linear-gradient(105deg,
    var(--scn-h-from) 0%,
    var(--scn-h-to) 62%,
    var(--scn-h-to) 100%);
}

/* Sized to the 50px plate rather than to the template's h2 scale, which would
   push the bar back up past 90px. */
.mod-heading.heading-sport .heading-title {
  margin: 0;
  padding: 0 20px;
  font-size: 1.15rem;
  line-height: 50px;
  color: var(--scn-h-text);
  text-transform: uppercase;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .02em;
}

.mod-heading.heading-sport .heading-title span {
  color: inherit;
}

.mod-heading.heading-sport .heading-desc {
  flex-basis: 100%;
  padding: 0 20px 12px;
  color: rgba(255, 255, 255, .85);
}

/* ------------------------------------------------- heading: the title links */

/* The heading links to the category page when one is set, and should not read
   as body text while doing it. */
.mod-heading .heading-title a {
  color: inherit;
  text-decoration: none;
}

.mod-heading .heading-title a:hover,
.mod-heading .heading-title a:focus {
  color: inherit;
  text-decoration: underline;
}

/* ------------------------------------------------------- whole card clickable */

/* The gradient wash sits on top of the picture's own link and would swallow the
   click. */
.jacl-item .item-media-mask {
  pointer-events: none;
}

/* On the overlay card the caption covers the lower half of the picture, so a
   click there hit nothing. Stretch the title's link over the whole card — the
   category badge keeps its own link by sitting above it. */
.jacl-item.item-style-4.has-media .jacl-item__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.jacl-item.item-style-4.has-media .scn-cat-top {
  z-index: 4;
}

.jacl-item.item-style-4.has-media .jacl-item__body {
  z-index: 1;
}

@media (max-width: 575px) {
  .mod-heading.heading-bar .heading-title {
    white-space: normal;
  }
}

/* ------------------------------------------- heading: JA's own sixteen styles */

/* Those designs are flat — a title plus rules — and take their colour from JA's
   two variables, which the module re-points at the chosen colours. So the title
   reads, in order: the heading text colour if one was picked, otherwise the
   first colour (which is what --heading-text-color now holds), otherwise the
   template's own. The anchor is named as well, or the template's link colour
   would win over the inherited one. */
.mod-heading[class*="heading-style-"] .heading-title,
.mod-heading[class*="heading-style-"] .heading-title a {
  color: var(--scn-h-title, var(--heading-text-color));
}

/* A block that was given heading colours gets a plate even on JA's designs,
   which draw none of their own. The marker class is printed by the heading
   template only when a first colour is set, so the fourteen blocks sharing
   style-09 without colours keep JA's look exactly. */
.mod-heading.scn-has-plate[class*="heading-style-"] .heading-title {
  margin: 0;
  padding: 12px 18px;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(105deg, var(--scn-h-from) 0%, var(--scn-h-to) 100%);
  /* Spelt out rather than left to inherit: a dark title on a dark plate is the
     one failure mode worth ruling out. */
  color: var(--scn-h-text, #fff);
  line-height: 1.25;
}

.mod-heading.scn-has-plate[class*="heading-style-"] .heading-title a {
  color: inherit;
}

/* Styles 03, 04, 11 and 12 run a rule across the row and knock a gap in it with
   an opaque span. Both would cut straight through the plate. */
.mod-heading.scn-has-plate[class*="heading-style-"] .heading-title::after {
  display: none;
}

.mod-heading.scn-has-plate[class*="heading-style-"] .heading-title span {
  padding: 0;
  background: none;
  color: inherit;
}

/* The centred designs keep their centring: text-align still comes from the
   style's own rule, which the plate inherits. */
.mod-heading.scn-has-plate[class*="heading-style-"] .heading-desc {
  margin-top: 10px;
}

/* ------------------------------------------------- heading: the corner marks */

/* Saigonchess3 used to finish with diagonal speed stripes. In their place is the
   federation's own mark — the chess knight with the xiangqi elephant piece —
   lifted straight out of the logo artwork rather than redrawn, so the brushwork
   on the ring and the 象 stay exactly as they were designed.

   The file carries shape in its alpha channel and nothing else; the colour comes
   from background-color through the mask, so one declaration re-tints it.
   Behind @supports because a browser without masking would paint a plain block
   instead of a silhouette. */
.jacl-layout {
  --scn-mark: url("marks/knight-xiangqi.png");
  --scn-mark-ink: rgba(255, 255, 255, .28);
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  /* The title is a flex item, so it paints below anything positioned unless it
     is given a layer of its own. */
  .mod-heading.heading-sport .heading-title {
    position: relative;
    z-index: 1;
  }

  /* Taller than the plate on purpose: the ears and the base are trimmed off by
     the plate's own overflow, which is what keeps it a watermark rather than a
     logo stuck in the corner. */
  .mod-heading.heading-sport::after {
    content: "";
    position: absolute;
    right: -10px;
    top: -14px;
    bottom: -14px;
    width: 92px;
    pointer-events: none;
    background-color: var(--scn-mark-ink);
    -webkit-mask: var(--scn-mark) right center / auto 100% no-repeat;
    mask: var(--scn-mark) right center / auto 100% no-repeat;
  }
}

@media (max-width: 575px) {
  .mod-heading.heading-sport::after {
    width: 64px;
  }
}

/* =========================================================================
   Rê chuột lên ảnh — dùng chung cho MỌI kiểu item
   -------------------------------------------------------------------------
   Trước đây hiệu ứng này chỉ được khai báo riêng trong item-04/style.css và
   item-05/style.css, khoá theo `.item-style-4` / `.item-style-5`. Kiểu item
   nào không mang lớp `item-style-N` — như kiểu `default` — thì không bao giờ
   có hiệu ứng, dù ảnh vẫn ở đó.

   Đặt ở đây thì mọi kiểu item đều hưởng, kể cả các kiểu dựng sau này. Kiểu nào
   muốn khác (mức phóng, thời gian) cứ ghi đè trong style.css của chính nó.

   `overflow: hidden` nằm trên khung ảnh chứ không phải cả thẻ, để kiểu item có
   chữ tràn ra ngoài ảnh không bị cắt mất.
   ========================================================================= */

.jacl-item .jacl-item__media {
  overflow: hidden;
}

.jacl-item .jacl-item__media img {
  display: block;
  width: 100%;
  transition: transform .6s ease;
  will-change: transform;
}

.jacl-item.has-media:hover .jacl-item__media img,
.jacl-item.has-media:focus-within .jacl-item__media img {
  transform: scale(1.05);
}

/* Người dùng chọn giảm chuyển động trong hệ điều hành thì tôn trọng lựa chọn đó. */
@media (prefers-reduced-motion: reduce) {
  .jacl-item .jacl-item__media img {
    transition: none;
  }
  .jacl-item.has-media:hover .jacl-item__media img,
  .jacl-item.has-media:focus-within .jacl-item__media img {
    transform: none;
  }
}

/* =========================================================================
   Trung hoà viền + đệm đáy mà TEMPLATE áp lên mọi thẻ bài
   -------------------------------------------------------------------------
   `templates/saigonchess/css/template.css`, trong `@media (min-width: 992px)`,
   có một luật tám selector dạng:

       .layout-magz-2 .normal-gutters .jacl-item:not(.item-style-1), …
       { padding-bottom: 32px; border-bottom: 1px solid var(--border-color); }

   Nó nhắm vào MỌI `.jacl-item` không mang lớp `item-style-1` — tức toàn bộ bộ
   kiểu bài scn-* mới. Hậu quả: mỗi thẻ gánh thêm 32px trống + một đường kẻ ở
   đáy, nên khe giữa hai HÀNG trông dày hơn hẳn khe giữa hai CỘT dù `gap` của
   lưới đặt đều nhau. Đo trên trang thật: khe ngang 8px, khe dọc 8px, nhưng
   trong mỗi thẻ còn 33px trống dưới phần nội dung.

   Selector kia sâu bốn lớp và nằm trong file gộp được nạp SAU CSS của module,
   nên không selector thường nào ở đây thắng nổi — `!important` là cách trung
   thực để nói "mấy thẻ này không thuộc nhóm đó". Khoảng cách giữa các thẻ do
   `gap` của lưới lo, không cần đệm thêm.
   ========================================================================= */

.jacl-item.scn-overlay,
.jacl-item.scn-overlay-intro,
.jacl-item.scn-below,
.jacl-item.scn-cat-in,
.jacl-item.scn-cat-in-intro,
.jacl-item.scn-side {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

/* =========================================================================
   Lưới "ảnh trái, chữ phải" — dùng chung cho saigonchess10 và saigonchess11
   -------------------------------------------------------------------------
   Hai layout đó chỉ khác nhau ở số bài mỗi cột và cỡ chữ; toàn bộ phần khung
   nằm ở đây để sửa một chỗ là cả hai cùng đổi.

   Cả hai đều chia BỐN cột và xếp bài theo thứ tự đọc trái→phải, nên số bài mỗi
   cột chính là "Number of articles" chia cho 4: đặt 8 bài ra 2 bài/cột, đặt 12
   bài ra 3 bài/cột.

   ⚠ Thứ tự nạp CSS: saigonchess.css nạp TRƯỚC style.css của layout, và style.css
   của kiểu bài nạp SAU CÙNG (vì renderItem chạy bên trong layout). Nên muốn đè
   một quy tắc của scn-side — vốn viết hai lớp — thì ở đây phải viết BA lớp,
   bằng độ ưu tiên là thua.
   ========================================================================= */

.scn-sidegrid {
  container-type: inline-size;
}

.scn-sidegrid .jacl-layout__body > .jacl-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gutter-width, 32px);
  margin: 0;
}

.scn-sidegrid .jacl-layout__body > .jacl-row.no-gutters { gap: 0; }
.scn-sidegrid .jacl-layout__body > .jacl-row.small-gutters { gap: var(--gutter-small, 3px); }
.scn-sidegrid .jacl-layout__body > .jacl-row.large-gutters { gap: var(--gutter-large, 36px); }
.scn-sidegrid .jacl-layout__body > .jacl-row.extra-large-gutters { gap: var(--gutter-extra-large, 36px); }

/* Ô của lưới: bỏ hết bề ngang/đệm của hệ cột cũ, CSS Grid lo phần đó.
   `min-width: 0` là bắt buộc — thiếu nó một tiêu đề dài sẽ nong cột rộng ra
   thay vì xuống dòng. */
.scn-sidegrid .jacl-layout__body > .jacl-row > [class*="jacl-col"] {
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
  min-width: 0;
}

/* ------------------------------------------------ xoay thẻ thành hàng ngang */

/* Kiểu bài nào cũng thành ảnh-trái-chữ-phải, trừ hai kiểu đè chữ lên ảnh —
   ép chúng nằm ngang là hỏng hẳn dáng. */
.scn-sidegrid .jacl-item:not(.scn-overlay):not(.scn-overlay-intro) .jacl-item__inner {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
}

.scn-sidegrid .jacl-item__inner > .jacl-item__media {
  margin-bottom: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  height: auto;
  padding-bottom: 0;
  overflow: hidden;
  border-radius: 6px;
}

/* Ảnh phủ kín ô dù kiểu bài có chọn tỉ lệ nào; `position: absolute` giữ nguyên
   cách các lớp media-*-* vẫn làm, nên không chỏi với chúng. */
.scn-sidegrid .jacl-item__inner > .jacl-item__media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.scn-sidegrid .jacl-item__inner > .jacl-item__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

/* Bài không có ảnh thì chữ dùng trọn bề ngang, khỏi chừa chỗ trống. */
.scn-sidegrid .jacl-item:not(.has-media) .jacl-item__inner {
  display: block;
}

/* ------------------------------------------------------------ phần chữ */

.scn-sidegrid .jacl-item__body .jacl-item__cat {
  position: static;
  margin: 0 0 3px;
  padding-left: 0;
}

.scn-sidegrid .jacl-item__body .jacl-item__cat a {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--scn-badge, #d32f2f);
  border: 0;
}

.scn-sidegrid .jacl-item__body .jacl-item__title {
  margin-bottom: 3px;
}

.scn-sidegrid .jacl-item__body .jacl-item__title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.scn-sidegrid .jacl-item__body .jacl-item__introtext {
  margin: 0;
  opacity: .8;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.scn-sidegrid .jacl-item__body .jacl-item__introtext p {
  margin-bottom: 0;
}

.scn-sidegrid .jacl-item__body .jacl-item__meta {
  margin-top: 4px;
  margin-bottom: 0;
}

.scn-sidegrid .jacl-item__body .jacl-item__meta ul {
  margin-bottom: 0;
  font-size: 10.5px;
  text-transform: uppercase;
  opacity: .75;
}

/* --------------------------------------------------------- co theo bề ngang */

/* Ngưỡng bám theo bề ngang CỦA KHỐI, không phải của cửa sổ: module hay được đặt
   trong một cột của bố cục lưới, ở đó nó hẹp dù màn hình rộng. */
@container (max-width: 1000px) {
  .scn-sidegrid .jacl-layout__body > .jacl-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (max-width: 480px) {
  .scn-sidegrid .jacl-layout__body > .jacl-row {
    grid-template-columns: 1fr;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 991px) {
    .scn-sidegrid .jacl-layout__body > .jacl-row {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 575px) {
    .scn-sidegrid .jacl-layout__body > .jacl-row {
      grid-template-columns: 1fr;
    }
  }
}