/* Top-level Learning Journeys landing (jl-).
   Reskinned to the approved desktop mockup: a full-width ~1200px container that fills the
   viewport so the marketing footer sits below the fold, an eyebrow/title/subtitle, and
   journeys grouped by type with a group header + count and large cards in a grid.

   All color/elevation lives in the --jl-* token layer below (light :root + the dark
   body.dark-mode block) so component rules stay token-driven, no stray hex, and dark mode
   re-themes every element by re-pointing the tokens. The dark values mirror the
   --brand-primary-light convention; light remains primary. Mirrors phonics-games.css. */

:root {
    --jl-blue: #00B4FF;
    --jl-blue-light: #4fd0ff;   /* gradient light end */
    --jl-blue-deep: #0174B1;
    --jl-orange: #FFAA00;
    --jl-orange-light: #ffc94d;
    --jl-green: #2FBF71;
    --jl-green-light: #6bdd9f;
    --jl-ink: #173049;
    --jl-muted: #51677d;
    --jl-soft: #EAF4FE;
    --jl-card: #ffffff;
    --jl-line: #D7E7F5;
    --jl-on-accent: #ffffff;       /* text/icon on a colored fill */
    --jl-badge-bg: rgba(255, 170, 0, 0.15);
    --jl-badge-ink: #b97400;
    --jl-badge-lang-bg: rgba(0, 180, 255, 0.15);
    --jl-badge-lang-ink: #0077b3;
    --jl-shadow-sm: 0 4px 16px rgba(23, 48, 73, 0.06);
    --jl-shadow: 0 14px 40px rgba(23, 48, 73, 0.08);
}

/* Full-width container that fills the viewport under the fixed top nav so the footer is below
   the fold (the app's full-height-page convention, e.g. .discover-page / .ap-page-kid). The
   7rem top clears the fixed nav; dvh keeps the fill exact against mobile browser chrome. */
.jl-page {
    max-width: 1200px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 7rem 2rem 3rem;
    color: var(--jl-ink);
}

/* Header */
.jl-header {
    margin-bottom: 2rem;
}

.jl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--jl-blue);
}

.jl-title {
    margin: 0.5rem 0 0.4rem;
    font-size: 3rem;
    font-weight: 900;
    color: var(--jl-ink);
}

.jl-subtitle {
    margin: 0;
    color: var(--jl-muted);
    font-size: 1.3rem;
    max-width: 46rem;
}

/* Group header: a type title with an icon on the left and a count pill on the right. */
.jl-group {
    margin-bottom: 2.5rem;
    /* Per-type accent for the group + its non-overridden cards (cards may override per journey via an
       inline --lj-accent). Shared --lj-accent contract with the Discover module; default = blue. */
    --lj-accent: var(--jl-blue);
    --lj-accent-soft: rgba(0, 180, 255, 0.12);
}

.jl-group-reading {
    --lj-accent: var(--jl-green);
    --lj-accent-soft: rgba(47, 191, 113, 0.14);
}

/* Coding (and any non-reading type) keeps the brand-blue accent. Explicit so the contract does not
   silently depend on .jl-group's default if that ever changes. */
.jl-group-coding {
    --lj-accent: var(--jl-blue);
    --lj-accent-soft: rgba(0, 180, 255, 0.12);
}

.jl-grouphd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0 1.25rem;
}

.jl-group-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--jl-ink);
}

.jl-group-icon {
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 0.8rem;
    background: var(--lj-accent-soft, var(--jl-soft));
    color: var(--lj-accent, var(--jl-blue));
    font-size: 1.2rem;
}

.jl-group-count {
    flex: 0 0 auto;
    color: var(--jl-muted);
    font-weight: 700;
    background: var(--jl-card);
    border: 1px solid var(--jl-line);
    border-radius: 999px;
    padding: 0.35rem 1rem;
    font-size: 0.95rem;
}

/* Two-column grid of large journey cards (mockup scale). */
.jl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.jl-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    text-align: left;
    padding: 1.75rem;
    border: 1px solid var(--jl-line);
    border-radius: 24px;
    /* Hero-style themed surface: a soft per-journey accent tint settling into the card surface. The
       accent comes from the group (per type) or a per-card inline override; falls back to brand soft. */
    background: linear-gradient(165deg, var(--lj-accent-soft, var(--jl-soft)) 0%, var(--jl-card) 62%);
    /* Buttons do not inherit color by default; set it so card text is token-themed in both modes. */
    color: var(--jl-ink);
    box-shadow: var(--jl-shadow-sm);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

/* Decorative accent disc echoing the Discover cards (kept subtle, behind the content). */
.jl-card::before {
    content: "";
    position: absolute;
    top: -3.5rem;
    right: -3rem;
    width: 9.5rem;
    height: 9.5rem;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lj-accent-soft, var(--jl-soft)) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.jl-card > * {
    position: relative;
    z-index: 1;
}

.jl-card:hover,
.jl-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--jl-shadow);
    border-color: var(--lj-accent, var(--jl-blue));
}

.jl-card:focus-visible {
    outline: 2px solid var(--lj-accent, var(--jl-blue));
    outline-offset: 2px;
}

