/* Grades 1 & 2 Section - Professional Website Styling */



/* Ensure the g12-card uses the standard program card styling */

.g12-card {

    background: #ffffff;

    border: 1px solid rgba(0, 0, 0, 0.06);

    border-radius: 14px;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);

    padding: 28px 28px 24px;

    margin: 16px 0 32px;

    text-align: left;

    overflow: visible;

}



.g12-card::after {

    display: none;

}



/* Grid layout for Grades 1 & 2 section */

.g12-card .academic-program-grid {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 16px 36px;

    align-items: start;

}



.g12-card .program-content {

    display: contents;

}



.g12-card .program-title {

    grid-column: 1 / -1;

    font-size: 2rem;

    color: var(--primary-color);

    margin-bottom: 20px;

    font-weight: 600;

}



.g12-card .program-image {

    grid-column: 1 / 2;

    grid-row: 2 / 4;

    margin-top: 0;

    align-self: stretch;

    width: 100%;

}



.g12-card .program-image img {

    width: 100%;

    height: 100%;

    min-height: 320px;

    border-radius: 12px;

    object-fit: cover;

}



.g12-card .curriculum-list {

    list-style-type: none;

    padding: 0;

    margin: 0;

}



.g12-card .curriculum-list li {

    margin-bottom: 12px;

    padding-left: 24px;

    position: relative;

}



.g12-card .curriculum-list li::before {

    content: "◆";

    color: var(--primary-color);

    position: absolute;

    left: 0;

    top: 0;

}



.g12-card .result-points li {

    margin-bottom: 8px;

    padding-left: 24px;

    position: relative;

}



.g12-card .result-points li::before {

    content: "✔";

    color: var(--primary-color);

    position: absolute;

    left: 0;

    top: 0;

}



.g12-card .curriculum-highlights {

    grid-column: 2 / 3;

    grid-row: 2 / 3;

}



.g12-card .results-reflect {

    grid-column: 2 / 3;

    grid-row: 3 / 4;

    margin-top: 20px;

}



/* Professional styling for curriculum list */

.g12-card .curriculum-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.g12-card .curriculum-list li {

    padding: 12px 0;

    padding-left: 30px;

    position: relative;

    color: #666;

    line-height: 1.6;

    margin: 0;

}



.g12-card .curriculum-list li::before {

    content: "◆";

    position: absolute;

    left: 0;

    top: 12px;

    color: var(--primary-color);

    font-weight: bold;

    font-size: 1.1rem;

}



/* Outcomes section styling */

.g12-card .results-reflect h5 {

    font-size: 1.2rem;

    color: var(--primary-color);

    margin-bottom: 15px;

    font-weight: 600;

    position: relative;

    padding-left: 30px;

}



.g12-card .results-reflect h5::before {

    content: "◆";

    position: absolute;

    left: 0;

    top: 2px;

    color: var(--primary-color);

    font-weight: bold;

    font-size: 1.1rem;

}



.g12-card .result-points {

    list-style: none;

    padding: 0;

    margin: 0 0 0 20px;

}



.g12-card .result-points li {

    padding: 8px 0;

    padding-left: 30px;

    position: relative;

    color: #666;

    line-height: 1.6;

    margin: 0;

}



.g12-card .result-points li::before {

    content: "✓";

    position: absolute;

    left: 0;

    top: 8px;

    color: #28a745;

    font-weight: bold;

    font-size: 1.1rem;

}



/* Responsive design */

@media (max-width: 992px) {

    .g12-card .academic-program-grid {

        grid-template-columns: 1fr;

        gap: 28px;

    }

    

    .g12-card .program-title,

    .g12-card .program-image,

    .g12-card .curriculum-highlights,

    .g12-card .results-reflect {

        grid-column: 1 / -1 !important;

    }

    

    .g12-card .program-image img {

        height: 260px;

        min-height: 260px;

    }

}



@media (max-width: 768px) {

    .g12-card .program-title {

        font-size: 1.8rem;

    }

}



