/* ==========================================
   Workfuel 工作燃料網站 - 響應式設計
   ========================================== */

/* ==========================================
   平板設備 (768px - 1024px)
   ========================================== */

@media screen and (max-width: 1024px) {
    :root {
        --container-lg: 90%;
    }
    
    .navbar .container {
        grid-template-columns: 1fr auto;
    }
    
    /* 導航欄響應式 */
    .navbar__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 400px;
        height: 100vh;
        background-color: var(--bg-primary);
        flex-direction: column;
        justify-content: flex-start;
        padding: var(--spacing-2xl) var(--spacing-xl);
        transition: right var(--transition-normal);
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        z-index: 1001;
    }
    
    .navbar__menu.active {
        right: 0;
    }
    
    .navbar__list {
        flex-direction: column;
        width: 100%;
        margin-bottom: var(--spacing-2xl);
        border-radius: 24px;
        padding: .75rem;
    }
    
    .navbar__item {
        width: 100%;
    }
    
    .navbar__actions {
        width: 100%;
        justify-content: stretch;
    }
    
    .navbar__link {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        padding: var(--spacing-md) var(--spacing-lg);
        border-radius: var(--radius-md);
        transition: background-color var(--transition-normal);
    }
    
    .navbar__link:hover {
        background-color: var(--gray-100);
    }
    
    .navbar__toggle {
        display: flex;
        z-index: 1002;
    }
    
    .navbar__toggle.active .navbar__toggle-line:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }
    
    .navbar__toggle.active .navbar__toggle-line:nth-child(2) {
        opacity: 0;
    }
    
    .navbar__toggle.active .navbar__toggle-line:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }
    
    /* Hero 區域響應式 */
    .hero {
        min-height: auto;
        padding: calc(var(--navbar-height) + 2rem) 0 3rem;
    }

    .hero__content {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
        text-align: center;
    }

    .product-hero__content,
    .comparison-hero__content {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }

    .product-hero__text,
    .comparison-hero__text {
        max-width: 100%;
    }

    .product-hero__image,
    .comparison-hero__image {
        max-width: 560px;
        margin: 0 auto;
    }
    
    .hero__title {
        font-size: var(--font-size-4xl);
    }
    
    .hero__subtitle {
        font-size: var(--font-size-xl);
        justify-content: center;
    }
    
    .hero__actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .product-hero__actions,
    .comparison-hero__actions {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }

    .hero__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero-stat {
        text-align: center;
    }
    
    .hero__features {
        justify-content: center;
        flex-wrap: wrap;
    }

    .guide-grid,
    .guide-cards,
    .brand-reviews,
    .brand-analysis__grid,
    .audience-analysis__grid,
    .final-recommendation__content,
    .contact-grid,
    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .newsletter-content {
        max-width: 100%;
    }

    .recipes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cooking-step {
        grid-template-columns: 1fr;
    }

    .product-features__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nutrition-info__content {
        grid-template-columns: 1fr;
    }

    .cooking-instructions__grid,
    .cooking-tips__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cooking-instructions__grid .instruction-step:last-child,
    .cooking-tips__grid .cooking-tip:last-child {
        grid-column: 1 / -1;
    }

    .product-faq__cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .guide-page .hero {
        padding: calc(var(--navbar-height) + 1.5rem) 0 2.2rem;
    }

    .guide-page .hero__title {
        font-size: clamp(2rem, 7vw, 2.55rem);
        line-height: 1.18;
        margin-bottom: .8rem;
    }

    .guide-page .hero__subtitle {
        font-size: 1rem;
        line-height: 1.75;
        max-width: 36ch;
        margin: 0 auto;
    }

    .guide-page .section {
        padding: 2.15rem 0;
    }

    .guide-page .section-header {
        margin-bottom: 1.35rem;
        text-align: left;
    }

    .guide-page .section-description {
        margin: 0;
        max-width: none;
        font-size: .98rem;
    }

    .guide-page .guide-cards {
        gap: .85rem;
    }

    .guide-page .guide-card {
        padding: 1.05rem;
        border-radius: 18px;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    }

    .guide-page .guide-card__number {
        width: 34px;
        height: 34px;
        margin-bottom: .65rem;
        font-size: .92rem;
    }

    .guide-page .guide-card__title {
        font-size: 1.06rem;
        margin-bottom: .3rem;
    }

    .guide-page .guide-card__description {
        font-size: .94rem;
        line-height: 1.72;
    }

    .guide-page .guide-card__tips {
        padding: .85rem;
        border-radius: 12px;
    }

    .guide-page .guide-card__tips ul {
        margin-left: 1rem;
        gap: .35rem;
    }

    .guide-page .cta__content {
        text-align: left;
    }

    .guide-page .cta__actions {
        gap: .75rem;
    }
    
    /* 特色區域響應式 */
    .features__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    /* 適合族群響應式 */
    .audience-card {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
    }
    
    .audience-card__image img {
        height: 200px;
    }
    
    /* 比較表格響應式 */
    .comparison__table {
        font-size: var(--font-size-sm);
    }
    
    .comparison__table th,
    .comparison__table td {
        padding: var(--spacing-sm);
    }
    
    /* CTA 區域響應式 */
    .cta__actions {
        flex-direction: column;
        align-items: center;
    }
    
    /* Footer 響應式 */
    .footer__content {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--spacing-xl);
    }
    
    .footer__legal {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }
}

