#blog .cats-filter,#portfolio .cats-filter{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#blog .cats-filter li,#portfolio .cats-filter li{margin:0}
#blog .cats-filter li a,#portfolio .cats-filter li a{float:none;display:inline-flex;align-items:center}
#blog .cats-filter li a,#portfolio .cats-filter li a,.pagination a,.pagination span{
font-size:12px;
font-weight:600;
line-height:1.2;
}
#blog-list .blog-entry{display:block}
.blog-sidebar .sidebar-list{list-style:none;padding:0;margin:0}
.blog-sidebar .sidebar-list li{margin:0}
.blog-sidebar .sidebar-list a{
display:block;
padding:9px 10px;
border:1px solid #ececec;
border-radius:8px;
background:#fafafa;
color:#444;
text-decoration:none;
line-height:1.35;
transition:all .2s ease;
}
.blog-sidebar .sidebar-list a:hover{
border-color:#fdc750;
background:#fff7df;
color:#222;
}
.blog-sidebar .recent-posts-list{
display:flex;
flex-direction:column;
gap:8px;
margin-bottom:18px;
}
.blog-sidebar .category-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.blog-sidebar .sidebar-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:2px;
}
.blog-sidebar .category-list .cat-item a{
text-align:center;
font-weight:600;
padding:8px 10px;
background:#f3f4f6;
}
.blog-sidebar .category-list .cat-item a:hover{
background:#fdc750;
border-color:#fdc750;
color:#333;
}
@media (max-width: 767px){
.blog-sidebar .category-list{
grid-template-columns:1fr;
}
}
.pagination{margin:12px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.pagination a,.pagination span{border:1px solid #ddd;border-radius:6px;padding:6px 10px;min-width:34px;text-align:center;color:#666;text-decoration:none}
.pagination .active{background:#fdc750;border-color:#fdc750;color:#333}

/* Blog list: cleaner card style */
#blog-list{
display:flex;
flex-direction:column;
gap:16px;
}
#blog-list .blog-entry{
background:#fff;
border:1px solid #ececec;
border-radius:10px;
overflow:hidden;
box-shadow:0 1px 2px rgba(0,0,0,.03);
margin:0;
}
#blog-list .blog-entry:hover{
border-color:#e1e1e1;
box-shadow:0 6px 16px rgba(0,0,0,.06);
}
#blog-list .blog-entry h3{
padding:14px 14px 8px !important;
margin:0;
line-height:1.3;
}
#blog-list .blog-entry h3 a{
color:#2f2f2f;
text-decoration:none;
font-size:19px;
font-weight:700;
}
#blog-list .blog-entry h3 a:hover{
color:#000;
text-decoration:underline;
text-underline-offset:2px;
}
#blog-list .blog-entry .entry-info{
display:flex;
align-items:center;
gap:8px;
margin:0;
padding:0 14px 10px;
}
#blog-list .blog-entry .entry-tags{
display:flex;
flex-wrap:wrap;
gap:6px;
padding:0 14px 10px;
}
.tag-pill{
display:inline-flex;
align-items:center;
padding:4px 8px;
border:1px solid #e3e3e3;
border-radius:999px;
background:#f7f7f7;
font-size:11px;
line-height:1;
font-weight:600;
color:#555;
text-decoration:none;
}
.tag-pill:hover{
background:#fdc750;
border-color:#fdc750;
color:#333;
}
#blog-list .blog-entry .entry-date-small,
#blog-list .blog-entry .entry-categories-small{
position:static;
float:none;
display:inline-flex;
align-items:center;
padding:4px 8px;
font-size:11px;
line-height:1.2;
border-radius:999px;
}
#blog-list .blog-entry .entry-date-small{
background:#f1f3f5;
color:#444;
}
#blog-list .blog-entry .entry-date-small .day{
border-right:1px solid #bbb;
padding-right:6px;
margin-right:6px;
}
#blog-list .blog-entry .entry-categories-small{
background:#fff1c9;
color:#6d5602;
}
#blog-list .blog-entry .entry-thumbnail{
padding:0 14px 10px;
}
#blog-list .blog-entry .entry-thumbnail img{
width:100%;
height:auto;
border-radius:8px;
opacity:1;
}
#blog-list .blog-entry p{
padding:0 14px 12px !important;
margin:0;
font-size:14px;
line-height:1.55;
color:#555;
}
#blog-list .blog-entry p:last-child{
padding-bottom:14px !important;
}
#blog-list .blog-entry p a[href]{
display:inline-block;
padding:7px 11px;
border:1px solid #e4e4e4;
border-radius:7px;
background:#fafafa;
font-weight:600;
font-size:13px;
text-decoration:none;
color:#333;
}
#blog-list .blog-entry p a[href]:hover{
background:#fdc750;
border-color:#fdc750;
color:#333;
}

