/* ==========================================================================
   الكشاف — landing page

   The layered gradient background is global (app.css, html::before /
   html::after) — nothing here repeats it. This file is the hero, the test
   cards, and the vertical rhythm that holds them.

   The rhythm is tuned so the whole page fits a 1440x900 desktop viewport
   without scrolling, and relaxes again below 64rem where scrolling is
   expected. Every reduction is spacing; no type step was shrunk out of the
   hierarchy.

   Logical properties only. Mobile-first.
   ========================================================================== */

/* ---- hero ----------------------------------------------------------------- */

.home-hero {
  max-inline-size: 34rem;
  margin-inline: auto;
  text-align: center;
  padding-block-end: clamp(1.5rem, 1.25rem + 0.75vw, 1.75rem);
}

.home-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.375rem;
  padding-inline: 0.875rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.home-hero__badge-dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 999px;
  background: var(--primary);
  flex: none;
}

.home-hero__title {
  margin-block: 0.625rem 0.25rem;
  font-family: var(--font-brand);
  font-size: clamp(2.75rem, 2.2rem + 2.4vw, 3.75rem);
  line-height: 1;
  font-weight: 700;
  background-image: linear-gradient(to left, var(--primary), var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home-hero__lede {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
  margin-block: 0 0.375rem;
}

.home-hero__desc {
  max-inline-size: 28rem;
  margin-block: 0;
  margin-inline: auto;
  line-height: 1.6;
  color: var(--text-muted);
}

.home-hero__pills {
  list-style: none;
  margin: 0.875rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.home-hero__pills li {
  padding-block: 0.3125rem;
  padding-inline: 0.8125rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}

.home-hero__actions {
  margin-block-start: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* The desktop target is one screenful, so the CTA row is a step shorter
   there than the global .btn. Phone keeps the full 48px. */
@media (min-width: 64rem) {
  .home-hero__actions .btn {
    min-block-size: 2.75rem;
    padding-block: 0.5rem;
  }
}

/* ---- tests ---------------------------------------------------------------- */

.home-tests {
  max-inline-size: var(--wide-column);
  margin-inline: auto;
  padding-block: 0;
}

.home-tests h2 {
  text-align: center;
  font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.4375rem);
  margin-block: 0 0.75rem;
}

.home-tests__grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 42rem) {
  .home-tests__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64rem) {
  .home-tests__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.125rem;
  }
}

/* ---- one test card --------------------------------------------------------
   Anatomy follows apps/web/src/components/TestCard.tsx in the reference
   project: a gradient banner carrying an oversized translucent glyph, a
   pill, the title and a tagline; then a body with the description, a row of
   small pills, and a full-width call-to-action whose arrow shifts on hover.

   The colour pair arrives as --tc-from / --tc-to, set per card in the view,
   the way testMeta.ts holds `from` and `to` per slug.
   -------------------------------------------------------------------------- */

.tcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tcard:hover {
  color: var(--text);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.tcard:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* ---- banner ---- */

.tcard__banner {
  position: relative;
  overflow: hidden;
  padding-block: 0.875rem 0.9375rem;
  padding-inline: 1.25rem;
  background-image: linear-gradient(135deg, var(--tc-from), var(--tc-to));
}

/* The oversized glyph: bled off the inline start, blurred a touch, and
   scaled on hover, exactly as the reference does it. */
.tcard__glyph {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: -0.75rem;
  transform: translateY(-50%);
  font-size: 7.25rem;
  line-height: 1;
  opacity: 0.24;
  filter: blur(1px) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
  pointer-events: none;
  user-select: none;
  transition: transform 0.5s ease;
}

.tcard:hover .tcard__glyph {
  transform: translateY(-50%) scale(1.12);
}

.tcard__pills {
  position: relative;
  list-style: none;
  margin: 0 0 0.4375rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.tcard__pills li {
  display: inline-flex;
  align-items: center;
  padding-block: 0.25rem;
  padding-inline: 0.6875rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

.tcard__title {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.tcard__tagline {
  position: relative;
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}

/* ---- body ---- */

.tcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-block: 0.9375rem 1rem;
  padding-inline: 1.25rem;
}

.tcard__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.tcard__tags {
  list-style: none;
  margin: 0.625rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.tcard__tags li {
  padding-block: 0.25rem;
  padding-inline: 0.625rem;
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.tcard__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: auto;
  padding-block: 0.625rem;
  padding-inline: 1rem;
  border-radius: var(--radius-2xl);
  background-image: linear-gradient(135deg, var(--tc-from), var(--tc-to));
  color: #fff;
  transition: transform 0.3s ease;
}

/* The tag row above already provides the gap when the card is short. */
.tcard__tags + .tcard__cta,
.tcard__desc + .tcard__cta {
  margin-block-start: 0.875rem;
}

.tcard:hover .tcard__cta {
  transform: scale(1.02);
}

.tcard__cta-text {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}

.tcard__arrow {
  font-size: 1.125rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

/* RTL: the arrow points to the inline end, so it travels that way. */
.tcard:hover .tcard__arrow {
  transform: translateX(-0.25rem);
}

.home-disclaimer {
  max-inline-size: 30rem;
  margin: 0.75rem auto 0;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* The one-screenful target, scoped to this page so no other route loses its
   breathing room. `:has` keeps it in CSS rather than adding a body class the
   route would have to set, and a browser without `:has` simply scrolls a
   little — the page is not broken by missing it. */
@media (min-width: 64rem) and (min-height: 44rem) {
  .site-main:has(.home-hero) {
    padding-block-start: calc(var(--header-block-size) + 0.75rem);
    padding-block-end: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tcard,
  .tcard__glyph,
  .tcard__cta,
  .tcard__arrow {
    transition-duration: 0.01ms;
  }
  .tcard:hover {
    transform: none;
  }
  .tcard:hover .tcard__glyph {
    transform: translateY(-50%);
  }
  .tcard:hover .tcard__cta,
  .tcard:hover .tcard__arrow {
    transform: none;
  }
}