/* ——— Base resets (kept minimal) ——— */
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:#f7f9fc;color:#333}
a{color:#007bff;text-decoration:none}
a:hover{text-decoration:underline}

/* ——— Hero banner ——— */
.hero-main-content{max-width:1200px;margin:0 auto;padding:0 24px}
.wc-hero-banner{position:relative;overflow:hidden;border-radius:12px;margin:24px 0;height:380px}
.wc-hero-banner .hero-image img{width:100%;height:100%;object-fit:cover}
.wc-hero-banner .hero-content{position:absolute;top:50%;left:5%;transform:translateY(-50%);color:#fff;max-width:500px}
.wc-hero-banner .pre-title{letter-spacing:.05em;text-transform:uppercase;font-size:.9rem;margin-bottom:6px}
.wc-hero-banner .title{font-size:2.3rem;margin:.4rem 0 1rem;font-weight:700}
.wc-hero-banner .description p{margin:0 0 1.2rem;font-size:1.05rem;line-height:1.5}
.btn-alternate a{display:inline-block;padding:12px 24px;border-radius:4px;background:#fff;color:#002a4d;font-weight:600}
.btn-alternate a:hover{background:#e5e5e5}

/* ——— academy‑specific styles (all start with .academy‑) ——— */
.academy-banner {
  width: 100%;
  padding: 0 1.6rem;
  box-sizing: border-box;
}

.academy-banner-inner {
  height: 250px;
  background: #00c4cc url("https://via.placeholder.com/1600x400?text=WellCare+Medical+academy") center/cover no-repeat;
  position: relative;
}

/* Responsive padding – same as .wc-container */
@media only screen and (min-width: 768px) and (max-width: 864px) {
  .academy-banner { padding: 0 3.2rem; }
}
@media only screen and (min-width: 865px) and (max-width: 1200px) {
  .academy-banner { padding: 0 4.8rem; }
}
@media only screen and (min-width: 1024px) {
  .academy-banner {
    padding: 0 6.4rem;
    max-width: 144rem;
    margin: 0 auto;
  }
}
.academy-banner-text {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  font-size: clamp(1.5rem, 3vw, 4rem); /* min 1.5rem, ideal 3vw, max 4rem */
  font-weight: 700;
  color: #fff;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  max-width: 90%;
  line-height: 1.2;
}


.academy-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 40px;
  padding-bottom: 40px;
  box-sizing: border-box;
}

/* Responsive padding similar to wc-container */
@media (min-width: 768px) {
  .academy-container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 1200px) {
  .academy-container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.academy-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 30px;
  align-items: center;
}


.academy-filter-bar select,
.academy-filter-bar input {
  padding: 10px 14px;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 5px;
  min-width: 200px;
  flex: 1;
}

@media (max-width: 600px) {
  .academy-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
}

.academy-grid{display:grid;gap:30px;grid-template-columns:repeat(2,1fr)}
.academy-card{
  background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 4px 15px rgba(0,0,0,.1);
  transition:.3s;opacity:0;transform:translateY(20px);
  animation:academyFadeIn .8s forwards;
}
.academy-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,.15)}
@keyframes academyFadeIn{to{opacity:1;transform:translateY(0)}}
.academy-image{width:100%;height:200px;object-fit:cover}
.academy-content{padding:20px}
.academy-date{font-size:.9em;color:#777;margin-bottom:8px}
.academy-title{font-size:1.3em;color:#002a4d;margin:0 0 10px}
.academy-summary{font-size:1em;color:#555}
.academy-pagination{text-align:center;margin-top:40px}
.academy-pagination button{
  margin:0 5px;padding:10px 16px;border:none;border-radius:5px;background:#002a4d;color:#fff;
  font-size:1em;cursor:pointer;transition:.3s;
}
.academy-pagination button.disabled{background:#aaa;cursor:not-allowed}

/* Responsive */
@media(max-width:768px){.academy-grid{grid-template-columns:1fr}}
@media(max-width:600px){.academy-banner-text{font-size:1.8em}}


/* ===== Page Wrapper ===== */
.wc-academy {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ===== Image Slider (Gallery) ===== */
.wc-gallery {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  border-radius: 6px;
}
.wc-gallery img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
.wc-gallery img.active {
  opacity: 1;
}
.wc-gallery button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 10;
}
.wc-gallery button:hover {
  background: rgba(0, 0, 0, 0.7);
}
.wc-gallery .prev {
  left: 12px;
}
.wc-gallery .next {
  right: 12px;
}

/* ===== Article Meta & Typography ===== */
.wc-academy__meta {
  margin: 16px 0 8px 0;
  font-size: 1.6rem;
  color: #777;
}
.wc-academy__title {
  font-size: 2rem;
  margin: 0 0 12px 0;
  font-weight: 700;
  color: #004880;
}
.wc-academy__subtitle {
  font-size: 1.2rem;
  margin: 0 0 20px 0;
  color: #444;
}
.wc-academy__body p {
  margin-bottom: 1.2rem;
}

.wc-academy__body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto; /* Optional: adds spacing and centers the image */
  border-radius: 6px;   /* Optional: rounded corners */
}


.wc-callout {
  background: #e9f0ff;
  border-left: 4px solid #00c4cc;
  padding: 16px;
  border-radius: 4px;
  margin: 24px 0;
  color: #003b4f;
}

/* ===== Share Buttons ===== */
.wc-share {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}
.wc-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #00c4cc;
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
  transition: background 0.3s;
}
.wc-share a:hover {
  background: #009ba0;
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
  .wc-gallery {
    height: 200px;
  }
  .wc-academy__title {
    font-size: 1.5rem;
  }
}