/* Advibe Agency — Service detail pages (google-ads.html, meta-ads.html,
   seo.html, …). Shared layout for the hero CTA, the "what's included"
   grid, and the condensed proof-point stats. These pages also pull in
   case-study.css for the results-panel/changed-grid/case-study-cta
   pieces reused from the homepage case study. */

/* ---------- Hero CTA button ---------- */
.page-hero .btn { margin-top: var(--sp-6); }

/* ---------- What's included ---------- */
.included-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 640px) { .included-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
  .included-grid { grid-template-columns: repeat(3, 1fr); }
  /* When the count leaves exactly one card alone in the last row
     (e.g. 7 items), center it under the middle column instead of
     stranding it on the left with two empty cells beside it. */
  .included-grid > .value-card:last-child:nth-child(3n+1) { grid-column: 2; }
}

/* ---------- Process: 4-step variant ----------
   process-grid defaults to 3 columns at 800px (styles.css); a 4-step
   process reads better at 2-up on tablet, 4-up on wide desktop. */
@media (min-width: 800px) { .process-grid.is-4up { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .process-grid.is-4up { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Proof section: two stats side by side ----------
   Same visual language as .results-headline .big-stat, laid out as a
   pair instead of one centered figure. */
.proof-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  max-width: 620px;
  margin: 0 auto;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  text-align: center;
}
@media (min-width: 560px) { .proof-stats { grid-template-columns: repeat(2, 1fr); } }
.proof-stat .big-stat {
  font-family: var(--font-data);
  font-size: var(--fs-data-lg);
  font-weight: 700;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.proof-stat p { color: var(--text-muted); margin-top: var(--sp-1); font-size: 14px; }

/* ---------- Client-work phone mockups ----------
   Placeholder "Instagram preview" cards for pages that want a portfolio
   strip before real client screenshots exist. To swap in a real result,
   replace the .ig-phone-screen's contents with an <img> that fills the
   frame (object-fit: cover works with the existing rounded corners) and
   drop the is-placeholder class. */
.ig-showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 700px) { .ig-showcase-grid { grid-template-columns: repeat(3, 1fr); } }

.ig-phone { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.ig-phone-frame {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 9 / 18.5;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 28px;
  padding: 10px;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
  position: relative;
}
.ig-phone-frame::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--bg);
  z-index: 2;
}
.ig-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}
.ig-phone-screen.is-placeholder {
  background: var(--bg-elevated-2);
  border: 1px dashed var(--border-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  text-align: center;
}
.ig-phone-screen.is-placeholder svg { width: 28px; height: 28px; color: var(--gold-400); }
.ig-phone-screen.is-placeholder span {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ig-phone-caption { font-size: 13px; color: var(--text-faint); }

/* ---------- Portfolio tile placeholders ----------
   Square "project preview" cards for pages that want a work-sample
   grid before real client assets exist. To swap in a real result,
   replace the tile's contents with an <img> (object-fit: cover fills
   the existing aspect-ratio/radius) and drop the is-placeholder class. */
.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 640px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .portfolio-grid { grid-template-columns: repeat(3, 1fr); } }

.portfolio-tile {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
}
.portfolio-tile.is-placeholder {
  background: var(--bg-elevated);
  border: 1px dashed var(--border-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  text-align: center;
}
.portfolio-tile.is-placeholder svg { width: 26px; height: 26px; color: var(--gold-400); }
.portfolio-tile.is-placeholder h3 { font-size: 15px; margin: 0; }
.portfolio-tile.is-placeholder span { font-size: 12px; color: var(--text-faint); }