/**
 * About page (/about) — clean layout, story image, certificates strip
 */

/* Story section — restore image + balanced grid */
main.pt-20 > section:nth-of-type(2) .grid.lg\:grid-cols-2 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2.5rem !important;
  align-items: center !important;
}

@media (min-width: 1024px) {
  main.pt-20 > section:nth-of-type(2) .grid.lg\:grid-cols-2 {
    grid-template-columns: 1fr 1fr !important;
  }
}

main.pt-20 > section:nth-of-type(2) img[src="/images/blog/aboutUS.jpg"] {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 22rem !important;
  object-fit: cover !important;
  border-radius: 0.75rem !important;
}

main.pt-20 > section:nth-of-type(2) .relative.rounded-lg.overflow-hidden.shadow-2xl {
  display: block !important;
  min-height: 22rem !important;
}

main.pt-20 > section:nth-of-type(2) .grid > .relative {
  display: block !important;
}

main.pt-20 > section:nth-of-type(2) .grid > div:last-child {
  max-width: none !important;
}

/* Vision / mission + certificates — plain muted bg (no homepage image bleed) */
main.pt-20 > section.py-24.bg-muted\/30 {
  background-image: none !important;
  background-color: hsl(var(--muted) / 0.3) !important;
}

main.pt-20 > section.py-24.bg-muted\/30::before {
  display: none !important;
  content: none !important;
}

/* Values cards — equal height */
main.pt-20 > section:nth-of-type(4) .grid > div {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Certificates — horizontal scroll strip */
main.pt-20 > section:nth-of-type(5) [data-eco-certs-strip],
main.pt-20 > section:nth-of-type(5) .eco-about-certs {
  display: flex !important;
  gap: 1.25rem !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0.5rem 0.25rem 1.25rem !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}

main.pt-20 > section:nth-of-type(5) .eco-about-certs::-webkit-scrollbar {
  height: 6px;
}

main.pt-20 > section:nth-of-type(5) .eco-about-certs::-webkit-scrollbar-thumb {
  background: rgba(10, 31, 68, 0.2);
  border-radius: 999px;
}

main.pt-20 > section:nth-of-type(5) .eco-cert-card {
  flex: 0 0 auto !important;
  width: min(14rem, 42vw) !important;
  scroll-snap-align: start !important;
  background: #fff !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 1rem !important;
  padding: 1.75rem 1.25rem !important;
  text-align: center !important;
  box-shadow: 0 4px 14px rgba(10, 31, 68, 0.08) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

main.pt-20 > section:nth-of-type(5) .eco-cert-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(10, 31, 68, 0.12) !important;
}

main.pt-20 > section:nth-of-type(5) .eco-cert-icon {
  width: 4.5rem !important;
  height: 4.5rem !important;
  margin: 0 auto 1rem !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(10, 31, 68, 0.08), rgba(201, 162, 39, 0.15)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.75rem !important;
}

main.pt-20 > section:nth-of-type(5) .eco-cert-name {
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #0a1f44 !important;
  line-height: 1.4 !important;
}

main.pt-20 > section:nth-of-type(5) .eco-cert-tag {
  display: inline-block !important;
  margin-top: 0.5rem !important;
  font-size: 0.72rem !important;
  color: #64748b !important;
}

/* Hide original cert grid after JS transforms */
main.pt-20 > section:nth-of-type(5) .grid.grid-cols-2.md\:grid-cols-4.eco-certs-replaced {
  display: none !important;
}

@media (min-width: 1024px) {
  main.pt-20 > section:nth-of-type(5) .eco-about-certs {
    justify-content: center !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }

  main.pt-20 > section:nth-of-type(5) .eco-cert-card {
    width: 11.5rem !important;
  }
}