/* Actual course contents presented as study folios. Inspired by physical folder
   components, with the site's own U of Anatomy identity and native navigation. */
.course-row.course-folio-row {
  grid-template-columns:minmax(0,1fr) 280px;
  gap:2rem;
  min-height:210px;
  padding:1.5rem 1.2rem 1.5rem .25rem;
  position:relative;
  isolation:isolate;
}
.course-folio-row .course-copy { display:grid;gap:.65rem;min-width:0; }
.course-folio-row h2 { font-size:clamp(2.3rem,3.2vw,3rem); }
.course-folio-row .course-copy p { font-size:1.0625rem; }
.course-folio-row .course-entry { justify-content:flex-start;gap:.85rem;margin-top:.25rem;font-weight:600;font-size:.875rem; }
.course-open-label { font-weight:400; }
.course-folio-row .course-entry svg { width:20px;height:20px;transition:transform 250ms var(--ua-ease); }
.course-row.course-folio-row:focus-visible,.lab-row.lab-folio-row:focus-visible { outline:3px solid var(--ua-green);outline-offset:4px;border-radius:var(--ua-radius); }

.course-folio {
  display:block;
  position:relative;
  width:260px;
  height:164px;
  justify-self:center;
  perspective:700px;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}
.folio-back { display:block;position:absolute;inset:36px 10px 0;background:#204f30;border:1px solid #164323;border-radius:8px;box-shadow:0 10px 20px #1e2c2312; }
.folio-back::before { content:'';position:absolute;left:-1px;top:-12px;width:83px;height:18px;border-radius:7px 10px 0 0;background:#204f30;border:1px solid #164323;border-bottom:0; }
.folio-sheet {
  --folio-x:-38px;--folio-y:-3px;--folio-r:-11deg;
  --folio-open-x:-63px;--folio-open-y:-24px;--folio-open-r:-19deg;
  display:block;
  position:absolute;
  width:150px;
  height:133px;
  left:55px;
  bottom:14px;
  transform:translate(var(--folio-x),var(--folio-y)) rotate(var(--folio-r));
  transform-origin:50% 100%;
  transition:transform 420ms var(--ua-drawer-ease);
}
.folio-sheet[data-sheet="1"] { --folio-x:0px;--folio-y:-10px;--folio-r:0deg;--folio-open-x:0px;--folio-open-y:-40px;--folio-open-r:0deg; }
.folio-sheet[data-sheet="2"] { --folio-x:38px;--folio-y:-3px;--folio-r:11deg;--folio-open-x:63px;--folio-open-y:-24px;--folio-open-r:19deg; }
.folio-paper { display:flex;flex-direction:column;gap:.48rem;position:relative;width:100%;height:100%;padding:13px 12px;background:#fffefa;border:1px solid #d4ddce;border-radius:4px;box-shadow:0 3px 8px #1e2c231a;transform-origin:50% 100%; }
.folio-paper::after { content:'';position:absolute;bottom:14px;left:12px;right:12px;height:1px;background:var(--ua-line); }
.folio-paper-label { display:block;color:var(--ua-green);font-size:.625rem;line-height:1.2;font-weight:700;letter-spacing:.09em;text-transform:uppercase; }
.folio-paper-title { display:block;color:var(--ua-ink);font-family:var(--ua-display);font-size:1rem;line-height:1.16;font-weight:400;text-wrap:balance;overflow:hidden;max-height:3.5em; }
.folio-paper-meta { display:block;color:var(--ua-muted);font-size:.625rem;line-height:1.2;margin-top:auto;margin-bottom:9px; }
.folio-cover { display:flex;align-items:center;justify-content:space-between;position:absolute;inset:auto 4px -2px;height:61px;padding:16px 19px 10px;background:var(--ua-green);border:1px solid #376c45;border-top-color:#719578;border-radius:7px 7px 9px 9px;box-shadow:0 7px 12px #1e2c231a,inset 0 1px #ffffff15;transform-origin:50% 100%;transition:transform 420ms var(--ua-drawer-ease); }
.folio-tab { display:block;color:#f2eadb;font-size:.75rem;line-height:1.2;font-weight:600;letter-spacing:.03em; }
.folio-cover-line { position:absolute;top:12px;left:19px;width:25px;height:2px;background:var(--ua-gold); }
.folio-cover img { width:27px;height:27px; }

/* The lesson preview is a smaller version of the same folder, populated from
   each lab's first three real sections. No secondary or hidden action. */
.lab-row.lab-folio-row { grid-template-columns:75px minmax(0,1fr) 230px;gap:1.5rem;padding:1.6rem 1.2rem 1.6rem 0;min-height:200px; }
.lab-folio-row .lab-index { align-self:start;margin-top:1.25rem; }
.lab-folio-row .lab-copy { display:grid;gap:.7rem;min-width:0; }
.lab-folio-row h2 { margin:0;max-width:26ch; }
.lab-folio-row .lab-entry { margin-top:.1rem;display:flex;align-items:center;gap:.5rem;min-height:24px; }
.lab-folio-row .lab-entry > span { display:inline-block;transition:transform 250ms var(--ua-ease); }
.lab-folio-row .course-folio { width:226px;height:152px; }
.lab-folio-row .folio-sheet { width:138px;height:126px;left:44px;--folio-x:-28px;--folio-r:-9deg;--folio-open-x:-43px;--folio-open-r:-15deg; }
.lab-folio-row .folio-sheet[data-sheet="1"] { --folio-x:0px;--folio-r:0deg;--folio-open-x:0px;--folio-open-r:0deg; }
.lab-folio-row .folio-sheet[data-sheet="2"] { --folio-x:28px;--folio-r:9deg;--folio-open-x:43px;--folio-open-r:15deg; }
.lab-folio-row .folio-paper-title { font-size:.875rem;max-height:4.6em; }
.lab-folio-row .folio-cover { height:52px;padding-top:14px; }
.lab-folio-row .folio-tab { font-size:.6875rem; }
.lab-folio-row .folio-cover-line { top:9px; }

@media(hover:hover) and (pointer:fine) {
  .course-row.course-folio-row:hover,.lab-row.lab-folio-row:hover { background:#edf1e8; }
  :is(.course-folio-row,.lab-folio-row):hover .folio-sheet { transform:translate(var(--folio-open-x),var(--folio-open-y)) rotate(var(--folio-open-r)); }
  :is(.course-folio-row,.lab-folio-row):hover .folio-cover { transform:rotateX(-16deg); }
  .course-folio-row:hover .course-entry svg,.lab-folio-row:hover .lab-entry > span { transform:translateX(6px); }
  :is(.course-folio-row,.lab-folio-row):active .folio-cover { transform:rotateX(-6deg) scale(.985); }
}
.keyboard-input :is(.folio-sheet,.folio-cover,.course-entry svg,.lab-entry > span) { transition:none; }
@media(max-width:740px) {
  .course-row.course-folio-row { grid-template-columns:minmax(0,1fr) 208px;gap:1rem;min-height:190px;padding:1.5rem .6rem 1.5rem 0; }
  .course-folio-row .course-copy { gap:.55rem; }
  .course-folio-row .course-copy p { font-size:1rem; }
  .course-folio-row .course-entry { flex-direction:row;align-items:center;grid-column:auto;grid-row:auto;gap:.7rem;font-size:.8125rem; }
  .course-folio { width:208px;height:149px; }
  .folio-sheet { width:132px;height:121px;left:38px;--folio-x:-25px;--folio-r:-9deg;--folio-open-x:-38px;--folio-open-r:-15deg; }
  .folio-sheet[data-sheet="1"] { --folio-x:0px;--folio-r:0deg;--folio-open-x:0px;--folio-open-r:0deg; }
  .folio-sheet[data-sheet="2"] { --folio-x:25px;--folio-r:9deg;--folio-open-x:38px;--folio-open-r:15deg; }
  .folio-paper { padding:11px 10px; }
  .folio-paper-title { font-size:.875rem; }
  .folio-cover { height:54px;padding:15px 15px 8px; }
  .folio-cover-line { left:15px;top:10px; }
  .lab-row.lab-folio-row { grid-template-columns:minmax(0,1fr) 208px;gap:.3rem 1rem;padding:1.5rem 0;min-height:192px; }
  .lab-folio-row .lab-index { margin:0;grid-column:1;grid-row:1;align-self:end; }
  .lab-folio-row .lab-copy { grid-column:1;grid-row:2;gap:.5rem; }
  .lab-folio-row .lab-entry { grid-column:auto;font-size:.875rem; }
  .lab-folio-row .course-folio { grid-column:2;grid-row:1/3;width:208px;height:149px; }
  .lab-folio-row .folio-sheet { left:35px; }
}
@media(max-width:520px) {
  .course-row.course-folio-row { grid-template-columns:minmax(0,1fr) 126px;gap:.8rem;min-height:177px;padding:1.35rem 0; }
  .course-folio-row h2 { font-size:2.15rem; }
  .course-folio-row .course-copy p { font-size:.9375rem;line-height:1.4; }
  .course-folio-row .course-entry { font-size:.75rem;gap:.3rem; }
  .course-open-label { display:none; }
  .course-folio,.lab-folio-row .course-folio { width:126px;height:119px; }
  .folio-back { inset:26px 5px 0; }
  .folio-back::before { width:55px;top:-9px;height:14px; }
  .folio-sheet,.lab-folio-row .folio-sheet { width:87px;height:96px;left:19.5px;bottom:10px;--folio-x:-13px;--folio-y:-3px;--folio-r:-8deg;--folio-open-x:-15px;--folio-open-y:-14px;--folio-open-r:-11deg; }
  .folio-sheet[data-sheet="1"],.lab-folio-row .folio-sheet[data-sheet="1"] { --folio-x:0px;--folio-y:-9px;--folio-r:0deg;--folio-open-x:0px;--folio-open-y:-22px;--folio-open-r:0deg; }
  .folio-sheet[data-sheet="2"],.lab-folio-row .folio-sheet[data-sheet="2"] { --folio-x:13px;--folio-y:-3px;--folio-r:8deg;--folio-open-x:15px;--folio-open-y:-14px;--folio-open-r:11deg; }
  .folio-paper { padding:8px 7px;gap:.35rem; }
  .folio-paper-label { font-size:.5rem;letter-spacing:.04em; }
  .folio-paper-title,.lab-folio-row .folio-paper-title { font-size:.75rem;line-height:1.1;max-height:3.3em; }
  .folio-paper-meta,.folio-paper::after { display:none; }
  .folio-cover,.lab-folio-row .folio-cover { height:42px;inset:auto 1px -1px;padding:12px 10px 6px; }
  .folio-tab,.lab-folio-row .folio-tab { font-size:.625rem; }
  .folio-cover-line,.lab-folio-row .folio-cover-line { left:10px;top:7px;width:18px; }
  .folio-cover img { width:22px;height:22px; }
  .lab-row.lab-folio-row { grid-template-columns:minmax(0,1fr) 126px;gap:.4rem .8rem;min-height:188px; }
  .lab-folio-row h2 { font-size:1.45rem; }
  .lab-folio-row .lab-copy p { font-size:.875rem;line-height:1.4; }
}
@media(prefers-reduced-motion:reduce) {
  :is(.folio-sheet,.folio-cover,.course-entry svg,.lab-entry > span) { transition:none; }
  :is(.course-folio-row,.lab-folio-row):hover .folio-sheet { transform:translate(var(--folio-x),var(--folio-y)) rotate(var(--folio-r)); }
  :is(.course-folio-row,.lab-folio-row):is(:hover,:active) .folio-cover,.course-folio-row:hover .course-entry svg,.lab-folio-row:hover .lab-entry > span { transform:none; }
}