/* Import Google Font: Noto Sans Thai */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;700&display=swap');

/* General Body & Layout */
:root {
    --brand-green: #16a34a;
    --brand-dark-green: #065f46;
    --text-light: #f0fdf4;
    --text-dark: #111827;
    --bg-light: #f7faf7;
    --border-color: #e5e7eb;
}

html { font-size: 15.5px; }
body { margin: 0; font-family: 'Noto Sans Thai', sans-serif; background-color: var(--bg-light); color: var(--text-dark); font-size: 1rem; }
main { padding-top: 0; }
.wrap { max-width: 1140px; margin: 24px auto; padding: 0 16px; }

/* Header & Navigation */
#main-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 50; padding: 10px 24px; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; gap: 20px; }
.header-logo { flex-shrink: 0; }
.header-logo img { height: 60px; width: auto; display: block; }
.header-nav { display: flex; align-items: center; gap: 20px; background-color: rgba(6, 95, 70, 0.7); padding: 8px 24px; border-radius: 999px; backdrop-filter: blur(5px); flex-shrink: 0; }
.header-nav .nav-list { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.header-nav .nav-list a { color: var(--text-light); text-decoration: none; font-weight: 500; }
.lang-toggle { display: flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--brand-dark-green); background-color: white; padding: 6px 12px; border-radius: 999px; cursor: pointer; gap: 5px; }
.lang-toggle span { opacity: 0.5; transition: opacity 0.2s; }
.lang-toggle span.active { opacity: 1; }
.lang-toggle span.separator { opacity: 0.3; }
.lang-toggle span[data-lang]:hover { opacity: 0.8; }
.hamburger-menu { display: none; cursor: pointer; }
.nav-list li { position: relative; padding-bottom: 15px; margin-bottom: -15px; }
.dropdown-toggle { cursor: pointer; }
.dropdown-menu { display: none; position: absolute; top: 90%; left: -15px; min-width: 200px; background-color: white; list-style: none; padding: 8px 0; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 60; }
.nav-list li:hover > .dropdown-menu { display: block; }
.dropdown-menu li { padding: 0; margin: 0; }
.header-nav .nav-list .dropdown-menu a { color: var(--text-dark); padding: 8px 16px; display: block; white-space: nowrap; }
.dropdown-menu a:hover { background-color: var(--bg-light); }

/* Banners */
.page-banner, .detail-page-banner { width: 100%; background-size: cover; background-position: center; position: relative; color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.page-banner { height: 300px; display: flex; }
.detail-page-banner { height: 400px; }
.detail-page-banner img { width: 100%; height: 100%; object-fit: cover; }
.page-banner h1 { position: absolute; bottom: 20px; left: 5%; font-size: 2.8rem; color: white; margin: 0; }

/* Hero Slider */
#hero-slider { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.5s ease-in-out; display: flex; align-items: flex-end; padding: 50px; box-sizing: border-box; text-decoration: none; color: white; }
.hero-slide.active { opacity: 1; }
/* Hero title + subtitle */
.slide-caption h2,
.slide-caption p {
    /* existing settings */
    color: #ffffff;
    margin: 0;
    /* keep sizes below with mobile override */

    /* dark-green glow to improve contrast on pale photos */
    text-shadow:
        0 2px 4px rgba(6, 95, 70, 0.9),
        0 0 6px rgba(0, 0, 0, 0.5);
}

/* keep original sizes */
.slide-caption h2 {
    font-size: 3rem;
    margin-bottom: 10px;

    /* optional thin stroke (works in WebKit browsers) */
    -webkit-text-stroke: 0.4px rgba(6, 95, 70, 0.7);  /* dark green border */
}

.slide-caption p {
    font-size: 1.2rem;
}

/* Main Page Sections */
.section { padding: 60px 0; }
.section-title { text-align: center; font-size: 2.5rem; margin-bottom: 40px; color: var(--brand-dark-green); }
.gallery-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; }
.gallery-tab { padding: 10px 20px; font-size: 1rem; font-weight: 600; border: 2px solid var(--border-color); background-color: transparent; border-radius: 999px; cursor: pointer; transition: all 0.2s; }
.gallery-tab:hover { background-color: #e8f8ee; }
.gallery-tab.active { background-color: var(--brand-green); color: white; border-color: var(--brand-green); }

/* Styles for MAIN PAGE Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.gallery-item { position: relative; display: block; overflow: hidden; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.gallery-item::before { content: ""; display: block; padding-top: 75%; /* 4:3 Aspect Ratio */ }
.gallery-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* MODIFIED: Add !important to force the height */
    height: 100% !important;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.gallery-item:hover img { transform: scale(1.05); }

