/* ==========================================================================
   The Sewing Birdie — content pages
   --------------------------------------------------------------------------
   Courses (/courses/, TutorLMS), the single course, Free patterns, Learn
   (blog index and archives), About and Help & contact.
   Mockups: Courses.dc.html, Course.dc.html, Free.dc.html, Learn.dc.html,
            About.dc.html, Help.dc.html.

   This file only ADDS to the shop's component system.  `.tsb-wrap`,
   `.tsb-section`, `.tsb-band`, `.tsb-grid`, `.tsb-btn*`, `.tsb-chip`,
   `.tsb-accordion*`, `.tsb-breadcrumb`, `.tsb-h2`, `.tsb-eyebrow`,
   `.tsb-link-arrow`, `.tsb-page-title`, `.tsb-cover`, `.tsb-card*` and the
   `.tsb-filters*` set all come from base.css and shop.css and are used as
   they are, so the content pages cannot drift from the shop.

   No value is written by hand: every colour, radius, size and distance is a
   token from tokens.css.

   SPACING.  One rule, stated once, because two stacked 96px gaps were a
   reported defect elsewhere in this build: `.tsb-section` supplies the gap
   BETWEEN sections as `margin-top` and nothing else.  A band supplies its own
   gap as `padding-block` and therefore takes no `margin-top`; when a section
   follows a band, that section's `margin-top` is cancelled (the band has
   already paid).  So the distance between two pieces of content is always
   exactly `--sb-section` (96px desktop, 64px mobile) — never 192.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared furniture
   -------------------------------------------------------------------------- */

/* The course archive and the content pages sit in Kadence's `#inner-wrap`,
   which is already a 1240px column with the gutter, exactly as the shop
   archive does — so `.tsb-wrap` must not add the gutter a second time. */
.tsb-content .tsb-wrap {
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   SPACING.  `.tsb-section`'s gap is declared once, in the primitive:
   `base.css` now carries `margin-top: var(--sb-section); padding-block: 0`
   (the foundation agent's central fix, 15 Oct 2026), and this file adds
   nothing to it.

   The rule that used to stand here — `.tsb-content .tsb-section {
   padding-block: 0 }` — was this branch's local workaround while `base.css`
   and `shop.css` each owned half of the doubled 96px gap.  It is deleted, so
   this file no longer carries a second version of the same declaration.

   It was not, however, a no-op: two classes of specificity also made it beat
   `.tsb-c-split { padding-block: 64px 0 }`, and that is what kept the two
   splits that are ALSO sections (the single course's "Your teacher" and
   About's "How a pattern is made") from carrying a margin and a padding at
   once.  Measured with the rule removed and nothing said in its place: those
   two sections each gained 64px (course page 4919 -> 4983 at 1440, 6737 ->
   6801 at 390; About 2312 -> 2376).  Section 7 now states the same thing on
   the split itself, so the rendering is unchanged while the declaration count
   goes from two to one.  A band still carries its own gap as padding —
   `.tsb-c-band` below — because a background needs its gap inside the box.
   -------------------------------------------------------------------------- */

.tsb-c-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block: 56px 0;
}

.tsb-c-hero .tsb-page-title,
.tsb-c-split__copy h1 {
  /* The mockups set the content-page H1 at 64px desktop / 38px mobile, inside
     the design system's 52–72px H1 band. `.tsb-page-title` alone tops out at
     60px, which is the Shop archive's size. */
  font-size: clamp(2.375rem, 4.44vw, 4rem);
}

.tsb-c-hero__intro {
  margin: 0;
  max-width: 620px;
  font-size: 1.125rem;
  color: var(--sb-ink-2);
}

/* A soft band. `margin-top` is the section gap, exactly as for a plain
   section; the padding is the band's own inner breathing room (the mockup's
   72px), so a neighbouring section is never more than one `--sb-section` away
   from the band's edge and nothing is ever doubled. */
.tsb-content .tsb-c-band {
  margin-top: var(--sb-section);
  padding-block: 72px;
  background-color: var(--sb-soft);
}

/* Same for a hero that sits on a coloured band: the copy block keeps the
   band's own padding, so the next section still only adds one gap. */
.tsb-c-band .tsb-c-hero {
  padding-block: 0;
}

.tsb-c-narrow {
  max-width: 820px;
}

.tsb-c-note {
  margin: 20px 0 0;
}

.tsb-c-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.tsb-c-head__intro {
  margin: -16px 0 28px;
  max-width: 620px;
  color: var(--sb-ink-2);
}

/* --------------------------------------------------------------------------
   2. The course card
   --------------------------------------------------------------------------
   Replaces TutorLMS's `.tutor-card`, which rendered a 1448x2048 cover in a
   1120x629 letterbox (see inc/content/course-card.php for the measurements).
   -------------------------------------------------------------------------- */

.tsb-c-coursegrid {
  display: grid;
  /* `auto-fill`, not `auto-fit`: with a single published course, `auto-fit`
     collapses the empty tracks and the one card stretches to the full 1192px
     content width, which would put a 4:5 photo back at 1190x1488 — the same
     oversized-card defect in a new costume. `auto-fill` keeps the 340px tracks
     and the card stays card-sized whatever the catalogue count. */
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tsb-c-card {
  display: flex;
}

.tsb-c-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-band);
  background-color: var(--sb-surface);
  color: var(--sb-ink);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--sb-transition);
}

