/* Responsive styles for KN Blog Layout Widget (Style 1 & 2) */

/* Desktop fixes (901px and above) */
@media (min-width: 901px) {
  .kn-blog-small-post img {
    width: 180px !important;
    height: 135px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
    max-width: 180px !important;
    overflow: hidden !important;
  }
  
  .kn-blog-small-post {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 15px !important;
  }
  
  .kn-blog-small-post > a {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 15px !important;
  }
  
  .kn-blog-small-post > a > div:first-child {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .kn-blog-small-post > a > div:last-child {
    flex-shrink: 0 !important;
    width: 180px !important;
  }
  
  /* Style 1 specific - ensure images maintain 4:3 ratio */
  .kn-style1-image {
    width: 180px !important;
    height: 135px !important;
  }
}

@media (max-width: 900px) {
  .kn-blog-main-container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
    padding: 0 15px !important;
    margin: 30px auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Ensure Style 2 container is visible on mobile */
  #kn-style2-container {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
  }
  /* Force Style 2 small posts container to be visible and take space */
  #kn-style2-container .kn-blog-small-posts {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 200px !important;
    height: auto !important;
    overflow: visible !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .kn-blog-main-post {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
  }
  .kn-blog-main-post .kn-main-title {
    font-size: 24px !important;
    line-height: 28px !important;
    max-height: 84px !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  .kn-blog-small-posts {
    flex-direction: column !important;
    gap: 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
  }
  .kn-blog-small-post {
    flex-direction: row !important;
    width: 100% !important;
    margin: 0 !important;
  }
  /* Style 2 (Bezirksnews) - simplified mobile layout: titles and divider lines */
  #kn-style2-container .kn-blog-small-posts {
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 200px !important;
    height: auto !important;
    overflow: visible !important;
  }
  #kn-style2-container .kn-blog-small-post {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: auto !important;
    height: auto !important;
  }
  /* Style 2 titles on mobile - simplified, fully visible */
  #kn-style2-container .kn-blog-small-post .kn-small-title {
    font-size: 18px !important;
    line-height: 24px !important;
    max-height: none !important;
    height: auto !important;
    -webkit-line-clamp: 5 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
  }
  /* Style 2 divider lines on mobile - reduced margins */
  #kn-style2-container .kn-blog-small-posts hr {
    margin: 15px 0 !important;
    border: none !important;
    height: 1px !important;
    background-color: #1f2043 !important;
    width: 100% !important;
  }
  /* Hide description on mobile for simplicity */
  #kn-style2-container .kn-blog-small-post .kn-meta-description {
    display: none !important;
  }
  /* Force all child elements to be visible */
  #kn-style2-container .kn-blog-small-post * {
    visibility: visible !important;
    opacity: 1 !important;
  }
  #kn-style2-container .kn-blog-small-post > a {
    display: block !important;
    flex-direction: column !important;
    width: 100% !important;
    align-items: flex-start !important;
  }
  #kn-style2-container .kn-blog-small-post > a > div {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    display: block !important;
  }
  .kn-blog-small-post .kn-small-title {
    font-size: 18px !important;
    max-height: 60px !important;
  }
  .kn-blog-main-post img,
  .kn-blog-small-post img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    border-radius: 6px !important;
  }
}

