/* ==================== RESPONSIVE FIXES FOR PORTFOLIO ==================== */
/* Add this file AFTER main.css in your HTML */

/* STRATEGY:
   1. Hide decorative arrows on tablets and below
   2. Hide all personal images on mobile
   3. Keep Replit section as just text blurb on mobile
   4. Stack foodie section vertically on tablet
   5. Fix culinary mad scientist image cropping on desktop
   6. Only change layouts if actual content is being cut off (not just background)
*/

/* ==================== DESKTOP FIXES (all sizes) ==================== */

/* ==================== IPAD PRO LANDSCAPE ADJUSTMENTS ==================== */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    /* Scale down timeline navigation */
    .timeline-nav {
        transform: translateX(-50%) scale(0.85) !important;
        top: 1.5rem !important;
    }

    .timeline-icon {
        width: 28px !important;
        height: 28px !important;
    }

    .timeline-icon img {
        width: 16px !important;
        height: 16px !important;
    }

    .timeline-year {
        font-size: 0.65rem !important;
    }

    /* Move landing page content up */
    .hero-section {
        padding-top: 3rem !important;
    }

    .hero-content {
        gap: 1rem !important;
    }

    .hero-photo {
        height: 55vh !important;
    }

    .hero-title {
        font-size: clamp(2rem, 4vw, 3rem) !important;
        margin-bottom: 1rem !important;
    }

    .subtitle {
        font-size: clamp(0.9rem, 2vw, 1.05rem) !important;
    }

    .scroll-indicator {
        bottom: 2rem !important;
    }
}

/* FORCE HIDE TIMELINE ON MOBILE - add to top level */
@media (max-width: 767px) {
    .timeline-nav,
    #timeline-nav,
    nav.timeline-nav,
    .timeline-container,
    .timeline-track,
    .timeline-nodes {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Disable horizontal scrolling on mobile */
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* Move scroll indicator up a bit on desktop/XL */
.scroll-indicator {
    bottom: 3rem !important;
}

/* Hero photo container - FIXED SIZE, doesn't change */
.hero-photo-container {
    transform: translateX(-30px) !important; /* Shift left */
    width: auto !important;
    height: auto !important;
    display: inline-block !important; /* Shrink-wrap to photo size */
}

/* Hero photo - scale THIS, not the container */
.hero-photo {
    width: auto !important;
    height: 50vh !important; /* Proportionally smaller for desktop like laptop */
    max-width: 800px !important;
    object-fit: contain !important; /* Prevent squishing - maintain aspect ratio */
    display: block !important;
}

/* RESTORE EXACT ORIGINAL FOODIE SECTION FOR LAPTOP+ (1024px and above) */
@media (min-width: 1024px) {
    /* Use exact original values from main.css */
    .foodie-content {
        display: grid !important;
        grid-template-columns: 750px 400px !important;
        gap: 5rem !important;
        align-items: center !important;
        margin-top: 0 !important;
        transform: translateY(-5vh) translateX(-200px) !important;
        justify-content: center !important;
    }

    /* Foodie image container - ONLY fix top crop by removing translateY(-40px) */
    .foodie-image-container {
        width: 750px !important;
        height: 562px !important;
        background-color: transparent !important;
        border-radius: 16px !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
        transform: translateY(0) !important; /* Was -40px in original, changed to 0 to fix top crop */
    }

    .foodie-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* Foodie text section - exact original */
    .foodie-text-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        text-align: left !important;
        max-width: 500px !important;
    }

    /* Animation states - exact original */
    .section.animate-in .foodie-text-section {
        opacity: 1 !important;
        transform: translateX(-200px) !important;
    }
}

/* Ensure sections don't clip content at the top */
.section {
    overflow: visible !important;
}

/* Give the foodie section extra top padding so image isn't cropped */
#projects {
    padding-top: 8rem !important;
}

/* ==================== LANDING PAGE ARROW BREAKPOINTS ==================== */
/* Hide arrows when width ≤1045px OR height ≤1100px */

@media (max-width: 1045px) {
    .hand-drawn-arrow,
    .hand-drawn-arrow-right {
        display: none !important;
    }

    /* Make hero image BIGGER relative to screen when arrows are gone */
    .hero-photo {
        width: 450px !important;
        max-width: 60vw;
    }
}

@media (max-height: 1100px) {
    .hand-drawn-arrow,
    .hand-drawn-arrow-right {
        display: none !important;
    }
}

/* ==================== HEIGHT-BASED PROPORTIONAL SCALING ==================== */
/* As height decreases, scale image, text, and timeline proportionally */

