/* Pali Purple Hero Grid v1.0.3 - independent image/title toggles, white fallback ALT text, ten-post pools, cache-safe random selection, and viewport-safe slides */
:root {
  --pali-green: #034f4f;
  --pali-gold: #FFC000;
  --pali-white: #ffffff;
}

.pali-feature-grid,
.pali-feature-grid *,
.pali-feature-grid *::before,
.pali-feature-grid *::after {
  box-sizing: border-box !important;
}

/*
 * Do not use 100vw or left:50% here. In Elementor/theme containers those
 * rules make the section wider than the real content area and push it right.
 */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
  position: relative !important;
  left: var(--pali-purple-hero-shift-x, 0px) !important;
  right: auto !important;
  transform: none !important;
  display: block !important;
  width: var(--pali-purple-hero-safe-width, 100%) !important;
  min-width: 0 !important;
  max-width: var(--pali-purple-hero-safe-width, 100%) !important;
  margin: 0 !important;
  padding: 48px clamp(14px, 2.4vw, 28px) !important;
  overflow: hidden !important;
  background: var(--pali-green) !important;
  border-top: 4px solid var(--pali-gold) !important;
  border-bottom: 4px solid var(--pali-gold) !important;
  font-family: "Sarabun", sans-serif !important;
}

/*
 * Elementor can retain a desktop min-width on one of several nested wrappers.
 * Reset every wrapper that actually contains this Hero at tablet/phone sizes.
 * This is intentionally scoped with :has(#pali-purple-hero), so unrelated Elementor
 * sections keep their original sizing.
 */
