/**
 * Single Post — agriculture layout.
 *
 * Presentation for the soapKit "Single Post" theme-builder layout. The layout
 * itself is authored as core blocks (see the soapKit → Templates editor), so
 * every selector here hangs off `.svr-single`, the root group of that markup.
 * Nothing in this file leaks onto other templates.
 *
 * Why a stylesheet and not the theme: on this site the single post was served
 * by the block theme's own `templates/single.html`, which is a stack of the
 * default post blocks. A soapKit Single Post template replaces that document
 * entirely (see `templates/single-wrapper.php`), so the theme's typography and
 * spacing rules for single posts no longer apply and have to be restated here.
 *
 * Two structural facts worth knowing before editing:
 *
 * 1. `.svr-single` is NOT inside `.wp-site-blocks` — the wrapper writes its own
 *    `<body>`/`#page`. There is therefore no theme "wide" or "content" width to
 *    inherit; every width below is stated explicitly.
 * 2. The hero and the closing CTA are full-bleed bands, while the article body
 *    is narrow. That is done with two widths (`.svr-gutter` and `--svr-content`)
 *    rather than by nesting, so a band can be added anywhere without re-indenting
 *    the block markup.
 */

.soapkit-template--single {
  /* Full-bleed: the wrapper is a plain block in #page, not a centred column. */
  width: 100%;
}

.svr-single {
  /* ---- Palette (mirrors the site's agriculture tokens) ---- */
  --svr-deep: #021d11;        /* hero / CTA band                */
  --svr-primary: #092210;     /* headings                       */
  --svr-secondary: #144b24;   /* links, accents on light        */
  --svr-accent: #e28f3c;      /* eyebrow, pull-quote rule       */
  --svr-text: #2b2b2b;        /* body copy                      */
  --svr-muted: #5a6b5a;       /* meta, captions                 */
  --svr-cream: #faf7f0;       /* button face on dark            */
  --svr-panel: #f4f1e6;       /* author card                    */
  --svr-tag-bg: #eaf3de;      /* pill tags                      */
  --svr-line: rgba(9, 34, 16, 0.12);

  /* ---- Metrics ---- */
  --svr-content: 720px;       /* article measure                */
  --svr-wide: 1120px;         /* image / band inner width       */
  --svr-radius: 20px;
  --svr-radius-sm: 12px;

  /* Mobile-first gutter: 100% - 2rem, 1rem each side. Widens at 48em. */
  --svr-gutter: calc(100% - 2rem);
  --svr-gutter-pad: 1rem;

  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: var(--svr-text);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 48em) {
  .svr-single {
    --svr-gutter: calc(100% - 2.5rem);
    --svr-gutter-pad: 1.25rem;
  }
}

/* The block theme's own single-post rules were dropped along with its template,
   so neutralise the two core defaults that would otherwise fight the bands. */
.svr-single .wp-block-group {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.svr-single .svr-single__hero {
  background-color: var(--svr-deep);
  background-image:
    radial-gradient(120% 140% at 12% 0%, rgba(20, 75, 36, 0.55) 0%, rgba(2, 29, 17, 0) 62%),
    radial-gradient(90% 120% at 100% 100%, rgba(226, 143, 60, 0.16) 0%, rgba(2, 29, 17, 0) 60%);
  color: var(--svr-cream);
  padding-block: clamp(3.25rem, 8vw, 6.5rem) clamp(5.5rem, 11vw, 9rem);
  overflow: hidden;
}

.svr-single .svr-single__hero-inner {
  width: var(--svr-gutter);
  max-width: var(--svr-wide);
  margin-inline: auto;
}

.svr-single .svr-single__eyebrow {
  display: block;
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--svr-accent);
}

.svr-single .svr-single__eyebrow a,
.svr-single .svr-single__eyebrow a:visited {
  color: inherit;
  text-decoration: none;
}

