/********************************************/
/*                  POST                   */
/*******************************************/

/* Header Styles */
.blog-header {
  margin-bottom: var(--spacing-40);
}
.blog-header__feature-wrapper {
  position: relative;
  max-height: 500px;
  overflow: hidden;
}
.blog-header__feature-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.blog-header__feature-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-02);
}
.blogpost__tag-link.caption {
  text-decoration: none;
}
.blogpost__tag-link.caption:hover {
  color: var(--secondary-200);  
}
.blog-header__content {
  position: absolute;
  bottom: 50%;
  left: 0;
  transform: translateY(50%);
  padding: var(--spacing-24) 0;
  width: 100%;
  z-index: 1;
}
@media (max-width: 768px) {
  .blog-header__feature-wrapper {
    max-height: 80vh;
    height: 80vh;
  }
  .blog-header__feature-wrapper::before {
    background: var(--gradient-01);
  }
  .blog-header__feature-image {
    height: 100%;
  }
  .blog-header__content {
    padding: var(--spacing-24) var(--spacing-16);
    bottom: 0;
    transform: none;
  }
}

/* Content Styles */
.blog-content {
  font-family: var(--primary-font);
  color: var(--black);
  line-height: var(--lh-lg);
}
.blog-content__breadcrumbs a {
  text-decoration: none;
}
.blog-content__meta {
  display: flex;
  align-items: center;
  margin-top: var(--spacing-16);
}
.blog-content__author-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-right: var(--spacing-8);
}
.blog-content__icon {
  color: var(--white);
  margin-right: var(--spacing-8);
}
.blog-content__author-name {
  text-decoration: none;
  margin-right: var(--spacing-16);
}
.blog-content__author-name,
.blog-content__date {
  color: var(--primary);
  background: var(--tertiary);
  padding: var(--spacing-4) var(--spacing-24);
  border-radius: var(--spacing-4);
}
.blog-content__body {
  margin-bottom: var(--spacing-48);
}
.blog-content__body p {
  margin-bottom: var(--spacing-24);
}
.blog-content__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius-md);
  margin: var(--spacing-24) 0;
}

/* Social Share */
.social-share__label {
  font-family: var(--secondary-font);
  font-size: var(--spacing-24);
}
.social-share__line {
  background: var(--primary);
  width: var(--spacing-64);
  height: 2px;
}
.social-share__icons a:before {
  position: static !important;
}
.social-share__icons a:hover>svg {
  transform: translateY(-4px);
}


/* Related Posts */
.related-posts {
  margin-top: var(--spacing-48);
  padding-top: var(--spacing-24);
}

.related-posts__heading {
  color: var(--primary);
  font-family: var(--primary-font);
  font-weight: 700;
  padding-bottom: var(--spacing-16);
  border-bottom: 2px solid var(--tertiary);
  text-transform: uppercase;
  margin-bottom: var(--spacing-24);
}

.related-posts__card {
  height: 100%;
  border: none;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--box-shadow);
  transition: transform 0.3s ease;
}

.related-posts__card:hover {
  transform: translateY(-5px);
}

.related-posts__image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.related-posts__content {
  padding: var(--spacing-16);
}

.related-posts__date {
  font-size: var(--body-font-size-sm);
  color: var(--black-700);
  margin-bottom: var(--spacing-4);
}

.related-posts__topic {
  display: inline-block;
  font-size: var(--body-font-size-sm);
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: var(--spacing-8);
}

.related-posts__title {
  font-family: var(--primary-font);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: var(--lh-md);
  margin-bottom: var(--spacing-12);
  text-transform: uppercase;
}

