/* ============================================================================
   THE QUICK LOOK. A card in the academy that grows into what is in the course.
   ============================================================================

   It is not a second course page. /learn/<slug>/ is the page, and this answers
   "is this for me" without taking anybody off the page they are browsing.

   THE ONE MEASUREMENT EVERYTHING ELSE DEPENDS ON: the card's cover and the
   panel's cover are both 16:7. At the moment the panel is card sized the two
   pictures sit on top of each other to the pixel, so it reads as one thing
   growing. Change one of these ratios and not the other and the whole thing
   reads as a jump, however good the timing is.

   Only transform and opacity are ever animated here, which is the kit's rule and
   what tests/test_motion.php holds every sheet to. Nothing animates a width, a
   height or a position: the panel is drawn at its final size and squashed onto
   the card, and what moves is the squashing coming off.
   ========================================================================= */

/* THE MARKETING SHEET SCOPES EVERY SELECTOR TO THE PAGE, so a rule of one
   class here loses to one of its two-part rules however late this file loads.
   Anything that draws a control is scoped the same way, which is why the
   buttons below are .ql .ql__go rather than .ql__go: the first version of this
   file drew the Start button as plain black text on white and nothing said so.

   The cover on a card, matched to the cover in the panel. */
.card .thumb{aspect-ratio:16/7}

/* The page behind, frozen. The body is pinned by the script; this only stops
   what is behind from being reachable while it is. */
body.has-ql{overflow:hidden}

.ql{position:fixed;inset:0;z-index:200;display:none;
  background:rgba(17,24,39,.5);padding:34px 22px;overflow:hidden}
.ql.is-open{display:flex;align-items:flex-start;justify-content:center}

.ql__box{position:relative;width:100%;max-width:760px;max-height:calc(100vh - 68px);
  display:flex;flex-direction:column;background:var(--paper,#fff);
  border:1px solid var(--rule-2,#EEF0F4);overflow:hidden;will-change:transform}

.ql .ql__x{position:absolute;right:0;top:0;z-index:3;width:44px;height:44px;
  border:0;background:rgba(255,255,255,.86);font-size:26px;line-height:1;
  cursor:pointer;color:var(--ink,#111827)}
.ql .ql__x:hover{background:#fff}

.ql__scroll{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0}
.ql__cover{aspect-ratio:16/7;background:var(--paper-2,#F8FAFC);overflow:hidden}
.ql__cover img{width:100%;height:100%;object-fit:cover;display:block}

.ql__pad{padding:26px 30px 30px}
.ql__t{margin:0;font-size:26px;letter-spacing:-.02em;line-height:1.18}
.ql__l{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2,#4B5563)}

.ql__facts{display:flex;flex-wrap:wrap;gap:0;margin:22px 0 0;
  border-top:1px solid var(--rule-2,#EEF0F4);padding-top:16px}
.ql__facts div{min-width:96px;padding-right:26px}
.ql__facts b{display:block;font-size:20px;letter-spacing:-.02em}
.ql__facts span{display:block;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3,#6B7280);font-weight:600;margin-top:3px}

.ql__h{margin:26px 0 10px;font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3,#6B7280);font-weight:700}
.ql__obj{margin:0;padding-left:18px;font-size:14px;line-height:1.6;color:var(--ink-2,#4B5563)}
.ql__obj li{margin-bottom:5px}
.ql__cert{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2,#4B5563)}

/* What is in it. Every module open on arrival, because a closed list looks like
   less than there is. */
.ql__mods{border-top:1px solid var(--rule-2,#EEF0F4)}
.mod{border-bottom:1px solid var(--rule-2,#EEF0F4)}
.ql .mod__h{display:flex;width:100%;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 0;border:0;background:none;font:inherit;font-size:14px;font-weight:700;
  text-align:left;cursor:pointer;color:var(--ink,#111827)}
.mod__n{font-size:11px;font-weight:500;color:var(--ink-3,#6B7280)}
.mod__l{display:none;margin:0 0 12px;padding:0 0 0 18px;font-size:13px;
  color:var(--ink-2,#4B5563)}
.mod.is-open .mod__l{display:block}
.mod__l li{display:flex;justify-content:space-between;gap:14px;padding:5px 0}
.mod__l em{font-style:normal;color:var(--ink-3,#6B7280);font-size:12px;flex:none}

/* The foot. It never scrolls away, because the thing somebody came here to
   decide is whether to start it. */
.ql__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;border-top:1px solid var(--rule-2,#EEF0F4);
  background:var(--paper,#fff);flex:none}
.ql__price{font-size:17px;font-weight:700;letter-spacing:-.01em}
.ql__acts{display:flex;align-items:center;gap:14px}
.ql .ql__see{font-size:13px;color:var(--ink-2,#4B5563);text-decoration:none}
.ql .ql__see:hover{color:var(--ink,#111827);text-decoration:underline}
.ql .ql__go{display:inline-block;padding:11px 18px;background:var(--ink,#111827);
  color:var(--paper,#fff);text-decoration:none;font-weight:600;font-size:14px}
.ql .ql__go:hover{background:var(--a,#4F46E5)}

/* Below 900: the screen, less a gutter, and the two buttons split the width. */
@media(max-width:900px){
  .ql{padding:12px}
  .ql__box{max-width:none;max-height:calc(100vh - 24px)}
  .ql__pad{padding:20px 18px 24px}
  .ql__t{font-size:21px}
  .ql__facts div{min-width:calc(50% - 13px);padding-right:0;margin-bottom:12px}
  .ql__foot{flex-wrap:wrap}
  .ql__acts{width:100%;justify-content:space-between}
  .ql .ql__go{flex:1;text-align:center}
}

/* Reduced motion: no morph at all. It is simply there, and closing simply
   removes it. Everything else about it is identical, which is the point. */
@media (prefers-reduced-motion: reduce){
  .ql__box,.ql__scroll,.ql__foot{transition:none !important}
}