/* Dialog Group website concept v22
   Layout refinement only: spacing, proportions and floating-card positioning.
   Brand colours, typography, content, buttons, icons and animations are unchanged.
*/

:root {
  --layout-section-y: clamp(4.375rem, 5.5vw, 5.625rem);
  --layout-section-y-tablet: 4rem;
  --layout-section-y-mobile: 3.25rem;
  --layout-title-to-copy: 1.5rem;
  --layout-copy-to-action: 2rem;
  --layout-action-to-content: 2.5rem;
  --layout-section-heading-to-content: 2.5rem;
  --layout-grid-gap-wide: clamp(2.5rem, 4.75vw, 4.5rem);
  --layout-grid-gap-medium: clamp(1.5rem, 3vw, 2.5rem);
  --layout-card-gap: clamp(1rem, 1.75vw, 1.5rem);
  --floating-photo-footer: 5.5rem;
  --floating-card-overlap: 1.75rem;
}

/* --------------------------------------------------------------------------
   1. Shared vertical rhythm
   -------------------------------------------------------------------------- */

main .section,
main .editorial-photo-section,
main .contact-section,
main .check-page {
  padding-block: var(--layout-section-y) !important;
}

main .section-heading,
main .solution-section-head {
  margin-bottom: var(--layout-section-heading-to-content) !important;
}

main :is(
  .centered-heading,
  .solution-section-head,
  .editorial-photo-copy,
  .solution-inline-media-copy,
  .solution-definition-copy,
  .solution-explainer-heading,
  .value-copy,
  .value-intro,
  .faq-intro,
  .contact-copy,
  .article-summary-grid > div:first-child,
  .article-prose,
  .article-section,
  .article-chapter,
  .article-action-section,
  .insight-impact-grid,
  .insights-newsletter-card > div
) > :is(h1, h2) {
  margin-bottom: var(--layout-title-to-copy) !important;
}

main :is(
  .hero-copy,
  .solution-detail-copy,
  .insights-hero-copy,
  .insight-detail-hero-copy,
  .insight-detail-copy,
  .contact-page-hero-copy,
  .solution-hero-copy,
  .article-hero-grid > div:first-child
) > h1 {
  margin-bottom: var(--layout-title-to-copy) !important;
}

main .hero-lead {
  margin-bottom: var(--layout-copy-to-action) !important;
}

main .hero-actions {
  gap: 0.85rem;
  margin-bottom: var(--layout-action-to-content) !important;
}

main :is(
  .section-action,
  .team-button,
  .editorial-photo-copy .text-link,
  .solution-inline-media-copy .text-link,
  .insight-impact-grid .button
) {
  margin-top: var(--layout-copy-to-action) !important;
}

main .solution-quick-answer {
  margin-bottom: var(--layout-copy-to-action) !important;
}

main .contact-page-hero-actions,
main .site-search-form--page {
  margin-top: var(--layout-copy-to-action) !important;
}

/* Keep common two-column and editorial layouts consistent. */
main :is(
  .hero-grid,
  .solution-detail-hero-grid,
  .insights-hero-grid,
  .insights-category-hero-grid,
  .insight-detail-hero-grid,
  .contact-page-hero-grid,
  .solution-hero-grid,
  .article-hero-grid,
  .editorial-photo-grid,
  .solution-inline-media-grid,
  .solution-definition-grid,
  .solution-value-grid,
  .solution-cta,
  .plain-language-grid,
  .value-grid,
  .team-grid,
  .audience-grid,
  .audience-v18-grid,
  .faq-grid,
  .contact-grid,
  .job-content-grid,
  .office-map-layout,
  .article-summary-grid,
  .insight-reading-grid,
  .insight-impact-grid
) {
  gap: var(--layout-grid-gap-wide);
}

main :is(
  .signal-grid,
  .delivery-grid,
  .solution-family-grid,
  .roadmap,
  .value-cards,
  .detail-capabilities-grid,
  .measure-grid,
  .related-grid,
  .content-card-grid,
  .insight-point-grid,
  .article-point-grid,
  .vacancy-grid,
  .contact-process-grid,
  .sector-overview-grid,
  .office-list
) {
  gap: var(--layout-card-gap);
}

/* Reduce height that was created only by earlier generous spacing rules. */
main .signal-card {
  min-height: 220px;
}

main .delivery-card,
main .solution-family-card {
  min-height: 350px;
}

main .fit-grid article {
  min-height: 180px;
}

main .plain-card {
  min-height: 380px;
}

main .roadmap-step {
  min-height: 455px;
}

main .value-cards article {
  min-height: 245px;
}

main .proof-grid > div {
  min-height: 112px;
}

/* --------------------------------------------------------------------------
   2. More compact heroes
   -------------------------------------------------------------------------- */

main .hero {
  padding-top: calc(var(--header-height) + 4.5rem);
  padding-bottom: 5rem;
}

main .check-hero,
main .contact-page-hero {
  padding-top: calc(var(--header-height) + 4.5rem);
  padding-bottom: 5rem;
}

