/* Last-mile calibration for the supplied reference compositions. */
.agah-service-design--ai .agah-design-header__cta--light,
.agah-service-design--ai .agah-ai-hero .agah-design-button { color: #111; }

.agah-ai-hero__art {
  background-image: linear-gradient(90deg, #101010 0%, rgba(16,16,16,.55) 37%, rgba(16,16,16,.08) 64%, rgba(16,16,16,0) 100%), url('../images/ai-automation-core.jpg');
  background-position: 70% center;
}

/* The service compositions replace the theme chrome on their own pages. */
body:has(.agah-service-design) .header-area,
body:has(.agah-service-design) .footer-area,
body:has(.agah-reference-page) .header-area,
body:has(.agah-reference-page) .footer-area {
  display: none !important;
}

/* The theme reserves a large top inset in .service-area. The reference
 * compositions own their first pixel, so remove that wrapper spacing. */
body:has(.agah-service-design) .service-area,
body:has(.agah-reference-page) .service-area {
  padding: 0 !important;
}

/* The Gridx theme applies a light pre background globally; the supplied
 * WordPress reference uses a dark editor window. */
.agah-reference-page__code-window,
.agah-reference-page__code-body,
.agah-reference-page__code-body pre,
.agah-reference-page__code-body pre code {
  background: #151516 !important;
}
.agah-reference-page__code-body pre,
.agah-reference-page__code-body pre code {
  color: #d8d8d4 !important;
}

.agah-seo-form select {
  margin-bottom: 0 !important;
}

@media (min-width: 1401px) {
  .agah-reference-page__sidebar {
    padding-left: 52px;
    padding-right: 44px;
  }
  .agah-reference-page__logo {
    align-items: flex-start;
    margin-left: 0;
    margin-right: 0;
  }

  .agah-reference-page h1 {
    font-size: clamp(56px, 5.05vw, 86px);
  }

  .agah-laravel-hero {
    grid-template-columns: 54% 46%;
  }
  .agah-laravel-hero h1 {
    font-size: clamp(56px, 4.8vw, 82px);
    transform: none;
    width: 116%;
  }

  .agah-seo-hero {
    padding-bottom: 28px;
    padding-top: 28px;
  }
  .agah-seo-copy {
    align-self: center;
  }

  /* WordPress reference: the headline starts directly under the topline,
   * while the editor window controls the hero height. */
  .agah-reference-page__hero {
    padding-top: 53px;
    padding-bottom: 35px;
  }
  .agah-reference-page__hero-copy {
    align-self: start;
  }
  .agah-reference-page__code-body {
    min-height: 400px;
  }
  .agah-reference-page__code-body pre {
    font-size: 14px;
    line-height: 1.45;
    padding: 20px 22px;
  }
}

/* Keep the supplied theme reference title on two lines at the 16:9 canvas. */
.agah-service-design--themes .agah-theme-hero {
  grid-template-columns: 48% 52%;
}
.agah-service-design--themes .agah-theme-hero h1 {
  font-size: clamp(46px, 3.5vw, 60px);
  letter-spacing: -0.055em;
  transform: scaleX(.78);
  transform-origin: left top;
  width: 130%;
}

@media (min-width: 768px) and (max-width: 1400px) {
  .agah-laravel-hero { grid-template-columns: 50% 50%; min-height: 640px; }
  .agah-laravel-hero__copy { padding: 40px 3vw 34px 4vw; }
  .agah-laravel-hero h1 { font-size: clamp(48px, 4.8vw, 70px); }
  .agah-laravel-hero__art { min-height: 640px; }
  .agah-theme-hero { grid-template-columns: 52% 48%; }
  .agah-theme-hero__copy { padding: 40px 3vw 24px 4vw; }
  .agah-theme-hero h1 { font-size: clamp(48px, 4.2vw, 70px); }
}

@media (max-width: 767px) {
  .agah-laravel-hero h1 {
    transform: none;
    width: auto;
  }

  .agah-service-design--themes .agah-theme-hero h1 {
    font-size: clamp(44px, 12vw, 62px);
    transform: none;
    width: auto;
  }
}

/* Keep the AI outcome cards readable when the two-column tablet grid narrows
 * the metrics area. The reference keeps the three outcomes together, but the
 * cards must yield before their labels are clipped. */
@media (max-width: 1100px) {
  .agah-service-design--ai .agah-ai-metrics article {
    min-width: 0;
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 18px;
  }

  .agah-service-design--ai .agah-ai-metrics article > * {
    min-width: 0;
  }

  .agah-service-design--ai .agah-ai-metrics article > span {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .agah-service-design--ai .agah-ai-metrics b,
  .agah-service-design--ai .agah-ai-metrics strong,
  .agah-service-design--ai .agah-ai-metrics p {
    margin-left: 10px;
    overflow-wrap: anywhere;
  }

  .agah-service-design--ai .agah-ai-metrics strong {
    font-size: 38px;
  }

  .agah-service-design--ai .agah-ai-metrics p {
    font-size: 11px;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .agah-service-design--ai .agah-ai-metrics {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(120px, auto);
  }

  /* Let the AI checklist cards grow with their content on tablet. The
   * reference keeps a dense grid, but fixed rows clip the third checklist
   * item when the two-column layout becomes narrow. */
  .agah-service-design--ai .agah-ai-grid {
    grid-template-rows: 320px minmax(250px, auto) 250px auto;
  }
}

/* Match the supplied AI reference's stepped masonry: the diagram spans the
 * middle two rows and the oversight card spans the lower two rows. Keeping
 * those spans explicit prevents the dense cards from clipping their lists. */
@media (min-width: 1101px) {
  .agah-service-design--ai .agah-ai-grid {
    grid-template-areas:
      "hero hero workflow"
      "smart diagram diagram"
      "oversight diagram diagram"
      "oversight metrics metrics";
    grid-template-rows: 305px 270px 46px 204px;
  }
}

/* The reference places the icon beside the heading, not above the copy. This
 * keeps the desktop and tablet cards compact while preserving the mobile
 * stacked composition below 768px. */
@media (min-width: 768px) {
  .agah-service-design--ai .agah-ai-card {
    padding: 28px 31px;
  }

  .agah-service-design--ai .agah-ai-card .agah-ai-icon {
    height: 84px;
    position: absolute;
    right: 31px;
    top: 31px;
    width: 84px;
  }

  .agah-service-design--ai .agah-ai-card h2 {
    margin: 29px 104px 12px 0;
  }

  .agah-service-design--ai .agah-ai-card p {
    line-height: 1.3;
  }

  .agah-service-design--ai .agah-ai-card ul {
    margin-top: 16px;
  }

  .agah-service-design--ai .agah-ai-card li {
    margin: 7px 0;
  }
}

/* At the compact two-column breakpoint the reference still keeps every
 * checklist readable, so let the two card rows grow instead of hiding the
 * final item behind the card edge. */
@media (min-width: 768px) and (max-width: 1100px) {
  .agah-service-design--ai .agah-ai-grid {
    grid-template-rows: 320px minmax(300px, auto) 250px minmax(250px, auto);
  }
}

/* Dedicated monochrome line-icon pack for the AI cards. */
.agah-service-design--ai .agah-ai-icon {
  font-size: 0;
  position: relative;
}

@media (min-width: 768px) {
  .agah-service-design--ai .agah-ai-card .agah-ai-icon {
    position: absolute;
  }
}

.agah-service-design--ai .agah-ai-icon::before,
.agah-service-design--ai .agah-ai-icon::after {
  content: "";
  display: block;
  position: absolute;
}

.agah-service-design--ai .agah-ai-icon--workflow::before {
  border: 2px solid #e8e8e5;
  border-radius: 50%;
  height: 9px;
  left: 20px;
  top: 14px;
  width: 9px;
  box-shadow: 31px 0 0 -1px #111, 31px 0 0 1px #e8e8e5, 15px 23px 0 -1px #111, 15px 23px 0 1px #e8e8e5;
}

.agah-service-design--ai .agah-ai-icon--workflow::after {
  background: #e8e8e5;
  height: 2px;
  left: 28px;
  top: 25px;
  transform: rotate(90deg);
  width: 23px;
  box-shadow: -7px 8px 0 -0.25px #e8e8e5, 8px 8px 0 -0.25px #e8e8e5;
}

.agah-service-design--ai .agah-ai-icon--smart::before {
  border: 2px solid #e8e8e5;
  border-radius: 50% 50% 44% 44%;
  height: 27px;
  left: 24px;
  top: 23px;
  width: 32px;
}

.agah-service-design--ai .agah-ai-icon--smart::after {
  border-bottom: 2px solid #e8e8e5;
  border-top: 2px solid #e8e8e5;
  height: 7px;
  left: 24px;
  top: 30px;
  width: 32px;
}

.agah-service-design--ai .agah-ai-icon--oversight::before {
  border: 2px solid #e8e8e5;
  border-radius: 50%;
  height: 14px;
  left: 32px;
  top: 17px;
  width: 14px;
}

.agah-service-design--ai .agah-ai-icon--oversight::after {
  border: 2px solid #e8e8e5;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  height: 22px;
  left: 24px;
  top: 39px;
  width: 30px;
}

/* Backward-compatible selectors for the 0.2.5 template markup. */
.agah-service-design--ai .agah-ai-card--workflow .agah-ai-icon::before {
  border: 2px solid #e8e8e5;
  border-radius: 50%;
  height: 9px;
  left: 20px;
  top: 14px;
  width: 9px;
  box-shadow: 31px 0 0 -1px #111, 31px 0 0 1px #e8e8e5, 15px 23px 0 -1px #111, 15px 23px 0 1px #e8e8e5;
}

.agah-service-design--ai .agah-ai-card--workflow .agah-ai-icon::after {
  background: #e8e8e5;
  height: 2px;
  left: 28px;
  top: 25px;
  transform: rotate(90deg);
  width: 23px;
  box-shadow: -7px 8px 0 -0.25px #e8e8e5, 8px 8px 0 -0.25px #e8e8e5;
}

.agah-service-design--ai .agah-ai-card--smart .agah-ai-icon::before {
  border: 2px solid #e8e8e5;
  border-radius: 50% 50% 44% 44%;
  height: 27px;
  left: 24px;
  top: 23px;
  width: 32px;
}

.agah-service-design--ai .agah-ai-card--smart .agah-ai-icon::after {
  border-bottom: 2px solid #e8e8e5;
  border-top: 2px solid #e8e8e5;
  height: 7px;
  left: 24px;
  top: 30px;
  width: 32px;
}

.agah-service-design--ai .agah-ai-card--oversight .agah-ai-icon::before {
  border: 2px solid #e8e8e5;
  border-radius: 50%;
  height: 14px;
  left: 32px;
  top: 17px;
  width: 14px;
}

.agah-service-design--ai .agah-ai-card--oversight .agah-ai-icon::after {
  border: 2px solid #e8e8e5;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  height: 22px;
  left: 24px;
  top: 39px;
  width: 30px;
}