/* ============================================
   RESPONSIVE STYLES FOR HYFUN FOODS
   ============================================ */

/* Extra Large Screens */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    .hero-text h1 {
        font-size: 4rem;
    }
    
    .section-title h2 {
        font-size: 3rem;
    }
    
    .circular-timeline {
        height: 900px;
    }
}

/* Large Screens */
@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
    
    .potato-center-layout {
        max-width: 800px;
        height: 550px;
    }
    
    .potato-fact {
        width: 220px;
    }
    
    .principles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .connect-options {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .circular-timeline {
        height: 700px;
    }
    
    .circular-timeline::before {
        width: 450px;
        height: 450px;
    }
    
    .timeline-item {
        width: 200px;
    }
    
    .green-practices-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 700px;
    }
}

/* Medium Screens */
@media (max-width: 992px) {
    .container {
        max-width: 720px;
    }
    
    .hero-content {
        flex-direction: column;
        text-align: center;
    }
    
    .hero-text {
        margin-bottom: 50px;
    }
    
    .hero-text h1 {
        font-size: 2.8rem;
    }
    
    .hero-image-container {
        width: 350px;
        height: 350px;
    }
    
    .timeline-hero-container {
        width: 350px;
        height: 350px;
    }
    
    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }
    
    .section-title h2 {
        font-size: 2.2rem;
    }
    
    .potato-center-layout {
        max-width: 600px;
        height: 500px;
    }
    
    .potato-center-image {
        width: 180px;
        height: 180px;
    }
    
    .potato-fact .fact-content {
        padding: 20px;
    }
    
    .legacy-content-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .circular-timeline {
        height: 600px;
        max-width: 700px;
    }
    
    .circular-timeline::before {
        width: 400px;
        height: 400px;
    }
    
    .center-story {
        width: 150px;
        height: 150px;
    }
    
    .story-icon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
    
    .timeline-card {
        padding: 20px;
    }
    
    .timeline-card h4 {
        font-size: 1.1rem;
        min-height: 40px;
    }
    
    .timeline-card p {
        font-size: 0.85rem;
    }
    
    .year-badge {
        width: 60px;
        height: 60px;
        font-size: 1.1rem;
    }
    
    .principles-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
    }
    
    .connect-options {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .green-practices-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 700px;
    }
}

/* Small Screens */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: flex;
    }
    
    .desktop-nav {
        display: none;
    }
    
    .container {
        max-width: 540px;
    }
    
    .header-container {
        padding: 0 15px;
    }
    
    .logo-image {
        height: 50px;
    }
    
    .hero {
        margin-top: 70px;
        padding: 150px 0 80px;
    }
    
    .hero-text h1 {
        font-size: 2.3rem;
    }
    
    .hero-text p {
        font-size: 1rem;
    }
    
    .btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
    
    .section-title {
        margin-bottom: 40px;
    }
    
    .section-title h2 {
        font-size: 1.8rem;
    }
    
    .section-title p {
        font-size: 0.95rem;
    }
    
    .feature-card {
        padding: 30px 20px;
    }
    
    .feature-img {
        width: 100px;
        height: 100px;
    }
    
    .feature-card h3 {
        font-size: 1.3rem;
    }
    
    .logos-scroll-container {
        margin: 30px 0;
    }
    
    .footer-content {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 30px;
    }
    
    .footer-column h3 {
        font-size: 1.3rem;
    }
    
    .copyright {
        font-size: 0.8rem;
    }
    
    /* Potato center layout mobile adjustment */
    .potato-center-layout {
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .potato-fact {
        position: static;
        width: 100%;
        transform: none !important;
    }
    
    .center-potato {
        position: static;
        transform: none;
        order: 1;
        margin: 30px 0;
    }
    
    .potato-center-image {
        width: 150px;
        height: 150px;
        margin: 0 auto;
        display: block;
    }
    
    .potato-fact.top { order: 2; }
    .potato-fact.left { order: 3; }
    .potato-fact.right { order: 4; }
    .potato-fact.bottom { order: 5; }
    
    .btn-outline {
        margin-left: 0;
        margin-top: 15px;
        display: inline-block;
    }
    
    /* About page mobile adjustments */
    .hero-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
    
    .hero-stat {
        min-width: 100px;
        padding: 15px;
    }
    
    .timeline-point {
        position: static;
        margin-bottom: 20px;
        animation: none;
    }
    
    .timeline-point .point-text {
        color: var(--text-main);
        text-shadow: none;
    }
    
    .hero-timeline-line {
        display: none;
    }
    
    .circular-timeline {
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 500px;
    }
    
    .circular-timeline::before {
        display: none;
    }
    
    .center-story {
        position: static;
        transform: none;
        margin: 0 auto 30px;
        order: -1;
        width: 200px;
        height: 200px;
    }
    
    .timeline-item {
        position: static;
        width: 100%;
        animation: none !important;
    }
    
    .timeline-card {
        display: flex;
        align-items: center;
        text-align: left;
        gap: 20px;
        padding: 20px;
    }
    
    .year-badge {
        margin: 0;
        flex-shrink: 0;
    }
    
    .timeline-card h4 {
        min-height: auto;
        display: block;
        margin-bottom: 5px;
    }
    
    .timeline-connector {
        display: none;
    }
    
    .green-practices-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        gap: 20px;
    }
    
    .green-commitment {
        padding: 30px 20px;
        margin-top: 40px;
    }
    
    /* Mobile menu adjustments */
    .mobile-menu-content {
        width: 280px;
        padding: 20px;
    }
    
    .mobile-nav-link {
        font-size: 1rem;
        padding: 10px 0;
    }
}

