/* ServiceNow page: advantage bento tiles, related-article cards, stat facts */

.sn-hero { padding-bottom: 40px; }

/* ───── Advantages: five tiles, compliance spans two rows ───── */
.sn-adv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sn-tile { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.sn-tile-text { padding: 32px 32px 8px; }
.sn-tile h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 12px; }
.sn-tile p { font-size: 15.5px; line-height: 1.6; color: var(--fg-2); }
.sn-tile-art { margin-top: auto; padding-top: 16px; }
/* source art is drawn grey-on-white: invert it for the dark theme */
.sn-tile-art img { display: block; width: 100%; height: auto; filter: var(--flip, invert(1) hue-rotate(180deg) brightness(1.5) contrast(1.05)); opacity: .9;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%); mask-image: linear-gradient(180deg, transparent, #000 25%); }
.sn-tile-tall { grid-column: 2; grid-row: 1 / span 2; }
.sn-tile-tall .sn-tile-art img { -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); }
.sn-adv > .sn-tile:nth-child(1) { grid-column: 1; grid-row: 1; }
.sn-adv > .sn-tile:nth-child(3) { grid-column: 3; grid-row: 1; }
.sn-adv > .sn-tile:nth-child(4) { grid-column: 1; grid-row: 2; }
.sn-adv > .sn-tile:nth-child(5) { grid-column: 3; grid-row: 2; }

/* ───── Related articles ───── */
.sn-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sn-post { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.sn-post-img { aspect-ratio: 1024 / 536; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-1); }
.sn-post-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.sn-post:hover .sn-post-img img { transform: scale(1.03); }
.sn-post-body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
.sn-post-tag { font-family: var(--mono); font-size: 12.5px; color: var(--accent); }
.sn-post h3 { margin-top: 12px; font-size: 19px; line-height: 1.35; font-weight: 600; letter-spacing: -0.02em; }
.sn-post p { flex: 1; margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.sn-post-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.sn-post-foot small { font-family: var(--mono); font-size: 12px; color: var(--fg-3); }
.sn-post-foot .link { font-size: 14px; }

/* ───── Final stats: big numbers over mono labels ───── */
.sn-facts b { margin-top: 0; font-size: clamp(36px, 4vw, 48px); line-height: 1; font-weight: 600; letter-spacing: -0.045em; color: var(--accent); }
.sn-facts span { margin-top: 12px; }

@media (max-width: 960px) {
  .sn-adv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-adv > .sn-tile:nth-child(n) { grid-column: auto; grid-row: auto; }
  .sn-adv > .sn-tile.sn-tile-tall { grid-column: 1 / -1; order: 5; flex-direction: row; align-items: center; }
  .sn-tile-tall .sn-tile-text { flex: 1; padding-bottom: 32px; }
  .sn-tile-tall .sn-tile-art { flex: 0 0 42%; padding: 16px 16px 16px 0; }
  .sn-posts { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .sn-adv { grid-template-columns: minmax(0, 1fr); }
  .sn-adv > .sn-tile.sn-tile-tall { order: 0; flex-direction: column; align-items: stretch; }
  .sn-tile-tall .sn-tile-text { padding-bottom: 8px; }
  .sn-tile-tall .sn-tile-art { padding: 16px 0 0; }
  .sn-tile-tall .sn-tile-art img { aspect-ratio: 800 / 600; object-fit: cover; object-position: center bottom; }
}
@media (max-width: 560px) {
  .sn-tile-text { padding: 26px 26px 4px; }
  .sn-post-body { padding: 22px 24px 24px; }
}

/* Light skin: small green text uses --mint (≥4.5:1 on the light surfaces); --accent stays for dots, fills,
   borders and large numbers. Light only, so the dark skin is unchanged. */
:root[data-theme="light"] .sn-post-tag { color: var(--mint); }