/* ==================================================
   Digital Marketing for East African Businesses Styles
================================================== */

/* =========================
   HERO SECTION - 
========================= */
.hero {
  text-align: center;
  padding: 6.25rem 1.25rem; /* 100px 20px */
  color: var(--light);
  border-radius: 0 0 12px 12px;

  /* Overlay + Background Image */
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
    url(/shared/images/east-african-businesses-and-digital-marketing.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
  

.hero h1 {
  font-size: clamp(2rem, 5vw, 3rem); /* 32px → 48px */
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--accent-blue-light);
}

.hero p {
  font-size: clamp(1rem, 2vw, 1.25rem); /* 16px → 20px */
  line-height: 1.6;
  max-width: 50rem; /* 800px */
  margin: 1rem auto 0;
  color: var(--light);
  
}

/* =========================
   ARTICLE CONTAINER
========================= */
.article-container {
  max-width: 50rem; /* 800px */
  margin: 3.75rem auto; /* 60px */
  padding: 0 1.25rem; /* 20px */
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--primary);
  background-color: var(--light);
  border-radius: 12px;
}

.article-container h2,
.article-container h3 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 600;
  color: var(--primary);
  margin: 2.5rem 0 1.25rem;
  font-family: 'Montserrat', sans-serif;
}

.article-container p {
  margin-bottom: 1.25rem;
}

.article-container ul {
  margin: 1.25rem 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.article-container ul li {
  margin-bottom: 0.75rem;
}

/* Links */
.article-container a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s ease;
}

.article-container a:hover {
  color: var(--primary);
}

/* =========================
   CALL-TO-ACTION BOX
========================= */
.article-cta {
  background-color: var(--neutral);
  border-left: 5px solid var(--accent);
  padding: 1.875rem; /* 30px */
  margin: 3.125rem 0; /* 50px */
  border-radius: 8px;
  font-weight: 600;
  color: var(--primary);
  text-align: center;
}

.article-cta a.cta-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem; /* 12px 24px */
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  background-color: var(--dark);
  color: var(--light);
  transition: background-color 0.25s ease;
}

.article-cta a.cta-btn:hover {
  background-color: var(--accent);
}

/* =========================
   RESPONSIVE DESIGN
========================= */
@media (max-width: 768px) {
  .article-container {
    margin: 1.875rem auto; /* 30px */
    padding: 0 0.9375rem; /* 15px */
  }
}