/* ==========================================================================
   eDocs — templates/template-edocs.php
   Figma frame 12795:23604, logged-in frame 12824:24798 (Batch 7, desktop only). Spec:
   roadmap/phase-08-content-pages/artifacts/page-edocs-spec.md
   Page-scoped: the intro (.edocs-intro), benefits (.edocs-benefits), DocuSign
   (.edocs-docusign) and tutorials (.edocs-tutorials) bands. The banner, member badge, cards,
   access band and colour CTA are global layers (banners.css, badges.css, cards.css,
   section-access.css, colour-cta.css). Desktop-first: every max-width query sits after the
   desktop rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Block 4 — Section_Intro — Figma 12795:23653
   Photo left, copy right — the .fae-intro recipe (find-an-employer.css:26-75), page-scoped
   there and accepted, so transcribed rather than reused.
   -------------------------------------------------------------------------- */
.edocs-intro {
  padding: var(--space-28) var(--space-20); /* Figma 12795:23653 pad T112 R80 B112 L80; no fill */
}

.edocs-intro__row {
  max-width: 1280px;                        /* Figma 12795:23654 w=1280 */
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: var(--space-16);                     /* Figma 12795:23655 HORIZONTAL gap 64 */
}

/* The photo is absolute, so the row height comes from the copy or the 393 frame, whichever
   is taller, and the photo crops to it. */
.edocs-intro__image {
  position: relative;
  flex: 0 1 617px;                          /* Figma 12795:23656 w=617 */
  min-width: 0;
  min-height: 393px;                        /* Figma 12795:23656 h=393 sizingV FIXED */
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);          /* Figma 12795:23656 cornerRadius 4 */
  clip-path: var(--corner-cut-clip);        /* Figma 12795:23657 82x82 white wedge top-right = the sitewide corner cut (tokens.css:106) */
}

.edocs-intro__image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                        /* Figma 12795:23656 scaleMode FILL — centred cover, pre-applied to intro.jpg */
}

.edocs-intro__box {
  flex: 0 1 599px;                          /* Figma 12795:23658 w=599 — shrinks with the photo (617:599), as .cg-intro__content */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-9);                      /* Figma 12824:25294 gap 36 */
  background-color: var(--color-white);     /* Figma 12795:23658 fill #ffffff */
  border-radius: var(--radius-sm);          /* Figma 12795:23658 cornerRadius 4 */
}

.edocs-intro__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                      /* Figma 12824:25296 gap 24 */
}

.edocs-intro__heading {
  margin: 0;
  max-width: 486px;                         /* Figma 12824:25298 w=486 FIXED */
  font-family: var(--font-family);
  font-size: 44px;                          /* Figma 12824:25299 size 44 */
  font-weight: var(--font-weight-normal);   /* Figma 12824:25299 FrutigerLTStd-Roman 400 */
  line-height: 1.1;                         /* Figma 12824:25299 LH 48.4 */
  letter-spacing: -0.44px;                  /* Figma 12824:25299 LS -0.44 */
  color: var(--color-navy-darkest);         /* Figma 12824:25299 fill #03060c */
}

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

.edocs-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);                      /* Figma 12831:25313 HORIZONTAL gap 24 */
}

.edocs-intro__actions .btn {
  min-width: 0;
  white-space: normal;
}

/* --------------------------------------------------------------------------
   Block 6 — Section_Benefits — Figma 12795:24342
   Cards are .card--icon-strip (cards.css:315) without the strip — Figma component
   10306:5641, Size XSmall, Icon True, Link False. The .why-join-benefits grid recipe.
   -------------------------------------------------------------------------- */
.edocs-benefits {
  padding: var(--space-28) var(--space-20); /* Figma 12795:24342 pad T112 R80 B112 L80 */
  background-color: var(--color-accent-light-blue); /* Figma 12795:24342 fill #cbdae6 */
}

.edocs-benefits__inner {
  max-width: 1280px;                        /* Figma 12795:24343 w=1280 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);                     /* Figma 12795:24343 gap 48 */
}

.edocs-benefits__intro {
  max-width: 768px;                         /* Figma 12795:24345 w=768 */
  display: flex;
  flex-direction: column;
  gap: 22px;                                /* Figma 12795:24345 gap 22 — untokenized */
}

