/* ==========================================================================
   RESPONSIVE — اسکلت breakpoint ها (تو بخش‌های بعدی برای هر صفحه تکمیل میشه)
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
  .container {
    padding: 0 20px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .section {
    padding: 56px 0;
  }
}
@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 80px;
    min-height: 80vh;
  }

  /* About */
  .about-hero {
    padding-top: 100px;
    padding-bottom: 32px;
  }

  .about-hero-inner {
    grid-template-columns: 104px 1fr;
    gap: 20px 18px;
    align-items: center;
  }

  /* تیتر بیاد کنار عکس (بدون تغییر HTML) */
  .about-text {
    display: contents;
  }

  .about-photo {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    width: 104px;
    padding: 4px;
    border-radius: 18px;
    overflow: visible;
    transition: transform 0.25s var(--ease);
  }

  .about-photo:active {
    transform: scale(0.96);
  }

  /* نقطه‌ی نبض‌دار گوشه‌ی عکس */
  .about-photo::after {
    content: "";
    position: absolute;
    bottom: -4px;
    inset-inline-end: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-gradient);
    border: 3px solid var(--bg-primary);
  }

  .about-photo img,
  .about-photo-fallback {
    border-radius: 14px;
  }

  .about-photo-fallback {
    font-size: 2.4rem;
  }

  .about-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.9rem;
    margin: 0;
  }

  .about-title::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 10px;
    border-radius: 3px;
    background: var(--accent-gradient);
  }

  .about-text p {
    grid-column: 1 / -1;
    text-align: start;
    margin: 0;
  }

  /* پاراگراف اول: جمله‌ی اصلی */
  .about-text p:first-of-type {
    color: var(--text-primary);
    font-size: 1.05rem;
    line-height: 1.9;
  }

  /* پاراگراف دوم: کارت شیشه‌ای با خط accent */
  .about-text p:last-of-type {
    font-size: 0.98rem;
    line-height: 1.9;
    padding: 16px 18px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-inline-start: 3px solid var(--accent);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 var(--card-highlight);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .path-grid {
    grid-template-columns: 1fr;
  }

  /* Timeline: خط کنار، همه کارت‌ها یک ستون */
  .timeline::before {
    left: auto;
    inset-inline-start: 24px;
    transform: none;
  }

  .timeline-item {
    grid-template-columns: 48px 1fr;
  }

  .timeline-dot {
    grid-column: 1;
  }

  .timeline-card,
  .timeline-item:nth-child(even) .timeline-card {
    grid-column: 2;
  }
}
@media (max-width: 900px) {
  .flow {
    grid-template-columns: 1fr;
  }

  .flow-arrow,
  [dir="rtl"] .flow-arrow {
    transform: rotate(90deg); /* فلش رو به پایین */
  }
}

