/* ===== Desktop grid ===== */
.collage {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr);
  grid-template-rows: auto auto;
  gap: clamp(14px, 1.4vw, 22px);
  align-items: stretch;
}

.col-bio   { grid-column: 1; grid-row: 1; align-self: start; min-width: 0; }
.col-ticket{ grid-column: 2; grid-row: 1; align-self: start; min-width: 0; }

.row-media {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 0.9fr 1fr 1fr 1fr 0.9fr;
  gap: clamp(12px, 1.2vw, 20px);
  align-items: stretch;
}

.cell-setlist  { grid-column: 1; }
.cell-sc       { grid-column: 2; }
.cell-yt       { grid-column: 3; }
.cell-ig       { grid-column: 4; }
.cell-tag      { grid-column: 5; }

/* Subtle individual rotations so the collage looks placed, not gridded.
   --rotate-jitter is set per-wrap by main.js so reloads differ. */
.col-bio    .card-wrap { transform: rotate(calc(-1.2deg + var(--rotate-jitter, 0deg))); }
/* Ticket stays flat — even a small rotation tilts the wide card enough
   that Utrecht (left) and Rimini (right) visually misalign at the screen
   level by ~12px. Within the rotated frame the cities ARE aligned but
   the eye reads the screen, not the local frame. The ticket is also the
   most informational card on the page; staying flat suits its purpose. */
.col-ticket .card-wrap { transform: none; }
.cell-setlist .card-wrap { transform: rotate(calc(-2.4deg + var(--rotate-jitter, 0deg))); }
.cell-sc      .card-wrap { transform: rotate(calc(1.4deg  + var(--rotate-jitter, 0deg))); }
.cell-yt      .card-wrap { transform: rotate(calc(-1.6deg + var(--rotate-jitter, 0deg))); }
.cell-ig      .card-wrap { transform: rotate(calc(2deg    + var(--rotate-jitter, 0deg))); }
.cell-tag     .card-wrap { transform: rotate(calc(-1.2deg + var(--rotate-jitter, 0deg))); }

.card-wrap {
  position: relative;
  display: block; /* IG card-wrap is <a> (inline by default) — transforms don't apply to inline elements */
  transition: transform var(--hover-ms) var(--ease);
}
.card-wrap:hover,
.card-wrap.is-focus {
  transform: rotate(0deg) translateY(-3px) scale(1.015);
  z-index: 6;
}

/* ===== Tablet ===== */
@media (max-width: 1100px) {
  .collage {
    grid-template-columns: 1fr;
  }
  .col-bio,
  .col-ticket { grid-column: 1; }
  .col-ticket { grid-row: 2; }
  .row-media  { grid-row: 3; grid-template-columns: repeat(2, 1fr); }
  .cell-setlist { grid-column: 1; }
  .cell-sc      { grid-column: 2; }
  .cell-yt      { grid-column: 1; }
  .cell-ig      { grid-column: 2; }
  .cell-tag     { grid-column: 1 / -1; }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .site {
    padding: 16px 12px 24px;
  }

  /* Switch the collage to a flex column on mobile and dissolve the nested
     .row-media container via `display: contents` — its 5 cells become direct
     layout children of .collage. That gives us a single flat list of 7 cards
     we can reorder with the `order` property below. */
  .collage {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .row-media { display: contents; }

  /* Mobile content order — social-referral visitors already know the artist;
     prioritise time-sensitive + media-rich content over the bio:
       1. Link in bio (linktree mirror)  → quick jump to latest stuff
       2. Upcoming dates (ticket)         → when to see him live
       3. SoundCloud / YouTube / Instagram tiles → listen + watch
       4. Bio postcard                    → "about" — for the curious
       5. Contact (bag-tag)               → footer-style at the bottom */
  .cell-setlist { order: 1; }
  .col-ticket   { order: 2; }
  .cell-sc      { order: 3; }
  .cell-yt      { order: 4; }
  .cell-ig      { order: 5; }
  .col-bio      { order: 6; }
  .cell-tag     { order: 7; }

  /* Masthead — smaller title so it fits one line on a 375px iPhone. */
  .masthead {
    text-align: center;
    margin-bottom: 8px;
  }
  .masthead__left { justify-content: center; }
  .masthead__intro { font-size: 10px; }
  .masthead__title { font-size: 42px; line-height: .92; }
  .masthead__tagline { font-size: 10px; letter-spacing: .16em; flex-wrap: wrap; justify-content: center; gap: 0 4px; }

  /* Flatten rotations on mobile — scrapbook tilt looks weird on a phone. */
  .col-bio .card-wrap,
  .col-ticket .card-wrap,
  .cell-setlist .card-wrap,
  .cell-sc .card-wrap,
  .cell-yt .card-wrap,
  .cell-ig .card-wrap,
  .cell-tag .card-wrap {
    transform: rotate(0deg);
  }
  /* Disable hover-lift on mobile — touch devices don't have hover and the
     transform causes layout flicker on tap. */
  .card-wrap:hover,
  .card-wrap.is-focus {
    transform: rotate(0deg);
  }

  /* Tape: keep only one strip per card (top-left). Multiple strips look
     cluttered on a flat phone layout. */
  .tape--tr, .tape--bc, .tape--tc {
    display: none;
  }
  /* Bring the lone remaining tape to a calmer angle. */
  .tape--tl { transform: rotate(-3deg); }
}