/* ==========================================================================
   Contracts & Guides — templates/template-contracts-guides.php
   Figma frame 12778:19322 (Batch 7, desktop only). Spec:
   roadmap/phase-08-content-pages/artifacts/page-contracts-guides-spec.md
   Page-scoped: the intro (.cg-intro) and the eDocs band (.edocs-band). The banner, the
   member badge and the colour CTA are global layers (banners.css, badges.css, colour-cta.css).
   Desktop-first: every max-width query sits after the desktop rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Block 4 — Section_Intro — Figma 12779:21270
   Photo left, copy right. Structural sibling of .gbl-info (get-a-builders-licence.css),
   which is page-scoped and accepted, so not reused.
   -------------------------------------------------------------------------- */
.cg-intro {
  padding: var(--space-28) var(--space-20); /* Figma 12779:21270 pad T112 R80 B112 L80; fills [] */
}

.cg-intro__inner {
  max-width: 1280px;                        /* Figma 12779:21271 w=1280 */
  margin: 0 auto;
}

.cg-intro__row {
  display: flex;
  align-items: stretch;                     /* Figma 12779:21273 sizingV=FILL — the copy drives the row height */
  gap: var(--space-16);                     /* Figma 12779:21272 HORIZONTAL gap=64 */
}

.cg-intro__image-wrap {
  position: relative;
  flex: 0 1 617px;                          /* Figma 12779:21273 w=617 */
  align-self: stretch;                      /* Figma 12779:21273 layoutAlign STRETCH sizingV FILL — QA 2026-10-01 */
  min-width: 0;
  overflow: hidden;
  clip-path: var(--corner-cut-clip);        /* Figma 12779:21274 82x82 white wedge top-right = the sitewide corner cut (tokens.css:180) */
}

/* Absolute, so the photo fills the row the copy sets rather than adding its own 744. */
.cg-intro__image {
  align-self: stretch;                      /* Figma 12779:21273 layoutAlign STRETCH — declared on the img too, the selector QA inspects (about-our-training.css:157) */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                        /* Figma 12779:21273 STRETCH crop, pre-applied to intro.jpg */
}

.cg-intro__content {
  flex: 1 1 599px;                          /* Figma 12779:21275 w=599 sizingH=FILL */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-9);                      /* Figma 12779:21276 gap=36 */
  background-color: var(--color-white);     /* Figma 12779:21275 fill #ffffff */
  border-radius: var(--radius-sm);          /* Figma 12779:21275 cornerRadius 4 */
}

.cg-intro__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                      /* Figma 12779:21277 gap=24 */
}

/* Line and hook come from .section-tagline (typography.css:317). */
.cg-intro__tagline {
  letter-spacing: 0;                        /* Figma 12779:21279 LS 0 — the class default is 0.05em */
}

.cg-intro__heading {
  margin: 0;
  font-family: var(--font-family);
  font-size: 44px;                          /* Figma 12779:21284 size 44 */
  font-weight: var(--font-weight-normal);   /* Figma 12779:21284 FrutigerLTStd-Roman 400 */
  line-height: 1.1;                         /* Figma 12779:21284 LH 48.4 */
  letter-spacing: -0.44px;                  /* Figma 12779:21284 LS -0.44 */
  color: var(--color-navy-darkest);         /* Figma 12779:21284 run 1 fill #03060c */
}

.cg-intro__heading-accent {
  color: var(--color-tangerine);            /* Figma 12779:21284 run 2 fill #ff6600 */
}

.cg-intro__copy,
.cg-intro__buy-text {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-base);              /* Figma 12779:21286 / 12779:21289 size 16 */
  font-weight: var(--font-weight-normal);   /* Figma 12779:21286 FrutigerLTStd-Roman 400 */
  line-height: 1.4;                         /* Figma 12779:21286 LH 22.4 */
  color: var(--color-navy-darkest);         /* Figma 12779:21286 fill #03060c */
}

.cg-intro__buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;                  /* Figma 12779:21322 button hugs its label */
  gap: var(--space-4);                      /* Figma 12779:21287 gap=16 */
}

.cg-intro__subheading {
  margin: 0;
  font-family: var(--font-family);
  font-size: 30px;                          /* Figma 12779:21288 size 30 */
  font-weight: var(--font-weight-normal);   /* Figma 12779:21288 FrutigerLTStd-Roman 400 */
  line-height: 1.3;                         /* Figma 12779:21288 LH 39 */
  letter-spacing: -0.3px;                   /* Figma 12779:21288 LS -0.3 */
  color: #000000;                           /* Figma 12779:21288 fill #000000 — untokenized */
}

/* Figma nests List 12779:21291 (w=560 FIXED) in List Wrapper 12779:21290 (w=599), so the
   rules stop short of the text column. */
.cg-intro__list {
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 560px;                         /* Figma 12779:21291 w=560 */
  display: flex;
  flex-direction: column;
  gap: var(--space-1);                      /* Figma 12779:21291 gap=4 */
}

.cg-intro__list-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);                      /* Figma 12779:21292 HORIZONTAL gap=8 */
  padding: var(--space-2) 0;                /* Figma 12779:21292 pad T8 R0 B8 L0 */
  box-shadow: inset 0 -1px 0 var(--color-tangerine-lighter); /* Figma 12779:21292 bottom stroke 1px #ffe0cc INSIDE — inside the 40px row, not added to it */
  font-family: var(--font-family);
  font-size: var(--text-base);              /* Figma 12779:21294 size 16 */
  font-weight: var(--font-weight-bold);     /* Figma 12779:21294 FrutigerLTStd-Bold 700 */
  line-height: 1.4;                         /* Figma 12779:21294 LH 22.4 */
  color: var(--color-navy-darkest);         /* Figma 12779:21294 fill #03060c */
}

