/* ============================================================
   NEVYRA — responsive.css
   Mobile-First Responsive System
   ============================================================ */

/* ── Breakpoints ──
   sm:  576px  (phone landscape)
   md:  768px  (tablet)
   lg:  1024px (desktop)
   xl:  1280px (wide)
   2xl: 1440px (ultrawide)
*/

/* ============================================================
   MOBILE FIRST — Default styles apply to all screen sizes
   ============================================================ */

/* Utilities */
.hide-mobile  { display: none !important; }
.show-mobile  { display: block !important; }

/* Footer Mobile */
.footer__grid {
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

/* Nav Mobile */
.nav__links { display: none; }
.nav__hamburger { display: flex; }

/* Grid Mobile */
.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}

/* Section spacing mobile */
section { padding-block: var(--space-20); }

/* Container */
.container { padding-inline: var(--space-5); }

/* Hero mobile */
.hero__desc { font-size: var(--fs-base); }
.stats-row { gap: var(--space-8); }

/* Toast mobile */
#toast-container {
  bottom: var(--space-4);
  right: var(--space-4);
  left: var(--space-4);
}

.toast { min-width: unset; }

/* Modal mobile */
.modal { padding: var(--space-8); border-radius: var(--radius-lg); }

/* ============================================================
   SM — 576px+
   ============================================================ */
@media (min-width: 576px) {
  .hide-mobile  { display: block !important; }
  .show-mobile  { display: none !important; }

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

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

  #toast-container {
    bottom: var(--space-8);
    right: var(--space-8);
    left: auto;
  }
  .toast { min-width: 280px; }
}

/* ============================================================
   MD — 768px+
   ============================================================ */
@media (min-width: 768px) {
  .container { padding-inline: var(--space-8); }

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

  .nav__links { display: flex; }
  .nav__hamburger { display: none; }

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

  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-12);
  }
}

/* ============================================================
   LG — 1024px+
   ============================================================ */
@media (min-width: 1024px) {
  .container { padding-inline: var(--space-10); }

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

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

  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .footer__bottom {
    flex-direction: row;
  }
}

/* ============================================================
   XL — 1280px+
   ============================================================ */
@media (min-width: 1280px) {
  .container { padding-inline: var(--space-12); }
}

/* ============================================================
   Page-specific overrides
   ============================================================ */

/* Cases Grid */
@media (max-width: 767px) {
  .cases-grid { grid-template-columns: 1fr !important; }
  .case-card { height: auto !important; }
}

/* Services — Two column on tablet+ */
@media (min-width: 768px) {
  .services-featured {
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
  }
}

/* Careers */
@media (max-width: 575px) {
  .job-card__meta { flex-direction: column; gap: var(--space-2); }
}

/* About split */
@media (min-width: 768px) {
  .about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
  }
}

/* Stats responsive */
@media (max-width: 575px) {
  .stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
}

/* Hero bottom controls */
@media (max-width: 575px) {
  .hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta .btn {
    justify-content: center;
  }
}

/* Nav controls mobile */
@media (max-width: 767px) {
  .nav__controls .btn { display: none; }
}

/* Footer bottom mobile */
@media (max-width: 575px) {
  .footer__bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }
}

/* Print styles */
@media print {
  #header, #footer, #page-loader, #scroll-progress,
  .btn, .hero, .modal-overlay, #toast-container { display: none !important; }

  body { background: white; color: black; }
  section { padding-block: var(--space-8); }
}

/* mobile-nav rules moved to v7 block */


/* ============================================================
   GLOBAL RESPONSIVE FIXES v8
   全ページ横断品質補完パッチ
   ============================================================ */

/* ── レイアウトの溢れ防止（全要素） ── */
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; }
/* SVGにheight:autoを使わない（SVGはviewBoxで比率管理） */
.container { min-width: 0; }
.section-title { word-break: break-word; overflow-wrap: break-word; }
/* section-subtitle は layout.css で max-width:56ch 設定済み */

/* ── グリッドアイテムの溢れ防止 ── */
.grid > * { min-width: 0; }

/* ═══════════════════════════════════════════
   ABOUT — チーム紹介
   ═══════════════════════════════════════════ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-12);
}
/* タブレット */
@media (max-width: 767px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}
/* スマホ: 2列維持（アバターが小さくなりすぎないように） */
@media (max-width: 375px) {
  .team-grid { grid-template-columns: 1fr; }
}

.team-card {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}
.team-card__avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent-dim), var(--glass-bg));
  border: 2px solid var(--glass-border-accent);
  margin: 0 auto var(--space-4);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 800;
  color: var(--color-accent);
  flex-shrink: 0;
}
@media (max-width: 575px) {
  .team-card { padding: var(--space-4) var(--space-3); }
  .team-card__avatar { width: 60px; height: 60px; font-size: var(--fs-base); margin-bottom: var(--space-3); }
}

/* ═══════════════════════════════════════════
   ABOUT — CTA セクション
   ═══════════════════════════════════════════ */
.cta-section {
  padding-block: var(--space-20);
  text-align: center;
}
.cta-section__title {
  font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl));
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
  word-break: break-word;
}
.cta-section__desc {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  font-size: var(--fs-base);
}
.cta-section__btns {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .cta-section { padding-block: var(--space-16); }
  .cta-section__btns {
    flex-direction: column;
    align-items: stretch;
    max-width: 280px;
    margin-inline: auto;
  }
  .cta-section__btns .btn { justify-content: center; }
}

/* ═══════════════════════════════════════════
   CASES — プロダクトカード
   ═══════════════════════════════════════════ */
/* Product grid 2-up: タブレット以下で1列 */
@media (max-width: 767px) {
  #products .grid--2 { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════
   CAREERS — 求人カード
   ═══════════════════════════════════════════ */
@media (max-width: 640px) {
  .job-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-4) !important;
  }
  .job-card > div:last-child {
    width: 100%;
    text-align: left !important;
    min-width: unset !important;
  }
  .job-card > div:last-child .btn {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .job-card__meta { flex-wrap: wrap; gap: var(--space-2); }
}

/* ═══════════════════════════════════════════
   MODAL — レスポンシブ調整
   ═══════════════════════════════════════════ */
/* タブレット: サイズ微調整 */
@media (min-width: 641px) and (max-width: 767px) {
  .modal-overlay { padding: var(--space-5); }
  .modal {
    max-height: 88vh;
    max-width: 600px;
    padding: var(--space-8) var(--space-8);
  }
}

/* ═══════════════════════════════════════════
   OVERFLOW 防止
   ═══════════════════════════════════════════ */
.tag, .badge {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Mobile nav ── */
.mobile-nav { display: none; }
@media (max-width: 767px) {
  .mobile-nav { display: flex; }
  .mobile-nav::after { font-size: 5rem; bottom: var(--space-5); right: var(--space-5); }
}
@media (max-width: 380px) {
  .mobile-nav__item a { font-size: 1.8rem; }
}