/* The Mobile Update (10188). Builds on patch-notes-feature.css; phone screenshots sit in simple grids. */
.mobile-notes { --article-width: 1240px; }
.mobile-notes .patch-heading { padding-top: 24px; }
.mobile-notes .patch-hero { grid-template-columns: 1fr 1fr; gap: 44px; padding: 18px 0 36px; }
.mobile-notes .patch-hero h1 { font-size: clamp(52px, 6.6vw, 84px); }
.mobile-notes .hero-detail { color: #bdb1cd; line-height: 1.75; max-width: 48ch; }
.mobile-notes .update-status { display: inline-block; padding: 8px 12px; border: 1px solid var(--article-rule); color: #d9c89a; font-size: 13px; }

.hero-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
.hero-phones figure { margin: 0; min-width: 0; display: grid; gap: 10px; }
.hero-phones img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; object-position: top; border: 1px solid var(--article-rule); border-radius: 14px; background: #080609; image-rendering: auto; }
.hero-phones figure:nth-child(2) img { aspect-ratio: 9 / 17; }
.hero-phones figcaption { color: #b6a9c8; font-size: 12px; text-align: center; }

.mobile-notes .update-index { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--article-rule); border-bottom: 1px solid var(--article-rule); }
.mobile-notes .update-index a { display: flex; flex-direction: column; gap: 9px; min-height: 96px; padding: 18px 16px; text-decoration: none; font-size: 14px; }
.mobile-notes .update-index a + a { border-left: 1px solid var(--article-rule); }
.mobile-notes .update-index span { font: 400 22px var(--display); color: var(--gold-hi); }

.mobile-notes .patch-layout { gap: 48px; grid-template-columns: 174px minmax(0, 1fr); }
.mobile-notes .section-kicker { color: var(--purple-hi); font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.mobile-notes .patch-section { padding: 38px 0 44px; }
.mobile-notes .patch-section h2 { font-size: clamp(31px, 3.2vw, 42px); }
.mobile-notes .setting-note { margin: 26px 0; padding: 18px 22px; border-left: 3px solid var(--gold); background: #1b1425; }
.mobile-notes .setting-note h3 { color: var(--gold-hi); margin-top: 0; }
.mobile-notes .media-disclosure { margin: 20px 0; padding: 0 0 2px; border-bottom: 1px solid var(--article-rule); }
.mobile-notes .media-disclosure summary { color: var(--purple-hi); cursor: pointer; padding: 14px 4px; min-height: 48px; font-size: 14px; }
.mobile-notes .media-disclosure summary:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.mobile-notes .change-list { display: grid; gap: 10px; padding-left: 1.2em; color: #c9bdd8; line-height: 1.7; }

.shot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 26px 0; align-items: start; }
.shot-grid.pairs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shot-grid.strip { grid-template-columns: repeat(3, minmax(0, 200px)); }
.shot-grid.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-disclosure .shot-grid.pairs { grid-template-columns: repeat(2, minmax(0, 240px)); }
.shot-grid figure { margin: 0; min-width: 0; display: grid; gap: 8px; align-content: start; }
.shot-grid img { display: block; width: 100%; height: auto; border: 1px solid var(--article-rule); border-radius: 10px; background: #080609; image-rendering: auto; }
.shot-grid figcaption { color: #b6a9c8; font-size: 12px; line-height: 1.6; }
.shot-tag { width: fit-content; padding: 3px 9px; border-radius: 999px; background: #241b2d; color: #b6a9c8; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.shot-tag.after { background: #3a2a55; color: var(--gold-hi); }

@media (max-width: 900px) {
  .mobile-notes .patch-hero { grid-template-columns: 1fr; }
  .mobile-notes .update-index { grid-template-columns: repeat(2, 1fr); }
  .mobile-notes .update-index a:nth-child(3) { border-left: 0; }
  .mobile-notes .update-index a:nth-child(n + 3) { border-top: 1px solid var(--article-rule); }
  .shot-grid.pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .mobile-notes .patch-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mobile-notes .patch-contents { display: none; }
  .shot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .shot-grid.wide { grid-template-columns: minmax(0, 1fr); }
  .shot-grid.strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}