/* ============================================
   ATELIER LUMIÈRE — MOBILE CSS
   Mobile-first responsive design
   Breakpoints: tablet 768px, mobile 640px, small 480px
   ============================================ */

/* ============= TABLET (≤ 1024px) ============= */
@media (max-width: 1024px) {
  :root {
    --al-header-h: 76px;
    --al-gutter: 1.25rem;
  }

  /* Header */
  .al-menu { gap: 1.75rem; }
  .al-menu a { font-size: 0.65rem; letter-spacing: 0.25em; }

  /* Hero */
  .al-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .al-hero-visual {
    height: 50vh;
    min-height: 400px;
  }

  /* Stats */
  .al-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .al-stat { text-align: center; }

  /* Collections */
  .al-collections-grid {
    grid-template-columns: 1fr;
  }
  .al-collection-card-lg {
    grid-row: auto;
    min-height: 60vh;
  }
  .al-collection-card-wide {
    margin-top: 0;
    min-height: 35vh;
  }

  /* Products */
  .al-products-grid,
  .al-shop-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Timeline */
  .al-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.5rem;
  }

  /* Testimonials */
  .al-testimonials-grid {
    grid-template-columns: 1fr;
  }

  /* Journal */
  .al-journal-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* About */
  .al-about-hero-grid,
  .al-about-atelier-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .al-about-hero-image,
  .al-about-atelier-image {
    height: 50vh;
    min-height: 400px;
  }
  .al-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Contact */
  .al-contact-methods-grid {
    grid-template-columns: 1fr;
  }
  .al-contact-grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .al-footer-newsletter {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .al-footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  /* Single product */
  .single-product div.product {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Cart table */
  .woocommerce-cart-form table.shop_table td.product-price,
  .woocommerce-cart-form table.shop_table th.product-price {
    display: none;
  }

  /* WooCommerce account */
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
    float: none;
  }
}