/* Large colored icon tile; the color cycles per card for variety (decorative). */
.jl-card-icon {
    width: 4.5rem;
    height: 4.5rem;
    display: grid;
    place-items: center;
    border-radius: 1.2rem;
    color: var(--lj-accent, var(--jl-blue));
    font-size: 1.7rem;
    margin-bottom: 1rem;
    background: var(--lj-accent-soft, var(--jl-soft));
}

/* Cover-forward cards (reading): a fan of the journey's lead book covers replaces the icon tile. */
.jl-card-covers {
    display: flex;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.jl-card-spine {
    width: 3rem;
    height: 4.3rem;
    border-radius: 0.4rem;
    object-fit: cover;
    background: var(--lj-accent-soft, var(--jl-soft));
    border: 2px solid var(--jl-card);
    box-shadow: var(--jl-shadow-sm);
}

.jl-card-spine + .jl-card-spine {
    margin-left: -1.1rem;
}

.jl-card-title {
    margin: 0 0 0.5rem;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--jl-ink);
}

.jl-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    background: var(--jl-badge-bg);
    color: var(--jl-badge-ink);
    font-size: 0.9rem;
    font-weight: 700;
}

/* Coding journeys show a language badge in the brand blue (vs the orange AgeBand badge). */
.jl-card-badge-lang {
    background: var(--jl-badge-lang-bg);
    color: var(--jl-badge-lang-ink);
}

.jl-card-desc {
    margin: 0.9rem 0 1.1rem;
    color: var(--jl-muted);
    font-size: 1.05rem;
    line-height: 1.5;
}

/* The call to action reads as a full-width pill button. The whole card is the click target
   (one navigation, unchanged), so this is styled as a button but is not a nested control. */
.jl-card-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem;
    border-radius: 999px;
    background: var(--lj-accent, var(--jl-blue));
    color: var(--jl-on-accent);
    font-weight: 800;
    font-size: 1.2rem;
}

.jl-card:hover .jl-card-cta { filter: brightness(0.96); }

/* States: loading / empty */
.jl-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 4rem 1rem;
    color: var(--jl-muted);
    text-align: center;
}

.jl-state-icon {
    font-size: 2.5rem;
    color: var(--jl-blue);
}

.jl-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 4px solid var(--jl-line);
    border-top-color: var(--jl-blue);
    border-radius: 50%;
    animation: jl-spin 0.8s linear infinite;
}

@keyframes jl-spin {
    to { transform: rotate(360deg); }
}

/* Tablet: ease the full-width desktop sizes down a step and keep the two-column grid. */
@media (max-width: 900px) {
    .jl-page { padding-left: 1.5rem; padding-right: 1.5rem; }
    .jl-title { font-size: 2.3rem; }
    .jl-subtitle { font-size: 1.15rem; }
    .jl-group-title { font-size: 1.35rem; }
    .jl-card-title { font-size: 1.4rem; }
    .jl-card-icon { width: 3.75rem; height: 3.75rem; font-size: 1.45rem; }
}

/* Phone: stack to a single column and return to phone-friendly proportions. */
@media (max-width: 560px) {
    .jl-page { padding: 5rem 1rem 3rem; }
    .jl-title { font-size: 1.9rem; }
    .jl-subtitle { font-size: 1.05rem; }
    .jl-grid { grid-template-columns: 1fr; gap: 1rem; }
    .jl-card { padding: 1.35rem; border-radius: 20px; }
    .jl-card-icon { width: 3.25rem; height: 3.25rem; font-size: 1.3rem; margin-bottom: 0.75rem; }
    .jl-card-title { font-size: 1.3rem; }
    .jl-card-cta { font-size: 1.05rem; padding: 0.85rem; }
    .jl-group-count { font-size: 0.85rem; }
}

/* Dark mode re-themes the whole landing by re-pointing the token layer (no per-rule hex).
   Gated on the app's body.dark-mode class (the app theme switch), not the OS color scheme,
   so light app mode stays light regardless of the OS setting. Mirrors phonics-games.css and
   the --brand-primary-light convention; light remains primary. */
body.dark-mode {
    --jl-blue: var(--brand-primary-light, #4DB8FF);
    --jl-blue-light: #6cc5ff;
    --jl-blue-deep: #2f9fe0;
    /* Brighter green for dark surfaces (matches the Discover module's dark reading accent) so the
       Kids Reading group header tint stays token-driven in dark mode. */
    --jl-green: #57d08e;
    --jl-ink: #eaf4ff;
    --jl-muted: #9bb6cc;
    --jl-soft: #13283a;
    --jl-card: #15293b;
    --jl-line: #26425a;
    --jl-badge-bg: rgba(255, 170, 0, 0.18);
    --jl-badge-ink: #ffc266;
    --jl-badge-lang-bg: rgba(77, 184, 255, 0.20);
    --jl-badge-lang-ink: #8fd2ff;
    --jl-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
    --jl-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

/* The reading soft tint is a fixed rgba (not a --jl- token), so re-point it for dark mode here to
   stay aligned with the brighter dark --jl-green accent (mirrors the Discover dark reading tint). */
body.dark-mode .jl-group-reading {
    --lj-accent-soft: rgba(87, 208, 142, 0.20);
}