/* ==========================================================================
   Access band — template-parts/section-access.php
   Figma "Section_Access": public 12795:24605, member 12824:25257 (eDocs, Batch 7);
   Templates and Wage Summaries draw the same band. Globally enqueued layer; a page CSS may
   add scoped overrides only (.claude/rules/css-architecture.md). Desktop-first: every
   max-width query sits after the desktop rules. No Batch 7 mobile frame — the responsive
   rules are derived per roadmap/mobile-derivation-catalog.md.
   ========================================================================== */

.section-access {
  padding: var(--space-28) var(--space-20); /* Figma 12795:24605 pad T112 R80 B112 L80 */
  background-color: var(--color-white);     /* Figma 12795:24605 fill #ffffff */
}

.section-access__inner {
  max-width: 1280px;                        /* Figma 12795:24606 w=1280 sizingH FILL */
  margin: 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;                   /* Figma 12795:24606 VERTICAL */
  gap: var(--space-12);                     /* Figma 12795:24606 gap 48 */
}

.section-access__intro {
  max-width: 768px;                         /* Figma 12795:24608 w=768 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;                                /* Figma 12795:24608 gap 22 — untokenized */
}

.section-access__heading {
  margin: 0;
  max-width: 648px;                         /* Figma 12795:24611 Container w=648 FIXED */
  font-family: var(--font-family);
  font-size: 44px;                          /* Figma 12795:24612 size 44 */
  font-weight: var(--font-weight-normal);   /* Figma 12795:24612 FrutigerLTStd-Roman 400 */
  line-height: 1.1;                         /* Figma 12795:24612 LH 48.4 */
  letter-spacing: -0.44px;                  /* Figma 12795:24612 LS -0.44 */
  color: var(--color-navy);                 /* Figma 12795:24612 fill #0b1628 */
}

.section-access__lead {
  margin: 0;
  font-family: var(--font-family);
  font-size: 20px;                          /* Figma 12795:24614 size 20 */
  font-weight: var(--font-weight-bold);     /* Figma 12795:24614 FrutigerLTStd-Bold 700 */
  line-height: 1.3;                         /* Figma 12795:24614 LH 26 */
  color: var(--color-navy-darkest);         /* Figma 12795:24614 fill #03060c */
}

.section-access__cards {
  max-width: 1024px;                        /* Figma 12795:24616 maxWidth 1024 */
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* Figma 12795:24617 GRID columns 2 */
  gap: var(--space-6);                      /* Figma 12795:24617 columnGap 24 rowGap 24 */
}

/* .card (cards.css:11) gives the column, radius 4 and overflow; the stroke is OUTSIDE in
   Figma, so it is a spread ring that adds nothing to the 500x192 box. */
.section-access__card {
  min-width: 0;
  justify-content: space-between;           /* Figma 12795:24690 primary SPACE_BETWEEN — button pinned to the bottom */
  gap: 18px;                                /* Figma 12795:24690 gap 18 — untokenized */
  padding: var(--space-6);                  /* Figma 12795:24690 pad 24 */
  box-shadow: 0 0 0 1px var(--color-navy-lightest), var(--shadow-md); /* Figma 12795:24689 stroke #e6e7e9 1px OUTSIDE + DROP_SHADOW 0 3 16 -4 a0.09 */
}

.section-access__card--tint {
  background-color: var(--color-tangerine-lightest); /* Figma 12795:24689 fill #ffefe5 */
}

.section-access__card--plain {
  justify-content: center;                  /* Figma 12795:24703 primary CENTER */
  background-color: var(--color-white);     /* Figma 12795:24702 fill #ffffff */
}

.section-access__card-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                      /* Figma 12795:24693 gap 16 (Content Top 12795:24691 holds only this frame) */
}

.section-access__card-title {
  margin: 0;
  font-family: var(--font-family);
  font-size: 20px;                          /* Figma 12795:24694 size 20 */
  font-weight: var(--font-weight-bold);     /* Figma 12795:24694 FrutigerLTStd-Bold 700 */
  line-height: 1.3;                         /* Figma 12795:24694 LH 26 */
  letter-spacing: -0.2px;                   /* Figma 12795:24694 LS -0.2 */
  color: var(--color-navy);                 /* Figma 12795:24694 fill #0b1628 */
}

.section-access__card-text {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-sm);                /* Figma 12795:24695 size 14 */
  font-weight: var(--font-weight-normal);   /* Figma 12795:24695 FrutigerLTStd-Roman 400 */
  line-height: 1.4;                         /* Figma 12795:24695 LH 19.6 */
  color: var(--color-navy);                 /* Figma 12795:24695 fill #0b1628 */
  overflow-wrap: anywhere;
}

.section-access__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;                      /* Figma 12795:24719 counter CENTER */
  gap: 18px;                                /* Figma 12795:24719 gap 18 — untokenized */
}

.section-access__actions .btn {
  min-width: 0;
  white-space: normal;
}

.section-access__link {
  text-decoration: none;                    /* Figma I12795:24712;10215:112334 no textDecoration; .btn--link underlines (buttons.css:175) */
}

/* Member state — intro and card side by side: 500 + 48 + 732 = 1280 (Figma 12824:25258). */
.section-access--member .section-access__inner {
  flex-direction: row;                      /* Figma 12824:25258 HORIZONTAL */
  align-items: flex-start;                  /* Figma 12824:25258 counter MIN */
}

.section-access--member .section-access__intro {
  flex: 1 1 500px;                          /* Figma 12824:25260 w=500 */
  max-width: none;
}

.section-access--member .section-access__cards {
  flex: 1 1 732px;                          /* Figma 12824:25266 w=732 */
  grid-template-columns: minmax(0, 1fr);    /* Figma 12824:25267 GRID columns 1 */
}

/* --------------------------------------------------------------------------
   Responsive — derived (mobile-derivation-catalog.md#column-collapse): the member split
   stacks at 1024 (large-grid split); the public two-card row at 768.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .section-access--member .section-access__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .section-access--member .section-access__intro,
  .section-access--member .section-access__cards {
    flex: 0 0 auto;                         /* in a column the basis would be read as a height */
  }
}

@media (max-width: 768px) {
  .section-access {
    padding: 50px 20px;                     /* Section Padding large 112->50, gutter 80->20 — mobile-derivation-catalog.md#container-caps */
  }

  .section-access__inner {
    gap: var(--space-9);                    /* Padding large 48->36 — Pastel R10 o6jev5e4 #2 */
  }

  .section-access__cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-access__heading {
    font-size: 32px;                        /* H2 44->32 */
  }

  .section-access__lead {
    font-size: 18px;                        /* Text Large 20->18 */
  }

  .section-access__card-title {
    font-size: 18px;                        /* 20 Bold -> 18 (H6 / Text Large) */
  }
}