@import url("ffstyle.css");

body { overflow-x: hidden; overflow-y: auto; }

/* ===============================================
	1.HEADER INNER PAGE
=============================================== */
.inner-page-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: var(--ff-light-yellow);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: visible !important; 
    z-index: 10; 
}

.inner-bg-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 0; 
}

.inner-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 100%);
    z-index: 1; 
}

.inner-hero-content {
    position: relative;
    z-index: 2;
    padding-bottom: 8vh;
    width: 100%;
}

/* ===============================================
	2.AGE STAGE
=============================================== */
.section-prog-cards {
    padding: 5rem 0;
    background-color: var(--ff-orange);
}

/* THE GRID CONTAINER */
.prog-grid {
    display: grid;
    width: 100%;
    /* Mobile Default: 1 Column */
    grid-template-columns: 1fr; 
    gap: 0; /* Connect borders perfectly */
}

/* THE GRID ITEM */
.prog-card {
    display: flex;
    flex-direction: column;
    height: 100%; /* Stretches to fill grid row height */
}

/* TITLE AREA */
.prog-card-title {
    text-align: center;
    padding-bottom: 1.5rem;
    min-height: 80px; /* Force titles to align if text wraps */
    display: flex;
    align-items: flex-end; 
    justify-content: center;
    color: var(--ff-brown);
}

/* MEDIA AREA */
.prog-media-box {
    width: 100%;
    height: 220px; /* Fixed height for alignment */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3rem;
}
.prog-media-box video, 
.prog-media-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* DETAILS BOX (The part with borders) */
.prog-details-box {
    flex-grow: 1; /* Pushes content to fill space */
    padding: 2rem;
    
    /* MOBILE DEFAULT BORDERS: Top & Bottom */
    border-top: 8px dotted var(--ff-yellow);
    border-bottom: 8px dotted var(--ff-yellow);
    border-left: none;
    border-right: none;
    margin-bottom: 3rem; /* Space between items on mobile */

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Remove bottom margin from very last item on mobile */
.prog-card:last-child .prog-details-box {
    margin-bottom: 0;
}

/* LIST STYLING */
.prog-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.prog-details-list li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;  
	color: var(--ff-light-yellow);
    font-size: 0.95rem;
    line-height: 1.5;
}
.prog-details-list li::before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    background-color: var(--ff-yellow);
    border-radius: 50%;
    margin-bottom: 0.8rem;
}

/* ===============================================
	2.1 - RESPONSIVE GRID & BORDER LOGIC
=============================================== */
/* MOBILE VIEW (1 Columns) */
@media (max-width: 767px) {
    .prog-card :is(.prog-card-title, .prog-media-box, .prog-details-box) {
        border-style: dotted;
        border-color: var(--ff-yellow);
        border-width: 0 8px; 
        margin-bottom: 0;
		padding-bottom: 0;
    }
	.prog-details-box {
		padding-bottom: 3rem !important;
	}
	
	.prog-card .prog-details-box {
        border-bottom-width: 8px; 
    }
	
    .prog-card-title {
        border-top-width: 8px;
    }
    .prog-details-box {
        border-bottom-width: 8px;
        margin-bottom: 3rem;
    }
	
    .prog-card:last-child .prog-details-box {
        margin-bottom: 0;
    }
	.prog-card:last-child .prog-details-box {
        border-bottom-width: 0; 
    }
}

/* TABLET VIEW (2 Columns) */
@media (min-width: 768px) and (max-width: 1199px) {
    .prog-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Cols */
    }
	
	.prog-card :is(.prog-card-title, .prog-media-box, .prog-details-box) {
        margin-bottom: 0;
        border-style: dotted;
        border-color: var(--ff-yellow);
        border-width: 0 8px 0 0; 
    }
	
    .prog-card:nth-child(odd) :is(.prog-card-title, .prog-media-box, .prog-details-box) {
        border-left-width: 8px;
    }
	
    .prog-card:nth-child(-n+2) .prog-details-box {
        border-bottom-width: 8px;
    }
	
    .prog-card:nth-child(n+3) .prog-details-box {
        padding-bottom: 0;
    }
}

/* DESKTOP VIEW (4 Columns) */
@media (min-width: 1200px) {
    .prog-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 Cols */
    }

    .prog-details-box {
        margin-bottom: 0;
        border-top: none;
        border-bottom: none;
        border-right: 8px dotted var(--ff-yellow);
        border-left: none;
    }
	
    .prog-card:first-child .prog-details-box {
        border-left: 8px dotted var(--ff-yellow);
    }
	
    /* .prog-details-box { */
        /* height: 100%; */
    /* } */
}