/* Line and hook come from .section-tagline (typography.css:317); the line is currentColor. */
.edocs-benefits__tagline {
  color: var(--color-navy);                 /* Figma 12795:24346 fill #0b1628, line 12795:24352 stroke #0b1628 */
  letter-spacing: 0;                        /* Figma 12795:24346 LS 0 — the class default is 0.05em */
}

.edocs-benefits__heading,
.edocs-docusign__heading,
.edocs-tutorials__heading {
  margin: 0;
  font-family: var(--font-family);
  font-size: 44px;                          /* Figma 12795:24349 / 12795:24568 / 12795:24577 size 44 */
  font-weight: var(--font-weight-normal);   /* FrutigerLTStd-Roman 400 */
  line-height: 1.1;                         /* LH 48.4 */
  letter-spacing: -0.44px;                  /* LS -0.44 */
  color: var(--color-navy);                 /* fill #0b1628 */
}

.edocs-benefits__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* Figma 12795:24355 GRID 3 x 411 */
  gap: var(--space-6);                      /* Figma 12795:24357 rel x 435 = 411 + 24 (base .card-grid is 32) */
}

.edocs-benefits__grid > li {
  display: flex;                            /* the card fills the stretched cell — equal heights */
  min-width: 0;
}

.edocs-benefits__grid > li > .card--icon-strip {
  flex: 1;
  min-width: 0;
}

.edocs-benefits .card__content {
  gap: 18px;                                /* Figma I12795:24356;10306:5642 gap 18; base icon-strip is 12 */
}

.edocs-benefits .card__title,
.edocs-benefits .card__excerpt {
  margin: 0;
}

.edocs-benefits .card__title {
  letter-spacing: -0.2px;                   /* Figma I12795:24356;10306:5646 LS -0.2 */
}

/* --------------------------------------------------------------------------
   Block 7 — Section_Docusign — Figma 12795:24544
   Photo left (no corner cut), copy right, vertically centred in a 393 row.
   -------------------------------------------------------------------------- */
.edocs-docusign {
  padding: var(--space-28) var(--space-20); /* Figma 12795:24544 pad T112 R80 B112 L80; no fill */
}

.edocs-docusign__row {
  max-width: 1280px;                        /* Figma 12795:24545 w=1280 */
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: var(--space-16);                     /* Figma 12795:24546 HORIZONTAL gap 64 */
}

.edocs-docusign__image {
  position: relative;
  flex: 0 1 617px;                          /* Figma 12795:24556 w=617 */
  min-width: 0;
  min-height: 393px;                        /* Figma 12795:24556 h=393 sizingV FIXED */
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);          /* Figma 12795:24556 cornerRadius 4 */
}

.edocs-docusign__image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                        /* Figma 12795:24556 scaleMode FILL — centred cover, pre-applied to docusign.jpg */
}

.edocs-docusign__box {
  flex: 0 1 599px;                          /* Figma 12795:24547 w=599 — shrinks with the photo (617:599) */
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;                  /* Figma 12795:24547 primary CENTER */
  gap: var(--space-9);                      /* Figma 12795:24548 gap 36 */
  background-color: var(--color-white);     /* Figma 12795:24547 fill #ffffff */
  border-radius: var(--radius-sm);          /* Figma 12795:24547 cornerRadius 4 */
}

.edocs-docusign__body,
.edocs-tutorials__text {
  margin: 0;
  font-family: var(--font-family);
  font-size: 18px;                          /* Figma 12795:24552 / 12795:24579 size 18 */
  font-weight: var(--font-weight-normal);   /* FrutigerLTStd-Roman 400 */
  line-height: 1.5;                         /* LH 27 */
  color: var(--color-navy-darkest);         /* fill #03060c */
}

/* --------------------------------------------------------------------------
   Block 8 — Section_Tutorials — Figma 12795:24569
   A white card on soft green; the cut-out photo (12795:24603, 521x362) is absolute at
   section (801,62), i.e. card (721,-50): it overhangs the card top by 50 and sits 38 in
   from the card's right. Its width and right offset are percentages of the 1280 card so it scales with it,
   and the copy box stops 32px short of it: text = card - 36 - 38 - 32 - 40.7% card
   = 59.3% of the content box - 63px (653 at a 1280 card).
   -------------------------------------------------------------------------- */
