/* default grid for rows 1-3 */
.lp-sec4-course-content{
display: flex;
flex-grow: 1;
width:99%;
flex-direction: column;
align-items: flex-start; /* Vertically centers content within each section */
justify-content: flex-start;
margin-left:4px;
margin-top:5vh;
border: 1px solid var(--lighter-gray);
}

.lp-sec4-title {
color: var(--strong-blue); 
font-size: 24px; 
font-weight:var(--font-weight-bold); 
font-family: var(--font-family-montserrat);
}

.lp-sec4-length-expand {
display: flex; /* Hide all items initially */
width:100%;
align-items: center; /* Vertically centers content within each section */
justify-content: space-between;
margin-bottom:var(--margin-xxs);
line-height: 1.6;
}

.lp-sec4-hrs {
color: var(--pure-black-less-opacity); 
font-size: var(--font-size-h6); 
font-weight:var(--font-weight-medium); 
font-family: var(--font-family-base);
}

.lp-sec4-length-expand a {
color: var(--strong-blue); 
text-decoration:none;
font-size: var(--font-size-h6); 
font-weight:var(--font-weight-medium);
font-family: var(--font-family-base);
transition: background-color 0.3s, padding 0.3s;
}

.lp-sec4-length-expand a:hover {
background-color: var(--gmail-next-more-light-blue);
text-decoration: underline;
border-radius: var(--margin-xxs);
padding: var(--margin-xxs);
}

.lp-sec4-chapter-row-items {
display: flex; /* Hide all items initially */
width:100%;
height:var(--margin-xxl);
align-items: center; /* Vertically centers content within each section */
justify-content: flex-start;
border: 1px solid var(--lighter-gray);
background-color:var(--vlighter-gray);
border-radius: var(--margin-xxs);
}

.lp-sec4-chapter-row-items-p1{
display: flex;
width:70%;
align-items: flex-start; /* Vertically centers content within each section */
justify-content: flex-start;
padding-left:var(--margin-sm);
gap:var(--margin-xs);
}

.lp-sec4-chapter-row-items-p2{
display: flex;
width:30%;
align-items: flex-start; /* Vertically centers content within each section */
justify-content: flex-end;
padding-right:var(--margin-md);
}

.lp-sec4-chapter-row-items a { 
color: var(--pure-black); 
text-decoration: none;
font-size: var(--font-size-h6); 
font-weight:var(--font-weight-semibold); 
font-family: var(--font-family-montserrat);
}

.lp-sec4-chapter-hrmin{
color: var(--pure-black);
font-size: var(--font-size-h6); 	
font-family: var(--font-family-montserrat);
font-weight:var(--font-weight-medium);
}

.topics-visibilty{
display:block;
width:100%;
}

.lp-sec4-topics-row-items {
display: flex; /* Hide all items initially */
width:100%;
height:calc(var(--padding-xl) + var(--padding-xxs));
align-items: center; /* Vertically centers content within each section */
justify-content: flex-start;
background-color:var(--off-white);
}

.lp-sec4-topics-row-items-p1{
display:flex;
width:70%;
align-items: center; /* Vertically centers content within each section */
justify-content:flex-start;
padding-left:var(--margin-md);
gap:var(--margin-md);
}

.lp-sec4-topics-row-items-p2{
display: flex;
width:30%;
align-items: center; /* Vertically centers content within each section */
justify-content:flex-end;
padding-right:var(--margin-md);
gap:var(--margin-md);
}

.lp-sec4-topics-row-items a {
color: var(--strong-blue); 
text-decoration:underline;
font-size: var(--font-size-small); 
font-weight:var(--font-weight-medium); 
font-family: var(--font-family-base);
transition: background-color 0.3s, padding 0.3s;
}

.lp-sec4-topics-row-items a:hover {
background-color: var(--gmail-next-more-light-blue);
text-decoration: underline; /* Underline on hover for visual feedback */
border-radius: var(--margin-xxs);
padding:var(--margin-xxs);
}

.lp-sec4-topic-min{
color: var(--pure-black-opacity);
font-family: var(--font-branding);
font-weight:var(--font-weight-semibold);
}

