/* About Page Styles */

/* Layout di base - riusa classi container principali */
.about-page {
    color: var(--color-text);
    background-color: var(--color-gray-50);
}

/* Hero Section */
.about-page__hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    padding: var(--space-md);
    background-color: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.about-page__hero-content {
    flex: 2;
}

.about-page__hero-image {
    flex: 1;
}

.about-page__profile-img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Caption Style */
.about-page__image-caption {
    text-align: center;
    font-style: italic;
    color: var(--color-gray-400);
    font-size: var(--font-size-sm);
    margin-top: var(--space-xs);
}

.about-page__intro-text {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

.about-page__description {
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    color: var(--color-gray-500);
    margin-bottom: var(--space-md);
}

/* Skills Tags */
.about-page__skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: var(--space-md);
}

.about-page__skill-tag {
    padding: 0.625rem 1.25rem;
    background-color: var(--color-gray-100);
    color: var(--color-primary);
    border-radius: 9999px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: background-color var(--transition-normal);
}

.about-page__skill-tag:hover {
    background-color: var(--color-gray-200);
}

/* Buttons */
.about-page__button {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all var(--transition-normal);
    text-decoration: none;
    display: inline-block;
}

.about-page__button--primary {
    background-color: var(--color-primary);
    color: white;
}

.about-page__button--primary:hover {
    background-color: var(--color-primary-dark);
    text-decoration: none;
}

.about-page__button--secondary {
    background-color: var(--color-gray-100);
    color: var(--color-text);
    margin-left: 1.5rem;
}

.about-page__button--secondary:hover {
    background-color: var(--color-gray-200);
    text-decoration: none;
}

/* Timeline Section */
.about-page__timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.about-page__timeline-card {
    position: relative;
    padding: var(--space-md);
    padding-left: 3rem;
    background-color: white;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-normal);
}

.about-page__timeline-card:hover {
    transform: translateX(0.25rem);
}

/* Company-specific styles */
.about-page__timeline-card--jakala {
    border-left: 4px solid #be5ec9;
}

.about-page__timeline-card--analyst {
    border-left: 4px solid var(--color-link);
}

.about-page__timeline-card--developer {
    border-left: 4px solid #16996e;
}

.about-page__timeline-icon::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* SVG masks per ruoli */
.about-page__timeline-card--jakala .about-page__timeline-icon::before {
    background-color: #be5ec9;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Crect x='9' y='9' width='6' height='6'%3E%3C/rect%3E%3Cline x1='9' y1='1' x2='9' y2='4'%3E%3C/line%3E%3Cline x1='15' y1='1' x2='15' y2='4'%3E%3C/line%3E%3Cline x1='9' y1='20' x2='9' y2='23'%3E%3C/line%3E%3Cline x1='15' y1='20' x2='15' y2='23'%3E%3C/line%3E%3Cline x1='20' y1='9' x2='23' y2='9'%3E%3C/line%3E%3Cline x1='20' y1='14' x2='23' y2='14'%3E%3C/line%3E%3Cline x1='1' y1='9' x2='4' y2='9'%3E%3C/line%3E%3Cline x1='1' y1='14' x2='4' y2='14'%3E%3C/line%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Crect x='9' y='9' width='6' height='6'%3E%3C/rect%3E%3Cline x1='9' y1='1' x2='9' y2='4'%3E%3C/line%3E%3Cline x1='15' y1='1' x2='15' y2='4'%3E%3C/line%3E%3Cline x1='9' y1='20' x2='9' y2='23'%3E%3C/line%3E%3Cline x1='15' y1='20' x2='15' y2='23'%3E%3C/line%3E%3Cline x1='20' y1='9' x2='23' y2='9'%3E%3C/line%3E%3Cline x1='20' y1='14' x2='23' y2='14'%3E%3C/line%3E%3Cline x1='1' y1='9' x2='4' y2='9'%3E%3C/line%3E%3Cline x1='1' y1='14' x2='4' y2='14'%3E%3C/line%3E%3C/svg%3E");
}

.about-page__timeline-card--analyst .about-page__timeline-icon::before {
    background-color: var(--color-link);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z'/%3E%3C/svg%3E");
}

.about-page__timeline-card--developer .about-page__timeline-icon::before {
    background-color: #16996e;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8.293 6.293 2.586 12l5.707 5.707 1.414-1.414L5.414 12l4.293-4.293zm7.414 11.414L21.414 12l-5.707-5.707-1.414 1.414L18.586 12l-4.293 4.293z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8.293 6.293 2.586 12l5.707 5.707 1.414-1.414L5.414 12l4.293-4.293zm7.414 11.414L21.414 12l-5.707-5.707-1.414 1.414L18.586 12l-4.293 4.293z'/%3E%3C/svg%3E");
}

.about-page__timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-sm);
}

.about-page__timeline-info {
    display: flex;
    flex-direction: column;
}

.about-page__timeline-company {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.about-page__timeline-role {
    font-size: var(--font-size-md);
    margin: 0.25rem 0;
}

/* Specific color for Jakala role */
.about-page__timeline-card--jakala .about-page__timeline-role {
    color: #be5ec9;
}

/* Default color for other roles */
.about-page__timeline-card--analyst .about-page__timeline-role {
    color: var(--color-primary);
}

.about-page__timeline-card--developer .about-page__timeline-role {
    color: #16996e;
}

.about-page__timeline-period {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    background-color: var(--color-gray-100);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-weight: 500;
}

.about-page__timeline-description {
    font-size: var(--font-size-md);
    color: var(--color-gray-500);
    line-height: var(--line-height-normal);
    margin: 0;
}

/* Teaching Section */
.about-page__section--teaching {
    background-color: var(--color-gray-100);
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-lg);
    margin: var(--space-xl) 0;
}

.about-page__teaching-content {
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    color: var(--color-gray-500);
}

/* Media Queries */
@media screen and (max-width: 480px) {
    .about-page__hero {
        padding: var(--space-sm);
        gap: var(--space-md);
    }

    .about-page__section--teaching {
        padding: var(--space-md) var(--space-sm);
        margin: var(--space-md) 0;
    }

    .about-page__timeline-card {
        padding: var(--space-sm);
        padding-left: 2.5rem;
    }

    .about-page__timeline-header {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .about-page__button {
        display: block;
        width: 100%;
        margin-bottom: var(--space-sm);
        text-align: center;
    }

    .about-page__button--secondary {
        margin-left: 0;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    .about-page__hero {
        padding: var(--space-md);
    }

    .about-page__button {
        margin-right: var(--space-sm);
        margin-bottom: var(--space-sm);
    }

    .about-page__button--secondary {
        margin-left: 0;
    }
}

@media screen and (min-width: 769px) {
    .about-page__hero {
        flex-direction: row;
        align-items: flex-start;
    }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .about-page__hero,
    .about-page__timeline-card {
        background-color: var(--color-gray-600);
    }

    .about-page__timeline-period {
        background-color: var(--color-gray-500);
        color: var(--color-gray-200);
    }

    .about-page__section--teaching {
        background-color: var(--color-gray-600);
    }

    .about-page__button--secondary {
        background-color: var(--color-gray-500);
        color: var(--color-gray-200);
    }

    .about-page__button--secondary:hover {
        background-color: var(--color-gray-400);
    }
}