/* =============================================================
   WAY2AGRIBUSINESS — HOME HERO
   Typography uses global design tokens from layout.css.

   Font sizes:
   Hero title       → --text-hero
   Lead/body        → --text-body-lg
   Labels           → --text-label
   Buttons          → --text-button
   Captions         → --text-caption

   Font weights:
   400 → regular
   500 → medium
   600 → semibold
   700 → bold
   ============================================================= */


/* =============================================================
   HERO SECTION
   ============================================================= */

.home-hero {
  position: relative;

  width: 100%;

  background: var(--background);

  overflow: hidden;

  box-shadow: none !important;
}
.home-hero {
  background:
    radial-gradient(
      circle at 15% 45%,
      rgba(46, 125, 50, 0.07),
      transparent 45%
    ),
    #f5f3ea;
}


/* =============================================================
   HERO CONTAINER
   ============================================================= */

.home-hero__container {
  width: min(1240px, calc(100% - 64px));

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, 0.96fr)
    minmax(0, 1.04fr);

  align-items: center;

  column-gap: 58px;

  padding: 42px 0 48px;
}


/* =============================================================
   LEFT CONTENT
   ============================================================= */

.home-hero__content {
  position: relative;

  z-index: 2;

  width: 100%;
  max-width: 575px;

  transform: translateY(-2px);
}


/* =============================================================
   EYEBROW
   ============================================================= */

.home-hero__eyebrow {
  display: flex;

  align-items: center;

  gap: 13px;

  margin: 0 0 24px;

  color: var(--primary);

  font-family: var(--font-body);

  font-size: var(--text-label);
  font-weight: var(--weight-semibold);

  letter-spacing: 0.18em;

  line-height: 1.4;
}


.home-hero__eyebrow-rule {
  width: 42px;
  height: 2px;

  flex: 0 0 42px;

  background: var(--gold);

  border: 0;
}


/* =============================================================
   HERO TITLE
   ============================================================= */

.home-hero__title {
  width: 100%;

  margin: 0;

  color: var(--foreground);

  font-family: var(--font-heading);

  /*
   * Hero title uses the global display size.
   * This is intentionally separate from normal H1.
   */
  font-size: var(--text-h1);

  font-weight: var(--weight-semibold);

  letter-spacing: -0.055em;

  line-height: var(--leading-tight);
}


.home-hero__title span {
  color: var(--primary);
}


/*
   Keep the desktop hero title on one line.
*/

@media (min-width: 901px) {

  .home-hero__title {
    white-space: nowrap;
  }

}


/* =============================================================
   DESCRIPTION
   ============================================================= */

.home-hero__description {
  max-width: 505px;

  margin: 28px 0 0;

  color: var(--muted);

  font-family: var(--font-body);

  font-size: var(--text-body-lg);

  font-weight: var(--weight-regular);

  line-height: var(--leading-body);
}


/* =============================================================
   ACTIONS
   ============================================================= */

.home-hero__actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 31px;
}


/* =============================================================
   HERO BUTTON
   ============================================================= */

.home-hero .home-hero__button {
  min-height: 48px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 16px;

  padding: 0 22px !important;

  border: 1px solid var(--primary) !important;

  border-radius: 0px !important;

  font-family: var(--font-body) !important;

  font-size: var(--text-button) !important;

  font-weight: var(--weight-semibold) !important;

  line-height: 1;

  text-decoration: none !important;

  /*
   * Hero buttons intentionally have no animation,
   * transform, or transition.
   */
  transition: none !important;

  animation: none !important;

  box-shadow: none !important;
}


/* =============================================================
   PRIMARY BUTTON
   ============================================================= */

.home-hero a.home-hero__button.home-hero__button--primary {
  background: var(--primary) !important;

  color: var(--white) !important;

  border-color: var(--primary) !important;
}


/* =============================================================
   SECONDARY BUTTON
   ============================================================= */

.home-hero a.home-hero__button.home-hero__button--secondary {
  
   background: #eef4e9;
  border: 1px solid #1b5e20;
  color: #1b5e20;
}


/* =============================================================
   BUTTON ARROW
   ============================================================= */

.home-hero__button-arrow {
  display: inline-block;

  font-size: 18px;

  font-weight: var(--weight-regular);

  line-height: 1;
}


/* =============================================================
   BUTTON STATES
   No hover animation or movement.
   ============================================================= */

.home-hero__button:hover,
.home-hero__button:focus,
.home-hero__button:focus-visible,
.home-hero__button:active {
  transform: none !important;

  transition: none !important;

  animation: none !important;
}


/* =============================================================
   HERO META
   ============================================================= */

.home-hero__meta {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 37px;

  color: var(--muted);

  font-family: var(--font-body);

  font-size: var(--text-label);

  font-weight: var(--weight-semibold);

  letter-spacing: 0.19em;

  line-height: 1;
}


