/* Homepage sections added with the reorganised home: the rabbit feature that
   QR-code visitors land on, reviews, the gallery and the slim homestead strip. */

/* ---------- rabbit feature ---------- */
.home-wrapper .rabbit-feature {
  position: relative;
  margin: 2.4rem .35rem 0;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid rgb(var(--c-glass) / .35);
  border-radius: 18px;
  color: rgb(var(--c-white));
  background:
    radial-gradient(ellipse at 12% 0%, rgb(var(--c-accent) / .45), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgb(var(--c-deep) / .8), transparent 60%),
    linear-gradient(160deg, rgb(var(--c-bg-2)), rgb(var(--c-night)));
  box-shadow: 0 0 0 1px rgb(var(--c-night)), 0 0 0 4px rgb(var(--c-violet-400-8) / .5), 0 22px 50px rgb(var(--c-black) / .5), inset 0 0 60px rgb(var(--c-neon) / .08);
  scroll-margin-top: 110px;
  overflow: hidden;
}
.home-wrapper .rabbit-feature::before {
  content: '';
  position: absolute;
  right: -40px;
  top: -30px;
  width: 280px;
  height: 280px;
  background: url('../dna_portal/moonlit/card_rabbit_dna_sexing.webp') center / contain no-repeat;
  opacity: .35;
  mix-blend-mode: screen;
  filter: saturate(1.3);
  pointer-events: none;
}
.home-wrapper .rabbit-feature :is(h2, h3) { color: rgb(var(--c-white)); }
.rabbit-feature-head { position: relative; max-width: 46rem; margin-bottom: 1.6rem; }
.rabbit-feature-head h2 { margin: .25rem 0 .6rem; font-size: clamp(2rem, 4vw, 3rem); }
.rabbit-feature-head p { margin: 0; color: rgb(var(--c-surface-deep)); font-size: 1.05rem; }
.rabbit-feature-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: .3rem .8rem;
  border: 1px solid rgb(var(--c-neon) / .6);
  border-radius: 999px;
  color: rgb(var(--c-violet-100)) !important;
  background: rgb(var(--c-neon) / .12);
  font: 700 .78rem/1.2 var(--lh-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgb(var(--c-neon) / .3);
}
.rabbit-feature-grid { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.6rem; }
.rabbit-feature-sub { margin: 0 0 .8rem; font-size: 1.4rem; }
.rabbit-test-list, .research-track { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.rabbit-test {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  border: 1px solid rgb(var(--c-glass) / .28);
  border-radius: 12px;
  background: rgb(var(--c-white) / .05);
  color: rgb(var(--c-white)) !important;
  text-decoration: none;
  transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.rabbit-test:hover, .rabbit-test:focus-visible { transform: translateX(4px); border-color: rgb(var(--c-neon)); background: rgb(var(--c-neon) / .12); box-shadow: 0 0 22px rgb(var(--c-neon) / .3); }
.rabbit-test-name { display: grid; gap: .1rem; font-weight: 700; }
.rabbit-test-name small { color: rgb(var(--c-surface-deep)); font-weight: 500; font-size: .88rem; }
.rabbit-test-price { font: 600 1.5rem/1 var(--lh-serif); font-size-adjust: 0.46; color: rgb(var(--c-violet-200)); }
.rabbit-feature-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }

.research-track { position: relative; gap: 0; }
.research-track::before { content: ''; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(rgb(var(--c-neon)), rgb(var(--c-glass) / .2)); }
.research-track-item a { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: .8rem; padding: .7rem .6rem .7rem 0; color: rgb(var(--c-white)) !important; text-decoration: none; border-radius: 10px; transition: background .3s ease; }
.research-track-item a:hover { background: rgb(var(--c-white) / .05); }
.research-track-dot { position: relative; z-index: 1; width: 24px; height: 24px; margin-top: .15rem; border: 2px solid rgb(var(--c-glass) / .6); border-radius: 50%; background: rgb(var(--c-night)); }
.research-track-item.is-done .research-track-dot { border-color: rgb(var(--c-neon)); background: rgb(var(--c-neon)); box-shadow: 0 0 12px rgb(var(--c-neon) / .8); }
.research-track-item.is-done .research-track-dot::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: rgb(var(--c-night)); font: 800 .8rem/1 var(--lh-sans); }
.research-track-item.is-active .research-track-dot { border-color: rgb(var(--c-neon)); box-shadow: 0 0 0 4px rgb(var(--c-neon) / .18); animation: research-pulse 2.4s ease-in-out infinite; }
.research-track-item.is-active .research-track-dot::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: rgb(var(--c-neon)); }
.research-track-item strong { display: block; font: 600 1.3rem/1.2 var(--lh-serif); font-size-adjust: 0.46; }
.research-track-item em { display: block; color: rgb(var(--c-violet-200)); font-style: normal; font-weight: 700; font-size: .82rem; letter-spacing: .04em; }
.research-track-item small { display: block; color: rgb(var(--c-surface-deep)); font-size: .9rem; }
.rabbit-feature-more { display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem; color: rgb(var(--c-violet-200)) !important; font-weight: 700; }
.rabbit-feature-more svg { width: 1em; height: 1em; }
@keyframes research-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgb(var(--c-neon) / .18); } 50% { box-shadow: 0 0 0 8px rgb(var(--c-neon) / .05); } }
html[data-sparkles='off'] .research-track-item.is-active .research-track-dot { animation: none; }

