/*
 * Google Ads location pages.
 *
 * These borrow the homepage's vocabulary rather than the interior one, so most of the work is
 * already done by site.css and homepage.css: orb cards, the cap grid, numbered steps and the
 * band all come from there. What is here is the two blocks that only exist on these pages, the
 * cost cards and the includes grid, plus the badge row in the interior hero.
 */

/* The accreditation row under the hero actions. Smaller than the homepage's, because the
   interior hero has a standfirst above it doing the talking. */
.ihero__badge-row {
  margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
}

.ihero__badge-row img {
  inline-size: auto;
  block-size: clamp(2rem, 3.4vw, 2.8rem);
}

/* What it costs. Dark, high on the page, and built so the figure is the thing the eye lands on,
   because that is the question every visitor arrives with. */
.ads-cost {
  position: relative;
  overflow: hidden;
  color: var(--bh-white);
}

.ads-cost__bubble {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  animation: pitch-float 17s ease-in-out infinite alternate;
}

.ads-cost__bubble img {
  display: block;
  width: 100%;
  height: auto;
}

.ads-cost__bubble--1 {
  inset-block-start: -18%;
  inset-inline-start: -6rem;
  width: clamp(12rem, 24vw, 24rem);
  opacity: 0.6;
}

.ads-cost__bubble--2 {
  inset-block-end: -8%;
  inset-inline-end: 4%;
  width: clamp(7rem, 12vw, 12rem);
  animation-duration: 12s;
  animation-delay: -4s;
}

.ads-cost__grid {
  position: relative;
  z-index: 1;
  row-gap: var(--bh-space-lg);
}

.ads-cost__head {
  grid-column: 1 / span 7;
}

.ads-cost__eyebrow {
  margin: 0 0 1rem;
  color: var(--bh-cyan);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
}

.ads-cost__intro {
  grid-column: 8 / -1;
  align-self: end;
}

.ads-cost__intro .lede {
  margin: 0;
  color: var(--bh-muted);
}

.ads-cost__cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ads-cost__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
}

.ads-cost__card > :not(.orb-card__bubble) {
  position: relative;
  z-index: 1;
}

.ads-cost__label {
  color: var(--bh-cyan);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
}

.ads-cost__figure {
  margin: 0;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h3);
  font-weight: var(--bh-weight-heading);
  letter-spacing: var(--bh-tracking-heading);
  line-height: 1.1;
}

.ads-cost__for {
  margin: 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-body);
}

.ads-cost__note {
  grid-column: 1 / span 9;
  margin: 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-small);
}

.ads-cost__note a {
  color: var(--bh-white);
  text-decoration-color: var(--bh-cyan);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
}

/* What every campaign includes. The homepage cap card, four across rather than three, because
   there are more moving parts in an ads campaign than there are services on the homepage. */
.ads-includes__head {
  grid-column: 1 / span 7;
}

.ads-includes__copy {
  grid-column: 8 / -1;
  align-self: end;
  margin: 0;
}

.ads-includes__grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.6rem);
}

.ads-includes__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.4rem, 2.2vw, 2rem);
}

.ads-includes__card > :not(.orb-card__bubble) {
  position: relative;
  z-index: 1;
}

/* The first ninety days. */
.ads-process__head {
  grid-column: 1 / span 8;
}

.ads-process__intro {
  grid-column: 9 / -1;
  align-self: end;
  margin: 0;
  color: var(--bh-muted);
}

.ads-process__grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.2vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ads-process__step {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

@media (max-width: 75rem) {
  .ads-includes__grid,
  .ads-process__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 63.99rem) {
  .ads-cost__head,
  .ads-cost__intro,
  .ads-cost__note,
  .ads-includes__head,
  .ads-includes__copy,
  .ads-process__head,
  .ads-process__intro {
    grid-column: 1 / -1;
  }

  .ads-cost__cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 40rem) {
  .ads-includes__grid,
  .ads-process__grid {
    grid-template-columns: 1fr;
  }
}