/* =========================================================
   A2TDEV Services width + base breadcrumb consistency fix
   Scope: public services, case studies, start-project, requests,
   project workspace, service profile, service utility pages.
   ========================================================= */
:root {
  --a2t-service-shell-max: 1240px;
  --a2t-service-shell-gutter: 32px;
  --a2t-service-shell-gutter-mobile: 20px;
}

/* Safety: base landing pages should not show the global chain/breadcrumb row. */
body:has(.a2t-services-pro) .a2t-global-breadcrumb-shell,
body:has(.a2t-trust-page) .a2t-global-breadcrumb-shell,
body:has(#a2t-blog-listing) .a2t-global-breadcrumb-shell {
  display: none !important;
}

/* Project Requests is a nested service workspace, so keep its breadcrumb on
   the same rail while base Services remains intentionally breadcrumb-free. */
body:has(.a2t-requests-page) .a2t-global-breadcrumb-shell {
  width: min(var(--a2t-service-shell-max), calc(100% - (var(--a2t-service-shell-gutter) * 2))) !important;
  max-width: var(--a2t-service-shell-max) !important;
}

body:has(.a2t-requests-page) .a2t-page-shell.a2t-client-portal-shell {
  padding-top: 28px !important;
}

/* Keep all service-family pages on one consistent centered content rail. */
:is(
  .a2t-services-pro,
  .a2t-trust-page,
  .a2t-pr-page,
  .a2t-freelancer-detail,
  .a2t-activity-page,
  .a2t-report-verify,
  .a2t-page-shell.a2t-client-portal-shell,
  .a2cw
) {
  width: min(var(--a2t-service-shell-max), calc(100% - (var(--a2t-service-shell-gutter) * 2))) !important;
  max-width: var(--a2t-service-shell-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* The requests dashboard previously used a 100vw shell. Bring it back into the same service rail. */
.a2t-page-shell.a2t-client-portal-shell {
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
}

.a2t-client-portal-shell .a2t-client-portal-layout,
.a2t-requests-page .a2t-requests-layout {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  margin: 0 !important;
}

.a2t-client-portal-shell .a2t-client-dashboard-main,
.a2t-requests-page .a2t-requests-main {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Project workspace used a wider 1440px rail. Match the services rail. */
.a2cw {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.a2cw-breadcrumb,
.a2cw-layout {
  max-width: 100% !important;
}

/* Keep the public service + case-study landing pages visually aligned with the same top rhythm. */
.a2t-services-pro,
.a2t-trust-page {
  padding-top: 76px !important;
}

/* Start-project and dashboard should share the same side edges as the public services page. */
.a2t-pr-page,
.a2t-page-shell.a2t-client-portal-shell {
  padding-top: 64px !important;
}

/* Desktop nav no longer needs to compensate for the removed services side rail. */
.a2t-nav-shell {
  width: min(var(--a2t-service-shell-max), calc(100% - (var(--a2t-service-shell-gutter) * 2))) !important;
  max-width: var(--a2t-service-shell-max) !important;
}

@media (max-width: 768px) {
  :root {
    --a2t-service-shell-gutter: var(--a2t-service-shell-gutter-mobile);
  }

  :is(
    .a2t-services-pro,
    .a2t-trust-page,
    .a2t-pr-page,
    .a2t-freelancer-detail,
    .a2t-activity-page,
    .a2t-report-verify,
    .a2t-page-shell.a2t-client-portal-shell,
    .a2cw
  ) {
    width: min(100%, calc(100% - (var(--a2t-service-shell-gutter-mobile) * 2))) !important;
    max-width: calc(100% - (var(--a2t-service-shell-gutter-mobile) * 2)) !important;
    margin-inline: auto !important;
  }

  .a2t-nav-shell {
    width: min(100%, calc(100% - 32px)) !important;
    max-width: calc(100% - 32px) !important;
  }

  .a2t-services-pro,
  .a2t-trust-page,
  .a2t-pr-page,
  .a2t-page-shell.a2t-client-portal-shell,
  .a2cw {
    padding-top: 38px !important;
  }

  .a2t-requests-page .a2t-dashboard-breadcrumb {
    margin-bottom: 16px !important;
  }
}

@media (max-width: 390px) {
  :root {
    --a2t-service-shell-gutter-mobile: 16px;
  }

  .a2t-nav-shell {
    width: min(100%, calc(100% - 28px)) !important;
    max-width: calc(100% - 28px) !important;
  }
}