  header {
    border-color: #D00000;
  }

/* ================================
   MEDIA EMBED RESOURCE STYLING
   For images, video, audio, and captions across all layouts
   ================================ */

.media-embed .resource {
  display: flex;                  /* stack image + caption vertically */
  flex-direction: column;
  align-items: center;            /* center image & caption horizontally */
  justify-content: flex-start;    /* let items flow naturally top-down */
  text-align: center;             /* center caption text */
  border-radius: 15px;             /* consistent rounded corners */
  border: 1px solid #ddd;         /* optional border */
  background-color: #fff;         /* subtle background card */
  box-sizing: border-box;
  padding: 10px;
  gap: 8px;                       /* modern spacing between image & caption */
  font-size: 13px;
  font-family: "Lora", serif;
  color: #333;
  white-space: normal;            /* allow wrapping */
  overflow: hidden;               /* clip content nicely inside rounded box */
  max-width: 100%;                /* responsive scaling */
  margin: 8px 0;                  /* breathing room between items */
}

/* ================================
   MEDIA (Image / Video / Audio)
   ================================ */

.media-embed .resource img,
.media-embed .resource video,
.media-embed .resource audio {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 15px;
}

/* Add rounded corners even when multiple items are present */
.media-embed .resource:not(:only-child) img {
  border-radius: 5px;
}

/* ================================
   CAPTIONS
   ================================ */

.media-embed .resource .caption {
  display: block;
  width: 100%;
  padding: 0 0.5rem;
  box-sizing: border-box;
  text-align: center;
  word-wrap: break-word;
  white-space: normal;
}

.media-embed .resource .caption * {
  margin: 0 0 1rem 0;
  font-family: "Lora", serif;
  font-size: 15px;
}

.media-embed .resource .caption > :last-child {
  margin-bottom: 0;
}

/* ================================
   HEADINGS (if present inside resource)
   ================================ */

.media-embed .resource h3 {
  font-family: "Lora", serif;
  font-size: 15px;
  font-weight: normal;
  margin: 8px 0;
  text-align: center;
  color: #333;
}

/* ================================
   ITEM SHOWCASE (grid/gallery views)
   ================================ */

.item-showcase .resource.item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  margin: 8px;
  border-radius: 15px;
  border: 1px solid #ddd;         /* optional border */
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.item-showcase .resource.item {
  display: flex;                  /* cleaner, consistent flex behavior */
  flex-direction: column;         /* stack image + caption vertically */
  align-items: center;            /* center image and text horizontally */
  justify-content: flex-start;
  text-align: center;
  margin: 8px;
  border-radius: 15px;
  border: 1px solid #ddd;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
  overflow: visible;              /* allow caption to wrap fully */
  max-width: 100%;
  font-family: "Lora", serif;
  font-size: 15px;
  white-space: normal;            /* critical for text wrapping */
  word-wrap: break-word;
}

/* Make sure images behave naturally */
.item-showcase .resource.item img {
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  object-fit: contain;
  display: block;
}

/* Add consistent caption wrapping & padding */
.item-showcase .resource.item .caption {
  display: block;
  width: 100%;
  padding: 6px 8px;
  box-sizing: border-box;
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
  overflow: visible;
  color: #333;
}

/* Optional: match media-embed style spacing */
.item-showcase .resource.item .caption * {
  margin: 0 0 0.75rem 0;
}

.item-showcase .resource.item .caption > :last-child {
  margin-bottom: 0;
}

.col-single img {
  border-radius:6px;
}

.results  .result-site{
 display: none;
 }