.rabbit-feature-campaigns { position: relative; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid rgb(var(--c-glass) / .2); }
.rabbit-feature-campaigns .research-campaign-heading :is(h2, p, span) { color: rgb(var(--c-white)); }
.campaign-notice-fold { margin: .6rem 0; border: 1px solid rgb(var(--c-border) / .5); border-radius: 10px; background: rgb(var(--c-surface-soft) / .6); }
.campaign-notice-fold > summary { padding: .65rem .9rem; font-weight: 700; cursor: pointer; color: var(--lh-accent); }
.campaign-notice-fold[open] > summary { border-bottom: 1px solid rgb(var(--c-border) / .35); }
.campaign-notice-fold > :not(summary) { margin: .6rem; }

/* ---------- reviews ---------- */
/* Columns rather than a grid, so short and long reviews stack like cards on
   a table instead of leaving gaps beside the long ones. */
.review-grid { columns: 3 260px; column-gap: 1rem; }
.review-card {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 0 1rem;
  padding: 1.2rem 1.3rem 1.1rem;
  break-inside: avoid;
  border: 1px solid var(--lh-border);
  border-radius: 14px;
  background: var(--lh-surface-soft);
  box-shadow: 0 8px 22px rgb(var(--c-ink) / .08);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.review-card:hover { transform: translateY(-4px); border-color: rgb(var(--c-accent) / .55); box-shadow: 0 14px 30px rgb(var(--c-ink) / .12), 0 0 22px rgb(var(--c-neon) / .22); }
.review-mark { position: absolute; top: -.35rem; right: .9rem; margin: 0; color: rgb(var(--c-accent) / .22); font: 700 4.6rem/1 var(--lh-serif); font-size-adjust: 0.46; pointer-events: none; }
.review-stars { margin: 0 0 .4rem; color: rgb(var(--c-accent)); letter-spacing: .1em; }
.review-card blockquote { position: relative; margin: 0 0 .8rem; font: italic 500 1.28rem/1.4 var(--lh-serif); font-size-adjust: 0.46; color: var(--lh-ink); }
.review-card figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; font-size: .9rem; color: var(--lh-muted); }
.review-card figcaption strong { color: var(--lh-ink); }
.review-source { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--lh-accent); font-weight: 700; }
.review-more { margin-top: .4rem; }
.review-more > summary {
  display: block;
  width: max-content;
  margin: 0 auto 1rem;
  padding: .55rem 1.2rem;
  border: 1px solid var(--lh-border);
  border-radius: 999px;
  background: var(--lh-surface-soft);
  color: var(--lh-accent);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: box-shadow .3s ease, transform .3s ease;
}
.review-more > summary::-webkit-details-marker { display: none; }
.review-more > summary:hover { transform: translateY(-1px); box-shadow: 0 0 16px rgb(var(--c-neon) / .3); }
.review-more[open] > summary { margin-bottom: 1rem; }
.review-more-count { color: var(--lh-muted); font-weight: 600; }
.review-grid-compact .review-card blockquote { font-size: 1.12rem; }
.review-cta { margin: 1rem 0 0; text-align: center; font-weight: 700; }

