/**
 * Public Stylesheet
 *
 * Styles for the front-end display of aggregated news items rendered by the
 * [ainp_native_publisher] shortcode. Provides layout (grid columns) and basic styling.
 *
 * @package           AINP_AI_Native_Publisher
 * @author            AI News Publisher
 * @copyright         2025, AI News Publisher
 * @license           GPL-2.0+
 */

/* Main wrapper for the shortcode output */
.ainp-shortcode-wrapper {
	display: grid;
	gap: 25px; /* Space between grid items */
	margin-bottom: 20px; /* Space below the grid */
}

/* --- Column Layout Definitions --- */
/* Default: 1 column */
.ainp-columns-1 {
	grid-template-columns: 1fr;
}
/* 2 columns: Responsive grid, minimum width 280px */
.ainp-columns-2 {
	/* Creates 2 columns adapting width, with a minimum item width */
	grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(280px, 100%/2.5)), 1fr));
}
/* 3 columns: Responsive grid, minimum width 250px */
.ainp-columns-3 {
	 /* Creates 3 columns adapting width, with a minimum item width */
	 grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max(250px, 100%/3.5)), 1fr));
}
/* 4 columns: Responsive grid, minimum width 220px */
.ainp-columns-4 {
	/* Creates 4 columns adapting width, with a minimum item width */
	grid-template-columns: repeat(auto-fit, minmax(min(100%/4, max(220px, 100%/4.5)), 1fr));
}


/* Styling for individual news items within the grid */
.ainp-item {
	border: 1px solid #e0e0e0; /* Subtle border */
	border-radius: 8px;      /* Rounded corners */
	padding: 20px;           /* Inner spacing */
	background-color: #fff;  /* White background */
	box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Subtle shadow */
	transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
	display: flex;           /* Use flexbox for vertical layout */
	flex-direction: column;  /* Stack elements vertically */
	overflow: hidden;        /* Prevent image overflow on hover */
}

/* Hover effect for items */
.ainp-item:hover {
	box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Stronger shadow on hover */
	transform: translateY(-3px); /* Slight lift effect */
}

/* Header section containing image and title */
.ainp-item .entry-header {
	margin-bottom: 15px; /* Space below header */
}

/* Featured image container */
.ainp-item .post-thumbnail {
	margin-bottom: 15px;
	overflow: hidden;    /* Keep image within rounded corners */
	border-radius: 6px;  /* Rounded corners for image container */
}

.ainp-item .post-thumbnail a {
	display: block; /* Ensure link covers image */
}

/* Featured image styling */
.ainp-item .post-thumbnail img {
	width: 100%;       /* Make image responsive */
	height: auto;      /* Maintain aspect ratio */
	display: block;    /* Remove bottom space */
	border-radius: 6px;/* Match container radius */
	transition: transform 0.4s ease; /* Smooth zoom effect on hover */
}

/* Image zoom effect on item hover */
.ainp-item:hover .post-thumbnail img {
	transform: scale(1.05); /* Slightly zoom image */
}

/* Post title styling */
.ainp-item .entry-title {
	font-size: 1.3em; /* Adjust title size */
	margin: 0 0 10px 0; /* Space below title */
	line-height: 1.3;
	font-weight: 600; /* Make title bolder */
}

.ainp-item .entry-title a {
	text-decoration: none;
	color: #2c3338; /* Darker title color */
	transition: color 0.3s ease;
}

.ainp-item .entry-title a:hover {
	color: #0073aa; /* Standard WP link hover color */
}

/* Meta information (date, categories) */
.ainp-item .entry-meta {
	font-size: 0.8em; /* Smaller meta text */
	color: #646970;     /* Lighter color for meta */
	margin-bottom: 15px; /* Space below meta */
	line-height: 1.4;
}

.ainp-item .entry-meta .posted-on,
.ainp-item .entry-meta .categories-links {
	display: inline-block; /* Keep on same line if space allows */
	margin-right: 8px;     /* Space between meta items */
}
.ainp-item .entry-meta .categories-links a {
    text-decoration: none;
    color: #0073aa;
}
.ainp-item .entry-meta .categories-links a:hover {
    text-decoration: underline;
}


/* Post excerpt styling */
.ainp-item .entry-summary {
	font-size: 0.9em; /* Adjust excerpt size */
	line-height: 1.6;
	color: #444;       /* Standard text color */
	flex-grow: 1;      /* Allow excerpt to fill remaining space */
}

/* --- Responsive Adjustments --- */
/* On medium screens (tablets), adjust column counts */
@media (max-width: 768px) {
	/* Collapse 3 and 4 columns into max 2 columns */
	.ainp-columns-3,
	.ainp-columns-4 {
		grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(280px, 100%/2.5)), 1fr));
	}
	/* Keep 2 columns as potentially 2 columns */
	.ainp-columns-2 {
		grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(280px, 100%/2.5)), 1fr));
	}
}

/* On small screens (mobiles), force all layouts to 1 column */
@media (max-width: 480px) {
	.ainp-columns-2,
	.ainp-columns-3,
	.ainp-columns-4 {
		grid-template-columns: 1fr; /* Stack items vertically */
	}
	.ainp-item {
		padding: 15px; /* Reduce padding on mobile */
	}
	.ainp-item .entry-title {
		font-size: 1.2em; /* Slightly smaller title on mobile */
	}
}