@media (max-width: 1279px) {
  body:not(.wp-admin) .pali-purple-hero-viewport-ancestor,
  body:not(.wp-admin) .elementor-element:has(#pali-purple-hero),
  body:not(.wp-admin) .elementor-widget-container:has(> #pali-purple-hero),
  body:not(.wp-admin) .e-con:has(#pali-purple-hero),
  body:not(.wp-admin) .e-con-inner:has(#pali-purple-hero) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/*
 * Elementor can keep a desktop-width parent (for example 1000px) while the
 * emulated device is only 820-912px wide. The inline script supplies both
 * variables above from the section's real viewport position. `contain` also
 * prevents wide descendants from changing the page's horizontal layout.
 */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
  isolation: isolate !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-grid-inner {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  gap: 22px 26px !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 12px 0 !important;
  overflow: hidden !important;
  background: var(--pali-white) !important;
  border: 3px solid var(--pali-gold) !important;
  border-radius: 15px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .14) !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-nav {
  position: absolute !important;
  z-index: 8 !important;
  top: clamp(78px, 28%, 150px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 48px !important;
  min-width: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  border-radius: 7px !important;
  outline: 0 !important;
  background: rgba(3, 79, 79, .88) !important;
  box-shadow: 0 2px 9px rgba(0, 0, 0, .25) !important;
  color: #fff !important;
  font-family: Arial, sans-serif !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: .96 !important;
  transition: background-color .2s ease, opacity .2s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-prev {
  left: 16px !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-next {
  right: 16px !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-nav:hover,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-nav:focus-visible {
  background: #FFC000 !important;
  color: #034f4f !important;
  opacity: 1 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide {
  display: none !important;
  grid-template-rows: auto minmax(90px, 1fr) 44px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  background: var(--pali-white) !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide.is-active {
  display: grid !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide.pali-feature-title-hidden {
  grid-template-rows: auto 44px !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide.pali-feature-image-hidden {
  grid-template-rows: minmax(90px, 1fr) 44px !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide.pali-feature-image-hidden.pali-feature-title-hidden {
  grid-template-rows: 44px !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-image-hidden .pali-feature-nav {
  top: 50% !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: #102d2d !important;
  text-decoration: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image img {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #102d2d !important;
  color: var(--pali-white) !important;
  font-family: "Sarabun", sans-serif !important;
  font-size: clamp(14px, 1.45vw, 18px) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  text-align: center !important;
  transform: none !important;
  transition: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card:hover .pali-feature-image img {
  transform: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-placeholder {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--pali-white) !important;
  background: linear-gradient(135deg, #0b6664, #023b3b) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-body {
  display: flex !important;
  align-items: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 90px !important;
  padding: 10px 0 8px !important;
  overflow: hidden !important;
  background: var(--pali-white) !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image-hidden .pali-feature-body {
  align-items: center !important;
  justify-content: center !important;
  min-height: 180px !important;
  padding: 24px clamp(18px, 4vw, 42px) !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image-hidden .pali-feature-title {
  text-align: center !important;
  -webkit-line-clamp: 5 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-title {
  display: -webkit-box !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  color: #181818 !important;
  font-size: clamp(16px, 1.55vw, 20px) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-title a,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-title a:visited,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-title a:hover {
  color: #181818 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 4px 6px !important;
  overflow: hidden !important;
  border-top: 3px solid var(--pali-gold) !important;
  background: var(--pali-white) !important;
  text-align: center !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-footer a,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-footer a:visited,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-footer a:hover {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  color: #171717 !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-purple-hero-empty-front {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 1020px !important;
  min-height: 280px !important;
  margin: auto !important;
  color: var(--pali-white) !important;
  text-align: center !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-purple-hero-empty-front strong {
  font-size: 34px !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-purple-hero-empty-front span {
  font-size: 17px !important;
}

/* Large desktop */
@media (min-width: 1280px) {
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}

/* iPad Pro 1024px: same two-column/four-card arrangement as desktop. */
@media (min-width: 1024px) and (max-width: 1279px) {
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
    padding: 30px 16px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-grid-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

/* Tablet 768-1023px: two columns, including 820x1180. */
@media (min-width: 768px) and (max-width: 1023px) {
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
    padding: 26px 14px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-grid-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card {
    padding: 10px 10px 0 !important;
    border-radius: 13px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide {
    grid-template-rows: auto minmax(82px, 1fr) 42px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-body {
    min-height: 82px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image-hidden .pali-feature-body {
    min-height: 150px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-title {
    font-size: 16px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-footer a {
    font-size: 14px !important;
  }
}

/* Phones: one column and no viewport-width/full-bleed offset. */
@media (max-width: 767px) {
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
    left: var(--pali-purple-hero-shift-x, 0px) !important;
    width: var(--pali-purple-hero-safe-width, 100%) !important;
    min-width: 0 !important;
    max-width: var(--pali-purple-hero-safe-width, 100%) !important;
    margin: 0 !important;
    padding: 16px 8px 20px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-nav {
    top: clamp(70px, 26%, 125px) !important;
    width: 34px !important;
    height: 44px !important;
    min-width: 34px !important;
    font-size: 22px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-prev {
    left: 10px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-next {
    right: 10px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-grid-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 14px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 8px 8px 0 !important;
    border-width: 2px !important;
    border-radius: 11px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide {
    grid-template-rows: auto minmax(76px, 1fr) 40px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-body {
    min-height: 76px !important;
    padding: 9px 2px 7px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image-hidden .pali-feature-body {
    min-height: 130px !important;
    padding: 20px 16px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-title {
    font-size: 16px !important;
    line-height: 1.38 !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-footer {
    border-top-width: 2px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-footer a {
    font-size: 14px !important;
  }
}

/* =====================================================================
 * v1.0.6 — remove the translucent frame around the hero image.
 * Keep this block last so older responsive rules cannot restore the frame.
 * ===================================================================== */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card {
  padding: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* v1.0.8 final guard: shortcode [pali_hero_slider] must display four cards, not one large hero. */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 28px 36px !important;
  background: #ffffff !important;
  border: 1px solid #f0a8ff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-grid-inner {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card {
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid #bdbdbd !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide {
  position: absolute !important;
  inset: 0 !important;
  display: none !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border-radius: 0 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide.is-active {
  display: block !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image {
  position: absolute !important;
  inset: 8px !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: #ffffff !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image::after,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-body,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-footer,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-pause {
  display: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-nav {
  width: 28px !important;
  height: 40px !important;
  min-width: 28px !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, .55) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  opacity: .9 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-prev {
  left: 8px !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-next {
  right: 8px !important;
}

@media (max-width: 1024px) {
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
    padding: 24px 22px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-grid-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

@media (max-width: 600px) {
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
    padding: 18px 14px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-grid-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
}

/* v1.0.11 absolute final guard: honor "แสดงชื่อบทความ" after every legacy block. */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-image {
  bottom: 42px !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-body {
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  background: rgba(255, 255, 255, .96) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #5f177a !important;
  font-family: "Sarabun", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-title a,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-title a:visited,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-title a:hover {
  display: block !important;
  color: #5f177a !important;
  text-decoration: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-hidden .pali-feature-body,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-hidden .pali-feature-title,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-hidden .pali-feature-footer {
  display: none !important;
}

/* v1.0.11 absolute final guard: honor "แสดงชื่อบทความ" after every legacy block. */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-image {
  bottom: 42px !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-body {
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  background: rgba(255, 255, 255, .96) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #5f177a !important;
  font-family: "Sarabun", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-title a,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-title a:visited,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-title a:hover {
  display: block !important;
  color: #5f177a !important;
  text-decoration: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-hidden .pali-feature-body,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-hidden .pali-feature-title,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-hidden .pali-feature-footer {
  display: none !important;
}

/* v1.0.11 final guard: honor the per-card "แสดงชื่อบทความ" checkbox.
   Older blocks above intentionally hid .pali-feature-body for image-only cards,
   so this must stay at the very end of the stylesheet. */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-image {
  bottom: 42px !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-body {
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  background: rgba(255, 255, 255, .96) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #5f177a !important;
  font-family: "Sarabun", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-title a,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-title a:visited,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-title a:hover {
  display: block !important;
  color: #5f177a !important;
  text-decoration: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-hidden .pali-feature-body,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-hidden .pali-feature-title,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-hidden .pali-feature-footer {
  display: none !important;
}

/* v1.0.8: บทเรียนแนะนำต้องกลับมาเป็นกริด 4 กล่องเหมือนหน้าเดิม */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 28px 36px !important;
  background: #ffffff !important;
  border: 1px solid #f0a8ff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-grid-inner {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card {
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid #bdbdbd !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide {
  position: absolute !important;
  inset: 0 !important;
  display: none !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border-radius: 0 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide.is-active {
  display: block !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image {
  position: absolute !important;
  inset: 8px !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: #ffffff !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image::after,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-body,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-footer,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-pause {
  display: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-nav {
  width: 28px !important;
  height: 40px !important;
  min-width: 28px !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, .55) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  opacity: .9 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-prev {
  left: 8px !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-next {
  right: 8px !important;
}

@media (max-width: 1024px) {
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
    padding: 24px 22px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-grid-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

@media (max-width: 600px) {
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
    padding: 18px 14px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-grid-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
}

/* Extra-small phones such as 344x882. */
@media (max-width: 374px) {
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-title {
    font-size: 15px !important;
  }
}

/* Pali Purple Hero Grid v1.0.3 - single slideshow layout matching the original hero behavior */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
  --pali-purple-main: #d8c8f4;
  --pali-purple-soft: #f5efff;
  --pali-purple-text: #dc1d2a;
  --pali-purple-line: #334d68;
  position: relative !important;
  left: var(--pali-purple-hero-shift-x, 0px) !important;
  width: var(--pali-purple-hero-safe-width, 100%) !important;
  max-width: var(--pali-purple-hero-safe-width, 100%) !important;
  margin: 0 !important;
  padding: clamp(28px, 4.5vw, 60px) clamp(12px, 2.2vw, 28px) !important;
  overflow: hidden !important;
  background-color: var(--pali-purple-main) !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.06)),
    url("../purple-bg.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  border-top: 0 !important;
  border-bottom: 4px solid #f0b90b !important;
  font-family: "Sarabun", sans-serif !important;
}

/* v1.0.3 visual reset: brighter purple, no gold/red frame, image-first hero. */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
  --pali-purple-main: #b977ff !important;
  --pali-purple-soft: #f1dcff !important;
  --pali-purple-deep: #7c23d7 !important;
  padding: clamp(42px, 5vw, 78px) clamp(12px, 2.2vw, 28px) !important;
  background-color: var(--pali-purple-main) !important;
  background-image:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.45), transparent 26%),
    radial-gradient(circle at 84% 12%, rgba(255,255,255,.28), transparent 26%),
    linear-gradient(135deg, #e7ceff 0%, #c28cff 42%, #9f52f2 100%),
    url("../purple-bg.jpg") !important;
  background-blend-mode: screen, screen, normal, soft-light !important;
  background-size: cover !important;
  background-position: center !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card {
  min-height: clamp(430px, 34vw, 620px) !important;
  background: rgba(255,255,255,.76) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 18px 46px rgba(87, 27, 149, .18) !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide {
  background: transparent !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image {
  opacity: 1 !important;
  background: rgba(255,255,255,.72) !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image img {
  object-fit: contain !important;
  object-position: center !important;
  filter: none !important;
  background: rgba(255,255,255,.72) !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-body,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-body::after,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-kicker,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-title,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-cta,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-footer {
  display: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-nav {
  border: 0 !important;
  background: rgba(255,255,255,.86) !important;
  color: #8b58c8 !important;
  box-shadow: 0 8px 22px rgba(83, 25, 139, .18) !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-nav:hover,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-nav:focus-visible,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-pause:hover,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-pause:focus-visible {
  background: #ffffff !important;
  color: var(--pali-purple-deep) !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-pause {
  border: 0 !important;
  background: rgba(255,255,255,.8) !important;
  color: #8b58c8 !important;
  box-shadow: 0 8px 22px rgba(83, 25, 139, .18) !important;
}

@media (max-width: 767px) {
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
    padding: 28px 10px 34px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card {
    min-height: 430px !important;
  }
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-grid-inner {
  display: block !important;
  width: min(1220px, 100%) !important;
  max-width: 1220px !important;
  margin: 0 auto !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card {
  position: relative !important;
  width: 100% !important;
  min-height: clamp(300px, 30vw, 450px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 4px solid #ff2424 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide {
  display: none !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  grid-template-rows: none !important;
  background: #fff !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide.is-active {
  display: block !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide.pali-feature-image-hidden .pali-feature-image {
  display: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  opacity: .12 !important;
  overflow: hidden !important;
  background: #fff !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: saturate(.65) brightness(1.1) !important;
  transform: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-body {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: clamp(300px, 30vw, 450px) !important;
  padding: clamp(28px, 5vw, 70px) clamp(36px, 9vw, 150px) !important;
  background: transparent !important;
  text-align: center !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-kicker {
  display: block !important;
  margin: 0 0 12px !important;
  color: var(--pali-purple-text) !important;
  font-size: clamp(18px, 2.1vw, 28px) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-title {
  display: block !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  overflow: visible !important;
  color: var(--pali-purple-text) !important;
  font-size: clamp(26px, 3vw, 40px) !important;
  font-weight: 500 !important;
  line-height: 1.28 !important;
  text-align: center !important;
  -webkit-line-clamp: unset !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-title a,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-title a:visited,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-title a:hover {
  color: var(--pali-purple-text) !important;
  text-decoration: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-title-hidden .pali-feature-title {
  display: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  margin: 0 auto 22px !important;
  padding: 8px 28px !important;
  border: 1px solid #d9c9f6 !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(92, 48, 130, .16) !important;
  color: #6f4aa0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-body::after {
  content: "" !important;
  display: block !important;
  width: min(520px, 72%) !important;
  height: 18px !important;
  margin: 0 auto !important;
  border-top: 2px solid var(--pali-purple-line) !important;
  border-bottom: 2px solid var(--pali-purple-line) !important;
  box-shadow: inset 0 6px 0 transparent, 0 6px 0 -4px var(--pali-purple-line) !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-footer {
  display: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-nav {
  top: 50% !important;
  z-index: 5 !important;
  width: 56px !important;
  height: 66px !important;
  min-width: 56px !important;
  border: 3px solid rgba(0,0,0,.08) !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.12) !important;
  color: #b8b8b8 !important;
  font-size: 48px !important;
  font-weight: 700 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-prev {
  left: 18px !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-next {
  right: 18px !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-nav:hover,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-nav:focus-visible {
  background: #fff !important;
  color: #8b6ebe !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-pause {
  position: absolute !important;
  z-index: 6 !important;
  left: 50% !important;
  top: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 58px !important;
  height: 42px !important;
  min-width: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
  border: 3px solid rgba(0,0,0,.08) !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.8) !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.1) !important;
  color: #b8b8b8 !important;
  font-family: Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-pause:hover,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-pause:focus-visible {
  background: #fff !important;
  color: #8b6ebe !important;
}

@media (max-width: 767px) {
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
    padding: 22px 10px 28px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card,
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-body {
    min-height: 360px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-body {
    padding: 34px 54px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-kicker {
    font-size: 16px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-title {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-nav {
    width: 40px !important;
    height: 52px !important;
    min-width: 40px !important;
    font-size: 34px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-pause {
    width: 46px !important;
    height: 36px !important;
    min-width: 46px !important;
    font-size: 20px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-prev {
    left: 8px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-next {
    right: 8px !important;
  }
}

/* =====================================================================
 * v1.0.4 PREMIUM PURPLE HERO — seamless, no white box, multi-shade purple
 * This block is intentionally last so it wins the cascade.
 * ===================================================================== */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
  --ph-purple-1: #a98fdb;   /* pastel base */
  --ph-purple-2: #bca7e6;   /* soft lilac */
  --ph-purple-3: #cbb8ee;   /* light lilac */
  --ph-purple-4: #9a7fce;   /* deeper accent */
  --ph-glass: rgba(255,255,255,.14);
  --ph-glass-border: rgba(255,255,255,.34);
  padding: clamp(40px, 5vw, 84px) clamp(12px, 2.4vw, 40px) !important;
  overflow: hidden !important;
  background-color: var(--ph-purple-2) !important;
  /* Pastel purple with soft white flowing lines + faint blobs (inline SVG,
     no external file). A gentle diagonal wash adds premium depth. */
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201400%20660%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22bg%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23c9b3ec%22%2F%3E%3Cstop%20offset%3D%220.5%22%20stop-color%3D%22%23bfa4e8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23b295e3%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221400%22%20height%3D%22660%22%20fill%3D%22url%28%23bg%29%22%2F%3E%3C%21--%20large%20soft%20blob%20top%20--%3E%3Cpath%20d%3D%22M0%2C150%20C260%2C60%20520%2C210%20760%2C150%20C1000%2C90%201220%2C150%201400%2C110%20L1400%2C0%20L0%2C0%20Z%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.10%22%2F%3E%3C%21--%20lower-left%20rounded%20blob%20--%3E%3Cpath%20d%3D%22M0%2C300%20C160%2C250%20340%2C360%20300%2C500%20C270%2C600%20120%2C660%200%2C640%20Z%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.08%22%2F%3E%3C%21--%20bottom-right%20blob%20--%3E%3Cpath%20d%3D%22M1400%2C560%20C1260%2C520%201120%2C600%201120%2C660%20L1400%2C660%20Z%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.09%22%2F%3E%3C%21--%20flowing%20thin%20curved%20lines%20from%20bottom-left%20--%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%220.45%22%20stroke-width%3D%222.4%22%3E%3Cpath%20d%3D%22M-40%2C520%20C120%2C300%20260%2C240%20470%2C150%20C650%2C74%20860%2C110%201120%2C60%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%220.38%22%20stroke-width%3D%222.4%22%3E%3Cpath%20d%3D%22M-40%2C580%20C130%2C350%20280%2C290%20500%2C200%20C690%2C124%20900%2C160%201160%2C110%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%220.30%22%20stroke-width%3D%222.4%22%3E%3Cpath%20d%3D%22M-40%2C640%20C140%2C400%20300%2C340%20530%2C250%20C730%2C174%20940%2C210%201200%2C160%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%220.22%22%20stroke-width%3D%222.4%22%3E%3Cpath%20d%3D%22M-20%2C700%20C160%2C450%20320%2C390%20560%2C300%20C770%2C224%20980%2C260%201240%2C210%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    linear-gradient(135deg,
        var(--ph-purple-3) 0%,
        var(--ph-purple-2) 45%,
        var(--ph-purple-1) 78%,
        var(--ph-purple-4) 100%) !important;
  background-blend-mode: soft-light, normal !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Soft decorative glow bloom behind the slide, adds depth without a box edge. */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-grid-inner {
  position: relative !important;
  display: block !important;
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

/* THE FIX: card is a frosted translucent panel, NOT a solid white box.
   Rounded, soft, blends into the purple with a faint light border + glow. */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card {
  position: relative !important;
  width: 100% !important;
  min-height: clamp(420px, 33vw, 600px) !important;
  margin: 0 auto !important;
  padding: clamp(12px, 1.6vw, 22px) !important;
  overflow: hidden !important;
  background:
    linear-gradient(160deg, rgba(255,255,255,.30), rgba(255,255,255,.12)) !important;
  -webkit-backdrop-filter: blur(7px) saturate(120%) !important;
  backdrop-filter: blur(7px) saturate(120%) !important;
  border: 1px solid var(--ph-glass-border) !important;
  border-radius: 22px !important;
  outline: 0 !important;
  box-shadow:
    0 20px 52px rgba(95, 62, 160, .30),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide {
  display: none !important;
  position: absolute !important;
  inset: clamp(12px, 1.6vw, 22px) !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  grid-template-rows: none !important;
  background: transparent !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide.is-active {
  display: block !important;
}

/* The slide image now fills the frosted panel edge-to-edge and is rounded,
   so there is no hard white rectangle. cover = fills nicely, no beige gutters. */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  opacity: 1 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: transparent !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: none !important;
  transform: none !important;
  border-radius: 16px !important;
}

/* A subtle purple vignette on the image edges so it melts into the frame
   instead of ending in a sharp line. */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: 16px !important;
  box-shadow: inset 0 0 46px rgba(90, 36, 176, .28) !important;
}

/* Image-only hero: keep all text blocks hidden. */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-body,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-body::after,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-kicker,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-title,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-cta,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-footer {
  display: none !important;
}

/* Nav arrows: soft frosted circles that match the purple theme. */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-nav {
  top: 50% !important;
  z-index: 6 !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  transform: translateY(-50%) !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.22) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 22px rgba(60, 18, 120, .30) !important;
  transition: background-color .2s ease, color .2s ease, transform .2s ease !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-prev { left: clamp(14px, 2vw, 26px) !important; }
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-next { right: clamp(14px, 2vw, 26px) !important; }

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-nav:hover,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-nav:focus-visible {
  background: #ffffff !important;
  color: var(--ph-purple-1) !important;
}

/* Pause button: frosted pill, centered. */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-pause {
  position: absolute !important;
  z-index: 7 !important;
  left: 50% !important;
  top: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 40px !important;
  min-width: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.2) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
  color: #ffffff !important;
  font-family: Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 22px rgba(60, 18, 120, .28) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 0 !important;
  transition: opacity .2s ease, background-color .2s ease, color .2s ease !important;
}

/* Keep the pause control unobtrusive: reveal on hover/focus of the card. */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card:hover .pali-feature-pause,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-pause:focus-visible {
  opacity: 1 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-pause:hover,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-pause:focus-visible {
  background: #ffffff !important;
  color: var(--ph-purple-1) !important;
}

@media (max-width: 767px) {
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
    padding: 26px 12px 32px !important;
  }
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card {
    min-height: 360px !important;
    border-radius: 18px !important;
  }
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-nav {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    font-size: 20px !important;
  }
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-pause {
    opacity: 1 !important;
    width: 46px !important;
    height: 36px !important;
    min-width: 46px !important;
    font-size: 18px !important;
  }
}

/* v1.0.6 final override: no translucent frame or gap around the hero image. */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card {
  padding: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* v1.0.8 final guard: shortcode [pali_hero_slider] must display four cards, not one large hero. */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 28px 36px !important;
  background: #ffffff !important;
  border: 1px solid #f0a8ff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-grid-inner {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card {
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid #bdbdbd !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide {
  position: absolute !important;
  inset: 0 !important;
  display: none !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border-radius: 0 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-slide.is-active {
  display: block !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image {
  position: absolute !important;
  inset: 8px !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: #ffffff !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-image::after,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-body,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-footer,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-pause {
  display: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-nav {
  width: 28px !important;
  height: 40px !important;
  min-width: 28px !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, .55) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  opacity: .9 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-prev {
  left: 8px !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-next {
  right: 8px !important;
}

@media (max-width: 1024px) {
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
    padding: 24px 22px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-grid-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

@media (max-width: 600px) {
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
    padding: 18px 14px !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-grid-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
}

/* v1.0.11 real end-of-file guard: honor "แสดงชื่อบทความ" after every legacy block. */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-image {
  bottom: 42px !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-body {
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  background: rgba(255, 255, 255, .96) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #5f177a !important;
  font-family: "Sarabun", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-title a,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-title a:visited,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible .pali-feature-title a:hover {
  display: block !important;
  color: #5f177a !important;
  text-decoration: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-hidden .pali-feature-body,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-hidden .pali-feature-title,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-hidden .pali-feature-footer {
  display: none !important;
}

/* v1.0.12 real end-of-file guard: image and title toggles can work together. */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card[data-pali-static-card="1"] {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card[data-pali-static-card="1"] .pali-feature-slide.is-active {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card[data-pali-static-card="1"] .pali-feature-image {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  left: 8px !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 1 !important;
  filter: none !important;
  background: #ffffff !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible:not(.pali-feature-card-image-hidden)[data-pali-static-card="1"] .pali-feature-image {
  bottom: 44px !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card[data-pali-static-card="1"] .pali-feature-image::before,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card[data-pali-static-card="1"] .pali-feature-image::after {
  display: none !important;
  content: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card[data-pali-static-card="1"] .pali-feature-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible[data-pali-static-card="1"] .pali-feature-body {
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  background: #ffffff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible.pali-feature-card-image-hidden[data-pali-static-card="1"] .pali-feature-body {
  top: 8px !important;
  min-height: 0 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible[data-pali-static-card="1"] .pali-feature-title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #5f177a !important;
  font-family: "Sarabun", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: 1 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible[data-pali-static-card="1"] .pali-feature-title a,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible[data-pali-static-card="1"] .pali-feature-title a:visited,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-visible[data-pali-static-card="1"] .pali-feature-title a:hover {
  display: block !important;
  color: #5f177a !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-hidden[data-pali-static-card="1"] .pali-feature-body,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-hidden[data-pali-static-card="1"] .pali-feature-title,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-title-hidden[data-pali-static-card="1"] .pali-feature-footer,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card[data-pali-static-card="1"] .pali-feature-nav,
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card[data-pali-static-card="1"] .pali-feature-pause {
  display: none !important;
}

/* v1.0.14 final guard: show image and title together when both checkboxes are on. */
body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-image-visible[data-pali-static-card="1"] .pali-feature-image {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  left: 8px !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  background-color: #f7f7f7 !important;
  text-decoration: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-image-visible.pali-feature-card-title-visible[data-pali-static-card="1"] .pali-feature-image {
  bottom: 48px !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-image-visible[data-pali-static-card="1"] .pali-feature-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-image-visible[data-pali-static-card="1"] .pali-feature-placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #7a7a7a !important;
  font-family: "Sarabun", Arial, sans-serif !important;
  font-size: 14px !important;
  background-color: #f7f7f7 !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-image-hidden[data-pali-static-card="1"] .pali-feature-image {
  display: none !important;
}

body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-card-image-visible.pali-feature-card-title-visible[data-pali-static-card="1"] .pali-feature-body {
  top: auto !important;
  bottom: 8px !important;
}

/* ============================================================
   v1.0.24 — Recommended lessons: centered 1200px desktop frame
   ============================================================ */
@media (min-width: 1280px) {
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: min(calc(100% - 48px), 1200px) !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .phrc2-grid,
  body:not(.wp-admin) .pali-feature-grid#pali-purple-hero .pali-feature-grid-inner {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}