.mta-blog-grid-widget {
--mta-bg:       #070E1C;
--mta-bg2:      #0C1830;
--mta-bg3:      #112244;
--mta-gold:     #C8A96E;
--mta-gold-lt:  #E2C88A;
--mta-teal:     #00D4B1;
--mta-white:    #FFFFFF;
--mta-off:      #E8EDF5;
--mta-muted:    #7B8BA8;
--mta-border:   rgba(200, 169, 110, 0.15);
--mta-border2:  rgba(200, 169, 110, 0.38);
--mta-green:    #22C55E;
--mta-red:      #EF4444;
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
position: relative;
} .mta-section-header {
text-align: center;
margin-bottom: 48px;
}
.mta-section-tag {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--mta-gold);
margin-bottom: 16px;
}
.mta-tag-line {
display: block;
width: 28px;
height: 1px;
background: var(--mta-gold);
}
.mta-section-title {
font-family: 'Cormorant Garamond', 'Georgia', serif !important;
font-size: clamp(34px, 4vw, 54px) !important;
font-weight: 600 !important;
line-height: 1.1 !important;
color: var(--mta-white) !important;
margin-bottom: 16px !important;
}
.mta-section-title em {
font-style: italic;
color: var(--mta-gold);
}
.mta-section-subtitle {
font-size: 16px;
color: var(--mta-muted);
line-height: 1.8;
max-width: 580px;
margin: 0 auto;
} .mta-count-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 20px;
margin-bottom: 8px;
border-bottom: 1px solid var(--mta-border);
}
.mta-count-text {
font-size: 13px;
color: var(--mta-muted);
}
.mta-count-text strong {
color: var(--mta-off);
} .mta-posts-grid-wrap {
position: relative;
min-height: 200px;
} .mta-posts-inner {
display: grid;
gap: 20px;
}
.mta-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mta-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mta-cols-4 { grid-template-columns: repeat(4, 1fr); }
.mta-cols-5 { grid-template-columns: repeat(5, 1fr); }
.mta-cols-6 { grid-template-columns: repeat(6, 1fr); } .mta-post-card {
background: var(--mta-bg2);
border: 1px solid var(--mta-border);
border-radius: 6px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.3s ease, transform 0.35s cubic-bezier(.4,0,.2,1), box-shadow 0.35s ease;
position: relative;
}
.mta-post-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--mta-gold), transparent);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
.mta-post-card:hover {
border-color: var(--mta-border2);
transform: translateY(-5px);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.mta-post-card:hover::before {
opacity: 1;
} .mta-card-thumb {
display: block;
overflow: hidden;
position: relative;
background: #0C1830;
text-decoration: none;
flex-shrink: 0;
} .mta-ratio-16-9  { aspect-ratio: 16 / 9; }
.mta-ratio-4-3   { aspect-ratio: 4 / 3; }
.mta-ratio-1-1   { aspect-ratio: 1 / 1; }
.mta-ratio-3-2   { aspect-ratio: 3 / 2; }
.mta-ratio-21-9  { aspect-ratio: 21 / 9; }
.mta-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.55s cubic-bezier(.4,0,.2,1);
}
.mta-post-card:hover .mta-card-thumb img {
transform: scale(1.05);
} .mta-card-thumb-placeholder {
width: 100%;
height: 100%;
min-height: 160px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0C1830, #112244);
} .mta-card-cat-badge {
position: absolute;
bottom: 12px;
left: 12px;
background: rgba(200, 169, 110, 0.12);
border: 1px solid rgba(200, 169, 110, 0.35);
color: var(--mta-gold);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 2px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
pointer-events: none;
z-index: 2;
} .mta-card-body {
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
flex: 1;
gap: 0;
} .mta-card-meta-top {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.mta-meta-date,
.mta-meta-author,
.mta-meta-read {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--mta-muted);
white-space: nowrap;
}
.mta-meta-sep {
color: var(--mta-border2);
font-size: 11px;
line-height: 1;
} .mta-card-title {
font-family: 'Cormorant Garamond', 'Georgia', serif !important;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 1.28 !important;
margin: 0 0 10px !important;
padding: 0 !important;
}
.mta-card-title a {
color: var(--mta-white);
text-decoration: none;
transition: color 0.2s ease;
display: block;
}
.mta-post-card:hover .mta-card-title a {
color: var(--mta-gold-lt);
} .mta-card-excerpt {
font-size: 13px;
line-height: 1.72;
color: var(--mta-muted);
margin: 0 0 16px !important;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
} .mta-card-readmore {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mta-gold);
text-decoration: none;
margin-top: auto;
transition: gap 0.2s ease, color 0.2s ease;
}
.mta-card-readmore svg {
transition: transform 0.2s ease;
flex-shrink: 0;
}
.mta-post-card:hover .mta-card-readmore {
gap: 10px;
color: var(--mta-gold-lt);
}
.mta-post-card:hover .mta-card-readmore svg {
transform: translateX(3px);
} .mta-no-posts {
text-align: center;
padding: 80px 20px;
color: var(--mta-muted);
grid-column: 1 / -1;
}
.mta-no-posts svg {
margin: 0 auto 20px;
display: block;
}
.mta-no-posts p {
font-size: 15px;
line-height: 1.7;
} .mta-loading-overlay {
position: absolute;
inset: 0;
background: rgba(7, 14, 28, 0.75);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
z-index: 10;
}
.mta-posts-grid-wrap.is-loading .mta-loading-overlay {
opacity: 1;
pointer-events: auto;
}
.mta-loading-spinner {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.mta-loading-spinner svg {
animation: mta-spin 0.9s linear infinite;
}
@keyframes mta-spin {
from { transform: rotate(0deg); }
to   { transform: rotate(360deg); }
}
.mta-loading-spinner span {
font-size: 13px;
color: var(--mta-gold);
font-weight: 500;
letter-spacing: 0.06em;
} .mta-pagination {
margin-top: 48px;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.mta-page-info {
font-size: 12px;
color: var(--mta-muted);
letter-spacing: 0.04em;
}
.mta-page-info .mta-current-page {
color: var(--mta-gold);
font-weight: 700;
}
.mta-pagination-controls {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
justify-content: center;
}
.mta-pagination-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 42px;
padding: 0 14px;
border: 1px solid var(--mta-border);
border-radius: 3px;
background: var(--mta-bg2);
color: var(--mta-muted);
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
line-height: 1;
}
.mta-pagination-btn:hover:not(:disabled) {
border-color: var(--mta-gold);
color: var(--mta-gold);
background: rgba(200, 169, 110, 0.08);
}
.mta-pagination-btn.active {
border-color: var(--mta-gold);
color: var(--mta-gold);
background: rgba(200, 169, 110, 0.1);
font-weight: 700;
}
.mta-pagination-btn:disabled {
opacity: 0.3;
cursor: default;
}
.mta-btn-prev,
.mta-btn-next {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0 18px;
} .mta-page-numbers {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
justify-content: center;
}
.mta-page-num {
width: 42px;
padding: 0;
justify-content: center;
} @media (max-width: 1200px) {
.mta-cols-6 { grid-template-columns: repeat(4, 1fr); }
.mta-cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.mta-cols-4,
.mta-cols-5,
.mta-cols-6 { grid-template-columns: repeat(2, 1fr); }
.mta-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.mta-cols-2,
.mta-cols-3,
.mta-cols-4,
.mta-cols-5,
.mta-cols-6 { grid-template-columns: 1fr; }
.mta-card-body { padding: 18px; }
.mta-pagination-controls { gap: 4px; }
.mta-page-num { width: 36px; height: 36px; font-size: 12px; }
.mta-btn-prev,
.mta-btn-next { height: 36px; padding: 0 12px; font-size: 11px; }
} .mta-editor-preview .mta-card-thumb-placeholder {
min-height: 120px;
}
.mta-editor-preview .mta-post-card {
pointer-events: none;
}  .mta-card-thumb {
display: block;
width: 100%;
overflow: hidden;
flex-shrink: 0;
background: #0C1830;
} .mta-card-thumb::before {
content: '';
display: block;
width: 0;
} .mta-ratio-16-9  { aspect-ratio: 16 / 9;  padding-top: 0; }
.mta-ratio-4-3   { aspect-ratio: 4  / 3;  }
.mta-ratio-1-1   { aspect-ratio: 1  / 1;  }
.mta-ratio-3-2   { aspect-ratio: 3  / 2;  }
.mta-ratio-21-9  { aspect-ratio: 21 / 9;  } .mta-card-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top; position: absolute;
inset: 0;
transition: transform 0.55s cubic-bezier(.4,0,.2,1);
} .mta-card-thumb { position: relative; } .mta-card-thumb-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0C1830, #112244);
} .mta-posts-inner {
align-items: stretch;
}
.mta-post-card {
display: flex;
flex-direction: column;
}
.mta-card-body {
flex: 1;
display: flex;
flex-direction: column;
}
.mta-card-excerpt {
flex: 1;
} .mta-cols-4 .mta-card-thumb-placeholder,
.mta-cols-4 .mta-card-thumb.mta-ratio-16-9 { min-height: 160px; }
.mta-cols-3 .mta-card-thumb-placeholder,
.mta-cols-3 .mta-card-thumb.mta-ratio-16-9 { min-height: 180px; }
.mta-cols-2 .mta-card-thumb-placeholder,
.mta-cols-2 .mta-card-thumb.mta-ratio-16-9 { min-height: 220px; }