/* ==========================================================================
   GEBI — Tools page (the courses we point people to)
   Page-specific styling only. The palette tokens, header, footer and the shared
   .wrap / .section / .cols / .chips / .chip / .btn building blocks come from
   css/styles.css, so this page reads as part of the same site.
   ========================================================================== */

.tl-page{
  --tl-feature:rgba(224,197,129,.34);   /* warm sun-gold wash behind the recommended course — a translucent
                                           tint drawn from the site's gold, so it reads as the one highlighted
                                           panel without going off-palette (was a flat pale sage) */
  --tl-wash:rgba(255,255,255,.62);
  /* The page's own watercolour sits behind the card, the way the Career Navigation tool's
     backdrop does: a full-bleed artwork the translucent cream .tl-shell floats on, so it
     shows in the margins around the card. Pinned to the viewport (cover, so it always fills
     the frame) rather than laid across the whole tall document, which would blow the 1536x1024
     landscape up to a blur.
     The artwork is a river valley waterfall: green banks and boulders framing a blue river,
     snow-capped peaks on the horizon. */
  background:var(--cream) url(../assets/tools-bg.webp) center top/cover no-repeat fixed;
}

/* ---------- header tweaks for this page ----------
   styles.css redraws the artwork's sun as a disc on the bar (.site-header::before) because
   the bar's cream covers the sun in that poster. This page wears a different landscape
   (assets/tools-bg.webp) that has no sun in it, so the redrawn disc is an orphan here and
   reads as a stray yellow circle top-right. Drop it on this page only; every other page
   keeps it. */
.tl-page .site-header::before{display:none}

/* the Tools button, when its dropdown is open — same underline as About */
#toolsBtn[aria-expanded="true"]{background-size:100% 2px}

/* Give <main> its own block formatting context so .tl-shell's top margin can't collapse
   through it and out of <body>. Left alone, that collapsed margin becomes the body's own
   top margin, so the body's box (and with it the page artwork this page paints on it)
   would not begin until y=6rem; the fixed header only covers ~70px, so the 26px of bare
   --cream between bar and card read as an empty white box. flow-root keeps the margin
   inside main: the body's box starts at y=0, the artwork paints from there, and the
   landscape now touches the underside of the nav bar. The card keeps its 6rem offset. */
.tl-page main{display:flow-root}

/* ---------- page shell: one card around the whole tool ----------
   The Career Navigation tool ("Your Biosecurity Shepherd") draws a single cream panel
   around everything it shows, floating on a full-bleed artwork; this page now does the
   same. <main> holds one .tl-shell that encloses the hero, the courses and the "after
   the course" steps, matching that card's look (max-width 1120px, centred, cream wash,
   12px corners, padded) — without touching the components inside it.

   One deliberate difference from the Shepherd's card: its header is sticky and in-flow,
   so a 26px top margin drops the card just below it, whereas this page's header is
   fixed, so the shell's top margin has to clear the bar itself (~71px on desktop,
   ~51px ≤880px) plus the same ~25px gap.

   No border or shadow, again like the Shepherd: the page carries the artwork (.tl-page,
   above), and the translucent wash lets it read through as the card's panel, which is
   what gives the card its edge — no hairline or drop shadow needed.

   Horizontal padding stays 0: the hero and every section already carry their own
   var(--pad) inset, so the copy lines up flush with the sections below it. */
.tl-shell{
  max-width:1120px;
  margin:calc(env(safe-area-inset-top,0px) + 6rem) auto 30px;
  padding:0 0 clamp(2rem,4vw,3rem);
  /* .93, not .88: the artwork (tools-bg.webp) is a busy illustration — trees, boulders
     and a waterfall right behind the card — where the old one was a soft watercolour wash,
     and at .88 those shapes ran straight through the copy. The card still lets the landscape
     read through it -- the margins carry the picture -- but the words no longer sit on
     moving ground. */
  background:rgba(248,245,239,.93);
  border-radius:12px;
}
@media (max-width:880px){
  .tl-shell{margin-top:calc(env(safe-area-inset-top,0px) + 4.75rem)}
}

/* ---------- hero: the heading, over the shared artwork ----------
   The artwork now lives behind the whole card (.tl-page, above), so the hero no longer
   paints its own copy — it is just the heading and the lede sitting on the translucent
   card, with the one landscape running unbroken behind it, the way the Shepherd's card
   opens over its river. That makes the three layers which used to fill the band
   (.tl-hero-bg, .tl-hero-scrim, .tl-hero-edge) redundant, so they are hidden here while
   staying in the markup; the hero itself collapses from a tall banner to a header block
   above the courses. */
.tl-hero{
  position:relative;
  padding:clamp(2.75rem,6vw,4.5rem) var(--pad) clamp(2.25rem,4.5vw,3.25rem);
}
.tl-hero-bg,.tl-hero-scrim,.tl-hero-edge{display:none}
/* the copy follows the same var(--pad) inset as every section below it */
.tl-hero-inner{position:static;left:auto;right:auto;top:auto;width:auto;max-width:none;margin:0}
.tl-h1{
  font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 1.5rem;max-width:44rem;
}
.tl-lede{
  font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.55;
  color:var(--ink-copy);max-width:34rem;margin:0;
}
/* this block used to hand .tl-hero-edge its old banner geometry; the layer is hidden above
   (it would otherwise paint its cream wave across the middle of the card and break the one
   continuous landscape), so it no longer sets display — leaving that to the hide rule. */