/* Styles for HIGHLIGHTED PLANTS Section */
.plant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.plant-card { display: block; text-decoration: none; background-color: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.plant-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
.plant-card img { width: 100%; object-fit: cover; display: block; }
.plant-card-name { padding: 15px; font-weight: 600; color: var(--text-dark); }

/* Styles for DETAIL PAGE */
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.detail-sidebar { position: relative; z-index: 1; }
.detail-main-content .data-card { background: white; border: 1px solid var(--border-color); padding: 24px; border-radius: 12px; }
.data-card h1 { margin-top: 0; }
.data-card .sci-name { color: #6b7280; margin-top: -10px; margin-bottom: 20px; font-style: italic; }
.kv-pair { margin-bottom: 12px; }
.kv-pair .key { font-weight: bold; color: var(--brand-dark-green); }
.detail-sidebar .gallery-card { background: white; border: 1px solid var(--border-color); padding: 16px; border-radius: 12px; }
.gallery-card h3 { margin-top: 0; }
.thumbnail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.thumbnail-grid img { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; cursor: pointer; transition: opacity 0.2s; }
.thumbnail-grid img:hover { opacity: 0.8; }
.back-button { display: block; width: 100%; margin-top: 16px; padding: 12px; background-color: var(--brand-green); color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; }

/* Other Styles (Lightbox, Table, Footer, etc.) */
.lightbox { display: none; position: fixed; z-index: 1000; inset: 0; background-color: rgba(0,0,0,0.85); backdrop-filter: blur(5px); padding: 2vh 2vw; box-sizing: border-box; justify-content: center; align-items: center; }
.lightbox.active { display: flex; }
.lightbox-content { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.lightbox-content img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox-close { position: fixed; top: 15px; right: 35px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 1002; text-shadow: 0 1px 3px black; }
.lightbox-prev, .lightbox-next { position: fixed; top: 50%; transform: translateY(-50%); color: white; font-size: 40px; cursor: pointer; padding: 16px; user-select: none; background-color: rgba(0,0,0,0.3); z-index: 1001; transition: background-color 0.2s; }
.lightbox-prev { left: 10px; } .lightbox-next { right: 10px; }
.lightbox-prev:hover, .lightbox-next:hover { background-color: rgba(0,0,0,0.6); }
.lightbox-prev.disabled, .lightbox-next.disabled { opacity: 0.3; cursor: default; background-color: rgba(0,0,0,0.3); }
.table th, .table td { padding: 12px 10px; border-bottom: 1px solid var(--border-color); font-size: 0.95rem; }
.table thead th { background: #ebfbee; color: #0b5d3b; font-weight: 700; }
.table th.sortable a { text-decoration: underline; text-decoration-style: dotted; color: inherit; cursor: pointer; }
.table th.sortable.asc a::after { content: " ▲"; font-size: 0.8em; }
.table th.sortable.desc a::after { content: " ▼"; font-size: 0.8em; }
.table .idx, .table .detail-cell { text-align: center; vertical-align: middle; }
.eye { width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
.eye svg { width: 100%; height: 100%; }
#main-footer { background-color: var(--brand-dark-green); color: var(--text-light); padding: 40px 24px; }
.footer-grid { display: grid; grid-template-columns: 2.5fr 1fr 1fr 2fr; gap: 30px; max-width: 1140px; margin: 0 auto; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.2); }
.footer-col h3 { color: white; margin-top: 0; font-size: 1.1rem; }
.footer-col ul { list-style: none; padding: 0; } .footer-col ul li { margin-bottom: 10px; }
.footer-col a { color: var(--text-light); text-decoration: none; opacity: 0.9; }
.footer-logo-col { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.footer-logo-col img { height: 100px; margin-bottom: 15px; }
.footer-bottom { text-align: center; padding-top: 20px; font-size: 14px; opacity: 0.8; max-width: 1140px; margin: 0 auto; }

/* Responsive Styles */
@media (max-width: 768px) {
    /* Make hero shorter on mobile to "zoom out" the background */
    #hero-slider {
      height: 60vh;   /* try 70vh first; use 60vh if you want even less crop */
    }
    /* Default mobile position if you want it */
    #hero-slider .hero-slide {
      background-position: center center;
    }

    /* 1st hero slide: a bit to the right of center */
    #hero-slider .hero-slide:nth-child(1) {
      background-position: 70% center;  /* 55–65% is usually a subtle shift */
    }

    /* 2nd hero slide: a bit to the left of center */
    #hero-slider .hero-slide:nth-child(2) {
      background-position: 35% center;  /* 35–45% for a slight left shift */
    }

    /* Examples for 3rd/4th if needed:
    #hero-slider .hero-slide:nth-child(3) {
      background-position: center center;
    }

    #hero-slider .hero-slide:nth-child(4) {
      background-position: 60% center; 
    }
    */
    .header-nav .nav-list { display: none; position: absolute; top: 80px; right: 24px; background-color: white; flex-direction: column; padding: 10px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
    .header-nav .nav-list.active { display: flex; }
    .header-nav .nav-list a { color: var(--text-dark); padding: 8px 12px; }
    .hamburger-menu { display: block; }
    .nav-list li { padding-bottom: 0; margin-bottom: 0; }
    .nav-list li:hover > .dropdown-menu { display: none; }
    .nav-list li.open > .dropdown-menu { display: block; position: static; box-shadow: none; margin-top: 5px; padding-left: 15px; border-top: 1px solid var(--border-color); padding-top: 10px; margin-top: 10px; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-logo-col { align-items: center; }
    .detail-grid { grid-template-columns: 1fr; }
    .page-banner h1 { font-size: 2rem; }
    .slide-caption h2 { font-size: 2rem; }
    .slide-caption p { font-size: 1rem; }
    .section-title { font-size: 2rem; }
}
/* Highlighted Plants: image on top, name below */
#highlighted-plants #highlighted-plants-grid .plant-card {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  background: #fff;
  transition: transform .3s ease, box-shadow .3s ease;
}
#highlighted-plants #highlighted-plants-grid .plant-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Make the image fill a 4:3 area, no fixed px height */
#highlighted-plants #highlighted-plants-grid .plant-card img {
  display: block;
  width: 100%;
  height: auto !important;    /* kill the old 200px height */
  aspect-ratio: 4 / 3;        /* keep tiles consistent as width changes */
  object-fit: cover;
}

/* Name sits below the image (no overlay) */
#highlighted-plants #highlighted-plants-grid .plant-card-name {
  padding: 12px 14px;
  color: var(--text-dark);
  font-weight: 600;
  line-height: 1.2;
  background: transparent;
  /* optional: clamp long names */
  display: -webkit-box;
  -webkit-line-clamp: 1;      /* change to 2 if you want two lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== News List ===== */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.news-card {
  background: #0c2e24; /* dark greenish */
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

.news-thumb-wrap { display:block; }
.news-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }

.news-body { padding: 12px 14px 16px; }
.news-title { font-size:1.07rem; margin:0 0 6px; line-height:1.3; }
.news-title a { color: var(--text-light); text-decoration: none; }
.news-title a:hover { text-decoration: underline; }
.news-meta { font-size:.86rem; color:#cde7d7; opacity:.9; margin-bottom:8px; }
.news-summary { color:#e6f4ee; opacity:.85; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:3.6em; }

/* ===== News Detail ===== */
.news-detail-hero { max-height: 440px; border-radius: 18px; overflow: hidden; }
.news-detail-hero img { width:100%; height:100%; object-fit:cover; display:block; }

.news-content { margin-top: 6px; color: var(--text-light); }
.news-content p { line-height:1.75; margin: 0 0 1em; }
.news-content h2, .news-content h3 { margin: 1.2em 0 .5em; }

/* ===== Gallery in Detail ===== */
.news-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin-top:20px; }
.news-gallery-img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; }

/* ===== Upcoming Events (home) ===== */
.event-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap: 14px; }
.event-card { display:block; background:#0c2e24; border-radius:14px; overflow:hidden; text-decoration:none; border:1px solid rgba(255,255,255,0.06); }
.event-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.event-info { padding:10px 12px 14px; }
.event-date { font-size:.86rem; opacity:.85; margin-bottom:4px; color:#cde7d7; }
.event-title { color: var(--text-light); font-weight:600; }

/* News & Events */
.news-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.25rem;
}
.news-card {
  background:#0c2e24; border:1px solid rgba(255,255,255,0.06);
  border-radius:16px; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:transform .18s ease, box-shadow .18s ease;
}
.news-card:hover { transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.35); }
.news-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.news-body { padding:12px 14px 16px; }
.news-title { font-size:1.07rem; margin:0 0 6px; line-height:1.3; }
.news-title a { color:var(--text-light); text-decoration:none; }
.news-title a:hover { text-decoration:underline; }
.news-meta { font-size:.86rem; color:#cde7d7; opacity:.9; margin-bottom:8px; }
.news-summary { color:#e6f4ee; opacity:.85; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:3.6em; }

.news-detail-hero { max-height:440px; border-radius:18px; overflow:hidden; }
.news-detail-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.news-content { margin-top:6px; color:var(--text-light); }
.news-content p { line-height:1.75; margin:0 0 1em; }
.news-content h2, .news-content h3 { margin:1.2em 0 .5em; }

.news-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin-top:20px; }
.news-gallery-img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; }