/* ============= MOBILE (≤ 768px) ============= */
@media (max-width: 768px) {
  :root {
    --al-header-h: 64px;
    --al-gutter: 1rem;
  }

  body {
    font-size: 15px;
  }

  /* Hide custom cursor on touch devices */
  .al-cursor, .al-cursor-ring { display: none !important; }
  body { cursor: auto !important; }

  /* Header — collapse nav to hamburger */
  .al-header-inner {
    padding: 0.875rem 0;
    gap: 1rem;
  }

  .al-nav { display: none; }

  .al-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    order: -1;
  }
  .al-menu-icon {
    position: relative;
    width: 24px;
    height: 16px;
    display: inline-block;
  }
  .al-menu-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: var(--al-text);
    transition: all 0.3s var(--al-transition);
  }
  .al-menu-icon span:nth-child(1) { top: 0; }
  .al-menu-icon span:nth-child(2) { top: 50%; transform: translateY(-50%); }
  .al-menu-icon span:nth-child(3) { bottom: 0; }
  body.al-menu-open .al-menu-icon span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  body.al-menu-open .al-menu-icon span:nth-child(2) { opacity: 0; }
  body.al-menu-open .al-menu-icon span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
  }

  /* Logo — smaller on mobile */
  .al-logo-text { font-size: 1.25rem; }
  .custom-logo-link img { max-height: 40px; }

  /* Search overlay */
  .al-search-overlay {
    padding: 5rem 1rem 2rem;
  }
  .al-search-overlay-inner {
    flex-direction: row;
    gap: 0.75rem;
  }
  .al-search-field {
    font-size: 1.1rem;
  }
  .al-search-close {
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
  }

  /* Announcement bar — slower for readability */
  .al-announcement-track {
    animation-duration: 60s;
  }

  /* Hero — stack with image on top */
  .al-hero {
    padding: 2rem 0 4rem;
    min-height: auto;
  }
  .al-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .al-hero-visual {
    order: -1;
    height: 60vh;
    min-height: 360px;
  }
  .al-hero-stat-card {
    bottom: -1rem;
    left: 0;
    padding: 1rem 1.25rem;
    max-width: 180px;
  }
  .al-hero-stat-value { font-size: 1.75rem; }
  .al-hero-stat-label { font-size: 0.6rem; }
  .al-hero-title {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }
  .al-hero-ctas {
    flex-direction: column;
    width: 100%;
  }
  .al-hero-ctas .al-btn {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    font-size: 0.65rem;
  }

  /* Stats — 2x2 grid */
  .al-stats {
    padding: 3rem 0;
  }
  .al-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1rem;
  }
  .al-stat-value {
    font-size: clamp(2.5rem, 12vw, 3.5rem);
  }

  /* Collections — single column */
  .al-collections { padding: 4rem 0; }
  .al-collections-grid {
    grid-template-columns: 1fr;
  }
  .al-collections-col-2 {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
  .al-collection-card-lg,
  .al-collections-col-2 .al-collection-card,
  .al-collection-card-wide {
    min-height: 50vh;
  }
  .al-collection-overlay { padding: 1.5rem; }
  .al-collection-card-lg .al-collection-title { font-size: 2.5rem; }
  .al-collection-title { font-size: 2rem; }

  /* Products — 2 columns */
  .al-new-arrivals,
  .al-best-sellers {
    padding: 4rem 0;
  }
  .al-products-grid,
  .al-products-grid-3,
  .al-products-grid-2,
  .al-shop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* Product card — adjust for mobile */
  .al-product-image-wrap {
    margin-bottom: 0.75rem;
  }
  .al-product-name {
    font-size: 0.85rem;
    line-height: 1.3;
  }
  .al-product-name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .al-product-meta {
    font-size: 0.75rem;
  }
  .al-product-price { font-size: 0.8rem; }
  .al-product-rating { font-size: 0.65rem; }

  /* Quick add button — always visible on mobile (no hover) */
  .al-quick-add {
    opacity: 1;
    transform: translateY(0);
    padding: 0.5rem;
    font-size: 0.55rem;
    letter-spacing: 0.25em;
  }

  /* Section titles */
  .al-section-head {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 2.5rem;
  }
  .al-section-title {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }
  .al-section-head-desc {
    flex: none;
    width: 100%;
  }

  /* Timeline — single column */
  .al-heritage { padding: 4rem 0; }
  .al-timeline {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .al-timeline-year { font-size: 2.5rem; }

  /* Quote */
  .al-quote { padding: 4rem 0; }
  .al-quote-mark { font-size: 3.5rem; }
  .al-quote-text {
    font-size: clamp(1.25rem, 5vw, 1.5rem);
  }

  /* Testimonials */
  .al-testimonials { padding: 4rem 0; }
  .al-testimonial {
    padding: 1.5rem;
  }
  .al-testimonial-quote {
    font-size: 1.05rem;
  }

  /* Journal */
  .al-journal-teaser,
  .al-journal { padding: 4rem 0; }
  .al-journal-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .al-journal-title { font-size: 1.4rem; }
  .al-journal-excerpt { font-size: 0.875rem; }

  /* About page */
  .al-about-hero { padding: 2rem 0; }
  .al-about-title { font-size: clamp(2.25rem, 8vw, 3rem); }
  .al-about-atelier { padding: 4rem 0; }
  .al-about-process { padding: 4rem 0; }
  .al-process-grid {
    grid-template-columns: 1fr;
  }

  /* Contact */
  .al-contact-hero { padding: 2rem 0 2rem; }
  .al-contact-title { font-size: clamp(2.5rem, 10vw, 3.5rem); }
  .al-contact-methods { padding: 2rem 0; }
  .al-contact-method {
    padding: 1.5rem;
  }
  .al-contact-method-value { font-size: 1.25rem; }
  .al-contact-form-section { padding: 2rem 0; }
  .al-form-row-2 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .al-contact-faq { padding: 4rem 0; }
  .al-faq-item { padding: 1.25rem; }
  .al-faq-q { font-size: 1rem; }

  /* Single article */
  .al-article-header { padding: 2rem 0 2rem; }
  .al-article-title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }
  .al-article-body {
    font-size: 1rem;
    line-height: 1.75;
  }
  .al-lead-paragraph {
    font-size: 1.25rem;
  }
  .al-author-bio-inner {
    flex-direction: column;
    text-align: center;
  }
  .al-author-avatar-lg img,
  .al-author-avatar-lg .avatar {
    margin: 0 auto;
  }
  .al-related { padding: 4rem 0; }
  .al-related-title { font-size: 1.5rem; }

  /* Footer */
  .al-footer {
    padding: 3rem 0 1.5rem;
  }
  .al-footer-newsletter {
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .al-footer-newsletter-title {
    font-size: 1.75rem;
  }
  .al-footer-newsletter-form {
    flex-direction: column;
  }
  .al-footer-newsletter-form input { width: 100%; }
  .al-footer-newsletter-form .al-btn {
    width: 100%;
    justify-content: center;
  }
  .al-footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
  }
  .al-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    text-align: left;
  }
  .al-footer-social {
    flex-wrap: wrap;
  }

  /* Single product page */
  .single-product div.product {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .single-product .al-shop-container { padding-top: 1.5rem; }
  .woocommerce div.product .product_title { font-size: 1.5rem; }
  .woocommerce div.product p.price,
  .woocommerce div.product span.price { font-size: 1.4rem; }
  .al-trust-badges {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .al-trust-badge { font-size: 0.7rem; }
  .woocommerce div.product form.cart {
    flex-direction: column;
    align-items: stretch;
  }
  .woocommerce div.product form.cart .quantity {
    width: 100%;
    justify-content: center;
  }
  .woocommerce div.product form.cart button.button,
  .woocommerce a.button {
    width: 100%;
    justify-content: center;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    gap: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    white-space: nowrap;
    font-size: 0.6rem;
  }

  /* Cart */
  .woocommerce-cart .al-shop-container { padding-top: 2rem; }
  .woocommerce-cart-form table.shop_table thead { display: none; }
  .woocommerce-cart-form table.shop_table,
  .woocommerce-cart-form table.shop_table tbody,
  .woocommerce-cart-form table.shop_table tr,
  .woocommerce-cart-form table.shop_table td {
    display: block;
    width: 100%;
  }
  .woocommerce-cart-form table.shop_table tr {
    border-bottom: 1px solid var(--al-border);
    padding: 1rem 0;
  }
  .woocommerce-cart-form table.shop_table td {
    border: none;
    padding: 0.25rem 0;
    text-align: right;
  }
  .woocommerce-cart-form table.shop_table td.product-thumbnail {
    width: 100%;
    text-align: left;
    margin-bottom: 0.5rem;
  }
  .woocommerce-cart-form table.shop_table td.product-thumbnail img {
    width: 60px;
    height: 75px;
  }
  .woocommerce-cart-form table.shop_table td.product-name {
    text-align: left;
    padding-right: 50%;
  }
  .woocommerce-cart-form table.shop_table td.product-name::before {
    content: attr(data-title);
    display: inline-block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--al-accent);
    margin-right: 0.5rem;
  }

  /* Checkout */
  .woocommerce-checkout .al-shop-container { padding-top: 2rem; }

  /* Cart drawer — full width */
  .al-cart-drawer {
    max-width: 100%;
  }

  /* Page header */
  .al-page-header { padding: 1.5rem 0 3rem; }
  .al-page-title { font-size: clamp(2rem, 7vw, 2.5rem); }

  /* 404 */
  .al-404 { padding: 4rem 0; }
  .al-404-title { font-size: 2rem; }
  .al-404-actions { flex-direction: column; }
  .al-404-actions .al-btn { width: 100%; justify-content: center; }
}

