.resume-wrapper {
  padding-top: 30px;
  padding-bottom: 60px;
}

/* style.css are o regulă generică "section { padding: 60px 0; overflow: hidden; }"
   care se aplică și secțiunilor <section class="resume-section..."> din CV,
   adăugând spațiu nedorit (60px jos + 60px sus la secțiunea următoare) între ele.
   O anulăm doar în interiorul CV-ului, fără să afectăm alte pagini. */
.resume-wrapper section {
  padding: 0;
  overflow: visible;
}

.resume-wrapper-inner {
  max-width: 1000px;
}

.resume-header {
  background: #434E5E;
  color: rgba(255, 255, 255, 0.9);
  min-height: 220px;
  height: auto;
}

.resume-header .picture {
  width: 220px;
  height: 100%;
  object-fit: cover;
  display: block;
}

.resume-header .name {
  font-size: 2.25rem;
  letter-spacing: 0.175rem;
  font-weight: 900;
}

.resume-header .title {
  font-size: 1.5rem;
}

.resume-header a {
  color: rgba(255, 255, 255, 0.6);
}

.resume-header a:hover {
  color: white;
}

.resume-social {
  font-size: 0.875rem;
}

/* Structura antetului CV-ului (poză + nume/titlu + date de contact), pe grid,
   cu 2 aranjamente diferite după lățime:

   - SUB 992px ("mic"): poza și rândurile "Daniela Ianoș" / "Psiholog/Psihoterapeut"
     stau alături (poza nu se mai întinde pe toată înălțimea), iar datele de
     contact (email/telefon/website/facebook) trec sub, pe toată lățimea.
   - DE LA 992px în sus ("mare"): poza se întinde pe toată înălțimea antetului
     (nume/titlu sus, contact jos, ambele lângă poză) — nu mai rămâne "linie"
     sub poză, fiindcă .picture are height:100%+object-fit:cover și umple
     exact înălțimea casetei ei, oricât de înaltă ar fi.

   Necesită în cv-danielaianos.php: div-ul din jurul pozei+numelui+contactului
   să aibă DOAR clasa "resume-header-grid" (fără "row" de la Bootstrap — "row"
   adaugă margini negative gândite pentru coloane cu padding, care aici împing
   grid-ul în afara casetei antetului), iar email/telefon/website/facebook să
   fie într-un div cu clasa "contact-info-row". */
.resume-header .resume-header-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "pic  name"
    "info info";
  column-gap: 1.5rem;
  row-gap: 0.75rem;
  align-items: start;
}

.resume-header .resume-header-grid .resume-picture-holder {
  grid-area: pic;
}

.resume-header .resume-header-grid .name-title-block {
  grid-area: name;
  align-self: center;
  padding: 1.5rem 1.5rem 0 0;
  min-width: 0;
}

.resume-header .resume-header-grid .contact-info-row {
  grid-area: info;
  padding: 0 1.5rem 1.5rem 0;
  min-width: 0;
}

.resume-header .name,
.resume-header .title {
  overflow-wrap: break-word;
}

.resume-header .contact-info-row a {
  display: inline-flex;
  align-items: center;
}

.resume-header .contact-info-row a i {
  margin-left: 0;
  text-align: left;
  width: auto;
}

/* Fundal alb opțional pentru orice iconiță din header: pune iconița într-un
   <span class="fa-container"> (fără fa-fw pe <i>, fa-container are deja
   dimensiune fixă). Fără span, iconița rămâne transparentă (stilul implicit).
   Exemplu: <span class="fa-container me-2"><i class="fas fa-globe" data-fa-transform="grow-3"></i></span> */
.resume-header .fa-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 0.125rem;
  background: white;
  color: #434E5E;
}

/* Sub 992px, rândul de contact stă pe toată lățimea, sub poză. Îi lăsăm un
   mic indent în stânga (ca la nume/titlu), ca email și telefon să nu pornească
   lipite chiar de marginea stângă a casetei. */
@media (max-width: 991.98px) {
  .resume-header .resume-header-grid .contact-info-row {
    padding-left: 1.5rem;
  }
}

@media (min-width: 992px) {
  .resume-header .resume-header-grid {
    grid-template-areas:
      "pic name"
      "pic info";
    align-items: stretch;
  }

  .resume-header .resume-header-grid .name-title-block {
    align-self: start;
  }
}

/* Pe rândul de contact, email se aliniază cu psihologie-craiova.ro, iar
   telefonul cu link-ul de facebook. Sub 500px, prea puțin loc pentru 2
   coloane — rămân stivuite simplu, în ordine. */
@media (min-width: 500px) {
  .resume-header .contact-info-row {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 2.5rem;
    row-gap: 0.5rem;
    align-items: start;
    justify-content: start;
  }

  .resume-header .contact-info-row .primary-info,
  .resume-header .contact-info-row .secondary-info {
    min-width: 0;
  }

  .resume-header .contact-info-row .primary-info a,
  .resume-header .contact-info-row .secondary-info a {
    overflow-wrap: break-word;
  }

  .resume-header .contact-info-row .primary-info {
    grid-column: 1;
    grid-row: 1;
  }

  .resume-header .contact-info-row .secondary-info {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }
}


.resume-section-title {
  font-size: 1.25rem;
  position: relative;
  color: #434E5E;
}

.resume-section-title:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: #8d9aad;
}

.resume-section-content {
  color: #58677c;
}

.resume-timeline {
  padding-left: 2rem;
}

.resume-timeline:before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 100%;
  background: #aab4c3;
  left: 6px;
  top: 4px;
  position: absolute;
}

.resume-timeline-item:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: -32px;
  top: 3px;
  width: 15px;
  height: 15px;
  border: 4px solid #58677c;
  background: white;
  border-radius: 50%;
}

.resume-progress {
  height: 0.6rem;
}

.resume-company-name {
  color: #58677c;
  font-size: 0.875rem;
  font-weight: 500;
}

.resume-position-time {
  font-size: 0.875rem;
  color: #aab4c3;
}

.resume-position-title {
  font-size: 1.125rem;
  color: #434E5E;
}

.resume-timeline-item-desc-heading {
  font-size: 1rem;
}

.resume-skills-cat {
  font-size: 1rem;
  color: #434E5E;
}

.resume-skill-name {
  font-size: 0.8125rem;
  color: #434E5E;
}

.badge-light {
  color: #58677c;
  background: #F7F8FA;
}

.resume-degree {
  color: #434E5E;
}

.resume-degree-org {
  font-size: 0.875rem;
}

.resume-degree-time {
  color: #aab4c3;
  font-size: 0.875rem;
}

.resume-award-icon {
  left: 0;
  top: 4px;
  color: #aab4c3;
}

.resume-award-name {
  font-weight: bold;
  color: #434E5E;
}

.resume-award-desc {
  font-size: 0.875rem;
}

.resume-lang-name {
  color: #434E5E;
}

.footer .fa-heart {
  color: #fb866a;
}

@media (max-width: 767.98px) {
  .resume-wrapper {
    padding-top: 0;
  }
  .resume-header {
    height: auto;
  }
  .resume-header .picture {
    width: 120px;
    border-radius: 4px;
  }
}