/* ==========================================================================
   Home Page — Edge Pharma
   Hero content design now lives in the shared css/components/hero.css
   (reused by Products and any other page with a Hero carousel). This
   file covers the homepage's remaining sections.
   ========================================================================== */

/* ==========================================================================
   About Edge Pharma
   Introduces the company and builds trust immediately after the Hero.
   ========================================================================== */

.about {
  background-color: var(--color-white);
  padding-block: var(--space-12); /* 80px mobile base */
}

/* ---------------------------------------------------------------------
   Grid — mobile-first (stacked: text, CTA, then image, in DOM order)
   --------------------------------------------------------------------- */

.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-8);
}

.about__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ---------------------------------------------------------------------
   Label + Heading
   --------------------------------------------------------------------- */

.about__header {
  display: flex;
  flex-direction: column;
}

.about__label {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.about__divider {
  display: block;
  width: 48px;
  height: 3px;
  margin-top: var(--space-3);
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

.about__heading {
  max-width: 560px;
  margin-top: var(--space-4);
  font-family: var(--font-family-heading);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  background: var(--gradient-h2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem); /* 28px → 40px */
}

/* ---------------------------------------------------------------------
   Description
   --------------------------------------------------------------------- */

.about__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 600px;
  margin-top: var(--space-6);
}

.about__paragraph {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem); /* 16px → 18px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------------------
   CTA — pill button, full width on mobile
   --------------------------------------------------------------------- */

.about__cta {
  width: 100%;
  height: 52px;
  margin-top: var(--space-7);
}

/* ---------------------------------------------------------------------
   Image + decorative shapes
   --------------------------------------------------------------------- */

.about__media {
  position: relative;
  height: 420px;
}

.about__shape {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.about__shape--circle {
  top: -15%;
  left: -18%;
  width: 65%;
  height: 65%;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, rgba(15, 94, 168, 0.2), rgba(15, 94, 168, 0) 70%);
  filter: blur(30px);
}

.about__shape--dots {
  top: -8%;
  right: -6%;
  width: 110px;
  height: 110px;
  background-image: radial-gradient(var(--color-primary) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: 0.25;
}

.about__shape--accent {
  bottom: -6%;
  right: 10%;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background-color: var(--color-secondary);
}

.about__image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sharp);
  object-fit: cover;
  object-position: center 20%;
}

/* ---------------------------------------------------------------------
   Scroll animation — fade up, staggered 80ms per element
   --------------------------------------------------------------------- */

.about__label,
.about__divider,
.about__heading,
.about__paragraph,
.about__cta,
.about__media {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-default), transform 600ms var(--ease-default);
}

.about.is-visible .about__label,
.about.is-visible .about__divider { transition-delay: 0ms; }
.about.is-visible .about__heading { transition-delay: 80ms; }
.about.is-visible .about__paragraph { transition-delay: 160ms; }
.about.is-visible .about__cta { transition-delay: 240ms; }
.about.is-visible .about__media { transition-delay: 320ms; }

.about.is-visible .about__label,
.about.is-visible .about__divider,
.about.is-visible .about__heading,
.about.is-visible .about__paragraph,
.about.is-visible .about__cta,
.about.is-visible .about__media {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .about__label,
  .about__divider,
  .about__heading,
  .about__paragraph,
  .about__cta,
  .about__media {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------
   Tablet (≥768px) — two columns, reduced gap
   --------------------------------------------------------------------- */

@media (min-width: 768px) {
  .about__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7); /* 32px, reduced from desktop's 80px */
  }

  .about__media {
    height: 100%;
    min-height: 460px;
  }

  .about__cta {
    width: auto;
  }
}

/* ---------------------------------------------------------------------
   Desktop (≥992px) — 55% / 45% split, 120px vertical padding, 80px gap
   --------------------------------------------------------------------- */

@media (min-width: 992px) {
  .about {
    padding-block: var(--space-14); /* 120px */
  }

  .about__grid {
    /* fr units (not %) so the gap doesn't push the total past 100% */
    grid-template-columns: 55fr 45fr;
    gap: var(--space-12); /* 80px */
  }

  .about__media {
    min-height: 480px;
  }
}

/* ==========================================================================
   Company Video — full visual design now lives in the shared
   css/components/video-section.css (reused as-is on the About page).
   ========================================================================== */

/* ==========================================================================
   Partners Marquee — full visual design now lives in the shared
   css/components/partners.css (reused as-is on the About page).
   ========================================================================== */

/* ==========================================================================
   Latest News
   Label/heading/description (centered), then a responsive grid of editorial
   news cards (left-aligned) with hover lift, image zoom, and an animated
   "Read More" link.
   ========================================================================== */

.news {
  background-color: #f8fbff;
  padding-block: var(--space-12); /* 80px mobile base */
}

.news__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.news__label {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.news__divider {
  display: block;
  width: 48px;
  height: 3px;
  margin-top: var(--space-3);
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

.news__heading {
  max-width: 760px;
  margin-top: var(--space-4);
  font-family: var(--font-family-heading);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  background: var(--gradient-h2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem); /* 28px → 42px */
}

.news__description {
  max-width: 700px;
  margin-top: var(--space-5);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem); /* 16px → 18px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------------------
   Grid — mobile-first (1 → 2 → 3 columns)
   --------------------------------------------------------------------- */

.news__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7); /* 32px */
  width: 100%;
  margin-top: var(--space-10);
  text-align: left;
}

@media (min-width: 768px) {
  .news__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .news__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------------------------------------------------------------------
   Card — full visual design now lives in the shared
   css/components/news-card.css (reused by the News listing page's grid
   and the Article page's Related News, in addition to this section).
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   Scroll animation — fade up, staggered 100ms per element
   --------------------------------------------------------------------- */

.news__label,
.news__divider,
.news__heading,
.news__description,
.news-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-default), transform 600ms var(--ease-default);
}

.news.is-visible .news__label,
.news.is-visible .news__divider { transition-delay: 0ms; }
.news.is-visible .news__heading { transition-delay: 100ms; }
.news.is-visible .news__description { transition-delay: 200ms; }
.news.is-visible .news-card:nth-child(1) { transition-delay: 300ms; }
.news.is-visible .news-card:nth-child(2) { transition-delay: 400ms; }
.news.is-visible .news-card:nth-child(3) { transition-delay: 500ms; }

.news.is-visible .news__label,
.news.is-visible .news__divider,
.news.is-visible .news__heading,
.news.is-visible .news__description,
.news.is-visible .news-card {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .news__label,
  .news__divider,
  .news__heading,
  .news__description,
  .news-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------
   Desktop (≥992px) — full section padding
   --------------------------------------------------------------------- */

@media (min-width: 992px) {
  .news {
    padding-block: var(--space-14); /* 120px */
  }
}