/* Upcoming Events strip (for main page) */
.event-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.event-card { display:block; background:#0c2e24; border-radius:14px; overflow:hidden; text-decoration:none; border:1px solid rgba(255,255,255,0.06); }
.event-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.event-info { padding:10px 12px 14px; }
.event-date { font-size:.86rem; opacity:.85; margin-bottom:4px; color:#cde7d7; }
.event-title { color:var(--text-light); font-weight:600; }

/* Brand color (fallback if not already defined) */
:root {
  --brand-green: #0a7a41;        /* title */
  --brand-green-dark: #075c36;   /* hover */
}

/* News card: white lower background + green title, black text */
.news-card {
  background: #fff;                         /* entire card white (image covers top) */
  border: 1px solid #e5e7eb;               /* light border */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);  /* soften shadow for white card */
}
.news-thumb { 
  border-bottom: 1px solid #e5e7eb;        /* subtle divider between image and text */
}

.news-body { 
  background: #fff; 
  color: #111;                              /* default text black */
  padding: 12px 14px 16px;                  /* ensure padding remains */
}

.news-title { margin: 0 0 6px; line-height: 1.3; }
.news-title a {
  color: var(--brand-green, #0a7a41);       /* green title */
  text-decoration: none;
}
.news-title a:hover { 
  color: var(--brand-green-dark, #075c36);
  text-decoration: underline;
}

.news-meta { 
  color: #222;                              /* black-ish meta */
  opacity: .85; 
  margin-bottom: 8px; 
  font-size: .86rem; 
}

.news-summary { 
  color: #111;                              /* black summary */
  opacity: .95; 
  display: -webkit-box;
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical; 
  overflow: hidden; 
  min-height: 3.6em; 
}

/* ---------------------------
   News grid (center the cards)
   Works on / (home) and /news/list.html
---------------------------- */
.news-grid {
  display: grid;
  /* fixed-ish column width so the whole set can center nicely */
  grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
  gap: 20px;
  justify-content: center;     /* ⬅ centers the group of columns */
  margin-inline: auto;         /* safe centering in wide containers */
}

/* If your main container is very wide and you want to visually cap the grid: */
/* #home-latest-news { max-width: 1040px; }  /* (320*3 + 20*2) uncomment if you like */
/* .news-grid { width: 100%; } */

/* ---------------------------
   News card (white lower bg + green title, black text)
   Applies to home + news list
---------------------------- */
:root {
  --brand-green: #0a7a41;
  --brand-green-dark: #075c36;
}

.news-card {
  background: #fff;                         /* whole card white */
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.news-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.18); }

.news-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; border-bottom: 1px solid #e5e7eb; }

.news-body { background: #fff; color: #111; padding: 12px 14px 16px; }

.news-title { margin: 0 0 6px; line-height: 1.3; font-size: 1.07rem; }
.news-title a { color: var(--brand-green); text-decoration: none; }
.news-title a:hover { color: var(--brand-green-dark); text-decoration: underline; }

.news-meta { font-size: .86rem; color: #222; opacity: .85; margin-bottom: 8px; }

.news-summary {
  color: #111; opacity: .95;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 3.6em;
}

/* Banner */
.page-banner { background: #0c2e24; color: #fff; padding: 28px 0; }
.page-banner .wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.page-title { margin: 0; font-size: 1.6rem; }
.page-subtitle { margin: 6px 0 0; }

/* Search bar */
.news-search .row { display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; gap: 12px; align-items: end; }
.news-search .field { display: flex; flex-direction: column; }
.news-search .lbl { font-size: .9rem; opacity: .85; margin-bottom: 6px; }
.news-search input[type="text"],
.news-search input[type="date"] { height: 38px; border: 1px solid #d1d5db; border-radius: 8px; padding: 0 10px; }
.news-search .actions { display: flex; gap: 8px; }
.btn { height: 38px; padding: 0 14px; border-radius: 8px; border: 1px solid #d1d5db; background: #fff; cursor: pointer; }
.btn-primary { background: #0a7a41; color: #fff; border-color: #0a7a41; }
.btn:hover { filter: brightness(0.98); }

/* Pager */
.pager { margin-top: 18px; display: flex; justify-content: center; }
.pager-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pg-btn { border: 1px solid #d1d5db; background: #fff; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.pg-btn.current { background: #0a7a41; color: #fff; border-color: #0a7a41; }
.pg-btn:disabled { opacity: .5; cursor: default; }
.pg-num { display: inline-flex; gap: 6px; align-items: center; }
.pg-info { margin-left: 6px; opacity: .8; font-size: .9rem; }
.dots { opacity: .5; }

/* News list: bigger/bold search labels */
.news-search .lbl {
  font-weight: 700;
  font-size: 1.05rem; /* tweak to taste (1.1rem if you want larger) */
}
.news-search .btn,
.news-search .btn-primary {
  font-weight: 600;
}

/* =========================
   Shared Banner (all pages)
   ========================= */
:root{
  --banner-height: 320px;
  --banner-overlay: linear-gradient(to top, rgba(0,0,0,.48), rgba(0,0,0,.08));
}

.page-banner{
  position: relative;
  min-height: var(--banner-height);
  background: center/cover no-repeat #0c2e24; /* fallback color */
  color: #fff;
}
.page-banner::after{
  content:"";
  position:absolute; inset:0;
  background: var(--banner-overlay);
}

.banner-caption{
  position:absolute; left:5%; bottom:16px; z-index:1;
}
.banner-caption h1{
  margin:0 0 6px 0;
  font-size:2.2rem;
  color:#fff;
}
.banner-caption p{
  margin:0;
  font-size:1.05rem;
  opacity:.95;
}

/* Container for simple content pages */
.narrow-wrap{
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* Optional size modifiers (use on .page-banner) */
.page-banner--sm { --banner-height: 220px; }
.page-banner--lg { --banner-height: 420px; }

/* Responsive tweaks */
@media (max-width: 768px){
  :root { --banner-height: 240px; }
  .banner-caption h1{ font-size:1.6rem; }
  .banner-caption p{ font-size:1rem; }
}
/* Keep banner titles on one line on wide screens */
@media (min-width: 900px) {
  .page-banner .banner-caption { max-width: none; }
  .page-banner .banner-caption h1{
    display: inline-block;
    white-space: nowrap;
    max-width: none;
    overflow-wrap: normal; /* don't force breaks */
    word-break: normal;
  }
}

/* Allow wrapping on phones so it doesn't overflow */
@media (max-width: 899.98px) {
  .page-banner .banner-caption h1{ white-space: normal; }
}
/* Ensure any direct children of .page-banner sit above the overlay */
.page-banner { position: relative; }
.page-banner::after { z-index: 0; }
.page-banner > * { position: relative; z-index: 1; }
/* Banner text alignment hygiene */
.page-banner .banner-caption h1,
.page-banner .banner-caption p{
  margin-left: 0;
  padding-left: 0;
  text-indent: 0;
}
/* Keep banner title + subtitle perfectly aligned at the left edge */
.page-banner .banner-caption h1,
.page-banner .banner-caption p {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important; /* override any global paragraph indent */
}
/* Make the caption container neutral and align children */
.page-banner .banner-caption{
  margin: 0 !important;
  padding: 0 !important;
  display: grid;        /* keeps h1 and p aligned */
  gap: 6px;
  justify-items: start; /* left-align both lines */
}

/* Hard reset for the actual title/subtitle elements */
#page-title-banner,
#page-subtitle{
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
  margin-inline-start: 0 !important;
  padding-inline-start: 0 !important;
}
/* ===== Footer brand tweaks ===== */

/* Align the brand block to the far left */
#main-footer .footer-top .wrap { 
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
#main-footer .footer-brand {
  margin-left: 0 !important;
  text-align: left !important;
}

/* Hide the text under the logo (Thai/EN labels, captions, etc.) */
#main-footer .footer-brand .brand-name,
#main-footer .footer-brand .name,
#main-footer .footer-brand figcaption,
#main-footer .footer-brand .text,
#main-footer .footer-brand span,
#main-footer .footer-brand p {
  display: none !important;
}

/* Enlarge the logo (about 2×) */
#main-footer .footer-brand .brand-logo,
#main-footer .footer-brand img {
  width: 160px !important;   /* adjust to taste */
  height: 160px !important;  /* keeps square */
  object-fit: contain;
  display: block;
}

/* Make sure nothing pushes the logo inward */
#main-footer .footer-top,
#main-footer .footer-top .wrap,
#main-footer .footer-brand {
  padding-left: 0 !important;
}
/* =========================
   Footer brand: logo only, bigger, flush left
   ========================= */

/* 1) Make the top footer row a flex row so the left block can hug the edge */
#main-footer .footer-top .wrap{
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

/* 2) Target the *first* block in that row (the logo/brand column) */
#main-footer .footer-top .wrap > *:first-child{
  margin-left: 0 !important;
  padding-left: 0 !important;
  line-height: 0 !important;   /* collapses stray text height */
  font-size: 0 !important;      /* hides any plain text nodes */
}

/* 3) Hide any captions/labels under the logo (Thai/EN etc.) */
#main-footer .footer-top .wrap > *:first-child :where(h1,h2,h3,h4,h5,h6,p,small,span,figcaption,strong,em,a){
  display: none !important;
}

/* 4) Enlarge the logo image (covers common markups: img inside div/figure) */
#main-footer .footer-top .wrap > *:first-child img{
  width: 180px !important;      /* tweak size as you like */
  height: 180px !important;
  object-fit: contain;
  display: block;
}

/* 5) If your brand is in a <figure>, strip default spacing & bullets */
#main-footer .footer-top .wrap > *:first-child figure{
  margin: 0 !important;
}
#main-footer .footer-top .wrap li{ list-style: none; } /* in case the brand sits in a list */
/* ========== Contact page ========== */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
}

.contact-form-card{
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  padding: 16px;
}
.contact-form-card .field{ display:block; margin-bottom: 12px; }
.contact-form-card .lbl{ display:block; font-weight:600; margin-bottom:6px; }
.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card textarea{
  width: 100%; border: 1px solid #d1d5db; border-radius: 8px;
  padding: 10px 12px; font: inherit; background: #fff;
}
.contact-form-card .btn{
  margin-top: 8px; width: 100%;
}

/* right column */
.contact-side .address-block{ margin-bottom: 16px; }
.contact-side .address-block h3{ margin: 0 0 8px; color: #0c2e24; }
.map-thumb{
  background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06);
  padding: 10px; text-align: center;
}
.map-thumb img{ width: 100%; height: auto; cursor: zoom-in; display:block; }
.map-thumb figcaption{ margin-top: 6px; font-size: .92rem; color: #374151; }

/* Lightbox (reuses style similar to detail pages) */
.lightbox{
  position: fixed; inset: 0; background: rgba(0,0,0,.8);
  display: none; align-items: center; justify-content: center; z-index: 9999;
}
.lightbox.active{ display: flex; }
.lightbox .lightbox-content{ position: relative; max-width: 92vw; max-height: 92vh; }
.lightbox img{ width: 100%; height: auto; display:block; border-radius: 8px; }
.lightbox .lightbox-close{
  position: absolute; top: -12px; right: -12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.65); color: #fff; line-height: 36px; text-align: center;
  font-size: 22px; cursor: pointer;
}
/* Hide Netlify honeypot row */
.hp { display: none !important; }
/* ===== Home: make Upcoming Events cards match Latest News ===== */

/* center both rows */
#home-latest-news.news-grid,
#home-events-grid.news-grid { justify-content: center; }

/* consistent card width */
#home-latest-news .news-card,
#home-events-grid .news-card { max-width: 360px; }

/* force 16:9 images and crop overflow */
#home-latest-news .news-thumb,
#home-events-grid .news-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}
#home-latest-news .news-thumb img,
#home-events-grid .news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* tighten meta spacing and clamp summary to keep heights uniform */
#home-latest-news .news-meta,
#home-events-grid .news-meta { padding: 10px 12px 12px; }

#home-latest-news .news-summary,
#home-events-grid .news-summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;          /* show up to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.4em;              /* keeps rows visually equal */
}
/* Footer social icon */
#main-footer .footer-social{
  margin-top: 8px;
  display: flex;
  gap: 10px;
}
#main-footer .footer-social .social-link{
  display: inline-flex;
  width: 32px; height: 32px;
  border-radius: 999px;
  align-items: center; justify-content: center;
  background: #1877F2;           /* Facebook blue */
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
#main-footer .footer-social .social-link svg{
  width: 18px; height: 18px; fill: #fff; display: block;
}
/* ==== Home: Gallery sizing & layout ==== */
#gallery-section .wrap { max-width: 1200px; margin: 0 auto; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

