/* Additions for the Laravel build (loaded after styles.css/queries.css). */

/* Client logos come from the database, so the carousel reads the image from
   a CSS variable instead of the old hard-coded .client_1 ... .client_14. */
.carousel-item[style*="--logo"]::before {
  background-image: var(--logo);
}

/* Validation / status messages */
.flash-ok { color: #1f7a1f; font-weight: 600; }
.err:empty, .ok:empty { display: none; }

/* Hidden spam trap on the contact form */
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Video playlists: one list serves every screen size (the old site rendered
   each playlist twice — once for desktop, once for tablets). */
.playlist-section .host-playlist iframe.card { }
@media screen and (max-width: 800px) and (min-width: 550px) {
  .playlist-section.per-3 .host-playlist iframe.card:nth-child(3) { display: none; }
}
.pagination a[aria-disabled="true"] { opacity: .35; pointer-events: none; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: #000; color: #fff; padding: 8px 12px; }
.skip-link:focus { left: 8px; top: 8px; }

/* Lightweight YouTube embeds: show the thumbnail, load the player on click. */
.yt-lite { position: relative; display: block; background: #000 center / cover no-repeat; cursor: pointer; border: 0; padding: 0; }
.yt-lite::after { content: ''; position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; border-radius: 12px; background: rgba(0, 0, 0, .75); transition: background .2s; }
.yt-lite::before { content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0; z-index: 1; border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff; transform: translateX(3px); }
.yt-lite:hover::after, .yt-lite:focus-visible::after { background: #e6b800; }
.yt-lite .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.pagination.pager { grid-template-columns: 1fr 1fr 1fr; align-items: center; }
.pagination.pager .double { width: 80%; font-size: 1.4em; }
@media screen and (max-width: 550px) { .pagination.pager { width: 90%; } }

/* Respect "reduce motion" settings: skip the 2s fade-in. */
@media (prefers-reduced-motion: reduce) {
  .come-alive { opacity: 1; transform: none; transition: none; }
}