/**
 * Scheduled Posts Showcase - Frontend Styles
 *
 * Provides styling for the scheduled posts display.
 * Uses CSS custom properties for accent color customization.
 *
 * @package Scheduled_Posts_Showcase
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
	--sps-accent-color: #0073aa;
}

/* ==========================================================================
   Main Container
   ========================================================================== */

.sps-scheduled-posts {
	margin: 1em 0;
}

/* Card Style - styles are applied to individual items, not container */
.sps-scheduled-posts.sps-style-card {
	/* Container has no special styling in card mode */
}

/* Minimal Style */
.sps-scheduled-posts.sps-style-minimal {
	/* No additional styles - blends with theme */
}

/* ==========================================================================
   Heading
   ========================================================================== */

.sps-scheduled-heading {
	margin: 0 0 0.75em 0;
	color: var(--sps-accent-color);
}

/* ==========================================================================
   List Styles
   ========================================================================== */

.sps-scheduled-list {
	margin: 0;
	padding: 0;
}

/* Remove default list styling */
.sps-scheduled-list.sps-list-none,
.sps-scheduled-list.sps-list-dashicon {
	list-style: none;
}

/* Theme default - keep browser/theme list styles */
.sps-scheduled-list.sps-list-theme {
	padding-left: 1.5em;
}

/* ==========================================================================
   List Items
   ========================================================================== */

.sps-scheduled-item {
	position: relative;
	margin-bottom: 1em;
}

.sps-scheduled-item:last-child {
	margin-bottom: 0;
}

/* Card style - each item is a card */
.sps-style-card .sps-scheduled-item {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 1em;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.sps-style-card .sps-scheduled-item:hover {
	border-color: #ccc;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Minimal style - simple separator between items */
.sps-style-minimal .sps-scheduled-item {
	padding-bottom: 1em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sps-style-minimal .sps-scheduled-item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

/* ==========================================================================
   Dashicon Bullets
   ========================================================================== */

.sps-scheduled-icon {
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.35em;
	color: var(--sps-accent-color);
	font-size: 1em;
	width: 1.25em;
	height: 1.25em;
	line-height: 1;
}

/* When using dashicons, title should be inline */
.sps-list-dashicon .sps-scheduled-title {
	display: inline;
	vertical-align: middle;
}

/* Remove the extra padding since icon is now inline */
.sps-list-dashicon .sps-scheduled-item {
	padding-left: 0;
}

.sps-style-card .sps-list-dashicon .sps-scheduled-item {
	padding-left: 1em;
}

/* ==========================================================================
   Post Elements
   ========================================================================== */

/* Title */
.sps-scheduled-title {
	display: block;
	font-weight: 600;
	line-height: 1.4;
}

/* Date */
.sps-scheduled-date {
	display: block;
	font-size: 0.875em;
	color: #666;
	margin-top: 0.25em;
}

/* Excerpt */
.sps-scheduled-excerpt {
	margin: 0.5em 0 0;
	font-size: 0.9375em;
	line-height: 1.5;
	color: #444;
}

/* Categories */
.sps-scheduled-categories {
	display: block;
	font-size: 0.8125em;
	color: #888;
	margin-top: 0.5em;
}

/* ==========================================================================
   Featured Image
   ========================================================================== */

.sps-scheduled-thumbnail {
	margin-bottom: 0.5em;
}

.sps-scheduled-thumbnail img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 3px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.sps-scheduled-footer {
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	font-size: 0.9375em;
}

.sps-scheduled-footer p {
	margin: 0;
}

.sps-scheduled-footer a {
	color: var(--sps-accent-color);
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.sps-no-scheduled {
	color: #666;
	font-style: italic;
	margin: 0;
}

/* Admin placeholder styling */
.sps-admin-placeholder .sps-no-scheduled {
	background: #f0f0f0;
	padding: 1em;
	border-radius: 4px;
	text-align: center;
}

/* ==========================================================================
   Widget Container
   ========================================================================== */

.sps-widget-container .sps-scheduled-posts {
	margin: 0;
}

/* ==========================================================================
   Block Wrapper - Hide when empty
   Handles cases where block wrapper remains but content is empty
   ========================================================================== */

.wp-block-scheduled-posts-showcase-scheduled-posts:empty,
.wp-block-scheduled-posts-showcase-scheduled-posts:blank {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	min-height: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* Also hide if only contains whitespace (some themes add spacing) */
.wp-block-scheduled-posts-showcase-scheduled-posts:not(:has(*)) {
	display: none !important;
}

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

@media (max-width: 600px) {
	.sps-style-card .sps-scheduled-item {
		padding: 0.75em;
	}

	.sps-scheduled-thumbnail img {
		max-width: 80px;
	}
}