/* devcos.ro — secțiunea finală de contact, așezată pe orizontală.

   Era o stivă centrată: titlu de 88px pe două rânduri, paragraf, butoane și
   datele de contact, una sub alta, cu 130px de padding — 695px înălțime la
   1440. Acum titlul stă în stânga, iar textul, butoanele și contactele în
   dreapta, pe trei rânduri de grilă.

   Nu se atinge markup-ul: niciun script nu rescrie secțiunea (`#contact` e
   folosit doar ca țintă de link), deci regulile astea sunt suficiente. */

@media (min-width: 901px) {
  .cta {
    padding-block: 84px;
  }

  .cta > .shell {
    display: grid;
    /* coloana titlului se mulează pe cel mai lat rând al lui; cu fracții
       rămâneau ~114px goi între titlu și coloana din dreapta. */
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: clamp(36px, 4.5vw, 76px);
    row-gap: 0;
    align-items: start;
    text-align: left;
  }

  /* titlul ocupă toată coloana din stânga, centrat pe verticală față de
     conținutul din dreapta */
  .cta h2 {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    margin: 0;
    font-size: clamp(34px, 4.4vw, 64px);
    letter-spacing: -.03em;
    line-height: 1.05;
  }

  .cta > .shell > p {
    grid-column: 2;
    grid-row: 1;
    max-width: 44ch;
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
  }

  .cta .cta-actions {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
    margin-top: 26px;
  }

  .cta .cta-meta {
    grid-column: 2;
    grid-row: 3;
    justify-content: flex-start;
    margin-top: 20px;
  }
}

/* Sub 901px rămâne stiva centrată de dinainte — pe telefon două coloane n-ar
   avea unde încăpea. Reducem doar padding-ul, care era gândit pentru desktop. */
@media (max-width: 900px) {
  .cta { padding-block: 72px; }
}