@media (max-width: 576px) {

    .g12-card .program-image img {

        height: 220px;

        min-height: 220px;

    }

    

    .g12-card .program-title {

        font-size: 1.5rem;

    }

}



/* High-specificity overrides for Grades 1 & 2 section only */

#primary-foundations .g12-card {

  background: linear-gradient(to bottom, #ffffff, #f9f9f9);

  border-radius: 12px;

  box-shadow: 0 8px 20px rgba(0,0,0,0.08);

  padding: 30px;

  margin-bottom: 30px;

  border: 1px solid rgba(0,0,0,0.05);

}



#primary-foundations .g12-card .program-title {

  font-size: 2rem;

  color: var(--primary-color);

  border-bottom: 2px solid var(--accent-color);

  padding-bottom: 15px;

  margin-bottom: 25px;

  font-weight: 700;

  letter-spacing: -0.02em;

}



#primary-foundations .g12-card .curriculum-highlights h4,

#primary-foundations .g12-card .results-reflect h4 {

  font-size: 1.5rem;

  color: #333;

  margin-bottom: 20px;

  position: relative;

  padding-left: 18px;

  font-weight: 600;

}



#primary-foundations .g12-card .curriculum-highlights h4::before,

#primary-foundations .g12-card .results-reflect h4::before {

  content: "";

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  width: 8px;

  height: 24px;

  background-color: var(--primary-color);

  border-radius: 4px;

}



/* Reverse layout support for Grades 1 & 2 card when .reverse is present */

.g12-card .academic-program-grid.reverse {

  /* Reduce vertical spacing specifically for this layout */

  gap: 8px 36px;

}



.g12-card .academic-program-grid.reverse .program-image {

  grid-column: 2 / 3;

  grid-row: 2 / 3;

}



.g12-card .academic-program-grid.reverse .curriculum-highlights {

  grid-column: 1 / 2;

  grid-row: 2 / 3;

}



.g12-card .academic-program-grid.reverse .results-reflect {

  grid-column: 2 / 3;

  grid-row: 3 / 4;

  margin-top: 0; /* remove extra space below image */

}



/* Ensure reverse wins over default #primary-foundations rules */

#primary-foundations .g12-card .academic-program-grid.reverse .program-image {

  grid-column: 2 / 3 !important;

  grid-row: 2 / 3 !important;

}

#primary-foundations .g12-card .academic-program-grid.reverse .curriculum-highlights {

  grid-column: 1 / 2 !important;

  grid-row: 2 / 3 !important;

}

#primary-foundations .g12-card .academic-program-grid.reverse .results-reflect {

  grid-column: 2 / 3 !important;

  grid-row: 3 / 4 !important;

  margin-top: 0 !important; /* ensure no gap below image */

}

#primary-foundations .results-reflect h5 {

  font-size: 1.2rem;

  color: #444;

  margin-bottom: 15px;

  font-weight: 600;

}



#primary-foundations .curriculum-list li,

#primary-foundations .result-points li {

  position: relative;

  padding-left: 28px;

  margin-bottom: 14px;

  line-height: 1.6;

  transition: all 0.3s ease;

  font-size: 1.05rem;

}



#primary-foundations .curriculum-list li:hover,

#primary-foundations .result-points li:hover {

  color: var(--primary-color);

  transform: translateX(5px);

}



#primary-foundations .curriculum-list li::before {

  content: "\25C6";

  color: var(--primary-color);

  position: absolute;

  left: 0;

  top: 50% !important;

  transform: translateY(-50%) !important;

  font-size: 0.8em;

}



#primary-foundations .result-points li::before {

  content: "\2714";

  color: #28a745;

  position: absolute;

  left: 0;

  top: 50% !important;

  transform: translateY(-50%) !important;

  font-size: 1em;
  display: none;

}



#primary-foundations .program-image img {

  border-radius: 10px;

  box-shadow: 0 5px 15px rgba(0,0,0,0.1);

  transition: transform 0.3s ease;

}



