/*
 * Products Grid T2 — [pdh_grid_v2_t2] / [pdh_grid_t2]
 * Vertical stack of horizontal-row cards (NOT swiper).
 * Card visuals live in card.css; tab styles in tab-filter.css.
 * Design source: Figma 240:6352.
 *
 * Structure:
 *   1. Container + inner + breakout
 *   2. Heading row (title, subtitle, city)
 *   3. View-all (text/pill, top/bottom)
 *   4. Slider wrap + Swiper init'd visibility
 *   5. Empty state
 *   6. Nav buttons + lock visibility
 *   7. Responsive overrides (@media — desc theo width)
 */

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

.pdh-grid-t2 {
  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-t2__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;
}

/* Wrapper bọc slider — 1536 + padding 48, overflow-x clip / overflow-y visible
   cho shadow card hiện đủ (mirror grid t1). Desktop t2 stack dọc nên cần room
   ngang + giữa các card; mobile Swiper carousel dùng kèm fade ở dưới. */
.pdh-grid-t2__inner_1536 {
  max-width: 1536px;
  margin: 20px auto 0;
  padding: 0 48px;
  box-sizing: border-box;
  overflow-x: clip;
  overflow-y: visible;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ─── 2. Heading row (title, subtitle, city) ──────────────── */

/* Heading row — keep T1 contract (left/center/right) */
.pdh-grid-t2__heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

.pdh-grid-t2__heading-row--center,
.pdh-grid-t2__heading-row--right {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.pdh-grid-t2__title {
  margin: 0;
  font-family: inherit;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #3d3d3d;
}

.pdh-grid-t2__title--center { text-align: center; }
.pdh-grid-t2__title--right  { text-align: right; }

.pdh-grid-t2__title-city {
  color: var(--iw-accent);
  text-decoration: underline;
  cursor: pointer;
  margin-left: 6px;
}

.pdh-grid-t2__subheading {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: #888;
}

/* ─── 3. View-all (text/pill, top/bottom) ─────────────────── */

/* View-all — base + style modifiers (text|pill) + position (top|bottom).
   Position do PHP quyết: heading=center auto-force bottom (xem element). */
.pdh-grid-t2__view-all {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--iw-accent);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s, background-color 0.12s, border-color 0.12s;
}

.pdh-grid-t2__view-all:hover { color: var(--iw-accent-strong); }

.pdh-grid-t2__view-all--text { padding-bottom: 4px; }
.pdh-grid-t2__view-all--text:hover { text-decoration: underline; }

.pdh-grid-t2__view-all--pill {
  padding: 10px 24px;
  border: 1.5px solid var(--iw-accent);
  border-radius: 999px;
  font-weight: 700;
  background: transparent;
}
.pdh-grid-t2__view-all--pill:hover {
  background: var(--iw-accent);
  color: #fff;
}

.pdh-grid-t2__view-all--bottom {
  align-self: center;
  margin-top: 16px;
}

/* ─── 4. Slider wrap + Swiper init'd visibility ──────────── */

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

.pdh-grid-t2__slider {
  width: 100%;
  overflow: visible;
}

/* Mobile carousel: ẩn slide ngoài view (Swiper gắn swiper-slide-visible qua
   watchSlidesProgress) — slider overflow visible nên cần che phần lộ. Desktop
   ≥1200 KHÔNG init Swiper nên rule này không áp (không có .swiper-initialized). */
.pdh-grid-t2__slider.swiper-initialized .swiper-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.pdh-grid-t2__slider.swiper-initialized .swiper-slide-visible {
  opacity: 1;
  visibility: visible;
}

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

/* Empty state (parts-template/t2/empty-state.php).
   Default ẨN — sibling .swiper, JS/PHP set `[data-iw-grid-empty="1"]` trên
   `.pdh-grid-t2__slider-wrap` để toggle. */
.pdh-grid-t2__empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 320px;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
  font-family: inherit;
}

.pdh-grid-t2__slider-wrap[data-iw-grid-empty="1"] .pdh-grid-t2__slider,
.pdh-grid-t2__slider-wrap[data-iw-grid-empty="1"] .pdh-grid-t2__nav {
  display: none;
}
.pdh-grid-t2__slider-wrap[data-iw-grid-empty="1"] .pdh-grid-t2__empty-state {
  display: flex;
}

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

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

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

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

/* ─── 6. Nav buttons + lock visibility ────────────────────── */

/* Nav buttons — chỉ hiện ≤1199 khi Swiper active. Desktop stack vertical
   không cần điều hướng. */