/* >=640px: 2 columns */
@media (min-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* >=1024px: 3 columns */
@media (min-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gallery-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.gallery-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* 4:3 crop like your example */
.gallery-card .thumb { aspect-ratio: 4 / 3; overflow: hidden; }
.gallery-card .thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.gallery-card .caption {
  padding: 10px 12px;
  font-size: .95rem; line-height: 1.35;
  color: #1c2d22;
}

/* clamp long captions to 2 lines */
.gallery-card .caption span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.section-subtitle{
  margin: -6px 0 18px;
  text-align: center;
  color: #1c2d22;
  opacity: .85;
  line-height: 1.45;
  font-size: 1rem;
}
/* --- WYSIWYG hygiene (applies to every page using .wysiwyg) --- */
.wysiwyg * { box-sizing: border-box; }

.wysiwyg img,
.wysiwyg svg,
.wysiwyg video {
  display: block;
  max-width: 100% !important;   /* never exceed container */
  width: auto !important;       /* override inline width="1200" etc. */
  height: auto !important;      /* keep aspect */
  margin: 10px auto;            /* center by default */
}

.wysiwyg figure { margin: 14px auto; }
.wysiwyg figcaption { font-size: .9rem; opacity: .85; text-align: center; margin-top: 6px; }

/* iframes (YouTube, maps) */
.wysiwyg iframe {
  max-width: 100% !important;
  border: 0;
}

/* responsive 16:9 wrapper for embeds */
.wysiwyg .embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 14px 0;
}
.wysiwyg .embed > iframe {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
}

/* tables: scroll on mobile, full width on desktop */
.wysiwyg .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wysiwyg table { width: 100% !important; border-collapse: collapse; }
.wysiwyg th, .wysiwyg td { padding: 8px; border-bottom: 1px solid #e5e7eb; }

/* long URLs/words won’t break layout */
.wysiwyg p, .wysiwyg li, .wysiwyg td, .wysiwyg th {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* pre/code blocks wrap instead of causing horizontal scroll-hell */
.wysiwyg pre { white-space: pre-wrap; }

/* WYSIWYG tables: default = no borders (good for layout tables with images) */
.wysiwyg table { 
  width: 100% !important;
  border-collapse: collapse !important;
  border: 0 !important;
}
.wysiwyg th,
.wysiwyg td {
  border: 0 !important;          /* kill any border incl. earlier border-bottom */
  padding: 8px;
}

/* Optional: data tables that SHOULD have lines */
.wysiwyg table.lined th,
.wysiwyg table.lined td {
  border-bottom: 1px solid #e5e7eb !important;
}
.wysiwyg table.lined thead th {
  border-bottom: 2px solid #d1d5db !important;
}
/* ==== Board Members table (desktop + responsive) ==== */
.wysiwyg table.board {
  width: 100% !important;
  table-layout: fixed;              /* prevent columns from exploding */
  border-collapse: collapse !important;
  border: 0 !important;
}

.wysiwyg table.board td,
.wysiwyg table.board th {
  border: 0 !important;
  padding: 12px 10px;
  vertical-align: middle;
}

/* Photo cell */
.wysiwyg table.board td.photo {
  width: 110px;                     /* sync with colgroup below */
}
.wysiwyg table.board td.photo img {
  width: 96px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Optional index column (if you use one) */
.wysiwyg table.board td.idx,
.wysiwyg table.board th.idx { width: 40px; text-align: right; opacity: .7; }

/* Name + Position */
.wysiwyg table.board td.name  { font-weight: 600; }
.wysiwyg table.board td.role  { color: #214d38; opacity: .9; }

/* Light separators between rows (optional) */
.wysiwyg table.board tr + tr td { border-top: 1px solid #e9efe9 !important; }

/* ===== Mobile breakpoint: stack rows into a compact layout ===== */
@media (max-width: 900px) {
  .wysiwyg table.board,
  .wysiwyg table.board thead,
  .wysiwyg table.board tbody {
    display: block;
  }
  .wysiwyg table.board tr {
    display: grid;
    grid-template-columns: 96px 1fr;         /* photo | text */
    grid-template-areas:
      "photo name"
      "photo role";
    column-gap: 12px;
    row-gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid #e9efe9 !important;
  }
  .wysiwyg table.board thead { display: none; }  /* hide header on mobile */

  .wysiwyg table.board td,
  .wysiwyg table.board th { display: block; border: 0 !important; }

  /* place cells into grid areas */
  .wysiwyg table.board td.photo { grid-area: photo; }
  .wysiwyg table.board td.name  { grid-area: name;  }
  .wysiwyg table.board td.role  { grid-area: role;  }

  /* if you have an index column, hide it on mobile */
  .wysiwyg table.board td.idx { display: none; }
}
/* === Board Members table (Photo | Name | Role [+ optional idx]) === */
.wysiwyg table.board {
  width: 100% !important;
  table-layout: fixed;                     /* stable widths */
  border-collapse: collapse !important;
  border: 0 !important;
}
.wysiwyg table.board td,
.wysiwyg table.board th {
  border: 0 !important;
  padding: 12px 10px;
  vertical-align: middle;
}

/* Desktop column widths are driven by colgroup */
.wysiwyg table.board col.idx   { width: 44px; }
.wysiwyg table.board col.photo { width: 110px; }
.wysiwyg table.board col.role  { width: 280px; }
.wysiwyg table.board col.name  { width: auto; } /* take the rest */

/* Cell styling */
.wysiwyg table.board td.idx   { text-align: right; opacity: .7; }
.wysiwyg table.board td.name  { font-weight: 600; }
.wysiwyg table.board td.role  { color: #214d38; opacity: .95; }

/* Photo */
.wysiwyg table.board td.photo img {
  width: 96px; height: 120px; object-fit: cover; border-radius: 8px; display: block;
}

/* Row separators (subtle) */
.wysiwyg table.board tr + tr td { border-top: 1px solid #e9efe9 !important; }

/* ===== Mobile: stack row into a compact card ===== */
@media (max-width: 900px) {
  .wysiwyg table.board,
  .wysiwyg table.board thead,
  .wysiwyg table.board tbody { display: block; }

  .wysiwyg table.board tr {
    display: grid;
    grid-template-columns: 96px 1fr;       /* photo | text */
    grid-template-areas:
      "photo name"
      "photo role";
    column-gap: 12px;
    row-gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid #e9efe9 !important;
  }

  .wysiwyg table.board thead { display: none; }
  .wysiwyg table.board td,
  .wysiwyg table.board th { display: block; border: 0 !important; }

  .wysiwyg table.board td.idx   { display: none; }
  .wysiwyg table.board td.photo { grid-area: photo; }
  .wysiwyg table.board td.name  { grid-area: name;  }
  .wysiwyg table.board td.role  { grid-area: role;  }
}
/* Partners strip (thin row above footer) */
.partners-strip {
  background:#f7fbf9;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.04);
  padding:14px 0;
}
.partners-grid {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap:24px;
  align-items:center;
  justify-items:center;
}
.partner img {
  max-height:60px;
  width:auto;
  display:block;
  opacity:.9;
  filter:grayscale(100%);
  transition:filter .2s ease, opacity .2s ease, transform .2s ease;
}
.partner a:hover img {
  filter:none;
  opacity:1;
  transform:scale(1.03);
}

/* Responsive tweaks */
@media (max-width: 1024px) {
  .partners-grid { grid-template-columns: repeat(3, 1fr); gap:18px; }
  .partner img { max-height:54px; }
}
@media (max-width: 640px) {
  .partners-grid { grid-template-columns: repeat(2, 1fr); gap:16px; }
  .partner img { max-height:48px; }
}
/* Related Links strip (from Globals) — UPDATED */
.links-strip{
  background:#f7fbf9;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.04);
  padding:18px 0 22px;             /* a bit more vertical padding */
}

.links-grid{
  list-style:none;
  margin:18px 0 0;                 /* EXTRA space below the title */
  padding:0;

  /* Use flex so the whole set is centered and wraps naturally */
  display:flex;
  flex-wrap:wrap;
  gap:22px 28px;                   /* row/column gaps */
  justify-content:center;          /* center the whole group */
  align-items:center;
}

/* Individual logo item */
.link-logo{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Logo image — no grayscale, no dim, no black bars */
.link-logo img{
  max-height:64px;                 /* consistent height */
  width:auto;
  display:block;
  object-fit:contain;              /* keep aspect ratio */
  background:transparent;          /* avoid any letterbox color */
  opacity:1;                       /* full color */
  filter:none;                     /* ensure no grayscale */
  transition:transform .15s ease;  /* subtle hover effect only */
}

.link-logo a:hover img{
  transform:scale(1.03);
}

/* Responsive tweaks (flex already wraps; these are optional) */
@media (max-width: 900px){
  .links-grid{ gap:18px 22px; }
  .link-logo img{ max-height:58px; }
}
@media (max-width: 600px){
  .links-grid{ gap:16px 18px; }
  .link-logo img{ max-height:52px; }
}
/* Linked section titles should keep the same green color */
.section-title { color: #0f5f4a; }              /* already there in most builds */
.section-title a{
  color: inherit;                               /* keep green */
  text-decoration: underline;                   /* keep underline */
  text-underline-offset: 4px;
}
.section-title a:visited,
.section-title a:hover,
.section-title a:active{
  color: inherit;                               /* no purple/blue states */
}
.section-title a:hover{ opacity: .9; }

/* === Upcoming Events: match Latest News layout === */

/* Grid: 1 / 2 / 3 / 4 columns by breakpoint */
#events-list {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 20px;
}
@media (min-width: 640px)  { #events-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px)  { #events-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { #events-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Card shell (mirror Latest News look) */
#upcoming-events .card,
#upcoming-events a.card {
  display: block;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform .18s ease, box-shadow .18s ease;
  text-decoration: none;
}
#upcoming-events .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

/* Image */
#upcoming-events .card .thumb img,
#upcoming-events figure img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* Remove dark/black overlay bars; make text sit below the image */
#upcoming-events .card .caption,
#upcoming-events .card .meta,
#upcoming-events [class*="overlay"],
#upcoming-events figcaption {
  position: static !important;
  background: transparent !important;
  padding: 12px 16px !important;
  color: inherit !important;
}

/* Text styles (reuse your news card tone) */
#upcoming-events .date {
  font-size: 0.92rem;
  opacity: 0.8;
  margin-bottom: 6px;
}
#upcoming-events .title {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 0;
  color: var(--text-dark, #111827);
}
/* === Upcoming Events: same grid as Latest News (1/2/3/4 columns) === */
#home-upcoming {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 20px;
}
@media (min-width: 640px)  { #home-upcoming { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px)  { #home-upcoming { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { #home-upcoming { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Card look-and-feel (match news cards; no black overlay) */
#upcoming-events .card,
#upcoming-events a.card {
  display: block;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform .18s ease, box-shadow .18s ease;
  text-decoration: none;
  color: inherit;
}
#upcoming-events .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

/* Image at top */
#upcoming-events .card .thumb img,
#upcoming-events figure img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* Kill any dark overlay styles & place text below the image */
#upcoming-events .card .caption,
#upcoming-events .card .meta,
#upcoming-events [class*="overlay"],
#upcoming-events figcaption {
  position: static !important;
  background: transparent !important;
  padding: 12px 16px !important;
  color: inherit !important;
}

/* Text styles to match the news section */
#upcoming-events .date {
  font-size: 0.92rem;
  opacity: 0.8;
  margin-bottom: 6px;
}
#upcoming-events .title {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 0;
  color: var(--text-dark, #111827);
}
/* ==== Upcoming Events: match Latest News grid & white cards ==== */
#upcoming-events .event-grid{
  display:grid;
  /* center the set and allow up to 4 columns on wide screens */
  grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
  gap:20px;
  justify-content:center;
  margin-inline:auto;
}

/* card look = same vibe as .news-card (white body, green title) */
#upcoming-events .event-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
#upcoming-events .event-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}

/* image on top, 16:9 like news */
#upcoming-events .event-thumb{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  border-bottom:1px solid #e5e7eb;
}

/* text block (no dark bg) */
#upcoming-events .event-info{
  background:#fff;
  color:#111;
  padding:12px 14px 16px;
}
#upcoming-events .event-date{
  font-size:.86rem; color:#222; opacity:.85; margin-bottom:8px;
}
#upcoming-events .event-title{
  font-weight:600; line-height:1.3;
  color:var(--brand-green);
}
#upcoming-events .event-title:hover{ text-decoration:underline; }
/* === Upcoming Events: FORCE same grid as Latest News (1/2/3/4 cols) === */
#upcoming-events #home-upcoming,
#upcoming-events .news-grid,
#upcoming-events .event-grid {
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 20px;
}