.home-hero__meta-dot {
  width: 4px;
  height: 4px;

  flex: 0 0 4px;

  border-radius: 50%;

  background: var(--gold);
}


/* =============================================================
   RIGHT VISUAL
   ============================================================= */

.home-hero__visual {
  position: relative;

  width: 100%;
}


/* =============================================================
   IMAGE FRAME
   One intentional shadow only.
   No pseudo-element.
   No decorative offset rectangle.
   ============================================================= */

.home-hero__image-frame {
  position: relative;

  width: 100%;
  height: 480px;

  overflow: hidden;

  border-radius: 4px;

  box-shadow:
    0 18px 40px rgba(20, 42, 24, 0.16);
}


/* =============================================================
   IMAGE
   ============================================================= */

.home-hero__image {
  position: relative;

  z-index: 1;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center center;

  opacity: 1 !important;

  filter: none !important;

  border: 0;

  border-radius: 0px;

  transform: none;

  transition: none !important;

  animation: none !important;
}


.home-hero__image:hover,
.home-hero__image:focus {
  opacity: 1 !important;

  filter: none !important;

  transform: none !important;

  transition: none !important;
}


/* =============================================================
   IMAGE CAPTION
   ============================================================= */

.home-hero__caption {
  position: absolute;

  right: 20px;
  bottom: 20px;

  z-index: 3;

  width: 216px;
  max-width: calc(100% - 40px);

  display: flex;

  align-items: flex-start;

  gap: 14px;

  padding: 15px 16px;

  background: var(--dark);

  border: 0;

  border-radius: 0px;

  box-shadow:
    0 8px 22px rgba(20, 42, 24, 0.14);
}


/* =============================================================
   CAPTION NUMBER
   ============================================================= */

.home-hero__caption-number {
  flex: 0 0 auto;

  color: #c99722;

  font-family: var(--font-heading);

  font-size: var(--text-caption);

  font-weight: var(--weight-semibold);

  letter-spacing: 0.08em;

  line-height: 1.4;
}


/* =============================================================
   CAPTION COPY
   ============================================================= */

.home-hero__caption-copy {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 4px;
}


.home-hero__caption-copy strong {
  color: var(--white);

  font-family: var(--font-heading);

  font-size: var(--text-caption);

  font-weight: var(--weight-semibold);

  line-height: 1.35;
}


.home-hero__caption-copy span {
  color: rgba(255, 255, 255, 0.62);

  font-family: var(--font-body);

  font-size: var(--text-caption);

  font-weight: var(--weight-regular);

  line-height: 1.45;
}


/* =============================================================
   LARGE DESKTOP
   ============================================================= */

@media (min-width: 1400px) {

  .home-hero__container {
    padding-top: 46px;

    padding-bottom: 52px;
  }


  .home-hero__image-frame {
    height: 500px;
  }

}


/* =============================================================
   LAPTOP
   ============================================================= */

@media (max-width: 1150px) {

  .home-hero__container {
    column-gap: 44px;
  }


  .home-hero__content {
    max-width: 555px;
  }


  .home-hero__description {
    max-width: 475px;
  }


  .home-hero__image-frame {
    height: 450px;
  }


  .home-hero__caption {
    right: 16px;

    bottom: 16px;

    width: 210px;

    padding: 14px 15px;
  }

}


/* =============================================================
   TABLET
   Aligned to the 900px hamburger breakpoint used site-wide.
   ============================================================= */

@media (max-width: 900px) {

  .home-hero__container {
    width: min(720px, calc(100% - 48px));

    grid-template-columns: 1fr;

    row-gap: 42px;

    padding: 54px 0 62px;
  }


  .home-hero__content {
    max-width: 680px;

    transform: none;
  }


  .home-hero__title {
    white-space: normal;

    font-size: var(--text-hero);

    line-height: var(--leading-tight);
  }


  .home-hero__description {
    max-width: 600px;
  }


  .home-hero__image-frame {
    height: 460px;
  }


  .home-hero__caption {
    right: 18px;

    bottom: 18px;
  }

  /* Buttons wrap instead of overflowing on narrow tablets */
  .home-hero__actions {
    row-gap: 10px;
  }

}


/* =============================================================
   MOBILE
   Aligned to the 640px breakpoint used site-wide (was 600px).
   ============================================================= */

