/* ============================================
   Home Page Specific Styles
   ============================================ */

/* Hero Section - White Minimalist */
.hero {
    min-height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    background: var(--background);
    color: var(--text);
    padding: var(--spacing-xl) 0 var(--spacing-xl) 0;
    margin-top: 70px;
    --hero-gap: var(--spacing-lg);
    --hero-image-height: clamp(480px, 55vh, 600px);
    --hero-image-width: clamp(320px, 38vw, 600px);
    --hero-image-crop: var(--hero-image-width);
}

.hero-layout {
    display: grid;
    grid-template-columns: minmax(240px, var(--hero-image-crop)) minmax(0, 1fr);
    gap: var(--hero-gap);
    align-items: stretch;
    max-width: 1600px;
    width: auto;
    margin: 0 auto;
    padding: 0 clamp(var(--spacing-md), 4vw, var(--spacing-xl));
    justify-content: center;
}

.hero-photo {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 0;
    width: min(100%, var(--hero-image-crop));
    height: 100%; /*var(--hero-image-height);*/
    min-height: 480px; /* This is about the right value */
}

.hero-headshot {
    width: 100%;
    height: 100%;
    border-radius: 50px;
    object-fit: cover;
    object-position: center 35%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: center;
    text-align: center;
    min-height: var(--hero-image-height);
}

.hero h1 {
    font-size: clamp(2.25rem, 3.5vw, 3rem);;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--text);
    line-height: 1.1;
    transition: font-size 0.3s ease, line-height 0.3s ease;
}

/* Force "Hi, I'm Alex Ko, a" to always be line 1 */
.hero-title-line1 {
    display: block;        /* forces line break after it */
    white-space: nowrap;   /* prevents wrapping */
}

/* "Mechanical Engineer" can wrap to 1 or 2 lines as needed */
.hero-title-line2 {
    display: block;        /* starts on line 2 */
    white-space: normal;   /* allow wrapping */
}

/* Optional safety for very small screens */
@media (max-width: 420px) {
    .hero-title-line1 {
        white-space: normal;
    }
}

.name-highlight {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

.hero-intro {
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.6;
    color: var(--text);
    margin-bottom: var(--spacing-sm);
    max-width: 56ch;
    transition: font-size 0.3s ease, line-height 0.3s ease;
}

.hero-cta-text {
    font-size: clamp(0.95rem, 1.2vw, 1rem);
    line-height: 1.5;
    color: var(--text-light);
    margin-bottom: var(--spacing-md);
    max-width: 52ch;
    transition: font-size 0.3s ease, line-height 0.3s ease;
}

/* Rules to deal with weird hero text compression and spacing gaps */
/* Shared hero text compression rules (applies to both ranges) */
@media (min-width: 790px) and (max-width: 1950px) {
  /* Keep the headline from getting too wide */
  .hero h1,
  .hero-title {
    max-width: 20ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* Paragraph sizing */
  .hero-intro {
    font-size: clamp(1.10rem, 1.5vw, 1.22rem);
    line-height: 1.75;
  }

  .hero-cta-text {
    max-width: 44ch;
    font-size: clamp(1.02rem, 1.25vw, 1.12rem);
    line-height: 1.6;
  }
}

/* Range A: 790–1300 */
@media (min-width: 790px) and (max-width: 1300px) {
  .hero-content { max-width: 52ch; }
  .hero-intro   { max-width: 38ch; }
}

/* Range B: 1300–1950 */
@media (min-width: 1300px) and (max-width: 1950px) {
  .hero-content { max-width: 62ch; }
  .hero-intro   { max-width: 58ch; }
}

.hero-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacing-sm);
    align-items: flex-start;
    justify-content: center;
    margin-top: auto;
}

.btn-hero {
    display: block;
    padding: 14px 24px;
    background: var(--accent);
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
    transition: background 0.2s ease;
    border: 1px solid var(--accent);
}