/* breakpoints */
@media (min-width: 640px)  {
  #upcoming-events #home-upcoming,
  #upcoming-events .news-grid,
  #upcoming-events .event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px)  {
  #upcoming-events #home-upcoming,
  #upcoming-events .news-grid,
  #upcoming-events .event-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  #upcoming-events #home-upcoming,
  #upcoming-events .news-grid,
  #upcoming-events .event-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* if any legacy “row/col” wrappers were injected, neutralize them */
#upcoming-events #home-upcoming .row { display: contents !important; }
#upcoming-events #home-upcoming [class*="col-"] { width: auto !important; }

/* card visuals (no black overlays) */
#upcoming-events .card,
#upcoming-events a.card {
  display: block;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform .18s ease, box-shadow .18s ease;
  text-decoration: none;
  color: inherit;
}
#upcoming-events .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}
#upcoming-events .card .thumb img { width: 100%; height: 200px; object-fit: cover; display: block; }

#upcoming-events .card .caption,
#upcoming-events .card .meta,
#upcoming-events [class*="overlay"],
#upcoming-events figcaption {
  position: static !important;
  background: transparent !important;
  padding: 12px 16px !important;
  color: inherit !important;
}

#upcoming-events .date  { font-size: 0.92rem; opacity: .8; margin-bottom: 6px; }
#upcoming-events .title { font-size: 1.05rem; font-weight: 800; line-height: 1.35; margin: 0; color: var(--text-dark, #111827); }
/* === UPCOMING EVENTS — width + centering fix === */

