/**
 * NewsCard Grid Styles
 * Custom styles for the newscard grid layout
 */

/* Grid Layout */
.colormag-posts-dropdown-container {
    margin: 20px 0;
}

.colormag-posts-grid {
    display: grid !important;
    gap: 30px;
    margin-bottom: 40px;
}

.colormag-posts-col-2 .colormag-posts-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

.colormag-posts-col-3 .colormag-posts-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

.colormag-posts-col-4 .colormag-posts-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* Post Card Styling */
.colormag-post-card {
    background: transparent;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    cursor: pointer;
    display: block !important;
    
}

.colormag-post-card:hover {
    /* transform: translateY(-5px); */
        box-shadow: 0 2px 12px rgba(218, 52, 52, 0.9);
}

/* Thumbnail Wrapper */
.post-thumbnail-wrapper {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
}

.post-thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* .post-thumbnail-wrapper:hover .post-thumbnail-img {
    transform: scale(1.05);
} */

/* Overlay with expand icon */
.post-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

/* .post-thumbnail-wrapper:hover .post-overlay {
    opacity: 1;
} */

.expand-icon {
    color: #fff;
    font-size: 48px;
    font-weight: 300;
}

/* Post Banner - Title and Date Overlay */
.post-banner {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0) 100%) !important;
    padding: 20px 15px 15px !important;
    color: white !important;
    z-index: 1;
    display: block !important;
}

.post-banner-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 8px 0 !important;
    color: white !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
    font-family: "Outfit", Sans-serif !important;
    display: block !important;
}

.post-banner-date {
    font-size: 12px !important;
    opacity: 0.9 !important;
    color: #f0f0f0 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
    font-family: "Outfit", Sans-serif !important;
    display: block !important;
}