.tsb-c-card__link:hover,
.tsb-c-card__link:focus {
  border-color: var(--sb-ink);
  color: var(--sb-ink);
}

/* The 4:5 frame. `aspect-ratio` here and `object-fit: cover` on the image is
   what makes the card hold its shape whatever the source file's own ratio is. */
.tsb-c-photo {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  background-color: var(--sb-photo);
}

.tsb-c-photo > img,
.tsb-c-photo > .tsb-photo-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tsb-c-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 24px 24px;
}

.tsb-c-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tsb-c-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--sb-r-chip);
  background-color: var(--sb-chip);
  color: var(--sb-ink);
  font-size: var(--sb-size-caption);
  font-weight: 500;
}

.tsb-c-card__title {
  font-family: var(--sb-font-display);
  font-size: 1.875rem;
  line-height: 1.1;
  color: var(--sb-ink);
}

.tsb-c-card__text {
  color: var(--sb-ink-2);
  font-size: 0.9375rem;
}

.tsb-c-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.tsb-c-card__price {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sb-ink);
}

.tsb-c-card__cta {
  font-weight: 600;
  color: var(--sb-ink);
  /* The whole card is the link, so this only has to look like one. 44px is
     kept for the row so the foot of the card never collapses. `gap` because
     the space between the label and the arrow collapses once this is a flex
     container. */
  min-height: var(--sb-tap);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Same reason: any `.tsb-link-arrow` we render with a trailing arrow. */
.tsb-content .tsb-link-arrow {
  gap: 6px;
}

.tsb-c-card__link:focus-visible {
  outline: 2px solid var(--sb-accent-hover);
  outline-offset: 2px;
}

.tsb-c-pagination {
  margin-top: 28px;
}

/* --------------------------------------------------------------------------
   3. How courses work
   -------------------------------------------------------------------------- */

.tsb-c-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.tsb-c-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border-radius: var(--sb-r-band);
  background-color: var(--sb-surface);
}

.tsb-c-step__n {
  font-family: var(--sb-font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--sb-accent);
}

.tsb-c-step__title {
  font-weight: 600;
  color: var(--sb-ink);
}

.tsb-c-step__text {
  color: var(--sb-ink-2);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   4. Single course
   -------------------------------------------------------------------------- */

.tsb-c-course-hero {
  background-color: var(--sb-ink);
  color: var(--sb-surface);
}

.tsb-c-course-hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  padding-block: 64px;
}

.tsb-c-course-hero__copy {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tsb-c-course-hero .tsb-breadcrumb,
.tsb-c-course-hero .tsb-breadcrumb a {
  padding: 0;
  color: var(--sb-chip);
}

/* The breadcrumb link measured 50x20px — a 20px touch target. `min-height`
   only applies to a flex/inline-flex box, so the box is owned here and the
   negative margin takes the extra height back out of the layout, exactly as
   `.tsb-link-arrow` does in shop.css. */
.tsb-c-course-hero .tsb-breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sb-tap);
  padding-block: 12px;
  margin-block: -12px;
}

.tsb-c-course-hero .tsb-breadcrumb a:hover {
  color: var(--sb-surface);
}

/* WP's own `the_posts_pagination()` markup, which measures 10x22 per page
   number and 37x22 for "Next". */