/* Pastel R10 okj866y3 #1 — 36px between the list and the button: 20 on top of the 16 gap. */
.cg-intro__cta {
  margin-top: 20px;
}

.cg-intro__list-icon {
  flex: 0 0 auto;
  color: var(--color-tangerine);            /* Figma I12779:21293;7044:3399 fill #ff6600 */
}

/* --------------------------------------------------------------------------
   Block 5 — eDocs — Figma 12779:21391 (public) / 12835:25471 (member)
   Copy and button left, photo right, on navy-dark. The button is .btn--primary in both
   states; .scheme-navy recolours only .btn--secondary / .btn--link (buttons.css:134).
   -------------------------------------------------------------------------- */
.edocs-band {
  padding: var(--space-28) var(--space-20); /* Figma 12779:21391 pad T112 R80 B112 L80 */
  background-color: var(--color-navy-dark); /* Figma 12779:21391 fill #081120 */
}

.edocs-band__inner {
  max-width: 1280px;                        /* Figma 12779:21409 w=1280 sizingH FILL */
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: var(--space-16);                     /* Figma 12779:21409 HORIZONTAL gap=64 */
}

.edocs-band__content {
  flex: 1 1 608px;                          /* Figma 12779:21410 w=608 sizingH FILL */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-9);                      /* Figma 12779:21410 gap=36 */
}

.edocs-band__top {
  max-width: 599px;                         /* Figma 12779:21411 w=599 */
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                      /* Figma 12779:21411 gap=24 */
}

.edocs-band__title {
  margin: 0;
  max-width: 486px;                         /* Figma 12779:21416 w=486 FIXED */
  font-family: var(--font-family);
  font-size: 44px;                          /* Figma 12779:21417 size 44 */
  font-weight: var(--font-weight-normal);   /* Figma 12779:21417 FrutigerLTStd-Roman 400 */
  line-height: 1.1;                         /* Figma 12779:21417 LH 48.4 */
  letter-spacing: -0.44px;                  /* Figma 12779:21417 LS -0.44 */
  color: var(--color-white);                /* Figma 12779:21417 fill #ffffff */
}

.edocs-band__copy {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-base);              /* Figma 12779:21419 size 16 */
  font-weight: var(--font-weight-normal);   /* Figma 12779:21419 FrutigerLTStd-Roman 400 */
  line-height: 1.4;                         /* Figma 12779:21419 LH 22.4 */
  color: var(--color-white);                /* Figma 12779:21419 fill #ffffff */
}

.edocs-band__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;                                /* Figma 12779:23241 gap=10 */
}

/* Stretches to the row when the copy runs past 376 (narrow desktop), so the photo never
   stops short of the copy; the img is absolute so its own height cannot set the row. */
.edocs-band__media {
  position: relative;
  flex: 1 1 608px;                          /* Figma 12779:23229 w=608 sizingH FILL */
  align-self: stretch;
  min-width: 0;
  min-height: 376px;                        /* Figma 12779:23229 h=376 sizingV FIXED */
}

.edocs-band__img {
  align-self: stretch;                      /* Figma 12779:23234 layoutAlign STRETCH sizingV FILL — QA 2026-10-01 */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                        /* Figma 12779:23234 scaleMode FILL */
}

/* --------------------------------------------------------------------------
   Responsive — no Batch 7 mobile frame; derived per mobile-derivation-catalog.md.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .cg-intro,
  .edocs-band {
    padding: 50px 20px;                     /* Section Padding large 112->50, gutter 80->20 — mobile-derivation-catalog.md#container-caps */
  }

  /* 2-col rows collapse; the image-left row reverses so the heading leads
     (mobile-derivation-catalog.md#column-collapse). */
  .cg-intro__row {
    flex-direction: column-reverse;
    gap: var(--space-8);                    /* stacked 2-col row gap 32 — get-a-builders-licence.css:948 */
  }

  .cg-intro__image-wrap,
  .cg-intro__content {
    flex: 0 0 auto;                         /* in a column the basis would be read as a height */
  }

  .cg-intro__image-wrap {
    --corner-cut: 60px;                     /* sitewide mobile cut — get-a-builders-licence.css:985 */
    clip-path: var(--corner-cut-clip);
    aspect-ratio: 617 / 744;                /* Figma 12779:21273 617x744 */
    max-height: 420px;                      /* catalog mobile image cap — get-a-builders-licence.css:966 */
  }

  .cg-intro__content {
    gap: var(--space-6);                    /* Padding medium 36->24, as the client pinned on .gbl-info (Pastel R6 #1) */
  }

  .cg-intro__heading,
  .edocs-band__title {
    font-size: 32px;                        /* H2 44->32 */
  }

  .cg-intro__subheading {
    font-size: 24px;                        /* H4 30->24 */
  }

  .edocs-band__inner {
    flex-direction: column;
    gap: var(--space-12);                   /* Padding x-large 64->48 */
  }

  .edocs-band__content,
  .edocs-band__media {
    flex: 0 0 auto;
  }

  .edocs-band__title {
    max-width: none;                        /* 486 is a desktop-frame width */
  }

  .edocs-band__media {
    min-height: 0;
    aspect-ratio: 608 / 376;                /* Figma 12779:23229 608x376 */
  }
}