/* services-rural-farm-security.css — Rural & Farm Security detail page */

/* ============================================================
   Afrique Du Sud K9 — Rural & Farm Security service detail
   Page-specific styles for /src/pages/services/rural-farm-security.html.
   Tokens, base styles, header/footer chrome, .container,
   .slash-mask, [data-reveal], .mono, .skip-link, .btn-*
   utilities all live in main.css — do not redefine here.
   Mobile-first; widen via @media (min-width: 700px / 1100px).
   Section BEM roots locked by plan:
     .rural-hero / .rural-overview / .rural-challenge /
     .rural-approach / .rural-poaching / .rural-community /
     .rural-experience / .rural-related
   ============================================================ */


/* ============================================================
   #rural-hero — handled by shared .page-hero partial; styles
   live in main.css. No page-specific hero CSS here.
   ============================================================ */


/* ============================================================
   #rural-overview — paper intro band + 3 jump pills
   Intro paragraph followed by a row of 3 box-style pills
   linking to #rural-challenge, #rural-approach, #rural-poaching.
   Padding-block halved (master ref §4). Pill style is the
   Training canonical box pill — white bg, subtle border,
   orange-border on hover. Stacks 1-col on mobile; flex-wrap row
   from >=700px.
   ============================================================ */
#rural-overview.rural-overview {
  background: var(--paper);
  padding-block: calc(var(--section-y) / 2);
}

.rural-overview__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.rural-overview__intro {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
  line-height: 1.6;
  color: var(--grey-700);
  max-width: 72ch;
  margin: 0 0 2rem;
}

.rural-overview__pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.rural-overview__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-small);
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--radius);
  padding: 0.625rem 1rem;
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease,
              background-color 150ms ease;
}
.rural-overview__pill:hover,
.rural-overview__pill:focus-visible {
  border-color: var(--orange);
  color: var(--ink);
  background: var(--white);
  text-decoration: none;
}


/* ============================================================
   #rural-challenge — white "The rural challenge" band
   h2 + lead + 4 threat items as orange-left-border cards on
   white. Mirrors guarding-exec__list items + surveillance-
   commercial__path cards. 1-col mobile -> 2-col >=700px.
   No `1fr 1fr` (master ref §11) — uses repeat(2, 1fr).
   ============================================================ */
#rural-challenge.rural-challenge {
  background: var(--white);
  padding-block: var(--section-y);
}

.rural-challenge__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.rural-challenge__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-h2);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}

.rural-challenge__lead {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--grey-700);
  max-width: 72ch;
  margin: 0 0 2rem;
}

.rural-challenge__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.rural-challenge__item {
  background: var(--white);
  border-left: 3px solid var(--orange);
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
}

.rural-challenge__heading {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--fs-h3);
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
}

.rural-challenge__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--grey-700);
  margin: 0.5rem 0 0;
}


/* ============================================================
   #rural-approach — paper "Our approach" band
   h2 + lead + full-width slash-masked rural-approach photo
   above a 6-tile grid. Mirrors tactical-provide pattern:
   auto-fit minmax(280px, 1fr) -> naturally goes 1->2->3 col
   across the breakpoints. Each tile: white bg, subtle 1px
   border + 3px orange left rule, h3 + body + red mono "Learn
   more" link that nudges + recolours on hover.
   ============================================================ */
#rural-approach.rural-approach {
  background: var(--paper);
  padding-block: var(--section-y);
}

.rural-approach__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.rural-approach__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-h2);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}

.rural-approach__lead {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--grey-700);
  max-width: 72ch;
  margin: 0 0 2rem;
}

.rural-approach__media {
  width: 100%;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.rural-approach__media picture,
.rural-approach__media picture > img {
  width: 100%;
  display: block;
}
.rural-approach__media picture > img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.rural-approach__tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.rural-approach__tile {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-top: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.rural-approach__tile:nth-child(even) {
  border-top-color: var(--orange);
}

.rural-approach__heading {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: var(--fs-h3);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

.rural-approach__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--grey-700);
  margin: 0;
}


/* ============================================================
   #rural-poaching — white 2-col image/copy band
   Mirrors guarding-exec: 3:2 slash-masked anti-poaching-
   conservation photo on the left, h2 + body + 2 orange display-
   uppercase links on the right at >=1100px. Stacks photo above
   copy on mobile + tablet. Object-fit: cover so the photo height
   matches the copy column on the desktop grid.
   ============================================================ */
#rural-poaching.rural-poaching {
  background: var(--white);
  padding-block: var(--section-y);
}

.rural-poaching__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.rural-poaching__media {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}
.rural-poaching__media picture,
.rural-poaching__media picture > img {
  width: 100%;
  height: 100%;
  display: block;
}
.rural-poaching__media picture > img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.rural-poaching__copy {
  display: flex;
  flex-direction: column;
}

.rural-poaching__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-h2);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.rural-poaching__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--grey-700);
  margin: 0;
}


/* ============================================================
   #rural-community — paper "Rural community safety" band
   Short text-only band: centered h2 + single paragraph at
   max-width: 800px. Mirrors guarding-armed shape.
   ============================================================ */
#rural-community.rural-community {
  background: var(--paper);
  padding-block: var(--section-y);
}

.rural-community__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.rural-community__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-h2);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 auto 1rem;
  max-width: 800px;
}

.rural-community__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--grey-700);
  max-width: var(--container-max);
  margin: 0 auto;
}


/* ============================================================
   #rural-experience — ink differentiator band (no heading)
   Mirrors guarding-people / k9-callout: centered display-font
   pull-quote on ink, capped at 80vw (NOT a fixed pixel max —
   master ref §11), with an orange display-uppercase "See our
   experience →" link below. Hover swaps the link to white +
   underline. No section heading — the quote IS the message.
   ============================================================ */
#rural-experience.rural-experience {
  background: var(--ink);
  color: var(--white);
  padding-block: var(--section-y);
}

.rural-experience__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}

.rural-experience__quote {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.3;
  color: var(--white);
  max-width: 80vw;
  margin: 0 auto;
  text-align: center;
}

.rural-experience__row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}

.rural-experience__link {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-small);
  color: var(--orange);
  text-decoration: none;
  transition: color 200ms ease;
}
.rural-experience__link:hover,
.rural-experience__link:focus-visible {
  color: var(--white);
  text-decoration: underline;
}


/* ============================================================
   #rural-related — handled by shared .related-services partial;
   styles live in main.css. No page-specific related CSS here.
   ============================================================ */


/* ============================================================
   Breakpoint: >=700px
   Tablet shifts: jump pills flow to a wrapping row; challenge
   list becomes 2-col; approach tiles open up to the auto-fit
   grid (naturally 2-col at this width); related cards become
   2-col.
   ============================================================ */
@media (min-width: 700px) {
  .rural-overview__pills {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .rural-challenge__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }

  .rural-approach__tiles {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1rem, 3vw, 2rem);
  }
}


/* ============================================================
   Breakpoint: >=1100px
   Desktop: approach tiles naturally reflow to 3-up under
   auto-fit; poaching resolves to a 2-col image-left / copy-
   right grid with vertical centering.
   ============================================================ */
@media (min-width: 1100px) {
  .rural-approach__tiles {
    gap: clamp(1.25rem, 3vw, 2rem);
  }

  .rural-poaching__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    align-items: center;
  }
}


/* ============================================================
   Reduced-motion local guards
   (global guard in main.css already disables transitions/anims
   on everything; these are belt-and-braces for the pill border
   swap and the experience link colour swap.)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .rural-overview__pill,
  .rural-experience__link {
    transition: none !important;
    transform: none !important;
  }
}