.related-posts__title-link {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.related-posts__title-link:hover {
  color: var(--secondary);
}

.related-posts__read-more {
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
  text-transform: uppercase;
  display: inline-block;
}

.related-posts__read-more:hover {
  color: var(--secondary);
}

.related-posts__arrow {
  margin-left: var(--spacing-4);
}
/********************************************/
/*                  LISTING                */
/*******************************************/

/* Search */
.blog__search form,
.blog__search button {
  background: var(--tertiary);
  border: none;
}
.blog__search button svg {
  fill: var(--primary) !important;
}
/* Tags */
.blog__tags-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Estilos para el select en móvil */
.blog__tags-select {
  width: 100%;
  padding: 0 var(--spacing-16);
  border-radius: var(--spacing-4);
  background-color: var(--tertiary);
  font-size: var(--spacing-16);
  color: var(--primary);
  font-weight: bold;
  border: none;
  /* icon */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 6H21M7 12H17M11 18H13' stroke='%230A0E38' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-16) top 50%;
}
.blog__tags-select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 6H21M7 12H17M11 18H13' stroke='%230A0E38' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-16) top 50%;
  background-color: var(--tertiary-700);
}
.blog__tags-select option {
  padding: var(--spacing-8) var(--spacing-16);
}
.alert-info {
  --bs-alert-color: var(--white);
  --bs-alert-bg: var(--primary-400);
  --bs-alert-border-color: var(--primary);
  --bs-alert-link-color: var(--primary);
}
}
/* Sidebar */
.sidebar__wrapper {
  position: sticky;
  justify-content: unset;
  min-height: 80vh;
  position: sticky;
  top: 15%;
}
.blog-list form input[type=submit], form .hs-button {
  width: 100%;
}
@media (max-width: 767.98px) {
  .sidebar {
    position: static;
    margin-top: var(--spacing-80);
  }
}
/* Grid principal */
.blog__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr 160px 1fr;
  gap: var(--spacing-24); 
}

/* Patrón alternado: grande-pequeño-pequeño-grande */
.blog__grid-item:nth-child(4n-3) { 
  grid-column: 1;
  grid-row: span 2; /* Elemento grande izquierda */
}

.blog__grid-item:nth-child(4n-2) { 
  grid-column: 2;
  grid-row: span 1; /* Elemento pequeño derecha superior */
}

.blog__grid-item:nth-child(4n-1) { 
  grid-column: 1;
  grid-row: span 1; /* Elemento pequeño derecha inferior */
}

.blog__grid-item:nth-child(4n) { 
  grid-column: 2;
  grid-row: 2 / span 2; /* Elemento grande izquierda siguiente */
}

/* Estilos para las tarjetas */
.blog-card {
  height: 100%;
  border-radius: var(--spacing-8); 
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: var(--box-shadow);
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--box-shadow-hover);
}
.blog-card__media {
  position: relative;
}
.blog-card__image {
  width: 100%;
  height: 340px;
  object-fit: cover;
}
.blog-card__date {
  position: absolute;
  top: var(--spacing-24); 
  right: var(--spacing-24);
  padding: var(--spacing-4) var(--spacing-16);  
}
.blog-card__title,
.blog-card__content .caption {
  text-decoration: none;
}
.blog-card__content .caption {
  color: var(--primary-400);
}
.blog-card__title:hover,
.blog-card__content .caption:hover {
  text-decoration: underline;
}

/* En elementos grandes, imagen más alta */
.blog__grid-item:nth-child(4n-3) .blog-card__image,
.blog__grid-item:nth-child(4n) .blog-card__image {
  height: 500px;
}
.blog-card__content {
  flex-grow: 1;
}
.blog-card__line {
  height: var(--spacing-16);
}

/* Responsive */
@media (max-width: 768px) {
  .blog__grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 16px;
  }

  /* En móvil, todos los elementos ocupan 1 fila */
  .blog__grid-item:nth-child(n) {
    grid-column: 1;
  }

  .blog-card__image {
    height: 250px !important;
  }
}


/* Pagination */
@media(min-width:769px) {
  .hs-pagination__link--prev {
    margin-right: var(--spacing-32) !important;
  }
  .hs-pagination__link--next {
    margin-left: var(--spacing-32);
  }
}


/* Footer Cuando se publique la web esto se debe eliminar: */
.footer__col02,
.footer__col03 {
  display: none !important;
}