/* =====================================================
   RESPONSIVE — Mobile First
   Breakpoints: 480 · 768 · 1024
   ===================================================== */

/* --------------------------------------------------
   ≤ 1024px  (tablets landscape, small laptops)
-------------------------------------------------- */
@media (max-width: 1024px) {
  .grid--4    { grid-template-columns: repeat(2, 1fr); }
  .grid--3    { grid-template-columns: repeat(2, 1fr); }
  .gallery-masonry { columns: 2; }

  .portfolio-item:nth-child(1) { grid-column: span 12; }
  .portfolio-item:nth-child(2),
  .portfolio-item:nth-child(3) { grid-column: span 6; }
  .portfolio-item:nth-child(4),
  .portfolio-item:nth-child(5),
  .portfolio-item:nth-child(6) { grid-column: span 4; }
}

/* --------------------------------------------------
   ≤ 768px  (tablets portrait, large phones)
-------------------------------------------------- */
@media (max-width: 768px) {

  :root {
    --space-xl: 5rem;
    --space-lg: 2.5rem;
    --space-md: 1.25rem;
  }

  /* Desktop cursor: hidden on touch screens */
  #cursorRing,
  #cursorDot { display: none !important; }

  /* Mobile touch ripple cursor */
  .touch-ripple {
    position: fixed;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(235, 235, 235, 0.5);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
    animation: touchRipple 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }

  @keyframes touchRipple {
    0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.9; }
    60%  { transform: translate(-50%, -50%) scale(1);   opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
  }

  /* Hero */
  .hero-title {
    font-size: clamp(3.5rem, 16vw, 6rem);
  }
  .hero-subtitle { font-size: 9px; letter-spacing: 0.25em; }

  /* Location */
  .location-section  { padding: 4rem 1.25rem; }
  .location-grid     { grid-template-columns: 1fr; gap: 3rem; }

  /* Artists section */
  .artists-section   { padding: 4rem 1.25rem; }
  .artists-cards     { grid-template-columns: 1fr; gap: 2rem; }

  /* On mobile: artist cards side-by-side (2 col) */
  @media (min-width: 480px) {
    .artists-cards { grid-template-columns: repeat(2, 1fr); }
  }

  /* Testimonials */
  .testimonials-section { padding: 4rem 0; }

  .aarchive-cards { grid-template-columns: repeat(2, 1fr); }
  .aarchive-hero__title { font-size: clamp(3rem, 10vw, 6rem); }

  /* Artist contact */
  .artist-contact-grid { grid-template-columns: 1fr; }

  .artist-hero         { min-height: 70vh; }
  .artist-hero__name   { font-size: clamp(2.5rem, 12vw, 4rem); }

  /* Portfolio gallery → 2 columns (featured spans full width) */
  .artist-portfolio__grid { grid-template-columns: repeat(2, 1fr); }

  /* Blog grid → 1 col on mobile */
  .blog-grid           { grid-template-columns: 1fr; }

  /* Post + page templates */
  .post-nav__inner     { grid-template-columns: 1fr; }

  /* Masonry + grids */
  .gallery-masonry     { columns: 1; }
  .grid--2,
  .grid--3             { grid-template-columns: 1fr; }

  /* Portfolio */
  .portfolio-item:nth-child(n) { grid-column: span 12; }

  /* Booking form */
  .booking-form              { grid-template-columns: 1fr; }
  .booking-form .form-group--full { grid-column: 1; }
}

/* --------------------------------------------------
   ≤ 480px  (small phones: SE, Moto G, etc.)
-------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --space-xl: 3.5rem;
    --space-lg: 2rem;
  }

  /* Header */
  .site-header   { padding-left: 1rem; padding-right: 1rem; }
  .site-logo     { font-size: 1.1rem; }

  /* Hero */
  .hero-title    { font-size: clamp(3rem, 18vw, 4.5rem); }
  .hero-labels   { margin-bottom: 1.25rem; }
  .hero-dot      { height: 8px; min-width: 12px; border-radius: 4px; }

  /* Location */
  .location-section { padding: 3rem 1rem; }
  .location-title   { font-size: clamp(2rem, 10vw, 3rem); }

  /* Artists */
  .artists-section         { padding: 3rem 1rem; }
  .artists-cards           { grid-template-columns: 1fr; }
  .artists-section__title  { font-size: clamp(2rem, 10vw, 3rem); }

  /* Artist archive → single column on mobile */
  .aarchive-cards { grid-template-columns: 1fr; }
  .aarchive-hero__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .aarchive-hero__count  { font-size: 2.5rem; }

  /* Testimonials */
  .testimonials-section         { padding: 3rem 1rem; }
  .testimonials-section__title  { font-size: clamp(2rem, 10vw, 3rem); }
  .testimonial-card             { padding: 1.5rem; }

  /* Artist hero */
  .artist-hero__actions  { flex-direction: column; gap: 0.5rem; }
  .btn-artist-social     { text-align: center; width: 100%; }

  /* Artist body → label stacks above content */
  .artist-block { grid-template-columns: 1fr; gap: 0.5rem; }
  .artist-block .artist-detail-label { margin-bottom: 0.25rem; }

  /* Portfolio head + smaller lightbox controls */
  .artist-portfolio__head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .lightbox__nav   { width: 44px; height: 44px; font-size: 2.25rem; }
  .lightbox__close { width: 40px; height: 40px; font-size: 1.9rem; }

  /* Post nav */
  .post-nav__item { padding: 1rem; }
  .post-nav__item--next { text-align: left; }
}