/* Afric Business — final hero/layout correction 2026-08-28 */

/* The floating hero information card must stay fully inside the image column.
   Previous negative-left positioning was being clipped by the luxury overflow
   layer, which cut off the first part of the text. */
.hero .hero-visual{
  position:relative;
  min-width:0;
}
.hero .hero-card{
  left:24px !important;
  right:auto !important;
  bottom:24px !important;
  width:min(340px,calc(100% - 48px)) !important;
  max-width:calc(100% - 48px) !important;
  margin:0 !important;
  z-index:4;
}

/* Keep the two desktop columns independent so neither can paint over the other. */
@media (min-width:1041px){
  .hero .hero-grid{
    grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr) !important;
    gap:64px !important;
    align-items:center;
  }
  .hero .hero-grid > div{
    min-width:0;
    max-width:100%;
  }
  .hero .hero-grid > div:first-child{
    position:relative;
    z-index:3;
  }
  .hero .hero-visual{
    margin-right:0 !important;
    z-index:1;
  }
  .hero .hero-image{
    display:block;
    width:100%;
    min-height:460px;
    max-height:560px;
    object-fit:cover;
  }
  .hero h1{
    font-size:clamp(3rem,4.35vw,4.15rem);
    max-width:730px;
  }
}

/* Laptop/tablet: stack before the columns become cramped. */
@media (max-width:1040px){
  .hero .hero-grid{
    grid-template-columns:1fr !important;
    gap:34px !important;
  }
  .hero .hero-visual{
    width:100%;
    max-width:760px;
    margin:0 auto !important;
  }
  .hero .hero-card{
    left:20px !important;
    bottom:20px !important;
    width:min(390px,calc(100% - 40px)) !important;
    max-width:calc(100% - 40px) !important;
  }
}

/* Mobile: no floating overlay at all. The text card becomes normal content
   beneath the image so it cannot cover or clip anything. */
@media (max-width:700px){
  .hero .hero-visual{
    overflow:visible !important;
  }
  .hero .hero-image{
    display:block;
    width:100%;
    min-height:0 !important;
    height:auto;
    aspect-ratio:16/10;
    object-fit:cover;
  }
  .hero .hero-card{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:none !important;
    margin:12px 0 0 !important;
  }
}

/* Safety: long translated text should wrap instead of escaping columns. */
.hero-card strong,.hero-card p,.hero h1,.hero-lead{
  max-width:100%;
  overflow-wrap:break-word;
  word-break:normal;
}