/* Griglia About a 4 colonne (ripristino originale) */
.page-about .about-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    /* stessa griglia del container */
    column-gap: var(--column-gap);
    row-gap: 48px;
    /* Increased gap for better breathing room */
    align-items: start;
    margin-top: -24px;
    position: relative;
}

/* --- Global Full-Height Grid Lines (Desktop) --- */
.page-about .about-main {
    position: relative;
    /* Anchor for background lines */
}

/* Hide the main body grid (Index style) */
body.is-about::before {
    opacity: 0 !important;
}

/* Create a NEW Fixed grid specifically for About page */
/* Positioned above opacity layers but behind content */
body.is-about::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--container-width);
    pointer-events: none;
    z-index: 2;
    /* Below About Content (z-index 3) */
    background-image: var(--grid-bg);
    background-repeat: repeat-x;
    background-size: calc((100% - (var(--grid-columns) - 1) * var(--column-gap)) / var(--grid-columns) + var(--column-gap)) 100%;
    background-position: left top;
    opacity: var(--overlay-opacity);
}

.page-about .about-main {
    padding-bottom: 72px;
}

/* Force padding below content */
body.is-about .page-about .about-main {
    padding-bottom: 160px !important;
}

/* Ensure content sits above the fixed background lines (z-index 2) */
body.is-about .smooth-scroll-content {
    position: relative;
    z-index: 3;
}

/* --- Row 1 --- */

/* Intro: Large text, spans first 6 columns */
.page-about .about-grid .intro {
    grid-column: 1 / span 6;
    grid-row: 1;
}

.page-about .about-grid .intro p:not(.about-label) {
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-top: 8px;
}

/* Design Approach: Next 3 columns */
.page-about .about-grid .design-approach {
    grid-column: 7 / span 3;
    grid-row: 1;
}

/* Photo: Last 3 columns */
.page-about .about-grid .about-photo {
    grid-column: 10 / span 3;
    grid-row: 1;
    margin-top: 0;
    transform: none;
    /* Reset distinct transform */
    z-index: 10;
}

/* --- Row 2 --- */

.page-about .about-grid .contact {
    grid-column: 1 / span 3;
}

.page-about .about-grid .education {
    grid-column: 4 / span 3;
}

.page-about .about-grid .selected-work {
    grid-column: 7 / span 3;
}

.page-about .about-grid .focus {
    grid-column: 10 / span 3;
}

/* --- Row 3 --- */

.page-about .about-grid .background {
    grid-column: 1 / span 3;
}

.page-about .about-grid .capabilities {
    grid-column: 4 / span 6;
    /* Give it more space */
}


/* --- General Styles --- */

/* Removed local borders from blocks */
.page-about .about-grid .about-block,
.page-about .about-grid .about-photo {
    position: relative;
    padding-left: var(--start-line-offset);
}

.page-about .about-grid .about-block::before,
.page-about .about-grid .about-photo::before {
    content: none;
    display: none;
}

.page-about .about-grid .about-block::after,
.page-about .about-grid .about-photo::after {
    content: none;
    display: none;
}


.page-about .about-grid .about-block {
    font-size: 11px;
    line-height: 1.3;
}

.page-about .about-grid .about-block {
    border-top: none;
    padding-top: 0;
    /* Remove top padding as we use grid gaps */
}

/* Hide legacy elements */
.page-about .about-hero-word {
    display: none;
}

/* Photo Styling */
.page-about .about-photo img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(1);
}

.page-about .about-label {
    color: #dcdcdc !important;
    font-size: 10px;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
    display: block;
}

.page-about .about-label span {
    color: #dcdcdc !important;
    font-size: 10px;
    letter-spacing: 0.06em;
}

.page-about .about-block p:not(.about-label) {
    color: #FFFFFF !important;
}

.page-about .about-block a {
    color: #FFFFFF !important;
}

.page-about .about-grid p,
.page-about .about-grid a {
    font-size: 13px;
    line-height: 1.5;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.page-about .about-grid .intro p:not(.about-label) {
    /* Override standard size for intro */
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.05;
}


/* Responsive: una colonna su mobile */
@media (max-width: 900px) {
    .page-about .about-grid {
        grid-template-columns: 1fr;
        /* una sola colonna */
        gap: 32px;
        margin-top: 0;
        column-gap: 0;
        grid-auto-flow: row;
    }

    /* Hide full grid lines on mobile */
    .page-about .about-grid-line {
        display: none;
    }

    .page-about .about-grid .intro,
    .page-about .about-grid .design-approach,
    .page-about .about-grid .about-photo,
    .page-about .about-grid .contact,
    .page-about .about-grid .education,
    .page-about .about-grid .selected-work,
    .page-about .about-grid .focus,
    .page-about .about-grid .background,
    .page-about .about-grid .capabilities {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        padding-left: 0;
    }

    .page-about .about-grid .intro p:not(.about-label) {
        font-size: 32px;
        /* Smaller clear font on mobile */
    }

    .page-about .about-grid p,
    .page-about .about-grid a {
        font-size: 26px;
        line-height: 1.2;
        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
    }

    .page-about .about-grid .about-block::before,
    .page-about .about-grid .about-photo::before,
    .page-about .about-grid .about-block::after,
    .page-about .about-grid .about-photo::after {
        content: none;
        display: none;
    }

    .page-about .about-photo img {
        border-radius: 8px;
    }
}

.page-about .back-to-home-btn {
    position: relative;
    margin: 160px auto 0;
    width: fit-content;
    z-index: 2;
}

.page-about .back-to-home-btn a {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    background: transparent;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.page-about .back-to-home-btn a:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .page-about .back-to-home-btn {
        margin-top: 80px;
    }

    .page-about .about-main {
        padding-bottom: 120px;
    }

    .page-about .about-mobile-note {
        display: inline-block !important;
        text-align: center;
        margin: 120px auto 0;
        color: #ffffff;
        font-size: 12px;
        letter-spacing: 0.04em;
        text-decoration: none;
        padding: 8px 12px;
        display: block;
        width: 100%;
    }

    .page-about .about-mobile-note.second {
        margin: clamp(320px, 45vh, 640px) auto 0;
    }
}

.page-about .about-mobile-note {
    display: none;
}

.page-about .about-main {
    padding-bottom: 72px;
}

/* Force padding below content so grid lines extend past the button */
/* AND ensure full height coverage starting from top */
body.is-about .page-about .about-main {
    top: 0 !important;
    padding-top: 80px !important;
    min-height: 100vh !important;
    padding-bottom: 160px !important;
}

.page-about oblique {
    color: #bbbbbb;
    font-size: 0.88em;
    font-style: italic;
}