/* =============================================================================
   Content Studio — Archive Post Layout
   NO CSS custom properties — all hardcoded hex to beat Elementor overrides.
   Brand colors:
     accent       #35AB7D   hover-accent  #1e7a52   accent-bg  rgba(53,171,125,.10)
     dark         #030C09   muted         #4A4D4C   faint      #6B7280
     surface      #F4F4F4   card          #ffffff   border     #E5E7EB
   ============================================================================= */


/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.cs-archive-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 60px !important;
    box-sizing: border-box;
    color: #030C09;
	position: relative;
	z-index: 2;
}

/* ── Archive Header ─────────────────────────────────────────────────────────────── */
.cs-archive-wrapper .cs-archive-header{
	display: flex !important; align-items: center !important;
	justify-content: space-between !important; width: 100% !important;
	margin-bottom: 24px !important;
}

.cs-archive-wrapper .cs-archive-count{
	font-family: var(--cs-font-heading); color: #030C09 !important;
	font-size: 22px !important; font-weight: 600 !important;
	line-height: 28px !important;
}

.cs-archive-wrapper .cs-archive-sorting{
	position: relative !important; display: flex !important;
	align-items: center !important; gap: 20px !important;
}

.cs-archive-wrapper .cs-archive-sorting label{
	color: #030C09 !important; font-size: 16px !important;
	line-height: 26px !important; font-weight: 500 !important;
	font-family: var(--cs-font-heading); width: 100px;
}

.cs-archive-wrapper .cs-sort-select{
	background: #FAFFFB !important; border: 1px solid #BAE9D0 !important;
	border-radius: 32px !important; padding: 10px 20px !important;
	box-shadow: 0 24px 40px -4px #00000005 !important;
}

.cs-archive-wrapper .cs-sort-select option{
	color: #252726 !important; font-size: 14px !important;
	line-height: 20px !important; font-family: var(--cs-font-body);
}

/* ── Divider ─────────────────────────────────────────────────────────────── */
.cs-archive-wrapper .cs-archive-divider{
	height: 1px !important; width: 100% !important;
	background: #DADCDB !important;
}

/* ── Archive Grid ─────────────────────────────────────────────────────────────── */
.cs-archive-wrapper .cs-archive-grid{
	margin-top: 30px !important; display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

.cs-archive-wrapper .cs-archive-card-wrapper{
	background: #FAFFFB !important; border: 1px solid #BAE9D0 !important;
	box-shadow: 0 24px 40px -4px #00000005 !important; padding: 8px !important;
	border-radius: 24px !important;
}

.cs-archive-wrapper .cs-archive-card{
	background: #FFFFFF !important; box-shadow: 0 24px 40px -4px #00000005 !important;
	border-radius: 16px !important; padding: 16px !important;gap: 12px !important;
	display: flex !important; flex-direction: column !important; height: 100% !important;
}

.cs-archive-wrapper .cs-archive-card-image{
	width: 100% !important; aspect-ratio: 16/9;
    object-fit: cover !important; display: block !important;
    background: #F4F4F4 !important; border-radius: 12px !important;
}

.cs-archive-wrapper .cs-archive-card-body{
	padding: 16px !important; 
	flex: 1 !important; display: flex !important; 
	flex-direction: column !important; gap: 16px !important; justify-content: space-between !important;
}

.cs-archive-wrapper .cs-archive-card-meta {
	display: flex !important; align-items: center !important; gap: 10px !important;
}

.cs-archive-wrapper  .cs-archive-name-wrapper,
.cs-archive-wrapper .cs-archive-date-wrapper{
	display: flex !important; align-items: center !important; gap: 5px !important;
}

.cs-archive-wrapper .archive-card-author-text,
.cs-archive-wrapper .archive-card-author-name,
.cs-archive-wrapper .archive-card-published-date,
.cs-archive-wrapper .archive-card-date{
	font-size: 14px !important; line-height: 20px !important;
	font-family: var(--cs-font-body);
}

.cs-archive-wrapper .archive-card-author-text,
.cs-archive-wrapper .archive-card-published-date{
	color: #4A4D4C !important;
}

.cs-archive-wrapper .archive-card-author-name,
.cs-archive-wrapper .archive-card-date{
	font-weight: 500 !important; color: #030C09 !important;
}

.cs-archive-wrapper .acm-divider{
	width: 1px !important; height: 16px !important; background: #BAE9D9 !important;
}

.cs-archive-wrapper .cs-archive-card-title-wrapper{
	display: flex !important; flex-direction: column !important;
	gap: 8px !important; align-items: flex-start !important;
}

.cs-archive-wrapper .cs-archive-card-title{
	font-size: 18px !important; line-height: 26px !important;
	color: #030C09 !important; font-weight: 600 !important;
	font-family: var(--cs-font-heading); margin: 0 !important;
}

.cs-archive-wrapper .cs-archive-card-excerpt{
	font-size: 14px !important; line-height: 20px !important;
	color: #4A4D4C !important; font-family: var(--cs-font-body) !important;
	margin: 0 !important;
}

.cs-archive-wrapper .cs-archive-card-cat{
	display: flex !important; align-items: center !important; gap: 16px !important;
	margin-top: 10px !important;
}

.cs-archive-wrapper .cs-archive-card-cat span{
	font-size: 14px !important; font-weight: 500 !important; color: #030C09 !important;
	font-family: var(--cs-font-heading); padding: 10px 16px !important;
	border: 1px solid #BAE9D9 !important; border-radius: 48px !important;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1024px) {
    .cs-archive-wrapper { padding: 28px 32px !important; }
}

@media (max-width: 768px) {
    .cs-archive-wrapper { padding: 20px 10px !important; }
	.cs-archive-wrapper .cs-archive-grid { grid-template-columns: repeat(1, 1fr) !important; }
	.cs-archive-wrapper .cs-archive-count{ font-size: 20px !important; line-height: 24px !important; }
	.cs-archive-wrapper .cs-archive-sorting label{ font-size: 14px !important; line-height: 20px !important; width: 20px !important; }
	.cs-archive-wrapper .cs-archive-card{ padding: 12px !important; }
	.cs-archive-wrapper .cs-archive-card-body{ padding: 10px !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .cs-archive-wrapper .cs-archive-grid { grid-template-columns: repeat(2, 1fr) !important; }
}