/* Marketing surface. Every value here comes from the shared token file the
   app uses (design-tokens.css, copied in by build.sh); this file adds layout
   only, no new colours and no restated token block. Colour decisions stay
   parked until the palette pass. */

* { box-sizing: border-box; }

html {
  background: var(--student-bg);
  -webkit-text-size-adjust: 100%;
}

body { margin: 0; }

/* Mirrors .student-ui in the app's globals.css, which wrapped these pages
   before they moved here. Same ground, type stack, size and leading. */
.student-ui {
  min-height: 100vh;
  background: var(--student-bg);
  color: var(--student-text);
  font-family: var(--atelieria-font-sans);
  font-size: 15px;
  font-variation-settings: "wght" 420;
  line-height: 1.45;
}

.student-ui svg:not(.brand__mark) { width: 16px; height: 16px; flex: 0 0 auto; stroke-width: 1.5; }
.student-ui :focus-visible { outline: 2px solid var(--atelieria-color-focus); outline-offset: 2px; }

.marketing-shell {
  max-width: var(--atelieria-reading-max);
  margin-inline: auto;
  padding-inline: var(--atelieria-space-24);
  padding-block: var(--atelieria-space-48);
}

/* The landing page, reproduced from the app's UnderConstruction component,
   which the apex rendered with no header or footer at all: student-app.tsx
   returns the page bare on "/" for a visitor with no session. Values here are
   the Tailwind utilities it used, written out: min-h-screen, place-items-center,
   bg-white, px-6, text-center, then text-3xl/sm:text-4xl font-semibold with
   tracking -.035em, and mt-3 text-base for the line beneath. */
.under-construction {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding-inline: var(--atelieria-space-24);
  /* The component asks for bg-white, but .student-ui is declared later in the
     app's stylesheet and wins, so this page has always rendered on the grey
     ground. Matched to what shipped, not to what the markup asks for. */
  background: var(--student-bg);
  text-align: center;
}

/* Tailwind's size utilities set a line-height as well as a font-size, so both
   are written out here. Without the line-heights the heading box is taller and
   the line beneath it lands 6px low. */
.under-construction__title {
  margin: 0;
  color: var(--student-text);
  font-size: 30px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: -.035em;
}

.under-construction__lede {
  margin: var(--atelieria-space-12) 0 0;
  color: var(--student-muted);
  font-size: var(--atelieria-text-body);
  line-height: 24px;
}

@media (min-width: 640px) {
  .under-construction__title { font-size: 36px; line-height: 40px; }
}

.marketing-title {
  margin: 0;
  font-size: 30px;
  font-weight: var(--atelieria-weight-heading);
  letter-spacing: -.035em;
}

.marketing-lede {
  margin: var(--atelieria-space-12) 0 0;
  color: var(--student-muted);
}

@media (min-width: 640px) {
  .marketing-title { font-size: 36px; }
}

/* Shared interaction reset for this surface, one grouped selector. */
a { color: inherit; }

:where(a, button):focus-visible {
  outline: 2px solid var(--student-accent);
  outline-offset: 2px;
  border-radius: var(--atelieria-space-4);
}

.marketing-shell--wide {
  max-width: var(--atelieria-shell-max);
  padding-inline: var(--atelieria-shell-gutter);
}

img { max-width: 100%; }

/* Cards crop, the way the app's own course cards do: a card-sized image is
   too small to read artwork in, so it fills rather than fits. */
.course-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--student-border);
  border-radius: var(--atelieria-space-12);
  background: var(--student-surface-muted);
}

/* The description page shows the cover big enough to read, and these covers
   are diagrams rather than photographs, so it fits rather than fills. Same
   choice the lesson reader makes for prose images. */
.course-cover--hero {
  aspect-ratio: auto;
  max-height: 680px;
  object-fit: contain;
}

/* Listing */

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--atelieria-space-24);
  margin: var(--atelieria-space-32) 0 0;
  padding: 0;
  list-style: none;
}

.course-card__link {
  display: grid;
  gap: var(--atelieria-space-12);
  height: 100%;
  padding: var(--atelieria-space-12);
  border: 1px solid var(--student-border);
  border-radius: var(--atelieria-space-16);
  text-decoration: none;
  transition: var(--atelieria-surface-transition);
}

.course-card__link:hover {
  border-color: var(--student-border-strong);
  background: var(--student-surface-muted);
}

.course-card__body { display: grid; gap: var(--atelieria-space-4); }
.course-card__title { font-weight: var(--atelieria-weight-emphasis); }
.course-card__summary { color: var(--student-subtle); font-size: var(--atelieria-text-ui); }
.course-card__meta { color: var(--student-muted); font-size: var(--atelieria-text-caption); }

/* Course description page */