#primary-foundations .program-image img:hover {

  transform: scale(1.02);

}



/* Responsive adjustments */

@media (max-width: 992px) {

  #primary-foundations .g12-card .academic-program-grid {

    grid-template-columns: 1fr;

    gap: 25px;

  }

  

  #primary-foundations .g12-card .program-image {

    order: -1;

  }

}



#primary-foundations .results-reflect { 

  padding: 22px 25px; 

  background-color: rgba(245, 247, 250, 0.7);

  border-radius: 10px;

  margin-top: 25px;

}



#primary-foundations .curriculum-highlights {

  padding: 22px 25px;

  background-color: rgba(245, 247, 250, 0.7);

  border-radius: 10px;

}



#primary-foundations .results-reflect h5 { 

  margin: 0 0 15px 0; 

  padding-left: 0; 

  font-size: 1.15rem;

  color: #444;

}



#primary-foundations .results-reflect h5::before { 

  content: none !important; 

}



/* Bullet alignment and readability */

#primary-foundations .curriculum-list li{ 

  padding-left: 30px; 

  line-height: 1.72;

  margin-bottom: 12px;

}



#primary-foundations .result-points{ 

  margin: 0; 

  padding: 0; 

  list-style: none; 

}



#primary-foundations .result-points li{ 

  padding-left: 30px; 

  line-height: 1.72;

  margin-bottom: 12px;

}



/* Compact two-column layout tuned to reference proportions */

#primary-foundations .g12-card .academic-program-grid{ 

  grid-template-columns: 1.05fr 0.95fr; 

  gap: 22px 32px;

}



/* Image only spans the first content row; longer content goes full width below */

#primary-foundations .g12-card .program-image{ 

  grid-column: 1 / 2; 

  grid-row: 2 / 3 !important; 

  align-self: start; 

}

#primary-foundations .g12-card .curriculum-highlights{ 

  grid-column: 2 / 3; 

  grid-row: 2 / 3; 

}

#primary-foundations .g12-card .results-reflect{ 

  grid-column: 1 / -1 !important; 

  grid-row: 3 / 4 !important; 

  margin-top: 16px; 

}



/* Reference-like image size (compact) */

#primary-foundations .g12-card .program-image img{ 

  height: 360px !important; 

  width: 100%; 

  object-fit: cover; 

  border-radius: 12px; 

}



/* Tighten typography for compactness */

#primary-foundations .g12-card .curriculum-list li,

#primary-foundations .g12-card .result-points li{ 

  margin-bottom: 10px; 

  line-height: 1.6; 

}

#primary-foundations .g12-card .curriculum-highlights h4,

#primary-foundations .g12-card .results-reflect h4{ 

  margin-bottom: 12px; 

}



/* Responsive: single column, smaller image */

@media (max-width: 1200px){

  #primary-foundations .g12-card .program-image img{ height: 320px !important; }

}

@media (max-width: 992px){

  #primary-foundations .g12-card .academic-program-grid{ grid-template-columns: 1fr; gap: 20px; }

  #primary-foundations .g12-card .program-image{ order: -1; }

  #primary-foundations .g12-card .program-image img{ height: 300px !important; }

  #primary-foundations .g12-card .results-reflect{ grid-column: 1 / -1; }

}

@media (max-width: 576px){

  #primary-foundations .g12-card .program-image img{ height: 240px !important; }

}



@media (max-width: 992px){

  #primary-foundations .g12-card .curriculum-highlights,

  #primary-foundations .g12-card .results-reflect{ 

    box-shadow: none;

    margin-top: 0;

  }

  

  #primary-foundations .g12-card {

    padding: 25px 20px;

  }

}



@media (max-width: 576px) {

  #primary-foundations .g12-card .program-title {

    font-size: 1.6rem;

  }

  

  #primary-foundations .g12-card .curriculum-highlights h4,

  #primary-foundations .g12-card .results-reflect h4 {

    font-size: 1.3rem;

  }

  

  #primary-foundations .g12-card {

    padding: 20px 15px;

  }

}



