/* Soul YouTube Gallery — every selector is scoped to this plugin. */
.smsg-page.smsg-page {
  --smsg-gold: #bd9e55;
  --smsg-plum: #381229;
  box-sizing: border-box;
  width: 100%; max-width: 1200px; min-width: 0; margin: 0 auto; padding: 0;
  background: #fff; color: #381229;
  font: 18px/1.55 Georgia, 'Times New Roman', serif;
  text-align: left; isolation: isolate; container: smsg-page / inline-size;
}
.smsg-page.smsg-page *, .smsg-page.smsg-page *::before, .smsg-page.smsg-page *::after { box-sizing: border-box; }
.smsg-page.smsg-page :is(h1,h2,p,ul,li) { margin: 0; padding: 0; color: inherit; }
.smsg-page.smsg-page :is(h1,h2) { font-family: Georgia, 'Times New Roman', serif; font-style: normal; text-transform: none; }
.smsg-page.smsg-page a { color: inherit; text-decoration: none; box-shadow: none; border: 0; }
.smsg-page.smsg-page img { display: block; max-width: 100%; margin: 0; padding: 0; border: 0; box-shadow: none; opacity: 1; visibility: visible; }
.smsg-page.smsg-page button { font: inherit; cursor: pointer; }
.smsg-page.smsg-page :focus-visible { outline: 3px solid #b08b31; outline-offset: 5px; }
.smsg-page.smsg-page [hidden] { display: none !important; }
.smsg-page.smsg-page .smsg-header {
  display: grid; grid-template-columns: minmax(150px,1fr) auto auto;
  align-items: center; gap: 30px; min-height: 102px; padding: 18px 4%;
}
.smsg-page.smsg-page .smsg-logo-link { display: block; width: 215px; max-width: 100%; background: transparent; }
.smsg-page.smsg-page .smsg-logo { width: 100%; height: auto; max-height: 77px; object-fit: contain; border-radius: 0; filter: none; }
.smsg-page.smsg-page .smsg-nav ul, .smsg-page.smsg-page .smsg-nav li { display: flex; align-items: center; list-style: none; }
.smsg-page.smsg-page .smsg-nav li + li::before { content: ''; width: 1px; height: 16px; margin: 0 17px; background: #776373; }
.smsg-page.smsg-page .smsg-nav :is(a,span) { display: inline-block; padding: 12px 0; font: 15px/1.2 Arial,sans-serif; white-space: nowrap; }
.smsg-page.smsg-page .smsg-nav a[aria-current="page"] { color: #a17d33; text-decoration: underline; text-underline-offset: 7px; }
.smsg-page.smsg-page .smsg-nav a:hover { color: #a17d33; }
.smsg-page.smsg-page .smsg-language { display: inline-flex; gap: 6px; align-items: center; font: 14px Arial,sans-serif; }
.smsg-page.smsg-page .smsg-language svg { width: 17px; height: 17px; }
.smsg-page.smsg-page .smsg-menu-button { display: none; }

.smsg-page.smsg-page .smsg-hero {
  position: relative; display: flex; align-items: center; min-height: 460px;
  aspect-ratio: 1638 / 860; background: #260d24; color: #fff7df;
}
.smsg-page.smsg-page .smsg-banner { position: absolute; inset: 0; overflow: hidden; }
.smsg-page.smsg-page .smsg-banner img { width: 100%; height: 100%; object-fit: cover; object-position: left center; border-radius: 0; }
.smsg-page.smsg-page .smsg-hero-copy {
  position: relative; width: 50%; margin-left: auto; padding: 5% 5% 5% 2%; text-align: center;
}
.smsg-page.smsg-page .smsg-hero-copy h1 { color: #f3de91; font-size: clamp(34px,4.4cqw,53px); font-weight: 400; line-height: 1.12; }
.smsg-page.smsg-page .smsg-hero-copy p { color: #fff7df; font: clamp(16px,1.8cqw,21px)/1.65 Arial,sans-serif; text-wrap: pretty; }
.smsg-page.smsg-page .smsg-divider { display: flex; align-items: center; gap: 8px; width: 91%; margin: 24px auto; }
.smsg-page.smsg-page .smsg-divider::before, .smsg-page.smsg-page .smsg-divider::after { content: ''; height: 1px; flex: 1; background: #d4b865; }
.smsg-page.smsg-page .smsg-divider span { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg,#fce9aa,#b68c39); }
.smsg-page.smsg-page .smsg-gold-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  max-width: 100%; min-height: 44px; padding: 10px 21px; border-radius: 24px;
  color: #381229; background: linear-gradient(105deg,#c39c50,#f1dfa0 43%,#e8cf7f 72%,#bb9650);
  font: 14px/1.4 Arial,sans-serif; text-align: center;
}
.smsg-page.smsg-page .smsg-gold-button svg { width: 21px; height: 16px; flex: 0 0 21px; }
.smsg-page.smsg-page .smsg-hero-copy .smsg-gold-button { margin-top: 27px; }
.smsg-page.smsg-page .smsg-gold-button:hover, .smsg-page.smsg-page .smsg-youtube-link:hover { filter: brightness(1.06); }

/* All videos; there is deliberately no sidebar or category panel. */
.smsg-page.smsg-page .smsg-gallery { padding: 54px 4% 64px; scroll-margin-top: 24px; }
.smsg-page.smsg-page .smsg-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 26px 22px; }
.smsg-page.smsg-page .smsg-card {
  display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0;
  border: 1px solid #c2a970; border-radius: 18px; background: #fffefa;
}
.smsg-page.smsg-page .smsg-thumbnail {
  position: relative; display: block; flex: none; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: 17px 17px 0 0; background: #35142d;
}
.smsg-page.smsg-page .smsg-thumbnail img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.smsg-page.smsg-page .smsg-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  display: grid; place-items: center; width: 48px; height: 36px;
  color: #39132f; border-radius: 10px; filter: drop-shadow(0 2px 5px #0006);
}
.smsg-page.smsg-page .smsg-play svg { width: 48px; height: 36px; opacity: .92; }
.smsg-page.smsg-page .smsg-thumbnail:hover .smsg-play { color: #9a6e23; }
.smsg-page.smsg-page .smsg-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 16px; padding: 16px 15px 13px; }
.smsg-page.smsg-page .smsg-card-title { width: 100%; font-size: 18px; font-weight: 400; line-height: 1.3; overflow-wrap: anywhere; }
.smsg-page.smsg-page .smsg-card-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.smsg-page.smsg-page .smsg-youtube-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  align-self: flex-end; margin-top: auto; min-height: 38px; padding: 7px 13px;
  border-radius: 20px; color: #381229;
  background: linear-gradient(105deg,#c6a258,#f0dda0 50%,#c6a258);
  font: 16px/1.2 Georgia,serif;
}
.smsg-page.smsg-page .smsg-youtube-link svg { width: 19px; height: 15px; }
.smsg-page.smsg-page .smsg-empty { padding: 40px 16px; text-align: center; }
.smsg-page.smsg-page .smsg-empty p { margin-bottom: 18px; }
.smsg-page.smsg-page .smsg-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@container smsg-page (max-width: 999px) {
  .smsg-page.smsg-page .smsg-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .smsg-page.smsg-page .smsg-header { gap: 18px; }
  .smsg-page.smsg-page .smsg-logo-link { width: 175px; }
  .smsg-page.smsg-page .smsg-nav :is(a,span) { font-size: 13px; }
  .smsg-page.smsg-page .smsg-nav li + li::before { margin-inline: 12px; }
  .smsg-page.smsg-page .smsg-hero { min-height: 410px; }
}
@container smsg-page (max-width: 820px) {
  .smsg-page.smsg-page .smsg-header { grid-template-columns: minmax(0,1fr) auto auto; gap: 12px; min-height: 82px; padding: 14px 22px; }
  .smsg-page.smsg-page .smsg-logo-link { grid-column: 1; grid-row: 1; width: 180px; }
  .smsg-page.smsg-page .smsg-language { grid-column: 2; grid-row: 1; }
  .smsg-page.smsg-page .smsg-nav { grid-column: 1 / -1; padding-top: 7px; border-top: 1px solid #eadfbc; }
  .smsg-page.smsg-page .smsg-nav ul { flex-wrap: wrap; justify-content: space-between; gap: 8px 15px; }
  .smsg-page.smsg-page .smsg-nav li + li::before { display: none; }
  .smsg-page.smsg-page .smsg-nav :is(a,span) { font-size: 14px; }
  .smsg-page.smsg-page[data-smsg-ready] .smsg-menu-button { display: grid; place-items: center; grid-column: 3; grid-row: 1; width: 44px; height: 44px; padding: 0; background: #fff; color: #381229; border: 1px solid #c5ac73; border-radius: 5px; font-size: 24px; }
  .smsg-page.smsg-page[data-smsg-ready] .smsg-nav:not(.smsg-open) { display: none; }
  .smsg-page.smsg-page .smsg-hero { display: block; min-height: 0; aspect-ratio: auto; }
  .smsg-page.smsg-page .smsg-banner { position: relative; aspect-ratio: 1638 / 860; }
  .smsg-page.smsg-page .smsg-banner img { object-fit: contain; }
  .smsg-page.smsg-page .smsg-hero-copy { width: 100%; margin: 0; padding: 32px 28px 38px; }
  .smsg-page.smsg-page .smsg-hero-copy h1 { font-size: clamp(32px,6cqw,46px); }
  .smsg-page.smsg-page .smsg-hero-copy p { max-width: 520px; margin-inline: auto; font-size: 18px; }
  .smsg-page.smsg-page .smsg-divider { max-width: 360px; margin-block: 20px; }
}
@container smsg-page (max-width: 759px) {
  .smsg-page.smsg-page .smsg-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 18px; }
  .smsg-page.smsg-page .smsg-gallery { padding: 36px 24px 44px; }
}
@container smsg-page (max-width: 519px) {
  .smsg-page.smsg-page .smsg-grid { grid-template-columns: minmax(0,1fr); gap: 25px; }
  .smsg-page.smsg-page .smsg-gallery { padding: 32px 22px 40px; }
  .smsg-page.smsg-page .smsg-card-title { font-size: 20px; }
  .smsg-page.smsg-page .smsg-card-body { padding: 17px 18px 15px; }
  .smsg-page.smsg-page .smsg-hero-copy p { font-size: 16px; }
}

/* Native dialog contains one YouTube player, created only after a click. */
dialog.smsg-dialog {
  box-sizing: border-box; width: min(960px,calc(100vw - 24px)); max-width: none;
  max-height: calc(100dvh - 24px); margin: auto; padding: 0; overflow: auto;
  background: #241022; color: #fff3dc; border: 1px solid #c9ae65; border-radius: 12px;
  box-shadow: 0 20px 80px #0007; font: 16px/1.5 Arial,sans-serif;
}
dialog.smsg-dialog::backdrop { background: #160b17d9; }
dialog.smsg-dialog .smsg-dialog-top { display: flex; align-items: center; gap: 20px; justify-content: space-between; padding: 12px 16px; }
dialog.smsg-dialog .smsg-dialog-title { color: inherit; margin: 0; font: inherit; overflow-wrap: anywhere; }
dialog.smsg-dialog .smsg-close { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid #a58a55; border-radius: 6px; background: transparent; color: #fff; font: 30px/1 Arial,sans-serif; cursor: pointer; }
dialog.smsg-dialog .smsg-frame-wrap { width: 100%; aspect-ratio: 16 / 9; min-height: 200px; background: #000; }
dialog.smsg-dialog iframe { display: block; width: 100%; height: 100%; min-height: 200px; border: 0; }
dialog.smsg-dialog .smsg-dialog-link { display: block; padding: 13px 16px; color: #f1d383; text-decoration: underline; text-underline-offset: 3px; font: 14px/1.5 Arial,sans-serif; }
dialog.smsg-dialog :focus-visible { outline: 3px solid #f5d884; outline-offset: -3px; }
@media (prefers-reduced-motion: no-preference) {
  .smsg-page.smsg-page .smsg-play { transition: color .15s ease; }
}