/*Style for MCC Course Page -- conditional */

.mcc .accordion-content[aria-hidden="false"] > div{
	padding-inline:1rem;
	padding-bottom:1rem;
}

.mcc .ia-course__banner{}
.mcc .ia-course__header h3.h5{
	color:#333;
}
.ia_mcc_course,
.ia_mcc_why{
	position:relative;
	background-image:url(/wp-content/uploads/2025/12/mcc-course-737-bg-scaled-1-e1766354511492.webp);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	isolation:isolate;
}

.ia_mcc_course::after,
.ia_mcc_why::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	background-color:#121212;
	opacity:0.7;
}

.ia_mcc_course.cbt,
.ia_mcc_why .content{
	display: grid;
    grid-template-columns: minmax(0,50%) minmax(0,50%);
    column-gap: calc(var(--layout-margin) * 2);
    padding: 4rem 1rem;
    width: 1400px;
    max-width: min(100%, 1400px);
    margin: 0 auto;
}


.ia_mcc_course.cbt .cbt-img .mcc_cbt_image.img{
	object-fit:cover;
}
.ia_mcc_course.cbt .cbt-content{
	color:#fff!important;
}
.ia_mcc_course.cbt .cbt-content > *{
	color:#fff!important;
}
.mcc .ia-course__info{
	position: relative;
    display: grid;
    grid-template-columns: minmax(0, 50%) 50%;
    align-items: start;
    column-gap: var(--layout-margin);
    padding: 4rem 1rem;
    width: 1400px;
    max-width: min(100%, 1400px);
    margin: 0 auto;
}
.mcc .info-video{
	height:100%;
}
.mcc .info-video figure{
	margin:0;
	height:100%;
}
.mcc .info-video figure img{
	height:100%;
	object-fit:cover;
}
.ia_mcc_why .content{
	color:white;
	grid-template-columns: minmax(0,50%) minmax(0,50%);
}
.ia_mcc_why .content h3{
	color:white;
}
.ia_mcc_why .content .student-masonry{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(40%, 1fr));
	gap:20px;
}
.ia_mcc_why .content .student-masonry .mcc-masonry-item:nth-child(3){
	min-width: 311.98px;
	min-height:341.03px;
}

.ia_mcc_why .content .student-masonry .mcc-masonry-item{
	max-height:70%;
	width:100%;
	object-fit:cover;
}
@media (max-width:64.0525em) {
	.mcc .ia-course__hero {
		height:80dvh;
	}
	.mcc .ia-course__info{
/* 		 grid-template-columns: 1fr; */
        padding: 2rem 1rem;
	}
	.ia_mcc_why .content{
/* 		grid-template-columns: minmax(0,40%) minmax(0,60%); */
	}
	.ia_mcc_course.cbt,
	.ia_mcc_why .content .students .student-masonry{
		grid-template-columns: 1fr;
	}
	.ia_mcc_course.cbt .cbt-img{
		text-align:center;
	}
	.ia_mcc_why .content .students .student-masonry img:nth-child(2){
		display:none;
	}
}

@media (max-width:27.5em) {
	.mcc .ia-course__info,
	.ia_mcc_why .content{
		grid-template-columns: 1fr;
	}
	
	.mcc .ia-course__info .students{
		order:2;
	}
}

/*FAQ*/
.adv-faq-wrapper{
	position: relative;
    background: url(/wp-content/uploads/2024/03/hex-light.svg);
}
.advanced-faq{
	max-width: min(100%, 1400px);
	padding:4rem 1rem;
	margin-inline:auto;
}
.advanced-faq details summary {
  list-style: none;
  cursor: pointer;
}

.advanced-faq details summary::-webkit-details-marker {
  display: none;
}

.advanced-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
}
.advanced-faq .faq-icon {
  width: 1rem;
  height: 1rem;
  position: relative;
}

.advanced-faq .faq-icon::before,
.advanced-faq .faq-icon::after {
  content: "";
  position: absolute;
  background: #333;
  transition: transform 0.3s ease;
}

.advanced-faq .faq-icon::before {
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.advanced-faq .faq-icon::after {
  height: 100%;
  width: 2px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

/* When open → turn + into − */
.advanced-faq details[open] .faq-icon::after {
  transform: scaleY(0);
}
.advanced-faq .faq-answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  padding: 0 1rem;
}

.advanced-faq details[open] .faq-answer {
  max-height: 500px; /* large enough for content */
  opacity: 1;
  padding-bottom: 1rem;
}
