/* Service pages (id/layanan/, services/): loaded after styles.css and assets/articles.css.
 * They reuse the case hero, the home stage cards, process and FAQ; this file only places the award seal and lays out cases and videos. */

/* the award seal sits on the cover corner, as on the home folders; gold only for the ISRA award */
.sv-hero .seal { right: calc(var(--space-lg) * -1); top: calc(var(--space-xl) * -1); }
.seal--gold { background: radial-gradient(circle at 30% 25%, var(--color-gold), var(--color-gold-2)); }

.sv-band { padding-block: var(--section-gap-s); }
.core .sv-do .svc__name { margin-top: var(--space-2xl); }

/* case studies: the article case cards, two per row */
.sv-cases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.sv-cases .ar-case { height: 100%; }
.sv-cases li:first-child:nth-last-child(1) { grid-column: 1 / -1; max-width: 880px; }

/* PROPER videos: four click-to-play thumbnails */
.sv-videos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.sv-videos li { display: grid; gap: var(--space-xs); align-content: start; }
.sv-videos h3 { margin-top: var(--space-xs); }
.sv-videos p:not(.award) { font-size: var(--text-sm); color: var(--color-muted); }
.sv-videos .award { justify-self: start; }

@media (max-width: 60rem) {
  .sv-hero .seal { right: var(--space-md); top: calc(var(--space-lg) * -1); }
  .sv-cases { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .sv-videos { grid-template-columns: minmax(0, 1fr); }
}