/* ==============================
   AWESOME SOLUTIONS BLOG - CSS SOLO MÓDULO
   ============================== */

/* ===== HERO BLOG (LISTADO) ===== */
body .page-title.hero-blog{
  --hero-h: clamp(360px, 45vh, 520px);
  min-height: var(--hero-h);
  display:flex; align-items:center;
  width:100%;
  overflow:hidden;

  background-image: none !important;
  background-color:#f5f9fc !important;
}

body .page-title.hero-blog::before,
body .page-title.hero-blog::after{
  content:none !important;
  display:none !important;
}

body .page-title.hero-blog{
  background: url('../imagenes/FQC_Blog_2.png?v=2') right center / auto 100% no-repeat,
              #f5f9fc !important;
}

body .page-title.hero-blog .white-bg{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
body .page-title.hero-blog .page-breadcrumb{
  border-top: 0 !important;
}

body .page-title.hero-blog > .container{ position:relative; z-index:1; }

@media (min-width:1700px){
  body .page-title.hero-blog{
    background-image: url('../imagenes/FQC_Blog_2.png?v=2') !important;
    background-position: right center;
    background-size: auto 100%;
  }
}

@media (max-width:991.98px){
  body .page-title.hero-blog{
    background: url('../imagenes/FQC_Blog_1.png?v=2') 70% center / cover no-repeat,
                #f5f9fc !important;
  }
}

@media (max-width: 991.98px){
  body .page-title.hero-blog .page-breadcrumb .breadcrumb{
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
  body .page-title.hero-blog .page-breadcrumb .breadcrumb .breadcrumb-item.active{
    flex: 0 0 auto !important;
    width: auto !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
    padding-left: inherit !important;
  }
  body .page-title.hero-blog .page-breadcrumb .breadcrumb .breadcrumb-item + .breadcrumb-item::before{
    display: inline-block !important;
    float: none !important;
  }
}

/* ===== DETALLE BLOG (blog.php) ===== */

.img-max-height500 img{
  max-height: 500px;
  width: auto;
  height: auto;
}

.blog-content ul,
.blog-content ol{
  padding-left: 2.2em;
  list-style-position: outside;
}

/* Hero/banner para la imagen de la entrada */
.post-hero{
  position: relative;
  width: 100%;
  min-height: clamp(260px, 42vh, 520px);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #f5f9fc;
  border-radius: .25rem;
}

/* degradado sutil */
.post-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,.15) 100%);
  border-radius: inherit;
}

.post-date-badge{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:2;
  background:#ffffff;
  color:#000;
  padding:.30rem .55rem;
  border-radius:.35rem;
  font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}