/* On The Homestead the reviews sit on the pale card with a heading of their own. */
.homestead-reviews > h2 { margin: .2rem 0 1rem; }

/* ---------- gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem; margin-bottom: 1.2rem; }
.gallery-item { position: relative; margin: 0; overflow: hidden; border-radius: 14px; aspect-ratio: 1; background: rgb(var(--c-surface-deep)); box-shadow: 0 8px 20px rgb(var(--c-ink) / .12); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .8rem .7rem; background: linear-gradient(transparent, rgb(var(--c-night) / .85)); color: rgb(var(--c-white)); font-weight: 700; font-size: .92rem; }
.gallery-item figcaption small { display: block; font-weight: 500; opacity: .8; }
.gallery-invite { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.3rem; border: 1px dashed var(--lh-border); border-radius: 14px; background: rgb(var(--c-surface-soft) / .75); }
.gallery-invite > div { flex: 1; }
.gallery-invite strong { font: 600 1.35rem/1.2 var(--lh-serif); font-size-adjust: 0.46; }
.gallery-invite p { margin: .2rem 0 0; color: var(--lh-muted); }
.gallery-invite-icon img { display: block; filter: drop-shadow(0 0 10px rgb(var(--c-neon) / .6)); }

/* ---------- slim homestead strip ---------- */
.home-wrapper .homestead-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.2rem;
  margin: 1.6rem .35rem;
  padding: .9rem 1.2rem;
  border: 1px solid rgb(var(--c-glass) / .25);
  border-radius: 12px;
  background: rgb(var(--c-night) / .7);
  color: rgb(var(--c-surface-deep));
}
.homestead-strip-label { color: rgb(var(--c-violet-200)); font: 700 .75rem/1 var(--lh-sans); letter-spacing: .14em; text-transform: uppercase; }
.homestead-strip p { flex: 1 1 280px; margin: 0; font-size: .95rem; }
.homestead-strip-links { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.homestead-strip-links a { color: rgb(var(--c-violet-100)) !important; font-weight: 700; }

.home-wrapper .seal-flask { filter: drop-shadow(0 0 18px rgb(var(--c-neon) / .55)); }

@media (max-width: 860px) {
  .rabbit-feature-grid { grid-template-columns: 1fr; }
  .home-wrapper .rabbit-feature::before { width: 180px; height: 180px; }
}
@media (max-width: 560px) {
  .gallery-invite { flex-direction: column; align-items: flex-start; }
  .rabbit-feature-actions > a { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rabbit-test, .review-card, .gallery-item img, .review-more > summary { transition: none; }
  .rabbit-test:hover, .review-card:hover, .gallery-item:hover img { transform: none; }
}
.review-summary { display: inline-flex; align-items: center; gap: .5rem; margin: .3rem 0 0; font-weight: 700; }
.review-summary-stars { color: rgb(var(--c-accent)); letter-spacing: .12em; font-size: 1.15rem; text-shadow: 0 0 10px rgb(var(--c-neon) / .45); }
.review-stars span { text-shadow: 0 0 8px rgb(var(--c-neon) / .4); }
.homestead-reviews .review-grid { columns: 2 300px; }
.review-cta-button { display: inline-flex; align-items: center; gap: .45rem; }
.review-cta-button span[aria-hidden] { color: rgb(var(--c-accent)); }