/* ===== News Home (homepage section) =====================================
 *
 * Reuses global news-card markup; overrides scoped under `.iw-news-home` to
 * simplify the card (image + title only) and to override the listing-page
 * mobile compact "row" layout — homepage mobile shows vertical cards in a
 * Swiper carousel.
 *
 * Design source: Figma 407:41830 (desktop), 407:42431 (mobile).
 */

.iw-news-home {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #ffffff;
  font-family: inherit;
  color: #3d3d3d;
}

.iw-news-home__inner {
  max-width: var(--iw-container-max);
  margin: 0 auto;
  padding: 80px var(--iw-container-pad-x);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
  box-sizing: border-box;
}

.iw-news-home__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.iw-news-home__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.iw-news-home__title {
  margin: 0;
  font-family: inherit;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #3d3d3d;
}

.iw-news-home__subtitle {
  margin: 0;
  font-family: inherit;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: #3d3d3d;
}
.iw-news-home__subtitle--left   { text-align: left; align-self: flex-start; }
.iw-news-home__subtitle--center { text-align: center; align-self: center; }
.iw-news-home__subtitle--right  { text-align: right; align-self: flex-end; }

/* ===== View-all — text + pill modifiers, color follow var(--iw-accent) === */
.iw-news-home__view-all {
  font-family: inherit;
  font-weight: 510;
  font-size: 20px;
  line-height: 28px;
  color: var(--iw-accent, #4564ed);
  text-decoration: none;
  white-space: nowrap;
}
.iw-news-home__view-all--text:hover {
  text-decoration: underline;
  color: var(--iw-accent, #4564ed);
}
.iw-news-home__view-all--pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: transparent;
  border: 2px solid var(--iw-accent, #4564ed);
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  transition: background-color 0.12s, color 0.12s;
}
.iw-news-home__view-all--pill:hover {
  background: var(--iw-accent, #4564ed);
  color: #ffffff;
  text-decoration: none;
}

/* Heading position modifiers. */
.iw-news-home__heading--center { align-items: center; text-align: center; }
.iw-news-home__heading--right  { align-items: flex-end; text-align: right; }

.iw-news-home__header--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
.iw-news-home__header--stack > .iw-news-home__view-all { align-self: center; }
.iw-news-home__view-all--bottom { align-self: center; }

.iw-news-home__empty {
  margin: 0;
  text-align: center;
  color: #6b6b6b;
}

/* ===== Slider markup → CSS grid on desktop ===============================
 *
 * Markup luôn render Swiper structure (.swiper / .swiper-wrapper /
 * .swiper-slide) để JS bind được trên mobile. Trên desktop (≥992) Swiper
 * KHÔNG init (matchMedia gate trong JS) — CSS override flex/transform của
 * Swiper sang grid để vẫn ra 4 cột như Figma.
 *
 * Override `!important` BẮT BUỘC scope vào ≥992 — nếu apply mọi viewport
 * sẽ kill width inline mà Swiper set runtime, làm slide stuck full-width
 * trên mobile/tablet.
 */
.iw-news-home__slider { width: 100%; }

/* Desktop grid override `@media (min-width: 992px)` — moved to bottom
   Responsive section cùng các @media khác. */

/* ===== Card overrides — match Figma 407:41840 ============================
 *
 * Listing card có date / excerpt / tag; homepage card khác hẳn: full
 * border 1px, radius 12px, body có bg gray, padding 16, có link "Xem thêm".
 * Hide các element không dùng + reshape phần còn lại trong scope.
 */
.iw-news-home .iw-news-card {
  gap: 0;
  border: 1px solid #d1d1d1;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

.iw-news-home .iw-news-card__media {
  border-radius: 0;
  aspect-ratio: 342 / 192;
  height: auto;
}

.iw-news-home .iw-news-card__date,
.iw-news-home .iw-news-card__excerpt,
.iw-news-home .iw-news-card__tag { display: none; }

.iw-news-home .iw-news-card__body {
  background: #f7f7f8;
  padding: 16px;
  gap: 8px;
  width: 100%;
}

/* Figma title: SF Pro Regular 16/1.4, full-width, color #3d3d3d.
   Clamp 2 lines + min-height = 2 lines để 1-dòng vs 2-dòng titles vẫn ra
   card height đều (grid stretch không tự đồng bộ vì image cùng aspect). */
.iw-news-home .iw-news-card__title {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  min-height: calc(1.4em * 2);
}
.iw-news-home .iw-news-card__title-link { color: #3d3d3d; }
.iw-news-home .iw-news-card__title-link:hover { color: var(--iw-accent, #4564ed); }

/* ===== Responsive overrides ============================================== */
/* Cascade order: min-width queries trước (desktop only), rồi max-width
   theo chiều rộng → hẹp. */

/* Desktop ≥992: Swiper KHÔNG init — CSS override flex/transform của Swiper
   sang grid 4 cột (Figma 407:41830). `!important` cần thiết để kill width
   inline mà Swiper set runtime; scope vào min-width 992 để mobile không bị. */
@media (min-width: 992px) {
  .iw-news-home__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    transform: none !important;
    flex-wrap: wrap;
  }

  .iw-news-home__slide {
    width: auto !important;
    height: auto;
  }
}

/* Mobile <992: Swiper-driven carousel. */
@media (max-width: 991px) {
  .iw-news-home__inner {
    padding: 40px 0;
    gap: 24px;
  }

  /* Header layout: KHÔNG force column — giữ row/space-between như desktop
     để bám config UX Builder (title_position + view_all_position). Admin
     chọn center/bottom → PHP add `__header--stack` → CSS stack column
     (rule ở base, vẫn apply ở mobile). Mobile chỉ co font + padding. */
  .iw-news-home__header { padding: 0 var(--iw-container-pad-x); }
  .iw-news-home__title    { font-size: 28px; line-height: 32px; }
  .iw-news-home__subtitle { font-size: 16px; line-height: 22px; }

  .iw-news-home__empty   { padding: 0 var(--iw-container-pad-x); }
  .iw-news-home__view-all {
    font-size: 16px;
    line-height: 20px;
  }
  .iw-news-home__view-all--pill { padding: 10px 20px; }

  /* Swiper takes over: undo desktop grid, let .swiper-wrapper flex. */
  .iw-news-home__slider { padding: 0 var(--iw-container-pad-x); }
  .iw-news-home__grid {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    flex-wrap: nowrap;
    /* Swiper kiểm soát transform khi đã init. Trước khi init render natively
       — slidesPerView của Swiper khi init sẽ replace. */
  }
  .iw-news-home__slide {
    flex-shrink: 0;
    height: auto;
    /* slidesPerView của Swiper override width khi init. Default visual
       trước init: 1 slide full-width, OK do JS bind ngay DOMReady. */
  }

  /* Override news-card.css mobile compact reflow (image-left list row) —
     homepage cards stay vertical inside Swiper slide. gap: 0 giữ image
     flush với body (Figma 407:41840). */
  .iw-news-home .iw-news-card--compact {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
  .iw-news-home .iw-news-card--compact .iw-news-card__media {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 342 / 192;
  }
  .iw-news-home .iw-news-card--compact .iw-news-card__body {
    flex: none;
    gap: 0;
  }
  .iw-news-home .iw-news-card--compact .iw-news-card__title {
    font-weight: 510;
    font-size: 16px;
    line-height: 22px;
  }
}

/* ===== Small mobile (<540): force "Xem tất cả" xuống dưới slider =========
 *
 * Bridge giữa admin config và viewport: admin có thể chọn view_all_position
 * = "top" cho desktop nhưng <540px không đủ chỗ cùng hàng heading. CSS unwrap
 * `__header` qua `display: contents` để view-all--top trở thành sibling của
 * slider, rồi `order` đẩy xuống dưới. View-all--bottom (admin chọn "bottom")
 * cũng được match vì cùng class `__view-all`.
 *
 * Sync với CMS: KHÔNG hoàn hảo. Admin's `view_all_position=top` vẫn render
 * DOM trong header, chỉ visual position bị override ở <540. Option
 * description trong UX Builder đã note. KHÔNG sync 2-chiều mà không
 * duplicate DOM hoặc inject JS.
 */
@media (max-width: 540px) {
  .iw-news-home__header { display: contents; }

  .iw-news-home__heading {
    padding: 0 var(--iw-container-pad-x);
    order: 1;
  }
  .iw-news-home__slider { order: 2; }
  .iw-news-home__view-all {
    order: 3;
    align-self: center;
    text-align: center;
  }
}