/* Mobile composition based on the approved My Journey reference. */
:root { font-size: min(2.56vw, 10px); --canvas: #fcfcff; --ink: #111229; --muted: #8991a5; }
.journey-page { background: linear-gradient(110deg,#fff,#fcfbff 65%,#fff); }
.journey-header { padding: calc(2rem + env(safe-area-inset-top,0px)) 1.6rem 1rem; }
.journey-header h1 { font-size: 2.6rem; line-height: 3.2rem; letter-spacing: -.06rem; }
.journey-main { padding: 0 1.6rem 2rem; }
.journey-page h2 { font-size: 1.55rem; line-height: 1.9rem; letter-spacing: -.035rem; }
.journey-page h3 { margin: 0; font-size: 1.45rem; line-height: 1.7rem; font-weight: 700; letter-spacing: -.025rem; }
.week-selector { display: grid; grid-template-columns: 2.8rem minmax(0,1fr) 2.8rem; gap: .6rem; align-items: center; }
.round-arrow { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: white; color: #914aff; font-size: 2.7rem; line-height: 1; box-shadow: 0 .2rem 1rem #8653d51c; text-align: center; }
.week-wheel { display: flex; align-items: center; gap: .6rem; overflow-x: auto; min-width: 0; padding: .8rem calc(50% - 5rem); scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; user-select: none; }
.week-wheel::-webkit-scrollbar { display: none; }
.week-option { flex: 0 0 10rem; min-height: 4.3rem; text-align: center; border-radius: 1.1rem; background: #f6f0ff; white-space: nowrap; font-size: 1.35rem; color: #858197; scroll-snap-align: center; transform: perspective(24rem) rotateY(var(--turn,0deg)) scale(var(--scale,.85)); opacity: var(--opacity,.65); }
.week-option.week-selected { color: var(--ink); font-weight: 700; box-shadow: 0 .3rem 1.2rem #9876d52b; }
.week-selector button:disabled { opacity: .3; cursor: default; }
.week-dots { display: flex; justify-content: center; gap: .4rem; margin: .7rem 0 1rem; }
.week-dots span { width: .6rem; height: .6rem; background: #ddccf8; border-radius: 50%; transition: width .25s, background-color .25s, transform .25s; }
.week-dots span.active { width: 1.4rem; background: #9450fa; transform: scale(1.1); }
.journey-section { margin-top: 1.3rem; }
.journey-page .section-heading { display: flex; justify-content: space-between; align-items: center; }
.journey-page .text-link { font-size: 1.15rem; line-height: 1.5rem; gap: .4rem; }
.journey-page .text-link .chevron { width: .8rem; height: 1.4rem; color: inherit; }
.journey-subtitle { color: var(--muted); font-size: 1.2rem; line-height: 1.5rem; margin-top: .1rem; }
.journey-photo { position: relative; display: block; width: 100%; aspect-ratio: var(--w) / var(--h); flex-shrink: 0; background-image: url('assets/journey-reference.webp'); background-repeat: no-repeat; background-size: calc(95100% / var(--w)) calc(147200% / var(--h)); background-position: calc(var(--x) * 100% / (951 - var(--w))) calc(var(--y) * 100% / (1472 - var(--h))); overflow: hidden; }
.content-carousel { position: relative; }
.article-list, .video-list, .course-list { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: .7rem; padding-bottom: .4rem; scrollbar-width: none; }
.journey-content-card { display: flex; flex-direction: column; flex: 0 0 55%; min-width: 0; scroll-snap-align: start; background: #fff; border: 1px solid #f0eef4; border-radius: 1.1rem; overflow: hidden; box-shadow: 0 .2rem .4rem #37457708; }
.content-open { display: block; color: inherit; text-decoration: none; }
.journey-photo.article-cover-placeholder { background: linear-gradient(135deg, #eee5ff, #faf7ff); }
.journey-photo.school-article-cover { aspect-ratio: 3 / 2; background: none; object-fit: cover; }
.content-open h3 { margin: .7rem 1rem 0; }
.article-list > article { min-height: 16.3rem; }
.content-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: .7rem 1rem; }
.content-type { display: inline-flex; align-items: center; gap: .5rem; width: max-content; max-width: 100%; padding: .3rem .5rem; font-size: 1.15rem; line-height: 1.5rem; color: #914aff; background: #f7f0ff; border-radius: .5rem; }
.content-type svg { width: 1.5rem; height: 1.7rem; flex-shrink: 0; }
.read-checkbox { appearance: none; width: 1.9rem; height: 1.9rem; border: 1.3px solid #a3a9bb; border-radius: 50%; margin: 0; cursor: pointer; background: white; flex-shrink: 0; }
.read-checkbox:checked { background: #9060ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 90% no-repeat; border-color: #9060ff; }
.read-checkbox:focus-visible { outline: 2px solid #9060ff; outline-offset: 3px; }
.carousel-prev, .carousel-next { position: absolute; top: 4.7rem; z-index: 1; }
.carousel-prev { left: -1.3rem; }
.carousel-next { right: -1.3rem; }
.video-card { height: var(--journey-card-height, auto); min-height: 16.3rem; }
.course-card { height: auto; min-height: max(16.3rem, var(--journey-card-height, 0px)); }
.course-photo, .video-photo { aspect-ratio: 3 / 2; background-image: none; }
.course-photo::before, .video-photo::before { content: ''; position: absolute; top: 0; left: 50%; width: calc(100% * var(--w) / var(--h) * 2 / 3); height: 100%; transform: translateX(-50%); background-image: url('assets/journey-reference.webp'); background-repeat: no-repeat; background-size: calc(95100% / var(--w)) calc(147200% / var(--h)); background-position: calc(var(--x) * 100% / (951 - var(--w))) calc(var(--y) * 100% / (1472 - var(--h))); }
.course-photo::before { background-image: url('assets/journey-courses-clean.webp'); }
.course-lock-icon { position: absolute; width: 2.4rem; height: 2.8rem; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.course-copy { padding: .7rem 1rem; }
.journey-page .course-copy h3 { font-size: 1.45rem; line-height: 1.7rem; }
.course-copy p { color: var(--muted); margin-top: .4rem; font-size: 1.2rem; line-height: 1.5rem; }
.journey-primary { text-decoration: none; display: flex; align-items: center; justify-content: center; min-height: 2.8rem; border-radius: .8rem; color: white; background: linear-gradient(180deg,#af79ff,#8240f4); font-size: 1.05rem; line-height: 1.4rem; }
.course-card > .journey-primary { flex-shrink: 0; margin: auto 1rem .7rem; padding: .6rem .4rem; font-size: 1.3rem; white-space: nowrap; }
.video-card { min-height: 16.3rem; text-align: left; }
.video-card > h3 { margin: .7rem 1rem 0; font-size: 1.45rem; line-height: 1.7rem; }
.video-card > .content-type { margin: auto 1rem .7rem; }
.video-type { color: #23ba9f; background: #e8fbf5; }
.video-type svg { width: 1.5rem; height: 1.2rem; }
.small-play { position: absolute; bottom: .7rem; left: .8rem; width: 3.2rem; height: 3.2rem; background: white; border-radius: 50%; display: grid; place-items: center; color: #8999b1; }
.small-play svg { width: 1.6rem; height: 1.6rem; }
.photo-duration { position: absolute; bottom: .6rem; right: .6rem; border-radius: .4rem; background: #424640b8; color: white; padding: .3rem .6rem; font-size: 1.1rem; line-height: 1.3rem; }
.journey-page [hidden] { display: none !important; }
.journey-week-empty { margin: 2rem 0; padding: 2rem; background: #f7f3ff; border-radius: 1.4rem; color: var(--muted); font-size: 1.5rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .article-list, .video-list, .course-list, .week-wheel { scroll-behavior: auto; } .week-dots span { transition: none; } }