.tl-hero-edge{
  position:absolute;left:0;right:0;bottom:-1px;z-index:0;width:100%;
  height:clamp(40px,7vw,96px);color:var(--cream);pointer-events:none;
}

/* ---------- courses section ---------- */
#courses{padding-top:clamp(2rem,4vw,3rem)}
/* intro line above the recommendations: says in plain words that the picks are
   ours alone and the providers are independent of GEBI */
.picks{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.6;color:var(--ink-copy);max-width:46rem;margin:0 0 1.5rem}

/* featured course */
.feature{
  position:relative;background:var(--tl-feature);border-radius:36px;
  padding:clamp(1.5rem,4vw,3rem);
  display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(1.5rem,4vw,3rem);
  align-items:stretch;transition:opacity .35s;
}
.feature h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.lead{font-size:1.15rem;line-height:1.6}
.sub{color:var(--ink-soft)}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.2rem;padding:0;list-style:none}
.tags li{border:1px solid var(--line);border-radius:999px;padding:.2rem .8rem;font-size:.88rem;font-weight:500;background:rgba(255,255,255,.6)}
.go{
  display:inline-flex;align-items:center;gap:.4rem;font-weight:600;
  color:var(--link-green);text-decoration:none;border-bottom:2px solid currentColor;
  padding-bottom:.1rem;margin-right:1.2rem;transition:opacity .2s;
}
.go:hover{opacity:.72}
.fine{font-size:.88rem;color:var(--ink-soft);max-width:72ch}
.grid + .fine{margin-top:1.4rem}

.met{
  position:relative;border-radius:26px;background:rgba(255,255,255,.6);
  border:1px solid var(--line);padding:1.6rem;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:260px;
}
.met svg.deco{position:absolute;inset:0;width:100%;height:100%}
.met p{position:relative;margin:0;font-size:1.1rem;font-weight:500;line-height:1.45}
@media (max-width:860px){.feature{grid-template-columns:1fr}}

/* finder */
.finder{margin:clamp(2.5rem,5vw,3.5rem) 0 1.4rem}
.finder h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin-bottom:.35rem}
.finder .chips{margin:.9rem 0 0}
.finder .readout{margin:.9rem 0 0;color:var(--ink-soft);font-weight:400;min-height:1.6em}

/* course cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.course{
  position:relative;background:var(--tl-wash);border:1px solid var(--line);
  border-radius:28px;padding:1.6rem;display:flex;flex-direction:column;
  transition:opacity .35s,transform .3s,border-color .3s;
}
.course:hover{transform:translateY(-4px)}
.org{margin-bottom:.35rem;font-weight:600}
/* provider mark, top of each card (copies of each organisation's own logo) */
.card-logo{margin:0 0 1.1rem;min-height:2rem;display:flex;align-items:center}
.card-logo img{height:2rem;width:auto;display:block}
.course .card-logo{margin-bottom:.9rem}
.course h3{margin-bottom:.6rem}
.course .links{margin-top:auto;padding-top:.6rem}
.course .fine{margin-top:.6rem}
.course.suggest{border-style:dashed;background:transparent;justify-content:center}
.dim{opacity:.32}
.match::after{
  content:"Good match";position:absolute;top:1rem;right:1.1rem;
  font-size:.78rem;font-weight:700;padding:.15rem .7rem;border-radius:999px;
  background:var(--yellow);color:#3a2f12;
}
@media (max-width:980px){.grid{grid-template-columns:1fr}}

/* after the course */
.cols-end{align-items:end}
.cols-end h2{margin:0}
.cols-end .lead{margin:0}
.trail{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;position:relative;margin-top:2.4rem}
.trail::before{content:"";position:absolute;left:8%;right:8%;top:14px;border-top:3px dashed var(--line)}
.step{position:relative;padding-top:2.6rem}
.step i{position:absolute;top:0;left:0;width:30px;height:30px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 6px rgba(223,197,125,.3)}
.step h3{font-size:1.2rem}
.step p{margin:0 0 .6rem}
@media (max-width:760px){
  .trail{grid-template-columns:1fr}
  .trail::before{left:14px;right:auto;top:8px;bottom:8px;border-top:0;border-left:3px dashed var(--line)}
  .step{padding:0 0 1.4rem 3.2rem}
  .step i{top:0}
}

/* ---------- narrow screens ---------- */
@media (max-width:760px){
  .tl-hero{padding-top:clamp(2rem,7vw,3rem);padding-bottom:clamp(1.75rem,6vw,2.5rem)}
  .tl-h1{font-size:clamp(2.1rem,9vw,2.8rem)}
  .tl-lede{max-width:none}
  .feature{border-radius:26px}
  .course{border-radius:22px}
}