/* ============================================================
   PAPERPIXEL PORTFOLIO — Responsive Stylesheet (Mobile-First)
   File: responsive.css
   Author: ImajikoStudio
   Version: 1.0.0
============================================================ */

/* ============================================================
   Base Mobile Target (0px - 575px) is handled in style.css.
   Responsive overrides for larger viewports:
   ============================================================ */

/* Small Devices (Landscape Phones, 576px and up) */
@media (min-width: 576px) {
  :root {
    --text-3xl: 2.25rem;
  }
  
  .container {
    padding-right: 32px;
    padding-left: 32px;
  }
}

/* Medium Devices (Tablets, 768px and up) */
@media (min-width: 768px) {
  :root {
    --text-2xl: 1.75rem;
    --text-3xl: 2.5rem;
    --text-hero: clamp(2.25rem, 5vw, 3.5rem);
    
    --shadow-sm: 3px 3px 0 0 var(--color-border);
    --shadow-md: 6px 6px 0 0 var(--color-border);
    --shadow-lg: 10px 10px 0 0 var(--color-border);
  }
  
  .section {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

/* Large Devices (Desktops, 992px and up) */
@media (min-width: 992px) {
  :root {
    --text-2xl: 2rem;
    --text-3xl: 3rem;
  }
  
  .navbar__menu {
    display: flex;
  }
  
  .navbar__toggle {
    display: none;
  }
  
  /* Layout improvements for grids */
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

/* Extra Large Devices (Wide Desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container {
    padding-right: 0;
    padding-left: 0;
  }
}

/* Ultra Wide Devices (4K and big screens, 1400px and up) */
@media (min-width: 1400px) {
  :root {
    --container-max-width: 1320px;
  }
}

/* Print Stylesheet for better layout when printing */
@media print {
  body {
    background-color: #fff !important;
    color: #000 !important;
  }
  .header, .footer, .control-btn, .navbar__actions, .skip-link {
    display: none !important;
  }
  .section {
    padding: 20px 0 !important;
  }
  .polaroid, .sticky-note, .pixel-box {
    box-shadow: none !important;
    border-color: #000 !important;
  }
}