#resume .skills{width:100%}
#resume .skills li{
display:grid;
grid-template-columns:minmax(0,1fr) 140px;
align-items:center;
column-gap:6px;
width:100%;
padding:6px 0;
}
#resume .skills li h4{
width:auto;
float:none;
margin:0;
font-size:15px;
font-weight:400;
white-space:normal;
overflow:visible;
text-overflow:clip;
overflow-wrap:break-word;
word-break:normal;
}
#resume .skills li .rating{
width:132px;
float:none;
display:flex;
align-items:center;
justify-content:flex-start;
gap:4px;
min-width:132px;
line-height:1;
}
#resume .skills li .rating>span{
display:inline-block;
flex:0 0 auto;
box-sizing:border-box;
margin:0;
padding:0;
width:10px !important;
height:10px !important;
min-width:10px;
min-height:10px;
border:1px solid #bdbdbd;
border-radius:50%;
opacity:.25;
vertical-align:middle;
}

@media (max-width: 479px){
#resume .skills li{
grid-template-columns:minmax(0,1fr) 108px;
column-gap:8px;
padding:5px 0;
}
#resume .skills li h4{
font-size:12px;
}
#resume .skills li .rating{
width:108px;
min-width:108px;
gap:3px;
}
#resume .skills li .rating>span{
width:8px !important;
height:8px !important;
min-width:8px;
min-height:8px;
}
}

/* Portfolio thumbnails: keep horizontal ratio and crop overflow */
#portfolio-list li{
height:150px !important;
padding-bottom:0;
}
#portfolio-list li .portfolio-thumb{
display:block;
aspect-ratio:16 / 9;
overflow:hidden;
background:#ececec;
padding:0 !important;
margin:0 !important;
line-height:0;
}
#portfolio-list li .portfolio-thumb img{
display:block;
width:100% !important;
max-width:none !important;
height:100% !important;
object-fit:cover;
object-position:center center;
opacity:1 !important;
transition:transform .25s ease;
}
#portfolio-list li .portfolio-thumb:hover img{
transform:scale(1.03);
}
#portfolio-list li .title{
margin-top:8px;
margin-bottom:2px;
line-height:1.3;
}
#portfolio-list li .categorie{
display:block;
line-height:1.2;
margin:0;
}
#portfolio-list li:hover{
height:150px !important;
}
#portfolio-list li .title .project-link{
color:inherit;
text-decoration:none;
}
#portfolio-list li .title .project-link:hover{
text-decoration:underline;
}

/* Fallback for very old browsers without aspect-ratio support */
@supports not (aspect-ratio: 16 / 9){
#portfolio-list li .portfolio-thumb{
position:relative;
height:0;
padding-top:56.25%;
}
#portfolio-list li .portfolio-thumb img{
position:absolute;
top:0;
left:0;
}
}

/* Portfolio popup readability */
div.pp_default .pp_description{
white-space:pre-line;
font-size:14px;
line-height:1.6;
color:#2f2f2f;
background:#f7f7f7;
border:1px solid #e7e7e7;
border-radius:8px;
padding:10px 12px;
margin:8px 0 0;
max-height:180px;
overflow:auto;
}
div.pp_default .pp_details{
margin-top:8px;
}

/* prettyPhoto: fixed-size panel + scrollable image for consistent view */
div.pp_pic_holder{
width:min(920px,92vw) !important;
left:50% !important;
transform:translateX(-50%);
}
div.pp_pic_holder .pp_content_container,
div.pp_pic_holder .pp_content,
div.pp_pic_holder .pp_fade{
width:100% !important;
}
div.pp_pic_holder #pp_full_res{
max-height:70vh;
overflow:auto;
background:#f4f4f4;
}
div.pp_pic_holder #pp_full_res img{
display:block;
width:100% !important;
height:auto !important;
max-width:none !important;
}
div.pp_pic_holder .pp_details{
background:#fff;
padding:8px 10px 10px;
border-top:1px solid #ececec;
}

@media (max-width: 767px){
div.pp_pic_holder{
width:94vw !important;
}
div.pp_pic_holder #pp_full_res{
max-height:62vh;
}
}

/* prettyPhoto detail area: force consistent single-column layout */
div.pp_default .pp_content_container .pp_details{
float:none !important;
clear:both !important;
width:100% !important;
margin:0 !important;
box-sizing:border-box;
}
div.pp_default #pp_full_res{
height:70vh;
max-height:70vh;
overflow:auto;
}
div.pp_default .pp_description{
display:block !important;
float:none !important;
clear:both !important;
width:100% !important;
margin:8px 0 0 !important;
padding:10px 12px !important;
box-sizing:border-box;
white-space:pre-line !important;
line-height:1.55 !important;
word-break:break-word;
}
div.pp_default .pp_nav{
float:none !important;
clear:both !important;
width:auto !important;
margin:8px 0 0 !important;
display:flex;
align-items:center;
gap:6px;
}
div.pp_default .pp_nav p,
div.pp_default .pp_nav .currentTextHolder,
div.pp_default .pp_nav .pp_play,
div.pp_default a.pp_arrow_previous,
div.pp_default a.pp_arrow_next{
float:none !important;
margin:0 !important;
}

@media (max-width: 767px){
div.pp_default #pp_full_res{
height:62vh;
max-height:62vh;
}
}