.tsb-c-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sb-tap);
  min-height: var(--sb-tap);
  text-decoration: none;
}

.tsb-c-pagination .page-numbers.current {
  font-weight: 600;
}

.tsb-c-course-hero__title {
  margin: 0;
  font-family: var(--sb-font-display);
  font-weight: 400;
  font-size: var(--sb-size-h1);
  line-height: var(--sb-leading-tight);
  color: var(--sb-surface);
}

.tsb-c-course-hero__intro {
  margin: 0;
  font-size: 1.125rem;
  color: var(--sb-chip);
}

.tsb-c-course-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tsb-c-course-hero__chips li {
  padding: 6px 14px;
  border: 1px solid var(--sb-muted);
  border-radius: var(--sb-r-chip);
  font-size: var(--sb-size-caption);
  font-weight: 500;
  color: var(--sb-surface);
}

.tsb-c-course-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
}

.tsb-c-course-hero__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--sb-tap);
  color: var(--sb-surface);
  font-weight: 500;
}

.tsb-c-course-hero__link:hover,
.tsb-c-course-hero__link:focus {
  color: var(--sb-surface);
  text-decoration: underline;
}

.tsb-c-course-hero__media {
  flex: 1 1 480px;
  min-width: 0;
}

.tsb-c-course-hero__media .tsb-c-photo {
  border-radius: var(--sb-r-btn);
}

/* On the dark hero the white button must stay white, so the shared accent
   button is not used: white fill, ink text, measured 13.47:1. */
.tsb-c-btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 32px;
  border: 1px solid var(--sb-surface);
  border-radius: var(--sb-r-btn);
  background-color: var(--sb-surface);
  color: var(--sb-ink);
  font-weight: 600;
  text-decoration: none;
}

.tsb-c-btn-light:hover,
.tsb-c-btn-light:focus {
  background-color: var(--sb-chip);
  border-color: var(--sb-chip);
  color: var(--sb-ink);
}

.tsb-c-learn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.tsb-c-learn li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border-radius: var(--sb-r-band);
  background-color: var(--sb-soft);
}

.tsb-c-learn strong {
  font-size: 1.125rem;
  color: var(--sb-ink);
}

.tsb-c-learn span {
  color: var(--sb-ink-2);
}

.tsb-c-styles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.tsb-c-styles li {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tsb-c-styles span {
  font-weight: 600;
  color: var(--sb-ink);
}

.tsb-c-ctaband {
  padding: 56px 32px;
  border-radius: var(--sb-r-band);
  background-color: var(--sb-soft);
  text-align: center;
}

.tsb-c-ctaband h2 {
  margin: 0 0 12px;
}

.tsb-c-ctaband p {
  margin: 0 auto 24px;
  max-width: 520px;
  color: var(--sb-ink-2);
}

.tsb-c-ctaband .tsb-btn {
  min-height: 56px;
  padding-inline: 32px;
}

/* The TutorLMS meta list inside our hero, when a course has one. */
.tsb-c-coursefacts {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--sb-chip);
  font-size: var(--sb-size-small);
}

/* --------------------------------------------------------------------------
   5. Free patterns
   -------------------------------------------------------------------------- */

.tsb-c-freegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 32px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tsb-c-freeupsell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px;
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-band);
}

.tsb-c-freeupsell__copy {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tsb-c-freeupsell__copy h2 {
  margin: 0;
  font-size: clamp(1.75rem, 1.4vw + 1.2rem, 2.125rem);
}

.tsb-c-freeupsell__copy p {
  margin: 0;
  color: var(--sb-ink-2);
}

/* The page's own Klaviyo signup form, restyled to the tokens. The markup
   stays the owner's own `#klaviyo-signup-form` (it must keep working), so
   these rules are element-scoped inside it only. */
.tsb-c-signup {
  margin: 0 auto 2em;
  max-width: 520px;
}

.tsb-c-signup form,
.tsb-c-signup #klaviyo-signup-form {
  text-align: left;
}

/* The stand-in printed in the form's place while no Klaviyo signup is
   connected (inc/content/pages.php, qa round-4 D23). It keeps the form's own
   column and spacing so the section's shape does not change, and carries
   `base.css`'s `.tsb-placeholder` marker — a dashed owner-input note, never a
   red error. `display: block` overrides that marker's `inline-block`. */
