/* ==============================
   Optimized CSS
   ============================== */
:root {
  --small-gap: 10px;
  --sorting-gap: 30px;
  --sorting-gap-sm: 5px;
  --masonry-cols: 3;
  --technot-image-width:35%;
}

/* Grid Layout */
.technot-loop-wrapper.technot-loop-layout-grid {
  display: grid;
  width: 100%;
}

.technot-loop-layout-grid .technot-loop-item,
.technot-loop-wrapper.technot-loop-layout-carousel .technot-loop-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.technot-loop-layout-grid .technot-loop-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.technot-loop-layout-grid .technot-loop-image img.size-full.wp-post-image,
.technot-loop-wrapper .technot-loop-image a {
  width: 100% !important;
}

.technot-loop-wrapper .technot-loop-image a {
  display: block !important;
  height: 100% !important;
}
.technot-loop-wrapper .technot-loop-image img,
.technot-loop-wrapper .technot-loop-image a img {
  width: 100% !important;
}

.technot-loop-item a.technot-loop-read-more {
  display: inline-block !important;
}

/* List Layout */
.technot-loop-wrapper.technot-loop-layout-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.technot-loop-layout-list .technot-loop-item {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}

.technot-loop-layout-list .technot-loop-image {
  display: flex;
}

.technot-loop-layout-list .technot-loop-image a,
.technot-loop-layout-list .technot-loop-image img {
  width: 100% !important;
  max-width: 100% !important;
}

.technot-loop-layout-list .technot-loop-image img {
  height: 100%;
  display: block;
  object-fit: cover;
}

.technot-loop-layout-list .technot-loop-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.technot-loop-layout-list .technot-loop-image {
    flex: 0 0 var(--technot-image-width);
    max-width: var(--technot-image-width);
}

.technot-loop-layout-list .technot-loop-content {
    flex: 0 0 calc(100% - var(--technot-image-width));
    max-width: calc(100% - var(--technot-image-width));
}
article.technot-loop-item.technot-loop-item-list.image-right {
  flex-direction: row-reverse;
}

/* Masonry Layout */
.technot-loop-layout-masonry {
  columns: var(--masonry-cols);
  column-gap: 20px;
  padding-bottom: 20px;
}

.technot-loop-layout-masonry .technot-loop-item {
  display: inline-block;
  width: 100%;
  margin-bottom: 20px !important;
  break-inside: avoid;
}

/* Modern Masonry Grid */
@supports (grid-template-rows: masonry) {
  .technot-loop-layout-masonry {
    display: grid;
    grid-template-columns: repeat(var(--masonry-cols, 4), 1fr);
    grid-template-rows: masonry;
    grid-auto-flow: dense;
    gap: 20px;
  }

  .technot-loop-layout-masonry .technot-loop-item {
    margin-bottom: 0;
  }
}

/* Sorting Layout */
.technot-sorting-list-grid-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--sorting-gap);
}

.technot-sorting-list-grid-wrapper > :only-child {
  grid-column: 1 / -1;
}

.technot-sorting-wrap {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sorting-gap-sm);
}

.technot-view-switch.technot-view-switch- {
  width: 100% !important;
  display: block;
}

/* Swiper Carousel */
.technot-loop-wrapper.technot-loop-layout-carousel
.swiper-slide
.technot-loop-item {
  align-items: stretch;
  height: 100%;
}

.technot-loop-wrapper.technot-loop-layout-carousel .technot-loop-image,
.technot-loop-wrapper.technot-loop-layout-carousel .technot-loop-content {
  flex: 1;
}

.technot-loop-wrapper.technot-loop-layout-carousel .technot-loop-image img {
  height: 100%;
  object-fit: cover;
}

.technot-loop-wrapper.swiper.swiper-autoheight
.swiper-slide
.technot-loop-item {
  height: auto !important;
}

.technot-loop-layout-carousel article.technot-loop-item {
  margin-bottom: 0 !important;
}
.technot-loop-wrapper .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
    position: relative!important;
    margin-top: 40px!important;
    bottom: 0 !important; 
}
/* Pagination arrows */
.technot-loop-pagination a.next.page-numbers:after,
.technot-loop-pagination a.prev.page-numbers:after {
  display: none !important;
}

.technot-loop-layout-carousel.swiper-autoheight .swiper-wrapper	{
  align-items: stretch !important;
  height: auto !important;
}	
.technot-loop-layout-carousel.swiper-autoheight .swiper-wrapper .swiper-slide {
  height: auto !important;
  display: flex;
}
.technot-loop-layout-carousel.swiper-autoheight .technot-loop-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.technot-loop-layout-carousel.swiper-autoheight .technot-loop-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.technot-loop-layout-carousel .technot-loop-item .technot-loop-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    justify-content: space-between !important;
}
/* ACF Meta Layouts */
.technot-acf-layout-list .technot-loop-acf-field {
  display: block;
}

.technot-acf-layout-list .technot-loop-acf-field:not(:last-child) {
  margin-bottom: 10px;
}

.technot-acf-layout-inline .technot-loop-acf-field {
  display: inline-block;
}

.technot-acf-layout-inline .technot-loop-acf-field:not(:last-child) {
  margin-right: 10px;
}

.technot-loop-acf-meta {
  line-height: normal !important;
}

/* Not Found Message */
.technot-not-found-message {
  background: #fff3f3;
  border-left: 4px solid #e63946;
  padding: 12px 16px;
  margin: 25px 0 20px;
  border-radius: 4px;
  font-family: inherit;
}

.technot-not-found-message ul {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  gap: 0.2rem;
}

.technot-not-found-message strong {
  color: #d62828;
  font-weight: 600;
}

.technot-not-found-message span {
  color: #333;
  font-size: 14px;
  padding-left: 4px;
  word-break: break-word;
  display: inline-block;
}

/* ==============================
   Responsive Adjustments
   ============================== */

/* Tablet */
@media (max-width: 1024px) {
  .technot-loop-col-3,
  .technot-loop-col-4,
  .technot-wrapper.technot-loop-layout-masonry {
    grid-template-columns: repeat(2, 1fr);
  }

  .technot-loop-layout-masonry {
    --masonry-cols: 3;
  }

  .technot-loop-layout-list .technot-loop-image {
    flex: 0 0 45%;
    max-width: 45%;
  }

  .technot-loop-layout-list .technot-loop-content {
    flex: 0 0 55%;
    max-width: 55%;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .technot-loop-col-2,
  .technot-loop-col-3,
  .technot-loop-col-4,
  .technot-loop-wrapper.technot-loop-layout-masonry {
    grid-template-columns: 1fr;
  }

  .technot-loop-layout-masonry {
    --masonry-cols: 2;
  }

  .technot-loop-layout-list .technot-loop-item {
    flex-direction: column;
  }

  .technot-loop-layout-list .technot-loop-image,
  .technot-loop-layout-list .technot-loop-content {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    height: auto;
  }

  .technot-loop-layout-list .technot-loop-image img {
    height: auto;
  }
}

/* Small Devices */
@media (max-width: 576px) {
  .technot-loop-layout-masonry {
    --masonry-cols: 1;
  }
}

@media (max-width: 500px) {
  .technot-sorting-list-grid-wrapper {
    grid-template-columns: 1fr;
    gap: var(--small-gap);
  }

  .technot-sorting-wrap {
    grid-auto-flow: row;
    gap: var(--sorting-gap-sm);
  }
}