/* ==========================================
   手機設備 (最大 767px)
   ========================================== */

@media screen and (max-width: 767px) {
    :root {
        --font-size-base: 0.875rem;
        --spacing-md: 0.75rem;
        --spacing-lg: 1rem;
        --spacing-xl: 1.5rem;
        --spacing-2xl: 2rem;
        --spacing-3xl: 2.5rem;
        --spacing-4xl: 3rem;
    }
    
    /* 容器響應式 */
    .container {
        padding: 0 var(--spacing-lg);
    }
    
    /* 導航欄響應式 */
    .navbar__menu {
        width: 100%;
        max-width: none;
        padding: var(--spacing-xl);
    }
    
    .language-switcher {
        width: 100%;
        justify-content: center;
    }
    
    .navbar__logo img {
        width: 42px;
        height: 42px;
    }

    .navbar__logo-text {
        font-size: 0.95rem;
    }
    
    /* Hero 區域響應式 */
    .hero {
        min-height: auto;
        padding: calc(var(--navbar-height) + 1.5rem) 0 var(--spacing-3xl);
    }

    .product-hero,
    .comparison-hero {
        padding: calc(var(--navbar-height) + 1.5rem) 0 var(--spacing-3xl);
    }
    
    .hero__title {
        font-size: var(--font-size-3xl);
        margin-bottom: var(--spacing-md);
    }
    
    .hero__subtitle {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-md);
        justify-content: center;
    }
    
    .hero__description {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-xl);
    }
    
    .hero__actions {
        flex-direction: column;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-xl);
    }

    .product-hero__actions,
    .comparison-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__stats {
        grid-template-columns: 1fr;
        gap: .65rem;
    }
    
    .hero__features {
        justify-content: center;
        gap: .5rem;
    }

    .comparison-snapshot {
        padding: var(--spacing-lg);
    }

    .comparison-snapshot__brands {
        grid-template-columns: 1fr;
    }

    .comparison-snapshot__metrics li {
        padding: .55rem .65rem;
    }

    .comparison-snapshot__value {
        font-size: .9rem;
    }

    .section {
        padding: var(--spacing-3xl) 0;
    }

    /* Blog 手機版：精選文章改單欄，避免雙欄最小寬度造成橫向溢出 */
    .featured-article {
        grid-template-columns: 1fr;
    }

    .featured-article__content,
    .featured-article__image,
    .featured-article__title,
    .featured-article__excerpt {
        min-width: 0;
    }

    .featured-article__image img {
        min-height: 220px;
    }

    .newsletter-content,
    .guide-card,
    .brand-review,
    .brand-card,
    .audience-match,
    .recommendation-summary,
    .recommendation-cta,
    .contact-card,
    .benefit-card,
    .cooking-step,
    .recipe-card__content {
        padding: var(--spacing-lg);
    }

    .newsletter-input-group {
        flex-direction: column;
    }

    .newsletter-input,
    .newsletter-submit {
        width: 100%;
    }

    .newsletter-privacy {
        justify-content: flex-start;
    }

    .cta-actions,
    .faq-contact__actions,
    .recommendation-cta__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .faq-contact__actions {
        gap: .85rem;
    }

    .faq-contact__actions .btn {
        flex: 0 0 auto;
        max-width: none;
        min-height: 0;
        padding: .9rem 1rem;
        gap: .75rem;
    }

    .faq-contact__cta-icon {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 12px;
        font-size: .95rem;
    }

    .faq-contact__cta-title {
        font-size: .98rem;
    }

    .faq-contact__cta-subtitle {
        font-size: .82rem;
        line-height: 1.4;
    }

    .recommendation-point {
        grid-template-columns: 1fr;
    }

    .faq__question {
        font-size: 1rem;
    }

    .brand-review__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-features,
    .nutrition-info,
    .cooking-instructions,
    .product-faq {
        padding: var(--spacing-3xl) 0;
    }

    .product-features__grid,
    .cooking-instructions__grid,
    .cooking-tips__grid {
        grid-template-columns: 1fr;
    }

    .product-features .feature-card,
    .nutrition-info__table-wrapper,
    .nutrition-info__notes,
    .instruction-step,
    .cooking-instructions__tips,
    .product-faq__cta {
        padding: var(--spacing-lg);
    }

    .nutrition-info__table-wrapper {
        overflow-x: auto;
    }

    .nutrition-table {
        min-width: 520px;
    }

    .product-faq__cta {
        align-items: stretch;
    }

    .cta__guarantee {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .recipes-grid,
    .benefits-grid {
        grid-template-columns: 1fr;
    }

    /* 按鈕響應式 */
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .btn--large {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-base);
    }
    
    /* 區段標題響應式 */
    .section-header {
        margin-bottom: var(--spacing-2xl);
    }
    
    .section-title {
        font-size: var(--font-size-3xl);
        margin-bottom: var(--spacing-md);
    }
    
    .section-description {
        font-size: var(--font-size-base);
    }
    
    /* 特色區域響應式 */
    .features {
        padding: var(--spacing-3xl) 0;
    }
    
    .feature-card {
        padding: var(--spacing-xl);
    }
    
    .feature-card__icon {
        width: 60px;
        height: 60px;
        font-size: var(--font-size-2xl);
    }
    
    /* 適合族群響應式 */
    .audience {
        padding: var(--spacing-3xl) 0;
    }
    
    .audience-card {
        padding: var(--spacing-xl);
    }
    
    .audience-card__title {
        font-size: var(--font-size-xl);
    }
    
    /* 比較區域響應式 */
    .comparison {
        padding: var(--spacing-3xl) 0;
    }
    
    .comparison__table-wrapper {
        margin-bottom: var(--spacing-xl);
    }
    
    .comparison__table {
        font-size: var(--font-size-xs);
    }

    .comparison-table {
        font-size: var(--font-size-xs);
    }
    
    .comparison__table th,
    .comparison__table td {
        padding: var(--spacing-xs);
        word-break: break-word;
    }

    .comparison-table th,
    .comparison-table td {
        padding: var(--spacing-xs);
        word-break: break-word;
    }

    .comparison-brand img {
        height: 22px;
    }

    .comparison-brand span {
        font-size: .76rem;
    }
    
    .comparison__cta .btn {
        width: auto;
    }
    
    /* CTA 區域響應式 */
    .cta {
        padding: var(--spacing-3xl) 0;
    }
    
    .cta__title {
        font-size: var(--font-size-2xl);
    }
    
    .cta__description {
        font-size: var(--font-size-base);
    }
    
    /* Footer 響應式 */
    .footer {
        padding: var(--spacing-3xl) 0 var(--spacing-lg);
    }
    
    .footer__content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        text-align: center;
    }
    
    .footer__social {
        justify-content: center;
    }
    
    .footer__legal-links {
        justify-content: center;
    }
}

