/* ==========================================================================
   Mettle Coffee Club — responsive.css
   Breakpoint overrides
   ========================================================================== */

/*
  Breakpoints:
  --bp-sm  : 480px   (小さいSP)
  --bp-md  : 768px   (タブレット)
  --bp-lg  : 1024px  (デスクトップ境界)
  --bp-xl  : 1280px  (ワイドデスクトップ)
*/

/* --------------------------------------------------------------------------
   Tablet 〜 (768px 以上)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .section {
    padding-block: var(--space-16);
  }

  .section__title {
    font-size: var(--text-3xl);
  }
}


/* --------------------------------------------------------------------------
   Desktop (1024px 以上) — デスクトップナビを表示
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .nav-desktop {
    display: flex;
  }

  .site-header__hamburger {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   Mobile 〜 (1023px 以下) — モバイルレイアウト
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {

  /* ヘッダーの高さ */
  .site-header {
    height: var(--header-height-sp);
  }

  /* デスクトップナビを非表示 */
  .nav-desktop {
    display: none;
  }

  /* ハンバーガーを表示 */
  .site-header__hamburger {
    display: flex;
  }

  /* アカウントアイコン: SP ではツールチップを完全に無効化 */
  .site-header__account-tooltip {
    display: none;
  }

  /* コンテナのpadding縮小 */
  .container {
    padding-inline: var(--space-3);
  }

  /* セクション間隔を縮小 */
  .section {
    padding-block: var(--space-10);
  }

  .section--lg {
    padding-block: var(--space-12);
  }

  .section__title {
    font-size: var(--text-2xl);
  }

  .section__header {
    margin-bottom: var(--space-6);
  }

  /* フッターグリッド → 2列 */
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* グリッドSP用リセット */
  .grid-12 {
    grid-template-columns: repeat(4, 1fr);
  }

  .col-3, .col-4, .col-6 {
    grid-column: span 4;
  }
}


/* --------------------------------------------------------------------------
   Small Mobile (〜 599px)
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {

  :root {
    --container-pad: var(--space-3);
  }

  .section {
    padding-block: var(--space-8);
  }

  .section__title {
    font-size: var(--text-xl);
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .btn--lg {
    padding: 16px var(--space-5);
    font-size: var(--text-sm);
  }
}


/* --------------------------------------------------------------------------
   Homepage sections — responsive overrides
   -------------------------------------------------------------------------- */

/* Tablet〜 (768px〜) */
@media (min-width: 768px) and (max-width: 1023px) {
  .product-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .our-roasting__inner {
    gap: var(--space-10);
  }
}

/* Mobile (〜 1023px) */
@media (max-width: 1023px) {

  /* Hero */
  .hero {
    height: 80vh;
    min-height: 480px;
  }

  .hero__overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0.6) 100%
    );
  }

  .hero__content {
    align-self: flex-end;
    padding-bottom: var(--space-12);
  }

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

  /* Our Roasting */
  .our-roasting__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .our-roasting__image-wrap {
    order: -1;
  }

  .our-roasting__stats {
    gap: var(--space-5);
  }

  /* Subscribe CTA */
  .subscribe-cta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .subscribe-cta__action {
    width: 100%;
  }

  .subscribe-cta__btn {
    width: 100%;
    justify-content: center;
  }

  /* Journal */
  .journal-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* Small Mobile (〜 599px) */
@media (max-width: 599px) {

  .product-grid--3col {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .new-arrivals__all-link,
  .journal-section__all-link {
    margin-left: 0;
    flex-basis: 100%;
  }

  .our-roasting__stats {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .hero {
    height: 85vh;
  }
}


/* --------------------------------------------------------------------------
   Product Card — responsive overrides (Step 4)
   -------------------------------------------------------------------------- */

/* Tablet: 2列 */
@media (min-width: 768px) and (max-width: 1023px) {
  .product-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* SP: 2列（要件: SP 2列） */
@media (max-width: 767px) {
  .product-grid--3col {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .product-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .product-card__cta {
    width: 100%;
    justify-content: center;
  }

  /* フレーバーバッジ: 小さい画面では最大2件 */
  .product-card__flavors .flavor-badge:nth-child(n+3) {
    display: none;
  }
}

/* 極小SP: 1列 */
@media (max-width: 359px) {
  .product-grid--3col {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   Shop Filter Bar — responsive overrides (Step 5)
   -------------------------------------------------------------------------- */

/* フィルタバーの sticky top は SP ヘッダー高さに変わる */
@media (max-width: 1023px) {
  .shop-filter {
    top: var(--header-height-sp);
    padding-block: 0;
  }

  .shop-filter__mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-2);
    gap: var(--space-3);
  }

  .shop-filter__mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-en);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text);
    padding: var(--space-1) 0;
    cursor: pointer;
  }

  .shop-filter__mobile-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--color-blue);
    color: #fff;
    font-size: 10px;
    font-family: var(--font-en);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
  }

  /* フィルタ本体: デフォルト非表示 → .is-open で展開 */
  .shop-filter__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
    padding-block: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .shop-filter__body.is-open {
    max-height: 600px;
    padding-block: var(--space-3) var(--space-4);
    border-top: var(--border);
  }

  .filter-divider {
    width: 100%;
    height: 1px;
  }

  .shop-filter__clear {
    margin-left: 0;
  }

  .page-header__title {
    font-size: var(--text-3xl);
  }
}