/* 1) Make the grid use real card widths and center the whole block */
#upcoming-events #home-upcoming,
#upcoming-events .event-grid,
#upcoming-events .news-grid {
  display: grid !important;
  grid-auto-flow: row !important;
  /* 1 / 2 / 3 / 4 columns with solid minimum width per card */
  grid-template-columns: repeat(1, minmax(300px, 1fr)) !important;
  gap: 24px !important;

  /* center the set when there are fewer than 4 items */
  justify-content: center !important;
  /* keep the grid itself centered within the page */
  max-width: 1280px;  /* match your content width */
  margin: 0 auto;
}

/* breakpoints */
@media (min-width: 640px)  {
  #upcoming-events #home-upcoming,
  #upcoming-events .event-grid,
  #upcoming-events .news-grid {
    grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
  }
}
@media (min-width: 992px)  {
  #upcoming-events #home-upcoming,
  #upcoming-events .event-grid,
  #upcoming-events .news-grid {
    grid-template-columns: repeat(3, minmax(320px, 1fr)) !important;
  }
}
@media (min-width: 1280px) {
  #upcoming-events #home-upcoming,
  #upcoming-events .event-grid,
  #upcoming-events .news-grid {
    grid-template-columns: repeat(4, minmax(320px, 1fr)) !important;
  }
}

