/** @format */

/**
 * =============================================================================
 *  @fileOverview  Admin What's New Page Styles
 *  @author        James A Wilson
 *  @version       1.0.0
 *  @date          2026-03-20
 */

/**
 * =============================================================================
 *  Global Variables
 */
@use "../common/Common-variables-sass.scss" as sassVariables;

:root {
	--form-margin: 30%;
}

/**
 * =============================================================================
 *  Local Styles
 */
#main_Wrapper {
	grid-template-columns: repeat(12, [col] 1fr);
	column-gap: 1rem;
	row-gap: 0;
	margin: 0 var(--form-margin);
	grid-template-areas:
		"main-form"
		"main-table";

	& #main_Form {
		grid-area: main-form;
		grid-column: col 1 / span 12;
		grid-row: 2;
		margin-bottom: 1rem;
		grid-template-areas:
			"grid-heading"
			"grid-type"
			"grid-begdate"
			"grid-enddate"
			"grid-text";

		& #grid_Heading {
			grid-area: grid-heading;
			grid-column: col 1 / span 7;
			grid-row: 1;
		}
		& #grid_Type {
			grid-area: grid-type;
			grid-column: col 8 / span 5;
			grid-row: 1;
		}
		& #grid_BegDate {
			grid-area: grid-begdate;
			grid-column: col 1 / span 5;
			grid-row: 2;
		}
		& #grid_EndDate {
			grid-area: grid-enddate;
			grid-column: col 8 / span 5;
			grid-row: 2;
		}
		& #grid_Text {
			grid-area: grid-text;
			grid-column: col 1 / span 12;
			grid-row: 3;
		}
	}

	& #main_Table {
		grid-area: main-table;
		grid-column: col 1 / span 12;
		grid-row: 3;
	}
}

/**
 * =============================================================================
 *  Media Breakpoints
 */
@media only screen and (max-width: #{sassVariables.$screen-bp-xl}) {
	#main_Wrapper {
		margin: 0 calc(var(--form-margin) * 0.9);
	}
}
@media only screen and (max-width: #{sassVariables.$screen-bp-lg}) {
	#main_Wrapper {
		margin: 0 calc(var(--form-margin) * 0.8);
	}
}
@media only screen and (max-width: #{sassVariables.$screen-bp-md}) {
	#main_Wrapper {
		margin: 0 calc(var(--form-margin) * 0.7);
	}
}
@media only screen and (max-width: #{sassVariables.$screen-bp-sm}) {
	nav,
	#main_Wrapper {
		display: none;
	}
	#small_Message {
		display: block;
		margin-top: 2rem;
	}
}