.svr-single .svr-single__eyebrow a:hover,
.svr-single .svr-single__eyebrow a:focus {
  color: var(--svr-cream);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* core/post-terms prints a bare `<a>` per term; comma-separate them by hand
   because the block's own separator is a plain string, not a style hook. */
.svr-single .svr-single__eyebrow a + a::before {
  content: ", ";
}

.svr-single .svr-single__title,
.svr-single .svr-single__title a {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.95rem, 4.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #ffffff;
  text-wrap: balance;
  text-decoration: none;
}

.svr-single .svr-single__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-block-start: clamp(1.25rem, 3vw, 1.9rem);
  font-size: 0.9375rem;
  color: rgba(250, 247, 240, 0.72);
}

.svr-single .svr-single__meta-item {
  margin: 0;
  font-size: inherit;
  line-height: 1.5;
  color: inherit;
}

.svr-single .svr-single__meta-item a,
.svr-single .svr-single__meta-item a:visited {
  color: inherit;
  text-decoration: none;
}

.svr-single .svr-single__meta-item a:hover,
.svr-single .svr-single__meta-item a:focus {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.svr-single .svr-single__meta-item + .svr-single__meta-item::before {
  content: "\00b7";
  margin-inline: 0.7rem;
  color: rgba(250, 247, 240, 0.4);
}

/* ==========================================================================
   Featured image — overlaps the hero band
   ========================================================================== */

.svr-single .svr-single__figure {
  position: relative;
  z-index: 2;
  width: var(--svr-gutter);
  max-width: var(--svr-wide);
  margin-inline: auto;
  /* Pulled up into the hero. The hero carries matching extra bottom padding so
     the band still clears the image on posts that have no thumbnail. */
  margin-block-start: clamp(-9rem, -7vw, -4rem);
}

.svr-single .svr-single__figure img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--svr-radius);
  box-shadow: 0 24px 60px rgba(2, 29, 17, 0.18);
}

/* The block's own aspect-ratio wrapper (when aspectRatio is set) must not
   collapse the radius or the shadow. */
.svr-single .svr-single__figure .wp-block-post-featured-image__container,
.svr-single .svr-single__figure a {
  display: block;
  border-radius: var(--svr-radius);
  overflow: hidden;
}

/* ==========================================================================
   Article body
   ========================================================================== */

.svr-single .svr-single__body {
  width: var(--svr-gutter);
  max-width: var(--svr-content);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
}

/* core/post-content prints `<div class="entry-content">`; the block's own
   constrained layout would cap it at the theme's contentSize, which no longer
   exists here, so state the measure explicitly. Specificity (0,2,0) beats
   core's `:where()`-wrapped constrained rule. */
.svr-single .svr-single__body .entry-content,
.svr-single .svr-single__body .wp-block-post-content {
  max-width: 100%;
  margin-inline: 0;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--svr-text);
}

.svr-single .svr-single__body .entry-content > * {
  max-width: 100%;
}

.svr-single .svr-single__body .entry-content > :first-child {
  margin-block-start: 0;
}