/* ============= SMALL MOBILE (≤ 480px) ============= */
@media (max-width: 480px) {
  :root {
    --al-gutter: 0.875rem;
  }

  body { font-size: 14px; }

  /* Announcement — single line text */
  .al-announcement-item { font-size: 0.6rem; letter-spacing: 0.2em; }

  /* Hero */
  .al-hero-title { font-size: 3rem; }
  .al-hero-stat-card {
    padding: 0.75rem 1rem;
    max-width: 160px;
  }
  .al-hero-stat-value { font-size: 1.5rem; }
  .al-hero-stat-label { font-size: 0.55rem; letter-spacing: 0.2em; }

  /* Stats */
  .al-stats-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .al-stat-value { font-size: 2.5rem; }

  /* Products — still 2 cols on small phones, but tighter gaps */
  .al-products-grid,
  .al-products-grid-3,
  .al-products-grid-2,
  .al-shop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .al-product-name { font-size: 0.78rem; }
  .al-product-meta { font-size: 0.7rem; }
  .al-product-price { font-size: 0.75rem; }
  .al-product-rating { font-size: 0.6rem; }

  /* Buttons */
  .al-btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.65rem;
    letter-spacing: 0.3em;
  }

  /* Section heads */
  .al-section-title { font-size: 1.75rem; }

  /* Footer */
  .al-footer-newsletter-title { font-size: 1.5rem; }

  /* Cart drawer item */
  .al-cart-drawer-item-img {
    width: 60px;
    height: 75px;
  }
  .al-cart-drawer-item-name { font-size: 0.85rem; }
}

/* ============= LARGE DESKTOP (≥ 1600px) ============= */
@media (min-width: 1600px) {
  :root {
    --al-max-width: 1500px;
    --al-gutter: 2rem;
  }
}

/* ============= REDUCED MOTION ============= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .al-hero-image { animation: none; }
  .al-announcement-track { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============= PRINT ============= */
@media print {
  .al-header, .al-footer, .al-announcement, .al-cursor, .al-cursor-ring,
  .al-mobile-menu, .al-mobile-menu-overlay, .al-cart-drawer, .al-cart-drawer-overlay {
    display: none !important;
  }
  body { background: white; color: black; }
  .al-container { max-width: 100%; }
}