/*
## This is used to style the webpage "Doylestown Stories".
##
## Created by: John Halderson
*/

/* This is the default layout and styling for the page. */
.site-page {
	display: grid;
	grid-template-columns: minmax(auto, 650px);
	grid-template-rows: auto;
	column-gap: 1rem;
	row-gap: 1rem;
	grid-template-areas: "main";
	
	justify-content: center;
	margin: 1rem;
}


/*--------------------------------------------------------------
General styling
--------------------------------------------------------------*/
img {
	display: block;
	border: 0;
	width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
Page:
--------------------------------------------------------------*/
.page-title {
	font-size: 200%;
	margin: 0;
	color: ivory;
}

.page-intro {
	font-size: 140%;
	margin-left: 1rem;
	margin-right: 1rem;
	color: ivory;
}


/*--------------------------------------------------------------
Cards:
--------------------------------------------------------------*/
.cards {
	justify-content: center;
	padding: 0;
}

.cards a {
	display: block;
	/* margin-bottom: 1rem; */
	text-decoration: none;
}

/*
.cards a:focus,
.cards a:hover {
	background: hsl(0, 0%, 97%);
}
*/

/* Default layout and styling for each card. */
/* Mobile devices.*/
.card {
	display: grid;
	/*grid-template-columns: minmax(auto, 650px);*/
	grid-template-columns: auto;
	grid-template-rows: auto;
	column-gap: 1rem;
	row-gap: 1rem;
	grid-template-areas: 
		"title"
		"photo"
		"text"
		"button";
		
	border-radius: 6px;
	padding: 1rem;
	font-size: 90%; 
		color: black; 
	background: ivory;
	/*margin: 2.5rem;*/
	box-shadow: 1px 1px 10px 1px grey;	
}

.card-header {
	grid-area: title;
	margin: 0;
	font-size: 220%;
	color: black;
	/*line-height: 1em;*/
	text-align: center;
}

.card-text {
	grid-area: text;
	font-size: 140%;
	color: black;
	margin: 0;
}

.card-image {
	grid-area: photo;
	border-radius: 4px;
	margin-left: auto;
	margin-right: auto;
	width: 130px;
	width: 100%;
}

.card-footer {
	grid-area: footer;
}

.card-button {
	grid-area: button;
}

.disable-button {
	display: none;
}

.temp-placeholder {
	font-size: 120px;
	color: red;
}

/* ############################################# */
/* These settings are for larger screens. */
/* ############################################# */
@media screen and (min-width: 600px) {
	/* Layout and styling for each card. */
	/* Larger screen devices.*/ 
	.card {
		display: grid;
		/*grid-template-columns: minmax(auto, 650px);*/
		/*grid-template-columns:  130px auto;*/
		grid-template-columns:  1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: auto auto 2rem;
		column-gap: 1rem;
		row-gap: 1rem;
		grid-template-areas: 
			"title title title title title"
			"photo text text text text"
			"photo button button button footer";
		margin: 1rem;
	}
}