.svr-single .svr-single__body .entry-content h2,
.svr-single .svr-single__body .entry-content h3,
.svr-single .svr-single__body .entry-content h4 {
  color: var(--svr-primary);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.svr-single .svr-single__body .entry-content h2 {
  margin-block: 2.4em 0.7em;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
}

.svr-single .svr-single__body .entry-content h3 {
  margin-block: 2em 0.6em;
  font-size: clamp(1.25rem, 2vw, 1.45rem);
}

.svr-single .svr-single__body .entry-content p {
  margin-block: 0 1.4em;
}

.svr-single .svr-single__body .entry-content a,
.svr-single .svr-single__body .entry-content a:visited {
  color: var(--svr-secondary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.svr-single .svr-single__body .entry-content a:hover,
.svr-single .svr-single__body .entry-content a:focus {
  color: var(--svr-accent);
}

.svr-single .svr-single__body .entry-content ul,
.svr-single .svr-single__body .entry-content ol {
  margin-block: 0 1.4em;
  padding-inline-start: 1.4em;
}

.svr-single .svr-single__body .entry-content li {
  margin-block-end: 0.5em;
}

.svr-single .svr-single__body .entry-content img {
  border-radius: var(--svr-radius-sm);
  height: auto;
}

.svr-single .svr-single__body .entry-content figcaption {
  margin-block-start: 0.6em;
  font-size: 0.875rem;
  color: var(--svr-muted);
}

/* Pull-quote: an orange rule instead of the block's default italic slab. */
.svr-single .svr-single__body .entry-content blockquote,
.svr-single .svr-single__body .entry-content .wp-block-quote {
  margin-block: 2.2em;
  padding: 0.15em 0 0.15em 1.4em;
  border: 0;
  border-inline-start: 3px solid var(--svr-accent);
  background: none;
  font-size: clamp(1.15rem, 2.1vw, 1.35rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--svr-muted);
}

.svr-single .svr-single__body .entry-content blockquote cite,
.svr-single .svr-single__body .entry-content .wp-block-quote cite {
  display: block;
  margin-block-start: 0.8em;
  font-size: 0.875rem;
  font-style: normal;
  color: var(--svr-primary);
}

.svr-single .svr-single__body .entry-content hr,
.svr-single .svr-single__body .entry-content .wp-block-separator {
  margin-block: 2.6em;
  border: 0;
  border-block-start: 1px solid var(--svr-line);
  background: none;
}

/* ==========================================================================
   Pill tags
   ========================================================================== */

.svr-single .svr-single__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: clamp(2rem, 4vw, 2.75rem);
  padding-block-start: clamp(1.5rem, 3vw, 2rem);
  border-block-start: 1px solid var(--svr-line);
  font-size: 0.8125rem;
}

.svr-single .svr-single__tags a,
.svr-single .svr-single__tags a:visited {
  display: inline-block;
  padding: 0.4em 0.95em;
  border-radius: 999px;
  background-color: var(--svr-tag-bg);
  color: var(--svr-primary);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.svr-single .svr-single__tags a:hover,
.svr-single .svr-single__tags a:focus {
  background-color: var(--svr-secondary);
  color: var(--svr-cream);
}

/* ==========================================================================
   Author card
   ========================================================================== */

.svr-single .svr-single__author {
  width: var(--svr-gutter);
  max-width: var(--svr-content);
  margin-inline: auto;
  margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
}

/* A flex row so the stand-in note can sit beside the byline and drop itself
   once the author has a real bio (see the :has() rule below). */
.svr-single .svr-single__author-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--svr-radius);
  background-color: var(--svr-panel);
}

.svr-single .svr-single__author-block {
  flex: 1 1 260px;
  margin: 0;
}

.svr-single .svr-single__author-note {
  flex: 1 1 220px;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--svr-muted);
}

/* On this site no author has a biography, so `core/post-author` with showBio
   renders a name and nothing else and the card reads as unfinished. The note
   stands in — and removes itself the moment a bio exists, so nothing has to be
   edited later. */
.svr-single .svr-single__author-card:has(.wp-block-post-author__bio) .svr-single__author-note {
  display: none;
}

.svr-single .svr-single__author-card .wp-block-post-author__avatar {
  flex: 0 0 auto;
  margin: 0;
}

.svr-single .svr-single__author-card .wp-block-post-author__avatar img {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.svr-single .svr-single__author-card .wp-block-post-author__content {
  flex: 1 1 auto;
  min-width: 0;
}

.svr-single .svr-single__author-card .wp-block-post-author__name {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--svr-primary);
}

.svr-single .svr-single__author-card .wp-block-post-author__name a,
.svr-single .svr-single__author-card .wp-block-post-author__name a:visited {
  color: inherit;
  text-decoration: none;
}

.svr-single .svr-single__author-card .wp-block-post-author__bio {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--svr-muted);
}

/* ==========================================================================
   Latest from the field
   ========================================================================== */

.svr-single .svr-single__related {
  width: var(--svr-gutter);
  max-width: var(--svr-wide);
  margin-inline: auto;
  padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 5vw, 4rem);
}

