/* HK-491: /blog list polish (also tag and month lists). Includes the HK-434 card-image rules, so the list view loads
   this one file instead of hk434.css. Scoped to .html-blog-page (the list); the blog post page is untouched. */

/* --- HK-434 card image: the box sets the size (no width/height attributes on the img) --- */
.blog-page .blog-posts .post .hk-card-img{display:block;aspect-ratio:16/10;overflow:hidden;background:#fbf6ee;border-bottom:1px solid #eee;border-radius:3px 3px 0 0}
.blog-page .blog-posts .post .hk-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.blog-page .blog-posts .post:hover .hk-card-img img{transform:scale(1.03)}

/* --- even rows: CSS grid replaces the theme's floated 50% cards --- */
.html-blog-page .blog-page .blog-posts{display:grid;grid-template-columns:1fr;gap:24px}
.html-blog-page .blog-page .blog-posts .post,
.html-blog-page .center-2 .blog-page .blog-posts .post:nth-child(2n+1){float:none;clear:none;width:auto;margin:0}
.html-blog-page .blog-page .blog-posts .post{display:flex;flex-direction:column;background:#fff;border:1px solid #e6e1d8;border-radius:4px;transition:box-shadow .2s ease}
.html-blog-page .blog-page .blog-posts .post:hover{box-shadow:0 4px 14px rgba(29,29,27,.08)}
.html-blog-page .blog-page .blog-posts .post:after{display:none}
.html-blog-page .blog-page .blog-posts .post-details{flex:1;display:flex;flex-direction:column;padding:24px 28px 28px}
.html-blog-page .blog-page .blog-posts .post-footer{margin-top:auto;padding-top:20px}
@media all and (min-width:769px){
  .html-blog-page .blog-page .blog-posts{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
}

/* --- type: quieter date, semibold dark title, 18px near-black summary clamped to 3 lines --- */
.html-blog-page .blog-posts .post-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;text-align:left}
.html-blog-page .blog-posts .post-date{order:0;margin:0;font-size:14px;font-weight:400;letter-spacing:.06em;color:#6b6b6b;text-align:left}
.html-blog-page .blog-posts .post-title{order:2;flex-basis:100%;margin:6px 0 12px;font-family:Roboto,Arial,sans-serif;font-size:22px;font-weight:600;line-height:1.3;color:#1d1d1b}
.html-blog-page .blog-posts .post-title:hover{color:#9b2335}
.html-blog-page .blog-posts .post-body,
.html-blog-page .blog-posts .post-body p{font-size:18px;line-height:1.6;color:#3a3a3a;margin:0}
.html-blog-page .blog-posts .post-body{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* --- soft chip next to the date (Kit news / Tutorials / Cut files) --- */
.html-blog-page .blog-posts .hk-chip{order:1;display:inline-block;padding:3px 10px;border-radius:999px;background:#eef6d6;color:#1f4d3a;font-size:13px;font-weight:600;line-height:1.4}

/* --- READ MORE (RichBlog footer button): brand gold with a dark label, 46px tall --- */
.html-blog-page .blog-posts .post-footer .read-more{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border:0;border-radius:4px;background:#eebe00;color:#1d1d1b;font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.html-blog-page .blog-posts .post-footer .read-more:hover{background:#d9ab00;color:#1d1d1b}
.html-blog-page .blog-posts .post-footer .read-more:focus-visible{outline:3px solid #1f4d3a;outline-offset:2px}
.html-blog-page .blog-posts .post-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.html-blog-page .blog-posts .post-actions .share-post{margin:0;float:none;opacity:.55}
.html-blog-page .blog-posts .post-actions .share-post:hover{opacity:1}

/* --- featured card (plain /blog page 1 only): full width, image left, text right on wider screens --- */
.html-blog-page .blog-page .blog-posts .post.hk-featured{grid-column:1/-1}
.html-blog-page .blog-posts .hk-featured .post-title{font-size:28px}
.html-blog-page .blog-posts .hk-featured .post-body{-webkit-line-clamp:4}
@media all and (min-width:769px){
  .html-blog-page .blog-page .blog-posts .post.hk-featured{flex-direction:row}
  .html-blog-page .blog-posts .hk-featured .hk-card-img{flex:0 0 55%;aspect-ratio:auto;min-height:340px;border-bottom:0;border-right:1px solid #eee;border-radius:4px 0 0 4px}
  .html-blog-page .blog-posts .hk-featured .post-details{justify-content:center;padding:36px 40px}
}

/* --- sidebar: hide the empty RichBlog Categories block; soft Browse by links; archive folds by year --- */
.html-blog-page .blog-category-navigation{display:none}
.html-blog-page .hk-browse-by .list li a,
.html-blog-page .hk-archive summary{display:flex;align-items:center;min-height:44px;font-size:16px;color:#1d1d1b}
.html-blog-page .hk-browse-by .list li a:hover{color:#9b2335}
.html-blog-page .hk-archive .year{margin-top:0}
.html-blog-page .hk-archive summary{cursor:pointer;font-weight:600;justify-content:space-between;list-style:none}
.html-blog-page .hk-archive summary::-webkit-details-marker{display:none}
.html-blog-page .hk-archive summary:after{content:"+";font-weight:400;color:#6b6b6b}
.html-blog-page .hk-archive details[open] summary:after{content:"\2212"}
.html-blog-page .hk-archive summary:focus-visible{outline:3px solid #1f4d3a;outline-offset:2px}
.html-blog-page .hk-archive .sublist{padding:0 0 10px 12px}
.html-blog-page .hk-archive .sublist a{display:inline-block;padding:6px 0;font-size:15px}

@media (prefers-reduced-motion:reduce){
  .blog-page .blog-posts .post .hk-card-img img,.html-blog-page .blog-page .blog-posts .post{transition:none}
  .blog-page .blog-posts .post:hover .hk-card-img img{transform:none}
}