/*
 * Service grid block (#300)
 *
 * The second shared block shape: a subheader over {heading, text} items in
 * columns, no drawing beside them. Rules are carried across from
 * integrated_advertising.css verbatim -- only the selector names change, from
 * per-page (`integrated-advertising-*`, `channel-*`) to shared
 * (`service-grid-*`).
 *
 * Loaded for every service page by services/show.html.erb, alongside
 * branding_steps.css, so a page gaining a grid block needs no new asset.
 */

/* ============================================
   SECTION
   ============================================ */

.service-grid-section {
  background-color: #2C2C2C; /* Dark charcoal, matching the steps block */
  padding: 96px 60px;
  color: var(--bwp-white, #FFFFFF);
}

/* A grid block directly after a steps block was one <section> in the markup
   this replaces, with an <hr> between the halves inside a shared container.
   As ordered rows they are two siblings, so the seam has to be rebuilt.
   The original spacing was: content, 4rem, divider, 4rem, subheader.
   These three rules reproduce exactly that across the section boundary.

   The divider's margin is zeroed rather than left at 4rem with the section
   padded to 0: a top margin inside a parent with no padding or border escapes
   the parent instead of pushing content down, which showed as a band of page
   background between the two sections. */
.branding-steps-section:has(+ .service-grid-section) {
  padding-bottom: 4rem;
}

.branding-steps-section + .service-grid-section {
  padding-top: 0;
}

.branding-steps-section + .service-grid-section .service-grid-divider {
  margin-top: 0;
}

/* Conversely, the divider only reads as a seam between two blocks. A grid
   block that opens a page has nothing above it to divide from. */
.service-grid-section:first-of-type .service-grid-divider {
  display: none;
}

.service-grid-container {
  max-width: 1200px;
  margin: 0 auto;
}

.service-grid-divider {
  border: none;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  margin: 4rem 0;
}

.service-grid-subheader {
  font-family: var(--heading-font, 'Merriweather', Georgia, serif);
  font-size: 2rem; /* 32px */
  font-weight: 700;
  color: var(--bwp-white, #FFFFFF);
  text-align: left;
  margin-bottom: 3rem;
  line-height: 1.2;
}

/* Aligned to the values this paragraph has always had on the live page (#299).
   It was written speculatively in #300 and never rendered: integrated-advertising's
   grid row has a NULL body, so integrated-marketing is the first page to use it.
   Taking the live values preserves that page exactly and changes nothing else. */
.service-grid-intro {
  font-family: var(--body-font, 'Open Sans', Arial, sans-serif);
  font-size: 1.125rem;
  color: var(--bwp-white, #FFFFFF);
  text-align: left;
  max-width: 900px;
  line-height: 1.8;
  margin: 0 0 3rem 0;
}

.service-grid-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 2rem;
}

.service-grid-item {
  margin-bottom: 0.5rem;
}

.service-grid-item-heading {
  font-family: var(--heading-font, 'Merriweather', Georgia, serif);
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  color: var(--bwp-white, #FFFFFF);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.service-grid-item-text {
  font-family: var(--body-font, 'Open Sans', Arial, sans-serif);
  font-size: 1.125rem; /* 18px */
  color: var(--bwp-white, #FFFFFF);
  opacity: 0.9;
  line-height: 1.7;
  margin: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* The section padding steps down at every breakpoint, matching the steps
   block. Each one has to repeat the adjacency rule: `padding` is shorthand and
   resets padding-top, so a narrower breakpoint would otherwise reopen the seam
   the base rule closed. Missing these two was a real regression caught by the
   mobile screenshot -- the text diff cannot see padding. */

/* Tablet (up to 1199px) */
@media (max-width: 1199px) {
  .service-grid-section {
    padding: 80px 40px;
  }

  .branding-steps-section + .service-grid-section {
    padding-top: 0;
  }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
  .service-grid-section {
    padding: 60px 20px;
  }

  .branding-steps-section + .service-grid-section {
    padding-top: 0;
  }

  /* The seam narrows with the divider. Both halves of the gap were 4rem at
     desktop and are 3rem here, so the padding standing in for the divider's
     top margin has to step down with it or the block below sits 16px low. */
  .branding-steps-section:has(+ .service-grid-section) {
    padding-bottom: 3rem;
  }

  .service-grid-divider {
    margin: 3rem 0;
  }

  .service-grid-subheader {
    font-size: 1.5rem;
  }

  .service-grid-items {
    gap: 2rem;
  }

  .service-grid-item-heading {
    font-size: 1.25rem;
  }

  .service-grid-item-text {
    font-size: 1rem;
  }
}

/* Small mobile (up to 480px) */
@media (max-width: 480px) {
  .service-grid-section {
    padding: 50px 20px;
  }

  .branding-steps-section + .service-grid-section {
    padding-top: 0;
  }
}

/* ============================================
   PRINT
   ============================================ */

@media print {
  .service-grid-section {
    background-color: transparent;
    border: 1px solid var(--gray-300, #E0E0E0);
    page-break-inside: avoid;
  }

  .service-grid-subheader,
  .service-grid-item-heading {
    color: var(--bwp-charcoal, #2C2C2C);
  }

  .service-grid-intro,
  .service-grid-item-text {
    color: var(--gray-700, #616161);
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.service-grid-item-heading:focus-visible {
  outline: 2px solid var(--bwp-red, #D32F2F);
  outline-offset: 2px;
}