/*
  Everything in static/ is copied to the site as-is, so this file is served at /css/style.css

  Each rule notes the Tailwind classes it replaces, as a translation guide.
  Tailwind's spacing scale is 4px per step: p-4 = 16px, gap-5 = 20px, gap-10 = 40px.
*/

/* ---------- Colours and fonts ----------
   Custom properties ("CSS variables") are defined once here and used below with var(--name).
   This is what Tailwind's @theme did. */
:root {
  --font-sans: 'Lato', Calibri, Arial, sans-serif;
  --font-title: 'Rubik Marker Hatch', 'Lato', sans-serif;
  --color-ink: #333;
  --color-muted: #555;
  --color-paper: #f9f9f9;
  /* Width shared by the header and main, so their left and right edges line up */
  --content-width: 960px;
  --gutter: 16px;
}

/* ---------- Basics ----------
   Tailwind's "preflight" reset did these for us. */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

/* Tailwind: bg-paper text-[15px] font-light text-ink */
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
}

a { color: var(--color-muted); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Tailwind: mx-auto max-w-[1240px] px-4
   max-width includes the side padding (box-sizing: border-box), so the content
   itself is at most --content-width wide. The header uses the same values. */
main {
  max-width: calc(var(--content-width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Header ---------- */

/* Tailwind: mx-auto flex max-w-[1240px] flex-wrap items-baseline gap-x-10 gap-y-2 px-5 pt-1.5 pb-7.5
   A flex container lays its children (title, nav) out in a row.
   flex-wrap lets the nav drop to a new line when the row runs out of space. */
.site-header {
  max-width: calc(var(--content-width) + 2 * var(--gutter));  /* same as main */
  margin: 0 auto;
  padding: 6px var(--gutter) 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;   /* line up the text baselines of title and menu */
  column-gap: 40px;        /* space between items on the same row */
  row-gap: 8px;            /* space between rows once wrapped */
}

/* Tailwind: font-title text-2xl font-normal leading-tight sm:text-[32px] */
.site-title {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
}
/* Tailwind's sm: prefix is a media query: these rules apply only on screens 640px or wider */
@media (min-width: 640px) {
  .site-title { font-size: 32px; }
}
.site-title a { color: var(--color-ink); text-decoration: none; }

/* Tailwind: ml-auto flex gap-5 text-lg
   margin-left: auto takes up all the free space on the left, pushing the nav to the right. */
.site-nav {
  margin-left: auto;
  display: flex;
  gap: 20px;
  font-size: 18px;
}
/* Tailwind: aria-[current=page]:underline */
.site-nav a[aria-current="page"] { text-decoration: underline; }

/* ---------- The grid of works ---------- */

/* Tailwind: grid grid-cols-2 sm:grid-cols-3 gap-2.5 py-5
   1fr = one equal share of the free space, so the columns stretch to fill
   the full width of main, and the tiles grow and shrink with the window. */
.works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2 columns on narrow screens */
  gap: 10px;
  padding: 20px 0;
}
@media (min-width: 640px) {
  .works-grid { grid-template-columns: repeat(3, 1fr); }  /* never more than 3 */
}

/* Tailwind: group relative block */
.works-grid a { display: block; position: relative; }

/* Tailwind: aspect-square w-full object-cover
   Fill the column's width, and keep the tile square whatever that width is. */
.works-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Tailwind: absolute inset-0 flex items-center justify-center bg-black/55 p-2.5 text-center
             font-normal text-white opacity-0 transition-opacity duration-200
   Here flex is used to centre the title both ways: justify-content is the main
   (horizontal) axis, align-items the cross (vertical) axis. */
.tile-title {
  position: absolute;
  inset: 0;               /* stretch over the whole tile: top/right/bottom/left = 0 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  background: rgb(0 0 0 / 55%);
  color: #fff;
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.2s;
}
/* Tailwind: group-hover:opacity-100 group-focus:opacity-100
   "when the link is hovered or focused, show the title inside it" */
.works-grid a:hover .tile-title,
.works-grid a:focus .tile-title { opacity: 1; }

/* ---------- Single pages (a work, about, ...) ---------- */

/* Tailwind: mx-auto max-w-[800px] pb-10 leading-relaxed */
.page {
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 40px;
  line-height: 1.625;
}

/* Tailwind: my-5 text-[26px] font-normal */
.page h2 { margin: 20px 0; font-size: 26px; font-weight: 400; }

/* Tailwind: my-4 (and [&_p]:my-4 on the markdown wrapper)
   Plain CSS can style tags inside .page directly, so markdown output needs no special handling. */
.page p { margin: 16px 0; }

/* Tailwind: [&_a]:underline - links inside the markdown text */
.page-text a { text-decoration: underline; }

/* Tailwind: h-auto w-full */
.cover { width: 100%; height: auto; }

/* Tailwind: inline-block bg-ink px-4 py-2 text-white hover:bg-muted */
.button {
  display: inline-block;
  padding: 8px 16px;
  background: var(--color-ink);
  color: #fff;
}
.button:hover { background: var(--color-muted); text-decoration: none; }

/* ---------- Gallery thumbnails on a work page ----------
   The popup itself is styled by static/js/photoswipe/photoswipe.css */

/* A row of 150px thumbnails that wraps onto more rows as needed */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gallery img { width: 150px; height: 150px; object-fit: cover; }
.gallery a:hover img { opacity: 0.8; }

/* ---------- About page ---------- */

/* Social links in a row that wraps (Tailwind: flex flex-wrap gap-x-5 gap-y-2 my-6) */
.social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;          /* shorthand: row-gap column-gap */
  margin: 24px 0;
}

.page h3 { margin: 40px 0 12px; font-size: 20px; font-weight: 400; }

/* Each exhibition is a row: a fixed-width year column, then the details.
   flex: none on the year stops it from shrinking; the details take the rest of the row. */
.exhibitions li {
  display: flex;
  gap: 20px;
  margin-bottom: 8px;
}
.exhibition-year { flex: none; width: 3em; font-weight: 400; }

/* ---------- Footer ---------- */

/* Tailwind: px-4 py-10 text-center text-[13px] */
.site-footer { padding: 40px 16px; text-align: center; font-size: 13px; }