.tsb-c-pagebody .tsb-c-signup__pending {
  display: block;
  margin: 0 auto 2em;
  max-width: 520px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   6. Learn — blog index and archives
   -------------------------------------------------------------------------- */

.tsb-c-featured {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--sb-line);
  text-decoration: none;
  color: var(--sb-ink);
}

.tsb-c-featured:hover,
.tsb-c-featured:focus {
  color: var(--sb-ink);
}

.tsb-c-featured__media {
  flex: 1 1 520px;
  min-width: 0;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--sb-r-img);
  background-color: var(--sb-photo);
}

.tsb-c-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tsb-c-featured__copy {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tsb-c-featured__title {
  font-family: var(--sb-font-display);
  font-size: var(--sb-size-h2);
  line-height: 1.1;
  color: var(--sb-ink);
}

.tsb-c-featured__read {
  font-weight: 600;
}

.tsb-c-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tsb-c-post {
  display: flex;
}

.tsb-c-post a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  text-decoration: none;
  color: var(--sb-ink);
}

.tsb-c-post a:hover,
.tsb-c-post a:focus {
  color: var(--sb-ink);
}

.tsb-c-post__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--sb-r-img);
  background-color: var(--sb-photo);
  width: 100%;
}

.tsb-c-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tsb-c-post__topic {
  font-size: var(--sb-size-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sb-muted);
}

.tsb-c-post__title {
  font-family: var(--sb-font-display);
  font-size: 1.625rem;
  line-height: 1.15;
  color: var(--sb-ink);
}

.tsb-c-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tsb-c-video {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: var(--sb-ink);
}

.tsb-c-video:hover,
.tsb-c-video:focus {
  color: var(--sb-ink);
}

.tsb-c-video__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--sb-r-img);
  background-color: var(--sb-photo);
}

.tsb-c-video__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tsb-c-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--sb-surface);
  color: var(--sb-ink);
}

.tsb-c-video__name {
  font-weight: 500;
}

/* A single post: readable column, display headings (07-agent-content-pages §4). */
.tsb-c-postbody {
  max-width: 680px;
  margin-inline: auto;
}

.tsb-c-postbody img {
  height: auto;
  max-width: 100%;
  border-radius: var(--sb-r-img);
}

.tsb-c-postbody h2,
.tsb-c-postbody h3 {
  margin-top: 1.6em;
}

.tsb-c-postmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--sb-muted);
  font-size: var(--sb-size-small);
}

/* --------------------------------------------------------------------------
   7. About
   -------------------------------------------------------------------------- */

/* The split layout: copy beside a photo.
   The 64px top gap belongs to the two uses that are a page's own hero — the
   About hero and the Free patterns hero — which carry no `.tsb-section` of
   their own. A split that IS a section (the single course's "Your teacher",
   About's "How a pattern is made") already gets its gap from the primitive's
   `margin-top`, so it takes no padding here: one source of the rhythm, never
   two. This used to be done from a distance by `.tsb-content .tsb-section {
   padding-block: 0 }` in `1. Shared furniture`; that rule is deleted, so the
   split now says it in its own declaration. Measured before/after below. */
.tsb-c-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}

.tsb-c-split:not(.tsb-section) {
  padding-block: 64px 0;
}

.tsb-c-split__copy {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tsb-c-split__copy p {
  margin: 0;
  font-size: 1.125rem;
  color: var(--sb-ink-2);
}

.tsb-c-split__media {
  flex: 1 1 440px;
  min-width: 0;
}

.tsb-c-split__media .tsb-c-photo {
  border-radius: var(--sb-r-img);
}

.tsb-c-believe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.tsb-c-believe li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border-radius: var(--sb-r-band);
  background-color: var(--sb-soft);
}

.tsb-c-believe strong {
  font-size: 1.125rem;
  color: var(--sb-ink);
}

.tsb-c-believe span {
  color: var(--sb-ink-2);
}

/* The About hero's own strapline — "The sewing pattern designer and creator
   behind The Sewing Birdie." — the live page's H1 strapline, kept as a lead
   line under our H1. Two classes so it beats `.tsb-c-split__copy p`'s size. */
.tsb-c-split__copy .tsb-c-lead {
  margin: 0;
  font-size: 1.25rem;
  color: var(--sb-ink);
}

