/* Prairie Desk: the hub (home page). Tokens only. */

/* ---------- A. Hero: desk with pages ---------- */
.hero { position: relative; overflow: hidden; }
.hero-grid { min-height: 584px; align-items: center; padding-block: var(--s-7); }
.hero-text { grid-column: 1 / span 6; position: relative; z-index: 2; }
.hero-text .display { color: var(--text-on-field); max-width: min(16ch, 100%); }
.hero-text .lead { margin-top: var(--s-5); color: var(--text-on-field-soft); max-width: 40ch; }
.hero-actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.hero-actions .text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-ui); }

.fan { --fx: 104px; --fy: 40px; grid-column: 7 / span 6; position: relative; height: 488px; }
.fan-stage { position: absolute; inset: 0; }
.fan-page {
  position: absolute; left: 0; top: 0; width: var(--hero-page-w); margin: 0;
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  transform-origin: 50% 60%;
}
.fan-page img, .fan-page picture { display: block; width: 100%; border-radius: var(--r-paper); box-shadow: var(--shadow-paper); background: var(--paper); }
.fan-page--back   { --x: 0px;   --y: 28px; --r: -7deg; }
.fan-page--middle { --x: 196px; --y: 0px;  --r: 2deg; }
.fan-page--front  { --x: 104px; --y: 40px; --r: -2deg; }
.fan-chip { position: absolute; top: calc(var(--s-4) * -1); left: 0; box-shadow: var(--shadow-float); }

.fact-card {
  position: absolute; left: -32px; bottom: -8px; z-index: 3; width: 248px;
  padding: var(--s-5); background: var(--surface); color: var(--text);
  border-radius: var(--r-card); box-shadow: var(--shadow-float);
}
.fact-card::before { content: ""; display: block; width: 48px; height: 2px; background: var(--rule-accent); margin-bottom: var(--s-3); }
.fact-value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; color: var(--heading); }
.fact-label { margin-top: var(--s-1); }

@media (prefers-reduced-motion: no-preference) {
  .fan-page { animation: deal 700ms var(--ease-out) both; }
  .fan-page--back { animation-delay: 0ms; }
  .fan-page--middle { animation-delay: 70ms; }
  .fan-page--front { animation-delay: 140ms; }
  .fan-chip, .fact-card { animation: rise 400ms var(--ease-out) 350ms both; }
}
/* Pages start squared on the front page's spot, fully visible, then fan out. */
@keyframes deal { from { transform: translate(var(--fx), var(--fy)) rotate(0deg); } }
@keyframes rise { from { opacity: 0.001; transform: translateY(12px); } }

/* 1024 and up: the fact card sits over the back (music) page, clear of the zoo legend. */
@media (min-width: 1024px) {
  .fact-card { left: calc(var(--s-8) * -1); bottom: calc(var(--s-5) * -1); }
}
@media (max-width: 1279px) and (min-width: 1024px) {
  .fan { transform: scale(0.8); transform-origin: left center; }
}
/* Below 1024: the hero stacks. Text first, the fan of pages below it, the fact card under the fan. */
@media (max-width: 1023px) {
  .hero-grid { min-height: 0; padding-block: var(--s-7) 0; }
  .hero-text, .fan { grid-column: 1 / -1; }
  .hero-text .display { max-width: min(20ch, 100%); }
  .fan { height: auto; margin-top: var(--s-6); }
  .fan-stage { position: relative; height: 340px; overflow: hidden; }
  .fan-stage .fan-page { left: calc(50% - 260px); }
  .fact-card { position: relative; left: auto; bottom: auto; width: auto; max-width: 400px; margin: calc(var(--s-6) * -1) auto var(--s-6); }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .fan { --fx: 110px; --fy: 48px; }
  .fan-page { width: 300px; }
  .fan-page--back   { --x: 0px;   --y: 40px; --r: -7deg; }
  .fan-page--middle { --x: 220px; --y: 16px; --r: 2deg; }
  .fan-page--front  { --x: 110px; --y: 48px; --r: -2deg; }
}
@media (max-width: 767px) {
  .hero-grid { padding-block: var(--s-6) 0; }
  .hero-text .display { max-width: none; }
  .hero-actions { margin-top: var(--s-5); }
  .hero-actions .btn { width: 100%; }
  .fan { --fx: 56px; --fy: 40px; }
  .fan-stage { height: 260px; margin-inline: calc(var(--s-4) * -1); }
  .fan-stage .fan-page { left: var(--s-4); }
  .fan-page--back   { --x: 0px;   --y: 34px; --r: -7deg; }
  .fan-page--middle { --x: 112px; --y: 18px; --r: 2deg; }
  .fan-page--front  { --x: 56px;  --y: 40px; --r: -2deg; }
  .fact-card { max-width: none; margin: calc(var(--s-6) * -1) 0 var(--s-4); }
}

