/* JZ Creates — Learn house ads on blog posts (jzc-house-ads.php).
   Day (light page): a dark purple card. Night (html[data-read="dark"]): a white card.
   Loads after single.css. */

.jzb .jzha {
  --ha-bg: radial-gradient(ellipse 70% 90% at 100% 0%, rgba(214, 0, 237, .38), transparent 62%),
           radial-gradient(ellipse 60% 80% at 0% 100%, rgba(255, 36, 56, .22), transparent 60%),
           linear-gradient(135deg, #1c0830 0%, #2b0b45 55%, #3a0d55 100%);
  --ha-ink: #ffffff;
  --ha-soft: rgba(255, 255, 255, .78);
  --ha-eyebrow: #f3a6ff;
  --ha-line: rgba(255, 255, 255, .12);
  --ha-shadow: 0 26px 60px -28px rgba(43, 11, 69, .75);
  margin: 2.4rem 0;
}
html[data-read="dark"] .jzb .jzha {
  --ha-bg: radial-gradient(ellipse 70% 90% at 100% 0%, rgba(214, 0, 237, .12), transparent 62%), #ffffff;
  --ha-ink: #16161a;
  --ha-soft: #4f4b55;
  --ha-eyebrow: #a400c4;
  --ha-line: rgba(255, 255, 255, .6);
  --ha-shadow: 0 26px 60px -30px rgba(214, 0, 237, .45);
}

.jzb .jzha__card {
  display: grid; gap: 1.4rem; align-items: center;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border-radius: 22px; border: 1px solid var(--ha-line);
  background: var(--ha-bg); box-shadow: var(--ha-shadow);
  color: var(--ha-ink) !important; text-decoration: none !important;
  transition: transform .4s var(--ease-out, ease), box-shadow .4s;
}
.jzb .jzha__card:hover { transform: translateY(-3px); box-shadow: var(--ha-shadow), 0 0 0 1px rgba(214, 0, 237, .45); }

.jzb .jzha__media {
  position: relative; display: block; overflow: hidden; border-radius: 14px;
  aspect-ratio: 16 / 9; background: #0a0a0d;
}
.jzb .jzha__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 1.2s var(--ease-out, ease); }
.jzb .jzha__card:hover .jzha__media video { transform: scale(1.04); }
.jzb .jzha__tag {
  position: absolute; z-index: 2; left: .7rem; bottom: .7rem; padding: .35rem .7rem; border-radius: 999px;
  background: rgba(6, 6, 7, .62); border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
}

.jzb .jzha__copy { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; min-width: 0; }
.jzb .jzha__eyebrow { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ha-eyebrow); font-weight: 600; }
.jzb .jzha__title {
  font-family: var(--font-display, "Playfair Display", Georgia, serif); font-weight: 600;
  font-size: clamp(1.45rem, 2.3vw, 1.95rem); line-height: 1.12; color: var(--ha-ink); text-wrap: balance;
}
.jzb .jzha__text { color: var(--ha-soft); font-size: .98rem; line-height: 1.55; }
.jzb .jzha__btn {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .5rem;
  padding: .8rem 1.35rem; border-radius: 999px;
  background: var(--grad, linear-gradient(92deg, #ff0000 0%, #d600ed 100%)); color: #fff;
  font-weight: 600; font-size: .95rem; line-height: 1;
  box-shadow: 0 12px 30px -10px rgba(255, 36, 56, .6);
  transition: transform .3s var(--ease-out, ease), box-shadow .3s;
}
.jzb .jzha__arrow { transition: transform .3s var(--ease-out, ease); }
.jzb .jzha__card:hover .jzha__btn { transform: translateY(-1px); box-shadow: 0 16px 36px -10px rgba(214, 0, 237, .7); }
.jzb .jzha__card:hover .jzha__arrow { transform: translateX(3px); }

/* ---------- horizontal: copy left, preview right ---------- */
.jzb .jzha--h .jzha__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.jzb .jzha--h .jzha__media { order: 2; }
.jzb .jzha--h .jzha__copy { padding: .4rem 0 .4rem .5rem; }
@media (max-width: 700px) {
  .jzb .jzha--h .jzha__card { grid-template-columns: 1fr; gap: 1.1rem; }
  .jzb .jzha--h .jzha__media { order: 0; }
  .jzb .jzha--h .jzha__copy { padding: 0 .2rem .2rem; }
}

/* ---------- vertical: the sidebar card ---------- */
.jzb .post__side .jzha { margin: 0; }
/* the preview on top, copy + button underneath */
.jzb .jzha--v .jzha__card { grid-template-columns: 1fr; gap: 1.1rem; padding: .8rem .8rem 1.4rem; }
.jzb .jzha--v .jzha__media { aspect-ratio: 4 / 5; }
.jzb .jzha--v .jzha__copy { padding: 0 .7rem; }
.jzb .jzha--v .jzha__title { font-size: 1.55rem; }
.jzb .jzha--v .jzha__btn { align-self: stretch; justify-content: center; }
@media (max-width: 900px) {
  .jzb .jzha--deskonly { display: none !important; }
  .jzb .jzha--v .jzha__media { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  .jzb .jzha__card, .jzb .jzha__media video, .jzb .jzha__btn, .jzb .jzha__arrow { transition: none; }
}

/* smaller desktops: the preview fills the banner's full height */
@media (min-width: 701px) and (max-width: 1280px) {
  .jzb .jzha--h .jzha__card { align-items: stretch; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .jzb .jzha--h .jzha__media { aspect-ratio: auto; min-height: 240px; height: 100%; }
  .jzb .jzha--h .jzha__copy { justify-content: center; }
}