/* The gallery (Views/Home/Examples.cshtml), on top of landing.css: whole cards, each a long picture in
   a phone that scrolls through it — on hover, or on a touch screen while it is in view (examples.js).
   Without motion the picture stays at the top of the card, and a click opens the card itself. */

.ex-hero { padding-bottom: 0; }
.ex-hero h1 { margin-top: 10px; }
.ex-hero .lp-lead { margin-top: 16px; }

.ex-head { max-width: 720px; }
.ex-head .lp-lead { margin-top: 12px; }
.ex-note {
  margin-top: 16px !important; padding: 12px 14px; border-radius: 14px; background: var(--lp-gold-soft); color: var(--lp-gold-ink);
  font-size: 14.5px; line-height: 1.6;
}

.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 44px 28px; margin-top: 36px; justify-items: center; }
@media (max-width: 559px) { .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; } }

.ex-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 260px; text-align: center; }
.ex-tile[hidden] { display: none; }

.ex-phone {
  display: block; width: 100%; box-sizing: border-box; padding: 7px; border-radius: 38px; background: #0b0f1a;
  box-shadow: 0 30px 60px -34px rgba(20, 34, 74, .6); transition: transform .2s, box-shadow .2s;
}
.ex-phone:hover { transform: translateY(-3px); box-shadow: 0 38px 70px -34px rgba(20, 34, 74, .7); }
.ex-phone:focus-visible, .ex-mini:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 4px; }
.ex-phone__screen { display: block; aspect-ratio: 9 / 18; overflow: hidden; border-radius: 31px; background: #e9e5dc; }
.ex-phone__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .ex-phone__screen img { transition: object-position 7s ease-in-out; }
  @media (hover: hover) {
    .ex-phone:hover img, .ex-phone:focus-visible img { object-position: 50% 100%; }
  }
  @media (hover: none) {
    .ex-phone.is-seen img { animation: ex-scroll 18s ease-in-out .8s infinite alternate; }
  }
}
@keyframes ex-scroll { from { object-position: 50% 0; } to { object-position: 50% 100%; } }
.ex-mini { display: block; border-radius: 36px; }
@media (max-width: 559px) { .ex-mini .jz-mini { zoom: .66; } }

.ex-tile__cap { display: flex; flex-direction: column; gap: 3px; }
.ex-tile__cap b { font-family: var(--lp-display); font-size: 17px; line-height: 1.3; color: var(--lp-ink); }
.ex-tile__cap span { font-size: 13.5px; line-height: 1.45; color: var(--lp-muted); }
.ex-tile__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; margin-top: auto; }
.ex-tile__open { display: inline-flex; align-items: center; gap: 3px; padding: 8px 0; color: var(--lp-blue); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.ex-tile__open:hover { text-decoration: underline; }
.ex-tile__open svg { width: 14px; height: 14px; }

/* The fields: a row that swipes on a phone and wraps on a wide screen. Filtering needs the script,
   so without it the row is not shown and every card is. */
.ex-fields { display: none; }
.ex.is-js .ex-fields {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 28px calc(-1 * clamp(16px, 4vw, 32px)) 0; padding: 2px clamp(16px, 4vw, 32px);
}
.ex-fields::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .ex.is-js .ex-fields { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.ex-fields button {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--lp-line-strong); background: #fff; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--lp-ink);
  white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s;
}
.ex-fields button span { font-size: 12.5px; color: var(--lp-muted); }
.ex-fields button[aria-pressed="true"] { background: var(--lp-navy); border-color: var(--lp-navy); color: #fff; }
.ex-fields button[aria-pressed="true"] span { color: rgba(255, 255, 255, .7); }
.ex-fields button:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 2px; }

.ex-cta {
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(32px, 5vw, 56px) 24px; border-radius: 32px;
  background: var(--lp-navy); color: #fff; text-align: center;
}
.ex-cta h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.2; }
.ex-cta p { margin: 0; color: rgba(255, 255, 255, .78); font-size: 17px; }
.ex-cta .lp-btn { margin-top: 8px; }