/* =============================================================================
   LISTING.CSS — websites.html + products.html
   The project cards, [label] heading and "[more to come...]" line are styled
   in components.css (shared). This file only holds the page shell.
   ============================================================================= */

/* ─── Fonts (self-hosted, fonts/) ───
   Bytesized — pixel font for the entry numbers.
   Jost (variable, weights 100–900) — entry text, per the sketch. */
@font-face {
  font-family: 'Bytesized';
  src: url('../fonts/Bytesized-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-Italic-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Nav with a back button before the logo — same treatment as contact.css. */
nav        { justify-content: flex-start; }
.nav-links { margin-left: auto; }
.nav-left  { display: flex; align-items: center; gap: 16px; }

#listing-main {
  min-height: 100svh;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 140px var(--space-lg) var(--space-xl);
}

/* [websites] heading: pulled left so it sits halfway between the nav's
   left edge (where the ✕ box starts) and the left edge of the entries.
   Nav padding and #listing-main's side padding are both 48px, so the gap
   to split is just the auto margin beside the 1200px column:
   (100vw - 1200px) / 2, halved again → / 4. Below 1200px wide the two
   edges already line up, so the shift is 0. */
#listing-main > .section-label {
  margin-left: calc(-1 * max(0px, (100vw - var(--max-width)) / 4));
}

@media (max-width: 900px) {
  #listing-main { padding: 110px 28px 64px; }
}
@media (max-width: 540px) {
  #listing-main { padding: 96px 20px 56px; }
}


/* ─────────────────────────────────────────────
   ENTRY — one numbered site/product block
   Layout (desktop):
     [ 1. ]  title ........................ // url //
             ─────────────────────────────────────────
             role       │ desc ............   [full case]
             timeframe  │                     [study  →]
   Tablet: same, narrower. Phone: everything stacks.
   Tweak sizes with the custom properties on .entry-list.
   ───────────────────────────────────────────── */

.entry-list {
  --num-size: 120px;            /* number box width/height */
  --font-entry: 'Jost', var(--font-display);
  --col-gap: clamp(20px, 2.5vw, 36px);
  --tab-w: 200px;               /* width of the link tab + case study button */
  list-style: none;
  counter-reset: entry;
  display: flex;
  flex-direction: column;
  gap: clamp(72px, 10vw, 140px); /* space between entries */
  margin-top: var(--space-lg);
}

.entry {
  counter-increment: entry;
  display: grid;
  grid-template-columns: var(--num-size) 1fr;
  column-gap: var(--col-gap);
  align-items: start;
}

/* Number box — the number is generated (1. 2. 3. …), so copied entries
   renumber themselves. */
.entry-num {
  width: var(--num-size);
  aspect-ratio: 1;
  border: 1.5px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  /* sits level with the divider line under the title, like the sketch */
  margin-top: calc(var(--title-h, 44px));
}
.entry-num::before {
  content: counter(entry) ".";
  font-family: 'Bytesized', monospace;
  font-weight: 400;
  font-size: calc(var(--num-size) * 0.55);   /* Bytesized draws small for its size */
  line-height: 1;
  color: var(--black);
}

/* Number colors — cycle through the palette in this order, then repeat
   (7th entry = navy again, etc.). Only the number changes; the box border
   stays black. To reorder, swap the variables below. */
.entry:nth-child(6n+1) .entry-num::before { color: var(--navy);   } /* #1C2D81 */
.entry:nth-child(6n+2) .entry-num::before { color: var(--yellow); } /* #FFBB00 */
.entry:nth-child(6n+3) .entry-num::before { color: var(--red);    } /* #FF0000 */
.entry:nth-child(6n+4) .entry-num::before { color: var(--teal);   } /* #5B9E87 */
.entry:nth-child(6n+5) .entry-num::before { color: var(--sky);    } /* #07ACFF */
.entry:nth-child(6n+6) .entry-num::before { color: var(--pink);   } /* #FFDDF2 */

.entry-body { min-width: 0; }

