/* Five Things instructor quote block. Values are the live site's own:
   Barlow Condensed 600 for the quote and name, Work Sans for the eyebrow and button,
   1px black rule capped at 600px, radius 0, the class's pale colour behind a cut-out portrait. */

.ftil-quote{
  --ftil-quote-size:54px;
  --ftil-quote-tint:#f5f5f5;
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  column-gap:48px;
  align-items:end;
  min-height:480px;
  max-width:1188px;
  margin:96px auto 120px;
  font-family:'Work Sans',sans-serif;
  color:#000;
}
.ftil-quote__words{display:flex;flex-direction:column;align-items:stretch;padding-bottom:8px;min-width:0}
.ftil-quote__words>*{max-width:100%}
.ftil-quote__btn{align-self:flex-start}
.ftil-quote__text{
  margin:0 0 32px;
  font:600 var(--ftil-quote-size)/1 'Barlow Condensed',sans-serif;
  text-indent:-.36em;
  max-width:740px;
}
.ftil-quote__name{margin:0 0 10px;font:600 40px/1 'Barlow Condensed',sans-serif;text-transform:uppercase}
.ftil-quote__eyebrow{margin:0 0 6px;font:500 13px/1.4 'Work Sans',sans-serif;letter-spacing:1px;text-transform:uppercase}
.ftil-quote__rule{border-top:1px solid #000;width:100%;max-width:600px;margin:0 0 12px;transform-origin:left center}
.ftil-quote__title{margin:0 0 24px;font:500 32px/1 'Barlow Condensed',sans-serif}
.ftil-quote__title a{color:#000;text-decoration:none}
.ftil-quote__title a:hover{text-decoration:underline}
/* The theme's .btn.btn-primary styles the button; these only hold if the theme is absent. */
.ftil-quote__btn{display:inline-block;border-radius:0;text-transform:uppercase;letter-spacing:.05em;text-decoration:none}

.ftil-quote__tile{
  position:relative;
  display:block;
  width:400px;
  height:480px;
  background:var(--ftil-quote-tint);
  overflow:hidden;
}
.ftil-quote__tile img{position:absolute;left:50%;bottom:0;height:106%;width:auto;max-width:none;transform:translateX(-50%)}

/* Compact: the class page's right column (own="1" image="0" link="0"). One column, the class colour on the short rule.
   The page already shows the portrait, the class title and the ticket button, so the block is the words and the name. */
.ftil-quote--compact{display:block;min-height:0;max-width:none;margin:32px 0}
.ftil-quote--compact .ftil-quote__text{max-width:none;margin-bottom:16px;line-height:1.1}
.ftil-quote--compact .ftil-quote__name{font-size:20px;margin:0 0 12px}
.ftil-quote__rule--short{width:150px;max-width:150px;border-top:2px solid var(--ftil-quote-color,#000);margin:0}

/* Phone and tablet: one column, the words first, the portrait beneath. */
@media (max-width:991px){
  .ftil-quote{grid-template-columns:1fr;row-gap:32px;margin:64px auto 80px;padding:0 16px;min-height:0;box-sizing:border-box;width:100%}
  .ftil-quote__text{font-size:36px;max-width:none}
  .ftil-quote__name{font-size:32px}
  .ftil-quote__tile{width:100%;height:360px}
}

/* On arrival, once: the tint fills (400ms linear), the lines are placed (400ms, one curve, staggered).
   .ftil-quote--armed is set by the script before the block is seen; .ftil-quote--in when it enters view.
   Without the script nothing is hidden. Under reduced motion every step is a cut. */
.ftil-quote--armed .ftil-quote__place{clip-path:inset(-10% 100% -10% -6%)}
.ftil-quote--armed .ftil-quote__rule{transform:scaleX(0)}
.ftil-quote--armed .ftil-quote__tile{background-color:#fff}
.ftil-quote--armed .ftil-quote__tile img{visibility:hidden}
.ftil-quote--in .ftil-quote__place{clip-path:inset(-10% -2% -10% -6%);transition:clip-path 400ms cubic-bezier(.2,0,0,1)} /* -6% on the left keeps the hanging opening quotation mark inside the clip */
.ftil-quote--in .ftil-quote__name{transition-delay:80ms}
.ftil-quote--in .ftil-quote__eyebrow{transition-delay:160ms}
.ftil-quote--in .ftil-quote__rule{transform:scaleX(1);transition:transform 600ms cubic-bezier(.2,0,0,1) 240ms}
.ftil-quote--in .ftil-quote__title{transition-delay:320ms}
.ftil-quote--in .ftil-quote__tile{background-color:var(--ftil-quote-tint);transition:background-color 400ms linear}
.ftil-quote--in .ftil-quote__tile img{visibility:visible}
@media (prefers-reduced-motion:reduce){
  .ftil-quote--in .ftil-quote__place,.ftil-quote--in .ftil-quote__rule,.ftil-quote--in .ftil-quote__tile{transition:none}
}