/* ภาพประกอบในกำหนดการวันงาน
   ────────────────────────────────────────────────────────────────
   แต่ละพิธีมีภาพของตัวเอง ทำให้แขกกวาดตาแล้วรู้ทันทีว่าช่วงไหนคืออะไร
   โดยไม่ต้องอ่านทุกบรรทัด และช่วยให้คนต่างชาติหรือคนที่ไม่คุ้นพิธีไทย
   พอเดาออกว่าแต่ละช่วงเกิดอะไรขึ้น

   โหลดเป็นไฟล์สุดท้ายต่อจาก editorial.css เพราะต้องเขียนทับ
   grid-template-columns ของ .event ที่ตั้งไว้หลายที่
   ไฟล์นี้จึงต้องอยู่ท้ายสุดในรายการ <link> เสมอ */

/* บีบตารางให้แคบลงแล้ววางไว้กลางหน้า
   ของเดิมคอลัมน์ชื่อพิธีเป็น 1fr จึงยืดเต็มความกว้างจอ
   ดันภาพไปติดขอบขวาสุด เหลือช่องว่างกลางเป็นพืดบนจอกว้าง
   พอจำกัดความกว้างรวมแล้ว เวลา ชื่อพิธี และภาพจะอยู่ใกล้กันเป็นกลุ่มเดียว */
.events {
  max-width: 620px;
  margin-inline: auto;
}

.event {
  grid-template-columns: 132px minmax(0, 1fr) 92px;
  gap: 24px;
  align-items: center;
}

/* ชื่อพิธีจัดกึ่งกลางช่องของตัวเอง คือกลางระหว่างเวลากับรูป
   ของเดิมชิดซ้าย เลยเหลือช่องว่างยาวก่อนถึงรูปทางขวา */
.event p {
  text-align: center;
}

.event-art {
  grid-column: 3;
  grid-row: 1;
  width: 92px;
  height: 92px;
  object-fit: contain;
  /* ภาพต้นฉบับเป็นสีน้ำบนพื้นขาว ลดความเข้มลงนิดให้กลมกลืนกับพื้นชมพูอ่อน
     ไม่ให้แย่งสายตาไปจากเวลาและชื่อพิธีซึ่งเป็นข้อมูลหลัก */
  opacity: .94;
  /* ภาพวาดบนพื้นขาว พอวางบนพื้นชมพูอ่อนจะเห็นเป็นแผ่นขาวลอยอยู่
     multiply ทำให้ส่วนที่ขาวกลืนไปกับพื้นหลัง เหลือแต่เนื้อภาพจริง */
  mix-blend-mode: multiply;
  /* กึ่งกลางคอลัมน์ ไม่ใช่ชิดขวา ทุกใบจะได้อยู่แนวตั้งเดียวกันพอดี
     (ไอคอนถูกจัดกึ่งกลางในกรอบจัตุรัสมาแล้วตั้งแต่ตอนสร้างไฟล์) */
  justify-self: center;
  align-self: center;
  pointer-events: none;
}

/* แท็บเล็ต — ย่อภาพลงแต่ยังอยู่คอลัมน์เดิม */
@media (max-width: 860px) {
  .events { max-width: none; }
  .event { grid-template-columns: 110px minmax(0, 1fr) 74px; gap: 18px; }
  .event-art { width: 74px; height: 74px; }
}

/* มือถือ — อยู่บรรทัดเดียวกันทั้งสามอย่าง เวลา · ชื่อพิธี · ภาพ
   เรียงคอลัมน์เท่านั้น ไม่ขึ้นบรรทัดใหม่ ภาพจึงไม่หลุดไปกองข้างล่าง

   ความกว้างคอลัมน์เวลาและภาพตั้งเป็นค่าคงที่ ส่วนชื่อพิธีใช้ minmax(0,1fr)
   เพื่อให้ยืดหดได้และบีบตัวเองเมื่อที่ไม่พอ แทนที่จะดันคอลัมน์อื่นจนล้น

   align-items ที่ .event จัดทุกอย่างให้อยู่กึ่งกลางแนวตั้งตรงกัน */
@media (max-width: 620px) {
  .event {
    grid-template-columns: 78px minmax(0, 1fr) 58px;
    gap: 14px;
    align-items: center;
    padding: 18px 0;
  }
  .event time { grid-column: 1; grid-row: 1; font-size: 32px; line-height: 1.2; }
  .event p    { grid-column: 2; grid-row: 1; align-self: center; }
  .event-art {
    grid-column: 3;
    grid-row: 1;
    width: 58px;
    height: 58px;
    justify-self: center;
    align-self: center;
    margin: 0;
  }
}

/* จอเล็กมาก ย่อทุกอย่างลงพร้อมกัน ให้ยังอยู่บรรทัดเดียว */
@media (max-width: 380px) {
  .event { grid-template-columns: 66px minmax(0, 1fr) 46px; gap: 10px; }
  .event time { font-size: 27px; }
  .event p { font-size: 15px; line-height: 1.7; }
  .event-art { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: no-preference) {
  .event-art { transition: transform .4s ease; }
  .event:hover .event-art { transform: scale(1.06) rotate(-2deg); }
}