/*
cpkpocket.css specific for pocket page
*/


/*
cpk-specific
*/
.cpk_activity_card{
    display:flex;
    gap:10px;
}

.cpk_activity_image{
    flex:0 0 60px;
}

.cpk_activity_image img{
    width:100%;
    display:block;
    border-radius: 12px;
}

.regular_box .cpk_activity_image{
    flex:0 0 60px;
    width:60px;
    height:60px;
    overflow:hidden;
}

.regular_box .cpk_activity_image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
}



.cpk_activity_text{
    flex:1;
    min-width:0;
}


/*Parent panel*/
.hmd_pocket{
	margin-bottom:0;
    display:flex;
    flex-direction:column;
    height:100%;
    overflow:hidden;

}



.hmd_center.hmd_independentoverflow{
    display:flex;
    flex-direction:column;
}

.basic_hmd_panel.hmd_pocket{
    flex:1;
    min-height:0;
}


/*Fixed title */
.hmdpockettitle{
	flex:0 0 auto;
	padding:10px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;

	/*keeps title visible while container scrolls */
	position:sticky;
	top:0;
	z-index:2;
}

/*Remaining space */
.hmdpocketcontainer{
    flex:1 1 auto;
    min-height:0;      /* VERY IMPORTANT */
    overflow-y:auto;
}

.hmd_twolines_text{
    --lh:1.8em;

    margin:0;
    padding:0;

    line-height:var(--lh);
    height:calc(var(--lh) * 2);

    overflow:hidden;
}


.hmd_twolines_text.activity_expanded{
    height:auto;
    overflow:visible;
}

.activity_description_full{
    display:none;
}

/* See more / See less */
.activity_toggle{
    display:none;
    margin-top:4px;
    cursor:pointer;
    color:#0d6efd;
}

.activity_toggle:hover{
    text-decoration:underline;
}

/* Image container becomes positioning context */
.regular_box .cpk_activity_image{
    position:relative;
    
}


/* Slight darkening on hover */
.regular_box .cpk_activity_image::before{
    content:"";
    position:absolute;
    inset:0;

    background:rgba(0,0,0,.12);

    border-radius:12px;

    opacity:0;
    transition:opacity .18s ease;

    pointer-events:none;
}

/* Expand icon */
.activity_expand_icon{
    position:absolute;

    right:6px;
    bottom:4px;

    width:20px;
    height:20px;

    border-radius:5%;

    background:rgba(255,255,255,.92);
    color:#333;

    font-size:12px;
    line-height:20px;
    text-align:center;

    opacity:0;
    transform:scale(.85);

    transition:
        opacity .18s ease,
        transform .18s ease;

    pointer-events:none;
}


.activity_can_expand{
    cursor:pointer;
}


/* Reveal when hovering the whole regular box */
/* Reveal only if image is expandable */
.regular_box:hover .cpk_activity_image.activity_can_expand::before,
.regular_box:hover .cpk_activity_image.activity_can_expand .activity_expand_icon{
    opacity:1;
}

.regular_box:hover .cpk_activity_image.activity_can_expand .activity_expand_icon{
    transform:scale(1);
}



.activity_collapse_icon{
    position:absolute;

    top:8px;
    right:8px;

    width:26px;
    height:26px;

    line-height:26px;
    text-align:center;

    font-size:14px;

    color:#333;
    background:rgba(255,255,255,.92);

    border-radius:3px;

    opacity:.35;

    transition:opacity .18s ease;
}

/* Mobile: easier collapse button to tap */
@media (max-width:768px){

    .activity_collapse_icon{
        top:4px;
        right:4px;

        width:44px;
        height:44px;
        line-height:44px;

        font-size:22px;
    }

}

.allwidth_activity_img{
    position:relative;
}

.allwidth_activity_img:hover .activity_collapse_icon{
    opacity:1;
    cursor:pointer;
}