/* A photograph's own caption, exactly as it reads on the live /about/ page. */
.tsb-c-caption {
  margin: 12px 0 0;
  font-size: var(--sb-size-small);
  color: var(--sb-muted);
}

/* The real belief statement that introduces the three cards. */
.tsb-c-intro {
  margin: 16px 0 0;
  max-width: 760px;
  font-size: 1.125rem;
  color: var(--sb-ink-2);
}

/* A sub-heading inside a split's copy column — the live page's own
   "What you get with every pattern". */
.tsb-c-subhead {
  margin: 8px 0 0;
  font-family: var(--sb-font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--sb-ink);
}

/* The "What you get with every pattern" list, taken from the live page. */
.tsb-c-list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 1.125rem;
  color: var(--sb-ink-2);
}

.tsb-c-photogrid {
  /* A flex child of `.tsb-c-split` with no basis collapses to zero width, which
     measured 0x0 on first render. */
  flex: 1 1 440px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tsb-c-photogrid .tsb-c-photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--sb-r-img);
}

/* The Free patterns hero photo is 4:3 in the mockup; a 4:5 frame next to the
   copy made the band 923px tall on desktop. */
.tsb-c-split__media--wide .tsb-c-photo {
  aspect-ratio: 4 / 3;
}

.tsb-c-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   8. Help & contact
   -------------------------------------------------------------------------- */

.tsb-c-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 620px;
  margin-top: 8px;
  padding: 0 14px;
  min-height: 54px;
  border: 1px solid var(--sb-line-input);
  border-radius: var(--sb-r-btn);
  background-color: var(--sb-surface);
  color: var(--sb-muted);
}

.tsb-c-search input[type='search'] {
  flex: 1;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
}

.tsb-c-search input[type='search']:focus {
  outline: none;
}

.tsb-c-search:focus-within {
  outline: 2px solid var(--sb-accent-hover);
  outline-offset: 2px;
}

.tsb-c-topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.tsb-c-topic {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: var(--sb-tap);
  padding: 22px;
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-band);
  background-color: var(--sb-surface);
  text-decoration: none;
  color: var(--sb-ink);
}

.tsb-c-topic:hover,
.tsb-c-topic:focus {
  border-color: var(--sb-ink);
  color: var(--sb-ink);
}

.tsb-c-topic__title {
  font-weight: 600;
}

.tsb-c-topic__text {
  font-size: var(--sb-size-small);
  color: var(--sb-muted);
}

.tsb-c-helpgrid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 56px;
  margin-top: var(--sb-section);
}