/* ---------- B. Free lessons: five on the desk ---------- */
#free { padding-top: var(--s-9); }
@media (max-width: 767px) { #free { padding-top: var(--section-pad); } }
.freebies-grid { row-gap: var(--s-7); align-items: stretch; }
.freebie {
  --tab-color: var(--music);
  position: relative; display: flex; flex-direction: column;
  padding: var(--s-5); background: var(--surface);
  border-radius: var(--r-card); box-shadow: var(--shadow-float);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.freebie--music { grid-column: 1 / span 6; grid-row: 1 / span 2; --tab-color: var(--music); }
.freebie--life { grid-column: 7 / span 3; --tab-color: var(--life); }
.freebie--science { grid-column: 10 / span 3; --tab-color: var(--science); }
.freebie--reading { grid-column: 7 / span 3; --tab-color: var(--reading); }
.freebie--social { grid-column: 10 / span 3; --tab-color: var(--social); }

.folder-tab {
  position: absolute; left: var(--s-5); bottom: 100%;
  display: inline-flex; align-items: center; height: 28px; padding: 0 var(--s-3);
  background: var(--tab-color); color: var(--cream);
  border-radius: var(--r-tab) var(--r-tab) 0 0;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-chip); line-height: 1;
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  transition: transform 200ms var(--ease-out);
}
.freebie-page {
  display: block; aspect-ratio: 4 / 3.4; overflow: hidden;
  border: 1px solid var(--hairline); border-radius: var(--r-paper); background: var(--paper);
  transition: transform 200ms var(--ease-out);
}
.freebie-page img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.freebie-body { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-4); }
.freebie-body .card-title { color: var(--text); }
.freebie-body .card-title a { display: inline-block; padding-block: var(--s-3); margin-block: calc(var(--s-3) * -1); color: inherit; text-decoration: none; }
.freebie-body .card-title a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }
.freebie-tag { margin-top: var(--s-1); }
.freebie details { margin-top: var(--s-3); border-top: 1px solid var(--hairline); }
.freebie summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: 44px; font-weight: 600; font-size: var(--fs-small); cursor: pointer;
}
.freebie summary::-webkit-details-marker { display: none; }
.freebie summary svg { flex: none; width: 18px; height: 18px; transition: transform 160ms var(--ease-out); }
.freebie details[open] summary svg { transform: rotate(180deg); }
.freebie details p { padding-bottom: var(--s-3); font-size: var(--fs-small); line-height: 1.5; font-weight: 400; }
.freebie-actions { margin-top: auto; padding-top: var(--s-4); }
.freebie-actions .btn { width: 100%; }