@media (max-width: 599px) {
  .page-header__title {
    font-size: var(--text-2xl);
  }
}


/* --------------------------------------------------------------------------
   Single Product Page — responsive overrides (Step 6)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .product-main__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .product-gallery {
    position: static;
  }

  .product-gallery__main {
    aspect-ratio: 4 / 3;
  }

  .product-details__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .origin-data__item {
    grid-template-columns: 100px 1fr;
  }
}

@media (max-width: 599px) {
  .product-purchase__title {
    font-size: var(--text-xl);
  }

  .variation-pill {
    padding: 10px 14px;
    font-size: var(--text-xs);
  }

  .origin-data__item {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .brew-step__num {
    font-size: var(--text-xl);
    width: 30px;
  }
}


/* --------------------------------------------------------------------------
   Subscribe LP — responsive overrides (Step 7)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .subscribe-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .subscribe-hero__image { order: -1; }

  .subscribe-steps__list {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-width: 480px;
    margin-inline: auto;
  }

  .subscribe-step:not(:last-child)::after { display: none; }

  .subscribe-plans__grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-inline: auto;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .subscribe-plans__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }

  .subscribe-steps__list {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
  }

  .subscribe-step:not(:last-child)::after { display: block; }
}

@media (max-width: 599px) {
  .subscribe-notify-form__row {
    flex-direction: column;
  }

  .subscribe-notify-form__btn { width: 100%; justify-content: center; }

  .plan-card { padding: var(--space-4); }
}


/* --------------------------------------------------------------------------
   Journal Archive + Single — responsive overrides (Step 8)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .journal-tabs {
    top: var(--header-height-sp);
  }

  .journal-grid--archive {
    grid-template-columns: repeat(2, 1fr);
  }

  .post-layout__inner {
    grid-template-columns: 1fr;
  }

  .post-sidebar {
    position: static;
    border-top: var(--border);
    padding-top: var(--space-6);
  }

  .post-adjacent__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .post-adjacent__back {
    grid-column: 1 / -1;
    order: -1;
    text-align: left;
  }

  .post-hero {
    height: 55vh;
    min-height: 320px;
  }
}

@media (max-width: 599px) {
  .journal-grid--archive {
    grid-template-columns: 1fr;
  }

  .post-hero__title {
    font-size: var(--text-xl);
  }

  .post-adjacent__inner {
    grid-template-columns: 1fr;
  }

  .post-adjacent__item--next {
    align-items: flex-start;
    text-align: left;
  }
}


/* --------------------------------------------------------------------------
   Step 9 — About / Contact / Static — responsive overrides
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .about-mission__inner,
  .about-process__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .about-values__grid { grid-template-columns: 1fr 1fr; }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .tokutei-table th { width: 130px; }
}

@media (max-width: 599px) {
  .about-values__grid { grid-template-columns: 1fr; }

  .form-row { grid-template-columns: 1fr; }

  .tokutei-table,
  .tokutei-table thead,
  .tokutei-table tbody,
  .tokutei-table tr,
  .tokutei-table th,
  .tokutei-table td {
    display: block;
    width: 100%;
  }
  .tokutei-table th { border-bottom: none; }
  .tokutei-table td { border-top: none; padding-top: var(--space-2); }

  .about-cta__btns { flex-direction: column; width: 100%; }
  .about-cta__btns .btn { width: 100%; justify-content: center; }
}


/* --------------------------------------------------------------------------
   Cart / Checkout / Order Complete — responsive (Step 10)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .cart-page {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .cart-summary { position: static; }

  .cart-items__header { display: none; }

  .cart-item {
    grid-template-columns: 80px 1fr 40px;
    grid-template-rows: auto auto auto;
    gap: var(--space-2);
  }

  .cart-item__img-wrap { grid-row: 1 / 3; }
  .cart-item__info     { grid-column: 2; grid-row: 1; }
  .cart-item__qty      { grid-column: 2; grid-row: 2; }
  .cart-item__remove   { grid-column: 3; grid-row: 1; }
  .cart-item__price    { display: none; }
  .cart-item__subtotal { grid-column: 2; grid-row: 3; font-size: var(--text-sm); }

  .checkout-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .checkout-summary { position: static; }

  .order-complete__details {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 599px) {
  .cart-page,
  .checkout-page,
  .order-complete-page {
    padding-inline: var(--space-3);
  }

  .order-complete__steps { gap: var(--space-1); }
  .order-status-step__line { width: 20px; }

  .order-complete__actions { flex-direction: column; }
  .order-complete__actions .btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   お気に入りボタン / ウィッシュリスト — レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .wishlist-btn {
    width: 100%;
    justify-content: center;
  }
  .wishlist-account__title {
    font-size: var(--text-lg);
  }
}

/* --------------------------------------------------------------------------
   SHOPフィルター カテゴリナビ — レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* カテゴリグループはSPでも横スクロール維持 */
  .filter-group--category {
    border-bottom: var(--border);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-1);
  }
}