/* ===== List (homepage/shortcode) ===== */
.govmsg-list{
  display:grid;
  grid-template-columns: repeat(2, 1fr); /* 2x2 on desktop */
  gap:16px;
}
@media (max-width:900px){
  .govmsg-list{
    grid-template-columns:1fr; /* single column on mobile */
  }
}

/* Card shell (shared with single) */
.govmsg-card{
  background:#fff;
  border:1px solid var(--line, #e5e7eb);
  border-radius:16px;
  box-shadow: var(--shadow, 0 6px 16px rgba(0,0,0,.06));
  overflow:hidden;
}

/* 2x2 layout inside each card:
   photo  | body
   title  | body
*/
.grid-two-by-two{
  display:grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: auto auto;
  grid-template-areas:
    "photo body"
    "title body";
}
.grid-two-by-two .photo{ grid-area:photo; border-right:1px solid var(--line, #e5e7eb); border-bottom:1px solid var(--line, #e5e7eb); }
.grid-two-by-two .title{ grid-area:title; border-right:1px solid var(--line, #e5e7eb); margin:0; padding:16px; font-size:14px; font-weight:700; line-height:1.35; text-align:left; }
.grid-two-by-two .body{
  grid-area:body;
  padding:16px;
  font-size:16px;
  line-height:1.75;
  color:#333;
  text-align:justify;

  /* vertical centering, as requested */
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.photo-img{ width:250px; height:auto; object-fit:contain; display:block }

/* Read more button */
.read-more{
  color: var(--accent, #FF6F00);
  text-decoration:none;
  border:1px solid var(--line, #e5e7eb);
  padding:6px 10px;
  border-radius:10px;
}
.read-more:hover{ border-color: var(--accent, #FF6F00); background: rgba(255,111,0,.08); }

/* Mobile: stack photo → title → body full width */
@media (max-width:900px){
  .grid-two-by-two{
    grid-template-columns:1fr;
    grid-template-areas:
      "photo"
      "title"
      "body";
  }
  .grid-two-by-two .photo,
  .grid-two-by-two .title{
    border-right:none;
    border-bottom:1px solid var(--line, #e5e7eb);
  }
  .grid-two-by-two .title{ font-size:16px; padding:14px }
  .grid-two-by-two .body{ padding:14px; justify-content:flex-start } /* top-align on tight screens */
}

/* ===== Single view (reuses same card + grid classes) ===== */
.govmsg-card.single{ /* optional hook if needed later */ }

/* Center-align image inside the photo cell (both desktop & mobile) */
.govmsg-card .photo {
  display: flex;
  justify-content: center;   /* center horizontally */
  align-items: center;       /* center vertically */
  background: #fff;
}

.govmsg-card .photo-img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}

/* On mobile: ensure the image stays centered and doesn’t hug the left */
@media (max-width: 900px) {
  .govmsg-card .photo {
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .govmsg-card .photo-img {
    width: auto;
    max-width: 90%;
  }
}

/* 🔧 Force image centering on mobile */
@media (max-width: 900px) {
  .govmsg-card .photo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .govmsg-card .photo-img {
    width: auto !important;
    max-width: 85% !important;
    margin: 0 auto !important;
    display: block !important;
  }
}

/* 💪 FINAL FIX: Force true center alignment of message images on mobile */
@media (max-width: 900px) {

  /* Ensure the entire photo cell behaves as flexbox */
  .govmsg-card .photo,
  .govmsg-card .photo figure {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* Target WP image wrapper directly */
  .govmsg-card .photo .wp-post-image,
  .govmsg-card .photo-img {
    display: block !important;
    margin: 0 auto !important;
    height: auto !important;
    width: auto !important;
    max-width: 85% !important;
    object-fit: contain !important;
    float: none !important;
  }

  /* Kill any WordPress figure alignment classes */
  .govmsg-card .photo.alignleft,
  .govmsg-card .photo.alignright,
  .govmsg-card .photo.alignnone {
    float: none !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
}