.edocs-tutorials {
  padding: var(--space-28) var(--space-20); /* Figma 12795:24569 pad T112 R80 B112 L80 */
  background-color: var(--color-accent-soft-green-50); /* Figma 12795:24569 fill #81b9a2 opacity 0.5 */
}

.edocs-tutorials__card {
  position: relative;
  max-width: 1280px;                        /* Figma 12795:24570 w=1280 */
  margin: 0 auto;
  padding: var(--space-12) var(--space-9);  /* Figma 12795:24570 pad T48 R36 B48 L36 */
  background-color: var(--color-white);     /* Figma 12795:24570 fill #ffffff */
  border-radius: var(--radius-sm);          /* Figma 12795:24570 cornerRadius 4 */
}

.edocs-tutorials__box {
  max-width: min(653px, calc(59.3% - 63px)); /* Figma 12795:24574 w=653 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);                      /* Figma 12795:24574 gap 24 */
}

.edocs-tutorials__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                      /* Figma 12795:24575 gap 24 */
}

.edocs-tutorials__tagline {
  letter-spacing: 0;                        /* Figma 12795:24667 LS 0; colour and line from .section-tagline (#ff6600) */
}

.edocs-tutorials__box .btn {
  min-width: 0;
  white-space: normal;
}

/* Anchored by its bottom: the photo scales with the card's width but the card's height
   follows the copy, so a top anchor left a white band under it on a narrow desktop. At a 1280
   card the bottom offset puts the top at -50, the Figma overhang; narrower, it sits inside. */
.edocs-tutorials__image {
  position: absolute;
  bottom: 41px;                             /* Figma 12795:24603 card h 353 - (y -50 + h 362) */
  right: 2.97%;                             /* Figma 12795:24603 card right 1280 - 721 - 521 = 38 */
  width: 40.7%;                             /* Figma 12795:24603 w=521 of 1280 */
  aspect-ratio: 521 / 362;                  /* Figma 12795:24603 521x362 */
}

.edocs-tutorials__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;                      /* STRETCH crop pre-applied to tutorials.png; a cut-out, no radius */
}

/* --------------------------------------------------------------------------
   Responsive — no Batch 7 mobile frame; derived per mobile-derivation-catalog.md.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .edocs-intro__row,
  .edocs-docusign__row {
    flex-direction: column;                 /* the photo already comes first in the DOM */
  }

  .edocs-intro__image,
  .edocs-docusign__image {
    flex: 0 0 420px;                        /* mobile-derivation-catalog.md image height ladder — find-an-employer.css:373 */
    width: 100%;
    min-height: 0;
  }

  .edocs-intro__box,
  .edocs-docusign__box {
    flex: 1 1 auto;
    width: 100%;
  }

  .edocs-intro__heading {
    max-width: none;                        /* the 486 cap is column-relative */
  }

  .edocs-benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* tablet 2-up, as .card-grid--3 at cards.css:635 */
  }

  /* The overhanging photo would leave the copy too narrow; it moves under the copy. */
  .edocs-tutorials__box {
    max-width: none;
  }

  .edocs-tutorials__image {
    position: static;
    width: min(100%, 521px);                /* Figma 12795:24603 w=521 */
    margin: var(--space-6) 0 0;
  }
}

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

  .edocs-intro__row,
  .edocs-docusign__row {
    gap: var(--space-8);                    /* stacked 2-col row gap 32 — contracts-guides.css:228 */
  }

  .edocs-intro__box,
  .edocs-docusign__box {
    gap: var(--space-6);                    /* Padding medium 36->24; docusign per Pastel R10 o6jev5e4 #1 */
  }

  .edocs-intro__heading,
  .edocs-benefits__heading,
  .edocs-docusign__heading,
  .edocs-tutorials__heading {
    font-size: 32px;                        /* H2 44->32 */
  }

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

  .edocs-docusign__body,
  .edocs-tutorials__text {
    font-size: 16px;                        /* Text Medium 18->16 */
  }

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

  .edocs-tutorials__card {
    padding: var(--space-9) var(--space-6); /* Padding x-large 48->36 / medium 36->24 */
  }
}

@media (max-width: 402px) {
  .edocs-intro__image,
  .edocs-docusign__image {
    flex-basis: 310px;                      /* mobile-derivation-catalog.md image height ladder — find-an-employer.css:442 */
  }

  .edocs-intro__image {
    --corner-cut: 60px;                     /* sitewide mobile cut — find-an-employer.css:443 */
  }
}