/* ===== Vision – aliniere dreapta + CAPS pe textul din dreapta ===== */
.vision-section{ background:#fff; color:#000; min-height:100svh; display:block; }

.vision-grid{
  width:min(1600px,94vw);
  margin:0 auto;
  min-height:100svh;
  display:grid;
  grid-template-columns: clamp(90px,18vw,200px) minmax(0,1fr);
  column-gap: clamp(16px, 3.5vw, 56px);
  padding:
    calc(var(--navH,64px) + clamp(32px,5vw,72px))
    0
    clamp(48px,8vw,96px);
  align-items:start;
}

/* tag stânga, urcat să fie în linie cu primul rând */
.vision-left{ display:flex; align-items:flex-start; }
.vision-tag{
  font-family:"Inter",system-ui,sans-serif;
  font-weight:800; letter-spacing:.08em;
  font-size:clamp(11px,1.2vw,14px);
  text-transform:uppercase;
  opacity:.9;
  padding-top: clamp(6px, 1vw, 10px);
}
.vision-tag .asterisk{ font-family:"Playfair Display",Georgia,serif; font-weight:800; margin-right:.35em; }

/* dreapta – pe dreapta + CAPS */
.vision-right{
  display:flex; flex-direction:column;
  align-items:flex-end;    /* <— aliniere la dreapta */
  text-align:right;        /* <— text la dreapta */
}
.vision-headline{
  margin:0; display:grid; gap: clamp(8px,1.8vw,14px); line-height:.95; width:100%;
}
.vision-headline .row{ overflow:hidden; white-space:nowrap; text-transform:uppercase; }

.vision-headline .s{
  font-family:"Inter",system-ui,sans-serif;
  font-weight:900; letter-spacing:-.01em;
  font-size: clamp(26px, 6.8vw, 108px);
}
.vision-headline .r{
  font-family:"Playfair Display",Georgia,serif;
  font-weight:800; letter-spacing:-.01em;
  font-size: clamp(28px, 7.2vw, 116px);
}


@media (max-width: 820px){
  .vision-grid{
    grid-template-columns: clamp(72px, 22vw, 120px) 1fr;
    column-gap: clamp(10px, 3.5vw, 20px);
  }
  .vision-headline .s{ font-size: clamp(22px, 8.5vw, 100px); }
  .vision-headline .r{ font-size: clamp(24px, 9vw, 106px); }
}

/* === FORCE RIGHT ALIGN FOR VISION === */
#vision .vision-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;   /* împinge conținutul la dreapta */
  text-align:right;       /* text la dreapta */
}

#vision .vision-headline{
  width:100%;
}

#vision .vision-headline .row{
  display:inline-flex;        /* ca să putem folosi justify-content */
  justify-content:flex-end;   /* împinge rândul la marginea dreaptă */
  align-items:baseline;
  width:100%;
  white-space:nowrap;
  text-align:right;           /* moștenire clară */
  gap: .4em;
  text-transform:uppercase;   /* CAPS */
}

/* doar ca backup dacă alt CSS rescrie text-align pe span-uri */
#vision .vision-headline .row > *{
  text-align:right !important;
}

/* opțional: titrează puțin tag-ul din stânga să se alinieze cu primul rând */
#vision .vision-tag{ padding-top: .4em; }


@media (max-width: 600px){
  .vision-headline .s{ 
    font-size: clamp(16px, 5vw, 42px); 
  }
  .vision-headline .r{ 
    font-size: clamp(18px, 5.5vw, 46px); 
  }
  .vision-grid{
    padding-bottom: clamp(24px, 5vw, 48px); /* mai mic decât default */
  }
}


/* ===== Mobile overrides pentru #vision ===== */
@media (max-width: 700px){
  /* 1) Nu mai forța înălțimea la 100svh */
  .vision-section,
  .vision-grid{
    min-height: auto !important;
  }

  /* 2) Padding-uri mai mici sus/jos (nu mai adăuga var(--navH) în top) */
  .vision-grid{
    padding-top: clamp(20px, 5vw, 40px) !important;
    padding-bottom: clamp(16px, 5vw, 36px) !important;
  }

  /* 3) Lasă textul să se rupă pe rânduri (altfel se “taie” în afara ecranului) */
  .vision-headline .row{
    overflow: visible !important;
    white-space: normal !important;
  }

  /* 4) Pe mobil, aliniere mai “safe” (opțional, dar ajută la lizibilitate) */
  .vision-right{
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* 5) Fonturi un pic mai temperate ca să nu depășească lățimea */
  .vision-headline .s{ font-size: clamp(18px, 6.2vw, 40px) !important; }
  .vision-headline .r{ font-size: clamp(20px, 6.6vw, 44px) !important; }
}