/*
======================================================================
Much Ado
Template page program
======================================================================
*/

.page-template-page-program .program-show{
	display:grid;
	grid-template-columns:90px 280px 1fr 170px;
	grid-template-areas:"date image content infos";
	align-items:center;
	column-gap:2rem;
	margin:0 -2rem;
	padding:2rem;
	border-bottom:1px solid color-mix(in srgb,var(--color-crown) 25%,transparent);
	transition:
		background-color .25s ease,
		border-color .25s ease,
		grid-template-columns .25s ease;
}

.page-template-page-program .program-show > .wp-block-column:nth-child(1){ grid-area:date; }
.page-template-page-program .program-show > .wp-block-column:nth-child(2){ grid-area:image; }
.page-template-page-program .program-show > .wp-block-column:nth-child(3){ grid-area:content; }
.page-template-page-program .program-show > .wp-block-column:nth-child(4){ grid-area:infos; }

.page-template-page-program .program-show:last-child{
	border-bottom:none;
}

.page-template-page-program .program-show:hover{
	background:var(--color-lightbrown);
}

.page-template-page-program .program-show p:last-child a{
	transition:letter-spacing .2s ease;
}

.page-template-page-program .program-show:hover p:last-child a{
	letter-spacing:.08em;
}

.page-template-page-program .program-show > .wp-block-column{
	display:flex;
	flex-direction:column;
	margin:0 !important;
}

/* =====================================================
   DATE
===================================================== */

.page-template-page-program .program-show > .wp-block-column:nth-child(1){
	align-items:center;
	justify-content:center;
	text-align:center;
}

.page-template-page-program .program-show > .wp-block-column:nth-child(1) h4{
	margin:0;
}

.page-template-page-program .program-show > .wp-block-column:nth-child(1) h5{
	margin:1rem 0 0;
	font-size:1.2rem;
	font-weight:400;
	opacity:.75;
}

/* =====================================================
   IMAGE
===================================================== */

.page-template-page-program .program-show > .wp-block-column:nth-child(2) figure{
	margin:0;
	overflow:hidden;
}

.page-template-page-program .program-show > .wp-block-column:nth-child(2) img{
	width:100%;
	height:auto;
	transition:transform .35s ease;
}

.page-template-page-program .program-show:hover img{
	transform:scale(1.03);
}

/* =====================================================
   CONTENT
===================================================== */

.page-template-page-program .program-show > .wp-block-column:nth-child(3){
	justify-content:center;
}

.page-template-page-program .program-show > .wp-block-column:nth-child(3) h2{
	margin-bottom:.5rem;
	font-size:clamp(2.4rem,3vw,4.5rem);
}

.page-template-page-program .program-show > .wp-block-column:nth-child(3) h3{
	margin:0 0 .75rem;
	font-size:1.3rem;
}

.page-template-page-program .program-show > .wp-block-column:nth-child(3) p{
	margin:0;
}

/* =====================================================
   INFOS
===================================================== */

.program-show a.program-info{
	word-break: keep-all;      /* ne coupe jamais un mot */
	overflow-wrap: normal;
	white-space:normal;
	hyphens:none;
}

.page-template-page-program .program-show > .wp-block-column:nth-child(4){
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
	gap:.1rem;
	padding-left:2rem;
	border-left:1px solid color-mix(in srgb,var(--color-crown) 15%,transparent);
}

.page-template-page-program .program-show > .wp-block-column:nth-child(4) p{
	margin:0;
	font-size:.95rem;
}

.page-template-page-program .program-show > .wp-block-column:nth-child(4) p:nth-child(2){
	margin-top:1rem;
}

.page-template-page-program .program-show > .wp-block-column:nth-child(4) p:nth-child(3){
	margin-top:1.25rem;
	padding-top:1.25rem;
	border-top:1px solid color-mix(in srgb,var(--color-crown) 15%,transparent);
}

.page-template-page-program .program-show > .wp-block-column:nth-child(4) p:last-child a{
	display:inline-flex;
	align-items:center;
	gap:.5rem;
	font-weight:600;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:var(--color-crown);
	transition:
		gap .25s ease,
		color .25s ease;
}

.page-template-page-program .program-show > .wp-block-column:nth-child(4) a.program-info:hover{
	gap:.9rem;
	color:var(--color-redlogo);
}

.page-template-page-program .program-show > .wp-block-column:nth-child(4) a.program-info::after{
	content:"→";
}

.page-template-page-program .program-show > .wp-block-column:nth-child(4) p:nth-child(1)::before,
.page-template-page-program .program-show > .wp-block-column:nth-child(4) p:nth-child(2)::before{
	content:"";
	display:inline-block;
	width:16px;
	height:16px;
	margin-right:.6rem;
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	vertical-align:-2px;
}

.page-template-page-program .program-show > .wp-block-column:nth-child(4) p:nth-child(1)::before{
	background-image:url("../images/icons/actors-crown.svg");
}