.pdh-grid-t2__nav {
  display: none;
  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-t2__nav::before {
  content: "";
  width: 24px;
  height: 24px;
  /* Mask thay background → chevron tô màu accent theo color scheme. */
  background-color: var(--iw-accent, #ff2881);
  -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-t2__nav:hover {
  background: #ffffff;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.16);
}

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

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

/* Ẩn nav theo TRẠNG THÁI Swiper (không cần media query):
   - Chưa init (desktop t2 stack dọc) → slider thiếu `.swiper-initialized`.
   - `swiper-button-lock`: watchOverflow thấy không đủ slide để cuộn → Swiper khoá nav. */
.pdh-grid-t2__slider:not(.swiper-initialized) ~ .pdh-grid-t2__nav,
.pdh-grid-t2__nav.swiper-button-lock {
  display: none;
}

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

/* Desktop ≥1200: KHÔNG init Swiper — cards stack vertical (Figma 240:6352).
   Override Swiper class names để dùng như flex column thường.
   Scope sang min-width: 1200 để KHÔNG đè Swiper khi init ở mobile (≤1199). */
@media (min-width: 1200px) {
  .pdh-grid-t2__slider .swiper-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .pdh-grid-t2__slider .swiper-slide {
    width: 100%;
    height: auto;
    display: flex;
  }
  .pdh-grid-t2__slider .swiper-slide > .pdh-card-t2 {
    width: 100%;
  }
}

/* Tablet 992-1199 — hiện nav button. Desktop ≥1200 hidden default,
   mobile ≤991 ẩn (swipe-only). */
@media (min-width: 992px) and (max-width: 1199px) {
  .pdh-grid-t2__nav {
    display: flex;
  }
}

/* ≤1199: Swiper sẽ init → horizontal carousel. Pre-init layout tránh FOUC.
   NOTE: gộp từ 3 block `@media (max-width: 1199px)` cũ — slide width/card,
   pre-init wrapper, heading padding. Cùng breakpoint, source order giữ
   nguyên → behavior không đổi. */
@media (max-width: 1199px) {
  .pdh-grid-t2 { padding: 40px 0; }
  .pdh-grid-t2__title { font-size: 24px; line-height: 32px; }

  /* Heading-row: row layout theo admin config. Force-bottom view-all
     chỉ ở <540 (rule riêng bên dưới). Unified với T1 + news-home. */
  .pdh-grid-t2__heading-row {
    box-sizing: border-box;
    width: 100%;
  }
  /* view-all--bottom: auto-width centered (pill phải hug text, không stretch). */
  .pdh-grid-t2__view-all--bottom {
    align-self: center;
    margin-left: var(--iw-container-pad-x);
    margin-right: var(--iw-container-pad-x);
  }

  /* Carousel: bỏ padding 48 (slidesOffset của Swiper lo lề), khớp container. */
  .pdh-grid-t2__inner_1536 {
    max-width: 100%;
    padding-left: var(--iw-container-pad-x);
    padding-right: var(--iw-container-pad-x);
    margin-top: 16px;
  }

  /* Swiper-slide base + pre-init wrapper. */
  .pdh-grid-t2__slider .swiper-slide {
    height: auto;
    display: flex;
  }
  .pdh-grid-t2__slider .swiper-slide > .pdh-card-t2 {
    width: 100%;
  }
  .pdh-grid-t2__slider:not(.swiper-initialized) .swiper-wrapper {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 24px;
    overflow-x: hidden;
  }
  .pdh-grid-t2__slider:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 calc((100% - 48px) / 3);   /* 3 cards (992–1199) */
    width: auto;
    min-width: 0;
  }
}

/* ≤991: pre-init swiper-slide ≈ 1.2 col. */
@media (max-width: 991px) {
  .pdh-grid-t2__slider:not(.swiper-initialized) .swiper-wrapper {
    gap: 16px;
  }
  .pdh-grid-t2__slider:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 calc(83.333% - 16px);   /* ≈ slidesPerView 1.2 */
  }
}

/* ===== Small mobile (<540): force "Xem tất cả" xuống dưới slider =========
 *
 * Unified với T1 + news-home. Apply cho pdh_grid_t2 (v1) lẫn pdh_grid_v2_t2.
 */
@media (max-width: 540px) {
  .pdh-grid-t2 { padding: 20px 0; }

  /* Inner full-bleed: tab nav + cards trượt sát mép, heading tự pad qua
     --iw-container-pad-x ở rules ≤1199. Match T1. */
  .pdh-grid-t2__inner {
    padding: 0px 0;
  }

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

  .pdh-grid-t2__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-t2__tabs        { order: 2; }
  .pdh-grid-t2__slider-wrap { order: 3; }

  /* view-all: auto-width centered (pill hug text, không stretch). */
  .pdh-grid-t2__view-all {
    order: 4;
    align-self: center;
    text-align: center;
    margin-left: var(--iw-container-pad-x);
    margin-right: var(--iw-container-pad-x);
  }
}