/* ==========================================
   超小手機設備 (最大 480px)
   ========================================== */

@media screen and (max-width: 480px) {
    :root {
        --font-size-base: 0.8125rem;
        --spacing-lg: 0.5rem;
        --spacing-xl: 1rem;
        --spacing-2xl: 1.5rem;
        --spacing-3xl: 2rem;
    }
    
    /* 導航欄響應式 */
    .navbar .container {
        padding: 0 var(--spacing-md);
    }
    
    /* Hero 區域響應式 */
    .hero__title {
        font-size: var(--font-size-2xl);
    }
    
    .hero__subtitle {
        font-size: var(--font-size-base);
    }

    .hero-stat {
        padding: .75rem .85rem;
    }

    .hero-stat__value {
        font-size: 1rem;
    }

    .hero-stat__label {
        font-size: .8rem;
    }
    
    .hero__description {
        font-size: var(--font-size-sm);
    }

    .featured-article__image img {
        min-height: 190px;
    }

    .newsletter-content {
        border-radius: 18px;
    }

    .cta-title {
        font-size: var(--font-size-2xl);
    }

    .cta-description {
        font-size: var(--font-size-sm);
    }
    
    /* 按鈕響應式 */
    .btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    .guide-page .hero {
        padding: calc(var(--navbar-height) + 1.2rem) 0 1.8rem;
    }

    .guide-page .hero__title {
        font-size: 1.9rem;
    }

    .guide-page .hero__subtitle {
        font-size: .95rem;
    }

    .guide-page .section {
        padding: 1.8rem 0;
    }

    .guide-section__eyebrow {
        margin-bottom: .7rem;
        padding: .35rem .7rem;
        font-size: .76rem;
    }

    .guide-page .guide-card {
        padding: .95rem;
        border-radius: 16px;
    }

    .guide-page .guide-card__title {
        font-size: 1rem;
    }

    .guide-page .guide-card__description {
        font-size: .9rem;
    }

    .guide-page .guide-card__tips {
        padding: .75rem .8rem;
    }

    .faq-contact__actions .btn {
        padding: .8rem .9rem;
        gap: .65rem;
        border-radius: 16px;
    }

    .faq-contact__cta-icon {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        border-radius: 10px;
        font-size: .9rem;
    }

    .faq-contact__cta-title {
        font-size: .92rem;
    }

    .faq-contact__cta-subtitle {
        font-size: .78rem;
    }

    /* 區段標題響應式 */
    .section-title {
        font-size: var(--font-size-2xl);
    }
    
    .section-description {
        font-size: var(--font-size-sm);
    }
    
    /* 特色區域響應式 */
    .feature-card {
        padding: var(--spacing-lg);
    }
    
    .feature-card__title {
        font-size: var(--font-size-lg);
    }
    
    .feature-card__description {
        font-size: var(--font-size-sm);
    }

    .comparison-snapshot__brand img {
        height: 24px;
    }

    .comparison-snapshot__value {
        font-size: .85rem;
    }

    .instruction-step__title {
        font-size: var(--font-size-lg);
    }

    .instruction-step__description,
    .cooking-tip__content p,
    .nutrition-info__disclaimer {
        font-size: var(--font-size-sm);
    }

    .nutrition-table {
        min-width: 440px;
    }
    
    /* 適合族群響應式 */
    .audience-card {
        padding: var(--spacing-lg);
    }
    
    .audience-card__title {
        font-size: var(--font-size-lg);
    }
    
    .audience-card__description {
        font-size: var(--font-size-sm);
    }
    
    /* 比較表格響應式 */
    .comparison__table {
        font-size: 0.7rem;
    }

    .comparison-table {
        font-size: 0.7rem;
    }
    
    .comparison__table th,
    .comparison__table td {
        padding: var(--spacing-xs) 2px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: var(--spacing-xs) 2px;
    }

    .comparison-brand img {
        height: 20px;
    }
    
    /* Footer 響應式 */
    .footer__legal {
        font-size: var(--font-size-sm);
    }
    
    .footer__legal-links {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

/* ==========================================
   橫向模式優化
   ========================================== */

@media screen and (max-height: 600px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 100px 0 var(--spacing-2xl);
    }
    
    .hero__content {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }
    
    .hero__title {
        font-size: var(--font-size-3xl);
    }
    
    .hero__subtitle {
        font-size: var(--font-size-lg);
    }
}

/* ==========================================
   觸控設備優化
   ========================================== */

@media (hover: none) and (pointer: coarse) {
    .btn:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }
    
    .feature-card:hover {
        transform: none;
    }
    
    .audience-card:hover {
        transform: none;
    }
    
    .navbar__link:hover {
        background-color: transparent;
    }
    
    .navbar__link.active {
        background-color: rgba(46, 125, 50, 0.1);
    }
}

/* ==========================================
   列印樣式
   ========================================== */

@media print {
    .header,
    .footer,
    .back-to-top,
    .btn--outline {
        display: none !important;
    }
    
    .hero {
        min-height: auto;
        padding: var(--spacing-xl) 0;
    }
    
    .hero__content {
        color: var(--text-primary);
    }
    
    .hero__background {
        display: none;
    }
    
    .hero__overlay {
        display: none;
    }
    
    .section-title {
        color: var(--text-primary);
    }
    
    .comparison__table {
        box-shadow: none;
        border: 1px solid var(--gray-300);
    }
    
    .comparison__table th {
        background-color: var(--gray-100) !important;
        color: var(--text-primary) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}