/* =========================================
   3.PROGRAMME SCHEDULE
========================================= */
.section-schedule {
    padding: 0 0 5rem 0;
    background-color: var(--ff-orange);
}

.schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
}

.schedule-item {
    padding: 2rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    min-height: 100px; 
}

.schedule-item p {
	margin-bottom: 0;
}

.schedule-item.item-half-day {
    border-radius: 30px 0 0 0;
}
.schedule-item.item-full-day {
    border-radius: 0 30px 0 0;
}
.schedule-item.item-half-time {
    border-radius: 0 0 0 30px;
}
.schedule-item.item-full-time {
    border-radius: 0 0 30px 0;
}

.item-half-day {
    order: 1; /* Force Order */
	border-right: 8px dotted var(--ff-orange);
}

.item-full-day {
    order: 2; /* Force Order */
}

.item-half-time {
    order: 3;
    border-right: 8px dotted var(--ff-orange);
	position: relative;
}

.item-full-time {
    order: 4; /* Force Order */
	position: relative;
}

.item-half-time::before,
.item-full-time::before {
    content: "";
    position: absolute;
    top: -4px;     
    left: 0;
    width: 100%;
    height: 0;
    border-top: 8px dotted var(--ff-orange);
    z-index: 5; 
}

/* ===============================================
	4.Programme Details
=============================================== */
.section-title-only2 {
    background: var(--ff-orange);
}

.title-card {
    background-color: var(--ff-light-yellow); 
    border-radius: 50px 50px 0 0;
    padding: 3rem 0 2rem 0;
}

/* ===============================================
	5.Programme Details 1
=============================================== */
.section-enrichment {
    padding: 0;
    overflow: hidden;
    background-color: #fff;
}

/* 1. Image Styling */
.enrich-img-wrapper {
    width: 100%;
    height: 100%;
    min-height: 400px; /* Ensure height on mobile */
    position: relative;
}

.enrich-img-left,
.enrich-img-right {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 2. Text Box Styling */
.enrich-text-box {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 4rem 5rem; 
}

/* ===============================================
	6.1 - LAPTOP / DESKTOP VIEW
=============================================== */
@media (min-width: 1200px) {
	.enrich-img-left {
        border-radius: 0 50px 50px 0; 
    }
	.enrich-img-right {
        border-radius: 50px 0 0 50px; 
    }
}

/* ===============================================
	6.2 - TABLET VIEW
=============================================== */
@media (min-width: 768px) and (max-width: 1279px) {
	.enrich-text-box {
        padding: 3rem 1.5rem;
    }
    .enrich-img-left {
        border-radius: 0 50px 50px 0;
    }
	.enrich-img-right {
        border-radius: 50px 0 0 50px; 
    }
}

/* ===============================================
	6.3 - MOBILE VIEW
=============================================== */
@media (max-width: 767px) {
	.enrich-img-wrapper {
	  min-height: 300px !important;
	}
	.enrich-text-box {
        padding: 3rem 1.5rem;
    }
    .enrich-img-left,
	.enrich-img-right	{
        border-radius: 0 0 50px 50px; 
    }
}

/* =========================================
   MODAL SPECIFIC STYLES
========================================= */
.modal-col-separator {
    border-right: 8px dotted var(--ff-yellow);
    padding-right: 3rem; 
}

.modal-img-grid .img-fluid {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 3. Profile Section (Right Column) */
.profile-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.profile-img {
    width: 180px;
    height: 180px;
    border-radius: 50%; 
    object-fit: cover;
    border: 8px solid var(--ff-yellow); 
    margin-right: 1.5rem;
    flex-shrink: 0;
}

.modal-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.modal-list li {
    position: relative;
    padding-left: 1.5rem; 
    margin-bottom: 0.8rem;
    color: var(--ff-brown);
    font-size: 1rem;
    line-height: 1.5;
}

.modal-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px; 
    width: 10px;
    height: 10px;
    background-color: var(--ff-yellow);
    border-radius: 50%;
}

@media (max-width: 1199px) {
    .modal-col-separator {
        border-right: none;
        border-bottom: 8px dotted var(--ff-yellow);
        padding-right: 0;
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }
    
    .modal-header {
        padding: 1.5rem !important; 
    }
    
    .modal-body {
        padding: 1.5rem !important;
    }
}