/* Hide any text outside of image */
.post-hidden-content {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

.post-hiden-description {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  color: #282828;
  padding: 15px;
  transform: translateY(100%);  
  z-index: 10;
  box-shadow: 0 2px 12px rgba(218, 52, 52, 0.9);
  visibility: hidden;
}



.post-hiden-description p{margin: 0px;font-size: 15px; line-height: 22px;font-weight: normal; opacity: 0.8;}
.post-hiden-description > :last-child, .post-hiden-description.active > :last-child {font-size: 13px;line-height: 20px;opacity: 0.1;}

/* Infinite Scroll Loading Indicator */
.colormag-infinite-scroll-wrapper {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
}

.colormag-loading-spinner {
    color: #207daf;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    display: inline-block;
}

.colormag-loading-spinner::after {
    content: '';
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #207daf;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}
@media (min-width: 421px) {
.post-hiden-description {
  position: absolute;
  bottom: 0;
  left: 0px;  
  right: -50px; 
  background: #fff;
  color: #0e0e0e;
  padding: 15px 25px; /* Comfortable padding */
  transform: translateY(100%);  /* hidden below card */
  z-index: 10;
  visibility: hidden;
 /* min-width: 720px;  Wider minimum width */
  /* width: calc(100% + 100px); Dynamic width based on card + extra space */
  min-width: 100%;
  width: 100%;
  height: auto; /* Let content determine height */
  border-radius: 8px; /* Optional: add rounded corners */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Optional: add shadow for better visibility */
  white-space: normal; /* Allow text wrapping */
}
 
.post-hiden-description p {
  margin: 0px;
  line-height: 24px; /* Comfortable line height */
  font-size: 16px; /* Readable font size */
  font-weight: normal;
  opacity: 0.8;
  /* Removed line-clamp restrictions to allow full content */
}
.post-hiden-description.active > :last-child {
	font-size: 14px;
	line-height: 20px;
	opacity: 0.1;
}

/* .post-hiden-description:nth-child(4n-1) .post-hiden-description,
.colormag-post-card:nth-child(4n-1) .post-hiden-description{
  left: -520px;  
  right: 0px;    
  width: calc(100% + 520px); 
} 
 


.post-hiden-description:nth-child(4n) .post-hiden-description,
.colormag-post-card:nth-child(4n) .post-hiden-description{
  left: -520px;  
  right: 0px;   
  width: calc(100% + 520px); 
}  */
 
}

/* Responsive Design */
@media (max-width: 768px) {
    .colormag-posts-col-2 .colormag-posts-grid,.colormag-posts-col-3 .colormag-posts-grid,.colormag-posts-col-4 .colormag-posts-grid {grid-template-columns: 1fr !important;}
    .post-banner { padding: 15px 12px 12px !important;}
    .post-banner-title {font-size: 14px !important;margin-bottom: 5px !important;}
    .post-banner-date {font-size: 11px !important;}
}

@media (min-width: 768px) and (max-width: 1024px) {
    .colormag-posts-col-3 .colormag-posts-grid,.colormag-posts-col-4 .colormag-posts-grid { grid-template-columns: repeat(2, 1fr) !important;}
}

@media (min-width: 421px) {
    .colormag-post-card:hover .post-hiden-description {visibility: visible;}
}

@media (max-width: 420px) {
    .post-card-mob-active .post-hiden-description{visibility: visible;position: inherit;transform: none;}
}
@media screen and (min-width: 992px) {
    .post-hiden-description:nth-child(4n-3) .post-hiden-description,
    .colormag-post-card:nth-child(4n-3) .post-hiden-description{width: 100%;left: 0;right: auto;min-width: calc(100% * 4 + 60px);}
    .post-hiden-description:nth-child(4n-2) .post-hiden-description,
    .colormag-post-card:nth-child(4n-2) .post-hiden-description{width: 100%;left: 0;right: auto;min-width: calc(100% * 3 + 40px);}
    .post-hiden-description:nth-child(4n-1) .post-hiden-description,
    .colormag-post-card:nth-child(4n-1) .post-hiden-description{width: 100%;left: auto;right: 0;min-width: calc(100% * 3 + 40px);}
    .post-hiden-description:nth-child(4n) .post-hiden-description,
    .colormag-post-card:nth-child(4n) .post-hiden-description{width: 100%;left: auto;right: 0;min-width: calc(100% * 4 + 60px);} 
    .post-hiden-description:nth-child(4n-3) .post-hiden-description.active::before,
    .colormag-post-card:nth-child(4n-3) .post-hiden-description.active::before,
    .post-hiden-description:nth-child(4n-2) .post-hiden-description.active::before,
    .colormag-post-card:nth-child(4n-2) .post-hiden-description.active::before{left: 25px;}
    .post-hiden-description:nth-child(4n-1) .post-hiden-description.active::before,
    .colormag-post-card:nth-child(4n-1) .post-hiden-description.active::before,
    .post-hiden-description:nth-child(4n) .post-hiden-description.active::before,
    .colormag-post-card:nth-child(4n) .post-hiden-description.active::before{right: 25px;}
}
@media screen and (max-width: 991px) and (min-width: 768px) {
    .post-hiden-description:nth-child(3n) .post-hiden-description,
    .colormag-post-card:nth-child(3n) .post-hiden-description{width: 100%;left: auto;right: 0;min-width: calc(100% * 3 + 40px);} 
    .post-hiden-description:nth-child(3n-2) .post-hiden-description,
    .colormag-post-card:nth-child(3n-2) .post-hiden-description{width: 100%;left: 0;right: auto;min-width: calc(100% * 3 + 40px);} 
    .post-hiden-description:nth-child(3n-1) .post-hiden-description,
    .colormag-post-card:nth-child(3n-1) .post-hiden-description{width: 100%;left: 0;right: auto;width:100%;min-width: calc(100% * 2 + 20px);max-width: 490px;} 
    .post-hiden-description:nth-child(3n-1) .post-hiden-description.active::before,
    .colormag-post-card:nth-child(3n-1) .post-hiden-description.active::before,
    .post-hiden-description:nth-child(3n-2) .post-hiden-description.active::before,
    .colormag-post-card:nth-child(3n-2) .post-hiden-description.active::before{left: 25px;}
    .post-hiden-description:nth-child(3n) .post-hiden-description.active::before,
    .colormag-post-card:nth-child(3n) .post-hiden-description.active::before{right: 25px;}
}
@media screen and (max-width: 767px) and (min-width: 577px) {
    .post-hiden-description:nth-child(2n) .post-hiden-description,
    .colormag-post-card:nth-child(2n) .post-hiden-description{width: 100%;left: auto;right: 0;min-width: calc(100% + 100% + 20px);} 
    .post-hiden-description:nth-child(2n-1) .post-hiden-description,
    .colormag-post-card:nth-child(2n-1) .post-hiden-description{width: 100%;left: 0;right: auto;min-width: calc(100% + 100% + 20px);} 
    .post-hiden-description:nth-child(2n) .post-hiden-description.active::before,
    .colormag-post-card:nth-child(2n) .post-hiden-description.active::before{right: 25px;}
    .post-hiden-description:nth-child(2n-1) .post-hiden-description.active::before,
    .colormag-post-card:nth-child(2n-1) .post-hiden-description.active::before{left: 25px;}

}
@media screen and (max-width: 576px) and (min-width: 320px) {
    .post-hiden-description:nth-child(n) .post-hiden-description,
    .colormag-post-card:nth-child(n) .post-hiden-description {width: 100%;right: 0;left: auto;min-width: auto;}
    .post-hiden-description:nth-child(n) .post-hiden-description.active::before,
    .colormag-post-card:nth-child(n) .post-hiden-description.active::before{right: 25px;}
}
/* Quotation-style tail */
.post-hiden-description.active::before {
  content: '';
  position: absolute;
  bottom: 100%;
  margin-left: -5px;
  border-width: 7px;
  border-style: solid;
  border-color: transparent transparent #ffffff transparent;
  border-color: transparent transparent rgba(255, 255, 255, 1)  transparent;
  /* filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.1)); */
}