/* ===========================================================================
   The catalogue. Built on the theme in home.css -- the cards, the grid, the
   buttons and the shell all come from there; this is the head and the
   filter bar.
   ========================================================================= */

/* The head ----------------------------------------------------------------
   Their file: a pill, the headline, a line under it, a search box with a
   button, and the searches people actually make. Centred, because the
   search is the thing you came to use and it belongs under the middle of
   the headline rather than off to one side. */
.ct-head{position:relative;overflow:hidden}
.ct-wash{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 52% 120% at 50% 0%,rgba(114,202,234,.26),rgba(114,202,234,0) 70%),
    linear-gradient(180deg,rgba(238,245,252,.9),rgba(246,248,251,0) 86%)}
.ct-head .hm-wrap{position:relative;z-index:1;padding:58px 28px 52px;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.ct-head h1{font-size:clamp(34px,4.6vw,58px);line-height:1.04;margin-top:18px;
  letter-spacing:-.025em;text-wrap:balance}
.ct-sub{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:580px;
  margin-top:16px;text-wrap:pretty}

/* The search, the size the design gives it: the widest thing in the band
   after the headline. */
.ct-hunt{display:flex;gap:10px;width:min(100%,640px);margin-top:30px}
.ct-hunt-box{flex:1;min-width:0;display:flex;align-items:center;gap:11px;
  background:#fff;border:1px solid var(--line-2);border-radius:999px;
  padding:0 20px;height:56px;transition:border-color .2s,box-shadow .2s}
.ct-hunt-box:focus-within{border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(19,98,177,.1)}
.ct-hunt-box svg{width:19px;height:19px;color:var(--faint);flex:none}
.ct-hunt-box input{flex:1;min-width:0;border:none;outline:none;background:none;
  font-family:inherit;font-size:15.5px;color:var(--ink)}
.ct-hunt-box input::placeholder{color:var(--faint)}
.hm .ct-hunt .hm-btn-primary{flex:none;height:56px;padding:0 30px;font-size:15.5px}

.ct-pop-q{display:flex;align-items:center;justify-content:center;gap:8px;
  flex-wrap:wrap;margin-top:18px;font-size:14px;color:var(--muted)}
.hm .ct-pop-q a{color:var(--ink-2);background:#fff;border:1px solid var(--line-2);
  border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;
  transition:border-color .2s,color .2s}
.hm .ct-pop-q a:hover{border-color:var(--ink);color:var(--ink)}

/* The four figures, in the landing page's card. Only the fourth needs
   anything of its own. */
.ct-figs-band .hm-wrap{padding:0 28px 56px}
.ct-online{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  font-weight:700;color:var(--green);background:#E8F7F0;border-radius:999px;
  padding:5px 11px}
.ct-online i{width:7px;height:7px;border-radius:50%;background:var(--green)}

/* The closing band: tell us your goal, we will pick the course. */
.ct-goal .hm-wrap{padding:0 28px 96px}
.ct-goal-in{position:relative;overflow:hidden;background:var(--ink);color:#fff;
  border-radius:30px;padding:60px 48px;text-align:center}
.ct-goal-glow{position:absolute;left:50%;top:-220px;width:620px;height:520px;
  margin-left:-310px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(114,202,234,.34),rgba(114,202,234,0) 70%)}
/* Everything except the light itself, which has to stay out of the flow. */
.ct-goal-in>*:not(.ct-goal-glow){position:relative;z-index:1}
.ct-goal .kick{font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sky)}
.ct-goal h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,3.6vw,46px);line-height:1.08;letter-spacing:-.02em;
  margin-top:14px;text-wrap:balance}
.ct-goal h2 i{font-style:italic;color:var(--sky)}
.ct-goal p{font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.76);
  max-width:520px;margin:16px auto 0}
.ct-goal-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin-top:28px}
.hm .ct-goal-btns .go{display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:var(--ink);font-weight:700;font-size:15.5px;
  padding:15px 28px;border-radius:999px;transition:transform .2s,background .2s}
.hm .ct-goal-btns .go:hover{background:var(--sky);transform:translateY(-1px)}
.hm .ct-goal-btns .ring{display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.3);color:#fff;font-weight:700;font-size:15.5px;
  padding:15px 28px;border-radius:999px;transition:background .2s,border-color .2s}
.hm .ct-goal-btns .ring:hover{background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.55)}

/* the filters ------------------------------------------------------------- */
/* Held under the header while the grid scrolls: a filter you have to scroll
   back up to reach is a filter nobody uses twice. The band carries its own
   ground so the cards do not show through it. */
