/* General Styling */
body {
    font-family: 'Google Sans', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #383e47;
    line-height: 1.6;
}

header {
    background-color: #191d3f;
    color: #fff;
    padding: 2rem 0;
    text-align: center;
    letter-spacing: 2px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

h1 {
    margin: 0;
    font-size: 2.5rem;
}

/* Gallery Container */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Responsive grid */
    gap: 25px; /* Space between items */
    padding: 30px;
    max-width: 1200px;
    margin: 40px auto; /* Center the container */
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

/* Gallery Item */
.gallery-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.gallery-item a {
    display: block;
    text-decoration: none;
    color: inherit;
    flex-grow: 1; /* Allow the link to take available space */
}

.gallery-item img {
    width: 100%;
    height: 180px; /* Fixed height for thumbnails */
    object-fit: cover; /* Crop image to fit */
    border-bottom: 1px solid #eee;
    display: block; /* Remove extra space below image */
}

.gallery-item figcaption {
    padding: 15px 10px;
    /* font-size: 1.1rem; ลบหรือคอมเมนต์บรรทัดนี้ไป เพราะจะกำหนดแยก */
    color: #555;
    /* font-weight: bold; ลบหรือคอมเมนต์บรรทัดนี้ไป เพราะจะกำหนดแยก */
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
    /* เพิ่มส่วนนี้เพื่อจัดรูปแบบภายใน figcaption */
    display: flex; /* ทำให้เนื้อหาภายใน figcaption จัดเรียงแบบ Flexbox */
    flex-direction: column; /* จัดเรียงเป็นแนวตั้ง */
    align-items: center; /* จัดให้อยู่กึ่งกลางแนวนอน */
    justify-content: center; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
    gap: 5px; /* ระยะห่างระหว่างบรรทัดบนและล่าง */
    min-height: 85px; /* กำหนดความสูงขั้นต่ำสำหรับ figcaption */
}

.gallery-item figcaption strong {
    font-size: 1.1rem; /* ขนาดตัวอักษรสำหรับชื่อกิจกรรม */
    font-weight: bold; /* ทำให้เป็นตัวหนา */
    color: #333; /* สีเข้มสำหรับชื่อกิจกรรม */
    display: block; /* ทำให้ขึ้นบรรทัดใหม่และกินพื้นที่เต็มความกว้าง */
}

.gallery-item figcaption .activity-date {
    font-size: 0.85rem; /* ขนาดตัวอักษรสำหรับวันที่ (เล็กลง) */
    color: #888; /* สีเทาสำหรับวันที่ */
    font-weight: normal; /* ทำให้ไม่เป็นตัวหนา */
    display: block; /* ทำให้ขึ้นบรรทัดใหม่และกินพื้นที่เต็มความกว้าง */
}

/* Footer */
footer {
    background-color: #191d3f;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    margin-top: 50px;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .gallery-container {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        padding: 20px;
        margin: 20px auto;
    }

    h1 {
        font-size: 2rem;
    }

    .gallery-item img {
        height: 180px;
    }
}

@media (max-width: 480px) {
    .gallery-container {
        grid-template-columns: 1fr; /* Single column on very small screens */
        padding: 15px;
    }

    h1 {
        font-size: 1.7rem;
    }

    .gallery-item img {
        height: 180px; /* Make images a bit taller on single column */
    }
}

.controls-container {
    /* text-align: right; /* จัดให้อยู่ทางขวา */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px 0; /* เพิ่ม padding */
    max-width: 1200px;
    margin: 10px auto 10px; /* จัดกึ่งกลางและดันขึ้นเล็กน้อย */
}

.controls-container label {
    margin-right: 10px;
    font-size: 1rem;
    font-weight: bold;
    color: #555;
}

.controls-container select {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    background-color: #fff;
    outline: none;
    transition: border-color 0.3s ease;
    font-family: 'Google Sans', sans-serif;
}

.controls-container select:hover,
.controls-container select:focus {
    border-color: #007bff;
}

.nav-btn{
    color: #141847;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:5px;
  text-decoration:none;
  font-weight:600;
  border:1px solid rgba(0,0,0,.15);
}

.nav-btn:hover{
  transform: translateY(-1px);
}



/* มือถือ: ให้ขึ้นคนละบรรทัด และชิดขวาจอ */
@media (max-width: 576px){
  .controls-container{
    flex-direction: column;
    align-items: flex-end;   /* ชิดขวา */
  }

  .sort-control{
    justify-content: flex-end; /* กันกรณีมีพื้นที่เหลือ */
  }

  .nav-btn{
    margin-bottom: 20px; /* เผื่อคุณเคยตั้งไว้ */
    font-size: 14px;
  }

  .controls-container label {
    font-size: 14px;
  }
  .controls-container select {
    font-size: 14px;
  }
}




.footer-email{
  color: inherit;
  text-decoration: none;
}

.footer-email i{
  margin-right: 6px;
}

/* ซ่อนคำว่า "อีเมล:" แต่ยังให้ screen reader อ่านได้ */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}