/*
  Blog styles - used by core/views/blog-*.php, frontpage.php, homepage.php
  Every element has its own class, so Custom CSS can target it directly
  (Custom CSS cannot use the child selector, see admin/custom-class-names).
*/

/* page wrapper: .blog + one of .blog--list .blog--category .blog--tag .blog--search .blog--author .blog--post */
.blog{width:100%;max-width:1170px;margin:0 auto;padding:15px;box-sizing:border-box}
.blog--post{max-width:900px}
.blog.has-sidebar{max-width:1200px}

/* list header */
.blog__header{text-align:center;margin-bottom:1em}
.blog__title{margin:0 0 .3em}
.blog__subtitle{margin:0;opacity:.8}
.blog__categories{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:1em}
.blog__category{display:inline-block;padding:4px 10px;border-radius:var(--main-radius);background:var(--main-primary-color);color:#fff;font-size:.875rem}
.blog__category:hover{color:#fff;opacity:.9}

/* layout with optional sidebar (theme option blog.sidebar) */
.blog__layout{display:grid;gap:30px}
.blog__main{min-width:0}
@media (min-width:992px){
  .blog.has-sidebar .blog__layout{grid-template-columns:minmax(0,1fr) 280px}
}

/* list of posts */
.blog__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:20px}
.blog__empty{text-align:center;opacity:.8;grid-column:1/-1}

/* post card */
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid #ddd;overflow:hidden}
.post-card__image{display:block}
.post-card__img{display:block;width:100%;height:200px;object-fit:cover}
.post-card__body{display:flex;flex-direction:column;flex:1;padding:15px}
.post-card__title{margin:0 0 .4em;font-size:1.4em}
.post-card__title a{color:inherit}
.post-card__title a:hover{color:var(--main-a-color)}
.post-card__date{display:block;font-size:.85em;opacity:.7;margin-bottom:.5em}
.post-card__excerpt{flex:1;margin:0 0 1em}
.post-card__more{font-weight:bold}

/* pagination (core/views/pagination.php) */
.g-pagination{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;padding:0;margin:20px 0}
.g-pagination li{list-style-type:none;border:1px solid #ccc;display:inline-block;padding:0}
.g-pagination li.ellipsis{border:0;padding:0 4px}
.g-pagination a{padding:6px 8px;color:var(--main-a-color);border:0;font:15px Arial;display:inline-block;cursor:pointer;text-align:center}
.g-pagination .active a{color:#fff;background:var(--main-a-color)}

/* single post */
body:has(.blog--post){display:grid;grid-template-rows:auto 1fr auto}
.post-cover{height:400px;background-size:cover;background-position:center;margin-bottom:-160px}
.blog--post.has-cover .post{background:#fff;padding:15px}
.post{margin-bottom:30px}
.post__header{text-align:center;margin-bottom:1.5em}
.post__title{margin:0 0 .3em}
.post__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.3em;text-align:center;color:#666}
.post__categories{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:.8em}
.post__content{max-width:700px;margin:auto}
.post__content img{max-width:100%;height:auto}
.post__related{max-width:700px;margin:40px auto}
.post__related-title{font-size:1.1em;margin:0 0 .8em}
.post__related-list{padding-left:1.2em}