/* ========================================
   MOBILE RESPONSIVE STYLES (max-width: 980px)
   ======================================== */

@media screen and (max-width: 980px) {
  
  /* ========== TYPOGRAPHY ADJUSTMENTS ========== */
  .hero-title {
    font-size: clamp(28px, 7vw, 42px);
  }

  .section-title {
    font-size: clamp(32px, 8vw, 48px);
  }

  /* ========== RESPONSIVE NODE SIZING ========== */
  :root {
    --node-size: clamp(5px, 1.2vw, 8px);
  }

  /* ========== CONTAINER ========== */
  .container {
    width: min(100%, 94vw);
    padding: 0 var(--spacing-sm);
  }

  /* ========== MARQUEE ========== */
  .marquee {
    padding: 10px 0;
  }

  .marquee-text {
    font-size: clamp(12px, 3vw, 16px);
    padding: 0 20px;
  }

  .marquee-separator {
    width: 15px;
    height: 15px;
    margin: 0 20px;
  }

  /* ========== HERO SECTION ========== */
  .hero {
    padding: var(--spacing-lg) 0;
  }

  .hero-bento {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .hero-intro {
    padding: var(--spacing-md);
  }

  .hero-label {
    font-size: clamp(10px, 2vw, 14px);
    padding: 6px 12px;
    margin-bottom: var(--spacing-sm);
  }

  .hero-description {
    font-size: clamp(14px, 3vw, 16px);
  }

  .hero-buttons {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .btn {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: clamp(12px, 2.5vw, 14px);
  }

  .hero-profile {
    padding: var(--spacing-sm);
  }

  .hero-profile-label {
    font-size: clamp(12px, 3vw, 16px);
    padding: 6px;
  }

  /* ========== HOME SECTION (Mobile — No Shader, Solid Black) ========== */
  #home {
    min-height: 35vh;
    height: 35vh;
    padding: var(--spacing-md) var(--spacing-sm);
    background-color: #000;
  }

  #shader-container {
    display: none;
  }

  .home-content {
    padding: 0 var(--spacing-sm);
  }

  /* ========== NAVIGATION ========== */
  .nav-links {
    gap: var(--spacing-sm);
    flex-wrap: wrap;
  }

  .nav-links a {
    font-size: 12px;
    padding: 6px 10px;
  }

  /* ========== ABOUT SECTION — EXPANDING FLEX CARDS (Mobile: stacked vertically) ========== */
  .about {
    padding: var(--spacing-lg) 0;
  }

  .about-container {
    flex-direction: column;
    align-items: stretch;
    padding: 0 var(--spacing-sm);
    gap: var(--spacing-md);
  }

  .about .options {
    flex-direction: column;
    height: auto;
    min-height: 480px;
  }

  .about .option {
    min-width: 100%;
    min-height: 60px;
    margin: 6px 0;
  }

  .about .option:not(.active) {
    flex-grow: 0;
    flex-basis: 60px;
    min-height: 60px;
  }

  .about .option.active {
    flex-grow: 1;
    min-height: 280px;
    max-width: 100%;
  }

  .about .option .label .info .main {
    font-size: clamp(16px, 4vw, 20px);
  }

  .about .option .label .info .sub {
    font-size: clamp(12px, 3vw, 14px);
  }

  /* Software Icons — single horizontal row (all 6 icons fit on one line) */
  .about-icons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: var(--spacing-md);
    padding: 0 4px;
    width: 100%;
  }

  .software-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    flex-shrink: 0;
    padding: 6px;
  }

  /* Mobile chat-bubble toast */
  #chat-bubble.mobile-mode {
    max-width: calc(100vw - 40px);
    min-width: 200px;
    font-size: 13px;
    padding: 12px 16px;
    bottom: 20px;
    right: 20px;
    left: auto;
    top: auto;
  }

  /* ========== WORKS SECTION ========== */
  .works {
    padding: var(--spacing-lg) 0;
  }

  .works-header {
    margin-bottom: var(--spacing-md);
  }

  .filters {
    gap: 8px;
    margin-bottom: var(--spacing-md);
    justify-content: flex-start;
    padding: 10px 20px;
    scroll-padding-left: 20px;
  }

  .chip {
    font-size: clamp(10px, 2vw, 12px);
    padding: 8px 14px;
  }

  /* Masonry Gallery - Single Column */
  .masonry {
    column-count: 1;
    column-gap: 0;
    padding-inline: 0;
  }

  .masonry-item {
    margin-bottom: var(--spacing-md);
  }

  .work-card {
    transition: all 0.2s ease;
  }

  .work-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--border-primary);
  }

  .image-wrapper {
    min-height: 150px;
  }

  .loading-spinner {
    width: 30px;
    height: 30px;
    border-width: 3px;
  }

  .work-caption {
    padding: var(--spacing-sm);
    font-size: 13px;
  }

  /* ========== FOOTER ========== */
  footer {
    padding: var(--spacing-lg) 0;
  }

  .footer-content {
    padding: var(--spacing-md);
  }

  .footer-title {
    font-size: clamp(24px, 6vw, 36px);
    margin-bottom: var(--spacing-sm);
  }

  .footer-subtitle {
    font-size: clamp(14px, 3vw, 16px);
    margin-bottom: var(--spacing-md);
  }

  .footer-buttons {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .footer-buttons .btn {
    width: 100%;
  }

  .footer-info {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .info-pill {
    font-size: 12px;
    padding: 6px 12px;
  }

  .copyright {
    margin-top: var(--spacing-md);
    font-size: 12px;
  }

  /* ========== PRELOADER ========== */
  .preloader-avatar {
    width: 100px;
    height: 100px;
  }

  .preloader-caption {
    font-size: 14px;
  }

  /* ========== MODAL ========== */
  #imageModal {
    padding-top: 30px;
  }

  #modalImage {
    width: 90%;
    max-width: none;
    max-height: 75vh;
  }

  #closeModal {
    top: 10px;
    right: 20px;
    font-size: 32px;
  }

  /* ========== FRAME NODES VISIBILITY ========== */
  /* On very small screens, optionally hide midpoint nodes */
  @media screen and (max-width: 480px) {
    .frame-node.mid-top,
    .frame-node.mid-right,
    .frame-node.mid-bottom,
    .frame-node.mid-left {
      display: none;
    }

    :root {
      --node-size: 6px;
    }

    .marquee-text {
      font-size: 12px;
      padding: 0 15px;
    }

    .marquee-separator {
      width: 12px;
      height: 12px;
      margin: 0 15px;
    }

    .hero-intro,
    .about-card,
    .hero-profile,
    .footer-content {
      padding: var(--spacing-sm);
    }

    .btn {
      padding: 10px 16px;
      font-size: 12px;
    }

    .chip {
      padding: 6px 10px;
      font-size: 10px;
    }

    .work-caption {
      padding: 10px;
      font-size: 12px;
    }

    .masonry-item {
      margin-bottom: var(--spacing-sm);
    }
  }
}

/* ========== TABLET LANDSCAPE (768px - 980px) ========== */
@media screen and (min-width: 768px) and (max-width: 980px) {
  .masonry {
    column-count: 2;
    column-gap: var(--spacing-md);
  }

  .hero-bento {
    grid-template-columns: 1fr;
  }

  /* About expanding-cards at tablet: keep horizontal flex row (already default) */
  .about-container {
    flex-direction: column;
  }

  .about .options {
    flex-direction: row;
    height: 420px;
  }

  .about .option {
    min-width: 60px;
  }

  .about-icons {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--spacing-md);
  }
}