@media (max-width: 640px) {

  .home-hero__container {
    width: calc(100% - 36px);

    row-gap: 36px;

    padding: 43px 0 50px;
  }


  /* ---------------------------------------------------------
     EYEBROW
     --------------------------------------------------------- */

  .home-hero__eyebrow {
    gap: 9px;

    margin-bottom: 19px;

    font-size: var(--text-label);

    letter-spacing: 0.14em;
  }


  .home-hero__eyebrow-rule {
    width: 29px;

    flex-basis: 29px;
  }


  /* ---------------------------------------------------------
     HERO TITLE
     --------------------------------------------------------- */

  .home-hero__title {
    white-space: normal;

    /*
     * Keep the global hero scale,
     * but allow mobile width to control wrapping.
     */
    font-size: var(--text-hero);

    font-weight: var(--weight-semibold);

    letter-spacing: -0.05em;

    line-height: var(--leading-tight);
  }


  /* ---------------------------------------------------------
     DESCRIPTION
     --------------------------------------------------------- */

  .home-hero__description {
    margin-top: 22px;

    font-size: var(--text-body);

    font-weight: var(--weight-regular);

    line-height: var(--leading-body);
  }


  /* ---------------------------------------------------------
     ACTIONS
     --------------------------------------------------------- */

  .home-hero__actions {
    align-items: stretch;

    flex-direction: column;

    gap: 9px;

    margin-top: 28px;
  }


  .home-hero .home-hero__button {
    width: 100%;

    min-height: 50px;

    font-size: var(--text-button) !important;

    font-weight: var(--weight-semibold) !important;
  }


  /* ---------------------------------------------------------
     META
     --------------------------------------------------------- */

  .home-hero__meta {
    margin-top: 31px;

    gap: 8px;

    font-size: var(--text-label);

    font-weight: var(--weight-semibold);

    letter-spacing: 0.14em;
  }


  /* ---------------------------------------------------------
     IMAGE
     --------------------------------------------------------- */

  .home-hero__image-frame {
    height: 360px;
  }


  /* ---------------------------------------------------------
     CAPTION
     --------------------------------------------------------- */

  .home-hero__caption {
    right: 12px;

    bottom: 12px;

    width: auto;

    max-width: min(218px, calc(100% - 24px));

    padding: 13px 14px;

    gap: 11px;
  }


  .home-hero__caption-number {
    font-size: var(--text-caption);

    font-weight: var(--weight-semibold);
  }


  .home-hero__caption-copy {
    gap: 3px;
  }


  .home-hero__caption-copy strong {
    font-size: var(--text-caption);

    font-weight: var(--weight-semibold);
  }


  .home-hero__caption-copy span {
    font-size: var(--text-caption);

    font-weight: var(--weight-regular);
  }

}


/* =============================================================
   SMALL MOBILE
   Aligned to the 400px breakpoint used site-wide (was 390px).
   ============================================================= */

@media (max-width: 400px) {

  .home-hero__container {
    width: calc(100% - 28px);

    row-gap: 32px;

    padding-top: 37px;
  }


  .home-hero__title {
    /*
     * Slightly reduce the global display size only
     * where the viewport becomes extremely narrow.
     */
    font-size: clamp(
      2.25rem,
      11.5vw,
      var(--text-hero)
    );

    font-weight: var(--weight-semibold);
  }


  .home-hero__description {
    font-size: var(--text-body-sm);

    font-weight: var(--weight-regular);
  }


  .home-hero__image-frame {
    height: 315px;
  }


  .home-hero__caption {
    right: 9px;

    bottom: 9px;

    max-width: min(200px, calc(100% - 18px));

    padding: 12px 13px;
  }

}


/* =============================================================
   VERY SHORT VIEWPORTS
   Prevents the caption card from covering most of a very
   short hero image on landscape phones.
   ============================================================= */

@media (max-height: 420px) and (max-width: 900px) {

  .home-hero__image-frame {
    height: 220px;
  }

}


/* =============================================================
   ACCESSIBILITY
   ============================================================= */

@media (prefers-reduced-motion: reduce) {

  .home-hero,
  .home-hero *,
  .home-hero__image,
  .home-hero__button {
    animation: none !important;

    transition: none !important;

    transform: none;
  }

}
/* =============================================================
   HERO CONTAINER
   Align columns to the top instead of centering, so the taller
   image visually leads and the content column reads as the
   lighter, shorter element beside it — intentional asymmetry.
   ============================================================= */



/* =============================================================
   IMAGE FRAME
   Taller than the content column on purpose — same width,
   more height, so the image carries more visual weight.
   ============================================================= */

/* =============================================================
   HERO CONTAINER
   Stretch both columns to the same height (driven by the
   image frame), so the content column has a full-height box
   to center itself within.
   ============================================================= */

.home-hero__container {
  align-items: stretch;
}


/* =============================================================
   LEFT CONTENT
   Center vertically within its own column height, guaranteeing
   equal gap above the title and below the buttons — regardless
   of how tall the text block happens to be.
   ============================================================= */

.home-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  height: 100%;

  transform: none;
}
/* =============================================================
   LEFT CONTENT
   Match the image frame's height directly (480px) instead of
   relying on percentage-height / stretch, which can silently
   fail to resolve in a grid. Centering inside a guaranteed
   min-height forces the top/bottom gaps to be mathematically
   equal.
   ============================================================= */

.home-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-height: 480px;

  transform: none;
}