/**
 * Amol Editor Notes — Frontend Styles
 * RTL-first, clean editorial sidebar — Persian news / magazine design.
 * Dynamic values (font size, colors, image shape/size) come in as CSS
 * custom properties set via inline style on .aen-block by PHP.
 */

/* ============================================================
   Static design tokens (fallback values)
   Dynamic values override these via inline style on .aen-block
   ============================================================ */

.aen-block {
	--aen-post-font-size:      14px;
	--aen-post-title-weight:   400;
	--aen-img-w:               65px;
	--aen-img-h:               65px;
	--aen-img-radius:          4px;
	--aen-accent:              #7C3D9F;
	--aen-btn-bg:              #2a2a2a;

	/* Static tokens */
	--aen-font-family:         'IranSans', 'Iran Sans', 'Tahoma', Arial, sans-serif;
	--aen-color-text:          #1a1a1a;
	--aen-color-text-muted:    #666666;
	--aen-color-text-date:     #999999;
	--aen-color-border:        #e8e8e8;
	--aen-color-bg:            #ffffff;
	--aen-color-bg-header:     #fafafa;
	--aen-color-hover-bg:      #f5f5f5;
	--aen-radius:              8px;
	--aen-spacing:             16px;
	--aen-spacing-sm:          10px;
}

/* ============================================================
   Block wrapper
   ============================================================ */

.aen-block {
	direction:      rtl;
	text-align:     right;
	font-family:    var(--aen-font-family);
	font-size:      14px;
	line-height:    1.7;
	color:          var(--aen-color-text);
	background:     var(--aen-color-bg);
	border:         1px solid var(--aen-color-border);
	border-radius:  var(--aen-radius);
	box-shadow:     0 2px 12px rgba(0, 0, 0, 0.07);
	overflow:       hidden;
	margin-bottom:  24px;
}

/* ============================================================
   Editor header — centered profile area
   ============================================================ */

.aen-editor-header {
	display:          flex;
	flex-direction:   column;
	align-items:      center;
	text-align:       center;
	padding:          22px var(--aen-spacing) 16px;
	background:       var(--aen-color-bg-header);
	border-bottom:    1px solid var(--aen-color-border);
}

/* Circular avatar with accent border */
.aen-editor-header__avatar {
	width:         90px;
	height:        90px;
	border-radius: 50%;
	overflow:      hidden;
	border:        3px solid var(--aen-accent);
	margin-bottom: 12px;
	flex-shrink:   0;
	background:    var(--aen-color-border);
	box-shadow:    0 2px 8px rgba(0, 0, 0, 0.12);
}

.aen-editor-header__img {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	display:     block;
}

/* Block title — bold, centered, under avatar */
.aen-block__title {
	margin:       0 0 4px;
	font-size:    18px;
	font-weight:  700;
	color:        var(--aen-color-text);
	line-height:  1.3;
	font-family:  var(--aen-font-family);
}

/* Editor name — below title */
.aen-editor-header__name {
	display:     block;
	font-size:   13px;
	font-weight: 600;
	color:       var(--aen-color-text-muted);
	margin-top:  2px;
}

/* Editor role — below name */
.aen-editor-header__role {
	display:    block;
	font-size:  12px;
	color:      var(--aen-color-text-date);
	margin-top: 2px;
}

/* Optional subtitle / description */
.aen-editor-header__subtitle {
	margin:      8px 0 0;
	font-size:   12px;
	color:       var(--aen-color-text-muted);
	line-height: 1.6;
	max-width:   240px;
}

/* ============================================================
   Block body
   ============================================================ */

.aen-block__body {
	padding: 0;
}

.aen-block__empty {
	padding:    var(--aen-spacing);
	font-size:  13px;
	color:      var(--aen-color-text-muted);
	text-align: center;
	margin:     0;
}

/* ============================================================
   Posts list
   ============================================================ */

.aen-posts-list {
	list-style: none;
	margin:     0;
	padding:    0;
}

