/* Guide library (/guides) only: a card catalogue. Shared filter and card basics
   come from css/library.css; this file adds the page's own layout and colours. */

/* one soft colour per topic, used for the card tab, the topic tag and the filter dot */
.page-library [data-topic="start"],.page-library .chip[data-value="start"]{--topic:#FFE07A;}
.page-library [data-topic="marketing"],.page-library .chip[data-value="marketing"]{--topic:#FFC2A8;}
.page-library [data-topic="career"],.page-library .chip[data-value="career"]{--topic:#B9D3FF;}
.page-library [data-topic="content"],.page-library .chip[data-value="content"]{--topic:#A9E3C4;}
.page-library [data-topic="design"],.page-library .chip[data-value="design"]{--topic:#DCCBFF;}
.page-library [data-topic="productivity"],.page-library .chip[data-value="productivity"]{--topic:#FFD9A0;}
.page-library [data-topic="building"],.page-library .chip[data-value="building"]{--topic:#BFE6E8;}
.page-library [data-topic="life"],.page-library .chip[data-value="life"]{--topic:#E9DCC6;}
.page-library [data-topic="money"],.page-library .chip[data-value="money"]{--topic:#CDE6A8;}
.page-library [data-topic="power"],.page-library .chip[data-value="power"]{--topic:#D3CEC7;}

/* ---------- header: copy beside a stack of taped index cards ---------- */
.lib-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(30px,6vw,80px);align-items:center;padding:clamp(40px,6vw,76px) 0 clamp(18px,3vw,30px);text-align:left;}
.lib-head .hi{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem);}
.lib-head h1{margin:8px 0 16px;font-size:clamp(3rem,1.8rem + 4.4vw,5.4rem);line-height:.98;letter-spacing:-.035em;}
.lib-head p{max-width:36rem;margin:0;font-size:var(--text-lg);color:var(--color-ink-soft);}
.lib-stack{position:relative;justify-self:center;width:min(100%,300px);height:230px;}
.lib-card{
  position:absolute;left:12%;right:6%;height:150px;
  background-color:var(--color-card);
  background-image:linear-gradient(transparent 34px,var(--color-peach) 34px 35.5px,transparent 35.5px),
                   repeating-linear-gradient(transparent 0 23px,var(--color-accent-tint) 23px 24px);
  background-position:0 0,0 12px;
  border:1px solid var(--color-line);border-radius:var(--radius-xs);box-shadow:var(--shadow-paper);
}
.lib-card::before{   /* the folder tab */
  content:"";position:absolute;bottom:100%;left:18px;width:70px;height:16px;
  background:var(--tab);border:1px solid var(--color-line);border-bottom:0;border-radius:6px 6px 0 0;
}
.lib-card-1{top:70px;--tab:var(--color-sky);transform:rotate(-8deg);}
.lib-card-2{top:44px;--tab:var(--color-mint);transform:rotate(4deg);}
.lib-card-3{top:20px;--tab:var(--color-butter);transform:rotate(-2deg);}
.lib-clip{position:absolute;top:-6px;right:20%;width:22px;height:auto;transform:rotate(10deg);}
.lib-star{--size:62px;--tilt:16deg;top:6px;left:-4px;}
.lib-flower{--size:52px;--tilt:-10deg;right:-8px;bottom:6px;}

/* ---------- filters: a tray of chips ---------- */
.page-library section.guides-lib{padding-top:clamp(12px,2vw,24px);}
.page-library .filters{
  position:relative;margin:0 0 26px;padding:30px clamp(20px,3vw,32px) 14px;
  background-color:var(--color-card);
  background-image:linear-gradient(var(--color-grid) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);
  background-size:24px 24px;
  border:1px solid var(--color-line);border-radius:var(--radius-sm);box-shadow:var(--shadow-paper);
}
.page-library .comment-nudge{
  display:block;width:fit-content;max-width:100%;margin:-58px 0 18px auto;padding:12px 18px 13px;
  font-size:1.3rem;line-height:1.25;color:var(--color-ink);
  background:var(--color-butter-soft);border-radius:var(--radius-xs);box-shadow:var(--shadow-paper);transform:rotate(1.2deg);
}
.page-library .chip[data-value]:not([data-value="all"])::before{
  content:"";flex:none;width:10px;height:10px;margin-right:7px;border-radius:50%;
  background:var(--topic,var(--color-line-strong));box-shadow:inset 0 0 0 1px rgba(30,27,24,.15);
}
.page-library .chip.tool[data-value]::before{display:none;}

/* the guide count as a little sticker */
.page-library .gcount{
  display:inline-block;margin:0 0 20px;padding:.18em .8em .24em;
  font:1.35rem/1.1 var(--font-hand);color:var(--color-ink);
  background:var(--color-butter);border-radius:var(--radius-pill);
  box-shadow:0 0 0 3px #fff,var(--shadow-sticker);transform:rotate(-2deg);
}

/* ---------- cards: a colour-coded catalogue ---------- */
.page-library .glib{gap:34px 22px;padding-top:12px;}
.page-library .gcard{border-top-left-radius:0;}
.page-library .gcard::before{   /* folder tab in the topic colour */
  content:"";position:absolute;bottom:100%;left:-1px;width:74px;height:14px;
  background:var(--topic,var(--color-butter));border:1px solid var(--color-line);border-bottom:0;border-radius:6px 6px 0 0;
}
.page-library .gcard:nth-child(3n+1){transform:rotate(-.5deg);}
.page-library .gcard:nth-child(3n+2){transform:rotate(.4deg);}
.page-library .gcard:hover{transform:translateY(-3px) rotate(0);}
.page-library .gcard .gtag.topic{color:var(--color-ink);background:var(--topic,var(--color-paper-2));}

/* ---------- the end note ---------- */
.page-library .lib-note{margin-top:46px;--tape-col:var(--tape-accent);--tape-w:96px;--tape-h:24px;}

/* ---------- phones: compact, so the first guides show without scrolling (Cindy, 28 Oct) ---------- */
@media (max-width:760px){
  .lib-head{grid-template-columns:minmax(0,1fr);padding:26px 0 6px;text-align:center;}
  .lib-head p{margin-inline:auto;}
  .lib-stack{display:none;}
}
@media (max-width:600px){
  .lib-head h1{font-size:2.3rem;margin:2px 0 8px;}
  .lib-head p{font-size:.95rem;line-height:1.45;}
  .page-library .filters{margin-bottom:16px;padding:14px 14px 4px;}
  .page-library .comment-nudge{margin:0 0 10px;padding:0;font-size:1.12rem;background:none;box-shadow:none;transform:rotate(-.6deg);}
  .page-library .chip[data-value]:not([data-value="all"])::before{width:7px;height:7px;margin-right:5px;}
  .page-library .gcount{margin-bottom:14px;font-size:1.15rem;}
  .page-library .glib{gap:26px;}
  .page-library .gcard:nth-child(n){transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .page-library .gcard:hover{transform:none;}
}