/* BUILD: 2026-10-23-C
   site.css -- the PUBLIC pages (home.php, library.php).
   The first part is the news index's own design, copied from generate_articles_index.php
   so these pages look like the rest of the site: same colours (light and dark), header,
   masthead carousel and tiles. The second part adds only what these pages need,
   built from the same colour variables. */
:root {
    --font-body: "Inter", system-ui, -apple-system, sans-serif;
    --accent: #0f4a44;
    --accent-strong: #0a332f;
    --bg: #faf9f6;
    --bg-raised: #ffffff;
    --text: #17191c;
    --text-muted: #565c60;
    --border: #e3e1da;
    --carousel-bg: #14161a;
  }
  [data-theme="dark"] {
    --accent: #57bfae;
    --accent-strong: #7ad4c4;
    --bg: #121314;
    --bg-raised: #1a1c1e;
    --text: #ecece9;
    --text-muted: #a4a9ac;
    --border: #2d2f31;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --accent: #57bfae;
      --accent-strong: #7ad4c4;
      --bg: #121314;
      --bg-raised: #1a1c1e;
      --text: #ecece9;
      --text-muted: #a4a9ac;
      --border: #2d2f31;
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
  }
  .site-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-raised);
  }
  .menu-slot { flex: 1 1 auto; min-width: 0; }
  .theme-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--border);
    background: var(--bg-raised);
    color: var(--text);
    border-radius: 999px;
    padding: .4rem .7rem;
    cursor: pointer;
    font-size: .85rem;
    font-family: var(--font-body);
  }
  .masthead-carousel {
    max-width: 1200px;
    margin: 0 auto;
    aspect-ratio: 16 / 7;
  }
  @media (max-width: 599px) {
    .masthead-carousel { aspect-ratio: 4 / 3; }
  }
  .carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--carousel-bg);
  }
  .carousel-track {
    display: flex;
    height: 100%;
    transition: transform .5s ease;
  }
  .carousel-slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
    background: var(--carousel-bg);
  }
  .carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .carousel-slide a.carousel-link {
    position: absolute;
    inset: 0;
    display: block;
  }
  .carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .carousel-nav.prev { left: .75rem; }
  .carousel-nav.next { right: .75rem; }
  .carousel-dots {
    position: absolute;
    bottom: .75rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: .4rem;
  }
  .carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .carousel-dot[aria-current="true"] { background: #fff; }

  .page-head {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 1rem;
  }
  .page-head h1 { margin: 0 0 .3rem; font-size: 1.8rem; }
  .page-head p { margin: 0; color: var(--text-muted); font-size: .9rem; }
  .tile-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
  }
  .tile {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .tile-image { aspect-ratio: 16/10; background: #14161a; }
  .tile-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tile-image-placeholder { background: linear-gradient(135deg, var(--border), var(--bg)); }
  .tile-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
  .tile-title { font-size: 1.05rem; margin: 0 0 .5rem; line-height: 1.3; color: var(--text); }
  .tile-description {
    font-size: .85rem;
    color: var(--text-muted);
    margin: 0 0 1rem;
    flex: 1;
  }
  .tile-view-btn {
    align-self: center;
    text-align: center;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    padding: .5rem 1rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
  }
  .tile-view-btn:hover { background: var(--accent-strong); }

  .tile-carousel-wrap {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .tile-carousel-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin: 0 0 .5rem;
    padding: .8rem 1rem 0;
  }
  .tile-carousel {
    aspect-ratio: 16/10; /* matches .tile-image, so it reads as one of the tiles */
    flex: 1;
  }
  /* Vertically-centered arrows (the shared default, right for the wide
     masthead) look oversized/awkward on a tile this compact -- move
     them to sit just above the dots instead. */
  .tile-carousel .carousel-nav {
    top: auto;
    bottom: 1.9rem;
    transform: none;
    width: 26px;
    height: 26px;
    font-size: .8rem;
  }
  .site-footer { border-top: 1px solid var(--border); padding: 1.5rem; }

/* ---------- additions for the home page and library ---------- */
.page-head .lead-line { margin: .2rem 0 0; color: var(--text-muted); font-size: 1rem; max-width: 46rem; }
.section-head { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.5rem 0; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head h2 { margin: 0; font-size: 1.35rem; }
.section-head a { color: var(--accent); font-weight: 600; font-size: .9rem; }
/* a gateway's drawing sits in the tile's picture area, centred on a soft background */
.tile-image.gateway-art { background: linear-gradient(135deg, #faf9f6, #e9e4d8); display: flex; align-items: center; justify-content: center; }   /* light in both themes: the drawings are dark-lined */
.tile-image.gateway-art img { width: 46%; height: auto; max-height: 78%; object-fit: contain; }
.tile.is-soon { opacity: .7; }
.tile-view-btn.is-disabled { background: var(--text-muted); pointer-events: none; }
.tile-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: -.4rem 0 .8rem; }
.tile-tags span { font-size: .72rem; color: var(--accent); border: 1px solid var(--border); border-radius: 999px; padding: .05rem .5rem; }
.tile-langs { font-size: .78rem; color: var(--text-muted); margin: 0 0 .9rem; }
/* library: search and category buttons */
.find { max-width: 1200px; margin: 0 auto; padding: .5rem 1.5rem 0; display: flex; flex-direction: column; gap: .8rem; }
.find input[type="search"] { font: inherit; font-size: .95rem; padding: .55rem .95rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-raised); color: var(--text); max-width: 26rem; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { font: inherit; font-size: .85rem; padding: .35rem .9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-raised); color: var(--text); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.tile[hidden] { display: none; }
.empty-note { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem 2rem; color: var(--text-muted); }

/* ---------- ads always stay inside their frame ----------
   Each ad image is pinned to its frame's four edges instead of being "height: 100%". Inside a
   flexible card, Safari can treat that percentage as unknown, and the image then took its OWN size
   (large ad banners) and spilled out of the card. Pinned, its size always comes from the frame, and
   object-fit: contain letterboxes the whole ad inside it. */
.carousel .carousel-slide img {      /* specific enough to win over picture rules around it, e.g. .para-with-image-figure img */
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: contain; border-radius: 0; margin: 0;
}
.masthead-carousel, .tile-carousel { position: relative; }
.masthead-carousel > .carousel, .tile-carousel > .carousel { position: absolute; inset: 0; height: auto; }
.tile-carousel { flex: 1 0 auto; }
/* Safari: when a stretched tile makes the frame taller than 16:10, Safari kept the shape by WIDENING
   the frame (about 1.6 x its height), so ads, dots and the next arrow ran off the tile's right edge.
   Fixing the width to the tile's own leaves Safari nothing to recalculate. */
.tile-carousel { width: 100%; max-width: 100%; min-width: 0; }

/* ---------- the same, written for every Safari ----------
   Long-hand top/right/bottom/left (Safari before 14.1 ignores the "inset" shorthand, and then an
   ad showed at its own size); Safari is made to clip the sliding strip inside rounded frames; and
   where "aspect-ratio" isn't known (Safari before 15) the frames get their shape from padding. */
.carousel .carousel-slide img { top: 0; right: 0; bottom: 0; left: 0; }
.carousel-slide a.carousel-link { top: 0; right: 0; bottom: 0; left: 0; }
.carousel { -webkit-transform: translateZ(0); transform: translateZ(0); }
.masthead-carousel > .carousel, .tile-carousel > .carousel { top: 0; right: 0; bottom: 0; left: 0; }
.tile-carousel-wrap { -webkit-mask-image: -webkit-radial-gradient(white, black); }
@supports not (aspect-ratio: 1 / 1) {
  .masthead-carousel { height: 0; padding-top: 43.75%; }                 /* 16:7 */
  @media (max-width: 599px) { .masthead-carousel { padding-top: 75%; } }   /* 4:3 on phones */
  .tile-carousel { height: 0; padding-top: 62.5%; flex: 0 0 auto; }      /* 16:10 */
}