/* ——— Outcomes panel: orange, attractive theme (Grades 1 & 2 only) ——— */

#primary-foundations .g12-card .results-reflect {

  background: linear-gradient(180deg, rgba(255,152,56,0.06), rgba(255,152,56,0.03));

  border: 1px solid rgba(255,152,56,0.35);

  box-shadow: 0 8px 24px rgba(255,152,56,0.15);

  position: relative;

  overflow: hidden;

  padding: 22px 28px 22px 34px; /* extra left padding for accent bar */

}

#primary-foundations .g12-card .results-reflect::before {

  content: "";

  position: absolute;

  left: 10px;

  top: 14px;

  bottom: 14px;

  width: 6px;

  border-radius: 4px;

  background: linear-gradient(180deg, #ff9b28 0%, #ff6a00 100%);

}

#primary-foundations .g12-card .results-reflect h5 {

  color: #cc5200; /* deep orange heading */

  font-weight: 700;

  letter-spacing: 0.2px;

  margin-bottom: 14px;

}

#primary-foundations .g12-card .result-points li::before { 

  color: #ff7a1a !important; /* orange ticks */

}

#primary-foundations .g12-card .result-points li:hover { 

  color: #cc5200; 

  transform: translateX(4px);

}



/* Responsive: single column, smaller image */

@media (max-width: 1200px){

  #primary-foundations .g12-card .program-image img{ height: 320px !important; }

}

@media (max-width: 992px){

  #primary-foundations .g12-card .academic-program-grid{ grid-template-columns: 1fr; gap: 20px; }

  #primary-foundations .g12-card .program-image{ order: -1; }

  #primary-foundations .g12-card .program-image img{ height: 300px !important; }

  #primary-foundations .g12-card .results-reflect{ grid-column: 1 / -1; }

}

@media (max-width: 576px){

  #primary-foundations .g12-card .program-image img{ height: 240px !important; }

}



@media (max-width: 992px){

  #primary-foundations .g12-card .curriculum-highlights,

  #primary-foundations .g12-card .results-reflect{ 

    box-shadow: none;

    margin-top: 0;

  }

  

  #primary-foundations .g12-card {

    padding: 25px 20px;

  }

}



@media (max-width: 576px) {

  #primary-foundations .g12-card .program-title {

    font-size: 1.6rem;

  }

  

  #primary-foundations .g12-card .curriculum-highlights h4,

  #primary-foundations .g12-card .results-reflect h4 {

    font-size: 1.3rem;

  }

  

  #primary-foundations .g12-card {

    padding: 20px 15px;

  }

}

/* Utility: stack two images vertically inside program-image */

.program-card .program-image.stack-vertical {

  display: grid;

  grid-template-rows: 1fr 1fr;

  gap: 12px;

}

.program-card .program-image.stack-vertical img {

  width: 100%;

  height: 240px;

  object-fit: cover;

  border-radius: 12px;

  box-shadow: 0 5px 15px rgba(0,0,0,0.1);

}

@media (max-width: 1200px){

  .program-card .program-image.stack-vertical img { height: 220px; }

}

@media (max-width: 992px){

  .program-card .program-image.stack-vertical img { height: 200px; }

}

@media (max-width: 576px){

  .program-card .program-image.stack-vertical img { height: 160px; }

}



/* Card + title accents for new sections to match existing aesthetics */

#igcse-curriculum .program-card,

#igcse-achievers .program-card,

#ial-curriculum .program-card {

  background: linear-gradient(to bottom, #ffffff, #f9f9f9);

  border: 1px solid rgba(0,0,0,0.05);

  border-radius: 12px;

  box-shadow: 0 8px 20px rgba(0,0,0,0.08);

  padding: 30px;

  margin-bottom: 30px;

}