.topics-visibilty, .topics-msg-visibility {
transition: height 0.5s ease;
overflow: hidden;
}

.lp-sec4-hidden {
display: none;
}

.lp-sec4-visible {
display: block; /* or flex, depending on layout */
}

.lp-sec4-topics-msg{
display: flex; /* Hide all items initially */
width:70%;
align-items: flex-start; /* Vertically centers content within each section */
justify-content: flex-start;
padding-left:calc(var(--padding-xxl) + var(--padding-sm));
}

.lp-sec4-topics-info{
color: var(--pure-black);
font-size: var(--font-size-small); 
font-family: var(--font-family-base);
font-weight:var(--font-weight-normal);
}

.lp-sec4-resources-msg{
color: var(--pure-black);
font-family: var(--font-family-playfair);
font-weight:var(--font-weight-normal);
}

.toggle-icon {
transition: transform 0.2s ease;
display: inline-block;  /* Ensure it's suitable for transformation */
transform-origin: calc(50% + var(--margin-xs)) center;	
}

.toggle-icon.rotate {
transform: rotate(180deg);  /* Rotate icon 180 degrees */
}

/* === Responsive Grid: Large Desktops (min-width: 1920px) === */
@media (min-width: 1920px) {
    .lp-sec4-title {
      font-size: 26px;
    }
      
    .lp-sec4-hrs,
    .lp-sec4-length-expand a,
    .lp-sec4-chapter-row-items a,
    .lp-sec4-chapter-hrmin,
    .lp-sec4-topics-row-items a,
    .lp-sec4-topics-row-items span,
    .lp-sec4-topic-min,
    .lp-sec4-topics-info,
    .lp-sec4-resources-msg {
      font-size: 20px;
    }
  
    .lp-sec4-topics-row-items-p1,
    .lp-sec4-topics-row-items-p2,
    .lp-sec4-chapter-row-items-p1,
    .lp-sec4-chapter-row-items-p2 {
      gap: 20px;
    }
  }

/* === Responsive Grid: Standard Laptops (max-width: 1280px) === */
@media (max-width: 1280px) {
    .lp-sec4-title {
      font-size: 22px;
    }
  
    .lp-sec4-course-content{
      width:96%;
      }

    .lp-sec4-hrs,
    .lp-sec4-length-expand a,
    .lp-sec4-chapter-row-items a,
    .lp-sec4-chapter-hrmin,
    .lp-sec4-topics-row-items a,
    .lp-sec4-topics-row-items span,
    .lp-sec4-topic-min,
    .lp-sec4-topics-info,
    .lp-sec4-resources-msg {
      font-size: 15px;
    }
  
    .lp-sec4-course-content {
      padding: 12px;
    }
  
    .lp-sec4-topics-row-items-p1,
    .lp-sec4-topics-row-items-p2,
    .lp-sec4-chapter-row-items-p1,
    .lp-sec4-chapter-row-items-p2 {
      gap: 12px;
    }
  }

/* === Responsive Grid: Small Laptops (max-width: 1024px) === */
@media (max-width: 1024px) {
    .lp-sec4-title {
      font-size: 20px;
    }

    .lp-sec4-course-content{
      width:96%;
      }

    .lp-sec4-chapter-row-items {
      width:97%;
     }
  
      .lp-sec4-topics-row-items {
        width:97%;
      }

    .lp-sec4-hrs,
    .lp-sec4-length-expand a,
    .lp-sec4-chapter-row-items a,
    .lp-sec4-chapter-hrmin,
    .lp-sec4-topics-row-items a,
    .lp-sec4-topics-row-items span,
    .lp-sec4-topic-min,
    .lp-sec4-topics-info,
    .lp-sec4-resources-msg {
      font-size: 14px;
    }
  
    .lp-sec4-course-content {
      margin-top: 4vh;
      padding: 10px;
    }
  
    .lp-sec4-topics-row-items,
    .lp-sec4-chapter-row-items {
      height: auto;
      padding: 10px;
    }
    
  }