.course-back { margin: 0 0 var(--atelieria-space-16); font-size: var(--atelieria-text-ui); }
.course-back a { color: var(--student-muted); text-decoration: none; }
.course-back a:hover { color: var(--student-text); }

.course-meta {
  margin: var(--atelieria-space-8) 0 var(--atelieria-space-24);
  color: var(--student-muted);
  font-size: var(--atelieria-text-ui);
}

.course-section { margin-top: var(--atelieria-space-32); }
.course-section h2 {
  margin: 0 0 var(--atelieria-space-12);
  font-size: 20px;
  font-weight: var(--atelieria-weight-heading);
  letter-spacing: -.02em;
}
.course-section p { margin: 0 0 var(--atelieria-space-12); }

.course-list { margin: 0; padding-left: var(--atelieria-space-20); }
.course-list li { margin-bottom: var(--atelieria-space-8); }

.course-outline { margin: 0; padding: 0; list-style: none; counter-reset: module; }
.course-outline__module { margin-bottom: var(--atelieria-space-24); }
.course-outline__module h3 {
  margin: 0 0 var(--atelieria-space-8);
  font-size: var(--atelieria-text-body);
  font-weight: var(--atelieria-weight-label);
}
.course-outline__lessons { margin: 0; padding-left: var(--atelieria-space-20); color: var(--student-subtle); }
.course-outline__lessons li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--atelieria-space-8);
  justify-content: space-between;
  margin-bottom: var(--atelieria-space-4);
}
.course-outline__time { color: var(--student-muted); font-size: var(--atelieria-text-caption); }

.course-cta { margin-top: var(--atelieria-space-40); }
.course-cta__button {
  display: inline-block;
  padding: var(--atelieria-space-12) var(--atelieria-space-24);
  border-radius: var(--atelieria-space-8);
  background: var(--student-text);
  color: var(--student-surface);
  font-weight: var(--atelieria-weight-label);
  text-decoration: none;
  transition: var(--atelieria-surface-transition);
}
.course-cta__button:hover { opacity: .88; }

/* Guest chrome. These rules mirror the app's globals.css so the header and
   footer that used to wrap the apex look the same now that it is served from
   Pages. The Tailwind utilities the app used inline are written out here. */

.brand { display: inline-flex; align-items: center; gap: .3em; color: var(--atelieria-color-primary); font-size: 20px; line-height: 1; white-space: nowrap; text-decoration: none; }
.brand__mark { width: auto; height: 1.35em; flex: 0 0 auto; }
.brand__wordmark { font-family: var(--atelieria-font-sans); font-size: 1em; font-weight: 600; letter-spacing: -.03em; }

.student-guest-header {
  position: sticky;
  z-index: 40;
  top: 0;
  border-bottom: 1px solid var(--student-border);
  background: color-mix(in srgb, var(--student-surface) 94%, transparent);
  backdrop-filter: blur(8px);
}

.chrome-bar {
  display: flex;
  height: 56px;
  width: 100%;
  max-width: 1280px;
  align-items: center;
  margin-inline: auto;
  padding-inline: var(--atelieria-space-16);
}

.chrome-nav {
  display: flex;
  align-items: center;
  gap: var(--atelieria-space-4);
  margin-left: auto;
  font-size: var(--atelieria-text-ui);
}

.chrome-nav__label { display: none; }

.student-nav-link {
  display: flex;
  height: 30px;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  padding: 0 9px;
  color: var(--student-subtle);
  text-decoration: none;
}
.student-nav-link:hover { background: var(--student-surface-muted); color: var(--student-text); }

.student-button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 11px;
  font-size: var(--atelieria-text-ui);
  font-weight: 520;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.student-button svg { width: 14px; height: 14px; }
.student-button--primary {
  background: var(--atelieria-color-primary);
  color: var(--atelieria-color-primary-fg);
  box-shadow: 0 1px 1px rgb(0 0 0 / 8%);
}
.student-button--primary:hover { background: color-mix(in srgb, var(--atelieria-color-primary) 88%, transparent); }
.chrome-nav__signin { margin-left: var(--atelieria-space-4); }

.student-guest-footer { border-top: 1px solid var(--student-border); background: var(--student-surface); }
.student-guest-footer a { color: inherit; text-decoration: none; }
.student-guest-footer a:hover { color: var(--student-text); }

.chrome-foot {
  display: flex;
  min-height: 64px;
  width: 100%;
  max-width: 1280px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--atelieria-space-12);
  margin-inline: auto;
  padding: var(--atelieria-space-16);
  color: var(--student-muted);
  font-size: var(--atelieria-text-caption);
}

.chrome-foot__nav { display: flex; gap: var(--atelieria-space-20); }

@media (min-width: 640px) {
  .chrome-bar, .chrome-foot { padding-inline: var(--atelieria-space-24); }
  .chrome-nav__label { display: inline; }
}