/* Music: the big cell, two pages side by side on a tinted ground */
.freebie--music .freebie-pages {
  flex: 1; position: relative; min-height: 440px;
  background: color-mix(in srgb, var(--music) 7%, var(--paper));
  border-radius: var(--r-paper);
}
.freebie--music .freebie-pages .freebie-page { position: absolute; width: 58%; aspect-ratio: 1224 / 1584; border: 0; box-shadow: var(--shadow-float); }
/* Page 2 sits top left, page 3 bottom right, so the two real pages fill the tall cell. */
.freebie--music .freebie-pages .freebie-page:first-child { left: var(--s-5); top: var(--s-5); transform: rotate(-1.5deg); }
.freebie--music .freebie-pages .freebie-page:last-child { right: var(--s-5); bottom: var(--s-5); transform: rotate(1.5deg); }
.freebie--music .freebie-body { flex: 0 0 auto; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .freebie:hover { transform: translateY(-2px); box-shadow: var(--shadow-float-lift); }
  .freebie:hover .folder-tab { transform: translateY(-3px); }
  .freebie:not(.freebie--music):hover .freebie-page { transform: translateY(-4px) rotate(-1deg); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .freebie:hover { box-shadow: var(--shadow-float-lift); }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .freebie--music { grid-column: 1 / -1; grid-row: auto; }
  .freebie--music .freebie-pages .freebie-page { width: 40%; }
  .freebie--music .freebie-pages .freebie-page:first-child { left: 8%; }
  .freebie--music .freebie-pages .freebie-page:last-child { right: 8%; bottom: auto; top: var(--s-7); }
  .freebie--music .freebie-pages { min-height: 0; aspect-ratio: 16 / 10; }
  .freebie--life, .freebie--reading { grid-column: 1 / span 6; }
  .freebie--science, .freebie--social { grid-column: 7 / span 6; }
}
@media (max-width: 767px) {
  .freebies-grid { row-gap: var(--s-7); }
  .freebie, .freebie--music { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: 38% 1fr; column-gap: var(--s-4); padding: var(--s-4); }
  .freebie-page { aspect-ratio: 1224 / 1584; }
  .freebie-body { margin-top: 0; }
  .freebie details, .freebie-actions { grid-column: 1 / -1; }
  .freebie--music .freebie-pages { padding: 0; min-height: 0; aspect-ratio: auto; background: none; display: block; }
  .freebie--music .freebie-pages .freebie-page { position: static; width: auto; box-shadow: none; border: 1px solid var(--hairline); transform: none; }
  .freebie--music .freebie-pages .freebie-page:last-child { display: none; }
  .freebie--music .freebie-pages .freebie-page:first-child { margin: 0; transform: none; }
  .folder-tab { left: var(--s-4); }
}

/* ---------- C. Subjects on TPT: the drawer ---------- */
.drawer { padding-block: var(--s-6); margin-bottom: var(--section-pad); }
.drawer-head { padding-top: var(--s-4); margin-bottom: var(--s-6); }
.drawer-head .h2 { color: var(--text-on-field); }
.drawer-head p { margin-top: var(--s-4); color: var(--text-on-field-soft); }
/* Six calm tiles on the green frame: name once, grades, a thin top edge in the subject colour.
   The name's link covers the tile; the TPT links sit above it, small and plain. */
.subject-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.subject-tile {
  --c: var(--music);
  position: relative; display: flex; flex-direction: column;
  padding: var(--s-5); background: var(--paper); color: var(--text);
  border-top: 4px solid var(--c); border-radius: var(--r-input);
  transition: background-color 160ms ease;
}
.subject-tile .h3 { color: var(--text); }
.on-field .subject-tile .subject-tile-link { color: var(--text); text-decoration: none; }
.subject-tile-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* Focus: the ring goes round the whole tile, in wheat on the green frame (4.15:1). */
.subject-tile-link:focus-visible { outline: none; }
.subject-tile:has(.subject-tile-link:focus-visible) { outline: 3px solid var(--focus-on-field); outline-offset: 3px; }
/* TPT links sit on paper, so their ring is green, not wheat. */
.on-field .subject-tile-tpt a:focus-visible { outline-color: var(--focus); }
.subject-tile:hover { background: color-mix(in srgb, var(--c) 6%, var(--paper)); }
.subject-tile:hover .subject-tile-link { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.subject-tile > .muted { margin-top: var(--s-1); color: var(--text-muted); }
.subject-tile-tpt { position: relative; z-index: 1; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--hairline); color: var(--text-muted); }
.subject-tile-tpt > p { margin-bottom: 0; }
.subject-tile-tpt ul { display: flex; flex-wrap: wrap; column-gap: var(--s-4); }
.on-field .subject-tile-tpt a {
  display: inline-block; padding-block: 10px; min-height: 44px; line-height: 24px;
  color: var(--text-muted); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.on-field .subject-tile-tpt a:hover { color: var(--text); }
/* The arrow stays on the last line of the link text, even when the link wraps. */
.nowrap { white-space: nowrap; }
.subject-tile-tpt a svg { display: inline-block; vertical-align: -2px; width: 14px; height: 14px; margin-left: var(--s-1); color: var(--c); }
.subject-tile--music { --c: var(--music); }
.subject-tile--life { --c: var(--life); }
.subject-tile--social { --c: var(--social); }
.subject-tile--science { --c: var(--science); }
.subject-tile--reading { --c: var(--reading); }
.subject-tile--math { --c: var(--math); }

@media (max-width: 1023px) and (min-width: 768px) {
  .subject-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .drawer { padding-block: var(--s-5); }
  .subject-tiles { grid-template-columns: 1fr; gap: var(--s-4); }
  .subject-tile { padding: var(--s-4); }
  .subject-tile-tpt { margin-top: var(--s-4); }
}

/* ---------- D. Sign-up: the index card (form parts are shared, in site.css) ---------- */
.signup { background: var(--placeholder-tint); }
.signup-intro { grid-column: 1 / span 5; align-self: start; }
.signup-intro .lead { margin-top: var(--s-4); }
.signup-intro .small { margin-top: var(--s-4); }
.signup .form-card { grid-column: 6 / span 7; }
@media (max-width: 1023px) {
  .signup-intro, .signup .form-card { grid-column: 1 / -1; }
  .signup .form-card { margin-top: var(--s-7); }
}