@media (max-height: 1100px) {
    .hero-photo {
        width: auto !important;
        height: 65vh !important;
        object-fit: contain !important; /* Never squish */
    }

    .hero-title {
        font-size: clamp(2rem, 4vw, 3.5rem) !important;
    }

    .subtitle {
        font-size: clamp(0.95rem, 2vw, 1.15rem) !important;
    }

    .timeline-nav {
        transform: translateX(-50%) scale(0.95) !important;
    }
}

@media (max-height: 900px) {
    .hero-photo {
        width: auto !important;
        height: 60vh !important;
        object-fit: contain !important; /* Never squish */
    }

    .hero-title {
        font-size: clamp(1.75rem, 4vw, 3rem) !important;
    }

    .subtitle {
        font-size: clamp(0.9rem, 2vw, 1.05rem) !important;
    }

    .timeline-nav {
        transform: translateX(-50%) scale(0.9) !important;
    }

    .hero-content {
        gap: 1.5rem !important;
    }
}

@media (max-height: 800px) {
    .hero-photo {
        width: auto !important;
        height: 55vh !important;
        object-fit: contain !important; /* Never squish */
    }

    .hero-title {
        font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
        margin-bottom: 1rem !important;
    }

    .subtitle {
        font-size: clamp(0.85rem, 2vw, 1rem) !important;
    }

    .timeline-nav {
        transform: translateX(-50%) scale(0.85) !important;
        top: 1.5rem !important;
    }

    .hero-content {
        gap: 1.25rem !important;
    }
}

@media (max-height: 700px) {
    .hero-photo {
        width: auto !important;
        height: 50vh !important;
        object-fit: contain !important; /* Never squish */
    }

    .hero-title {
        font-size: clamp(1.35rem, 4vw, 2.25rem) !important;
        margin-bottom: 0.75rem !important;
    }

    .subtitle {
        font-size: clamp(0.8rem, 2vw, 0.95rem) !important;
    }

    .timeline-nav {
        transform: translateX(-50%) scale(0.8) !important;
        top: 1rem !important;
    }

    .hero-content {
        gap: 1rem !important;
    }

    .scroll-indicator {
        display: none !important;
    }
}

/* ==================== TABLET (1024px and below) ==================== */
@media (max-width: 1023px) {
    /* HIDE ALL DECORATIVE ARROWS - they cause positioning issues */
    .hand-drawn-arrow,
    .hand-drawn-arrow-right,
    .foodie-arrow {
        display: none !important;
    }

    /* Make photo BIGGER on tablet portrait */
    .hero-photo {
        height: 70vh;
    }
}

    /* Hero Section */
    /* .hero-photo {
        width: 300px !important;
    } */

    .hero-photo-container {
        transform: translateX(0) !important;
    }

    .hero-content {
        gap: 2rem !important;
        margin-bottom: 40px !important;
    }

    /* Foodie Section - STACK VERTICALLY */
    .foodie-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        transform: translateY(0) translateX(0) !important;
        max-width: 600px;
        margin: 0 auto;
    }

    .foodie-image-container {
        width: 100% !important;
        max-width: 600px;
        height: auto !important;
        aspect-ratio: 4/3;
        transform: translateY(0) !important;
    }

    .foodie-text-section {
        transform: translateX(0) !important;
        max-width: 100% !important;
        text-align: left !important;
    }

    /* Experience/Replit Section - FORCE SINGLE COLUMN */
    #experience .grid,
    #experience .lg\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Remove any fixed transforms that break layout */
    .experience-left,
    .experience-right {
        transform: translateY(0) !important;
    }
}

