@import url("colors.css");

/* ======================
COMPLETE About Page - IT Portfolio Style
====================== */

/* Main About Card - Matches .p-it */
.about {
border: 2px solid var(--pri);
background: linear-gradient(135deg, var(--bkg2) 0%, var(--pri) 100%);
box-shadow: 0 4px 16px var(--shadow1);
padding: 2rem;
margin-bottom: 3rem;
transition: all 0.3s ease;
display: flex;
flex-direction: row;
align-items: center;
gap: 2rem;
}

.about:hover {
border-color: var(--priAcc);
box-shadow: 0 6px 24px var(--shadow2);
transform: translateY(-5px);
}

.intro {
flex: 1;
padding: 1.5rem;
background: var(--bkg2);
border-left: 4px solid var(--priAcc) !important;
border: 2px solid var(--pri);
color: var(--text1);
line-height: 1.7;
margin: 0;
transition: all 0.3s ease;
}

.intro:hover {
box-shadow: 0 6px 24px var(--shadow2);
border-color: var(--priAcc);
}


/* Resumé Button - Matches portfolio buttons */
.btn-resume {
display: inline-block;
padding: 1.25rem 2rem;
border: 2px solid var(--pri);
text-decoration: none !important;
box-shadow: 0 4px 16px var(--shadow1);
transition: all 0.3s ease;
margin: 1rem;
}



/* Social Links - Matches .it-button style */
.links-btn {
display: flex; /* ← horizontal row */
flex-wrap: wrap;
gap: 1rem; /* ← consistent spacing */
justify-content: center; /* ← center the row */
align-items: center; /* ← vertical alignment */
padding-top: 1rem;

}

.link-btn {
display: inline-flex;
align-items: center;
padding: 1rem;
transition: all 0.3s ease;
margin: 0.5rem;
text-decoration: none !important;
overflow: hidden;
}

.link-btn img {
height: 32px;
width: auto;
transition: transform 0.4s ease;
}

.link-btn:hover {
transform: translateY(-4px);
}

.link-btn:hover img {
transform: scale(1.08);
}

/* Resume Section - Matches portfolio layout */
.resume {
display: grid !important;
grid-template-columns: 1fr 2fr; /* img LEFT (33%), iframe RIGHT (66%) */
gap: 2rem;
padding: 2rem;
margin-top: 2rem;
}

.itResume {
background: var(--bkg2);
border: 2px solid var(--pri);
box-shadow: 0 4px 16px var(--shadow1);
padding: 1.5rem;
transition: all 0.3s ease;
}

.itResume:hover {
border-color: var(--priAcc);
box-shadow: 0 6px 24px var(--shadow2);
}

.itResume iframe {
width: 100%;
height: 850px;
transition: border-color 0.3s ease;
}




.resume img#photo {
width: 100% !important;
height: auto;
aspect-ratio: 3 / 4;  
object-fit: cover;
border: 2px solid var(--pri);
box-shadow: 0 4px 16px var(--shadow1);
padding: 1rem;
background: var(--bkg2);
transition: all 0.3s ease;
margin: 0 !important; /* Override inline style */
}

.resume img#photo:hover {
border-color: var(--priAcc);
transform: translateY(-4px);
box-shadow: 0 8px 25px var(--shadow2);
}

@media (max-width: 900px) {
  .about {
    flex-direction: column;
    gap: 2rem;
    padding: 1.5rem;
  }

  .resume {
    grid-template-columns: 1fr;
    width: 100%;
    padding: 1rem;
    gap: 1.5rem;
  }

  .itResume {
    width: 100% !important;
    padding: 0.5rem;
    margin: 0;
    box-sizing: border-box;
  }

  .itResume iframe {
    width: 100% !important;
    height: 85vh;
    max-height: 750px;
    margin: 0;
    display: block;
    box-sizing: border-box;
  }

  .resume img#photo {
    max-height: 400px;
    object-fit: contain !important;
    height: auto !important;
    width: auto !important;
    max-width: 100%;
  }

  .container-links {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .btn-resume {
    padding: 0.6rem 0.8rem;
    font-size: 1.25rem;
    margin: 0.25rem;
  }
}


@media (max-width: 600px) {
.about {
padding: 1rem;
gap: 1.5rem;
}

  .itResume iframe {
    width: 100% !important;
    height: vh;
    max-height: 750px;
    margin: 0;
    display: block;
    box-sizing: border-box;
  }
    
}