/* ============================================================
   Post item
   ============================================================ */

.aen-post-item {
	display:       flex;
	align-items:   center;
	gap:           var(--aen-spacing-sm);
	padding:       var(--aen-spacing-sm) var(--aen-spacing);
	border-bottom: 1px solid var(--aen-color-border);
	transition:    background 0.15s ease;
}

.aen-post-item:last-child {
	border-bottom: none;
}

.aen-post-item:hover {
	background: var(--aen-color-hover-bg);
}

/* ---- Thumbnail ---- */

.aen-post-item__thumb-wrap {
	flex-shrink: 0;
	order:       2;  /* image appears on left in RTL visual order */
}

.aen-post-item__thumb-link {
	display: block;
	line-height: 0;
}

.aen-post-item__thumb {
	width:        var(--aen-img-w);
	height:       var(--aen-img-h);
	object-fit:   cover;
	border-radius: var(--aen-img-radius);
	display:      block;
	transition:   transform 0.2s ease;
}

.aen-post-item:hover .aen-post-item__thumb {
	transform: scale(1.05);
}

/* Placeholder when post has no thumbnail but show_image is on */
.aen-post-item__thumb-placeholder {
	width:         var(--aen-img-w);
	height:        var(--aen-img-h);
	border-radius: var(--aen-img-radius);
	background:    var(--aen-color-border);
}

/* ---- Content (right side in RTL = order 1) ---- */

.aen-post-item__content {
	flex:    1;
	min-width: 0;
	order:   1;
}

.aen-post-item__title {
	display:           block;
	font-size:         var(--aen-post-font-size);
	font-weight:       var(--aen-post-title-weight);
	color:             var(--aen-color-text);
	text-decoration:   none;
	line-height:       1.55;
	/* Clamp to 2 lines */
	display:           -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:          hidden;
	transition:        color 0.15s ease;
}

.aen-post-item__title:hover,
.aen-post-item__title:focus {
	color:           var(--aen-accent);
	text-decoration: none;
}

.aen-post-item__date {
	display:    block;
	font-size:  11px;
	color:      var(--aen-color-text-date);
	margin-top: 3px;
}

.aen-post-item__excerpt {
	margin:      4px 0 0;
	font-size:   12px;
	color:       var(--aen-color-text-muted);
	line-height: 1.6;
	display:     -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:    hidden;
}

/* ============================================================
   View all footer button — full-width, dark
   ============================================================ */

.aen-block__footer {
	padding: 0;
}

.aen-viewall-btn {
	display:          block;
	width:            100%;
	padding:          12px var(--aen-spacing);
	background:       var(--aen-btn-bg);
	color:            #ffffff !important;
	font-family:      var(--aen-font-family);
	font-size:        14px;
	font-weight:      600;
	text-align:       center;
	text-decoration:  none;
	letter-spacing:   0;
	line-height:      1.4;
	box-sizing:       border-box;
	transition:       opacity 0.2s ease;
}

.aen-viewall-btn:hover,
.aen-viewall-btn:focus {
	opacity:         0.88;
	color:           #ffffff !important;
	text-decoration: none;
}

/* ============================================================
   Responsive
   ============================================================ */

@media ( max-width: 480px ) {
	.aen-block {
		--aen-spacing:    12px;
		--aen-spacing-sm: 8px;
	}

	.aen-editor-header__avatar {
		width:  72px;
		height: 72px;
	}

	.aen-block__title {
		font-size: 16px;
	}
}

/* ============================================================
   Dark mode (non-breaking enhancement)
   ============================================================ */

@media ( prefers-color-scheme: dark ) {
	.aen-block {
		--aen-color-text:       #e8e8e8;
		--aen-color-text-muted: #a0a0a0;
		--aen-color-text-date:  #777777;
		--aen-color-border:     #333333;
		--aen-color-bg:         #1e1e1e;
		--aen-color-bg-header:  #252525;
		--aen-color-hover-bg:   #2a2a2a;
	}
}