/* override */
/* .view, .view-content {
    display: block;
} */

.views-element-container{
    display: block;
}



.view-display-id-knowledge{
    max-width: calc(var(--default-max-width) - var(--header-padding) * 3);
    margin: 0 auto; 
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "view-filters"
        "view-content"
        "pager";
    gap: 0;
}

.view-filters{
    display: block;
    grid-area: view-filters;
}

.view-content{
    grid-area: view-content;
}

.pager .layout--content-medium{
    grid-area: pager;
}



#views-exposed-form-knowledge-knowledge {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 2fr ; 
    grid-template-areas:
        "knowledge-search knowledge-search knowledge-search knowledge-search  knowledge-search"
        "applications-category product-lines suppliers-category resource-type  combine-filter";
    gap: 1rem;
}

/* specific to the search on knowledge page */
.form-actions .js-form-wrapper .form-wrapper,
#edit-actions{
    grid-area: knowledge-search;
}

/* 搜索按钮字体样式 */
#edit-actions input[type="submit"],
#edit-submit-knowledge {
    font-size: 2.5rem;
    font-weight: 1000;
}
.js-form-item-field-applications-target-id{
    grid-area: applications-category;
}
.js-form-item-field-product-lines-target-id{
    grid-area: product-lines;
}
.js-form-item-field-suppliers-target-id{
    grid-area: suppliers-category;
}
.js-form-item-field-resource-type-target-id{
    grid-area: resource-type;
}

.js-form-item-combine{
    grid-area: combine-filter;
}

.node--view-mode-library-search-result .node__content {
    /* border: 1px solid black; */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 3rem;
}

/* Float/elevate effect on hover/focus (left, right and bottom shadows) */
.node--view-mode-library-search-result:hover .node__content,
.node--view-mode-library-search-result:focus-within .node__content {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}


.layout--twocol-section{
    gap:20px;
}
.node--view-mode-library-search-result header .node__title{
    display: none;
}


.block-field-blocknodepage-applicationfield-entry-page-thumbnail .block__content .field--name-field-entry-page-thumbnail a img{
    height: 20rem;
    width: calc(20rem * 1.618);
    aspect-ratio: 1.618 / 1;
    object-fit: cover;
}


.form-item__label{
    color: var(--front-color);
}


.node--view-mode-library-search-result  .node__content  .layout--twocol-section 
.layout__region--second {


    display: grid;
    grid-template-rows: 0.5fr 0.3fr auto auto;
    grid-template-areas:
        "application-title"
        "application-short-text"
        "application-library-code"
        "application-links";
    padding: 1rem;
}

.block-field-blocknodepage-applicationtitle{
    margin-top: 5rem;
    grid-area: application-title;

}
.block-field-blocknodepage-applicationtitle span a{
    color: #E6EFF7;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: bold;
    font-family: sans-serif;
    line-height: 1.3;
}
.block-field-blocknodepage-applicationfield-entry-page-short-text{
    grid-area: application-short-text;

}
.block-field-blocknodepage-applicationfield-entry-page-short-text a{
    color: #91B3C9;
    text-decoration: none;
    font-size: 1rem;
    font-weight: normal;
    font-family: sans-serif;
    line-height: 1.5;
    margin-bottom: 1rem;
}


.block-field-blocknodepage-applicationfield-library-code .field--name-field-library-code div{
    color: #B3C6D4;
    font-size: 0.95rem;
    font-weight: bold;
    font-family: sans-serif;
}

.block-extra-field-blocknodepage-applicationlinks{
    grid-area: application-links;
}


/* 莫名其妙出现一个 newsletter 的 library code*/
.view-display-id-knowledge .view-content .views-row .node--type-newsletter .node__content {
background-color: rgba(255, 255, 255, 0.8);
display: none;
}


/* ========================================
   移动端响应式样式 (Mobile Responsive)
   ======================================== */

/* 平板和移动端 - 768px 以下 */
@media screen and (max-width: 768px) {
    
    /* 主容器调整 */
    .view-display-id-knowledge {
        max-width: 100%;
        padding: 0 1rem;
    }
    
    /* 搜索过滤表单 - 改为单列布局 */
    #views-exposed-form-knowledge-knowledge {
        display: flex;
        flex-direction: column;
        grid-template-columns: 1fr;
        grid-template-areas: none;
        gap: 1rem;
    }
    
    /* 所有表单项占满宽度 */
    .js-form-item-field-applications-target-id,
    .js-form-item-field-product-lines-target-id,
    .js-form-item-field-suppliers-target-id,
    .js-form-item-field-resource-type-target-id,
    .js-form-item-field-library-code-value,
    .js-form-item-combine {
        grid-area: unset;
        width: 100%;
    }
    
    #edit-actions {
        grid-area: unset;
        width: 100%;
        order: -1; /* 这个属性牛逼， 将搜索按钮移到顶部 */
    }
    
    /* 搜索按钮全宽 */
    #edit-actions input[type="submit"] {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 2rem;
        font-weight: 800;
    }
    
    /* 下拉框全宽 */
    .form-select,
    .form-text {
        width: 100%;
        font-size: 1rem;
    }
    
    /* 搜索结果项 - 改为单列布局 */
    .node--view-mode-library-search-result .node__content {
        padding: 1rem;
        margin-top: 1.5rem;
    }
    
    /* 两列布局改为单列 */
    .layout--twocol-section {
        display: flex !important;
        flex-direction: column;
        gap: 1rem;
    }
    
    .layout__region--first,
    .layout__region--second {
        width: 100% !important;
    }
    
    /* 缩略图调整 */
    .block-field-blocknodepage-applicationfield-entry-page-thumbnail .block__content .field--name-field-entry-page-thumbnail a img {
        height: auto;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 1.618 / 1;
        object-fit: cover;
    }
    
    /* 右侧内容区域调整 */
    .node--view-mode-library-search-result .node__content .layout--twocol-section .layout__region--second {
        padding: 0;
        display: flex;
        flex-direction: column;
        grid-template-rows: none;
        grid-template-areas: none;
        gap: 0.75rem;
    }
    
    /* 标题区域调整 */
    .block-field-blocknodepage-applicationtitle {
        margin-top: 1rem;
        grid-area: unset;
    }
    
    .block-field-blocknodepage-applicationtitle span a {
        font-size: 1.4rem;
        line-height: 1.4;
    }
    
    /* 短文本调整 */
    .block-field-blocknodepage-applicationfield-entry-page-short-text {
        grid-area: unset;
    }
    
    .block-field-blocknodepage-applicationfield-entry-page-short-text a {
        font-size: 0.95rem;
    }
    
    /* Library Code 调整 */
    .block-field-blocknodepage-applicationfield-library-code .field--name-field-library-code div {
        font-size: 0.9rem;
    }
    
    /* Links 区域调整 */
    .block-extra-field-blocknodepage-applicationlinks {
        grid-area: unset;
    }
}

/* 小手机端 - 480px 以下 */
@media screen and (max-width: 480px) {
    
    .view-display-id-knowledge {
        padding: 0 0.75rem;
    }
    
    .node--view-mode-library-search-result .node__content {
        padding: 0.75rem;
        margin-top: 1rem;
    }
    
    .block-field-blocknodepage-applicationtitle span a {
        font-size: 1.2rem;
    }
    
    .block-field-blocknodepage-applicationfield-entry-page-short-text a {
        font-size: 0.9rem;
    }
    
    .form-item__label {
        font-size: 0.9rem;
    }
}


/* 过于暴力，注意测试其他页面*/
.form--inline .form-item__label{
    display: none;
}