/* Split Column Layout (Left Image, Right Content) */
.hd-layout-split_column {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}

.hd-layout-split_column .hd-split-item {
display: flex;
flex-direction: row;
background: #fff;
border: 1px solid rgba(0,0,0,0.05); /* Softer border */
border-radius: 12px; /* More rounded */
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
}

.hd-layout-split_column .hd-split-item:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); /* Enhanced hover */
}

.hd-layout-split_column .hd-split-item > a {
display: flex;
flex-direction: row;
width: 100%;
text-decoration: none;
color: inherit;
}

.hd-layout-split_column .postcard_thumbnail {
width: 38%; /* Slightly smaller image */
min-width: 140px;
position: relative;
overflow: hidden;
margin: 0;
border-radius: 0;
flex-shrink: 0;
}

.hd-layout-split_column .postcard_thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s ease;
}

/* Image Zoom on Hover */
.hd-layout-split_column .hd-split-item:hover .postcard_thumbnail img {
transform: scale(1.05);
}

.hd-layout-split_column .postcard_content {
width: 62%;
padding: 20px; /* More padding */
display: flex;
flex-direction: column;
justify-content: center;
}

.hd-layout-split_column .postcard_title h3 {
font-size: 1.15rem;
line-height: 1.5;
margin-bottom: 10px;
font-weight: 700;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.hd-layout-split_column .postcard_meta {
margin-top: auto;
font-size: 0.85rem;
color: #888;
display: flex;
align-items: center;
gap: 8px;
}

/* RWD for mobile */
@media (max-width: 768px) {
.hd-layout-split_column {
grid-template-columns: 1fr; /* Single column on mobile */
gap: 15px;
}

/* Keep Left-Right layout even on mobile if space allows, or stack? 
   Usually stack on very small screens, but maybe side-by-side on large phones.
   Let's stick to stacked for simplest reliable mobile view, OR side-by-side if requested.
   User didn't specify, but uploaded desktop image.
*/
.hd-layout-split_column .hd-split-item > a {
 /* Keep flex-direction row (Left-Right) on mobile too? 
Often "Left Image Right Text" on mobile is too cramped.
Let's keep it row but adjust width.
 */
}

.hd-layout-split_column .postcard_thumbnail {
width: 100px; /* Fixed width on mobile */
min-width: 100px; 
}

.hd-layout-split_column .postcard_content {
width: calc(100% - 100px);
padding: 12px;
}

.hd-layout-split_column .postcard_title h3 {
font-size: 1rem;
}
}