.svr-single .svr-single__related-title {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  padding: 0;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--svr-primary);
}

/* core/post-template prints `<ul class="wp-block-post-template">`; core resets
   list-style, but the grid gap is ours. */
.svr-single .svr-single__related-query .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.5rem, 3vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.svr-single .svr-single__related-query .wp-block-post-template > li {
  margin: 0;
}

.svr-single .svr-single__card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.svr-single .svr-single__card-figure {
  margin: 0 0 1.1rem;
}

.svr-single .svr-single__card-figure img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--svr-radius-sm);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.svr-single .svr-single__card:hover .svr-single__card-figure img {
  transform: scale(1.03);
}

.svr-single .svr-single__card-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--svr-accent);
}

.svr-single .svr-single__card-eyebrow a,
.svr-single .svr-single__card-eyebrow a:visited {
  color: inherit;
  text-decoration: none;
}

.svr-single .svr-single__card-title,
.svr-single .svr-single__card-title a,
.svr-single .svr-single__card-title a:visited {
  margin: 0 0 0.6rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--svr-primary);
  text-decoration: none;
  text-wrap: pretty;
}

.svr-single .svr-single__card-title a:hover,
.svr-single .svr-single__card-title a:focus {
  color: var(--svr-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.svr-single .svr-single__card-date {
  margin-block-start: auto;
  font-size: 0.8125rem;
  color: var(--svr-muted);
}

/* ==========================================================================
   Closing call to action
   ========================================================================== */

.svr-single .svr-single__cta {
  width: var(--svr-gutter);
  max-width: var(--svr-wide);
  margin-inline: auto;
  margin-block-end: clamp(3rem, 7vw, 5.5rem);
  padding: clamp(2rem, 5vw, 3.25rem);
  border-radius: 24px;
  background-color: var(--svr-deep);
  background-image: radial-gradient(
    110% 150% at 88% 0%,
    rgba(20, 75, 36, 0.6) 0%,
    rgba(2, 29, 17, 0) 60%
  );
  color: var(--svr-cream);
}

.svr-single .svr-single__cta-title {
  margin: 0 0 0.75rem;
  padding: 0;
  max-width: 26ch;
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-wrap: balance;
}

.svr-single .svr-single__cta-text {
  margin: 0 0 1.6rem;
  max-width: 48ch;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(250, 247, 240, 0.78);
}

.svr-single .svr-single__cta .wp-block-button__link {
  display: inline-block;
  padding: 0.85em 1.75em;
  border-radius: 999px;
  background-color: var(--svr-cream);
  color: var(--svr-primary);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.svr-single .svr-single__cta .wp-block-button__link:hover,
.svr-single .svr-single__cta .wp-block-button__link:focus {
  background-color: var(--svr-accent);
  color: #ffffff;
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 47.99em) {
  .svr-single .svr-single__title {
    max-width: none;
  }

  .svr-single .svr-single__figure {
    margin-block-start: -2.75rem;
  }

  .svr-single .svr-single__author-card {
    flex-direction: column;
    gap: 0.9rem;
  }

  /* `flex-basis` follows the main axis. Once the card stacks, the 260px/220px
     bases below would be read as HEIGHTS and the card would balloon to ~534px,
     so they are reset to the content's own size. */
  .svr-single .svr-single__author-block,
  .svr-single .svr-single__author-note {
    flex-basis: auto;
  }

  .svr-single .svr-single__related-query .wp-block-post-template {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Fallback article (no soapKit layout matched, or it rendered nothing)
   ========================================================================== */

.soapkits-single-fallback {
  width: calc(100% - 2rem);
  max-width: 720px;
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.soapkits-single-fallback__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.15;
  color: var(--svr-primary, #092210);
}

.soapkits-single-fallback__meta {
  margin-block-end: 1.5rem;
  font-size: 0.9375rem;
  color: var(--svr-muted, #5a6b5a);
}

.soapkits-single-fallback__thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

@media (min-width: 48em) {
  .soapkits-single-fallback {
    width: calc(100% - 2.5rem);
  }
}