/**
 * TinyMCE Module - Frontend Styles
 *
 * Handles the frontend display of the Grid System layout.
 *
 * @package    Kabook_Editor_Tools
 * @subpackage Kabook_Editor_Tools/modules/tinymce/assets
 * @author     Kabook
 * @license    GPL-2.0+
 */

/* ==========================================================================
   1. Grid System Layout
   ========================================================================== */

.kabook-grid {
	display: grid;
	gap: 20px; /* Gap between columns */
	margin-bottom: 20px;
	width: 100%;
}

/* Column Definitions */
.kabook-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.kabook-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.kabook-grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* General Card Styling */
.kabook-card {
	position: relative;
}

/* Remove trailing margins from the last paragraph inside cards to maintain spacing */
.kabook-card p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   2. Responsive Behavior
   ========================================================================== */

/* Stack columns vertically on mobile devices */
@media (max-width: 768px) {
	.kabook-grid-2,
	.kabook-grid-3,
	.kabook-grid-4 {
		grid-template-columns: 1fr !important; /* Force single column on mobile */
	}
}