/* intro-columnsOK.css	*/

/* 		 Additional styling */
p
{
	
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1rem;
	overflow-wrap: break-word; /* Allow long words to break and wrap */
/* 	min-width: 12ch; */
	/* 12 characters */
}




/* INTRO  full-width DIV with an image top left no wider than 600px  */
/*  text wrapped around and below it. The text is imported from “intro.txt”   */
intro
{
	margin-top: 20px;
	/* space below header for wrapped menu  */
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 20px;
	box-sizing: border-box;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1rem;
}

.intro-image
{
	float: left;
	/* Align image to the left */
	margin-top: 20px;
	/* space below header for wrapped menu */
	max-width: 100px;
	/* Limit image width */
	width: 100%;
	height: auto;
	/* Maintain aspect ratio */
	margin-right: 10px;
	/* Space between image and text */
}

.intro-text
{
	flex: 1;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1rem;
	/*  font-size: 2vw;  2% of the viewport width */
	line-height: 1.2;
}

/* 		 Additional styling */
.intro p
{
	margin-bottom: 20px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1rem;
}
/* =========================== */
/* Horizontal ruler  */
hr
{
	color: var(--rulercolour);
	height: 3px;
	background-color: var(--rulercolour);
	width: 99%;
	/* border: 6px; */
	/* padding: 0px; */
}

/* ============================== */

/* 
.one
{
	background-color: var(--sectiongreyback);
	border: 0px;
	padding: 0px;
}

.two
{
	background-color: var(--sectiongreyback);
	border: 0px;
	padding: 0px;
}

.three
{
	background-color: var(--sectiongreyback);
	border: 0px;
	padding: 0px;
}
 */


.column-container
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background-color: var(--sectiongreyback);
	overflow: auto;
	/* Clear floats */
	
    overflow-wrap: break-word; /* Allow long words to break and wrap */
	
}

.columns-section
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.column
{
	/* 
flex: 1;
	min-width: 200px;
 */
	margin: 5px;
	/* Minimum width for responsiveness */
	box-sizing: border-box;
	/*    max-width: 12ch; Limit the width to 12 characters */
	flex-basis: 200px;
	flex-grow: 1;
	font-size: 1rem;
	/* 
		font-size: 3vw;
 */
	background-color: white;
		background-color: var(--spacer);
/* GET THIS GREY AS LIGHT AS POSSIBLE WITHOUT LOSING CONTRAST */
	border-right: 2px;
	
	    overflow-wrap: break-word; /* Allow long words to break and wrap */

}

p{
	    overflow-wrap: break-word; /* Allow long words to break and wrap */
}

.wrapped-text
{
	/* min-width: 8ch; */
	display: inline-block;
	vertical-align: top;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1rem;
	border-right: 2px #555;
	border-bottom: 2px #B8B8B8;
	
	    overflow-wrap: break-word; /* Allow long words to break and wrap */

}

/* .column:not(:last-child) { border-right: 1px solid #ccc; } */
.column-image
{
	/* max-width: 100%; */
	/* min-width: 33vw; */
	height: auto;
	float: right;
	/* Align image to the right */
	margin-right: 5px;
	/* Space between image and text */
	/*   margin-right: 12ch;  Add some space between the image and t sext */
	

    max-width: calc(100% - 120px); /* Maximum width is the column width minus 12px */
	
}

.wrapped-text {
    margin: 0; /* Remove default margin for paragraphs */
}

.presentation, .members, .workshop, .outdoors,.others,.competition, .social, .blank, .spacer {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.8rem;
}


		/* 
	--presentation: #DDFFDD;
			--members: #FFC589;
			--workshop: #FFDF79;
			--outdoors: #CAFFF2;
			--others: #FFEEFF;
			--competition: #FFCCCC;
			--social: #DDDDDD;
			--blank: #f9f9f9;
			--spacer: #cccccc;
 */

/* Clearfix for the column to ensure proper wrapping */

/* 
.column::after
{
	content: "";
	display: table;
	clear: both;
}
 */

/* 
p { margin: 0px; }
 */