/* START of post section */

.post{}

.post:hover{
  box-shadow: 0.01em 0.01em 0.5em 0.01em #333;
}

.post-description-truncation{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3; /* For non-webkit browsers that support line-clamp directly */
  box-orient: vertical; /* Same as above */
}

/* Post cards (list + search results) – keep images visible and responsive */
#post-container .row.g-0,
#search-results .row.g-0{
  align-items: stretch;
}

/* Prevent the image column from shrinking + make it fill nicely */
#post-container .row.g-0 > .col-md-3,
#search-results .row.g-0 > .col-md-3{
  flex-shrink: 0;
  display: flex;
  overflow: hidden;
}

#post-container .row.g-0 > .col-md-3 > img,
#search-results .row.g-0 > .col-md-3 > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* On small screens: stack image above text and give it a reasonable height */
@media (max-width: 767.98px){
  #post-container .row.g-0,
  #search-results .row.g-0{
    flex-direction: column;
  }

  #post-container .row.g-0 > .col-md-3,
  #search-results .row.g-0 > .col-md-3{
    max-width: 100%;
    width: 100%;
  }

  #post-container .row.g-0 > .col-md-3 > img,
  #search-results .row.g-0 > .col-md-3 > img{
    height: 220px;
  }
}

/* END of post section*/

/* START of homepage section */

.homepage-tags-heading{
  text-shadow: 0.08em 0.08em 0.08em #333;
}

/* Featured post (index) – keep image visible and responsive */
.bg-body-secondary.post.d-flex{
  align-items: stretch; /* image column stretches to the card height on wider screens */
}

/* Prevent the image column from shrinking too much in a flex container */
.bg-body-secondary.post.d-flex > .col-md-3{
  flex: 0 0 25%;
  max-width: 25%;
  flex-shrink: 0;
  display: flex;
}

/* Make the image fill the left column nicely */
.bg-body-secondary.post.d-flex > .col-md-3 > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* On small screens: stack image above text and give it a reasonable height */
@media (max-width: 767.98px){
  .bg-body-secondary.post.d-flex{
    flex-direction: column;
  }

  .bg-body-secondary.post.d-flex > .col-md-3{
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }

  .bg-body-secondary.post.d-flex > .col-md-3 > img{
    height: 220px; /* adjust if you want taller/shorter */
  }
}

/* END of homepage section */

/* START of authors section */

/* Author image container */
.author-image-container{
  width: 13em;
  height: 13em;
  overflow: hidden;
  position: relative;

  /* Ensures the fallback avatar stays centered */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Real author image */
.author-image-container img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  display: block;
}

/* START of avatar section (in the authors section) */

.avatar{
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fallback avatar icon (kept as a perfect circle) */
.user-icon{
  font-size: 1.6em; /* changing font size changes the icon scale */
  width: 6em;
  height: 6em;
  aspect-ratio: 1 / 1;

  border-radius: 50%;
  border: 1px solid grey;
  background: none;
  box-sizing: border-box;

  position: relative;
  display: block;
}

/* Head */
.user-icon::before{
  content: "";
  width: 2em;
  height: 2em;
  background: grey;
  border-radius: 50%;

  position: absolute;
  left: 50%;
  top: 0.8em;
  transform: translateX(-50%);
}

/* Shoulders */
.user-icon::after{
  content: "";
  width: 4em;
  height: 2em;
  background: grey;
  border-radius: 2em 2em 0 0;

  position: absolute;
  left: 50%;
  top: 3.0em;
  transform: translateX(-50%);
}

/* END of avatar section (in the authors section) */

/* Author cards (search results) – keep images visible and responsive */
#author-search-results .row.g-0{
  align-items: stretch;
}

#author-search-results .row.g-0 > .col-md-4{
  flex-shrink: 0;
  display: flex;
  overflow: hidden;
}

#author-search-results .row.g-0 > .col-md-4 > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* On small screens: stack image above text and give it a reasonable height */
@media (max-width: 767.98px){
  #author-search-results .row.g-0{
    flex-direction: column;
  }

  #author-search-results .row.g-0 > .col-md-4{
    max-width: 100%;
    width: 100%;
  }

  #author-search-results .row.g-0 > .col-md-4 > img{
    height: 200px;
  }
}

/* Authors: layout breakpoint (keep avatar circle stable)
   Switch to 1 card per row earlier, so the avatar circle never breaks */
@media (max-width: 1400px){
  #author-container .col-md-6,
  #author-search-results .col-md-6{
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* END of authors section */

/* START of fonts section */
@font-face {
  font-family: 'Yeseva One';
  font-style: normal;
  font-weight: normal;
  src: local('/fonts/YesevaOne-Regular.woff2');
}

@font-face {
  font-family: 'Times New Roman';
  font-style: normal;
  font-weight: normal;
  src: local('/fonts/OPTITimes-Roman.otf');
}

.title-font{
  font-family: 'Yeseva One';
}

.text-font{
  font-family: 'Times New Roman';
}
/* END of fonts section */