/* Author box layout */
.article-authorbox {
  float: right;
  margin: 0 0 1rem 1rem;
  max-width: 320px;
  border: 1px solid var(--cassiopeia-color-border, #ddd);
  padding: 1rem;
  border-radius: .25rem;
  background: var(--body-bg, #fff);
}

.article-authorbox .author-photo {
  display: block;
  width: 100%;
  max-width: 160px;   /* a bit larger; change as you like */
  height: auto;       /* preserve aspect ratio */
  border-radius: .5rem;  /* rounded rectangle */
  margin-bottom: .5rem;
  object-fit: cover;  /* in case you set a fixed height later */
}

.article-authorbox .author-name {
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin-bottom: .25rem;
}

/* Stack on small screens */
@media (max-width: 991.98px) {
  .article-authorbox {
    float: none;
    max-width: none;
    margin: 0 0 1rem 0;
  }
}
/* Author publication date line */
.article-authorbox .author-date {
  font-size: 1.05rem;   /* a touch larger than body text */
  opacity: .9;
  line-height: 1.4;
  display: flex;        /* align icon + text nicely */
  align-items: center;
  gap: .35rem;
  margin-bottom: .25rem;
}

/* Bigger, readable book icon */
.article-authorbox .author-date::before {
  content: "📖";
  font-size: 1.35rem;   /* bigger than the date text */
  line-height: 1;
}
/* Intro image beside text in blog/featured layouts */
.blog-featured .article-intro-image,
.blog .article-intro-image {
  float: left;
  margin: 0 1rem 0.5rem 0;   /* space around image */
  max-width: 180px;          /* constrain width */
}

.blog-featured .article-intro-image img,
.blog .article-intro-image img {
  width: 100%;
  height: auto;
  object-fit: contain;       /* no cropping, scale nicely */
}

/* ========== Featured & Blog: keep intro images small and to the left ========== */

/* Common wrappers in Cassiopeia blog/featured items */
.blog-featured .com-content-article__item,
.blog .com-content-article__item {
  display: flow-root; /* establishes a new block formatting context so floats behave */
}

/* Intro image containers used by Cassiopeia */
.blog-featured .item-image,
.blog .item-image,
.blog-featured .article-intro-image,
.blog .article-intro-image {
  float: left;
  margin: 0 1rem .5rem 0;
  width: 180px;            /* hard cap the width of the image block */
  max-width: 40%;          /* safety if container gets very narrow */
}

/* The image itself */
.blog-featured .item-image img,
.blog .item-image img,
.blog-featured .article-intro-image img,
.blog .article-intro-image img {
  display: block;
  width: 100% !important;  /* force it to respect the 180px container */
  height: auto !important; /* keep aspect ratio */
  object-fit: contain;     /* no cropping */
}

/* Keep headlines/text from slamming into the image */
.blog-featured .com-content-article__item h2,
.blog .com-content-article__item h2 {
  margin-top: 0;
}

/* Mobile: stack nicely */
@media (max-width: 767.98px) {
  .blog-featured .item-image,
  .blog .item-image,
  .blog-featured .article-intro-image,
  .blog .article-intro-image {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1rem 0;
  }
}
/* ===== Featured & Blog: image left, title+intro to the right ===== */
.blog-featured .com-content-article__item,
.blog .com-content-article__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;             /* helps on narrow widths */
}

/* Image block locked to a narrow column */
.blog-featured .com-content-article__item .item-image,
.blog .com-content-article__item .item-image,
.blog-featured .com-content-article__item .article-intro-image,
.blog .com-content-article__item .article-intro-image {
  flex: 0 0 180px;             /* fixed 180px column */
  max-width: 180px;
  margin: 0;                   /* flex handles spacing */
}

/* Everything else flows to the right and uses remaining width */
.blog-featured .com-content-article__item > :not(.item-image):not(.article-intro-image),
.blog .com-content-article__item > :not(.item-image):not(.article-intro-image) {
  flex: 1 1 0;
  min-width: 260px;            /* prevents awkward squish on medium widths */
}

/* Keep images tidy inside their column */
.blog-featured .com-content-article__item .item-image img,
.blog .com-content-article__item .item-image img,
.blog-featured .com-content-article__item .article-intro-image img,
.blog .com-content-article__item .article-intro-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Mobile: stack nicely */
@media (max-width: 767.98px) {
  .blog-featured .com-content-article__item,
  .blog .com-content-article__item {
    flex-direction: column;
  }
  .blog-featured .com-content-article__item .item-image,
  .blog .com-content-article__item .item-image,
  .blog-featured .com-content-article__item .article-intro-image,
  .blog .com-content-article__item .article-intro-image {
    flex: 0 0 auto;
    max-width: 100%;
  }
}
/* ===== Featured/Blog list items: image left, title+intro right (using se-item-* wrappers) ===== */

/* Two-column layout */
.blog-featured .se-item-media,
.blog .se-item-media {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap; /* graceful mid-width wrap */
}

/* Intro image column (Cassiopeia outputs <figure class="article-intro-image"> … ) */
.blog-featured .se-item-media .article-intro-image,
.blog .se-item-media .article-intro-image {
  flex: 0 0 180px;
  max-width: 180px;
  margin: 0;
}

/* Image sizing */
.blog-featured .se-item-media .article-intro-image img,
.blog .se-item-media .article-intro-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Content column */
.blog-featured .se-item-media .se-item-content,
.blog .se-item-media .se-item-content {
  flex: 1 1 0;
  min-width: 260px;
}

/* Mobile: stack */
@media (max-width: 767.98px) {
  .blog-featured .se-item-media,
  .blog .se-item-media {
    flex-direction: column;
  }
  .blog-featured .se-item-media .article-intro-image,
  .blog .se-item-media .article-intro-image {
    flex: 0 0 auto;
    max-width: 100%;
  }
}
/* Green Read More button in blog/featured lists */
.blog-featured .readmore a.btn,
.blog .readmore a.btn {
  background-color: var(--cassiopeia-color-success, #198754);
  border-color: var(--cassiopeia-color-success, #198754);
  color: #fff;
  padding: .5rem .85rem;
  border-radius: .375rem;
  font-weight: 600;
  text-decoration: none;
}

.blog-featured .readmore a.btn:hover,
.blog .readmore a.btn:hover {
  filter: brightness(0.9);
  color: #fff;
}

/* ===== Cassiopeia Green Skin (safe overrides) ===== */
:root {
  --cassiopeia-color-primary: #1b7a43;  /* buttons, highlights */
  --cassiopeia-color-link:    #1b7a43;  /* anchor color */
  --cassiopeia-color-hover:   #145a32;  /* link hover */
  --cassiopeia-color-success: #1b7a43;
  --cassiopeia-color-info:    #37b36b;
  --cassiopeia-color-warning: #d9a116;  /* optional */
  --cassiopeia-color-danger:  #b63a3a;

  --body-bg:   #ffffff;
  --body-color:#0b0b0b;
}

/* Header & footer bars */
.container-header {
  background: linear-gradient(90deg, #145a32, #0f3e22);
  border-bottom: none;
}
.footer {
  background: linear-gradient(90deg, #0f3e22, #145a32);
  color: #e9f6ef;
}

/* Top menu links (keep high contrast on green) */
.container-header .mod-menu a {
  color: #ffffff;
}
.container-header .mod-menu a:hover,
.container-header .mod-menu .active > a,
.container-header .mod-menu a:focus {
  color: #e9f6ef;
  text-decoration: none;
  background: rgba(255,255,255,0.06);
  border-radius: .25rem;
}

/* Buttons: make primary green by default */
.btn-primary,
a.btn.btn-primary {
  background-color: var(--cassiopeia-color-primary);
  border-color: var(--cassiopeia-color-primary);
  color: #fff;
}
.btn-primary:hover,
a.btn.btn-primary:hover {
  background-color: var(--cassiopeia-color-hover);
  border-color: var(--cassiopeia-color-hover);
  color: #fff;
}
.btn-outline-primary {
  color: var(--cassiopeia-color-primary);
  border-color: var(--cassiopeia-color-primary);
}
.btn-outline-primary:hover {
  background-color: var(--cassiopeia-color-primary);
  color: #fff;
}

/* Links in content */
a { color: var(--cassiopeia-color-link); }
a:hover { color: var(--cassiopeia-color-hover); }

/* Subtle highlight sections (optional) */
.se-highlight {
  background: #e9f6ef;
  border-left: 4px solid #1b7a43;
  padding: .75rem 1rem;
  border-radius: .25rem;
}

/* Read More button (from earlier) */
.blog-featured .readmore a.btn,
.blog .readmore a.btn {
  background-color: var(--cassiopeia-color-primary);
  border-color: var(--cassiopeia-color-primary);
  color: #fff;
}
.blog-featured .readmore a.btn:hover,
.blog .readmore a.btn:hover {
  filter: brightness(0.9);
}