/* ============================================
   ABOUT PAGE STYLES
   Only loaded on about.html
   Works on top of style.css for fonts,
   colours, nav and base layout
============================================ */


/* ============================================
   HERO SPLIT SECTION
   Two column layout:
   Left  → heading + bio text
   Right → picture collage grid

   To adjust column widths:
   Change the two values in grid-template-columns
   e.g. "1fr 1fr" for equal columns
        "1fr 1.5fr" to make collage wider
============================================ */
.hero-split {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 1em;
    width: min(75em, 100%);
    margin: 3em auto;
    padding: min(3em, 8%);
    background-color: var(--background-color);
    border-radius: 1.5em;
    align-items: start;
}


/* ============================================
   LEFT SIDE - TEXT CONTENT
   Starts hidden and fades in on scroll
   fade-in class added by IntersectionObserver
============================================ */
.hero-left {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    text-align: left;
}

.hero-left.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   RIGHT SIDE - COLLAGE WRAPPER
   padding-left pushes collage away from text
   Increase value to move further right
============================================ */
.hero-right {
    padding-left: 4em;
    margin-left: auto;
}

/* ============================================
   TYPOGRAPHY - LEFT SIDE
   .about-heading : main "About Ojaswi" title
   .about-intro   : first larger paragraph
   .about-bio     : remaining body paragraphs
============================================ */

/* Main heading - large green bold title */
.about-heading {
    font-size: clamp(3em, 6vw, 5em);
    color: var(--text-color);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.8em;
    text-align: left;
}

.name-green {
    color: var(--primary-color);
}

/* First intro paragraph - slightly larger */
.about-intro {
    font-size: 1.2em;
    color: var(--text-color);
    line-height: 1.7;
    margin-bottom: 1.2em;
    font-weight: 500;
}

/* Body bio paragraphs - slightly smaller and faded */
.about-bio {
    font-size: 1em;
    color: var(--text-color);
    line-height: 1.8;
    margin-bottom: 1em;
    opacity: 0.85;
}

/* ============================================
   CURRENTLY SECTION
   Two items side by side below the collage
   Same text style as bio paragraphs
   
   To add more items: copy a .currently-item block
   To change layout: edit grid-template-columns
============================================ */

/* Currently reading - all in one line */
.currently-section {
    display: flex;
    flex-direction: row;
    gap: 1em;
    margin-top: 2.5em;
}
.currently-inline {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
}

.currently-item:nth-child(2) {
    margin-left: -0.4em;
}

/* Links in currently section */
.currently-link {
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.95em;
    line-height: 1.8;
    opacity: 0.85;
    position: relative;
    transition: color 0.3s ease;
}

/* Underline effect on links */
.currently-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.currently-link:hover {
    color: var(--primary-color);
}

.currently-link:hover::after {
    width: 100%;
}


/* ============================================
   RIGHT SIDE - PICTURE COLLAGE
   Grid layout:
   [ large  ] [ small-1 ]
   [ large  ] [ small-2 ]
   [ wide          wide ]

   To change layout: edit grid-template-areas
   To change image heights: edit grid-template-rows
   To change gap between images: edit gap value
============================================ */
.collage-grid {
    display: block;
    width: 70%;
    margin-left: auto;
    margin-right: 20%;
}

.collage-img {
    overflow: hidden;
    border-radius: 1em;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.collage-img.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.collage-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.collage-img:hover img {
    transform: scale(1.05);
}

/* Wide image spans full width at the bottom */
.collage-wide {
    grid-area: wide;
}

.links-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8em;
    margin-top: 1.5em;
    background-color: transparent;
    padding: 0;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 0.6em;
    text-decoration: none;
    color: var(--text-color);
    font-size: 1em;
    font-weight: 400;
    opacity: 0.85;
    transition: color 0.3s ease;
}

/* Underline only on the text span, not the emoji */
.contact-link span:last-child {
    position: relative;
}

.contact-link span:last-child::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.contact-link:hover {
    color: var(--primary-color);
}

.contact-link:hover span:last-child::after {
    width: 100%;
}
/* ============================================
   FOOTER DRAWING SECTION
   Inherited from style.css - no changes needed
   here unless you want about page specific styling
============================================ */


/* ============================================
   MOBILE RESPONSIVE
   768px and below: stacks to single column
   480px and below: simplifies collage grid
============================================ */
@media (max-width: 768px) {

    /* Stack left and right on top of each other */
    .hero-split {
        grid-template-columns: 1fr;
        gap: 2.5em;
        padding: 2em 1.5em;
    }

    /* Remove left padding on mobile since it's stacked */
    .hero-right {
        padding-left: 0;
    }

    /* Simplify collage to 2 equal columns */
    .collage-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 160px 160px;
        grid-template-areas:
            "large   small-1"
            "small-2 wide";
    }

    .about-heading {
        font-size: clamp(2.5em, 8vw, 3.5em);
    }
}

/* ============================================
   SMALL MOBILE
   480px and below: single column collage
============================================ */
@media (max-width: 480px) {
    .collage-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 200px);
        grid-template-areas:
            "large"
            "small-1"
            "small-2"
            "wide";
    }
}