/* ==========================================================================
   Lab IV - build-introduced components

   Small additions the static-site generator needs that were flagged as build
   TODOs in the design system: the mobile nav (style-guide section 8), the
   Service "other ways to work together" block, a CSS-only testimonials
   "show more", the case-study facet tags, and the branded /book embed.
   All use the design tokens; no new colours or fonts. Loaded after styles.css.
   ========================================================================== */

/* ---- Mobile nav (CSS-only disclosure, no JS) --------------------------- */
.nav__burger {
  display: none;
  cursor: pointer;
  padding: var(--space-2);
  margin: calc(-1 * var(--space-2));
  color: var(--color-text);
}
.nav__burger svg { width: 1.5rem; height: 1.5rem; display: block; }
.nav__burger .nav__close { display: none; }
.nav__toggle:checked ~ .nav__burger .nav__open { display: none; }
.nav__toggle:checked ~ .nav__burger .nav__close { display: block; }

@media (max-width: 760px) {
  .nav__burger { display: block; }
  .nav { position: relative; }
  .nav__toggle:checked ~ .nav__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5, 1.25rem);
    position: absolute;
    top: 5rem;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: var(--border-hairline);
    box-shadow: var(--shadow-md);
    padding: var(--space-6) var(--gutter) var(--space-8);
  }
  .nav__toggle:checked ~ .nav__links a { font-size: var(--text-lead); }
  .nav__toggle:checked ~ .nav__links .btn { margin-top: var(--space-2); }
}

/* ---- Service: secondary offers ----------------------------------------- */
.secondary { margin-top: var(--space-12); }
.secondary__head {
  padding-top: var(--space-6);
  border-top: 2px solid var(--color-text);
  margin-bottom: var(--space-8);
}
.secondary__head h3 { font-size: var(--text-h3); }
.offer h4 { font-size: var(--text-body); margin-bottom: var(--space-2); }
.offer p { color: var(--color-muted); font-size: var(--text-small); }

/* ---- Testimonials: CSS-only "show more" -------------------------------- */
.testimonials-extra { display: none; margin-top: var(--space-8); }
.tmore-toggle:checked ~ .testimonials-extra { display: grid; }
.tmore-wrap { display: flex; justify-content: center; margin-top: var(--space-8); }
.tmore-toggle:checked ~ .tmore-wrap { display: none; }
.testimonial__avatar { object-fit: cover; }
.testimonial__avatar--img { background: var(--color-surface); }

/* ---- "See all" inline link --------------------------------------------- */
.cases-all { margin-top: var(--space-8); font-weight: var(--weight-semibold); }

/* ---- Facet tag list (case-study detail) -------------------------------- */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin-top: var(--space-6); }
.tag-list a {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-muted);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.7rem;
}
.tag-list a:hover { border-color: var(--color-text); color: var(--color-text); }

/* ---- Branded booking embed (/book) ------------------------------------- */
.book-frame {
  width: 100%;
  height: clamp(40rem, 80vh, 56rem);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.book-fallback { margin-top: var(--space-6); color: var(--color-muted); font-size: var(--text-small); }

/* ---- Blog: real poster image on a card link ---------------------------- */
.bcard__media img { z-index: 0; }

/* ---- Skip link (a11y) -------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-accent);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }