.forge-postgrid-block {
--pg-surface: var(--pg-surface-custom, var(--forge-card-bg));
--pg-border: var(--pg-border-custom, var(--forge-card-border));
--pg-radius: var(--pg-radius-custom, var(--forge-card-radius, 16px));
--pg-shadow: var(--pg-shadow-custom, var(--forge-card-shadow));
--pg-heading: var(--pg-heading-custom, var(--forge-on-card-bg, #2E2A3F));
--pg-text: var(--pg-text-custom, var(--forge-on-card-bg, #2E2A3F));
--pg-accent: var(--pg-accent-custom, var(--forge-primary));
--pg-date: var(--pg-date-custom, var(--forge-primary));
--pg-heading-font: var(--pg-heading-font-custom, var(--forge-font-heading));
--pg-heading-size: var(--pg-heading-size-custom, 1.15rem);
--pg-body-font: var(--pg-body-font-custom, var(--forge-font-body));
--pg-body-size: var(--pg-body-size-custom, 0.9rem);
display: block;
width: 90%;
max-width: var(--forge-block-max-width, 1200px);
margin: 0 auto var(--block-margin-bottom, var(--forge-spacing-md)) auto;
box-sizing: border-box;
animation: var(--forge-anim-structure);
}
.forge-layout-contained .forge-postgrid-block,
.forge-two-column-layout .forge-postgrid-block {
width: 100% !important;
max-width: 100% !important;
}
.forge-postgrid-grid {
display: grid;
gap: 1.5rem;
}
.pg-columns-2 .forge-postgrid-grid { grid-template-columns: repeat(2, 1fr); }
.pg-columns-3 .forge-postgrid-grid { grid-template-columns: repeat(3, 1fr); }
.pg-columns-4 .forge-postgrid-grid { grid-template-columns: repeat(4, 1fr); }
.forge-postgrid-card {
display: flex;
flex-direction: column;
background: var(--pg-surface);
border: var(--pg-border);
border-radius: var(--pg-radius);
box-shadow: var(--pg-shadow);
overflow: hidden;
transition: var(--forge-transition-base);
}
.forge-postgrid-card:hover {
transform: var(--forge-card-hover-transform, translateY(-4px));
box-shadow: var(--forge-card-shadow-hover);
}
.forge-postgrid-image {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
}
.forge-postgrid-image a {
display: block;
width: 100%;
height: 100%;
}
.forge-postgrid-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.forge-postgrid-card:hover .forge-postgrid-image img {
transform: scale(1.05);
}
.forge-postgrid-content {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 1.25rem 1.5rem 1.5rem;
}
.forge-postgrid-date {
font-family: var(--pg-body-font);
font-size: 0.8rem;
font-weight: 600;
color: var(--pg-date);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.5rem;
}
.forge-postgrid-title {
font-family: var(--pg-heading-font);
font-size: var(--pg-heading-size);
font-weight: var(--forge-font-heading-weight-custom, 600);
color: var(--pg-heading);
margin: 0 0 0.75rem 0;
line-height: 1.35;
}
.forge-postgrid-title a,
.forge-postgrid-title a:visited {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.forge-postgrid-title a:hover {
color: var(--pg-accent);
}
.forge-postgrid-excerpt {
font-family: var(--pg-body-font);
font-size: var(--pg-body-size);
color: var(--pg-text);
line-height: 1.6;
opacity: 0.85;
margin: 0 0 1rem 0;
flex-grow: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.forge-postgrid-readmore,
.forge-postgrid-readmore:visited {
font-family: var(--pg-heading-font);
font-size: var(--pg-body-size);
font-weight: 600;
color: var(--pg-accent);
text-decoration: none;
transition: var(--forge-transition-base);
margin-top: auto;
}
.forge-postgrid-readmore:hover {
opacity: 0.8;
transform: translateX(4px);
display: inline-block;
}
.forge-postgrid-empty {
text-align: center;
padding: 3rem 2rem;
background: var(--pg-surface);
border: var(--pg-border);
border-radius: var(--pg-radius);
color: var(--pg-text);
opacity: 0.6;
font-family: var(--pg-body-font);
font-size: var(--pg-body-size);
}
@media (max-width: 1280px) {
.pg-columns-4 .forge-postgrid-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.forge-postgrid-block {
width: 95%;
}
.pg-columns-2 .forge-postgrid-grid,
.pg-columns-3 .forge-postgrid-grid,
.pg-columns-4 .forge-postgrid-grid {
grid-template-columns: 1fr;
}
.forge-postgrid-content {
padding: 1rem 1.25rem 1.25rem;
}
}
.forge-postgrid-block.style-2 {
animation: var(--forge-anim-structure);
}
.pg-list {
display: flex;
flex-direction: column;
}
.pg-list__item {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 1.25rem 0;
border-bottom: 1px solid var(--pg-border-custom, var(--forge-border-color, #e5e7eb));
transition: var(--forge-transition-base);
}
.pg-list__item:first-child {
padding-top: 0;
}
.pg-list__item:last-child {
border-bottom: none;
}
.pg-list__item:hover {
transform: translateX(6px);
}
.pg-list__image {
flex-shrink: 0;
width: 140px;
height: 100px;
border-radius: var(--pg-radius);
overflow: hidden;
display: block;
}
.pg-list__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.pg-list__item:hover .pg-list__image img {
transform: scale(1.05);
}
.pg-list__content {
flex: 1;
min-width: 0;
}
.pg-list__date {
font-family: var(--pg-body-font);
font-size: 0.75rem;
font-weight: 600;
color: var(--pg-date);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.25rem;
display: block;
}
.pg-list__title {
font-family: var(--pg-heading-font);
font-size: var(--pg-heading-size);
font-weight: var(--forge-font-heading-weight-custom, 600);
color: var(--pg-heading);
margin: 0 0 0.375rem 0;
line-height: 1.35;
}
.pg-list__title a,
.pg-list__title a:visited {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.pg-list__item:hover .pg-list__title a {
color: var(--pg-accent);
}
.pg-list__excerpt {
font-family: var(--pg-body-font);
font-size: calc(var(--pg-body-size) * 0.95);
color: var(--pg-text);
line-height: 1.5;
opacity: 0.85;
margin: 0 0 0.5rem 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pg-list__readmore,
.pg-list__readmore:visited {
font-family: var(--pg-heading-font);
font-size: calc(var(--pg-body-size) * 0.9);
font-weight: 600;
color: var(--pg-accent);
text-decoration: none;
transition: var(--forge-transition-base);
}
.pg-list__readmore:hover {
opacity: 0.8;
}
@media (max-width: 768px) {
.pg-list__image {
width: 100px;
height: 72px;
}
.pg-list__title {
font-size: calc(var(--pg-heading-size) * 0.9);
}
.pg-list__excerpt {
-webkit-line-clamp: 1;
}
}
.forge-postgrid-block.forge-post-doclist {
--forge-doc-list-surface: var(--forge-doc-list-surface-custom, #ffffff);
--forge-doc-list-surface-hover: var(--forge-doc-list-surface-hover-custom, #f8f9fa);
--forge-doc-list-heading: var(--forge-doc-list-heading-custom, var(--forge-on-doc-list-surface));
--forge-doc-list-text: var(--forge-doc-list-text-custom, var(--forge-on-doc-list-surface));
--forge-doc-list-border-color: var(--forge-doc-list-border-color-custom, var(--forge-border-color, #e5e7eb));
--forge-doc-list-icon-bg: var(--forge-doc-list-accent-custom, var(--forge-primary, #2E2A3F));
--forge-doc-list-icon-bg-hover: var(--forge-doc-list-accent-hover-custom, var(--forge-primary-light, #2C5282));
--forge-doc-list-icon-color: var(--forge-doc-list-icon-color-custom, var(--forge-on-primary, #ffffff));
--forge-doc-list-icon-color-hover: var(--forge-on-primary, #ffffff);
--forge-doc-list-radius: var(--forge-doc-list-radius-custom, var(--forge-card-radius, 12px));
--forge-doc-list-font-heading: var(--forge-font-heading, 'Merriweather', serif);
--forge-doc-list-font-body: var(--forge-font-body, 'Work Sans', sans-serif);
display: grid;
grid-template-columns: minmax(0, 1fr);
animation: none;
}
.forge-post-doclist .forge-document-content-wrapper::before {
mask: url('../../svg/Post.svg') no-repeat center / contain;
-webkit-mask: url('../../svg/Post.svg') no-repeat center / contain;
}