/* Certification Section (matching Images 4 & 5 reference) */

.certification-section.page-section {
  position: relative;
  min-height: auto;
  padding-top: clamp(60px, 6vw, 90px);
  padding-bottom: clamp(60px, 6vw, 90px);
  background: var(--color-white);
  overflow: hidden;
}

/* Background lavender radial glow in top right behind certificate */
.certification-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(340px, 35vw, 550px);
  height: clamp(340px, 35vw, 550px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 226, 248, 0.95) 0%, rgba(236, 226, 248, 0.5) 45%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.certification-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 70px);
  align-items: center;
}

.certification-copy {
  max-width: 780px;
}

.certification-eyebrow {
  margin: 0;
  color: var(--color-purple);
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.certification-eyebrow span {
  display: inline-block;
  margin-inline: 4px;
}

.certification-copy .section-heading {
  margin-top: 18px;
}

.certification-copy .section-heading h2.certification-title {
  color: var(--color-orange);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 4.2vw, 3.8rem);
  font-weight: 700;
  line-height: 1.08;
  margin: 0;
}

.certification-copy .section-heading h3 {
  margin-top: 8px;
  margin-bottom: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
}

.certification-copy .section-heading > p {
  max-width: 580px;
  margin-top: 12px;
  margin-bottom: 0;
  color: rgba(0, 0, 0, 0.65);
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.5;
}

/* Pills on Desktop: 1 Single Row */
.certification-benefits {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  padding: 0;
  list-style: none;
}

.certification-benefits li {
  flex: 0 0 auto;
  min-width: auto;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(102, 64, 149, 0.22);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 3px 8px rgba(102, 64, 149, 0.1);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: clamp(0.82rem, 0.95vw, 0.92rem);
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.certification-benefits li:hover {
  transform: translateY(-2px);
  border-color: rgba(102, 64, 149, 0.35);
  box-shadow: 0 6px 14px rgba(102, 64, 149, 0.16);
}

/* Certificate Art */
.certificate-art {
  position: relative;
  z-index: 1;
  margin-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(102, 64, 149, 0.16), 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.certificate-art:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 22px 44px rgba(102, 64, 149, 0.22), 0 6px 16px rgba(0, 0, 0, 0.1);
}

.certificate-art img {
  display: block;
  width: clamp(260px, 25vw, 330px);
  height: auto;
  aspect-ratio: 321 / 436;
  object-fit: contain;
  border-radius: 14px;
}

/* Responsive: Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
  .certification-benefits {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .certification-benefits li {
    padding: 8px 14px;
    font-size: 0.85rem;
  }
}

/* Responsive: Mobile (max-width: 768px) - Matching Image 5 */
@media (max-width: 768px) {
  .certification-section.page-section {
    padding-top: 44px;
    padding-bottom: 50px;
  }

  .certification-section::before {
    top: -50px;
    right: -50px;
    width: 280px;
    height: 280px;
  }

  .certification-shell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
  }

  .certification-copy {
    max-width: 100%;
  }

  .certification-eyebrow {
    font-size: 0.95rem;
  }

  .certification-copy .section-heading {
    margin-top: 14px;
  }

  .certification-copy .section-heading h2.certification-title {
    font-size: clamp(2.4rem, 11vw, 3.2rem);
  }

  .certification-copy .section-heading h3 {
    font-size: clamp(1.25rem, 5.5vw, 1.55rem);
    margin-top: 6px;
  }

  .certification-copy .section-heading > p {
    font-size: 0.92rem;
    margin-top: 10px;
  }

  /* 2x2 Grid for Mobile Pills */
  .certification-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
    width: 100%;
  }

  .certification-benefits li {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 6px;
    font-size: clamp(0.72rem, 3.2vw, 0.84rem);
    line-height: 1.25;
    white-space: normal;
    text-align: center;
  }

  .certificate-art {
    width: min(100%, 280px);
    margin: 6px auto 0;
  }

  .certificate-art img {
    width: 100%;
    max-width: 280px;
  }
}

/* --- Bottom-corner festive decorations --------------------------------- */
/* Mirrors the FAQ decoration pattern (style.css:1857). The section is already
   the positioning container: .certification-section.page-section sets
   position:relative + overflow:hidden (certification.css:3), so no duplicate
   position/overflow rules are needed here.
   z-index:0 places this layer above the lavender ::before glow (also z-index:0
   but earlier in the tree) and below .certification-shell, which is already
   position:relative + z-index:1 (certification.css:26). That keeps the copy,
   the benefit pills and the certificate above the art without touching them.
   The cluster is anchored to the section's padding band, outside the shell's
   gutter, so it never reaches the copy column or the certificate. */
.certification-festive-decorations {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.certification-festive-decoration {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* Bottom-left Diwali setup: the rangoli is the floor the lamp stands on, so it
   is placed first and slightly lower/wider, and the lamp sits on top of it. */
.certification-festive-decoration--rangoli {
  left: clamp(-30px, -2.4vw, -8px);
  bottom: clamp(-40px, -3.2vw, -14px);
  width: clamp(168px, 17vw, 240px);
  opacity: 0.34;
}

.certification-festive-decoration--lamp {
  left: clamp(4px, 1vw, 22px);
  bottom: clamp(4px, 1vw, 18px);
  width: clamp(112px, 11vw, 158px);
  z-index: 1;
  filter: drop-shadow(0 6px 14px rgba(255, 150, 40, 0.22));
}

/* Bottom-right corner frame, deliberately cropped by the section edge so it
   reads as a corner accent rather than a floating sticker. */
.certification-festive-decoration--frame {
  right: clamp(-34px, -2.8vw, -12px);
  bottom: clamp(-30px, -2.4vw, -10px);
  width: clamp(124px, 13vw, 184px);
  opacity: 0.9;
}

@media (max-width: 1024px) {
  .certification-festive-decoration--rangoli {
    left: clamp(-26px, -2.6vw, -10px);
    bottom: clamp(-32px, -3vw, -12px);
    width: clamp(148px, 19vw, 196px);
    opacity: 0.3;
  }

  .certification-festive-decoration--lamp {
    left: 2px;
    bottom: 2px;
    width: clamp(98px, 13vw, 132px);
  }

  .certification-festive-decoration--frame {
    right: clamp(-28px, -3vw, -14px);
    bottom: clamp(-24px, -2.4vw, -10px);
    width: clamp(112px, 14.5vw, 152px);
  }
}

@media (max-width: 768px) {
  .certification-festive-decoration--rangoli {
    left: -18px;
    bottom: -20px;
    width: clamp(112px, 32vw, 148px);
    opacity: 0.26;
  }

  .certification-festive-decoration--lamp {
    left: -2px;
    bottom: -2px;
    width: clamp(76px, 22vw, 104px);
  }

  .certification-festive-decoration--frame {
    right: -18px;
    bottom: -16px;
    width: clamp(84px, 24vw, 112px);
    opacity: 0.82;
  }
}