/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 * @
 * @            L A Y O U T  --  G R I D   D E F I N I T I O N S
 * @
 * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 *
 *    Standard breakovers:    700  |  1100  |  and a couple of tweaks at 1500
 *    Homepage breakovers:    900  |  1200  |  1400  
 *    Masthead breakovers:    500  |  800   |  1100  |  1200
 *
 *    Festival pages get tweaked at many different widths
 *    Event pages get tweaked at 900 |  1300  |  1500
 *
 *    ODDBALL breakover points for .box-layout .flex-box  (pages.css)
 *
 *    HOMEPAGE GETS ITS OWN BREAKOVERS AND GRID LAYOUTS -- see homepage.css
 */


/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 *                                       GRID LAYOUT -- MEDIUM SCREENS
 *                         ( but homepage will get its own breakovers )
 * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 */

@media screen and (min-width: 700px) and (max-width: 1099px) { 

	/* CANVAS LEVEL GRID */
	#canvas { 
		display: grid; 
		grid-template-columns: 17rem auto; 
	}
	#sitewide-banner        { grid-column: 1/3; grid-row: 1; }
	#masthead               { grid-column: 1/3; grid-row: 2; }
	#breadcrumbs		    { grid-column: 1/3; grid-row: 3; }
	#main                   { grid-column: 1/3; grid-row: 4; }
	#all-sponsors           { grid-column: 1/3; grid-row: 5; } /* if present */
	#footer                 { grid-column: 2;   grid-row: 6; }
	#footer-addendum        { grid-column: 1;   grid-row: 6; }


	/* ------------------------------------------------
	 * CONTENT LEVEL GRID - MOST PAGES 
	 *
	 * This grid establishes a sidebar and a page-content column 
	 * SPECIAL PAGE CASES BELOW
	*/
	#main { display: grid;  margin-right: 2rem; }

	#main { 
		grid-template-columns: 17rem auto;
		grid-template-rows: auto auto auto 1fr;  /* yes! */
		column-gap: 2rem;
		}

	/* sitewide things */
	.for-basics          { grid-column: 1/3; grid-row: 1;   }
	.for-quicklinks        { grid-column: 1/3; grid-row: 2;   } /* enews */

	/* info-page things */
	.for-page-content      { grid-column: 2;   grid-row: 3; }
	.for-page-content.wide { grid-column: 2/4; grid-row: 3; } /* enews, remember when */
	.for-sidemenu          { grid-column: 1;   grid-row: 3; }

	/* calendar things */
	.for-calendar          { grid-column: 2;  grid-row: 3; }


	/* ------------------------------------------------
	 * CONTENT LEVEL GRID - EVENT PAGES
	 * content gets displayed in two columns,
	 * but back-and-forth should be in its own column
	 */
	#main.eventpage   { grid-template-columns: 17rem auto 15.25rem; margin-right: 2rem; }

	#main.eventpage .for-basics          { grid-column: 1/3; grid-row: 1;   }
	#main.eventpage .for-back-and-forth  { grid-column: 3;   grid-row: 1;   }
	#main.eventpage .for-quicklinks      { grid-column: 1/4; grid-row: 2;   } /* usually hidden */
	#main.eventpage .for-description     { grid-column: 2/4;  grid-row: 3/5; }  

	#main.eventpage .for-sidebar-1         { grid-column: 1;  grid-row: 3;   }
	#main.eventpage .for-sidebar-2         { grid-column: 1;  grid-row: 4;   }


	/* ------------------------------------------------
	 * CONTENT LEVEL GRID - STATESTREET / PRINTING
	 */
	#main.statestreet { grid-template-columns: 50% 50%; }

	.for-ss-current        { grid-column: 1;   grid-row: 2; }
	.for-ss-batches        { grid-column: 1;   grid-row: 3; }
	.for-ss-flyers         { grid-column: 2;   grid-row: 3; }


} /* END MEDIUM SCREENS */


/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 *                                       GRID LAYOUT -- WIDE SCREENS
 *                         ( but homepage will get its own breakovers )
 * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 */


