/* =========================================================================
   page-biosolids-gallery.css — data/biosolids/gallery.html
   Bespoke gallery/viz components (regional map, atlas cards, thumbnail
   gallery + filter chips, accordion). Relocated verbatim from an inline
   <style> block — no token drift, resets, or nav overrides were present,
   so this is a pure move out of inline. (A later pass could align the
   page-scoped .card to the canonical component.)
   ========================================================================= */

  /* Hero */
    .hero{
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(1100px 520px at 15% 10%, rgba(233,169,35,.14), rgba(233,169,35,0) 62%),
        linear-gradient(180deg, rgba(14,59,46,.10), rgba(14,59,46,.02)),
        url("../../assets/textures/tx_topo-hudson-lines_tile.svg"),
        url("../../assets/textures/tx_water-ripple_tile.svg");
      background-repeat: no-repeat, no-repeat, repeat, repeat;
      background-size: cover, cover, 520px 520px, 560px 560px;
      border-bottom: 1px solid rgba(14,59,46,.10);
    }
    .hero-inner{ padding: 40px 0 18px; }
    .kicker{
      font-family: var(--font-head);
      color: var(--hvb-green);
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: 12px;
    }
    h1{
      margin: 8px 0 10px;
      font-family: var(--font-head);
      font-size: clamp(30px, 3.2vw, 44px);
      letter-spacing: -0.03em;
      line-height: 1.08;
    }
    .subhead{
      margin: 0;
      color: var(--hvb-slate);
      max-width: 92ch;
      font-size: 16.5px;
    }
    .hero-actions{
      display:flex; gap: 10px; flex-wrap: wrap;
      margin-top: 14px;
    }

    .regional-map{
      background: #fff;
      border-bottom: 1px solid rgba(14,59,46,.08);
      padding: 36px 0;
    }
    .map-grid{
      display:grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
      gap: 18px;
      align-items: center;
    }
    .map-card{
      background: #fff;
      border-radius: 18px;
      border: 1px solid rgba(14,59,46,.12);
      padding: 20px;
      box-shadow: var(--shadow-1);
    }
    .map-card img{
      width: 100%;
      border-radius: 14px;
      border: 1px solid rgba(14,59,46,.10);
      box-shadow: 0 10px 20px rgba(0,0,0,.08);
    }
    .map-caption{
      margin: 12px 0 0;
      color: var(--hvb-slate);
      font-size: 14px;
    }
    .data-callout{
      background: transparent;
      border-radius: 0;
      border: none;
      padding: 0;
    }
    .data-callout h3{
      margin: 0 0 10px;
      font-family: var(--font-head);
      font-size: 20px;
    }
    .data-callout ul{
      margin: 0;
      padding-left: 18px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      color: var(--hvb-slate);
      line-height: 1.4;
      font-size: 15px;
    }
    @media (max-width: 940px){
      .map-grid{ grid-template-columns: 1fr; }
    }

    .atlas-card{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 18px;
      align-items: center;
    }
    .atlas-card figure{
      margin:0;
    }
    .atlas-card img{
      border-radius: 16px;
      border: 1px solid rgba(14,59,46,.10);
      box-shadow: 0 18px 36px rgba(0,0,0,.18);
    }
    /* Featured flow-diagram card: show the wide, detail-dense Sankey full-width
       and un-cropped (contain) instead of squeezing it into a cropped 4:3 col. */
    .atlas-card--diagram{ grid-template-columns: 1fr; }
    .atlas-card--diagram .atlas-card__figure{
      aspect-ratio: 16 / 9;
      background: #fff;
      border: 1px solid rgba(14,59,46,.10);
    }
    .atlas-card--diagram .atlas-card__figure > img{
      object-fit: contain;
      padding: 10px;
      border: 0;
      box-shadow: none;
      border-radius: 0;
    }
    .section-cta{
      margin-top: 18px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }

    /* Content */
    main{ padding: 28px 0 56px; }
    section{ padding: 28px 0; }

    .section-head{
      display:flex; align-items:flex-end; justify-content: space-between;
      gap: 16px; flex-wrap: wrap;
      margin-bottom: 14px;
    }
    h2{
      margin: 0;
      font-family: var(--font-head);
      font-size: 28px;
      letter-spacing: -0.02em;
      line-height: 1.15;
    }
    .sub{
      margin: 8px 0 0;
      color: var(--hvb-slate);
      max-width: 92ch;
    }

    .card{
      background: var(--hvb-paper);
      border: 1px solid rgba(14,59,46,.10);
      border-radius: var(--radius-card);
      padding: 16px;
      box-shadow: var(--shadow-1);
    }
    .card h3{
      margin: 0 0 8px;
      font-family: var(--font-head);
      font-size: 18px;
      letter-spacing: -0.01em;
    }
    .card p{ margin: 0; color: var(--hvb-slate); }
    .card ul{ margin: 10px 0 0; padding-left: 18px; color: var(--hvb-slate); }
    .card li{ margin: 6px 0; }

    .grid3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      align-items: stretch;
    }
    @media (max-width: 980px){
      .grid3{ grid-template-columns: 1fr; }
    }

    .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      align-items: start;
    }
    @media (max-width: 980px){
      .grid2{ grid-template-columns: 1fr; }
    }

    /* Gallery */
    .toolbar{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      margin: 12px 0 0;
    }
    .search{
      display:flex; gap: 10px; align-items:center; flex-wrap: wrap;
      width: 100%;
      justify-content: space-between;
    }
    .search input{
      width: min(520px, 100%);
      padding: 12px 12px;
      border-radius: 12px;
      border: 1px solid rgba(14,59,46,.18);
      outline: none;
      font-size: 14px;
      background: #fff;
    }
    .search input:focus{
      border-color: rgba(31,111,98,.55);
      box-shadow: 0 0 0 4px rgba(31,111,98,.16);
    }
    .chips{ display:flex; gap: 8px; flex-wrap: wrap; }
    .chip{
      border: 1px solid rgba(14,59,46,.14);
      background: rgba(31,111,98,.06);
      color: var(--hvb-green);
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      user-select: none;
    }
    .chip.active{
      background: rgba(14,59,46,.12);
      border-color: rgba(14,59,46,.24);
    }

    .grid4{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      align-items: stretch;
      margin-top: 14px;
    }
    @media (max-width: 1100px){
      .grid4{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px){
      .grid4{ grid-template-columns: 1fr; }
    }

    .thumbcard{
      padding: 0;
      overflow: hidden;
      display:flex;
      flex-direction: column;
    }
    .thumbwrap{
      padding: 10px 10px 8px;
      background:
        linear-gradient(180deg, rgba(31,111,98,.06), rgba(31,111,98,.02)),
        url("../../assets/textures/tx_recycled-paper_tile.png");
      background-repeat: no-repeat, repeat;
      background-size: cover, 640px 640px;
      border-bottom: 1px solid rgba(14,59,46,.10);
    }
    .thumbwrap figure{
      margin: 0;
    }
    .thumbbody{
      padding: 12px 14px 14px;
      display:flex;
      flex-direction: column;
      gap: 8px;
    }
    .thumbbody h3{
      margin: 0;
      font-family: var(--font-head);
      font-size: 16px;
      letter-spacing: -0.01em;
    }
    .meta{
      margin: 0;
      color: var(--hvb-slate);
      font-size: 13.5px;
    }
    .actions{
      margin-top: auto;
      display:flex;
      flex-direction: column;
      gap: 10px;
    }
    #biosGrid .actions{
      margin-top: 0;
    }
    .secondary-actions{
      display:flex;
      flex-wrap: wrap;
      gap:10px;
    }
    .actions--compact{
      display:flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: flex-start;
    }
    .actions--compact .btn{
      flex: 1 1 150px;
    }
    .linkrow{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-top: 12px;
    }
    .btn-full{
      width: 100%;
      justify-content: center;
      padding: 12px 0;
    }

    details{
      background: #fff;
      border: 1px solid rgba(14,59,46,.10);
      border-radius: 14px;
      padding: 12px 14px;
      box-shadow: var(--shadow-1);
    }
    summary{
      cursor: pointer;
      font-weight: 800;
      color: var(--hvb-green);
      outline: none;
    }
    details p{ margin: 10px 0 0; color: var(--hvb-slate); }
    details ul{ margin: 10px 0 0; padding-left: 18px; color: var(--hvb-slate); }
    code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.95em; }