/* 2) Nuke any legacy row/col wrappers that force tiny widths */
#upcoming-events #home-upcoming .row { display: contents !important; }
#upcoming-events #home-upcoming [class*="col-"] { width: auto !important; }

/* 3) Ensure each card can actually grow; override any narrow inline/class widths */
#upcoming-events .card,
#upcoming-events .event-card,
#upcoming-events a.card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* Keep the clean, white-card look (no dark overlays) */
#upcoming-events .card .thumb img { width:100%; height:200px; object-fit:cover; display:block; }
#upcoming-events .card .caption,
#upcoming-events .card .meta,
#upcoming-events [class*="overlay"],
#upcoming-events figcaption {
  position: static !important;
  background: transparent !important;
  padding: 12px 16px !important;
  color: inherit !important;
}
/* === Upcoming Events: center the row + proper card widths === */
#upcoming-events #home-upcoming {
  display: grid !important;
  gap: 24px !important;

  /* Center the whole group horizontally */
  justify-content: center !important;

  /* Fixed-ish track widths so leftover space splits left/right */
  grid-template-columns: repeat(auto-fit, minmax(320px, 360px)) !important;

  /* Keep the block itself centered within the page */
  max-width: 1280px;
  margin: 0 auto;
}

/* On extra-wide screens, allow up to 4 per row by slightly smaller cards */
@media (min-width: 1440px) {
  #upcoming-events #home-upcoming {
    grid-template-columns: repeat(auto-fit, minmax(280px, 300px)) !important;
  }
}

/* Make sure cards can grow to the track width (override any old constraints) */
#upcoming-events .card,
#upcoming-events .event-card,
#upcoming-events a.card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
/* === Upcoming Events: center the whole group perfectly === */
#upcoming-events .wrap {
  max-width: 1280px;
  margin: 0 auto;              /* center the section container */
}

#upcoming-events #home-upcoming {
  display: grid !important;
  gap: 24px;

  /* columns: 1→4 cards, each with a sane width */
  grid-template-columns: repeat(auto-fit, minmax(320px, 360px));

  /* shrink-wrap the grid to its tracks, then center it */
  width: fit-content;           /* <-- key: no leftover “empty track” space */
  max-width: 100%;
  margin: 0 auto;               /* centers the shrink-wrapped grid */
  justify-content: center;      /* keeps track gaps balanced */
}