.btn-hero:hover {
    background: var(--accent-bright);
    border-color: var(--accent-bright);
    transform: scale(1.08);
    box-shadow: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-hero {
        background: transparent;
        color: var(--text);
        border-color: var(--text);
    }

    :root:not([data-theme="light"]) .btn-hero:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--text);
    }
}

@media (max-width: 1023px) {
    .hero {
        --hero-image-crop: clamp(
            calc(var(--hero-image-width) * 0.8),
            calc(var(--hero-image-width) - (1023px - 100vw) * 0.3),
            var(--hero-image-width)
        );
    }

    .hero-photo {
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    .hero {
        /*min-height: 80vh;      disabled for now*/
        padding: var(--spacing-lg) var(--spacing-md);
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero-tagline {
        font-size: 1.25rem;
    }
    
    .hero-intro {
        font-size: 1rem;
    }
}

/* About Section */
.about-section {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: var(--spacing-xl);
    align-items: start;
    position: relative;
}

.about-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
    opacity: 1;
}

.about-photo {
    text-align: center;
}

.about-content h2 {
    margin-bottom: var(--spacing-md);
}

.about-highlights {
    list-style: none;
    margin: var(--spacing-md) 0;
}

.about-highlights li {
    padding: var(--spacing-xs) 0;
    padding-left: var(--spacing-md);
    position: relative;
}

.about-highlights li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

.skills-container {
    margin-top: var(--spacing-md);
}

@media (max-width: 768px) {
    .about-section {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .about-photo {
        text-align: center;
    }
}

/* Featured Projects Section */
.projects-section {
    padding: var(--spacing-xl) 0;
    position: relative;
}

/* Add subtle fade edges to indicate scrollability */
.projects-section::before,
.projects-section::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.projects-section::before {
    left: 0;
    background: transparent;
    opacity: 0;
}

.projects-section::after {
    right: 0;
    background: transparent;
}

/* Show fade on scroll */
.projects-grid:not(:hover) {
    scroll-padding: 0 var(--spacing-lg);
}

/* Container adjustments for scroll */
.projects-section .container {
    position: relative;
    overflow: visible;
}

/* Add padding to first and last cards for better scroll experience */
.projects-grid .project-card:first-child {
    margin-left: var(--spacing-lg);
}

.projects-grid .project-card:last-child {
    margin-right: var(--spacing-sm);
}

.projects-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.projects-header h2 {
    margin-bottom: var(--spacing-sm);
}

.projects-subtitle {
    font-size: 1.125rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

.projects-grid {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: auto; /* Changed to auto for smooth animation frame scrolling */
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg) 0;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 0 var(--spacing-xl) 0 0;
}

.projects-grid:hover {
    scrollbar-width: thin;
    scrollbar-color: var(--text) var(--background-alt);
}

/* Custom scrollbar styling for webkit browsers */
.projects-grid::-webkit-scrollbar {
    height: 0;
}

.projects-grid:hover::-webkit-scrollbar {
    height: 8px;
}

.projects-grid::-webkit-scrollbar-track {
    background: var(--background-alt);
    border-radius: 10px;
}

.projects-grid::-webkit-scrollbar-thumb {
    background: var(--text);
    border-radius: 10px;
    transition: opacity 0.2s ease;
}

.projects-grid::-webkit-scrollbar-thumb:hover {
    opacity: 0.7;
}

.project-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: none;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    position: relative;
    flex: 0 0 auto;
    width: 400px;
    min-width: 350px;
    max-width: 450px;
}

.project-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: var(--text);
}

.project-card-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    position: relative;
    transition: none;
}

.project-card:hover .project-card-image {
    transform: none;
}

