/*
This file controls the styling of the contact section of my portfolio.
The contact page was designed to feel like a continuation of my
creative identity instead of a traditional contact form.
I created a simple layout that combines my contact information with
a visual representation of my current design work.
This file controls the layout, icon interactions, artwork movement,
and responsive behaviour of the section.
*/

/* ..... CONTACT PAGE STRUCTURE ..... */
/*
I used a centered section layout because I wanted the contact page
to feel balanced and minimal.
Instead of filling the page with unnecessary elements, I focused on
two main areas: connecting with me and showing what I am currently
working on.
*/
.contact-section {

    width: 100%;
    min-height: 100svh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        clamp(5rem, 8vw, 8rem) clamp(1.25rem, 4vw, 4rem);

}

/*
The container uses a two-column layout to separate information from
visual storytelling.
The left side provides practical contact details, while the right
side continues the portfolio experience by showing my current work.
*/
.contact-container {

    width: min(100%, 68rem);

    display: grid;

    grid-template-columns:
        minmax(0, .9fr) minmax(0, 1fr);

    gap: clamp(2.5rem, 5vw, 5rem);

    align-items: center;

}

/* ..... CONTACT INFORMATION ..... */
/*
I kept the contact section simple because the main goal is easy
access to my information.
The links are styled as interactive elements to maintain the same
playful visual language used throughout the portfolio.
*/
.contact-info {
    display: flex;
    flex-direction: column;
    gap: clamp(1.2rem, 2vw, 2rem);
}

.contact-info h1 {

    margin: 0;

    font-family: var(--font-elegant);

    font-size: clamp(2.5rem, 4vw, 4rem);

    font-weight: 500;

    line-height: .9;

    color: var(--text);

}

.contact-links {

    display: flex;

    flex-direction: column;

    gap: .9rem;

}

.contact-link {

    display: flex;

    align-items: center;

    gap: .9rem;

    text-decoration: none;

    color: var(--text);

    font-family: var(--font-main);

    font-size: clamp(.9rem, 1.2vw, 1.1rem);

    transition:
        transform .3s ease;

}

.contact-link:hover {

    transform: translateX(.35rem);

}

/* ..... INTERACTIVE ICON STATES ..... */
/*
Each contact icon has two versions: a normal state and a focused
state.
I used image swapping instead of creating only CSS effects because
the custom illustrations better match the handmade style of the
portfolio.
*/
.contact-icon {

    position: relative;

    width: clamp(2rem, 2.5vw, 2.5rem);

    aspect-ratio: 1;

    flex-shrink: 0;

}

.contact-icon img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: contain;

    transition:
        opacity .25s ease,
        transform .25s ease;

}

.icon-focus {

    opacity: 0;

}

.contact-link:hover .icon-normal {

    opacity: 0;

}

.contact-link:hover .icon-focus {

    opacity: 1;

    transform: scale(1.08);

}

/* RESUME*/
.contact-link:last-child {

    margin-top: .6rem;

}

.contact-link:last-child span {

    text-decoration: underline;

    text-underline-offset: .25rem;

}

/* ..... CURRENT PROJECT SHOWCASE ..... */
/*
I added this section to show that my portfolio is continuously
developing.
Instead of only listing contact details, I wanted visitors to see
what I am currently exploring and connect the page back to my design
process.
*/
.current-work {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: clamp(1rem, 2vw, 1.5rem);

}

.current-work-image {

    width:

        clamp(12rem, 22vw, 18rem);

    height: auto;

    object-fit: contain;

    transform: rotate(-2deg);


    filter:

        drop-shadow(0 .6rem 1rem rgba(36, 36, 36, .12));


    transition:

        transform .4s ease;

}

/*
The artwork movement was added as a small interaction to make the
illustration feel more physical.
The rotation change is subtle because I wanted to keep the focus on
the content while still maintaining the playful handmade feeling.
*/
.current-work:hover .current-work-image {

    transform:

        rotate(1deg) translateY(-.35rem);

}

.current-work-content {
    width: min(100%, 24rem);
    padding:

        clamp(1rem, 2vw, 1.5rem);
    background:

        rgba(255, 255, 255, .7);
    border:

        1px solid var(--border-light);
    box-shadow:

        0 .3rem 1rem rgba(36, 36, 36, .08);
}





.current-work-content h2 {

    margin: 0 0 .6rem;


    font-family: var(--font-elegant);


    font-size: clamp(1.8rem, 2.5vw, 2.5rem);


    font-weight: 500;


}

.current-work-content h3 {


    margin: 0 0 .8rem;


    font-family: var(--font-main);


    font-size: clamp(.9rem, 1.2vw, 1.1rem);


    font-weight: 400;


}

.current-work-content p {


    margin: 0;


    font-family: var(--font-main);


    line-height: 1.5;


    font-size: clamp(.85rem, 1vw, 1rem);


}

/* ..... RESPONSIVE LAYOUT ..... */
/*
The desktop layout separates information and visuals, but on smaller
screens I changed it into a single column.
This keeps the content readable and avoids shrinking both sections
too much.
*/
@media (max-width: 75rem) {
    .contact-container {

        grid-template-columns: 1fr;

        gap: 3rem;

    }

    /* Contact stays first */
    .contact-info {

        order: 1;

    }

    .current-work {

        order: 2;

    }

}

@media (max-width: 58rem) {
    .contact-section {

        padding-top: 6rem;

    }

    .contact-link {

        font-size: .95rem;

    }

}