@charset "UTF-8";

/* ---------------------------------------
   BASIC GRID & CONTAINER SETUP
   --------------------------------------- */
.gridContainer {
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
  background-color: #FFF;
}

/* ---------------------------------------
   PAGE TITLE BAR
   --------------------------------------- */
.cat-title h1 {
  width: 100%;
  font-size: 1.8em;
  font-weight: bold;
  color: white;
  background-color: #003366;
  padding: 10px 0;
  display: inline-block;
  margin-bottom: 10px;
  text-align: center;
}

/* ---------------------------------------
   NEWS GRID CONTAINER
   (4 columns on desktop)
   --------------------------------------- */
.products-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* ← 4 columns */
  gap: 15px;
  max-width: 1500px;
  margin-bottom: 10px;
         margin-left:5px;
     margin-right: 5px;
}

/* ---------------------------------------
   ONE NEWS "CARD" (GRID ITEM)
   --------------------------------------- */
.grid-item {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  text-align: center;
}

/* ---------------------------------------
   DATE BANNER AT TOP OF CARD
   --------------------------------------- */
.table_banner {
  background-color: #2872bd;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  height: 45px;
}

/* ---------------------------------------
   TITLE TEXT INSIDE CARD
   --------------------------------------- */
.field_2 {
  font-size: 18px;
  padding: 10px;
  align-items: center;
  justify-content: center;
  text-align: left;
  height: 120px;
    display: block;
}
/* Remove underline from title links */
.field_2 a {
  text-decoration: none;
}

/* Optional: restore underline on hover */
.field_2 a:hover {
  text-decoration: underline;
}

/* ---------------------------------------
   THUMBNAIL IMAGE WRAPPER
   --------------------------------------- */
.product-image-container {
 position: relative;
  display: block;       /* span full column width */
  height: 240px;        /* fixed height for desktop/iPad */
  overflow: hidden;     /* crop any overflow */
}

/* ---------------------------------------
   ACTUAL THUMBNAIL IMAGE
   --------------------------------------- */
.product-image {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------
   PAGINATION LINKS
   --------------------------------------- */
.pagination {
  text-align: center;
  margin: 2rem 0;
}

.pagination a {
  display: inline-block;
  margin: 0 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #2872bd;
  text-decoration: none;
  font-size: 0.9rem;
}

.pagination a:hover {
  background-color: #f0f0f0;
}

.pagination span.page {
  display: inline-block;
  margin: 0 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #2872bd;
  border-radius: 4px;
  background-color: #2872bd;
  color: #fff;
  font-size: 0.9rem;
}
#news_article{padding: 0.75rem 1rem; font-size: 0.9rem; color:#444; height:50px;}
#news_read_more{padding: 0 1rem 1rem;}
#news_read_more a{color:#1f6ea6; text-decoration:none;}
/* ---------------------------------------
   RESPONSIVE BREAKPOINTS
   --------------------------------------- */

/* iPad (medium screens): 3 columns */
@media (max-width: 1024px) {
  .products-container {
    grid-template-columns: repeat(3, 1fr);
       gap: 5px;
    /* make every row the same height (so cards stretch to match tallest in their row) */
    grid-auto-rows: 1fr;
    align-items: stretch;
     margin-left:5px;
     margin-right: 5px;
  }
        .product-image-container {
    height: 250px;     /* a bit shorter on phones */
  }
    .field_2 {
  font-size: 18px;
  padding: 4px;
  align-items: center;
  justify-content: center;
  text-align: left;
  height: 100px;
    display: block;
}
/* Remove underline from title links */
.field_2 a {
  text-decoration: none;
}

/* Optional: restore underline on hover */
.field_2 a:hover {
  text-decoration: underline;
}
}

/* Phone (small screens): 2 columns */
@media (max-width: 600px) {
 .products-container {
    /* force two perfectly-equal columns */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    /* make every row the same height (so cards stretch to match tallest in their row) */
    grid-auto-rows: 1fr;
    align-items: stretch;
     margin-left:5px;
     margin-right: 5px;
  }
    .product-image-container {
    height: 150px;     /* a bit shorter on phones */
  }

  .grid-item {
    /* ensure each card fills its grid cell top-to-bottom */
    display: flex;
    flex-direction: column;
  }
.field_2 {
  font-size: 15px;
  padding: 10px;
  align-items: center;
  justify-content: center;
  text-align: left;
  height: 105px;
}
  
  .table_banner {
    padding: 8px;
    height: 40px;
  }
}