/*
 * Products Grid T1 — [pdh_grid_t1]
 * Wraps heading row + optional tab-filter + Swiper slider of package cards.
 * Card visuals live in card.css; tab styles in tab-filter.css.
 * Design source: Figma 407:41749 (desktop) + 407:42352 (mobile h-scroll).
 *
 * Structure:
 *   1. Container + inner + breakout
 *   2. Heading row (title, subtitle, view-all)
 *   3. Slider wrap + pre-init layout (FOUC guard)
 *   4. Swiper visibility (init'd state)
 *   5. Empty state
 *   6. Nav buttons
 *   7. Responsive overrides (@media — desc theo width)
 */

/* ─── 1. Container + inner + breakout ─────────────────────── */

.pdh-grid-t1 {
  /* Fullwidth breakout */
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 60px 0 60px;
  font-family: inherit;
  color: #3d3d3d;
}

.pdh-grid-t1__inner {
  max-width: var(--iw-container-max);
  margin: 0 auto;
  padding: 0 var(--iw-container-pad-x);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

/*
 * Wrapper bọc slider — rộng hơn container 48px mỗi bên (1488 + 96 = 1536) +
 * padding 48 → content = 1440 (khớp inner). overflow-x: clip chặn slide
 * off-screen, overflow-y: visible cho shadow card hiện đủ trên/dưới. 48px còn
 * chứa nút nav (-25px) không bị cắt. Thay cho trick fade opacity (gây giật).
 */
.pdh-grid-t1__inner_1536 {
  max-width: 1536px;
  margin: 32px auto 0;
  padding: 0 48px;
  box-sizing: border-box;
  overflow-x: clip;
  overflow-y: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* ─── 2. Heading row (title, subtitle, view-all) ──────────── */

.pdh-grid-t1__heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

/* Khi title center/right: stack column. View-all position do PHP quyết —
   heading=center auto-force position=bottom (xem element file). */
.pdh-grid-t1__heading-row--center,
.pdh-grid-t1__heading-row--right {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.pdh-grid-t1__title-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.pdh-grid-t1__title {
  margin: 0;
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: #3d3d3d;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.pdh-grid-t1__title--left   { justify-content: flex-start; }
.pdh-grid-t1__title--center { justify-content: center; }
.pdh-grid-t1__title--right  { justify-content: flex-end; }

.pdh-grid-t1__title-main { color: #3d3d3d; }

.pdh-grid-t1__title-city {
  /* Color follow scheme: T1 blue / T2 hồng / T3 cam... qua var(--iw-accent). */
  color: var(--iw-accent, #4564ed);
  border-bottom: 2px solid var(--iw-accent, #4564ed);
  padding-bottom: 2px;
  line-height: 48px;
}
.pdh-grid-t1__title-city.iw-location-trigger {
  cursor: pointer;
  transition: opacity .15s ease;
}
.pdh-grid-t1__title-city.iw-location-trigger:hover { opacity: .75; }
.pdh-grid-t1__title-city.iw-location-trigger:focus-visible {
  outline: 2px solid var(--iw-accent, #4564ed);
  outline-offset: 2px;
  border-radius: 2px;
}

.pdh-grid-t1__subheading {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  color: #3d3d3d;
}
.pdh-grid-t1__subheading--left   { text-align: left; }
.pdh-grid-t1__subheading--center { text-align: center; }
.pdh-grid-t1__subheading--right  { text-align: right; }

/* Base — chung cả 2 style/position. Style modifier override visual. */
.pdh-grid-t1__view-all {
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  color: var(--iw-accent, #4564ed);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s, background-color 0.12s, border-color 0.12s;
}

.pdh-grid-t1__view-all:hover { color: var(--iw-accent-strong, #3a52c4); }

/* Text style (default) — link đơn, có gạch chân nhẹ ở bottom. */
.pdh-grid-t1__view-all--text {
  padding-bottom: 6px;
}
.pdh-grid-t1__view-all--text:hover { text-decoration: underline; }

/* Pill style — outlined accent button. */
.pdh-grid-t1__view-all--pill {
  padding: 10px 24px;
  border: 1.5px solid var(--iw-accent, #4564ed);
  border-radius: 999px;
  font-weight: 700;
  background: transparent;
}
.pdh-grid-t1__view-all--pill:hover {
  background: var(--iw-accent, #4564ed);
  color: #fff;
}

/* Bottom position — center sau slider. */
.pdh-grid-t1__view-all--bottom {
  align-self: center;
  margin-top: 8px;
}

/* ─── 3. Slider wrap + pre-init layout (FOUC guard) ───────── */

/* Swiper slider wrapper — relative for absolute-positioned nav buttons. */
.pdh-grid-t1__slider-wrap {
  position: relative;
  width: 100%;
}

.pdh-grid-t1__slider {
  width: 100%;
  /* Visible để shadow card không bị clip. Slide ngoài vùng nhìn được ẩn bằng
     opacity/visibility (xem dưới) nên không lòi ra ngoài. */
  overflow: visible;
  transition: opacity 0.15s;
}

.pdh-grid-t1__slider[data-loading="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* Pre-init layout — tránh FOUC card phình to trước khi Swiper init.
   Swiper sẽ thêm class `.swiper-initialized` sau khi init xong và lúc đó
   các style flex/gap dưới đây sẽ bị Swiper override (Swiper set width
   inline trên từng slide). Responsive variants ở section 7. */
.pdh-grid-t1__slider:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  gap: 24px;
  flex-wrap: nowrap;
}
.pdh-grid-t1__slider:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 calc((100% - 72px) / 4);   /* 4 cards, 3 gaps × 24px (≥1200) */
  min-width: 0;
}

/* ─── 4. Swiper visibility (init'd state) ─────────────────── */

/* Let Swiper flex the .swiper-wrapper; override our earlier grid display. */
.pdh-grid-t1__slider .swiper-wrapper.pdh-grid-t1__row {
  align-items: stretch;
}

.pdh-grid-t1__slider .swiper-slide {
  display: flex;
  height: auto;
}

/* Slider overflow visible vẫn lộ slide rìa (dù inner_1536 đã clip bớt) → ẩn
   slide ngoài vùng nhìn bằng opacity/visibility. Swiper gắn `swiper-slide-visible`
   cho slide trong view (watchSlidesProgress). Chỉ áp sau init (tránh FOUC). */
.pdh-grid-t1__slider.swiper-initialized .swiper-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.pdh-grid-t1__slider.swiper-initialized .swiper-slide-visible {
  opacity: 1;
  visibility: visible;
}

.pdh-grid-t1__slider .swiper-slide > .pdh-card-t1 {
  width: 100%;
}

/* ─── 5. Empty state ──────────────────────────────────────── */

/* Empty state — Figma 1522:29576: icon kính lúp + 2 dòng text, căn giữa trục dọc.
   Render OUTSIDE swiper (sibling .swiper) để không bị Swiper ép width per slide.
   Default: hidden — JS/PHP set `[data-iw-grid-empty="1"]` trên `.pdh-grid-t1__slider-wrap`
   để switch hiển thị. */
.pdh-grid-t1__empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 400px;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
  font-family: inherit;
}

.pdh-grid-t1__slider-wrap[data-iw-grid-empty="1"] .pdh-grid-t1__slider,
.pdh-grid-t1__slider-wrap[data-iw-grid-empty="1"] .pdh-grid-t1__nav {
  display: none;
}
.pdh-grid-t1__slider-wrap[data-iw-grid-empty="1"] .pdh-grid-t1__empty-state {
  display: flex;
}

.pdh-grid-t1__empty-icon {
  width: 80px;
  height: 80px;
  flex: none;
}

.pdh-grid-t1__empty-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.pdh-grid-t1__empty-title {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: #252525;
}

.pdh-grid-t1__empty-desc {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: #3d3d3d;
}

/* ─── 6. Nav buttons ──────────────────────────────────────── */

/* Nav buttons — 50×50 white circle with shadow, arrow SVG centered. */
.pdh-grid-t1__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px;
  height: 50px;
  border: 0;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, box-shadow 0.12s, opacity 0.15s;
}

.pdh-grid-t1__nav::before {
  content: "";
  width: 24px;
  height: 24px;
  /* Mask thay background → chevron tô màu accent theo color scheme.
     (SVG file ngoài không recolor được; mask + background-color thì có.) */
  background-color: var(--iw-accent, #4564ed);
  -webkit-mask: url("../../img/t1/arrow-left.svg") center / 20px 20px no-repeat;
          mask: url("../../img/t1/arrow-left.svg") center / 20px 20px no-repeat;
}

.pdh-grid-t1__nav:hover {
  background: #ffffff;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.16);
}

.pdh-grid-t1__nav--prev { left: -25px; }
.pdh-grid-t1__nav--next { right: -25px; }
.pdh-grid-t1__nav--next::before { transform: rotate(180deg); }

.pdh-grid-t1__nav.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

/* ─── 7. Responsive overrides ─────────────────────────────── */
/* Cascade order: rộng → hẹp. */

/* ≤1536: inner_1536 wrapper khớp container thường thay vì 1536 bespoke. */
@media (max-width: 1536px) {
  .pdh-grid-t1__inner_1536 {
    max-width: var(--iw-container-max);
    padding: 0 var(--iw-container-pad-x);
  }
}

/* ≤1199: section padding nhẹ + pre-init swiper-slide 3 col. */
@media (max-width: 1199px) {
  .pdh-grid-t1 {
    padding: 40px 0;
  }
  /* Inner reset horizontal padding để slider full-bleed (cards extend tới
     mép phải). Header/view-all/tab-filter tự pad 16px qua rules dưới. */
  .pdh-grid-t1__inner {
    /* padding: 20px 0; */
    gap: 16px;
  }
  /* Tablet/mobile: bỏ padding 48 (quá nhiều), khớp container như inner. */
  .pdh-grid-t1__inner_1536 {
    max-width: 100%;
    padding-left: var(--iw-container-pad-x);
    padding-right: var(--iw-container-pad-x);
    margin-top: 16px;
    gap: 16px;
  }
  /* Pre-init swiper-slide: 3 cards (992-1199). */
  .pdh-grid-t1__slider:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 calc((100% - 48px) / 3);   /* 3 cards, 2 gaps × 24px */
  }
}

/* ≤992: mobile heading + hide nav + pre-init swiper-slide 1.2 col. */
@media (max-width: 992px) {
  /* Heading-row: row layout giữ theo admin config (title_position +
     view_all_position). Stack column chỉ qua modifier `--center/--right`
     hoặc force-bottom ở <540 (rule riêng bên dưới). Mirror news-home. */
  .pdh-grid-t1__heading-row {
    box-sizing: border-box;
    width: 100%;
  }
  /* view-all--bottom: auto-width centered (pill hug text, không stretch). */
  .pdh-grid-t1__view-all--bottom {
    margin-left: var(--iw-container-pad-x);
    margin-right: var(--iw-container-pad-x);
  }
  .pdh-grid-t1__title {
    font-size: 24px;
    line-height: 32px;
  }
  .pdh-grid-t1__title-city { line-height: 32px; }
  .pdh-grid-t1__subheading {
    font-size: 16px;
    line-height: 22px;
  }
  /* Mobile: shrink font + center bottom variant. Position do PHP quyết. */
  .pdh-grid-t1__view-all {
    font-size: 16px;
    line-height: 20px;
  }
  .pdh-grid-t1__view-all--text { padding-bottom: 4px; }
  .pdh-grid-t1__view-all--pill { padding: 8px 18px; }
  .pdh-grid-t1__view-all--bottom {
    align-self: center;
    text-align: center;
  }

  /* Swiper handles slidesPerView breakpoints; hide nav buttons. */
  .pdh-grid-t1__nav { display: none; }
  /* Slider-wrap full-bleed (no padding/margin); 16px lề trái áp dụng qua
     Swiper's `slidesOffsetBefore: 16` (xem iw-t1.js breakpoints). */
  .pdh-grid-t1__slider-wrap {
    margin: 0;
    padding: 0;
  }

  /* Pre-init swiper-wrapper + slide: ≈ slidesPerView 1.2. */
  .pdh-grid-t1__slider:not(.swiper-initialized) .swiper-wrapper {
    gap: 16px;
    overflow-x: hidden;       /* clip overflow để không tạo scrollbar */
  }
  .pdh-grid-t1__slider:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 calc(83.333% - 16px);
  }
}

/* ≤767: bỏ luôn padding ngang inner_1536. */
@media (max-width: 767px) {
  .pdh-grid-t1__inner_1536 {
    padding: 0;
  }
}

/* ===== Small mobile (<540): force "Xem tất cả" xuống dưới slider =========
 *
 * Unified với news-home + tất cả pdh_grid (T1/T2 và sau này T3-T5). <540px
 * chật không đủ chỗ cùng hàng heading → unwrap `__heading-row` qua
 * `display: contents` + `order` đẩy view-all xuống cuối. Padding L/R move
 * sang title-block + view-all (heading-row's box mất khi unwrap).
 *
 * Apply cho cả pdh_grid_t1 (v1) lẫn pdh_grid_v2_t1 (reuse template + class).
 * Sync với CMS: visual-only, DOM giữ vị trí gốc. Option description
 * (helpers.php iw_view_all_extra_fields) đã note.
 */
@media (max-width: 540px) {
  .pdh-grid-t1 {
    padding: 40px 0;
    /* gap: 16px; */
  }

  .pdh-grid-t1__inner {
    padding: 0;
  }

  .pdh-grid-t1__heading-row {
    padding-left: var(--iw-container-pad-x);
    padding-right: var(--iw-container-pad-x);
    display: contents;
  }

  /* title-block full-width với padding để text inset. */
  .pdh-grid-t1__title-block {
    padding-left: var(--iw-container-pad-x);
    padding-right: var(--iw-container-pad-x);
    box-sizing: border-box;
    width: 100%;
    order: 1;
  }

  .pdh-grid-t1__tabs        { order: 2; }
  .pdh-grid-t1__slider-wrap { order: 3; }

  /* view-all: auto-width centered. Margin L/R thay vì padding+width để
     pill hug text thay vì stretch full container. */
  .pdh-grid-t1__view-all {
    order: 4;
    align-self: center;
    text-align: center;
    margin-left: var(--iw-container-pad-x);
    margin-right: var(--iw-container-pad-x);
  }
}