.ct-filters{background:var(--bg)}
.ct-filters .hm-wrap{padding:16px 28px 18px}
/* One card holding every control, rather than a search box, a chip rail and
   a second chip rail in three separate boxes.

   Read left to right: what you are looking at and how many of it, then the
   three controls that narrow it, then the topics on their own line. The
   count used to sit outside the card under the grid, where nothing tied it
   to the heading it was counting. */
.ct-panel{background:#fff;border:1px solid var(--line-2);border-radius:22px;
  padding:18px 18px 16px;box-shadow:0 10px 30px -24px rgba(13,8,77,.3)}
.ct-top{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px 24px;flex-wrap:wrap}
.ct-title{min-width:0}
.ct-title h2{font-size:clamp(26px,2.6vw,34px);line-height:1.1;margin-top:6px;
  letter-spacing:-.02em}
/* The figure the heading is making a claim about, directly under it. */
.ct-tally{margin-top:7px;font-size:14px;color:var(--muted)}
.ct-tally b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}

.ct-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* A label on the control rather than above it: the row stays one line high
   and each select says what it narrows without a heading of its own. */
.ct-field{display:inline-flex;align-items:center;gap:8px;padding:0 6px 0 14px;
  border-radius:14px;background:var(--bg);border:1px solid transparent;
  transition:border-color .16s,background .16s}
.ct-field:hover{background:var(--line-3)}
/* One focus ring, on the pill, not two.

   The <select> is only part of the control -- the label beside it is the
   other half -- so the browser's own outline drew a second rounded box
   around the select alone, cutting across the pill's border and running
   over the label. The ring belongs on the thing that looks like the
   control, which is why the select's own outline goes and the pill takes
   it on instead. Keyboard focus is still obvious; it is more obvious,
   because the ring is now around the whole control. */
.ct-field select:focus,
.ct-field select:focus-visible{outline:none}
.ct-field:focus-within{border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 3px rgba(19,98,177,.18)}
.ct-field span{font-size:11.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}
.ct-field select{border:none;background:none;font-family:inherit;
  font-size:14.5px;font-weight:600;color:var(--ink);padding:12px 6px 12px 0;
  cursor:pointer;max-width:170px}
/* Sort is the one people reach for, so it is the one that reads as a
   control rather than a chip. Its tint is an inset shadow, so the focus
   ring has to be restated here or it would replace the tint. */
