/* =========================================================
   Hotchpotch Anthem · Responsive overrides
   - 767px 以下 (SP) は既存スタイルのまま。何も上書きしない
   - 768px〜1099px : タブレット (1カラム・幅を広げる)
   - 1100px〜     : PC (ファーストビュー2カラム + 各セクション横展開)
   各HTMLのインライン<style>の後に読み込むこと
   ========================================================= */

/* ---------------------------------------------------------
   TABLET  768px〜
   --------------------------------------------------------- */
@media (min-width: 768px) {
  body { max-width: 720px; }
  #viz { max-width: 720px; }
  body::before { max-width: none; }

  /* SP用のネガティブマージン(画面端まで)を解除 */
  .flyer-hero { margin: 8px 0 22px; }

  .section { padding: 44px 28px; }
  .hero { padding: 28px 28px 32px; }
  .cd-wrap { margin: 28px 28px 20px; }
  .social-strip { margin: 14px 28px 0; }
  .cta-card { margin: 24px 28px; }
  footer { padding: 44px 28px 100px; }

  .section-head .ttl-jp { font-size: 30px; }
  .section-head .tag-en { font-size: 12px; }

  .artist-grid { grid-template-columns: repeat(6, 1fr); gap: 18px 12px; }
  .info-card .ic-main { font-size: 19px; }
  .info-card .ic-sub { font-size: 11px; }
  .cd-pill .num { font-size: 36px; }
  .venue-map { height: 340px; }
  .glitch-title { font-size: 16px; }
  .hero-chip { font-size: 12px; }

  /* archive-01 */
  .photo-grid { gap: 12px; }

  /* archive-list */
  .vol-card.has-thumb .vc-date-main { font-size: 22px; }
}

/* ---------------------------------------------------------
   PC  1100px〜
   --------------------------------------------------------- */
@media (min-width: 1100px) {
  /* 背景は全幅、コンテンツは中央 1240px */
  body { max-width: none; }
  #viz { max-width: none; left: 0; transform: none; }

  .wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
    align-items: start;
  }
  /* 既定: 全要素はフル幅 */
  .wrap > * { grid-column: 1 / -1; }

  /* ===== ファーストビュー: 左=フライヤー(追従) / 右=情報 ===== */
  .wrap > .topnav { grid-row: 1; margin: 0 -40px; }
  .wrap > .hero {
    grid-column: 1;
    grid-row: 2 / span 4;
    position: relative;
    padding: 32px 0 40px;
  }
  .wrap > .cd-wrap,
  .wrap > .archive-closed-banner { grid-column: 2; grid-row: 2; margin: 40px 0 0; }
  .wrap > .social-strip          { grid-column: 2; grid-row: 3; margin: 16px 0 0; }
  .wrap > #event-info            { grid-column: 2; grid-row: 4; }
  .wrap > #event-info + .section { grid-column: 2; grid-row: 5; }

  .section { padding: 56px 0; }
  .cta-card { margin: 32px auto; max-width: 760px; width: 100%; }
  footer { padding: 56px 0 110px; }

  .section-head { margin-bottom: 30px; }
  .section-head .ttl-jp { font-size: 34px; }

  /* ===== LINEUP ===== */
  .artist-grid { grid-template-columns: repeat(8, 1fr); gap: 22px 16px; }

  /* ===== FOOD / TIMETABLE は中央寄せ幅 ===== */
  .tt-dual { max-width: 860px; margin: 0 auto; padding: 20px 20px 22px; }

  /* ===== VENUE: マップ左 / 情報右 ===== */
  .venue-hero {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: stretch;
  }
  .venue-map { height: auto; min-height: 380px; }
  .venue-info { padding: 32px; align-self: center; }

  /* ===== VIP: 特典 / 座席 を左右に ===== */
  .vip-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    padding: 32px;
  }
  .vip-card > * { grid-column: 1 / -1; }
  .vip-card > .vip-benefits { grid-column: 1; }
  .vip-card > .vip-seats-wrap { grid-column: 2; }
  .vip-card > .vip-cta { max-width: 420px; justify-self: center; }

  /* ===== 累計カウンター / アーカイブ導線 を横並び ===== */
  .wrap > #total-counter { grid-column: 1; }
  .wrap > #archive       { grid-column: 2; }

  /* ===== archive-01 ===== */
  .photo-grid { gap: 14px; }

  /* ===== archive-list (wrap直下がgridにならないよう個別指定) ===== */
  .vol-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }
}

/* archive-list はシンプルな1ページなので2カラム化せず中央寄せ */
@media (min-width: 1100px) {
  body:has(.vol-list) .wrap {
    display: block;
    max-width: 960px;
    padding: 20px 40px 40px;
  }
  body:has(.vol-list) .wrap > .topnav { margin: 0; }
}