/* Extra Small Screens */
@media (max-width: 576px) {
    .container {
        padding: 0 15px;
    }
    
    .hero {
        padding: 120px 0 60px;
    }
    
    .hero-text h1 {
        font-size: 1.8rem;
        margin-bottom: 15px;
    }
    
    .hero-text p {
        font-size: 0.95rem;
        margin-bottom: 20px;
    }
    
    .hero-image-container {
        width: 280px;
        height: 280px;
    }
    
    .hero-badge {
        width: 90px;
        height: 90px;
        font-size: 0.8rem;
    }
    
    .timeline-hero-container {
        width: 280px;
        height: 280px;
    }
    
    section {
        padding: 70px 0;
    }
    
    .section-title h2 {
        font-size: 1.6rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .feature-card {
        padding: 25px 15px;
    }
    
    .potato-fact .fact-content {
        padding: 15px;
    }
    
    .fact-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .potato-fact h4 {
        font-size: 1.1rem;
    }
    
    .logo-scroll-item {
        width: 130px;
        height: 70px;
        padding: 15px;
    }
    
    .client-logo {
        max-height: 50px;
    }
    
    @keyframes scrollLogos {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-130px * 8 - 30px * 8)); }
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-column h3::after {
        width: 30px;
    }
    
    .mobile-menu-btn {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
    
    .mobile-menu-content {
        width: 250px;
        padding: 15px;
    }
    
    /* Circular timeline extra small screens */
    .circular-timeline {
        max-width: 100%;
        gap: 20px;
    }
    
    .timeline-card {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 25px 20px;
    }
    
    .timeline-card h4 {
        min-height: auto;
    }
    
    .center-story {
        width: 180px;
        height: 180px;
        padding: 25px;
    }
    
    .center-story h3 {
        font-size: 1.2rem;
    }
    
    .green-practice-card {
        padding: 25px 20px;
    }
    
    .green-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    /* About page extra small screens */
    .hero-stat h3 {
        font-size: 1.6rem;
    }
    
    .hero-stat p {
        font-size: 0.8rem;
    }
    
    .principles-grid {
        gap: 20px;
    }
    
    .principle-card {
        padding: 30px 20px;
    }
    
    .card-icon {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }
    
    .legacy-highlights {
        grid-template-columns: 1fr;
    }
    
    .highlight {
        padding: 12px;
    }
}

/* Very Small Screens */
@media (max-width: 375px) {
    .hero-text h1 {
        font-size: 1.6rem;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
    
    .hero-image-container {
        width: 220px;
        height: 220px;
    }
    
    .section-title h2 {
        font-size: 1.4rem;
    }
    
    .mobile-menu-content {
        width: 100%;
        right: -100%;
    }
    
    .mobile-menu-content.active {
        right: 0;
    }
    
    .logo-image {
        height: 40px;
    }
    
    .logo-scroll-item {
        width: 110px;
        height: 60px;
        padding: 10px;
    }
    
    .client-logo {
        max-height: 40px;
    }
    
    @keyframes scrollLogos {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-110px * 8 - 20px * 8)); }
    }
}

/* Landscape Mode for Mobile */
@media (max-height: 600px) and (orientation: landscape) {
    .hero {
        padding: 120px 0 60px;
    }
    
    .hero-content {
        flex-direction: row;
        text-align: left;
    }
    
    .hero-text {
        margin-bottom: 0;
        margin-right: 30px;
    }
    
    .hero-image-container {
        width: 250px;
        height: 250px;
    }
    
    .mobile-menu-content {
        padding: 20px;
    }
    
    .mobile-nav ul li {
        margin-bottom: 10px;
    }
    
    .mobile-nav-link {
        padding: 8px 0;
        font-size: 0.9rem;
    }
}

/* High Resolution Screens */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }
    
    .hero-text h1 {
        font-size: 4.5rem;
    }
    
    .hero-text p {
        font-size: 1.4rem;
    }
    
    .section-title h2 {
        font-size: 3.5rem;
    }
    
    .potato-center-layout {
        max-width: 1200px;
        height: 700px;
    }
    
    .potato-center-image {
        width: 300px;
        height: 300px;
    }
    
    .potato-fact {
        width: 280px;
    }
    
    .potato-fact .fact-content {
        padding: 30px;
    }
    
    .fact-icon {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
    
    .circular-timeline {
        height: 1000px;
        max-width: 1100px;
    }
}

/* Print Styles */
@media print {
    .mobile-menu-btn,
    .mobile-menu-overlay,
    .mobile-menu-content,
    .btn-outline {
        display: none !important;
    }
    
    body {
        background-color: white !important;
        color: black !important;
    }
    
    .feature-card,
    .potato-fact .fact-content,
    .logo-scroll-item,
    .timeline-card,
    .principle-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
    
    .hero-img,
    .timeline-hero-img {
        border: 2px solid #ddd !important;
    }
    
    a {
        color: black !important;
        text-decoration: underline !important;
    }
    
    .bg-pattern {
        display: none !important;
    }
}