/* Tools section of brunoseixas.com: the tools index (/tools/) and the ICP Tool page (/icp_tool/).
   Built on /bfs.css (tokens, header, footer, links, buttons, sections); this file only adds what these pages need. */

/* The section you are in, in the header. */

/* Page head: a mono line, the section name set big with the blue plus, a short intro and the character. */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "meta meta" "title figure" "lead figure"; column-gap: 8%; padding: 40px var(--pad) 72px; }
.page-meta { grid-area: meta; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; color: var(--muted); }
.page-meta a { text-decoration: none; border-bottom: 1px solid; }
.page-meta a:hover { color: var(--blue); }
.page-title { grid-area: title; margin-top: 44px; font-weight: 700; line-height: .86; text-transform: uppercase; }
.page-title .row { display: table; white-space: nowrap; font-size: clamp(56px, 9vw, 150px); letter-spacing: -.07em; }
.page-lead { grid-area: lead; margin-top: 40px; max-width: 46ch; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.22; }
.page-figure { grid-area: figure; align-self: end; width: clamp(180px, 22vw, 320px); margin-top: 24px; }

/* The tools: four entries on a grid ruled in ink, like the offers on the home. */
.tools { padding-top: 0; }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.tool { display: flex; flex-direction: column; min-width: 0; padding: 36px 6% 44px 0; border-bottom: 1px solid var(--ink); }
.tool:nth-child(even) { padding: 36px 0 44px 6%; border-left: 1px solid var(--ink); }
.tool-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.tool-kind { color: var(--muted); }
.tool-kind .num { color: var(--blue); }
.tool h2 { margin-top: 12px; font-size: clamp(30px, 3vw, 46px); line-height: 1; letter-spacing: -.045em; }
.tool-top img { flex: none; width: 116px; margin-top: -6px; transition: transform .45s cubic-bezier(.2, 1.4, .35, 1); }
.tool:hover .tool-top img { transform: rotate(-8deg) scale(1.06); }
.tool-text { margin-top: 22px; max-width: 46ch; font-size: 18px; line-height: 1.55; }
.tool-facts { margin-top: 26px; border-top: 1px solid var(--rule); }
.tool-facts div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.tool-facts dt { padding-top: 3px; color: var(--muted); }
.tool-facts dd { max-width: 52ch; font-size: 15px; line-height: 1.5; }
/* A note worth reading before you click (the ICP Tool can be asleep). */
.tool-note { display: flex; gap: 12px; margin-top: 20px; max-width: 56ch; font-size: 15px; line-height: 1.55; }
.tool-note .plus { flex: none; font-weight: 700; }
.tool-go { margin-top: auto; padding-top: 30px; }

/* Closing band, in blue. */
.tools-close .section-head { margin-bottom: 36px; }
.tools-close .actions { margin-top: 0; }

/* ICP Tool page: a short head, then the app, framed by a 1px rule. */
.app-head { display: block; padding-bottom: 40px; }
.app-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 8%; align-items: start; margin-top: 40px; }
.app-name { display: flex; align-items: flex-end; gap: 20px; }
.app-icon { flex: none; width: 104px; margin-bottom: -6px; }
.app-name h1 { font-size: clamp(38px, 4.6vw, 76px); font-weight: 700; line-height: .96; letter-spacing: -.05em; }
.app-lead { margin-top: 26px; max-width: 40ch; font-size: clamp(19px, 1.6vw, 24px); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.app-copy { padding-top: 8px; }
.app-copy > p { max-width: 60ch; font-size: 16px; line-height: 1.55; }
.app-copy > p + p { margin-top: 16px; }
.app-links { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 22px; }
.app { padding: 0 var(--pad) 80px; }
.app-frame { border: 1px solid var(--ink); background: #fff; }
.app-embed { display: block; width: 100%; height: calc(100vh - var(--head) - 48px); height: calc(100svh - var(--head) - 48px); min-height: 560px; border: 0; }

@media (max-width: 760px) {
  .page-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "figure" "title" "lead"; padding: 18px var(--pad) 48px; }
  .page-meta { flex-direction: column; gap: 2px; }
  .page-figure { justify-self: start; width: 132px; margin-top: 20px; }
  .page-title { margin-top: 16px; }
  .page-title .row { display: block; white-space: normal; font-size: 11vw; }
  .page-lead { margin-top: 22px; }
  .tool-grid { grid-template-columns: minmax(0, 1fr); }
  .tool, .tool:nth-child(even) { padding: 28px 0 34px; border-left: 0; }
  .tool-top img { width: 84px; }
  .tool-text { font-size: 17px; }
  .tool-facts div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .app-head { padding-bottom: 28px; }
  .app-intro { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 24px; }
  .app-lead { margin-top: 20px; }
  .app-copy { padding-top: 0; }
  .app-copy > p { font-size: 15px; }
  .app-icon { width: 72px; }
  .app { padding-bottom: 56px; }
  .app-embed { height: 78vh; height: 78svh; min-height: 480px; }
}