/* ============================================================
   MIDORI (緑) — responsive.css
   Breakpoints: iPhone 12+ (390px+) · iPad Air 4+ (820px+)
   Desktop: 1024px+
   ============================================================ */

/* ============================================================
   TABLET — iPad Air 4 (820px wide)
   ============================================================ */
@media (max-width: 1023px) {

  /* Nav */
  .nav__links  { display: none; }
  .nav__cta    { display: none; }
  .nav__toggle { display: flex; }

  /* Hero */
  .hero__content { padding: var(--sp-12) var(--container-px); }
  .hero__sub      { font-size: var(--text-lg); }

  /* Trust bar — 2×2 grid on tablet */
  .trust-bar__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
  .trust-divider { display: none; }

  /* Origin — stack to single column */
  .origin__grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .origin__image { height: 400px; }

  /* Why — 2 + 1 layout */
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .why__card--featured { grid-column: span 2; }

  /* Products — 2 columns */
  .products__grid { grid-template-columns: repeat(2, 1fr); }
  .product-card--featured { transform: scale(1.0); grid-column: 1; }
  .product-card--featured:hover { transform: translateY(-10px); }

  /* Benefits */
  .benefits__inner { grid-template-columns: 1fr; gap: var(--sp-12); }
  .benefits__content .section-title { font-size: var(--text-4xl); }

  /* Ritual — 1 column */
  .ritual__steps { grid-template-columns: 1fr; gap: var(--sp-5); }

  /* Testimonials — 2 columns */
  .testimonials__grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-card:last-child { grid-column: span 2; }

  /* Footer — 2 col */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .footer__brand { grid-column: span 2; }

  /* Newsletter form */
  .newsletter__form-group { flex-direction: column; }
  .newsletter__input { min-width: unset; }
}

/* ============================================================
   MOBILE — iPhone 12+ (390px and larger, max 819px)
   ============================================================ */
@media (max-width: 819px) {

  :root {
    --nav-height: 64px;
    --container-px: 1.25rem;
    --sp-32: 5rem;
    --sp-24: 4rem;
    --sp-20: 3.5rem;
    --sp-16: 3rem;
  }

  /* Nav */
  .nav__inner { padding: 0 var(--container-px); }
  .nav__logo-text { font-size: var(--text-base); }
  .nav__logo-jp   { font-size: var(--text-lg); }

  /* Hero */
  .hero {
    min-height: 100svh;
    align-items: flex-end;
    padding-bottom: var(--sp-20);
  }
  .hero__content { padding: var(--sp-8) var(--container-px) var(--sp-12); }
  .hero__title   { font-size: clamp(2.8rem, 11vw, 4.5rem); }
  .hero__sub     { font-size: var(--text-base); max-width: 100%; }
  .hero__actions { flex-direction: column; gap: var(--sp-3); }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__scroll-hint  { display: none; }

  /* Trust bar — stack */
  .trust-bar { padding: var(--sp-8) 0; }
  .trust-bar__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    align-items: flex-start;
  }
  .trust-item { flex-direction: row; text-align: left; align-items: center; gap: var(--sp-4); }
  .trust-item__label { max-width: none; }
  .trust-divider { width: 100%; height: 1px; }

  /* Origin */
  .origin { padding: var(--sp-16) 0; }
  .origin__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .origin__image { height: 280px; }
  .origin__badge { bottom: var(--sp-3); right: var(--sp-3); }

  /* Why */
  .why { padding: var(--sp-16) 0; }
  .why__grid { grid-template-columns: 1fr; }
  .why__card--featured { grid-column: auto; }

  /* Products */
  .products { padding: var(--sp-16) 0; }
  .products__grid { grid-template-columns: 1fr; }
  .product-card--featured { transform: scale(1); }

  /* Benefits */
  .benefits { padding: var(--sp-16) 0; }
  .benefits__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
  .compare-row { flex-wrap: wrap; }
  .compare-label { width: 100%; font-weight: 500; }
  .compare-bar   { width: 100%; }
  .compare-val   { width: auto; }
  .benefits__stat-grid { grid-template-columns: repeat(2, 1fr); }

  /* Ritual */
  .ritual { padding: var(--sp-16) 0; }
  .ritual__steps { grid-template-columns: 1fr; gap: var(--sp-4); }
  .ritual__step  { padding: var(--sp-6); }

  /* Testimonials */
  .testimonials { padding: var(--sp-16) 0; }
  .testimonials__grid { grid-template-columns: 1fr; }
  .testimonial-card:last-child { grid-column: auto; }

  /* Newsletter */
  .newsletter { padding: var(--sp-16) 0; }
  .newsletter__jp { font-size: clamp(4rem, 18vw, 7rem); }
  .newsletter__form-group { flex-direction: column; }
  .newsletter__input { min-width: unset; width: 100%; }
  .newsletter .btn { width: 100%; justify-content: center; }

  /* Footer */
  .footer { padding: var(--sp-12) 0 var(--sp-6); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer__brand { grid-column: auto; }
  .footer__bottom { flex-direction: column; gap: var(--sp-4); }

  /* Section titles */
  .section-title { font-size: clamp(2rem, 8vw, 3rem); }
}

/* ============================================================
   SMALL PHONES — below 390px (iPhone SE, older phones)
   ============================================================ */
@media (max-width: 389px) {
  :root { --container-px: 1rem; }

  .hero__title { font-size: 2.6rem; }
  .newsletter__input { padding: var(--sp-4) var(--sp-4); }
  .product-card__body { padding: var(--sp-4); }
  .testimonial-card   { padding: var(--sp-5); }
  .why__card          { padding: var(--sp-5); }
}

/* ============================================================
   LARGE DESKTOP (1280px+ fine-tuning)
   ============================================================ */
@media (min-width: 1280px) {
  .why__card--featured { transform: scale(1.04) translateY(-4px); }
  .origin__image { height: 560px; }
}

/* ============================================================
   Touch/hover device adjustments
   ============================================================ */
@media (hover: none) {
  /* Disable hover transforms on touch devices for performance */
  .product-card:hover,
  .benefit-item:hover,
  .testimonial-card:hover,
  .origin__pillar:hover { transform: none; box-shadow: var(--shadow-sm); }

  .product-card:hover .product-card__image { transform: none; }
}

/* ============================================================
   Reduced motion preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-up,
  .animate-fade-right,
  .animate-fade-left {
    transition: opacity 0.3s ease;
    transform: none;
  }
  .newsletter__jp { animation: none; }
  .product-card--featured { animation: none; }
  .hero__scroll-line::after { animation: none; }
  .hero__image { transition: none; }
}