/* Styles for the home, category, about and credits pages (site.css holds everything shared). */

/* WHY hide the top strip on the home page: its hero card already has the home button and the search box;
   a strip with only a lone icon would be an empty row (Destin, Oct 27: no dead space). */
body:has(.hero2) > .top, body:has(.hero3) > .top { display:none; }
body:has(.hero2) .page, body:has(.hero3) .page { padding-top:16px; }

/* Links that look like cards, chips and buttons don't get link colours or underlines. */
a.card, a.fchip, a.footchip, a.btn, .catcard h3 a { color:inherit; text-decoration:none; }
a.fchip { color:var(--fg-2); }
a.card:focus-visible, a.fchip:focus-visible, a.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.catcard h3 a:hover { text-decoration:underline; }

.avatar.brand { color:var(--fg-2); }
.hero2 .stats { padding-left:40px; }

/* WHY flex with growing cards, not the grid: the last line's cards stretch to fill it, so a row never ends in an empty gap. */
.row1.fill { display:flex; flex-wrap:wrap; gap:12px; }
.row1.fill > .card { flex:1 1 280px; }
.gcard { gap:8px; }
/* WHY wrap: a group name beside its status pill would otherwise be cut off ("Professional netwo…"). */
.gcard h3 { white-space:normal; }
.gcard .job { min-height:0; }

/* About page */
.prose p, .prose ul { margin:0; }
.prose a:not(.btn) { color:var(--link, var(--accent)); }
.prose .list { padding-left:20px; display:flex; flex-direction:column; gap:8px; line-height:1.6; }
.defs { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px; }
.defs .lvl1 { padding:12px; display:flex; flex-direction:column; gap:4px; }
.defs h3 { font-size:14px; font-weight:500; margin:0; }
.pop .muted11 { white-space:nowrap; }
/* WHY one line: text on the left and its buttons on the right, so neither sits alone above empty space. */
.textrow { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.textrow > div:first-child, .textrow > p { flex:1 1 360px; min-width:0; }
.btns-row { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.identity .btns-row { justify-content:flex-start; }
section[id] { scroll-margin-top:16px; }

/* Credits table */
.tablewrap { padding:4px 12px; overflow-x:auto; }
table.credits { width:100%; border-collapse:collapse; font-size:14px; }
table.credits th { text-align:left; font-size:12px; font-weight:500; color:var(--fg-muted); padding:8px 4px; }
table.credits td { padding:8px 4px; border-top:1px solid var(--edge-dim); color:var(--fg-2); }
table.credits a { color:var(--fg); }

@media (max-width:640px) {
  .hero2 .stats { padding-left:0; }
  .row1.fill { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:8px 4px 16px; margin:-8px -4px -16px; }
  .row1.fill > .card { flex:0 0 260px; }
  /* WHY: on a category page the groups are the page itself, so on phones they stack instead of scrolling sideways. */
  .row1.fill.list { flex-wrap:wrap; overflow:visible; padding:0; margin:0; }
  .row1.fill.list > .card { flex:1 1 100%; }
  .btns-row { flex-direction:column-reverse; } .btns-row .btn { width:100%; }
}

/* Gaps page: what each partial project covers, and the card's two buttons at its bottom right. */
.crumb-strong { color:inherit; text-decoration:none; }
.crumb-strong:hover { text-decoration:underline; }
.gcard .chiprow a.chip, .identity a.chip { color:var(--fg-2); text-decoration:none; }
.gcard a.chip:hover, .identity a.chip:hover { border-color:var(--accent); }
.partlist { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; font-size:12px; }
.partlist li { display:flex; gap:6px; flex-wrap:wrap; color:var(--fg-2); }
.partlist a { color:var(--fg); }
.partlist span { color:var(--fg-muted); }
.partlist span::before { content:"· "; }
.small2 a { color:var(--fg); }
/* WHY margin-top:auto: cards in a row stretch to the same height, so the buttons line up along the bottom. */
.gapbtns { margin-top:auto; padding-top:4px; display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

/* ═══ Home page, Oct 27 redesign ═══ */
/* Hero: words and a big search on the left, three real screenshots fanned on the right. */
.hero3 { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:24px; padding:32px; min-height:340px; }
.hero-text { display:flex; flex-direction:column; gap:16px; justify-content:center; min-width:0; position:relative; z-index:1; }
.eyebrow { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--fg-muted); }
.eyebrow .avatar { width:28px; height:28px; }
.hero3 h1 { margin:0; font-size:clamp(26px,3.2vw,36px); line-height:1.15; font-weight:600; letter-spacing:-.01em; max-width:15em; }
.lede { margin:0; font-size:15px; color:var(--fg-2); max-width:34em; }
.searchwrap.big { width:100%; max-width:560px; }
.searchwrap.big .searchpill { padding:12px 16px; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); background:var(--well); }
.searchwrap.big .searchpill input { font-size:15px; }
.hero3 .pop { padding-left:0; }
.stats-line { margin:0; font-size:12px; color:var(--fg-muted); }
.stats-line b { color:var(--fg); font-weight:500; }
/* WHY real screenshots: a newcomer should see at once that these are real, polished apps. */
.collage { position:relative; min-height:280px; }
.collage img { position:absolute; width:78%; aspect-ratio:16/10; object-fit:cover; object-position:top; border-radius:var(--radius-md);
  border:1px solid var(--edge-card); box-shadow:0 12px 40px rgb(0 0 0 / .22), 0 2px 6px rgb(0 0 0 / .1); background:var(--inset); }
.collage .c0 { right:22%; top:2%; transform:rotate(-4deg); }
.collage .c1 { right:0; top:24%; transform:rotate(3deg); z-index:1; }
.collage .c2 { right:20%; top:50%; transform:rotate(-1deg); z-index:2; }
/* WHY: the card hides whatever pokes past its edges (the fanned screenshots), which also cut the search dropdown
   off after three rows. While the dropdown is open the card lets it hang below, sits above the next section, and
   clips only the screenshots, at the card's own edges (its 32px padding). */
.hero3:has(.search-menu.open) { overflow:visible; z-index:5; }
.hero3:has(.search-menu.open) .collage { clip-path:inset(-32px -32px -32px -32px); }

/* Popular switches: picture cards, four to a row. */
.swgrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.swcard .inner { gap:2px; }
.swcard h3 { margin:0; font-size:16px; font-weight:500; }
.swcard .foot { margin-top:4px; }

/* Categories: a tidy grid of equal cards, each with an icon, its numbers and its biggest jobs. */
.catgrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.catcard2 { position:relative; gap:12px; }
.catcard2 .cardlink { position:absolute; inset:0; border-radius:inherit; }
.cathead { display:flex; align-items:center; gap:12px; }
.cathead h3 { margin:0; font-size:15px; font-weight:500; white-space:normal; }
.caticon { flex:none; width:40px; height:40px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center;
  color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 25%,transparent); }