/* ==================== MOBILE (768px and below) ==================== */
@media (max-width: 767px) {
    /* HIDE TIMELINE NAVIGATION ON MOBILE - FORCE HIDE */
    .timeline-nav,
    #timeline-nav,
    nav.timeline-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* HIDE FOODIE IMAGE (but keep hero image) */
    .foodie-image-container,
    .foodie-image {
        display: none !important;
    }

    /* REPLIT EXPERIENCE SECTION - MOBILE ONLY TEXT */
    #experience .experience-title {
        display: none !important; /* Hide "Favorite thing I've built" */
    }

    #experience .experience-subtitle {
        line-height: 1.8 !important; /* More spacing between lines */
        margin-bottom: 1rem !important;
    }

    #experience .experience-mobile-text {
        display: block !important; /* Show mobile text */
        text-align: center !important;
        max-width: 90% !important;
        margin: 0 auto !important;
        padding: 1rem !important;
        font-family: 'Gabarito', sans-serif !important;
        font-size: 1rem !important;
        line-height: 1.8 !important;
        color: #e5e7eb !important;
    }

    /* Hide all the bento grid content on mobile */
    #experience .mt-10,
    #experience .sm\\:mt-16,
    #experience div.grid,
    #experience .flex.flex-col.gap-6,
    #experience .flex.flex-col.gap-4 {
        display: none !important;
    }

    /* Hide Community Work section completely on mobile */
    section[data-advance-timeline="false"] {
        display: none !important;
    }

    /* Hide Technologies Used and API Performance bentos on mobile */
    .hide-on-mobile {
        display: none !important;
    }

    /* Webtoons section - show mobile text only on mobile */
    .webtoons-bio-desktop {
        display: none !important;
    }

    .webtoons-bio-mobile {
        display: block !important;
    }

    .hero-content {
        margin: 0 !important;
    }

    /* 65% IMAGE / 35% TEXT LAYOUT - MOVED TO TOP */
    .hero-section {
        min-height: 100vh !important;
        display: flex !important;
        align-items: flex-start !important; /* Align to top */
        justify-content: flex-start !important; /* Start from top */
        padding: 0 !important;
        position: relative !important;
        top: -100px !important; /* Move entire section up */
    }

    .hero-section .container {
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important; /* Remove all container padding */
        margin: 0 auto !important; /* Center the container */
        max-width: 100vw !important; /* Full viewport width */
        width: 100vw !important; /* Force full width */
        justify-content: flex-start !important; /* Start from top */
        overflow-x: hidden !important; /* Prevent horizontal overflow */
    }


    .hero-content {
        flex-direction: column !important;
        height: 100vh !important;
        margin: 0 !important; /* Remove that 0 auto 65px auto! */
        padding: 0 !important;
        gap: 0 !important;
        justify-content: flex-start !important; /* Start from top */
        align-items: center !important; /* Center everything horizontally */
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Image takes top 65% and starts at the very top */
    .hero-photo-container {
        height: 65vh !important;
        width: 100% !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .hero-photo {
        width: auto !important;
        height: 100% !important;
        max-width: 90vw !important; /* Leave some breathing room */
        max-height: 65vh !important;
        object-fit: contain !important;
    }

    /* Text takes bottom 35% */
    .hero-text {
        height: 35vh !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 !important;
    }

    .hero-title,
    .subtitle {
        width: 85% !important; /* Even narrower text on mobile */
        max-width: 350px !important; /* Tighter max width for iPhone Pro Max */
        padding: 0 0.5rem !important;
        box-sizing: border-box !important;
    }

    .hero-title {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
        margin-bottom: 0.75rem !important;
    }

    .subtitle {
        font-size: clamp(0.85rem, 2.5vw, 1rem) !important;
        line-height: 1.4 !important;
    }

    /* Hide scroll indicator */
    .scroll-indicator {
        display: none !important;
    }

    /* Foodie section - just text, no image */
    .foodie-content {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    .foodie-text-section {
        text-align: center !important;
        max-width: 100% !important;
    }

    .foodie-subtitle,
    .foodie-description {
        text-align: center !important;
    }

    /* SIMPLIFY REPLIT SECTION - just show the text blurb */
    #experience .grid {
        grid-template-columns: 1fr !important;
    }

    /* Hide the right column visual elements, keep the story text */
    #experience .grid > div:nth-child(2) {
        display: none !important;
    }

    /* Make the left column (story text) full width */
    #experience .grid > div:nth-child(1) {
        grid-column: 1 !important;
    }

    /* Cooking section - remove transform */
    .cooking-section {
        transform: translateY(0) !important;
        padding-top: 2rem !important;
    }

    /* Timeline nav - compact */
    .timeline-nav {
        top: 1rem !important;
        padding: 0.75rem 1rem !important;
    }

    .timeline-container {
        min-width: 400px !important;
    }

    .timeline-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .timeline-icon img {
        width: 16px !important;
        height: 16px !important;
    }

    .timeline-year {
        font-size: 0.65rem !important;
    }
}

