/* ---------------------------------------------------------------------------
   The Equipment page.

   Straight to the list. Press Equipment and the grid is the first thing on screen,
   with the controls that narrow it directly above and nothing to scroll past.

   The restraint is Apple's, on Thrive's palette: near-white ground, pure white cards,
   hairlines instead of borders, one accent used twice, and a small number of deliberate
   type sizes. What it does not take from Apple is the full-screen hero, because this is
   a working screen inside a tool rather than a page somebody arrived at.

   Scoped under .eq.
   ------------------------------------------------------------------------- */

.eq{
  --eq-ink:#1d1d1f;
  --eq-dim:#6e6e73;
  --eq-line:#e3e6e4;
  --eq-bg:#fbfbfd;
  --eq-forest:#0d3d35;
  --eq-leaf:#2c6b52;
  --eq-soft:#eef5f1;
  --eq-pad:clamp(14px,2.6vw,28px);
  background:var(--eq-bg);
  color:var(--eq-ink);
  padding:0 var(--eq-pad) clamp(40px,6vw,72px);
  border-radius:inherit;
  -webkit-font-smoothing:antialiased
}
.eq *{box-sizing:border-box}
.eq h3{margin:0;color:var(--eq-ink);font-weight:650;letter-spacing:-.018em;line-height:1.25}
/* 0-1-1, so it beats a single class on a paragraph: every centred <p> below carries
   two classes or it loses its auto margins to this line. */
.eq p{margin:0}

/* ---- the controls -----------------------------------------------------------
   Sticky, because with thirty-eight cards the filter you want to change is usually
   several rows above where you are reading.
   ------------------------------------------------------------------------- */
.eq__bar{
  position:sticky;top:0;z-index:5;
  margin:0 calc(var(--eq-pad) * -1);
  padding:14px var(--eq-pad) 12px;
  background:rgba(251,251,253,.86);
  backdrop-filter:saturate(1.6) blur(12px);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--eq-line)
}

.eq__find{
  display:flex;align-items:center;gap:9px;max-width:520px;
  background:#fff;border-radius:980px;padding:0 15px;height:42px;
  box-shadow:0 0 0 1px var(--eq-line);transition:box-shadow .2s ease
}
.eq__find:focus-within{box-shadow:0 0 0 2px var(--eq-leaf)}
.eq__find svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:var(--eq-dim);stroke-width:1.9;stroke-linecap:round}
.eq__find input{flex:1 1 auto;min-width:0;border:0;background:none;outline:none;font:400 14.5px/1.4 inherit;color:var(--eq-ink)}
.eq__find input::placeholder{color:#98a19d}
.eq__find input::-webkit-search-cancel-button{display:none}
.eq__find button{
  appearance:none;border:0;background:#eceeed;color:var(--eq-dim);cursor:pointer;flex:0 0 auto;
  width:22px;height:22px;border-radius:50%;font-size:10px;display:grid;place-items:center
}
.eq__find button:hover{background:#dfe3e1;color:var(--eq-ink)}

.eq__sel{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px;margin-top:11px}
.eq__sel label{display:flex;flex-direction:column;gap:4px;min-width:0}
.eq__sel span{
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--eq-dim);
  padding-left:2px
}
.eq__sel select{
  appearance:none;min-width:0;max-width:230px;
  font:500 13.5px/1.2 inherit;color:var(--eq-ink);
  padding:8px 30px 8px 12px;border:0;border-radius:10px;background-color:#fff;
  box-shadow:0 0 0 1px var(--eq-line);cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:15px
}
.eq__sel select:focus{outline:none;box-shadow:0 0 0 2px var(--eq-leaf)}
.eq__reset{
  appearance:none;border:0;cursor:pointer;align-self:flex-end;
  padding:8px 13px;border-radius:10px;font:600 13px/1.2 inherit;
  background:var(--eq-soft);color:var(--eq-forest)
}
.eq__reset:hover{background:#e2eee8}
.eq .eq__count{margin-top:10px;font-size:12.5px;color:var(--eq-dim);font-variant-numeric:tabular-nums}

/* ---- the grid ---------------------------------------------------------------- */
.eq__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  gap:clamp(10px,1.4vw,16px);margin-top:clamp(16px,2.4vw,26px)
}
.eq__card{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:16px;
  transition:transform .28s cubic-bezier(.3,.8,.3,1),box-shadow .28s ease
}
.eq__card[hidden]{display:none}
.eq__card:hover{transform:translateY(-3px);box-shadow:0 18px 34px -24px rgba(13,61,53,.4)}

/* The picture, or the drawn mark where there is no picture. Never an empty box with
   the words "No image" in it, which is what thirty-eight of these used to be. */
.eq__shot{
  aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;background:#f3f6f4
}
.eq__shot img{width:100%;height:100%;object-fit:cover;display:block}
.eq__shot.is-drawn{
  background:
    radial-gradient(120% 100% at 50% 0%,#f6faf8 0%,#edf4f0 60%,#e7f0eb 100%)
}
.eq__shot.is-drawn svg{
  width:44%;height:44%;fill:none;
  stroke:var(--eq-forest);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  opacity:.5;transition:opacity .28s ease,transform .28s cubic-bezier(.3,.8,.3,1)
}
.eq__card:hover .eq__shot.is-drawn svg{opacity:.72;transform:scale(1.04)}

.eq__body{display:flex;flex-direction:column;gap:6px;padding:13px 15px 15px;flex:1 1 auto}
.eq__chip{
  align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--eq-leaf);background:var(--eq-soft);border-radius:999px;padding:3px 8px
}
.eq__card h3{font-size:15.5px}
.eq__body p{font-size:12.5px;line-height:1.45;color:var(--eq-dim)}
/* Which parts of a plan reach for it. A fact about the library, never about a person. */
.eq__secs{font-size:11.5px!important;color:#8a958f!important;line-height:1.4!important}
.eq__body a{
  display:inline-flex;align-items:center;gap:3px;margin-top:auto;padding-top:6px;
  font-size:12px;font-weight:600;color:var(--eq-leaf);text-decoration:none;overflow-wrap:anywhere
}
.eq__body a svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.eq__body a:hover svg{transform:translateX(2px)}

.eq .eq__none{margin:48px auto;text-align:center;font-size:15px;color:var(--eq-dim)}
.eq .eq__none[hidden]{display:none}

.eq .eq__foot{
  max-width:92ch;margin:clamp(34px,5vw,56px) 0 0;padding-top:20px;
  border-top:1px solid var(--eq-line);
  font-size:12px;line-height:1.6;color:var(--eq-dim)
}

/* ---- widths ------------------------------------------------------------------ */
@media (max-width:900px){
  .eq__sel select{max-width:none;flex:1 1 auto}
  .eq__sel label{flex:1 1 150px}
}
@media (max-width:620px){
  .eq__grid{grid-template-columns:1fr 1fr;gap:8px}
  .eq__card{border-radius:13px}
  .eq__body{padding:11px 12px 13px}
  .eq__card h3{font-size:14px}
  .eq__body p{font-size:11.5px}
  .eq__sel label{flex:1 1 calc(50% - 5px)}
  .eq__bar{padding-top:11px}
}
@media (max-width:380px){
  .eq__grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .eq *,.eq *::before,.eq *::after{animation:none!important;transition:none!important}
}

/* The page prints as the list it is, without the controls that narrow it. */
@media print{
  .eq__bar,.eq__none{display:none!important}
  .eq{background:#fff}
  .eq__grid{grid-template-columns:repeat(3,1fr)}
  .eq__card{break-inside:avoid}
}