/* Progressive mobile layout. Desktop retains its original content and order. */
.mobile-intro { display: none; }
.mobile-details summary { cursor: pointer; color: #d4af37; padding: 12px 0; min-height: 44px; }
.mobile-details { min-width: 0; }
.mobile-details > div { display: grid; gap: 1.25rem; }
@media (max-width: 767px) {
  /* Let long contact text and flex/grid children fit the phone viewport. */
  html { overflow-x: clip; }
  body { width: 100%; min-width: 0; }
  #Contact .grid > *, #Contact .space-y-8, #Contact .card-premium,
  #Contact .flex > *, .trust-copy, .artist-actions > * { min-width: 0; }
  #Contact .card-premium .flex > .rounded-full { flex: 0 0 40px; }
  #Contact a, .trust-copy, .artist-content, .review-card { overflow-wrap: anywhere; }
  #Home, #Portfolio, #About, #Reviews, #Booking, #Contact, #AboutStudio { max-width: 100%; }
  #Home video { inset: 0; width: 100%; height: 100%; object-fit: cover; }
  #Home { padding-top: 80px; }
  #Home .hero-image { height: auto; min-height: 360px; max-height: none; padding: 40px 0 32px; }
  #Home .hero-image h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); line-height: 1.12; margin-bottom: 16px; }
  #Home .hero-image p:not(.mobile-intro) { display: none; }
  #Home .mobile-intro { display: block; font-size: 1rem; line-height: 1.6; margin-bottom: 20px; }
  #Home .hero-image a { padding: 12px 18px; font-size: .8rem; min-height: 44px; }
  #Home .section-divider { display: none; }
  #About, #Portfolio, #Reviews, #Booking, #Contact, #AboutStudio { padding-top: 36px; padding-bottom: 36px; }
  #About .text-center, #Portfolio .text-center, #Reviews .text-center, #Booking .text-center { margin-bottom: 24px; }
  #About h2, #Portfolio h2, #Reviews h2, #Booking h2, #Contact h2, #AboutStudio h2 { font-size: 1.8rem; line-height: 1.2; }
  .trust-strip-inner { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 12px 16px; }
  .trust-item { min-height: 0; padding: 10px; gap: 8px; }
  .trust-icon { width: 28px; height: 28px; flex: 0 0 28px; }
  .trust-copy strong { font-size: .75rem; }
  .trust-copy small { font-size: .7rem; }
  #tattoo-gallery, #piercing-gallery:not(.hidden) { column-count: 2; column-gap: 8px; }
  .tattoo-work, .piercing-work { margin-bottom: 8px; }
  .portfolio-overlay { display: none; }
  .tattoo-work .p-4, .piercing-work .p-4 { padding: 10px; }
  .tattoo-work h3, .piercing-work h3 { font-size: .85rem; overflow-wrap: anywhere; }
  .tattoo-work .mobile-details summary { font-size: .75rem; }
  .portfolio-book-btn { min-height: 44px; margin-top: 4px; font-size: .8rem; }
  .portfolio-overlay-title { font-size: .8rem; }
  .portfolio-overlay-artist { font-size: .7rem; }
  .portfolio-overlay-description { display: none; }
  .portfolio-filters { gap: 6px; margin-bottom: 16px; }
  .portfolio-filter-btn { padding: 8px 12px; min-height: 44px; }
  .artist-card { display: grid; grid-template-columns: 80px minmax(0,1fr); align-items: start; padding: 12px; }
  .artist-card > div:first-child { height: 104px; border-radius: 8px; }
  .artist-card > div:first-child img { max-height: 104px; width: 100%; object-fit: contain; }
  .artist-content { padding: 0 0 0 12px; min-width: 0; }
  .artist-content h3 { font-size: 1.1rem; line-height: 1.3; }
  .artist-content > .w-16 { display: none; }
  .artist-content > p { font-size: .8rem; }
  .artist-description:not(.expanded) { max-height: 0; min-height: 0; margin: 0; visibility: hidden; }
  .artist-description.expanded { max-height: none; min-height: 0; visibility: visible; }
  .artist-actions { flex-wrap: wrap; gap: 8px; padding-top: 10px; }
  .artist-actions a, .read-more-btn { min-height: 44px; display: inline-flex; align-items: center; font-size: .8rem; }
  #About .grid { gap: 12px; }
  .reviews-grid { gap: 12px; }
  .review-card, .review-card-featured { padding: 18px; }
  .review-card blockquote, .review-card-featured blockquote { font-size: 1.15rem; line-height: 1.5; }
  .review-card p { font-size: .85rem; }
  #booking-form { gap: 16px; }
  #booking-form input, #booking-form select, #booking-form textarea { font-size: 16px; min-width: 0; }
  #booking-form > div, #booking-form details { min-width: 0; }
  #booking-form button[type="submit"] { width: 100%; padding: 14px 12px; }
  .mobile-action-bar { gap: 8px; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .mobile-action-bar a { font-size: .8rem; min-height: 44px; }
  .lightbox-content { max-width: 100%; }
}

/* Equal contact cards: both columns share the same row proportions. */
#Contact .grid { align-items: stretch; grid-auto-rows: 1fr; }
#Contact .grid > .space-y-8 {
  display: grid;
  grid-template-rows: repeat(2, minmax(min-content, 1fr));
  gap: 2rem;
  min-width: 0;
}
#Contact .grid > .space-y-8 > .card-premium {
  margin: 0;
  min-width: 0;
  display: flex;
  align-items: center;
}
#Contact .card-premium > .flex { width: 100%; }
#Contact .card-premium > .flex > .rounded-full { flex: 0 0 2.5rem; }
#Contact .card-premium > .flex > div:last-child { min-width: 0; overflow-wrap: anywhere; }

/* Center the piercer beneath the four tattoo artists on desktop. */
@media (min-width: 768px) {
  #About .piercer-card { grid-column: 1 / -1; width: calc(50% - 1rem); justify-self: center; }
}

/* Compact, equally sized team cards on phones. */
.artist-book-mobile { display: none; }
@media (max-width: 767px) {
  #About .artist-grid { grid-auto-rows: 1fr; }
  #About .artist-grid:has(.artist-description.expanded) { grid-auto-rows: auto; }
  #About .artist-card { align-items: stretch; width: 100%; min-width: 0; }
  #About .artist-card > div:first-child { width: 80px; height: 104px; }
  #About .artist-card > div:first-child img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
  #About .artist-content h3 { min-height: 0; margin: 0; font-size: 1rem; line-height: 1.25; }
  #About .artist-content > p:not(.artist-description) { min-height: 0; line-height: 1.4; }
  #About .artist-content > h3 + p { margin-top: 4px; font-size: .65rem; letter-spacing: .12em; }
  #About .artist-content > .read-more-btn { margin-top: 0; min-height: 44px; }
  #About .artist-actions { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; padding-top: 4px; margin-top: auto; }
  #About .artist-actions a { justify-content: center; min-height: 44px; padding: 8px; line-height: 1.25; text-align: center; }
  #About .artist-actions a:not(.artist-book-btn) span { display: none; }
  #About .artist-book-desktop { display: none; }
  #About .artist-book-mobile { display: inline; }
}