/* PixelSpot Newsroom index (blog.html), apple.com/newsroom style (29 Sep 2026).
   Markup is generated by scratch/build-static-blog-posts.py between the NEWSROOM markers. */
.psn { background: #f5f5f7; padding: 24px 22px 110px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; color: #1d1d1f; }
.psn-in { max-width: 1180px; margin: 0 auto; }
.blog-hero.psn-hero { background: #f5f5f7 !important; }
/* blog.css makes .blog-hero sticky (top:0, z-index:1) for the old "snap-behind" effect; with the static grid below it, the faded
   hero stayed pinned and covered the top ~400px of every tile while scrolling. Apple Newsroom's header simply scrolls away. */
.blog-hero.psn-hero { position: relative !important; top: auto !important; z-index: auto !important; }
.psn { position: relative; z-index: 2; }
.psn-hero .blog-hero-subtitle { color: #6e6e73; }

/* section headings (30 Sep 2026): a quiet label over the story grid, and an Apple-style header for the case studies
   (!important: mobile.css sizes every h2 with !important at 900px and below) */
.psn-h { margin: 0 0 18px; text-align: center; font-size: 17px !important; line-height: 1.3 !important; font-weight: 600; letter-spacing: -.01em !important; color: #6e6e73; }
.psn-sec-h { margin: 0 0 24px; font-size: 32px !important; line-height: 1.125 !important; font-weight: 700; letter-spacing: -.02em !important; color: #1d1d1f; }

/* filter pills */
.psn-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 36px; }
.psn-filter button { appearance: none; border: 0; cursor: pointer; padding: 9px 18px; border-radius: 980px; background: #fff; color: #1d1d1f;
  font: inherit; font-size: 15px; line-height: 1.2; transition: background .2s ease, color .2s ease; }
.psn-filter button:hover { background: #e8e8ed; }
.psn-filter button[aria-pressed="true"] { background: #1d1d1f; color: #fff; }
.psn-filter button:focus-visible { outline: 3px solid #0071e3; outline-offset: 2px; }

/* grid: feature spans the row, two large, then threes */
.psn-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.psn-tile { grid-column: span 2; display: flex; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden;
  color: #1d1d1f; text-decoration: none; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.psn-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0,0,0,.09); }
.psn-tile:focus-visible { outline: 3px solid #0071e3; outline-offset: 3px; }
.psn-tile[hidden] { display: none; }
.psn-large { grid-column: span 3; }
.psn-feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.psn-img { display: block; overflow: hidden; background: #e8e8ed; }
.psn-img img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.psn-tile:hover .psn-img img { transform: scale(1.03); }
.psn-feature .psn-img img { aspect-ratio: auto; min-height: 420px; }
.psn-txt { display: flex; flex-direction: column; flex: 1; padding: 22px 26px 26px; }
.psn-feature .psn-txt { justify-content: center; padding: 48px 48px; }
.psn-k { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6e6e73; }
.psn-t { margin-top: 10px; font-size: 21px; line-height: 1.26; font-weight: 600; letter-spacing: -.014em; text-wrap: balance; }
.psn-large .psn-t { font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.psn-feature .psn-t { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.025em; }
.psn-dek { margin-top: 12px; font-size: 16px; line-height: 1.45; color: #6e6e73; }
.psn-feature .psn-dek { font-size: 19px; }
.psn-d { margin-top: auto; padding-top: 16px; font-size: 13px; color: #6e6e73; }
.psn-feature .psn-d { margin-top: 20px; padding-top: 0; }
.psn-grid.is-filtered .psn-feature { grid-template-columns: 1fr; grid-column: span 2; }
.psn-grid.is-filtered .psn-feature .psn-img img { min-height: 0; aspect-ratio: 16 / 10; }
.psn-grid.is-filtered .psn-feature .psn-txt { padding: 22px 26px 26px; }
.psn-grid.is-filtered .psn-feature .psn-t, .psn-grid.is-filtered .psn-large .psn-t { font-size: 21px; }
.psn-grid.is-filtered .psn-large { grid-column: span 2; }
.psn-grid.is-filtered .psn-dek { display: none; }

/* case studies row under the story grid: three real installs, links to /case-study-* */
.psn-cases { margin-top: 88px; padding-left: 0 !important; padding-right: 0 !important; }  /* mobile.css pads every <section> */
.psn-cases-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.psn-cases-grid .psn-tile { grid-column: auto; }

/* inline SVG search icons (replace the two Font Awesome glyphs) */
.subnav-search .subnav-search-ico { width: 12px; height: 12px; flex: none; }
svg.newsroom-search-icon { width: 18px; height: 18px; flex: none; }

@media (max-width: 1068px) {
  .psn-cases { margin-top: 72px; }
  .psn-cases-grid { gap: 20px; }
  .psn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .psn-tile, .psn-large { grid-column: span 1; }
  .psn-feature { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .psn-feature .psn-img img { min-height: 0; aspect-ratio: 16 / 9; }
  .psn-feature .psn-txt { padding: 28px 30px 32px; }
  .psn-grid.is-filtered .psn-feature { grid-column: span 1; }
}
@media (max-width: 734px) {
  .psn { padding: 16px 16px 80px; }
  .psn-filter { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -16px 24px; padding: 0 16px 4px; scrollbar-width: none; }
  .psn-filter::-webkit-scrollbar { display: none; }
  .psn-filter button { flex: 0 0 auto; font-size: 14px; }
  .psn-grid { grid-template-columns: 1fr; gap: 16px; }
  .psn-tile, .psn-large, .psn-feature, .psn-grid.is-filtered .psn-feature { grid-column: 1 / -1; }
  .psn-t, .psn-large .psn-t { font-size: 20px; }
  .psn-feature .psn-t { font-size: 28px; }
  .psn-feature .psn-dek { font-size: 17px; }
  .psn-h { text-align: left; font-size: 15px !important; margin-bottom: 14px; }
  .psn-cases { margin-top: 56px; }
  .psn-sec-h { font-size: 28px !important; margin-bottom: 18px; }
  .psn-cases-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .psn-tile, .psn-img img { transition: none; } }

/* blog.html's inline mobile CSS sets animation:none on the hero text, whose resting opacity (blog.css) is 0: show it */
@media (max-width: 734px) {
  .psn-hero .blog-hero-title, .psn-hero .blog-hero-subtitle { opacity: 1 !important; transform: none !important; }
  .psn-hero { padding-bottom: 20px !important; }
}