/* make sure each card can stretch to the track width */
#upcoming-events .card,
#upcoming-events .event-card,
#upcoming-events a.card {
  width: 100% !important;
  box-sizing: border-box;
}
/* === Upcoming Events — hard-center row & sane card widths === */
#upcoming-events .wrap {
  max-width: 1280px;
  margin: 0 auto;                 /* center the section block */
}

#upcoming-events #home-upcoming {
  display: flex !important;       /* override any grid/row system */
  flex-wrap: wrap;
  justify-content: center !important;  /* center the whole group */
  gap: 24px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;     /* kill any inherited left padding */
  float: none !important;         /* neutralize stray floats */
  transform: none !important;     /* neutralize accidental shifts */
}

/* Each child (card) gets a sensible width and stays centered as a group */
#upcoming-events #home-upcoming > * {
  flex: 0 1 clamp(300px, 28vw, 360px);  /* min 300, prefer ~28vw, max 360 */
  max-width: clamp(300px, 28vw, 360px);
  width: 100%;
  box-sizing: border-box;
}

/* Keep the clean, white-card look (no dark overlay) — in case not added before */
#upcoming-events .card .thumb img { width:100%; height:200px; object-fit:cover; display:block; }
#upcoming-events .card .caption,
#upcoming-events .card .meta,
#upcoming-events [class*="overlay"],
#upcoming-events figcaption {
  position: static !important;
  background: transparent !important;
  padding: 12px 16px !important;
  color: inherit !important;
}
/* Shared layout for Latest News + Upcoming (both use .news-grid) */
:root{
  --news-card-width: 320px;   /* tweak to taste (280–360px works well) */
  --news-card-gap: 20px;
}

.news-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;    /* <-- centers 1–3 cards automatically */
  gap: var(--news-card-gap);
  margin-inline: auto;
  align-items: stretch;       /* equal heights if card bodies vary */
}

/* Support both <a class="news-card"> and <div class="news-card"> */
.news-grid > a.news-card,
.news-grid > .news-card{
  flex: 0 0 var(--news-card-width);  /* fixed card width → max 4 per row */
  max-width: var(--news-card-width);
}

/* Optional: card niceties (only if not already styled) */
.news-card{ display:block; border-radius:12px; overflow:hidden; background:#fff; }
.news-card .news-body{ padding:12px 14px; }
.news-card .news-date{ font-size:.9rem; opacity:.7; display:block; margin-bottom:6px; }
.news-card .news-title{ margin:0; font-size:1.05rem; line-height:1.35; }

/* Responsive: on small screens, let cards expand */
@media (max-width: 640px){
  .news-grid > a.news-card,
  .news-grid > .news-card{
    flex: 1 1 100%;
    max-width: 100%;
  }
}
/* Latest News: up to 4 per row, centered when fewer */
:root { --news-gap: 20px; }

#home-latest-news{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;             /* center 1–3 items */
  gap: var(--news-gap);
}

/* Card width = 1/4 of the row (minus gaps) */
#home-latest-news > a.news-card,
#home-latest-news > .news-card{
  flex: 0 0 calc((100% - 3 * var(--news-gap)) / 4);
  max-width: calc((100% - 3 * var(--news-gap)) / 4);
}

/* Responsive breakpoints */
@media (max-width: 1200px){
  #home-latest-news > a.news-card,
  #home-latest-news > .news-card{
    flex-basis: calc((100% - 2 * var(--news-gap)) / 3);
    max-width: calc((100% - 2 * var(--news-gap)) / 3);
  }
}
@media (max-width: 900px){
  #home-latest-news > a.news-card,
  #home-latest-news > .news-card{
    flex-basis: calc((100% - 1 * var(--news-gap)) / 2);
    max-width: calc((100% - 1 * var(--news-gap)) / 2);
  }
}
@media (max-width: 600px){
  #home-latest-news > a.news-card,
  #home-latest-news > .news-card{
    flex-basis: 100%;
    max-width: 100%;
  }
}
/* --- Latest News grid (home) --- */
.news-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Center the whole group if fewer than 4 */
#home-latest-news.news-grid {
  justify-content: center;
}

/* Card width & image behavior */
.news-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.news-card .news-thumb,
.news-card .news-thumb-wrap {
  display: block;
  width: 100%;
}
.news-card .news-thumb img,
.news-card .news-thumb-wrap .news-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Desktop: force exactly 4 cards per row */
@media (min-width: 1100px) {
  #home-latest-news .news-card {
    /* 4 columns with 3 gaps (20px each) */
    flex: 0 1 calc((100% - (20px * 3)) / 4);
  }
}
/* === FINAL OVERRIDE — Upcoming Events matches Latest News (4 across, centered) === */
/* Container: center the group and wrap like Latest News */
#upcoming-events .event-grid,
#home-events .event-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  justify-content: center !important;   /* centers 1–3 cards */
  align-items: stretch !important;
  margin-inline: auto !important;
}

/* Card: flexible, then fixed 4-up at desktop */
#upcoming-events .event-card,
#home-events .event-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  /* default grow on small screens */
  flex: 1 1 280px !important;
  max-width: 360px !important;
}

/* Desktop: exactly 4 per row (same calc as Latest News) */
@media (min-width: 1100px) {
  #upcoming-events .event-card,
  #home-events .event-card {
    flex: 0 1 calc((100% - (20px * 3)) / 4) !important;
    max-width: calc((100% - (20px * 3)) / 4) !important;
  }
}

/* Image: enforce 16:9; kill fixed heights from older blocks */
#upcoming-events .event-thumb,
#home-events .event-thumb {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
}

/* Text block */
#upcoming-events .event-info,
#home-events .event-info {
  padding: 12px 14px 16px !important;
  background: #fff !important;
  color: #111 !important;
  border-top: 1px solid #e5e7eb !important;
}

/* Tidy text like news cards */
#upcoming-events .event-date,
#home-events .event-date { font-size: .86rem; color:#222; opacity:.85; margin-bottom: 8px; }
#upcoming-events .event-title,
#home-events .event-title { font-weight: 600; line-height: 1.3; color: var(--brand-green); }
#upcoming-events .event-title:hover,
#home-events .event-title:hover { text-decoration: underline; }

/* Latest News thumbnails: prefer top edge if the image needs cropping */
#home-latest-news .news-thumb { object-fit: cover; object-position: top center !important; }