/* ===========================================================
   MODDING CAFE — RESPONSIVE
   Mobile-first overrides
   =========================================================== */

@media (max-width: 1280px) {
  .innovations__grid { grid-template-columns: repeat(2, 1fr); }
  .fp-grid { grid-template-columns: repeat(3, 1fr); }
  .latest-row { grid-template-columns: repeat(3, 1fr); }
  .partners__row { grid-template-columns: repeat(5, 1fr); }
  .stats-row { grid-template-columns: repeat(3, 1fr); }
  .quick-row { grid-template-columns: repeat(3, 1fr); }
  .media-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1100px) {
  .primary-nav { gap: 22px; }
  .primary-nav a { font-size: 12px; letter-spacing: 0.16em; }
  .hero-home__grid { grid-template-columns: 1fr; }
  .hero-home__copy { padding: 56px 32px 32px; }
  .hero-home__visual { min-height: 420px; }
  .founder-teaser__grid { grid-template-columns: 1fr; }
  .founder-teaser__photo { aspect-ratio: 16/10; max-width: 360px; }
  .bio-hero__grid { grid-template-columns: 1fr; }
  .bio-hero__visual { min-height: 360px; }
  .bio-hero__sidebar { display: none; }
  .skills-tools__grid { grid-template-columns: 1fr; gap: 32px; }
  .journey__grid { grid-template-columns: repeat(3, 1fr); }
  .projects-layout { grid-template-columns: 1fr; }
  .proj-grid { grid-template-columns: repeat(2, 1fr); }
  .video-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .blog-layout { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .masonry { columns: 2; }
  .dash-grid { grid-template-columns: 1fr; }
  .admin-shell { grid-template-columns: 78px 1fr; }
  .admin-sidebar__brand .name, .admin-sidebar__brand .sub,
  .admin-sidebar__link span:not(.ico):not(.count),
  .admin-sidebar__group h6,
  .view-site-btn span, .collapse-btn span { display: none; }
  .admin-sidebar__link { justify-content: center; }
  .layout-side { grid-template-columns: 1fr; }
  .side-nav { display: none; }
}

@media (max-width: 820px) {
  .container, .container-wide { padding: 0 20px; }
  .site-header__inner { padding: 0 20px; gap: 16px; }
  .primary-nav { display: none; }
  .lang-switch { display: none; }
  .hero-home__title { font-size: 64px; }
  .hero-home__copy { padding: 40px 20px; }
  .innovations__grid { grid-template-columns: 1fr; }
  .fp-grid { grid-template-columns: repeat(2, 1fr); }
  .partners__row { grid-template-columns: repeat(3, 1fr); }
  .gh-strip { grid-template-columns: repeat(3, 1fr); }
  .home-cta__row { grid-template-columns: 1fr; gap: 28px; }
  .home-cta__glyph { margin: 0 auto; }
  .home-cta__socials li { grid-template-columns: 20px 90px 1fr; }
  .timeline__row { grid-template-columns: repeat(2, 1fr); gap: 18px 22px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .site-footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
  .bio-hero__stats { grid-template-columns: repeat(2, 1fr); }
  .journey__grid { grid-template-columns: 1fr 1fr; }
  .inner-hero__grid { grid-template-columns: 1fr; }
  .proj-grid { grid-template-columns: 1fr; }
  .projects-stats__row { grid-template-columns: 1fr 1fr; }
  .projects-stats__row > div { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .latest-row { grid-template-columns: repeat(2, 1fr); }
  .subscribe-cta { grid-template-columns: 1fr; gap: 18px; }
  .purpose-row { grid-template-columns: 1fr; }
  .assurance { grid-template-columns: repeat(2, 1fr); }
  .blog-featured { grid-template-columns: 1fr; }
  .masonry { columns: 1; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .quick-row { grid-template-columns: 1fr 1fr; }
  .login-shell { grid-template-columns: 1fr; }
  /* Home CTA — stack at tablet */
  .home-cta__row { grid-template-columns: 1fr 1fr; gap: 28px 36px; }
  .home-cta__col1 { grid-column: 1; }
  .home-cta__workshop { grid-column: 2; }
  .home-cta__socials { grid-column: 1; }
  .home-cta__glyph { grid-column: 2; margin: 0 auto; }
  .home-cta__title { white-space: normal; }
  .home-cta__title .accent { white-space: normal; }
  .login-visual { display: none; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .admin-topbar { grid-template-columns: 1fr; gap: 12px; }
  .admin-search { width: 100%; }
  .media-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-split { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .timeline__row { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; }
  .fp-grid { grid-template-columns: 1fr; }
  .gh-strip { grid-template-columns: 1fr 1fr; }
  .partners__row { grid-template-columns: 1fr 1fr; }
  .assurance { grid-template-columns: 1fr; }
  .quick-row { grid-template-columns: 1fr; }
}

/* ============================================================
   GLOBAL PAGE HERO — responsive
   Tablet: text widens, image stays right but with stronger
           dark fade so titles remain legible.
   Mobile: stacks to one column — image becomes a dim
           background, text spans full width.
   ============================================================ */
@media (max-width: 1024px) {
  .mc-hero,
  .page-hero,
  .inner-hero { min-height: 460px; }
  .mc-hero__grid,
  .page-hero__grid,
  .inner-hero__grid { min-height: 460px; }
  .mc-hero__content,
  .page-hero__content,
  .inner-hero__copy {
    width: min(55%, 520px);
    padding: 56px 28px;
    min-height: 460px;
  }
  .mc-hero__media,
  .page-hero__media,
  .inner-hero__visual { width: 65%; }
  .mc-hero__media::before,
  .page-hero__media::before,
  .inner-hero__visual::before {
    background:
      linear-gradient(
        90deg,
        rgba(7,10,13,0.98) 0%,
        rgba(7,10,13,0.78) 14%,
        rgba(7,10,13,0.35) 30%,
        rgba(7,10,13,0.05) 50%,
        rgba(7,10,13,0) 75%,
        rgba(7,10,13,0.35) 95%,
        rgba(7,10,13,0.85) 100%
      );
  }
}

@media (max-width: 768px) {
  .mc-hero,
  .page-hero,
  .inner-hero { min-height: 560px; }
  .mc-hero__grid,
  .page-hero__grid,
  .inner-hero__grid {
    display: block;
    min-height: 560px;
  }
  .mc-hero__content,
  .page-hero__content,
  .inner-hero__copy {
    width: 100%;
    max-width: 100%;
    padding: 64px 22px;
    min-height: 560px;
  }
  .mc-hero__media,
  .page-hero__media,
  .inner-hero__visual {
    width: 100%;
    opacity: 0.55;
    background-position: var(--hero-pos-mobile, var(--hero-pos, center center));
  }
  .mc-hero__media img,
  .mc-hero__img {
    object-position: var(--hero-pos-mobile, var(--hero-pos, center center));
  }
  /* Trên mobile dùng dải overlay dọc cho legibility. */
  .mc-hero__media::before,
  .page-hero__media::before,
  .inner-hero__visual::before {
    background:
      linear-gradient(
        180deg,
        rgba(7,10,13,0.85) 0%,
        rgba(7,10,13,0.55) 50%,
        rgba(7,10,13,0.92) 100%
      );
  }
  .inner-hero__desc,
  .page-hero__desc,
  .mc-hero__desc { max-width: 100%; }
}

@media (max-width: 480px) {
  .mc-hero,
  .page-hero,
  .inner-hero { min-height: 520px; }
  .mc-hero__grid,
  .page-hero__grid,
  .inner-hero__grid { min-height: 520px; }
  .mc-hero__content,
  .page-hero__content,
  .inner-hero__copy {
    padding: 56px 18px;
    min-height: 520px;
  }
  .mc-hero__title,
  .inner-hero h1,
  .page-hero h1 { font-size: clamp(36px, 9vw, 56px); }
}

/* ============================================================
   CONTACT — Responsive mobile (1 cột, full-width, chống tràn ngang)
   ============================================================ */
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;   /* về 1 cột: form trên, info dưới */
    padding: 0 16px;
    gap: 18px;
  }
  .contact-form, .contact-info { padding: 20px 16px; }
  .contact-form, .contact-info, .contact-grid { max-width: 100%; min-width: 0; }
  /* Purpose row (3 mục đích liên hệ) — xếp dọc gọn gàng */
  .purpose-row--hero { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 600px) {
  /* Prevent grid min-content sizing from widening the footer on phones. */
  .home-cta__row { grid-template-columns: minmax(0, 1fr); }
  .home-cta__row > * { min-width: 0; }
  /* Hàng 2-cột (Tên+Email, SĐT+Chủ đề) → 1 cột để không bị bóp/cắt */
  .contact-form .field-row { grid-template-columns: 1fr; gap: 14px; }
  /* Nút Gửi / Xóa → xếp dọc, full-width, cân đối */
  .contact-form .form-actions { grid-template-columns: 1fr; gap: 10px; }
  .contact-form .form-actions .btn { width: 100%; justify-content: center; }
  /* Info block: căn đều, không tràn */
  .info-row { grid-template-columns: 36px 1fr; gap: 12px; }
  .info-row p, .info-row h5 { word-break: break-word; overflow-wrap: anywhere; }

  /* Keep biography content inside the viewport without clipping long text. */
  .bio-hero__grid, .skills-tools__grid { grid-template-columns: minmax(0, 1fr); }
  .bio-hero__copy, .bio-hero__visual, .skills-tools__grid > div { min-width: 0; }
  .bio-hero__copy { padding: 40px 20px; }
  .bio-hero h1 { font-size: clamp(30px, 9vw, 40px); overflow-wrap: anywhere; }
  .bio-hero h1 .accent { font-size: clamp(28px, 8vw, 38px) !important; overflow-wrap: anywhere; }
  .bio-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skill-row { grid-template-columns: minmax(0, 1fr) minmax(40px, .65fr) auto; gap: 8px; }
  .skill-row .name { min-width: 0; overflow-wrap: anywhere; }
  .skill-row .name .ico { flex: none; }
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools-grid .tool { min-width: 0; overflow-wrap: anywhere; }
  .quote-block { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
  .quote-block .sig { grid-column: 2; }

  /* Project-stat labels should wrap inside their columns on narrow screens. */
  .projects-stats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projects-stats__row > div { min-width: 0; padding: 12px; gap: 10px; }
  .projects-stats__row > div > div { min-width: 0; }
  .projects-stats__row .ico { flex: none; width: 30px; height: 30px; }
  .projects-stats__row .lbl { overflow-wrap: anywhere; }
}