/* --- About section dedicated wrapper styles --- */
#about {
    position: relative;
    max-width: 1280px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* About grid - two columns sized by content */
#about .about-grid {
    display: grid;
    grid-template-columns: max-content max-content !important;
    grid-auto-rows: max-content !important;
    gap: 2rem !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    justify-content: center !important;
    margin-left: auto;
    margin-right: auto;
}

/* Remove default card look inside About */
#about .about-grid > .card:not(.tech-enthusiast-card) {
    background: none;
    box-shadow: none;
    border: none;
    padding: 0;
}

/* Ensure all grid children behave as blocks */
#about .collaboration-card,
#about .techstack-card,
#about .timezones-card,
#about .tech-enthusiast-card,
#about .email-card,
#about .code-snippet-card { position: relative; display: block; }

/* Explicit placement */
#about .collaboration-card { grid-column: 1 !important; grid-row: 1 !important; }
#about .techstack-card { grid-column: 2 !important; grid-row: 1 !important; }
#about .timezones-card { grid-column: 2 !important; grid-row: 2 !important; }
#about .code-snippet-card { grid-column: 2 !important; grid-row: 3 !important; }
#about .tech-enthusiast-card { grid-column: 1 !important; grid-row: 3 !important; }
#about .email-card { grid-column: 1 !important; grid-row: 4 !important; }

/* Collaboration card */
.collaboration-card { padding: 0; background: none; width: auto; height: auto; }
#collaboration-image { display: block; width: 689px; height: 541px; max-width: none; }

/* Tech stack card */
.techstack-card { padding: 0; background: none; box-shadow: none; border: none; display: inline-block; }
#techstack-image { display: block; width: 521px; height: 255.5px; max-width: none; }

/* Time zones (communications) card */
.timezones-card { padding: 0; background: none; box-shadow: none; border: none; display: inline-block; z-index: 1; }
.timezones-card:hover { z-index: 20; }
#timezones-image { display: block; width: 521px; height: 255.5px; max-width: none; }

/* Inside Scoop */
.code-snippet-card { padding: 0; background: none; box-shadow: none; border: none; }
#scoop-image { display: block; width: 811px; height: 390px; max-width: none; }

/* Email card */
.email-card { position: relative; background: none; padding: 0; width: 460px; height: 100px; }
#email-box-image { display: block; width: 380px; height: 190px; max-width: 100%; }
#about-copy-email { position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px; width: 260px; height: 48px; background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; padding: 0; margin: 0; cursor: pointer; color: transparent; }
#about-copy-email:focus, #about-copy-email:hover { outline: none; box-shadow: none; }

/* Tech enthusiast card - image handled by inner wrapper for hover scale */
.tech-enthusiast-card { z-index: 2; background: none; width: 460px; height: 196px; padding: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; overflow: hidden; background-color: transparent; box-shadow: none; border: none; }
.tech-enthusiast-card .hover-wrap { width: 100%; height: 100%; background-image: url('images/tech_enthusiast_background.png'); background-position: center; background-repeat: no-repeat; background-size: contain; transition: transform 180ms ease; transform-origin: center center; }
#about .tech-enthusiast-card:hover { z-index: 20; }
#about .tech-enthusiast-card:hover .hover-wrap { transform: scale(1.04); }

/* Hover scale animation for all cards */
#about .about-grid > .card,
#about .about-grid > .collaboration-card,
#about .about-grid > .techstack-card,
#about .about-grid > .tech-enthusiast-card,
#about .about-grid > .email-card,
#about .about-grid > .timezones-card,
#about .about-grid > .code-snippet-card { transition: transform 180ms ease, box-shadow 180ms ease; transform-origin: center center; will-change: transform; }
#about .about-grid > .card > .hover-wrap,
#about .about-grid > .collaboration-card > .hover-wrap,
#about .about-grid > .techstack-card > .hover-wrap,
#about .about-grid > .tech-enthusiast-card > .hover-wrap,
#about .about-grid > .email-card > .hover-wrap,
#about .about-grid > .timezones-card > .hover-wrap,
#about .about-grid > .code-snippet-card > .hover-wrap { transition: transform 180ms ease, box-shadow 180ms ease; transform-origin: center center; will-change: transform; }
#about .about-grid > .card:hover > .hover-wrap,
#about .about-grid > .collaboration-card:hover > .hover-wrap,
#about .about-grid > .techstack-card:hover > .hover-wrap,
#about .about-grid > .tech-enthusiast-card:hover > .hover-wrap,
#about .about-grid > .email-card:hover > .hover-wrap,
#about .about-grid > .timezones-card:hover > .hover-wrap,
#about .about-grid > .code-snippet-card:hover > .hover-wrap { transform: scale(1.03); z-index: 10; }

/* Fallback img hover */
#about .about-grid img { transition: transform 180ms ease; transform-origin: center center; }
#about .about-grid > .card:hover img,
#about .about-grid > .collaboration-card:hover img,
#about .about-grid > .techstack-card:hover img,
#about .about-grid > .tech-enthusiast-card:hover img,
#about .about-grid > .email-card:hover img,
#about .about-grid > .timezones-card:hover img,
#about .about-grid > .code-snippet-card:hover img { transform: scale(1.03); }

/* Desktop adjustments */
@media (min-width: 1024px) {
  #about .timezones-card { margin-top: -280px !important; }
  #about .code-snippet-card { margin-left: -290px !important; }
  #about .email-card { margin-top: -190px !important; margin-left: 10px !important; }
  /* enthusiast nudge */
  #about .tech-enthusiast-card { margin-left: -30px !important; }
}

@media (max-width: 768px) {
    #about {
        padding: 4rem 5px; 
        font-size: 30px;
    }

    #about .about-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        padding: 0; /* Remove padding from the grid container */
    }

    /* Reset all desktop-specific positioning */
    #about .card,
    #about .collaboration-card,
    #about .timezones-card,
    #about .techstack-card,
    #about .tech-enthusiast-card,
    #about .code-snippet-card,
    #about .email-card {
        grid-column: auto;
        grid-row: auto;
        margin: 0 !important;
        width: 100%;
        max-width: 400px; /* Constrain width for a cleaner look */
        padding: 0; /* Remove padding from card containers */
        background: none; /* Remove card background */
    }

    /* Ensure images scale correctly within their containers */
    #about .card img {
        width: 100%;
        height: auto;
        display: block;
    }
}