#igcse-curriculum .program-title,

#igcse-achievers .program-title,

#ial-curriculum .program-title {

  font-size: 2rem;

  color: var(--primary-color);

  border-bottom: 2px solid var(--accent-color);

  padding-bottom: 15px;

  margin-bottom: 22px;

  font-weight: 700;

  letter-spacing: -0.02em;

}

#igcse-curriculum .curriculum-highlights,

#igcse-curriculum .results-reflect,

#igcse-achievers .curriculum-highlights,

#igcse-achievers .results-reflect,

#ial-curriculum .curriculum-highlights,

#ial-curriculum .results-reflect {

  padding: 20px 22px;

  background-color: rgba(245, 247, 250, 0.7);

  border-radius: 10px;

}

#igcse-curriculum .curriculum-list li,

#igcse-curriculum .result-points li,

#igcse-achievers .curriculum-list li,

#igcse-achievers .result-points li,

#ial-curriculum .curriculum-list li,

#ial-curriculum .result-points li {

  position: relative;

  padding-left: 28px;

  margin-bottom: 12px;

  line-height: 1.7;

  color: #666;

}

#igcse-curriculum .curriculum-list li::before,

#igcse-achievers .curriculum-list li::before,

#ial-curriculum .curriculum-list li::before {

  content: "\25C6";

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  color: var(--primary-color);

  font-weight: bold;

  font-size: 0.9rem;

}

#igcse-curriculum .result-points li::before,

#igcse-achievers .result-points li::before,

#ial-curriculum .result-points li::before {

  content: "\2714";

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  color: #28a745;

  font-weight: bold;

  font-size: 1rem;

}

/* Ensure left alignment for textual content inside cards */

#primary-foundations .program-content,

#primary-foundations-3-5 .program-content,

#igcse-foundations .program-content,

#igcse-curriculum .program-content,

#igcse-achievers .program-content,

#ial-curriculum .program-content {

  text-align: left;

}

/* Consistent grid for new sections: text left, images right */

#igcse-curriculum .academic-program-grid,

#igcse-achievers .academic-program-grid,

#ial-curriculum .academic-program-grid {

  display: grid;

  grid-template-columns: 1.1fr 0.9fr;

  gap: 16px 36px;

  align-items: start;

}

#igcse-curriculum .program-image,

#igcse-achievers .program-image,

#ial-curriculum .program-image {


}

/* Tidy card look (lighter, less shadow) */

#igcse-curriculum .program-card,

#igcse-achievers .program-card,

#ial-curriculum .program-card {

  background: #fff;

  border: 1px solid rgba(0,0,0,0.07);

  border-radius: 12px;

  box-shadow: 0 4px 14px rgba(0,0,0,0.06);

  padding: 28px;

}

/* Lighter outcomes/highlights blocks */

#igcse-curriculum .curriculum-highlights,

#igcse-curriculum .results-reflect,

#igcse-achievers .curriculum-highlights,

#igcse-achievers .results-reflect,

#ial-curriculum .curriculum-highlights,

#ial-curriculum .results-reflect {

  background: rgba(245,247,250,0.6);

  border: 1px solid rgba(0,0,0,0.05);

}

/* Subtle left accent bar instead of heavy gradient */

#primary-foundations .g12-card .results-reflect,

#igcse-curriculum .results-reflect,

#igcse-achievers .results-reflect,

#ial-curriculum .results-reflect {

  position: relative;

  background: #fff;

  border: 1px solid rgba(0,0,0,0.06);

}

#primary-foundations .g12-card .results-reflect::before,

#igcse-curriculum .results-reflect::before,

#igcse-achievers .results-reflect::before,

#ial-curriculum .results-reflect::before {

  content: "";

  position: absolute;

  left: 10px;

  top: 12px;

  bottom: 12px;

  width: 5px;

  border-radius: 3px;

  background: var(--accent-color);

}

/* Harmonize stacked image heights slightly taller on desktop */

