/* ============================================================
   Company About hero — scoped overrides (v3.8.32).
   Builds on the homepage Suja_Hero_Swiper widget styles. All rules
   nest under .suja-ca-hero so the homepage hero is never affected.

   Goals (per brief):
     - single plain rounded image, no fixed homepage height
     - image height balanced to the (shorter) content column
     - 20–24px radius + subtle shadow (inherited, reinforced)
     - subtle fade + scale on the image, fade-up on content
     - slightly reduced bottom padding; compact, corporate feel
     - clean 2-col desktop → stacked mobile (content first)
   ============================================================ */

/* ---- Spacing + centering: INHERIT the homepage hero.
   The homepage .suja-hero-slide already has equal top/bottom padding
   (clamp(32px,4vh,56px)), a min-height, align-items:center, and the
   .suja-hero-inner grid centers both columns on the same axis. We do
   NOT override any of that — it gives the exact homepage-quality
   vertical centering and balanced spacing. Both columns center
   against each other automatically. ---- */
.suja-ca-hero .suja-hero-text  { align-self: center; }
.suja-ca-hero .suja-hero-visual { align-self: center; }

/* Hero height pinned to 500–550px (homepage uses up to 600px). Both
   the swiper container AND the slide carry a min-height in the
   homepage CSS (incl. a 600px rule at >=1440px), so both must be
   capped — otherwise the swiper stays 600px and leaves an empty band
   below the 500–550px slide. Higher specificity (3 / 2 classes) wins
   over the homepage media-query rules. */
.suja-ca-hero .suja-hero-swiper .swiper,
.suja-ca-hero .suja-hero-slide {
  min-height: clamp(500px, 56vh, 550px);
}

/* Wider gap between content and image columns (homepage uses 48px). */
.suja-ca-hero .suja-hero-inner {
  gap: clamp(56px, 6vw, 88px);
}

/* ---- Heading: one continuous paragraph. The homepage highlight
   span is display:block (forces a 2nd line). Here it flows inline so
   the gradient words read as part of the same sentence and wrap
   naturally. ---- */
.suja-ca-hero .suja-hero-highlight {
  display: inline;
}

/* ---- Right-side image: fills its column (no side whitespace),
   calm landscape ratio, premium blue shadow. Overrides the homepage
   fixed image height so the picture sizes naturally and balances the
   content. ---- */
.suja-ca-hero .suja-hero-image {
  height: auto;
  aspect-ratio: 16 / 9;          /* wider = shorter image */
  max-height: 380px;             /* was 460px — reduced height */
  width: 100%;                   /* fill the column — no side gaps */
  margin: 0;
  display: block;
  border-radius: 22px;
  object-fit: cover;
  object-position: center;
  /* Thin semi-transparent border — homepage glassmorphism family. */
  border: 1px solid rgba(255, 255, 255, 0.55);
  /* Directional shadow: weighted right + bottom, healthcare-blue
     tint. Large blur, low opacity = floating enterprise-SaaS depth. */
  box-shadow:
    22px 30px 66px -26px rgba(8, 145, 178, 0.26),
    10px 14px 32px -14px rgba(12, 30, 53, 0.15),
    0 0 0 1px rgba(8, 145, 178, 0.07);
  position: relative;
  z-index: 1;
}

/* Visual frame: transparent (no white kit card), subtle blue glow
   contained behind the image so it reads as a tint, not whitespace. */
.suja-ca-hero .suja-hero-visual {
  position: relative;
  background: transparent;
}
.suja-ca-hero .suja-hero-visual::before {
  content: "";
  position: absolute;
  inset: 6% 0 0 4%;
  background: radial-gradient(closest-side, rgba(8, 145, 178, 0.12), transparent 75%);
  border-radius: 24px;
  filter: blur(30px);
  z-index: 0;
  pointer-events: none;
}

/* ---- Animations ----
   Content fades up; image does a subtle fade + scale. Respect
   reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .suja-ca-hero .suja-hero-text {
    animation: suja-ca-fade-up 700ms cubic-bezier(.22,.61,.36,1) both;
  }
  .suja-ca-hero .suja-hero-image {
    animation: suja-ca-fade-scale 900ms cubic-bezier(.22,.61,.36,1) both;
    animation-delay: 120ms;
  }
}
@keyframes suja-ca-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes suja-ca-fade-scale {
  from { opacity: 0; transform: scale(0.965); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Responsive ----
   Tablet: tighten the gap. Mobile: content first, image below,
   shorter image so the fold isn't dominated by the picture. */
@media (max-width: 1024px) {
  .suja-ca-hero .suja-hero-inner {
    gap: 40px;
  }
}
@media (max-width: 860px) {
  /* Stacked: image follows content. Homepage stacked rules already
     give equal block spacing; we only adjust the image ratio. */
  .suja-ca-hero .suja-hero-image {
    aspect-ratio: 16 / 9;
    max-height: 360px;
  }
}
@media (max-width: 600px) {
  .suja-ca-hero .suja-hero-image {
    aspect-ratio: 4 / 3;
    max-height: 320px;
    border-radius: 18px;
  }
}