@charset "UTF-8";
/* ===================================================================
   Experience guides — routes between the `activity` taxonomy and the
   eighteen long-form articles written about it.

   WHY THIS IS A SEPARATE FILE
   ---------------------------
   discover.css is shared: /experiences/ and /journal/ both enqueue it.
   Nothing that belongs to the guide library may go in there, because a
   change made for one page would silently land on the other. Everything
   here is additive and namespaced, and only ever loads on the three
   surfaces that carry a guide link (see inc/routes.php):
     /experiences/, /activity/<term>/, and a bound article itself.

   Tokens are the theme's own (style.css :root + ds.css --oh-*). No new
   colour is invented here.
   =================================================================== */

/* ------------------------------------------------------------------
   1. The "Read the guide" row on an experience card
   ------------------------------------------------------------------
   The row sits on .oh-card__actions, which ds.css already lifts to
   z-index 2 — without it the stretched .oh-card__title a::after would
   cover this link and swallow every click, with nothing wrong in the
   markup to show for it.
   ------------------------------------------------------------------ */
.oh-exp-m-card__guide{
  justify-content:flex-start;
}
.oh-exp-m-guide{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;                 /* tap target, even though it reads as a link */
  font-family:var(--sans);font-weight:600;
  font-size:var(--oh-fs-micro);letter-spacing:.11em;text-transform:uppercase;
  color:var(--green);text-decoration:none;
}
.oh-exp-m-guide svg{
  width:15px;height:15px;flex:none;
  transition:transform var(--oh-dur) var(--oh-ease);
}
.oh-exp-m-guide:hover{color:var(--green-l)}
.oh-exp-m-guide:hover svg{transform:translateX(3px)}
.oh-exp-m-guide:focus-visible{
  outline:none;border-radius:var(--oh-radius-xs);
  box-shadow:var(--oh-focus-ring);
}

/* ------------------------------------------------------------------
   2. The guide library index
   ------------------------------------------------------------------ */
.oh-exp-m-guides{background:var(--cream)}

.oh-exp-m-guides__list{
  list-style:none;margin:var(--oh-s5) 0 0;padding:0;
  display:grid;gap:var(--oh-s3);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}

.oh-exp-m-guide-card{
  display:grid;grid-template-columns:96px minmax(0,1fr);
  align-items:stretch;gap:0;height:100%;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--oh-radius);overflow:hidden;
  text-decoration:none;color:inherit;
  box-shadow:var(--oh-shadow-1);
  transition:box-shadow var(--oh-dur) var(--oh-ease),
             border-color var(--oh-dur) var(--oh-ease),
             transform var(--oh-dur) var(--oh-ease);
}
.oh-exp-m-guide-card:hover{
  box-shadow:var(--oh-shadow-2);border-color:var(--line-2);
  transform:translateY(-2px);
}
.oh-exp-m-guide-card:focus-visible{
  outline:none;box-shadow:var(--oh-focus-ring);
}

.oh-exp-m-guide-card__media{
  position:relative;overflow:hidden;background:var(--tan);
}
.oh-exp-m-guide-card__img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--oh-dur-slow) var(--oh-ease);
}
.oh-exp-m-guide-card:hover .oh-exp-m-guide-card__img{transform:scale(1.06)}
.oh-exp-m-guide-card__img--none{
  display:block;width:100%;height:100%;
  background:linear-gradient(140deg,var(--tan) 0%,var(--card) 100%);
}

.oh-exp-m-guide-card__body{
  display:flex;flex-direction:column;gap:5px;
  padding:var(--oh-s3) var(--oh-s4);min-width:0;
}
.oh-exp-m-guide-card__kick{
  font-family:var(--sans);font-size:var(--oh-fs-eyebrow);font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--green);
}
.oh-exp-m-guide-card__title{
  font-family:var(--serif);font-weight:500;
  font-size:var(--oh-fs-h3);line-height:1.24;color:var(--ink);
  text-wrap:balance;
}
.oh-exp-m-guide-card__n{
  font-family:var(--sans);font-size:var(--oh-fs-sm);color:var(--muted);
  margin-top:auto;padding-top:6px;
}

/* ------------------------------------------------------------------
   3. The guide link on an /activity/<term>/ archive
   ------------------------------------------------------------------
   Rendered by inc/routes.php into the slot the core plugin's
   taxonomy-activity.php already prints (term_description). Styled to
   sit under that header without assuming anything about the plugin's
   own layout.
   ------------------------------------------------------------------ */
.ts-actguide{margin:var(--oh-s3) 0 0}
.ts-actguide__link{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:0 var(--oh-s4);
  border:1px solid var(--ink);border-radius:var(--oh-radius-pill);
  font-family:var(--sans);font-weight:600;
  font-size:var(--oh-fs-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:transparent;text-decoration:none;
  transition:background-color var(--oh-dur) var(--oh-ease),
             color var(--oh-dur) var(--oh-ease);
}
.ts-actguide__link:hover{background:var(--ink);color:var(--cream)}
.ts-actguide__link:focus-visible{outline:none;box-shadow:var(--oh-focus-ring)}

/* ------------------------------------------------------------------
   4. The article's way back out
   ------------------------------------------------------------------
   Appended after the article body by inc/routes.php. The articles are
   the owner's copy and are never edited; this block is render-time only,
   so it must look deliberate without depending on anything inside them.
   ------------------------------------------------------------------ */
.ts-artlinks{
  margin:var(--oh-s6) 0 0;padding:var(--oh-s4);
  background:var(--cream);border:1px solid var(--line);
  border-radius:var(--oh-radius);
  max-width:var(--oh-measure);
}
.ts-artlinks__k{
  margin:0 0 var(--oh-s2);
  font-family:var(--sans);font-size:var(--oh-fs-eyebrow);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.ts-artlinks__list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ts-artlinks__list a{
  display:flex;align-items:center;min-height:44px;
  font-family:var(--sans);font-size:var(--oh-fs-base);
  color:var(--green);text-decoration:none;
}
.ts-artlinks__list a:hover{color:var(--green-l);text-decoration:underline}
.ts-artlinks__list a:focus-visible{
  outline:none;border-radius:var(--oh-radius-xs);box-shadow:var(--oh-focus-ring);
}

/* ------------------------------------------------------------------
   5. Narrow screens
   ------------------------------------------------------------------ */
@media (max-width:560px){
  .oh-exp-m-guides__list{grid-template-columns:minmax(0,1fr)}
  .oh-exp-m-guide-card{grid-template-columns:82px minmax(0,1fr)}
  .oh-exp-m-guide-card__body{padding:var(--oh-s3)}
  .ts-artlinks{padding:var(--oh-s3)}
}

/* ------------------------------------------------------------------
   6. Reduced motion
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .oh-exp-m-guide svg,
  .oh-exp-m-guide-card,
  .oh-exp-m-guide-card__img{transition:none}
  .oh-exp-m-guide-card:hover{transform:none}
  .oh-exp-m-guide-card:hover .oh-exp-m-guide-card__img{transform:none}
  .oh-exp-m-guide:hover svg{transform:none}
}