.program-card .program-image.stack-vertical img {

  height: 260px;

}

@media (max-width: 1200px){

  .program-card .program-image.stack-vertical img { height: 230px; }

}

@media (max-width: 992px){

  .program-card .program-image.stack-vertical img { height: 200px; }

}

@media (max-width: 576px){

  .program-card .program-image.stack-vertical img { height: 160px; }

}

/* Mirror primary-foundations styles for Grades 3–5 section (unique id) */

#primary-foundations-3-5 .program-card { 

  background: #fff; 

  border: 1px solid rgba(0,0,0,0.07); 

  border-radius: 12px; 

  box-shadow: 0 4px 14px rgba(0,0,0,0.06); 

  padding: 28px; 

  margin-bottom: 30px;

}

#primary-foundations-3-5 .academic-program-grid { 

  display: grid; 

  grid-template-columns: 1.1fr 0.9fr; 

  gap: 16px 36px; 

  align-items: start; 

}

#primary-foundations-3-5 .program-image { 

  grid-column: 2 / 3; 

}

#primary-foundations-3-5 .program-title { 

  font-size: 2rem; 

  color: var(--primary-color); 

  border-bottom: 2px solid var(--accent-color); 

  padding-bottom: 12px; 

  margin-bottom: 18px; 

  font-weight: 700; 

}

#primary-foundations-3-5 .curriculum-list li,

#primary-foundations-3-5 .result-points li { 

  position: relative; 

  padding-left: 28px; 

  margin-bottom: 10px; 

  line-height: 1.6; 

}

#primary-foundations-3-5 .curriculum-list li::before { 

  content: "\25C6"; 

  position: absolute; 

  left: 0; 

  top: 50%; 

  transform: translateY(-50%); 

  color: var(--primary-color); 

  font-weight: 700; 

  font-size: 0.9rem; 

}

#primary-foundations-3-5 .result-points li::before { 

  content: "\2714"; 

  position: absolute; 

  left: 0; 

  top: 50%; 

  transform: translateY(-50%); 

  color: #28a745; 

  font-weight: 700; 

}

@media (max-width: 992px){

  #primary-foundations-3-5 .academic-program-grid { grid-template-columns: 1fr; gap: 20px; }

  #primary-foundations-3-5 .program-image { order: -1; }

}

/* Section spacing consistency */

#igcse-curriculum, #igcse-achievers, #ial-curriculum, #primary-foundations-3-5 { 

  padding-top: 10px; 

  padding-bottom: 10px; 

}

/* --- Adjust Grades 3–5 layout to match original reference --- */

#primary-foundations-3-5 .program-content {

  display: grid;

  grid-template-columns: 0.9fr 1.1fr; /* image left, text right */

  gap: 16px 36px;

  align-items: start;

}

#primary-foundations-3-5 .program-content .program-title { grid-column: 1 / -1; margin-bottom: 12px; }

#primary-foundations-3-5 .program-content .program-image { grid-column: 1 / 2; }

#primary-foundations-3-5 .program-content .curriculum-highlights { grid-column: 2 / 3; }

#primary-foundations-3-5 .program-content .program-description { grid-column: 1 / -1; }

#primary-foundations-3-5 .program-content .achievement-section,

#primary-foundations-3-5 .program-content .results-reflect,

#primary-foundations-3-5 .program-content .excellence-spotlight { grid-column: 1 / -1; }



@media (max-width: 992px) {

  #primary-foundations-3-5 .program-content { grid-template-columns: 1fr; gap: 20px; }

  #primary-foundations-3-5 .program-content .program-image { order: -1; }

  #primary-foundations-3-5 .program-content .curriculum-highlights,

  #primary-foundations-3-5 .program-content .program-description,

  #primary-foundations-3-5 .program-content .achievement-section,

  #primary-foundations-3-5 .program-content .results-reflect,

  #primary-foundations-3-5 .program-content .excellence-spotlight { grid-column: 1 / -1; }

}