/* Title row + rule underneath */
.entry-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
  min-height: var(--title-h, 44px);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--black);
}
.entry-title {
  font-family: var(--font-entry);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.2;
}
.entry-title-sub {
  font-weight: 400;
  font-style: italic;
}
/* Link tab + case study button: a mirrored pair, same width, meeting at
   the line — black tab sits ON the line from above, white button hangs
   FROM it below. */
.entry-url,
.entry-btn {
  box-sizing: border-box;
  width: var(--tab-w);
  padding: 12px 18px;
  border: 1px solid var(--black);
  font-family: var(--font-entry);
  font-size: 15px;
  line-height: 1.25;
  text-decoration: none;
  min-height: calc(2 * 1.25em + 26px);   /* two lines tall, so both match */
  /* text centered both ways inside each box */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.entry-url {
  margin-bottom: -9px;          /* = .entry-head padding-bottom + 1px line */
  background: var(--black);
  color: var(--sky);
  font-weight: 300;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.entry-url:hover,
.entry-url:focus-visible { text-decoration: underline; }

/* role/timeframe │ desc │ button */
.entry-grid {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) 1.6fr auto;
  column-gap: var(--col-gap);
  align-items: start;
}

.entry-meta {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 18px var(--col-gap) 18px 0;
  border-right: 1px solid var(--black);
  align-self: stretch;
}
.entry-meta dt {
  font-family: var(--font-entry);
  font-weight: 700;
  font-size: 15px;
  color: var(--muted);
}
.entry-meta dd {
  font-family: var(--font-entry);
  font-size: 16px;
  line-height: 1.4;
  margin-top: 2px;
}

.entry-desc {
  padding-top: 18px;
  font-family: var(--font-entry);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
}

.entry-btn {
  margin-top: -1px;             /* top border sits on the line */
  background: var(--white);
  color: var(--black);
  font-weight: 400;
  transition: background 0.2s, color 0.2s;
}
/* Hover color: each button gets a random palette color on page load
   (script at the bottom of websites.html sets --hover-bg / --hover-fg).
   Falls back to black/white if the script doesn't run. */
.entry-btn:hover,
.entry-btn:focus-visible {
  background: var(--hover-bg, var(--black));
  border-color: var(--hover-bg, var(--black));
  color: var(--hover-fg, var(--white));
}

/* Tablet: narrower columns, button stays under the link tab */
@media (max-width: 900px) {
  .entry-list { --num-size: 88px; --tab-w: 185px; }
  .entry-grid { grid-template-columns: minmax(120px, 0.7fr) 1.6fr auto; }
}

/* Phone: number box sits beside the title, everything else stacks */
@media (max-width: 540px) {
  .entry-list { --num-size: 56px; --col-gap: 14px; }
  .entry      { grid-template-columns: var(--num-size) 1fr; row-gap: 14px; }
  .entry-num  { margin-top: 0; }
  .entry-body { display: contents; }
  .entry-head { grid-column: 2; align-self: end; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; }
  .entry-grid { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .entry-meta { border-right: none; border-bottom: 1px solid var(--black); padding: 4px 0 16px; gap: 14px; }
  .entry-meta,
  .entry-desc { text-align: center; }

  /* Link box + button side by side on the last row: black link box left,
     button right. The link box is pulled down beside it (absolutely positioned, since it lives
     up in .entry-head in the HTML). Each is half the column minus half the
     8px gap, so the pair spans edge to edge with 8px between. */
  .entry      { position: relative; }
  .entry-url,
  .entry-btn  {
    width: calc(50% - 4px);
    height: 61px;                     /* fixed px so both match even when the link text shrinks */
    min-height: 0;
    padding: 0 8px;
    font-size: 14px;
  }
  .entry-btn  { grid-column: 1 / -1; justify-self: end; margin-top: 18px; }
  .entry-url  {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    padding: 0 4px;
    font-size: min(14px, 3.6vw);   /* shrinks a touch on very narrow phones */
    letter-spacing: 0.02em;
    white-space: normal;           /* very long domains wrap instead of overflowing */
  }
}

/* With the nav links hidden (≤900px) the hamburger needs pushing right
   itself, since .nav-links' margin-left: auto no longer applies. */
@media (max-width: 900px) {
  .hamburger { margin-left: auto; }
  .nav__close { display: none; }   /* mobile: hamburger only, like every page */
}