/* CSS riêng của trang Issue view (frontend/pages/issue.tpl)
   Layout phần đầu trang (.huaf_issue_toc_heading) nằm trong main.css vì dùng
   chung với item của trang Issue Archive */

/* Tiêu đề section (mục lục bài viết) theo mẫu block title trang chủ */
.huaf_issue_section {
    margin-bottom: 15px;
}

.huaf_issue_section > h2,
.huaf_issue_section > h3 {
    margin: 0 0 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.huaf_issue_toc .huaf_article_list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Item bài viết theo mẫu huaf_most-viewed_item của trang chủ.
   Không dùng column-gap vì bài không có cover sẽ để lại khoảng trắng ở cột
   cover rỗng; khoảng cách đặt trực tiếp trên phần tử cover và cột galleys */
.huaf_issue_toc .huaf_article_summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "cover title galleys"
        "cover meta galleys";
    row-gap: 5px;
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 3px;
    background: #e8e8e8;
}

.huaf_issue_toc .huaf_article_cover {
    grid-area: cover;
    align-self: start;
    margin-right: 15px;
    line-height: 0;
}

.huaf_issue_toc .huaf_article_cover img {
    display: block;
    width: 100px;
    height: auto;
}

.huaf_issue_toc .huaf_article_title {
    grid-area: title;
    margin: 0 0 7px;
    padding: 0;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-align: justify;
    text-transform: uppercase;
}

.huaf_issue_toc .huaf_article_title a {
    padding: 0;
    color: #000;
    text-decoration: none;
}

.huaf_issue_toc .huaf_article_title a:hover {
    color: var(--primary-color);
}

/* Metadata theo mẫu huaf_most-viewed_item-data: cột tác giả riêng,
   các thông tin khác (số, trang, ngày, DOI) thành hàng ngang có label */
.huaf_issue_toc .huaf_article_meta {
    grid-area: meta;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.huaf_issue_toc .huaf_article_others {
    display: flex;
    flex-wrap: wrap;
}

.huaf_issue_toc .huaf_article_others > div:not(:last-child) {
    margin-right: 10px;
}

.huaf_issue_toc .huaf_article_doi {
    display: flex;
    gap: 5px;
}

.huaf_issue_toc .huaf_article_doi a {
    padding: 0;
    color: var(--primary-color);
    text-decoration: none;
    word-break: break-all;
}

.huaf_issue_toc .huaf_article_doi a:hover {
    color: var(--primary-darker-color);
    text-decoration: underline;
}

/* Link galley (PDF/HTML...) cột phải, theo mẫu links của item trang chủ.
   Scope trong .huaf_article_summary để không đè màu chữ của nút full-issue
   trong .huaf_issue_toc_heading */
.huaf_issue_toc .huaf_article_summary .huaf_galleys_links {
    grid-area: galleys;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    margin: 0 0 0 15px;
    padding: 0;
    list-style: none;
}

.huaf_issue_toc .huaf_article_summary .huaf_galleys_links a {
    padding: 0;
    color: var(--primary-color);
    font-weight: 700;
    text-decoration: none;
}

.huaf_issue_toc .huaf_article_summary .huaf_galleys_links a:hover {
    color: var(--primary-darker-color);
}

@media (max-width: 768px) {
    .huaf_issue_toc .huaf_article_summary {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "cover"
            "title"
            "meta"
            "galleys";
    }

    .huaf_issue_toc .huaf_article_cover img {
        max-width: 120px;
    }

    .huaf_issue_toc .huaf_galleys_links {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }
}