/* WHY above the card's link: the job chips open their own pages; the rest of the card opens the category. */
.catcard2 .gchips { position:relative; z-index:1; }
.fchip.more { color:var(--fg-muted); background:transparent; }

/* Still missing: four short cards in one row. */
.gapgrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.gapgrid .gcard h3 { white-space:normal; }

@media (max-width:1000px) {
  .swgrid, .gapgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .catgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .hero3 { grid-template-columns:1fr; padding:20px 16px; min-height:0; }
  .collage { display:none; }
  /* WHY sideways rows on phones (design guide: long screens become short): switches and gaps scroll, categories stack. */
  .swgrid, .gapgrid { display:flex; overflow-x:auto; scrollbar-width:none; padding:8px 4px 16px; margin:-8px -4px -16px; }
  .swgrid > .card { flex:0 0 240px; } .gapgrid > .card { flex:0 0 240px; }
  .catgrid { grid-template-columns:1fr; }
}
.builders .small2 a { color:var(--fg); }

/* ═══ Search results page (search/) ═══ */
.sres-filters { display:flex; flex-direction:column; gap:8px; }
.sres-list { display:flex; flex-direction:column; gap:10px; }
.card.sres { flex-direction:row; gap:14px; padding:12px; align-items:flex-start; }
.sres-thumb { flex:none; width:112px; aspect-ratio:16/10; border-radius:var(--radius-md); overflow:hidden; background:var(--inset);
  border:1px solid var(--edge-card); display:flex; align-items:center; justify-content:center; color:var(--fg-dim); }
.sres-thumb img { width:100%; height:100%; object-fit:cover; object-position:top; }
.sres-thumb .letter { font-size:26px; font-weight:600; color:var(--fg-muted); }
.sres-thumb .letter.closed { color:var(--fg-faint); }
.sres-body { min-width:0; flex:1; display:flex; flex-direction:column; gap:5px; }
.sres-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sres-top h3 { margin:0; font-size:15px; font-weight:600; }
.sres-top .mstr { margin-left:auto; }
.sres-sum { margin:0; font-size:12.5px; color:var(--fg-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sres-why { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.sres-why .chip { white-space:normal; }
@media (max-width:640px) {
  .card.sres { gap:10px; padding:10px; }
  .sres-thumb { width:72px; }
  .sres-top .mstr { margin-left:0; }
}