.cpe-interests-sidebar {
    padding-top: 2rem;
    margin: 0 auto;
}
.cpe-interests-sidebar h3 {
    border-top: 5px solid #026894;
}
@media (min-width: 1400px) {
    .cpe-interests-sidebar a {
        width: 100%;
        text-align: center;
    }
}
@media (max-width: 1399px) {
    .cpe-interests-sidebar h3, h4 {
        text-align: center;
        border-top: none;
        padding-bottom: 1rem;
    }
}
@media (max-width: 1399px) {
    .cpe-interests-sidebar {
         padding-top: 0;
    }
}
.cpe-interests-section {
   /* color: white; For the title on dark */
   padding-top: 2em;
   max-width: calc(var(--cwf-contain-max-width, 1400px) - 120px);
   margin: 0 auto;
   display: grid;
   /* Desktop layout: title and controls on top row, grid below */
   grid-template-columns: 1fr auto;
   grid-template-areas:
      "title controls"
      "grid  grid";
   align-items: center;
   gap: 0 2rem; /* Row gap and column gap */
}
.page-title {
   grid-area: title; /* Assign to grid area */
   font-size: 1.611111rem;
   margin: 0;
   margin-bottom: 1rem;
}
/* --- Section controls container --- */
.section-controls {
   grid-area: controls; /* Assign to grid area */
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
   justify-content: center;
   margin-bottom: 1rem;
}
.control-button {
   display: inline-block;
}
#cpe-interests-grid-container {
   grid-area: grid; /* Assign to grid area */
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 250px));
   gap: 2rem;
   justify-content: center;
   width: 100%; /* Ensure it fills its grid area */
   padding: 0.5em 2em 2em 2em;
   background-size: cover;
   background-repeat: repeat;
   background-position: top;
}
/* --- Media Query for mobile layout reordering --- */
@media (max-width: 768px) {
            .cpe-interests-section {
                /* Mobile layout: stack elements vertically in a new order */
                grid-template-columns: 1fr; /* Single column */
                grid-template-areas:
                    "title"
                    "grid"
                    "controls";
                justify-items: center; /* Center the controls on mobile */
            }
            .page-title {
                text-align: center;
            }
            .section-controls {
                margin-top: 1rem; /* Add space above the buttons when they are at the bottom */
            }
            #cpe-interests-grid-container {
                 background-size: auto;
                 padding-bottom: 0;
            }
}
@media (max-width: 653px) {
            #cpe-interests-grid-container {
                 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            }
}
@media (max-width: 480px) {
            .page-title {
                 display: inline-grid;
            }
            #cpe-interests-grid-container {
                 padding: 0;
            }
            .section-controls a {
                 width: 100%;
                 text-align: center;}
}
.cpe-interests-card {
   width: auto;
   height: 500px;
   background-color: #ffffff;
   border: 1px solid #5b5b5b; /* Darker border for light bg */
   border-radius: 0.5rem;
   box-shadow: 0 2px 5px rgba(0,0,0,0.05);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: transform 0.3s ease;
   position: relative; /* This is the key for absolute positioning inside the card */
}
.cpe-interests-card:is(:hover, :focus, :active) {
   -webkit-transform: translateY(-5px);
   transform: translateY(-5px);
   -webkit-box-shadow: 0 2px 3px 0 rgba(60, 64, 67, .3), 0 6px 10px 4px rgba(60, 64, 67, .15);
   box-shadow: 0 2px 3px 0 rgba(60, 64, 67, .3), 0 6px 10px 4px rgba(60, 64, 67, .15);
   transition: box-shadow .3s ease-in-out, transform .15s ease-in-out, background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in-out, -webkit-box-shadow .3s ease-in-out, -webkit-transform .15s ease-in-out;
}
/* The card's image container */
.cpe-interests-card-image-container {
   height: 66.67%;
   overflow: hidden;
}
/* The card's image container's image */
.cpe-interests-card-image-container img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
}
.cpe-interests-card:is(:hover, :focus, :active) .cpe-interests-card-image-container img {
   transform: scale(1.05);
}
/* The text content area */
.cpe-interests-card-content {
   flex-grow: 1; 
   padding: 1rem 1rem 3.5rem 1rem; /* Added bottom padding to make space for the button */
   display: flex;
   flex-direction: column;
}
.cpe-interests-card-title {
   margin: 0 0 0.5rem 0;
   font-size: 1.25rem;
   font-weight: 600;
   color: #111827;
}
.cpe-interests-card-text {
   margin: 0;
   font-size: 0.9rem;
   color: #4b5563;
   line-height: 1.5;
}
 /* shared button styles */
    .learn-more {
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      display: inline-flex;
      align-items: center;
      overflow: visible;
      text-decoration: none;
      font-weight: bold;
    }
    .learn-more::before {
      content: "";
      position: absolute;
      top: 0; bottom: 0; right: 0;
      width: 2rem;
      border-radius: 1rem;
      transition: width 0.2s ease;
      z-index: 0;
    }
    .learn-more:is(:hover, :focus, :active)::before {
      width: 100%;
    }
    .learn-more .text {
      position: relative;
      text-decoration: underline;
      z-index: 1;
      padding-left: 1em;           /* ensures full coverage */
      transition: color 0.2s ease;
    }
    .learn-more:is(:hover, :focus, :active) .text {
      text-decoration: none;
      color: #fff;                 /* default white-on-hover for blue */
    }
    .learn-more .circle {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      margin-left: 0.5rem;
    }
    .learn-more .circle i {
      font-size: 1.25rem;
      pointer-events: none;
    }
    /* blue variant */
    .learn-more.blue {
      color: var(--cwf-link--color);
    } /* text initially black */
    .learn-more.blue::before {
      background: #026894;
    }
    .learn-more.blue .circle i {
      color: #fff;
    }