/* Tablet fixes (600-900px) - make images smaller */
@media (min-width: 600px) and (max-width: 900px) {
  .kn-blog-small-post img {
    width: 120px !important;
    height: 90px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }
  
  .kn-blog-small-post {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  
  .kn-blog-small-post > a {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  
  .kn-blog-small-post > a > div:first-child {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .kn-blog-small-post > a > div:last-child {
    flex-shrink: 0 !important;
    width: 120px !important;
  }
  
  /* Style 1 specific - ensure images maintain 4:3 ratio */
  .kn-style1-image {
    width: 120px !important;
    height: 90px !important;
  }
}

@media (max-width: 600px) {
  .kn-blog-main-container {
    padding: 0 10px !important;
    margin: 20px auto !important;
    gap: 15px !important;
  }
  .kn-blog-main-post,
  .kn-blog-small-posts,
  .kn-blog-small-post {
    width: 100% !important;
    max-width: 100% !important;
  }
  .kn-blog-main-post .kn-main-title {
    font-size: 20px !important;
    line-height: 24px !important;
    max-height: 72px !important;
    max-width: 100% !important;
    padding: 0 10px !important;
  }
  .kn-blog-small-post .kn-small-title {
    font-size: 15px !important;
    max-height: 40px !important;
  }
  /* Style 2 (Bezirksnews) - simplified mobile layout at 600px */
  #kn-style2-container .kn-blog-small-posts {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 200px !important;
    height: auto !important;
    overflow: visible !important;
  }
  /* Style 2 titles at 600px - simplified */
  #kn-style2-container .kn-blog-small-post .kn-small-title {
    font-size: 15px !important;
    line-height: 22px !important;
    max-height: none !important;
    height: auto !important;
    -webkit-line-clamp: 5 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
  }
  /* Style 2 divider lines at 600px */
  #kn-style2-container .kn-blog-small-posts hr {
    margin: 15px 0 !important;
    border: none !important;
    height: 1px !important;
    background-color: #1f2043 !important;
    width: 100% !important;
  }
  /* Hide description on mobile for simplicity */
  #kn-style2-container .kn-blog-small-post .kn-meta-description {
    display: none !important;
  }
  #kn-style2-container .kn-blog-small-post {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  #kn-style2-container .kn-blog-small-post > a {
    display: block !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  #kn-style2-container .kn-blog-small-post > a > div {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  /* Style 2 titles at 600px - allow more height */
  #kn-style2-container .kn-blog-small-post .kn-small-title {
    font-size: 15px !important;
    line-height: 22px !important;
    max-height: none !important;
    height: auto !important;
    -webkit-line-clamp: 5 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
  }
  .kn-blog-main-post img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
  .kn-blog-small-post img {
    width: 120px !important;
    height: 90px !important;
    flex-shrink: 0 !important;
  }
}

/* Mobile fixes (375px and below) - show more words and add ellipsis */
@media (max-width: 480px) {
  .kn-blog-main-container {
    padding: 0 5px !important;
    margin: 15px auto !important;
    gap: 10px !important;
  }
  .kn-blog-main-post .kn-main-title {
    font-size: 18px !important;
    line-height: 22px !important;
    max-height: 66px !important;
    padding: 0 8px !important;
  }
  .kn-blog-small-post .kn-small-title {
    font-size: 14px !important;
    line-height: 18px !important;
    max-height: 54px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  /* Style 2 (Bezirksnews) - simplified mobile layout at 480px */
  #kn-style2-container .kn-blog-small-posts {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 200px !important;
    height: auto !important;
    overflow: visible !important;
  }
  /* Style 2 titles at 480px - simplified */
  #kn-style2-container .kn-blog-small-post .kn-small-title {
    font-size: 14px !important;
    line-height: 20px !important;
    max-height: none !important;
    height: auto !important;
    -webkit-line-clamp: 5 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
  }
  /* Style 2 divider lines at 480px */
  #kn-style2-container .kn-blog-small-posts hr {
    margin: 15px 0 !important;
    border: none !important;
    height: 1px !important;
    background-color: #1f2043 !important;
    width: 100% !important;
  }
  /* Hide description on mobile for simplicity */
  #kn-style2-container .kn-blog-small-post .kn-meta-description {
    display: none !important;
  }
  #kn-style2-container .kn-blog-small-post {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  #kn-style2-container .kn-blog-small-post > a {
    display: block !important;
    width: 100% !important;
    align-items: flex-start !important;
  }
  #kn-style2-container .kn-blog-small-post > a > div {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  /* Style 2 titles at 480px - allow full height with proper line clamp */
  #kn-style2-container .kn-blog-small-post .kn-small-title {
    font-size: 14px !important;
    line-height: 20px !important;
    max-height: none !important;
    height: auto !important;
    -webkit-line-clamp: 5 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  .kn-blog-small-post img {
    width: 100px !important;
    height: 75px !important;
  }
}