.page-template-page-program .program-show > .wp-block-column:nth-child(4) p:nth-child(2)::before{
	background-image:url("../images/icons/duration-crown.svg");
}

.page-template-page-program .program-show > .wp-block-column:nth-child(4) a{
	font-weight:600;
	color:var(--color-crown);
}

.page-template-page-program .program-show:hover > .wp-block-column:nth-child(4) a{
	color:var(--color-white);
}

/* =====================================================
   PROGRAM HEADER
===================================================== */

.program-header{
	position:relative;
	margin-bottom:var(--space-48);
	overflow:hidden;
	border-radius:var(--radius-none);
}

.program-header img{
	width:100%;
	height:clamp(320px,40vw,500px);
	object-fit:cover;
}

.program-header > .container{
	position:absolute;
	inset:0;
	z-index:2;
	display:flex;
	align-items:flex-end;
	padding-bottom:4rem;
}

.program-header-content h1{
	margin:0;
}

.program-intro{
	margin-top:1.75rem;
	font-size:1.25rem;
	color:var(--color-textdarker);
}

/* =====================================================
   RESPONSIVE — TABLETTE (≤ 968px)
===================================================== */

@media (max-width:968px){

	.page-template-page-program .program-show{
		grid-template-columns:90px 1fr;
		grid-template-areas:
			"date    image"
			"content content"
			"infos   infos";
		row-gap:1.25rem;
		column-gap:1.5rem;
		margin:0 -1.5rem;
		padding:1.5rem;
	}

	.page-template-page-program .program-show > .wp-block-column:nth-child(3) h2{
		font-size:clamp(2rem,4vw,3rem);
	}

	.page-template-page-program .program-show > .wp-block-column:nth-child(4){
		flex-direction:row;
		flex-wrap:wrap;
		align-items:center;
		padding-left:0;
		padding-top:1.25rem;
		border-left:none;
		border-top:1px solid color-mix(in srgb,var(--color-crown) 15%,transparent);
		column-gap:1.5rem;
		row-gap:.5rem;
	}

	.page-template-page-program .program-show > .wp-block-column:nth-child(4) p:nth-child(2){
		margin-top:0;
	}

	.page-template-page-program .program-show > .wp-block-column:nth-child(4) p:nth-child(3){
		flex-basis:100%;
		margin-top:.5rem;
		padding-top:1rem;
	}

	.program-header img{
		height:clamp(260px,45vw,400px);
	}

	.program-header > .container{
		padding-bottom:2.5rem;
	}

	.program-intro{
		font-size:1.1rem;
	}
}

/* =====================================================
   RESPONSIVE — MOBILE (≤ 600px)
===================================================== */

@media (max-width:600px){

	.page-template-page-program .program-show{
		grid-template-columns:auto 1fr;
		grid-template-areas:
			"image   image"
			"content content"
			"date    infos";
		align-items:center;
		row-gap:1rem;
		column-gap:1.25rem;
		margin:0;
		padding:1.25rem 0;
	}

	.page-template-page-program .program-show > .wp-block-column:nth-child(1){
		flex-direction:row;
		align-items:baseline;
		justify-content:flex-start;
		gap:.4rem;
		white-space:nowrap;
	}

	.page-template-page-program .program-show > .wp-block-column:nth-child(1) h4{
		font-size:.95rem;
	}

	.page-template-page-program .program-show > .wp-block-column:nth-child(1) h5{
		margin:0;
		font-size:.95rem;
		opacity:.6;
	}

	.page-template-page-program .program-show > .wp-block-column:nth-child(3) h2{
		font-size:clamp(1.75rem,7vw,2.4rem);
	}

	.page-template-page-program .program-show > .wp-block-column:nth-child(3) h3{
		font-size:1.1rem;
	}

	/* -------------------------------------------------
	   INFOS — on cache CP/CE2 et durée, le bouton
	   partage la ligne avec Date/TBD
	------------------------------------------------- */

	.page-template-page-program .program-show > .wp-block-column:nth-child(4){
		flex-direction:column;
		align-items:flex-start;
		justify-content:center;
		border-left:none;
		border-top:none;
		padding-left:0;
		padding-top:0;
	}

	.page-template-page-program .program-show > .wp-block-column:nth-child(4) p:nth-child(1),
	.page-template-page-program .program-show > .wp-block-column:nth-child(4) p:nth-child(2){
		display:none;
	}

	.page-template-page-program .program-show > .wp-block-column:nth-child(4) p:nth-child(3){
		flex-basis:auto;
		margin-top:0;
		padding-top:0;
		border-top:none;
	}

	.program-header{
		border-radius:var(--radius);
	}

	.program-header img{
		height:clamp(200px,55vw,320px);
	}

	.program-header > .container{
		padding-bottom:1.5rem;
	}

	.program-intro{
		margin-top:1.25rem;
		font-size:1rem;
	}
}