@media screen and (min-width: 1100px) { 

	/* CANVAS LEVEL GRID AND SECTION PLACEMENT */
	#canvas { 
		display: grid;  grid-template-columns: 3% 17rem auto 17rem 3%;  
	}

	#sitewide-banner  { grid-column: 1/6; grid-row: 1; }
	#masthead         { grid-column: 1/6; grid-row: 2; }
	#breadcrumbs      { grid-column: 1/6; grid-row: 3; }
	#main             { grid-column: 1/6; grid-row: 4; }
	#all-sponsors     { grid-column: 2/5; grid-row: 5; } /* span across bottom */
	#footer           { grid-column: 3/6; grid-row: 6; }
	#footer-addendum  { grid-column: 1/3; grid-row: 6; }



	/* ------------------------------------------------
	 * CONTENT LEVEL GRID - MOST PAGES 
	   This grid establishes a sidebar, a page-content column, and whitespace 
	   Parent grid enforces whitespace on either side
	   SPECIAL PAGE CASES BELOW

	   AT MIN-WIDTH 1100px -- 96% = 1034 = (17 + 2 + 45) rem + 10px 

	*/
	#main { display: grid; }

	#main { 
		grid-column: 2/5; 
		grid-template-columns: 17rem 50rem auto;  /* adds up to 1104 */
		grid-template-columns: 17rem 46rem auto;  /* adds up to 1040 */
		grid-template-rows: auto auto 1fr;
		column-gap: 2rem;
		}



/* sitewide */
	.for-basics                        { grid-column: 1/3; grid-row: 1;   }
	.for-back-and-forth                { grid-column:   3; grid-row: 1;   }
	.for-quicklinks                    { grid-column: 1/6; grid-row: 2;   } 

/* calendar pages */
	.eventlist .for-calendar            { grid-column: 2;  grid-row: 3; }

/* info pages */
	.for-page-content                   { grid-column: 2;   grid-row: 3; }
	.for-page-content.wide              { grid-column: 2/4; grid-row: 3; }
	.for-sidemenu                       { grid-column: 1;   grid-row: 3; }

	/* ------------------------------------------------
	 * CONTENT LEVEL GRID - EVENT PAGES
	 * content gets displayed in two columns,
	 * but back-and-forth should be in its own column
	 */
	#main.eventpage   { grid-template-columns: 17rem auto 15rem; } /* 15 rem for B/F */

	.eventpage .for-quicklinks          { grid-column: 1/4; grid-row: 2;   } 
	.eventpage .for-description         { grid-column: 2;  grid-row: 3; }
	.eventpage .for-sidebar-1           { grid-column: 1;  grid-row: 3; }
	.eventpage .for-sidebar-2           { grid-column: 3;  grid-row: 3; }
	.eventpage .for-basics              { grid-column: 1/4; }

	/* ------------------------------------------------
	 * CONTENT LEVEL GRID - STATESTREET / PRINTING
	 */
	#main.statestreet { grid-template-columns: 48.5% auto 48.5%; } 

	.for-ss-current      { grid-column: 1;   grid-row: 2;}
	.for-ss-standard     { grid-column: 3;   grid-row: 2;}
	.for-ss-batches      { grid-column: 1;   grid-row: 3;}
	.for-ss-flyers       { grid-column: 3;   grid-row: 3;}
	.statestreet .for-basics { grid-column: 1/4; max-width: 70em }

}
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 *                                 GRID LAYOUT -- SUPER WIDE SCREENS
 *                                     ( calendars and event pages )
 * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 */

@media screen and (min-width: 1500px) { 

/* calendar pages */
	#canvas.eventlist       { grid-template-columns: 10% 20rem auto 17rem 3%; }
	#canvas.eventlist #main { grid-template-columns:     20rem  55rem  auto; }


/* event pages */
	#canvas.eventpage       { grid-template-columns:  6% 17rem auto 17rem 3%; }
	#canvas.eventpage #main { grid-template-columns:     17rem auto 17rem;    }

}