/* ==================== SMALL MOBILE (480px and below) ==================== */
@media (max-width: 480px) {
    /* Images already hidden from 768px breakpoint */

    /* Timeline nav - very compact */
    .timeline-container {
        min-width: 320px !important;
    }

    .hero-text {
        max-width: 400px !important;
    }

    .timeline-icon {
        width: 20px !important;
        height: 20px !important;
        margin-bottom: 2px !important;
    }

    .timeline-icon img {
        width: 14px !important;
        height: 14px !important;
    }

    .timeline-year {
        font-size: 0.6rem !important;
    }

    .timeline-line {
        height: 4px !important;
    }

    /* Cooking/webtoon cards - smaller */
    .cooking-card,
    .webtoons-card {
        width: 10rem !important;
        height: 10rem !important;
    }

    .cooking-carousel,
    .webtoons-carousel {
        min-height: 140px !important;
        min-width: 250px !important;
    }
}

/* ==================== EXTRA SMALL (380px and below) ==================== */
@media (max-width: 380px) {
    /* Images already hidden */

    .timeline-container {
        min-width: 280px !important;
    }

    .cooking-card,
    .webtoons-card {
        width: 8rem !important;
        height: 8rem !important;
    }
}

/* ==================== HEIGHT-BASED (for landscape phones) ==================== */
@media (max-height: 700px) {
    /* Only adjust if content is getting cut off */
    .hero-section {
        min-height: auto !important;
        padding: 6rem 0 2rem !important;
    }

    .hero-content {
        gap: 1.5rem !important;
        margin-bottom: 20px !important;
    }

    .section {
        min-height: auto !important;
        padding: 3rem 0 !important;
    }

    .cooking-section {
        padding-top: 2rem !important;
    }

    /* Hide scroll indicator on short screens */
    .scroll-indicator {
        display: none !important;
    }
}

@media (max-height: 600px) {
    /* Only adjust spacing if content needs it */
    .section {
        padding: 2rem 0 !important;
    }

    .hero-title {
        margin-bottom: 1rem !important;
    }

    .subtitle {
        font-size: 0.9rem !important;
    }
}

/* ==================== LANDSCAPE MODE FIXES ==================== */
/* Mobile landscape - 65% image / 35% text with wider paragraph */
@media (max-width: 767px) and (orientation: landscape) {
    /* Keep 65/35 split in landscape */
    .hero-section {
        min-height: 100vh !important;
        padding: 0 !important;
    }

    .hero-section .container {
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        justify-content: space-between !important;
    }

    .hero-content {
        flex-direction: column !important;
        height: 100vh !important;
        margin-bottom: 0 !important;
        gap: 0 !important;
    }

    /* Image still takes 65% */
    .hero-photo-container {
        height: 65vh !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hero-photo {
        width: auto !important;
        height: 100% !important;
        max-width: 95vw !important;
        max-height: 65vh !important;
        object-fit: contain !important;
    }

    /* Text takes 35% but WIDER paragraph */
    .hero-text {
        height: 35vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        text-align: center !important;
        max-width: 80% !important; /* Wider than portrait mobile */
        margin: 0 auto !important;
        padding: 0 2rem !important;
    }

    .subtitle {
        max-width: 100% !important; /* Full width of container */
        font-size: clamp(0.8rem, 2vw, 0.95rem) !important;
        line-height: 1.3 !important;
    }

    .scroll-indicator {
        display: none !important;
    }
}

/* Tablet landscape and smaller screens */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 768px) {
    .hero-section {
        padding: 4rem 0 1rem !important;
    }

    .hero-content {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 1.5rem !important;
        margin-bottom: 10px !important;
    }

    .hero-text {
        max-width: 100% !important;
        text-align: center !important;
        margin-bottom: 0 !important;
    }

    .scroll-indicator {
        display: none !important;
    }
}

/* ==================== PREVENT SECTION OVERLAP ==================== */
.section {
    position: relative;
    overflow-x: hidden;
    /* Remove overlap by ensuring proper spacing */
}

#projects {
    padding-top: 6rem;
}

.cooking-section {
    padding-top: 4rem;
}

#experience {
    padding-top: 6rem;
}

#webtoons {
    padding-top: 6rem;
}

#prodigy {
    padding-top: 6rem;
}

@media (max-width: 767px) {
    #projects,
    #experience,
    #webtoons,
    #prodigy {
        padding-top: 3rem;
    }

    .cooking-section {
        padding-top: 2rem;
    }
}

/* ==================== FIX OVERFLOW ISSUES ==================== */
body {
    overflow-x: hidden !important;
}

.foodie-content,
.bento-wrapper,
.timeline-experience {
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure carousel doesn't cause horizontal scroll */
.cooking-carousel-container,
.webtoons-carousel-container {
    max-width: 100vw;
    overflow: visible;
}