/* Specific mobile fix for 375px screens */
@media (max-width: 375px) {
  .kn-blog-small-post .kn-small-title {
    font-size: 13px !important;
    line-height: 16px !important;
    max-height: 48px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* Responsive styles for Style 3 */

/* Desktop layout (900px and above) */
@media (min-width: 900px) {
  .kn-style3-row-1,
  .kn-style3-row-2 {
    display: grid !important;
  }
  
  .kn-style3-mobile-row-1,
  .kn-style3-mobile-row-2,
  .kn-style3-mobile-row-3 {
    display: none !important;
  }
  
  /* Override inline height for desktop Style 3 posts */
  .kn-style3-post .kn-small-title {
    height: 90px !important;
    max-height: 90px !important;
    min-height: 90px !important;
  }
  
  /* Ensure all posts including first post have same height on desktop */
  .kn-style3-row-1 .kn-style3-post .kn-small-title,
  .kn-style3-row-2 .kn-style3-post .kn-small-title {
    height: 90px !important;
    max-height: 100px !important;
    min-height: 100px !important;
  }
}

/* KN Mehr Zur Thema Widget - 3 Posts Layout */
@media (min-width: 900px) {
  .kn-style3-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 35px !important;
  }
  
  .kn-style3-mobile-row {
    display: none !important;
  }
}

/* Tablet and Mobile layout (below 900px) */
@media (max-width: 899px) {
  .kn-style3-row-1,
  .kn-style3-row-2 {
    display: none !important;
  }
  
  .kn-style3-mobile-row-1,
  .kn-style3-mobile-row-2,
  .kn-style3-mobile-row-3 {
    display: grid !important;
  }
  
  /* KN Mehr Zur Thema Widget - Mobile Layout */
  .kn-style3-row {
    display: none !important;
  }
  
  .kn-style3-mobile-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  
  .kn-style3-container {
    padding: 0 15px !important;
    margin: 30px auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .kn-style3-mobile-row-1,
  .kn-style3-mobile-row-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
    width: 100% !important;
    display: grid !important;
  }
  
  .kn-style3-mobile-row-3 {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    width: 100% !important;
    display: grid !important;
  }
  
  /* Force equal column widths in grid */
  .kn-style3-mobile-row-1 > *,
  .kn-style3-mobile-row-2 > *,
  .kn-style3-mobile-row-3 > * {
    min-width: 0 !important;
    width: 100% !important;
  }
  
  .kn-style3-post {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }
  
  /* Ensure all posts have equal width in grid */
  .kn-style3-mobile-row-1 .kn-style3-post,
  .kn-style3-mobile-row-2 .kn-style3-post,
  .kn-style3-mobile-row-3 .kn-style3-post {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 0 !important;
  }
  
  /* Ensure images are same size for all posts */
  .kn-style3-post img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4/3 !important;
    object-fit: cover !important;
    display: block !important;
  }
  
  /* Ensure image containers are equal size */
  .kn-style3-post > a > div:first-child {
    width: 100% !important;
    aspect-ratio: 4/3 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  /* Ensure first post image container is same as others */
  .kn-style3-mobile-row-1 .kn-style3-post:first-child > a > div:first-child,
  .kn-style3-mobile-row-1 .kn-style3-post > a > div:first-child {
    width: 100% !important;
    aspect-ratio: 4/3 !important;
    overflow: hidden !important;
  }
  
  /* Override inline height styles for all posts including first post */
  .kn-style3-container .kn-style3-post .kn-small-title,
  .kn-style3-container .kn-style3-mobile-row-1 .kn-small-title,
  .kn-style3-container .kn-style3-mobile-row-2 .kn-small-title,
  .kn-style3-container .kn-style3-mobile-row-3 .kn-small-title {
    font-size: 14px !important;
    line-height: 20px !important;
    height: 90px !important;
    max-height: 80px !important;
    min-height: 80px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Ensure first post is same size as others on mobile */
  .kn-style3-container .kn-style3-mobile-row-1 .kn-style3-post:first-child .kn-small-title,
  .kn-style3-container .kn-style3-mobile-row-1 .kn-style3-post .kn-small-title,
  .kn-style3-container .kn-style3-mobile-row-1 .kn-style3-post:nth-child(1) .kn-small-title,
  .kn-style3-container .kn-style3-mobile-row-1 .kn-style3-post:nth-child(2) .kn-small-title {
    font-size: 14px !important;
    line-height: 20px !important;
    height: 90px !important;
    max-height: 80px !important;
    min-height: 80px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .kn-style3-mobile-ads {
    grid-column: 2 !important;
  }
}

/* Mobile layout (below 600px) */
@media (max-width: 599px) {
  .kn-style3-container {
    padding: 0 10px !important;
    margin: 20px auto !important;
  }
  
  .kn-style3-mobile-row-1,
  .kn-style3-mobile-row-2,
  .kn-style3-mobile-row-3 {
    gap: 15px !important;
    margin-bottom: 20px !important;
  }
  
  /* Override inline height for all posts including first post */
  .kn-style3-container .kn-style3-post .kn-small-title,
  .kn-style3-container .kn-style3-mobile-row-1 .kn-small-title,
  .kn-style3-container .kn-style3-mobile-row-2 .kn-small-title,
  .kn-style3-container .kn-style3-mobile-row-3 .kn-small-title {
    font-size: 14px !important;
    line-height: 18px !important;
    height: 90px !important;
    max-height: 80px !important;
    min-height: 80px !important;
  }
  
  /* Ensure first post is same size as others */
  .kn-style3-container .kn-style3-mobile-row-1 .kn-style3-post:first-child .kn-small-title,
  .kn-style3-container .kn-style3-mobile-row-1 .kn-style3-post .kn-small-title {
    font-size: 14px !important;
    line-height: 18px !important;
    height: 90px !important;
    max-height: 80px !important;
    min-height: 80px !important;
  }
}

/* Small mobile layout (below 480px) */
@media (max-width: 480px) {
  .kn-style3-container {
    padding: 0 5px !important;
    margin: 15px auto !important;
  }
  
  .kn-style3-mobile-row-1,
  .kn-style3-mobile-row-2,
  .kn-style3-mobile-row-3 {
    gap: 10px !important;
    margin-bottom: 15px !important;
  }
  
  /* Override inline height for all posts including first post */
  .kn-style3-post .kn-small-title {
    font-size: 12px !important;
    line-height: 16px !important;
    height: 90px !important;
    max-height: 80px !important;
    min-height: 80px !important;
  }
  
  /* Ensure first post is same size as others */
  .kn-style3-mobile-row-1 .kn-style3-post:first-child .kn-small-title,
  .kn-style3-mobile-row-1 .kn-style3-post .kn-small-title {
    font-size: 12px !important;
    line-height: 16px !important;
    height: 90px !important;
    max-height: 80px !important;
    min-height: 80px !important;
  }
} 

/* Remove hover animations on blog posts */
/* Target the specific classes mentioned by the user */
.image-overlay,
.image-overlay-inside {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Remove hover animations on all blog post elements */
.kn-blog-main-post,
.kn-blog-small-post,
.kn-style3-post,
.kn-slider4-post,
.kn-blog-main-post a,
.kn-blog-small-post a,
.kn-style3-post a,
.kn-slider4-post a,
.kn-blog-main-post img,
.kn-blog-small-post img,
.kn-style3-post img,
.kn-slider4-post img {
  transition: none !important;
  transform: none !important;
  animation: none !important;
}

/* Remove hover effects on blog post containers */
.kn-blog-main-container,
.kn-blog-small-posts,
.kn-style3-container,
.kn-slider4-outer {
  transition: none !important;
  transform: none !important;
  animation: none !important;
}

/* Remove any overlay effects on hover */
.kn-blog-main-post:hover,
.kn-blog-small-post:hover,
.kn-style3-post:hover,
.kn-slider4-post:hover {
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Remove any overlay elements that might appear on hover */
.kn-blog-main-post:hover::before,
.kn-blog-main-post:hover::after,
.kn-blog-small-post:hover::before,
.kn-blog-small-post:hover::after,
.kn-style3-post:hover::before,
.kn-style3-post:hover::after,
.kn-slider4-post:hover::before,
.kn-slider4-post:hover::after {
  display: none !important;
  content: none !important;
}

/* Ensure no background overlays appear on hover */
.kn-blog-main-post:hover .image-overlay,
.kn-blog-small-post:hover .image-overlay,
.kn-style3-post:hover .image-overlay,
.kn-slider4-post:hover .image-overlay,
.kn-blog-main-post:hover .image-overlay-inside,
.kn-blog-small-post:hover .image-overlay-inside,
.kn-style3-post:hover .image-overlay-inside,
.kn-slider4-post:hover .image-overlay-inside {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
}

/* Ensure all blog images maintain 4:3 aspect ratio */
/* Style 1 - Main post image */
.kn-blog-main-post > a > div:first-child {
  aspect-ratio: 4/3 !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 6px 6px 0 0 !important;
}

.kn-blog-main-post > a > div:first-child > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 6px 6px 0 0 !important;
}

/* Style 1 - Small post images (specific class) */
.kn-style1-image {
  aspect-ratio: 4/3 !important;
  width: 180px !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}

.kn-style1-image > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 6px !important;
}

/* Style 3 - All post images */
.kn-style3-post > a > div:first-child {
  aspect-ratio: 4/3 !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  margin-bottom: 15px !important;
}

.kn-style3-post > a > div:first-child > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 6px !important;
}

.kn-style3-post.has-badge > a > div:first-child {
  border-radius: 6px 6px 6px 0 !important;
}

.kn-style3-post.has-badge > a > div:first-child > img {
  border-radius: 6px 6px 6px 0 !important;
}

/* Style 4 - Slider post images */
.kn-slider4-post > a > div:first-child {
  aspect-ratio: 4/3 !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  margin-bottom: 20px !important;
  background: #f0f0f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.kn-slider4-post > a > div:first-child > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

/* Responsive adjustments for 4:3 aspect ratio - Style 1 only */
@media (max-width: 900px) {
  .kn-style1-image {
    width: 120px !important;
  }
}

@media (max-width: 600px) {
  .kn-style1-image {
    width: 120px !important;
  }
}

@media (max-width: 480px) {
  .kn-style1-image {
    width: 100px !important;
  }
}

/* Responsive styles for Style 5 - Main Post Only */

/* Desktop layout (901px and above) */
@media (min-width: 901px) {
  .kn-style5-container {
    max-width: 1020px !important;
    margin: 0 auto !important;
  }
  
  .kn-style5-main-post .kn-main-title {
    font-size: 28px !important;
    line-height: 33px !important;
    max-height: 132px !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Tablet and Mobile layout (below 900px) */
@media (max-width: 900px) {
  .kn-style5-container {
    padding: 0 15px !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .kn-style5-main-post {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .kn-style5-main-post .kn-main-title {
    font-size: 24px !important;
    line-height: 28px !important;
    max-height: 84px !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  .kn-style5-main-post img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    border-radius: 6px 6px 0 0 !important;
  }
}

/* Mobile layout (below 600px) */
@media (max-width: 600px) {
  .kn-style5-container {
    padding: 0 10px !important;
    margin: 0 auto !important;
  }
  
  .kn-style5-main-post .kn-main-title {
    font-size: 20px !important;
    line-height: 24px !important;
    max-height: 72px !important;
    max-width: 100% !important;
    padding: 0 10px !important;
  }
}

/* Small mobile layout (below 480px) */
@media (max-width: 480px) {
  .kn-style5-container {
    padding: 0 5px !important;
    margin: 0 auto !important;
  }
  
  .kn-style5-main-post .kn-main-title {
    font-size: 18px !important;
    line-height: 22px !important;
    max-height: 66px !important;
    padding: 0 8px !important;
  }
}

/* Ensure Style 5 images maintain 4:3 aspect ratio like Style 1 */
.kn-style5-main-post > a > div:first-child {
  aspect-ratio: 4/3 !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 6px 6px 0 0 !important;
}

.kn-style5-main-post > a > div:first-child > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 6px 6px 0 0 !important;
}

/* Remove hover animations on Style 5 posts */
.kn-style5-main-post,
.kn-style5-main-post a,
.kn-style5-main-post img {
  transition: none !important;
  transform: none !important;
  animation: none !important;
}

.kn-style5-container {
  transition: none !important;
  transform: none !important;
  animation: none !important;
}

.kn-style5-main-post:hover {
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}

.kn-style5-main-post:hover::before,
.kn-style5-main-post:hover::after {
  display: none !important;
  content: none !important;
}

.kn-style5-main-post:hover .image-overlay,
.kn-style5-main-post:hover .image-overlay-inside {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
}

/* ========== Style 6: excerpt always 3 lines, top/bottom sections equal height ========== */
.kn-style6-excerpt {
  -webkit-line-clamp: 3 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  max-height: 63px !important;
  line-height: 21px !important;
}

/* ========== Style 6 responsive: right column stacks under left on tablet & mobile ========== */

@media (max-width: 900px) {
  /* Ensure Style 6 main container stacks: left column first, right column below */
  .kn-style6-container.kn-blog-main-container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
    padding: 0 15px !important;
    max-width: 100% !important;
  }
  /* Right column: full width, natural height so it's visible below left column */
  .kn-style6-container .kn-style6-small-posts {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 0 !important;
    order: 2 !important;
  }
  .kn-style6-container .kn-blog-main-post {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Style 6 sections: natural height on mobile/tablet */
  .kn-style6-top-section,
  .kn-style6-bottom-section {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }
  .kn-style6-small-posts .kn-blog-small-post {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }
  /* Style 6 small post image: full width on small screens */
  .kn-style6-small-posts .kn-style6-image {
    width: 120px !important;
    min-width: 120px !important;
  }
}

@media (max-width: 600px) {
  .kn-style6-container.kn-blog-main-container {
    padding: 0 10px !important;
    gap: 20px !important;
  }
  .kn-style6-small-posts .kn-style6-image {
    width: 100px !important;
    min-width: 100px !important;
  }
  .kn-style6-small-posts .kn-blog-small-post > a {
    flex-wrap: wrap !important;
  }
  .kn-style6-small-posts .kn-blog-small-post > a > div:first-child {
    max-width: calc(100% - 120px) !important;
  }
}

@media (max-width: 480px) {
  .kn-style6-container.kn-blog-main-container {
    padding: 0 10px !important;
  }
  .kn-style6-small-posts .kn-style6-image {
    width: 80px !important;
    min-width: 80px !important;
  }
  .kn-style6-small-posts .kn-blog-small-post > a > div:first-child {
    max-width: calc(100% - 100px) !important;
  }
}