/* Layout additions for the Community, Lab and Service pages. */
.al-page { overflow-wrap: anywhere; }
.al-page-hero { gap: 48px; align-items: center; }
.al-page-hero .service-details-title-wrapper { width: 60%; padding-right: 0; min-width: 0; }
.al-page-hero h1 { font-size: clamp(40px, 5vw, 80px); line-height: 1.1; }
.al-page-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; color: var(--paragraph-gray); font-size: 14px; }
.al-page-breadcrumb a { color: var(--paragraph-gray); }
.al-page-breadcrumb a:hover { color: var(--primary); }
.al-page-label { align-self: flex-start; margin: 0; }
.al-page-image { width: 40%; aspect-ratio: 4 / 3; border: 1px solid var(--stroke); border-radius: 4px; background: var(--primary-dark); }
.al-page-panel { border-left: 1px solid var(--stroke); border-right: 1px solid var(--stroke); padding: 64px 40px; }
.al-page-panel > h2 { margin-bottom: 24px; }
.al-page-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.al-page-card { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px; min-width: 0; border: 1px solid var(--stroke); color: var(--white); border-radius: 4px; }
.al-page-card h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; }
.al-page-card p { margin: 0; }
.al-page-number { color: var(--primary); font-size: 16px; }
a.al-page-card { transition: border-color 160ms ease, background-color 160ms ease; }
a.al-page-card:hover { border-color: var(--primary); background: var(--white-20); }
a.al-page-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.al-page-card-link { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; }
.al-page-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.al-page-contact > h2, .al-page-contact > p { margin: 0; }
.al-page-contact .primary-button { gap: 16px; }
@media screen and (max-width: 991px) {
  .al-page-hero { flex-direction: column; align-items: stretch; padding: 48px 30px; gap: 32px; }
  .al-page-hero .service-details-title-wrapper, .al-page-image { width: 100%; }
  .al-page-image { max-height: 300px; }
  .al-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-page-panel { padding: 48px 30px; }
}
@media screen and (max-width: 767px) {
  .al-page-hero, .al-page-panel { padding: 40px 20px; }
  .al-page-grid { grid-template-columns: 1fr; gap: 20px; }
  .al-page-card { padding: 24px; }
}