/* Blog index refinements for WordPress featured images.
   The original Arolax cards are mostly vertical, but WordPress uses one
   featured image across listing and single posts. We standardize featured
   blog images as horizontal/editorial crops so they look good everywhere. */

.featured-post-area .featured-posts {
  align-items: stretch;
}

.featured-post-area .blog-box {
  background: #f4f4f4;
  border-radius: 0;
}

.featured-post-area .blog-box > a {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: visible;
}

.featured-post-area .blog-box > a::after {
  display: none;
}

.featured-post-area .blog-box .thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1290 / 550;
  overflow: hidden;
  background: #efefef;
}

.featured-post-area .blog-box .thumb img,
.blog-area .blog-box .thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.featured-post-area .blog-box .content {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 20px;
  width: auto;
  margin-top: 0;
  padding: 20px 0 0;
  opacity: 1;
  visibility: visible;
  transition: none;
}

.featured-post-area .blog-box .title,
.featured-post-area .blog-box .tag,
.featured-post-area .blog-box .icon {
  color: var(--colozal-color-primary);
  text-shadow: none;
}

.featured-post-area .blog-box .icon {
  border-color: currentColor;
}

.featured-post-area .blog-box:hover .content {
  bottom: auto;
}

.blog-area .blog-box .thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f4f4f4;
}

.blog-area .blog-box .thumb img {
  transition: transform 0.5s ease;
}

.blog-area a:hover .blog-box .thumb img {
  transform: scale(1.03);
}

@media (min-width: 1200px) {
  .featured-post-area .featured-posts {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  }

  .featured-post-area .featured-posts > .blog-box:nth-child(1) {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3 !important;
  }

  .featured-post-area .featured-posts > .blog-box:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .featured-post-area .featured-posts > .blog-box:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  .featured-post-area .featured-posts > .blog-box:nth-child(1) .thumb {
    flex: 1 1 auto;
    height: auto;
    aspect-ratio: auto;
  }
}

@media (max-width: 1199px) {
  .featured-post-area .blog-box .thumb {
    height: auto;
  }
}

@media (max-width: 767px) {
  .featured-post-area .blog-box .thumb {
    aspect-ratio: 16 / 9;
  }

  .blog-area .blog-box .thumb {
    aspect-ratio: 4 / 3;
  }
}