/**
 * Mobile Responsive Adaptations (<= 640px)
 * Food Menu Journal Design System
 */

@media (max-width: 640px) {
  /* 0. Root & Global Layout */
  :root {
    --fmj-container-padding: 14px;
  }

  html,
  body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
  }

  .site-wrapper {
    overflow-x: hidden;
    width: 100%;
  }

  .fmj-section {
    padding: 32px 0;
  }

  /* 1. Mobile Header & Branding */
  .fmj-header-main {
    height: 58px;
    gap: 8px;
  }

  .fmj-header-left {
    gap: 8px;
  }

  .fmj-menu-toggle-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--fmj-radius-sm);
    flex-shrink: 0;
  }

  .fmj-menu-toggle-btn svg {
    width: 18px;
    height: 18px;
  }

  .fmj-site-logo {
    gap: 7px;
  }

  .fmj-site-logo .fmj-logo-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
  }

  .fmj-site-logo .fmj-logo-icon svg {
    width: 17px;
    height: 17px;
  }

  /* Two-line clean mobile brand lockup */
  .fmj-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.08;
  }

  .fmj-logo-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--fmj-text-main);
    white-space: nowrap;
    letter-spacing: -0.02em;
  }

  .fmj-logo-accent {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--fmj-primary);
    white-space: nowrap;
    letter-spacing: -0.02em;
  }

  .fmj-header-right {
    gap: 6px;
  }

  .fmj-btn-pill-red {
    padding: 6px 11px;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: var(--fmj-radius-sm);
    gap: 4px;
    white-space: nowrap;
    letter-spacing: 0;
  }

  /* Hide sticky header on mobile to prevent blocking reading viewport */
  .fmj-sticky-header {
    display: none !important;
  }

  /* Mobile Horizontal Navstrip */
  .fmj-mobile-navstrip {
    display: flex !important;
    height: 42px;
    padding: 0 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .fmj-mobile-navstrip-link {
    padding: 10px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
  }

  /* 2. Homepage Hero Section */
  .fmj-hero-wrapper {
    padding: 10px 0 20px;
  }

  .fmj-hero-card {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
  }

  .fmj-hero-content {
    padding: 22px 16px;
    gap: 12px;
  }

  .fmj-hero-h1 {
    font-size: clamp(1.3rem, 5.2vw, 1.6rem);
    line-height: 1.25;
  }

  .fmj-hero-subtitle {
    font-size: 0.85rem;
    line-height: 1.5;
  }

  .fmj-hero-cta-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
    margin-top: 4px;
  }

  .fmj-hero-cta-group .fmj-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 11px 16px;
  }

  .fmj-hero-media {
    height: 200px;
    min-height: 180px;
    order: 2;
  }

  .fmj-hero-badge-top {
    font-size: 9px;
    padding: 3px 8px;
    top: 10px;
    left: 10px;
  }

  .fmj-hero-badge-bottom {
    font-size: 9px;
    padding: 3px 8px;
    bottom: 10px;
    right: 10px;
  }

  /* 3. Browse Your Way Section */
  .fmj-browse-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .fmj-browse-card {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
  }

  .fmj-browse-overlay {
    padding: 10px;
  }

  .fmj-browse-title {
    font-size: 0.92rem;
    margin-bottom: 2px;
  }

  .fmj-browse-subtitle {
    font-size: 0.68rem;
    line-height: 1.2;
  }

  /* 4. Section Headers & Navigation across all Homepage */
  .fmj-section-header-block {
    margin-bottom: 20px;
    text-align: left;
  }

  .fmj-section-header-block h2 {
    font-size: 1.35rem;
    line-height: 1.3;
  }

  .fmj-section-header-block .fmj-section-desc {
    font-size: 0.85rem;
  }

  /* View All header rows */
  .fmj-section div[style*="display: flex; align-items: flex-end"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  .fmj-section div[style*="display: flex; align-items: flex-end"] h2 {
    font-size: 1.35rem;
    line-height: 1.3;
  }

  .fmj-section div[style*="display: flex; align-items: flex-end"] .fmj-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* 5. CORE GRIDS COLLAPSE TO 1 COLUMN ON MOBILE (FIX FOR SQUEEZED POSTS BUG) */
  .fmj-grid-4,
  .fmj-grid-3,
  .fmj-grid-2,
  .fmj-posts-grid,
  .fmj-restaurants-grid,
  .fmj-chain-guides-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 6. Post Cards in Grid */
  .fmj-post-card {
    width: 100%;
  }

  .fmj-post-card .fmj-post-media {
    aspect-ratio: 16 / 9;
  }

  .fmj-post-card-body {
    padding: 16px 14px;
  }

  .fmj-post-meta {
    font-size: 0.78rem;
    gap: 8px;
    flex-wrap: wrap;
  }

  .fmj-post-card-title {
    font-size: 1.05rem;
    line-height: 1.35;
    margin-bottom: 8px;
  }

  .fmj-post-card-excerpt {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 12px;
  }

  .fmj-rest-card-btn {
    font-size: 0.85rem;
  }

  /* 7. Restaurant Cards */
  .fmj-restaurant-card {
    width: 100%;
  }

  .fmj-rest-card-body {
    padding: 14px;
  }

  .fmj-rest-logo-thumb {
    width: 40px;
    height: 40px;
  }

  .fmj-rest-title {
    font-size: 1rem;
  }

  /* 8. Menu Categories Grid */
  .fmj-categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .fmj-cat-tile {
    padding: 12px 8px;
  }

  .fmj-cat-tile-icon {
    width: 36px;
    height: 36px;
  }

  .fmj-cat-tile-name {
    font-size: 0.82rem;
  }

  /* 9. Deal Cards */
  .fmj-deal-card {
    width: 100%;
  }

  .fmj-deal-card-body {
    padding: 16px 14px;
  }

  .fmj-deal-offer-title {
    font-size: 1.02rem;
  }

  /* 10. Trust Section */
  .fmj-trust-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .fmj-trust-card {
    padding: 18px 14px;
  }

  /* 11. Editorial SEO Box */
  .fmj-editorial-card {
    padding: 22px 16px;
    border-radius: 14px;
  }

  .fmj-editorial-card h2 {
    font-size: 1.3rem;
  }

  .fmj-editorial-card p {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  /* 12. Newsletter Box */
  .fmj-newsletter-box {
    padding: 28px 16px;
    border-radius: 16px;
  }

  .fmj-newsletter-box h2 {
    font-size: 1.35rem;
  }

  .fmj-newsletter-box p {
    font-size: 0.88rem;
    margin-bottom: 18px;
  }

  .fmj-newsletter-form {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .fmj-newsletter-form input[type="email"],
  .fmj-newsletter-form button {
    width: 100%;
    height: 44px;
  }

  /* 13. Single Blog Post Styling */
  .fmj-post-hero-section {
    padding: 12px 0 20px;
  }

  .fmj-post-hero-card {
    border-radius: 16px;
  }

  .fmj-post-hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .fmj-post-hero-media {
    height: 220px;
    min-height: 200px;
    order: -1;
  }

  .fmj-post-hero-info {
    padding: 22px 16px;
    gap: 12px;
  }

  .fmj-post-hero-title {
    font-size: clamp(1.35rem, 5vw, 1.75rem);
  }

  .fmj-post-hero-metrics {
    gap: 8px;
  }

  .fmj-hero-metric-box {
    padding: 5px 10px;
  }

  .fmj-metric-lbl {
    font-size: 9px;
  }

  .fmj-metric-val {
    font-size: 0.78rem;
  }

  .fmj-post-hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .fmj-post-hero-actions .fmj-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .fmj-article-container {
    padding: 0;
  }

  .fmj-article-entry {
    padding: 20px 14px;
    border-radius: 12px;
  }

  .fmj-entry-content {
    font-size: 0.95rem;
    line-height: 1.65;
  }

  .fmj-entry-content h2 {
    font-size: 1.3rem;
    margin: 24px 0 12px;
  }

  .fmj-entry-content h3 {
    font-size: 1.15rem;
    margin: 20px 0 10px;
  }

  .fmj-entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }

  /* CRITICAL: Responsive Tables in Blog Posts and Everywhere */
  .fmj-entry-content table,
  table.fmj-price-table,
  .fmj-table-responsive table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    margin: 18px 0;
  }

  .fmj-entry-content th,
  .fmj-entry-content td {
    padding: 10px 12px;
    font-size: 0.84rem;
    white-space: nowrap;
  }

  .fmj-author-bio-card {
    flex-direction: column;
    text-align: center;
    padding: 20px 16px;
    gap: 12px;
  }

  /* 14. Single Restaurant Page */
  .fmj-restaurant-header {
    padding: 20px 0 16px;
  }

  .fmj-rest-hero-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }

  .fmj-rest-logo-large {
    width: 72px;
    height: 72px;
  }

  .fmj-rest-hero-h1 {
    font-size: 1.45rem;
  }

  .fmj-rest-badges-strip {
    justify-content: center;
    gap: 6px;
  }

  .fmj-rest-info-bar {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 12px;
  }

  .fmj-menu-category-nav {
    top: 58px;
    padding: 10px 12px;
  }

  .fmj-menu-controls-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }

  .fmj-menu-controls-left {
    justify-content: space-between;
    width: 100%;
  }

  .fmj-menu-controls-right {
    justify-content: space-between;
    width: 100%;
  }

  .fmj-in-menu-search {
    flex: 1;
  }

  .fmj-in-menu-search input {
    width: 100%;
  }

  .fmj-menu-cards-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .fmj-menu-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    display: block;
  }

  .fmj-price-table {
    min-width: 480px;
  }

  /* 15. Single Menu Item (Dish Page) */
  .fmj-dish-hero-media {
    height: 230px;
  }

  .fmj-dish-price-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }

  .fmj-dish-price-right {
    width: 100%;
  }

  .fmj-dish-price-right .fmj-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .fmj-nutrition-boxes-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .fmj-dish-cards-4,
  .fmj-dish-cards-6 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .fmj-dish-content-card,
  .fmj-dish-faq-card {
    padding: 18px 14px;
  }

  /* 16. Meal Planner */
  .fmj-planner-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .fmj-day-meals-grid {
    grid-template-columns: 1fr;
  }

  .fmj-meal-cell {
    border-right: none;
    border-bottom: 1px solid var(--fmj-border-light);
  }

  /* 17. Archives & Category Headers */
  .fmj-archive-header {
    padding: 32px 14px 26px;
  }

  .fmj-archive-title,
  .fmj-directory-title {
    font-size: 1.5rem !important;
  }

  .fmj-archive-desc,
  .fmj-directory-subtitle {
    font-size: 0.88rem !important;
  }

  /* 18. Site Footer */
  .site-footer {
    padding: 36px 0 20px;
  }

  .fmj-footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 28px;
  }

  .fmj-footer-bottom {
    padding-top: 18px;
  }

  .fmj-footer-copyright-bar {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .fmj-footer-legal-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
}

/* Extra Small Devices (<= 380px, e.g. iPhone SE / Galaxy Mini) */
@media (max-width: 380px) {
  :root {
    --fmj-container-padding: 10px;
  }

  .fmj-logo-title,
  .fmj-logo-accent {
    font-size: 0.86rem;
  }

  .fmj-site-logo {
    gap: 5px;
  }

  .fmj-btn-pill-red {
    padding: 5px 8px;
    font-size: 0.74rem;
  }

  .fmj-menu-toggle-btn {
    width: 35px;
    height: 35px;
  }

  .fmj-header-main {
    gap: 6px;
  }
}