/*
  custom.css – your own additions on top of the copied Adobe design.
  This file is loaded on every page, after the Adobe styles.
  Currently it only styles the video embeds.
*/

/* ---------- Responsive video embeds ---------- */
.sp-embed { position: relative; width: 100%; height: 0; overflow: hidden; background: #000; }
.sp-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.sp-embed--16x9 { padding-bottom: 56.25%; }          /* TV segments, YouTube, etc. */
.sp-embed--reel { padding-bottom: calc(56.5% + 210px); background: #fff; } /* Instagram reel/post (height follows width) */

.sp-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.sp-video-single { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.sp-reel { max-width: 540px; margin: 0 auto; padding: 0 20px; }

.sp-video-caption { padding-top: 12px; text-align: center; font-family: ysxc, sans-serif; }
.sp-video-title { color: #013b85; font-weight: 600; font-size: 18px; line-height: 1.3; }
.sp-video-meta { color: #333; font-weight: 400; font-size: 14px; padding-top: 4px; }
.sp-video-meta a { color: #013b85; text-decoration: underline; }

@media (max-width: 768px) {
  .sp-video-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Button under the home-page video (same look as the "GET A FREE ESTIMATE" button, smaller) */
.sp-button .button-module {
  border-radius: 17px; color: #013B85; font-family: ysxc; font-size: 22px; font-weight: 800;
  line-height: 55px; border: 1px solid #013b85; text-decoration: none;
}
.sp-button .button-module::before, .sp-button .button-module::after { width: 36px; }
.sp-button .button-module:hover { color: #000; background-color: rgba(1, 59, 133, 0.75); }
@media (max-width: 540px) {
  .sp-button .button-module { font-size: 15px; line-height: 48px; }
  .sp-button .button-module::before, .sp-button .button-module::after { width: 20px; }
}