/*
 * Portfolio - Responsive Styles
 */

@media (max-width: 1024px) {
  .lg\:col-span-6 { grid-column: span 6; }
  .lg\:col-span-12 { grid-column: span 12; }
}

@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
  }

  [class*="col-span-"] {
    grid-column: span 6;
  }

  .contact-dock {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    max-width: 90%;
    margin: var(--space-xl) auto var(--space-lg);
  }

  .contact-dock__link {
    justify-content: center;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-xs);
  }

  .contact-dock__divider { display: none; }
}

@media (max-width: 480px) {
  .bento-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  [class*="col-span-"] {
    grid-column: span 1;
  }

  .nav-dock {
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    bottom: var(--space-md);
    max-width: calc(100vw - 32px);
  }

  .nav-dock__link {
    width: 36px;
    height: 36px;
  }

  .nav-dock__link .material-symbols-rounded { font-size: 20px; }

  .avatar-placeholder {
    max-width: 120px;
    max-height: 120px;
  }

  .quote-bubble {
    max-width: 140px;
    top: -16px;
    padding: var(--space-xs);
  }

  .quote-bubble__text { font-size: 10px; }

  .contact-dock {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
    padding: var(--space-sm);
    max-width: 95%;
  }

  .contact-dock__link {
    padding: var(--space-xs) var(--space-sm);
    font-size: 10px;
    gap: var(--space-xs);
  }

  .contact-dock__link svg,
  .contact-dock__link .material-symbols-rounded {
    width: 14px;
    height: 14px;
    font-size: 14px;
  }
}

/* Touch devices */
@media (hover: none), (pointer: coarse) {
  .widget:hover, .widget { transform: none; }
  .widget::before { opacity: 0.8; }
  .widget--mauve { box-shadow: 0 4px 20px rgba(203, 166, 247, 0.1); }
  .widget--pink { box-shadow: 0 4px 20px rgba(245, 194, 231, 0.1); }
  .widget--blue { box-shadow: 0 4px 20px rgba(137, 180, 250, 0.1); }
  .widget--green { box-shadow: 0 4px 20px rgba(166, 227, 161, 0.1); }
  .widget--teal { box-shadow: 0 4px 20px rgba(148, 226, 213, 0.1); }
  .widget--peach { box-shadow: 0 4px 20px rgba(250, 179, 135, 0.1); }
}