.project-card-badge {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: var(--badge-bg);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

.project-card-content {
    padding: var(--spacing-xs) var(--spacing-md);
    padding-top: var(--spacing-sm);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.project-card-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0;
  color: var(--text);
  line-height: 1.3;

  /* Clamp to 2 lines (standard + fallback) */
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;

  line-clamp: 2;              /* standard (newer browsers) */
  -webkit-line-clamp: 2;      /* Safari/older Chrome fallback */
  -webkit-box-orient: vertical;

  /* keep card heights consistent */
  min-height: calc(1.3em * 2);
}


.project-card-affiliation {
    align-self: flex-start;
    display: inline-flex;
    margin: var(--spacing-sm) 0;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-card-description {
    color: var(--text-light);
    margin-bottom: 0.35rem;
    flex: 1;
    max-width: 42ch;
    line-height: 1.45;
}

.project-card-metric {
    background: var(--background-alt);
    border-left: 2px solid var(--text);
    padding: 0.35rem var(--spacing-sm);
    border-radius: var(--radius-sm);
    margin: 0.35rem 0;
    font-size: 0.875rem;
    box-shadow: none;
    transition: none;
}

.project-card-metric:hover {
    transform: none;
    box-shadow: none;
}

.project-card-link {
    margin-top: var(--spacing-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
    flex: 0 0 auto;   /* don't shrink into wrapping */
}

.project-card-link:hover {
    color: var(--text);
    opacity: 0.7;
    gap: var(--spacing-xs);
}

.project-card-footer {
    margin-top: var(--spacing-sm);
    display: flex;
    align-items: flex-end; /*center;*/
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: nowrap;
    width: 100%;
}

.project-card-footer .project-card-link {
    margin-top: 0;
    white-space: nowrap;
    flex: 0 0 auto;   /* keep link width */
}

/* Default: one line (right-aligned, JS overflow detection works) */
.project-card-meta {
    margin-left: auto;
    color: var(--text-light);
    font-size: 0.875rem;

    /* IMPORTANT: not a flex container */
    display: block;
    text-align: right;

    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;

    overflow: hidden; /* optional, prevents visible spill while measuring */
}

/* Only when JS adds the class: stack into two lines, right-aligned */
.project-card-meta.meta-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;

    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
}

/* If ANY card needs stacking, force stacking on ALL cards */
.projects-grid.force-meta-stack .project-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;

    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
}

.projects-grid.force-meta-stack .project-card-meta .meta-sep {
    display: none;
}

.projects-grid.force-meta-stack .project-card-meta .meta-location,
.projects-grid.force-meta-stack .project-card-meta .meta-dates {
    display: block;
}


/* Hide the dot only in stacked mode */
.project-card-meta.meta-stack .meta-sep {
    display: none;
}

/* Make location + dates each take their own line in stacked mode */
.project-card-meta.meta-stack .meta-location,
.project-card-meta.meta-stack .meta-dates {
    display: block;
}

/* Prevent flash of wrong layout before JS runs */
.project-card-meta {
    visibility: hidden;
}

html.meta-wrap-ready .project-card-meta {
    visibility: visible;
}

html.meta-wrap-busy .project-card-meta {
    visibility: hidden;
}

@media (max-width: 480px) {
    .project-card-footer {
        align-items: flex-start;
    }

    /* keep meta stacked and right-aligned */
    .project-card-meta {
        flex: 0 1 65%;
    }
}

@media (max-width: 768px) {
    /* keep link + meta on same row, meta stays stacked */
    .project-card-meta {
        flex: 0 1 70%;
    }

    .project-card-meta .meta-sep {
        display: none;
    }

    .hero-buttons {
        margin-top: 0;              /* stop pushing buttons downward */
    }

    .hero-content {
        min-height: auto;           /* optional: prevents extra vertical slack */
    }
}

/* Horizontal scroll works on all screen sizes */
/* Cards will be scrollable horizontally */

/* Contact CTA Section */
.contact-section {
    text-align: center;
    padding: var(--spacing-xl) 0 var(--spacing-md);
    background: var(--background);
}

.contact-section h2 {
    margin-bottom: var(--spacing-sm);
}

.contact-message {
    font-size: 1.125rem;
    color: var(--text-light);
    margin-bottom: var(--spacing-lg);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    max-width: 52ch;
}

.contact-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .contact-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .contact-buttons .btn {
        width: 100%;
    }
}