.tsb-c-helpfaq {
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.tsb-c-helpfaq h2 {
  margin: 0 0 8px;
  font-size: 2rem;
}

.tsb-c-contact {
  position: sticky;
  top: 24px;
  flex: 1 1 340px;
  min-width: 0;
  padding: 28px;
  border-radius: var(--sb-r-band);
  background-color: var(--sb-soft);
}

.tsb-c-signature {
  margin: 0;
  font-family: var(--sb-font-display);
  font-size: 1.25rem;
  color: var(--sb-ink);
}

.tsb-c-contact h2 {
  margin: 0 0 8px;
  font-size: 2rem;
}

.tsb-c-contact p {
  margin: 0 0 16px;
  color: var(--sb-ink-2);
  font-size: var(--sb-size-small);
}

.tsb-c-field {
  display: block;
  margin-bottom: 14px;
  font-size: var(--sb-size-small);
  font-weight: 500;
  color: var(--sb-ink);
}

.tsb-c-field input,
.tsb-c-field select,
.tsb-c-field textarea {
  margin-top: 6px;
}

.tsb-c-field textarea {
  min-height: 120px;
  resize: vertical;
}

.tsb-c-contact .tsb-btn {
  width: 100%;
  min-height: 50px;
}

/* Fluent Forms' own submit button measured 150x42 — two pixels under the
   44px minimum, so it is owned here rather than left to the plugin. */
.tsb-c-contact .ff-btn,
.tsb-c-contact .ff-btn-submit {
  min-height: var(--sb-tap);
  width: 100%;
  font-weight: 600;
}

/* The plugin's fields, to the design tokens. */
.tsb-c-contact .ff-el-input--content input,
.tsb-c-contact .ff-el-input--content select,
.tsb-c-contact .ff-el-input--content textarea {
  width: 100%;
}

.tsb-c-contact .ff-el-input--label label,
.tsb-c-contact .ff-el-input--label {
  font-size: var(--sb-size-small);
  font-weight: 500;
  color: var(--sb-ink);
}

.tsb-c-contact .ff-el-form-control {
  background-color: var(--sb-surface);
  border: 1px solid var(--sb-line-input);
  border-radius: var(--sb-r-btn);
  color: var(--sb-ink);
  min-height: 48px;
  padding: 0 14px;
}

.tsb-c-contact textarea.ff-el-form-control {
  padding: 12px 14px;
  resize: vertical;
}

.tsb-c-contact__note {
  margin: 12px 0 0;
  font-size: var(--sb-size-caption);
  color: var(--sb-muted);
}

.tsb-c-empty {
  padding: 24px;
  border: 1px dashed var(--sb-line-input);
  border-radius: var(--sb-r-band);
  color: var(--sb-muted);
}

/* Hidden by the FAQ filter below; `.is-hidden` is applied from content.js. */
.tsb-c-hide {
  display: none !important;
}

/* --------------------------------------------------------------------------
   8b. The owner's own block content on Free patterns
   --------------------------------------------------------------------------
   /free-downloads/ keeps page 730's own blocks, so some of its colours predate
   the redesign. axe-core 4.14.0, measured on the live page, found three
   failures that all live in that content — corrected here rather than in the
   page record, which stays untouched:

     #klaviyo-signup-form button[type=submit]
        inline style background rgb(193,127,89) = #C17F59 with white text
        -> 3.26:1
     .has-palette2-background-color.has-palette5-color
        ("Get the 90s A-Line Skirt — €6.50")
        rgb(107,101,96) on rgb(168,101,63)                -> 1.22:1
     .wp-block-button.is-style-outline .wp-block-button__link
        ("Browse all patterns")
        rgb(193,127,89) on the soft band                   -> ~4.0:1

   `!important` is the only way to override a style="" attribute, and here that
   is the point: the block markup is the owner's and is not modified.
   -------------------------------------------------------------------------- */

.tsb-c-pagebody #klaviyo-signup-form button[type='submit'],
.tsb-c-pagebody #klaviyo-instant-downloads a {
  background-color: var(--sb-accent-strong) !important;
  border-color: var(--sb-accent-strong) !important;
  color: var(--sb-surface) !important;
}

.tsb-c-pagebody #klaviyo-signup-form button[type='submit']:hover,
.tsb-c-pagebody #klaviyo-instant-downloads a:hover {
  background-color: var(--sb-accent-hover) !important;
  border-color: var(--sb-accent-hover) !important;
}

.tsb-c-pagebody .has-palette2-background-color.has-palette5-color,
.tsb-c-pagebody .has-palette2-background-color.has-palette5-color:hover,
.tsb-c-pagebody .has-palette2-background-color.has-palette5-color:focus {
  color: var(--sb-surface) !important;
}

.tsb-c-pagebody .wp-block-button.is-style-outline .wp-block-button__link,
.tsb-c-pagebody .wp-block-button.is-style-outline .wp-block-button__link:hover,
.tsb-c-pagebody .wp-block-button.is-style-outline .wp-block-button__link:focus {
  background-color: var(--sb-surface) !important;
  border: 1px solid var(--sb-ink) !important;
  color: var(--sb-ink) !important;
}

/* --------------------------------------------------------------------------
   9. Bits the templates above need that the shop never had
   -------------------------------------------------------------------------- */

.tsb-c-split__meta {
  margin: 0;
  color: var(--sb-muted);
  font-size: var(--sb-size-small);
}

/* The Free patterns page's own block content, inside our wrapper. */
.tsb-c-pagebody {
  display: flex;
  flex-direction: column;
}

.tsb-c-faqgroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The FAQ filter sets `hidden`; these make sure it wins over our display rules. */
.tsb-c-faqgroup[hidden],
.tsb-accordion[hidden] {
  display: none;
}

.tsb-c-curric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
}

.tsb-c-curric__count {
  margin-left: auto;
  padding-left: 16px;
  font-weight: 400;
  font-size: var(--sb-size-small);
  color: var(--sb-muted);
}

.tsb-accordion__summary .tsb-accordion__sign {
  margin-left: 16px;
}

