/* section_aws.css — "Heading and card list" section.
   Values from the spec ## Computed Styles + the frozen source crop:
   1440 = base rules; 768 shares the base rules (2-col grid, 32px 40px pad);
   375 → @media(max-width:479px) (grid collapses to 1 col, 16px pad).
   Run breakpoint boundary set {479,767,991,1919}.
   Typography via var(--font-*) (framework-11 E1 lock; source family
   'Plus Jakarta Sans' resolves through the frozen tokens).
   All selectors scoped under the component root (.c-section_aws__section-aws)
   so cross-component canonical classes (c-about_info__*, c-blog_body__*) never
   leak (rule 9). */

/* ============================ Section root ================================= */
.c-section_aws__section-aws {
  display: block;
  color: var(--color-text-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  /* SDC-preview UA body-margin neutraliser (Drupal zeroes body margin on composed pages) */
  margin: -8px;
}
.region-content .c-section_aws__section-aws {
  margin: 0;
  width: 100%;
}

/* ---- Outer padding wrapper (padding-global + padding-section-xsmall) ------ */
.c-section_aws__section-aws .c-about_info__heading-wrap-5 {
  display: block;
  padding: 32px var(--space-40); /* spec: 32px 40px @1440/768 (no --space-32 token) */
}

/* ---- Container (container-large cap) -------------------------------------- */
.c-section_aws__section-aws .c-about_info__heading-wrap {
  display: block;
  width: 100%;
  max-width: 1280px; /* source container-large cap; no --container-max token this run */
  margin-inline: auto;
}

.c-section_aws__inner {
  display: block;
  width: 100%;
}

/* ---- Eyebrow (div_block_73 > headin_links): red dot + uppercase label ----- */
.c-section_aws__section-aws .c-about_info__group-2 {
  display: block;
  width: 100%;
}
.c-section_aws__section-aws .c-about_info__headin-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  min-height: 60px; /* spec: div-block-73 height 60px @1440/768 */
}
.c-section_aws__eyebrow-dot {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-bg-accent); /* rgb(237,28,36) — measured dot */
  flex: 0 0 auto;
}
.c-section_aws__eyebrow {
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary); /* rgb(115,115,115) — measured eyebrow ink */
}

/* ---- Optional intro paragraph (instance 1 only; unmeasured — body scale) -- */
.c-section_aws__intro {
  margin: var(--space-16) 0 0;
  max-width: 760px;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
}

/* ---- Card grids: two stacked 2-col grids forming the bordered cross -------
   1px lines rendered as the container background showing through a 1px gap +
   a 1px outer border (no double borders). The bottom grid drops its top border
   so the shared middle line is aws-serv-22's single border-bottom. */
.c-section_aws__grids {
  display: block;
  width: 100%;
}
.c-section_aws__aws-serv-22,
.c-section_aws__aws-serv-copy-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: rgb(219, 219, 219); /* measured border/divider colour; no token this run */
}
.c-section_aws__aws-serv-22 > *,
.c-section_aws__aws-serv-copy-copy > * {
  min-width: 0;
}
.c-section_aws__aws-serv-22 {
  border: 1px solid rgb(219, 219, 219);
}
.c-section_aws__aws-serv-copy-copy {
  border: 1px solid rgb(219, 219, 219);
  border-top: 0;
}

/* ---- Card cell ----------------------------------------------------------- */
.c-section_aws__card {
  display: block;
  background: var(--color-bg-page);
  /* measured from the frozen crop: card title sits ~58px below the card top and
     the card bottom carries ~76px (source padding is asymmetric, more below the
     copy than above the title); 40px side gutters. Content top-aligned. */
  padding: 58px var(--space-40) 76px;
}
.c-section_aws__card-number {
  margin: 0 0 var(--space-16);
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.c-section_aws__card-title {
  margin: 0 0 var(--space-24);
  font-family: var(--font-family-display);
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--color-text-primary); /* rgb(51,51,51) — measured title ink */
}
.c-section_aws__card-body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  color: var(--color-text-dark); /* rgb(18,18,18) — measured body ink */
}
.c-section_aws__card-includes {
  margin: var(--space-16) 0 0;
  padding-left: var(--space-20);
  list-style: disc;
}
.c-section_aws__card-includes li {
  margin: 0 0 var(--space-8);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
}

/* ============================ Mobile: 375 band ============================= */
@media (max-width: 479px) {
  .c-section_aws__section-aws .c-about_info__heading-wrap-5 {
    padding: var(--space-16); /* spec: 16px @375 */
  }
  /* grids collapse to a single column (spec: 341px single col @375) */
  .c-section_aws__aws-serv-22,
  .c-section_aws__aws-serv-copy-copy {
    grid-template-columns: minmax(0, 1fr);
  }
}