@media (max-width: 768px) {
  .build-grid {
    grid-template-columns: 1fr;
  }

  .build-grid .path-card,
  .build-grid .path-card:nth-child(4),
  .build-grid .path-card:nth-child(5) {
    grid-column: auto;
  }
}
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-tags {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    justify-content: center;
  }

  .hero-tags .skill-chip {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  .hero-intro {
    margin-inline: auto;
  }

  .system-card {
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  /* 1. مخفی کردن "سلام من مهدی‌ام" در موبایل */
  .hero-title-1 {
    display: none;
  }

  /* 2. حذف کامل کارت لوگو/سیستم در موبایل */
  .system-card {
    display: none;
  }

  .page-head,
  .pd-hero { padding-top: 100px; }

  .idea-thumb { width: 64px; height: 64px; }
  .idea-info p { -webkit-line-clamp: 2; }

  .contact-row { padding: 18px 14px; gap: 14px; }
  .contact-icon { width: 38px; height: 38px; }
  .contact-icon svg { width: 18px; height: 18px; }

  /* 404 */
  .nf-line { width: 28px; }
  .nf-graphic { margin-bottom: 28px; }
  .nf-section { padding: 110px 20px 60px; }


  .pd-two,
  .pd-features { grid-template-columns: 1fr; }

  .pd-glass {
    margin-left: 16px;
    margin-right: 16px;
    padding: 4px 20px 32px;
    border-radius: 20px;
  }

  .g-btn { display: none; } /* در موبایل با Swipe */

  /* Lightbox: در موبایل با Swipe، بدون فلش */
  .lb-nav { display: none; }
  .lb-stage { padding: 0 10px; }
  .lb-img { max-width: 94vw; max-height: 76vh; border-radius: 12px; }

  /* Skills */
  .expertise-grid { grid-template-columns: 1fr; }
  .expertise-primary { padding: 28px; }
  .stack-grid,
  .services-grid,
  .collab-grid { grid-template-columns: 1fr; }
  .action-item { flex-wrap: wrap; }
}

/* ==========================================================================
   دکمه شناور ایده‌ها — فقط موبایل، فقط صفحه Home (دسکتاپ: مخفی)
   ========================================================================== */
.idea-fab,
.idea-fab-close {
  display: none;
}

@media (max-width: 768px) {
  .idea-fab {
    position: fixed;
    left: 18px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 999;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background:
      radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 55%),
      var(--accent-gradient);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
      0 12px 30px -8px rgba(var(--blue-rgb), 0.8),
      0 0 26px rgba(var(--cyan-rgb), 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      inset 0 -6px 12px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(28px) scale(0.7);
    pointer-events: none;
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
    -webkit-tap-highlight-color: transparent;
  }

  /* لامپ با نور گرم */
  .idea-fab svg {
    width: 24px;
    height: 24px;
    fill: rgba(255, 240, 170, 0.35);
    filter: drop-shadow(0 0 6px rgba(255, 236, 150, 0.9));
  }

  .idea-fab.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    animation: ideaFabFloat 3.2s ease-in-out 0.6s infinite;
  }

  .idea-fab.show svg {
    animation: ideaBulbGlow 2.4s ease-in-out infinite alternate;
  }

  .idea-fab.show:active {
    transform: scale(0.92);
  }

  /* دو حلقه پالس پشت‌سرهم */
  .idea-fab.show::before,
  .idea-fab.show::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 2px solid rgba(var(--accent-rgb), 0.55);
    animation: ideaFabPulse 2.4s ease-out infinite;
    pointer-events: none;
  }

  .idea-fab.show::after {
    animation-delay: 1.2s;
  }

  /* برچسب شیشه‌ای کنار دکمه: چند ثانیه نشون داده میشه و محو میشه */
  .idea-fab-label {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translate(-8px, -50%);
    pointer-events: none;
  }

  .idea-fab.show.intro .idea-fab-label {
    animation: ideaFabLabel 4.5s ease 1s forwards;
  }

  /* دکمه بستن (×) روی گوشه دکمه شناور */
  .idea-fab-close {
    position: fixed;
    left: 51px;
    bottom: calc(53px + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-strong);
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
    transition: opacity 0.4s var(--ease) 0.2s, transform 0.4s var(--ease) 0.2s;
    -webkit-tap-highlight-color: transparent;
  }

  .idea-fab-close svg {
    width: 10px;
    height: 10px;
  }

  /* افزایش ناحیه لمس برای انگشت */
  .idea-fab-close::before {
    content: "";
    position: absolute;
    inset: -10px;
  }

  .idea-fab.show + .idea-fab-close {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    animation: ideaFabFloat 3.2s ease-in-out 0.6s infinite;
  }

  @keyframes ideaFabFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -5px; }
  }

  @keyframes ideaBulbGlow {
    from {
      fill: rgba(255, 240, 170, 0.25);
      filter: drop-shadow(0 0 3px rgba(255, 236, 150, 0.6));
    }
    to {
      fill: rgba(255, 240, 170, 0.6);
      filter: drop-shadow(0 0 9px rgba(255, 236, 150, 1));
    }
  }

  @keyframes ideaFabPulse {
    0%   { transform: scale(1);   opacity: 0.8; }
    100% { transform: scale(1.7); opacity: 0; }
  }

  @keyframes ideaFabLabel {
    0%   { opacity: 0; transform: translate(-8px, -50%); }
    12%  { opacity: 1; transform: translate(0, -50%); }
    80%  { opacity: 1; transform: translate(0, -50%); }
    100% { opacity: 0; transform: translate(-8px, -50%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .idea-fab,
    .idea-fab.show,
    .idea-fab.show svg,
    .idea-fab.show + .idea-fab-close { animation: none; transition: none; }
    .idea-fab.show::before,
    .idea-fab.show::after { animation: none; display: none; }
    .idea-fab.show.intro .idea-fab-label { animation: none; opacity: 1; transform: translate(0, -50%); }
  }
}
@media (max-width: 380px) {
  .about-hero-inner {
    grid-template-columns: 88px 1fr;
    gap: 16px 14px;
  }

  .about-photo {
    width: 88px;
  }

  .about-title {
    font-size: 1.6rem;
  }
}
/* About (موبایل): ورود پلکانی و نبض نقطه‌ی عکس */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .about-photo,
  .about-title,
  .about-text p:first-of-type,
  .about-text p:last-of-type {
    animation: fadeInUp 0.6s var(--ease) both;
  }

  .about-title {
    animation-delay: 0.08s;
  }

  .about-text p:first-of-type {
    animation-delay: 0.16s;
  }

  .about-text p:last-of-type {
    animation-delay: 0.24s;
  }

  .about-photo::after {
    animation: aboutDotPulse 2.4s ease-out infinite;
  }
}
/* Share در موبایل: کوچک‌تر و هم‌تراز با padding کوچک‌تر کارت */
@media (max-width: 768px) {
  .idea-share {
    top: 17px;
    inset-inline-end: 20px;
  }

  .idea-share-btn {
    padding: 5px 10px;
    gap: 5px;
    font-size: 0.76rem;
  }

  .idea-share-btn svg {
    width: 14px;
    height: 14px;
  }

  .idea-share-menu {
    min-width: 200px;
    padding: 6px;
  }

  .idea-share-item {
    padding: 10px;
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   کوچک‌تر کردن سایزها در موبایل
   - html font-size کم میشه، پس همه‌ی مقدارهای rem (فونت‌ها و تیترها) با هم کوچک میشن
   - برای کوچک‌تر/بزرگ‌تر کردن بیشتر، فقط درصد font-size رو تغییر بده
   ========================================================================== */
@media (max-width: 768px) {
  html {
    font-size: 93.75%; /* 15px به‌جای 16px */
  }

  .btn {
    padding: 11px 22px;
  }
}

@media (max-width: 380px) {
  html {
    font-size: 90%; /* 14.4px برای گوشی‌های خیلی کوچک */
  }
}

/* ==========================================================================
   مقالات: کارت و فیلتر در موبایل
   ========================================================================== */
@media (max-width: 560px) {
  .idea-row { align-items: flex-start; padding: 16px; gap: 14px; }
  .idea-foot { flex-direction: column; align-items: flex-start; }
  .idea-toolbar { flex-direction: column; align-items: stretch; }
  .idea-seg { display: flex; }
  .idea-seg-btn { flex: 1; padding: 8px 6px; font-size: 0.8rem; }
  .idea-select-wrap { min-width: 0; width: 100%; }
  .idea-menu { width: 100%; max-width: 100%; }
}