.tsb-c-curric__total {
  margin: 16px 0 0;
  font-size: var(--sb-size-small);
  color: var(--sb-muted);
}

/* TutorLMS's entry box, dropped into our page. Kept narrow so the buy button
   does not stretch across a 1240px column. */
.tsb-c-enrolbox {
  max-width: 560px;
}

.tsb-c-article__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-block: 40px 24px;
}

.tsb-c-article__media {
  margin-bottom: 32px;
}

.tsb-c-article__media img {
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: cover;
  border-radius: var(--sb-r-img);
}

.tsb-c-pending {
  display: block;
  margin: 0 0 12px;
}

/* --------------------------------------------------------------------------
   11. TutorLMS controls on the pages this module renders
   --------------------------------------------------------------------------
   THE CONTRAST TRAP, caught by axe rather than by eye.
   Measured on /courses/bustier-dress-sewing-course-master-3-stunning-styles/,
   before this rule:
       button.tutor-btn.tutor-btn-primary.tutor-btn-lg
         background rgb(193,127,89)  = --sb-accent  (#C17F59)
         color      rgb(255,255,255) = white
         -> 3.26:1, under the 4.5:1 the brief requires
   Kadence maps --global-palette1 (our --sb-accent, the DECORATIVE token) onto
   TutorLMS's own `.tutor-btn-primary`, and that rule outranks a single-class
   child-theme rule — the same trap already documented for
   `.woocommerce button.button.alt`.
   Fixed with a three-class selector so it actually wins, and with the tokens
   that carry white text: --sb-accent-strong 4.57:1, --sb-accent-hover 5.88:1.
   -------------------------------------------------------------------------- */

.tsb-content .tutor-btn-primary,
.tsb-content .tutor-btn-lg.tutor-btn-primary,
.tsb-content .tutor-btn-block.tutor-btn-primary {
  background-color: var(--sb-accent-strong);
  border-color: var(--sb-accent-strong);
  color: var(--sb-surface);
  min-height: var(--sb-tap);
}

.tsb-content .tutor-btn-primary:hover,
.tsb-content .tutor-btn-primary:focus,
.tsb-content .tutor-btn-primary:active {
  background-color: var(--sb-accent-hover);
  border-color: var(--sb-accent-hover);
  color: var(--sb-surface);
}

/* TutorLMS's own accent text: rgb(193,127,89) measures 4.38:1 on white, i.e.
   just under the line, and its secondary grey is only a touch better. */
.tsb-content .tutor-btn-link,
.tsb-content .tutor-btn-ghost,
.tsb-content .tutor-iconic-btn {
  color: var(--sb-muted);
}

.tsb-content .tutor-btn-link:hover,
.tsb-content .tutor-btn-link:focus,
.tsb-content .tutor-btn-ghost:hover,
.tsb-content .tutor-btn-ghost:focus {
  color: var(--sb-ink);
}

/* The entry box: TutorLMS's `.tutor-card`, to the design tokens. */
.tsb-content .tsb-c-enrolbox .tutor-card {
  padding: 24px;
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-band);
  background-color: var(--sb-surface);
}

.tsb-content .tutor-course-single-pricing {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--sb-ink);
}

.tsb-content .tsb-c-enrolbox .tutor-card-footer .tutor-ul {
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--sb-line);
  list-style: none;
  color: var(--sb-ink-2);
  font-size: var(--sb-size-small);
}

.tsb-content .tsb-c-enrolbox .tutor-card-footer li {
  display: flex;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   12. Small screens — the same rhythm, one step down
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .tsb-c-split,
  .tsb-c-helpgrid {
    gap: 32px;
  }
}

@media (max-width: 767px) {
  .tsb-c-hero {
    padding-block: 32px 0;
  }

  .tsb-content .tsb-c-band {
    padding-block: 48px;
  }

  .tsb-c-course-hero__inner {
    gap: 28px;
    padding-block: 40px;
  }

  .tsb-c-card__body {
    padding: 18px 20px 20px;
  }

  .tsb-c-ctaband {
    padding: 32px 20px;
  }

  .tsb-c-freeupsell {
    padding: 24px 20px;
  }

  .tsb-c-coursegrid {
    grid-template-columns: 1fr;
  }

  .tsb-c-photogrid {
    gap: 8px;
  }
}