main .hero-grid,
main .solution-detail-hero-grid,
main .insights-hero-grid,
main .insights-category-hero-grid,
main .insight-detail-hero-grid,
main .contact-page-hero-grid,
main .solution-hero-grid,
main .article-hero-grid {
  align-items: center;
}

main .hero-visual,
main .solution-detail-visual {
  min-height: 560px;
}

main .contact-page-hero-image,
main .contact-page-visual {
  min-height: 460px;
}

/* --------------------------------------------------------------------------
   3. Floating cards around hero photography
   -------------------------------------------------------------------------- */

@media (min-width: 641px) {
  main .hero-visual--floating {
    position: relative;
    min-height: 560px;
  }

  main .hero-visual--floating .photo-frame {
    inset: 0.2rem 0.2rem var(--floating-photo-footer) 2.5rem;
  }

  main .hero-visual--floating .floating-card-route {
    top: 1.5rem;
    left: -0.75rem;
  }

  /* The top 28px of the lower card overlaps the photo. The remainder sits
     below the photo, leaving the image caption unobstructed. */
  main .hero-visual--floating .floating-card-execution {
    top: calc(100% - var(--floating-photo-footer) - var(--floating-card-overlap));
    right: 0.75rem;
    bottom: auto;
  }

  main .hero-visual--floating .photo-frame blockquote {
    right: 1.5rem;
    bottom: 5.75rem;
  }
}

/* --------------------------------------------------------------------------
   4. Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --layout-section-y: var(--layout-section-y-tablet);
    --layout-grid-gap-wide: 3rem;
    --layout-grid-gap-medium: 2rem;
    --layout-section-heading-to-content: 2.25rem;
  }

  main .hero,
  main .check-hero,
  main .contact-page-hero {
    padding-top: calc(var(--header-height) + 4rem);
    padding-bottom: 4rem;
  }

  main .hero-grid,
  main .solution-detail-hero-grid,
  main .insights-hero-grid,
  main .insights-category-hero-grid,
  main .insight-detail-hero-grid,
  main .contact-page-hero-grid,
  main .solution-hero-grid,
  main .article-hero-grid {
    gap: 3rem;
  }

  main .hero-visual--floating,
  main .hero-visual,
  main .solution-detail-visual {
    min-height: 530px;
  }

  main .contact-page-hero-image,
  main .contact-page-visual {
    min-height: 420px;
  }

  main .roadmap-step,
  main .delivery-card,
  main .solution-family-card,
  main .plain-card {
    min-height: 0;
  }
}

/* --------------------------------------------------------------------------
   5. Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  :root {
    --layout-section-y: var(--layout-section-y-mobile);
    --layout-section-heading-to-content: 2rem;
    --layout-grid-gap-wide: 2rem;
    --layout-grid-gap-medium: 1.5rem;
    --layout-title-to-copy: 1.5rem;
    --layout-copy-to-action: 2rem;
    --layout-action-to-content: 2.5rem;
  }

  main .hero,
  main .check-hero,
  main .contact-page-hero {
    padding-top: calc(var(--header-height) + 3.25rem);
    padding-bottom: 3.25rem;
  }

  main .hero-grid,
  main .solution-detail-hero-grid,
  main .insights-hero-grid,
  main .insights-category-hero-grid,
  main .insight-detail-hero-grid,
  main .contact-page-hero-grid,
  main .solution-hero-grid,
  main .article-hero-grid,
  main .editorial-photo-grid,
  main .solution-inline-media-grid,
  main .solution-definition-grid,
  main .solution-value-grid,
  main .solution-cta,
  main .plain-language-grid,
  main .value-grid,
  main .team-grid,
  main .audience-grid,
  main .audience-v18-grid,
  main .faq-grid,
  main .contact-grid,
  main .job-content-grid,
  main .office-map-layout,
  main .article-summary-grid,
  main .insight-reading-grid,
  main .insight-impact-grid {
    gap: 2rem;
  }

  /* Cards stack below the photo on small screens. This avoids collisions with
     captions and keeps every touch target fully visible. */
  main .hero-visual--floating {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    min-height: 0;
  }

  main .hero-visual--floating .photo-frame {
    position: relative;
    inset: auto;
    height: 360px;
    grid-row: 1;
  }

  main .hero-visual--floating .floating-card {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
  }

  main .hero-visual--floating .floating-card-route {
    grid-row: 2;
  }

  main .hero-visual--floating .floating-card-execution {
    grid-row: 3;
  }

  main .hero-visual--floating .photo-frame blockquote {
    right: 1.25rem;
    bottom: 1.25rem;
    left: 1.25rem;
  }

  main .contact-page-hero-image,
  main .contact-page-visual {
    min-height: 360px;
  }

  main .signal-card,
  main .delivery-card,
  main .solution-family-card,
  main .fit-grid article,
  main .plain-card,
  main .roadmap-step,
  main .value-cards article {
    min-height: 0;
  }
}