.ct-field-sort{background:var(--brand-50,#EEF5FC);
  box-shadow:inset 0 0 0 1px rgba(19,98,177,.16)}
.ct-field-sort:hover{background:var(--brand-50,#EEF5FC)}
.ct-field-sort:focus-within{box-shadow:inset 0 0 0 1px rgba(19,98,177,.16),
  0 0 0 3px rgba(19,98,177,.18)}
.ct-field-sort span{color:var(--blue)}
.hm .ct-go{font:inherit;font-size:14px;font-weight:700;color:#fff;
  background:var(--blue);border:0;border-radius:14px;padding:13px 22px;
  cursor:pointer}
.hm .ct-go:hover{background:var(--ink)}

/* The one axis people browse by, on its own line. Still links, so each is
   an address somebody can paste into a message. */
.ct-chips{display:flex;gap:8px;align-items:center;
  /* A hairline between the two jobs: choosing a topic above the fold of
     the card, narrowing what is in it below. Without it the chips read as
     a fourth control sitting under the three selects. */
  margin-top:16px;padding:16px 2px 2px;border-top:1px solid var(--line-3);
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.ct-chips::-webkit-scrollbar{display:none}
.ct-chips>*{flex:0 0 auto}
.hm .ct-chip{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;
  font-weight:600;color:var(--ink-2);background:var(--bg);border:1px solid transparent;
  padding:9px 15px;border-radius:99px;white-space:nowrap}
.hm .ct-chip:hover{background:#fff;border-color:var(--line-2);color:var(--ink)}
.hm .ct-chip b{font-size:12px;font-weight:800;padding:1px 7px;border-radius:99px;
  background:#fff;color:var(--ink-2)}
.hm .ct-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.hm .ct-chip.on b{background:rgba(255,255,255,.18);color:#fff}
/* Not a topic, so not a chip: it undoes them. */
.hm .ct-reset{display:inline-flex;align-items:center;margin-left:4px;padding:8px 12px;
  font-size:13px;font-weight:700;color:var(--muted);border-radius:999px}
.hm .ct-reset:hover{background:var(--line-3);color:var(--ink)}

/* the results -------------------------------------------------------------- */
.hm-courses .hm-wrap{padding-top:40px}

/* The card, as their file has it: the line under the title, the chips for
   what it covers, the language it is taught in, and a navy way in. */
/* The card's art, set as type: the word large in the serif, the line under
   it small and spaced. Centred in the panel, nothing else on it. */
.ct-big{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;padding:18px}
.ct-big b{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.4vw,54px);
  line-height:1;letter-spacing:-.03em;color:var(--ink)}
.ct-big span{font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:.01em}

.ct-card-sub{font-size:13.5px;font-weight:600;color:var(--ink-2);margin-top:6px;
  line-height:1.4}
.hm-courses .hm-course-b p{margin-top:9px}
.ct-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.ct-tags span{font-size:12px;font-weight:600;color:var(--ink-2);background:var(--bg);
  border:1px solid var(--line-2);border-radius:8px;padding:5px 10px}
.ct-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:18px}
.ct-lang{font-size:12.5px;font-weight:700;color:var(--blue);background:#EEF5FC;
  border:1px solid var(--blue);border-radius:999px;padding:6px 13px}
/* Not a link of its own -- the card is the link. It is a span that looks
   like a button, so the card stays one thing to click and one thing to
   tab to. */
.ct-view{display:inline-flex;align-items:center;background:var(--ink);color:#fff;
  font-size:14px;font-weight:700;padding:11px 20px;border-radius:999px;
  transition:background .2s,transform .2s}
.hm a.hm-course{color:var(--ink)}
.hm a.hm-course:hover .ct-view{background:var(--blue)}
.ct-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:13px;
  color:var(--muted)}
.ct-meta span{display:inline-flex;align-items:center;gap:6px}
.ct-meta span+span::before{content:"";width:4px;height:4px;border-radius:50%;
  background:var(--line-2);margin-right:8px}
.ct-empty{text-align:center;padding:72px 20px 88px}
.ct-empty h3{font-size:clamp(26px,3vw,36px);line-height:1.1}
.ct-empty p{font-size:16px;color:var(--ink-2);margin:12px auto 24px;max-width:420px}

@media (max-width:760px){
  .ct-head .hm-wrap{padding:44px 20px 40px}
  .ct-figs-band .hm-wrap{padding:0 20px 44px}
  /* The button goes under the box rather than beside it: side by side at
     360px leaves the box too narrow to read what you typed. */
  .ct-hunt{flex-direction:column;gap:8px}
  .hm .ct-hunt .hm-btn-primary{width:100%}
  .ct-goal .hm-wrap{padding:0 20px 64px}
  .ct-goal-in{padding:44px 24px;border-radius:24px}
}
@media (max-width:760px){
  .ct-head .hm-wrap{padding:36px 20px 30px;gap:24px}
  .ct-filters .hm-wrap{padding:12px 20px 14px}
  .hm-courses .hm-wrap{padding-top:28px}
  .ct-hunt-box{height:52px}
  .hm .ct-hunt .hm-btn-primary{height:52px}
  /* On a phone the heading takes the width and the three controls go
     under it, sharing the row rather than each taking one. */
  .ct-panel{padding:14px 14px 12px;border-radius:18px}
  .ct-top{flex-direction:column;align-items:stretch;gap:14px}
  .ct-tools{width:100%;gap:8px}
  .ct-field{flex:1 1 140px;min-width:0}
  .ct-field select{flex:1;min-width:0;max-width:none}
  .hm .ct-go{flex:1 1 100%}
  .ct-chips{margin-left:-14px;margin-right:-14px;padding:2px 14px}
}

/* ---------------------------------------------------------------- phones -- */
/* A tablet is a touch screen too: the hit sizes below follow the
   pointer, not the width, so a 768px iPad gets them as a 390px
   phone does while a 1024px laptop keeps its own proportions. */
@media (max-width:760px), (max-width:1024px) and (pointer:coarse){
  /* 12px is the floor for anything meant to be read on a touch screen. */
  .ct-field span{font-size:12px}
  .ct-search input,.ct-field select{min-height:46px}
  .hm .ct-chip{min-height:42px;font-size:13px}
  .ct-tally,.ct-meta{font-size:12.5px}
  .hm .ct-pop-q a{min-height:40px}
  .hm .ct-langs a{min-height:40px;display:inline-flex;align-items:center}
  .hm .ct-view{min-height:44px}
}
@media (max-width:380px){
  .ct-head .hm-wrap{padding:30px 16px 30px}
  .ct-filters .hm-wrap{padding:10px 16px 12px}
}