/* ══════════════════════════════════════════════════════════════════
   RealFactory — overlay ทั้งชุด (card + hero) · 2026-08-16
   ธีม Darina Child · ใช้ได้เหมือนกันทั้ง 7 ไซต์ (ตรวจแล้ว theme=darina,darina-child)
   วางต่อท้าย Additional CSS ที่มีอยู่ · ห้ามลบของเดิม
   ถอนออก: ลบทุกอย่างระหว่าง BEGIN–END ของบล็อกที่ไม่ต้องการ
   ══════════════════════════════════════════════════════════════════ */

/* ═══ RF: card CTA overlay — BEGIN (2026-08-16) ═══════════════════════
   ป้ายชวนคลิกบนภาพการ์ดในหน้า listing (Darina theme)
   ถอนออก: ลบทุกอย่างระหว่าง BEGIN ถึง END แล้ว Publish — ไม่ทิ้งร่องรอย
   ห้ามใส่ราคา/ส่วนลด/คำอ้างว่าเราทดสอบเอง ในข้อความ content: ด้านล่าง
   (price claim หมดอายุ = เหตุ terminate Amazon Associates · ดู docs/wordpress/hero-cta-overlay.md)
   ─────────────────────────────────────────────────────────────────── */

.grid-post .top-post .thumbinal1 {
  position: relative;
  overflow: hidden;
}

/* ม่านไล่สี ให้ตัวอักษรอ่านออกบนภาพทุกโทน */
.grid-post .top-post .thumbinal1::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(12, 14, 18, .78), rgba(12, 14, 18, 0));
  pointer-events: none;
}

.grid-post .top-post .thumbinal1::after {
  content: "Read the full review \2192";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .7em 1em;
  font: 600 .82rem/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .015em;
  color: #fff;
  pointer-events: none;          /* 🔑 ปล่อยให้ <a> ที่ครอบการ์ดรับคลิกตามเดิม */
  transform: translateY(6px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}

.grid-post:hover .top-post .thumbinal1::after,
.grid-post:focus-within .top-post .thumbinal1::after {
  transform: none;
  opacity: 1;
}

/* จอสัมผัสไม่มี hover ⇒ แสดงค้างไว้ ไม่งั้นมือถือจะไม่เห็นเลย */
@media (hover: none) {
  .grid-post .top-post .thumbinal1::after,
  .grid-post .top-post .thumbinal1::before { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .grid-post .top-post .thumbinal1::after { transition: none; transform: none; opacity: 1; }
}

/* ═══ RF: card CTA overlay — END ═══════════════════════════════════ */

/* ═══ RF: hero CTA overlay — BEGIN (2026-08-16 · แบบ D3) ══════════════
   ป้ายทับรูปในบทความ · คู่กับ docs/n8n/Image_Gen_Workflow.hero-cta.json
   คลาสตรงกับที่โหนด `Code - Inject Image Block` ปล่อยออกมาจริง (รันโค้ดตรวจแล้ว)
   ถอนออก: ลบระหว่าง BEGIN–END แล้ว Publish — รูปกลับเป็นปกติ ป้ายหายเฉย ๆ

   📌 ที่นี่ใช้ rgba / text-shadow ได้ เพราะ Additional CSS **ไม่ผ่าน kses**
      (ต่างจากตอนทดสอบด้วย style="" ใน draft ซึ่งโดนกรอง — อย่าเอาสองอย่างนี้ไปปนกัน)
   ─────────────────────────────────────────────────────────────────── */

.ge-hero { position: relative; margin: 0 auto 1.5rem; text-align: left; }
.ge-hero img { display: block; width: 100%; height: auto; }

/* 🔑 pointer-events:none จำเป็น ไม่ใช่ของประดับ — ป้ายทับแถบล่างของรูปซึ่งเป็นลิงก์ Amazon
      ถ้าไม่มี ป้ายจะกลืนคลิกตรงนั้น = เสียคลิกที่ทำเงินโดยไม่มีใครรู้ */
.ge-hero .ge-hero__cta {
  pointer-events: none;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3.6rem 1.3rem 1.1rem;
  background: linear-gradient(to top,
    rgba(10, 12, 16, .94), rgba(10, 12, 16, .6) 42%, rgba(10, 12, 16, 0));
  color: #fff;
  text-align: left;
}

/* แถบสีนำสายตา — สีเดียวกับ accent ของไซต์ */
.ge-hero .ge-hero__bar {
  display: block;
  width: 34px; height: 3px;
  background: #F0862C;
  margin-bottom: .6rem;
}

.ge-hero .ge-hero__eyebrow {
  display: block;
  font: 700 .7rem/1.25 system-ui, -apple-system, Roboto, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #B8BEC7;
  margin-bottom: .45rem;
}

.ge-hero .ge-hero__line {
  display: block;
  font: 700 1.6rem/1.24 Georgia, "Times New Roman", serif;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

@media (max-width: 600px) {
  .ge-hero .ge-hero__cta { padding: 2.6rem 1rem .9rem; }
  .ge-hero .ge-hero__line { font-size: 1.18rem; line-height: 1.28; }
  .ge-hero .ge-hero__eyebrow { font-size: .64rem; margin-bottom: .35rem; }
  .ge-hero .ge-hero__bar { width: 28px; height: 2px; margin-bottom: .5rem; }
}

/* ═══ RF: hero CTA overlay — END ═══════════════════════════════════ */