/* ==========================================================================
   Colour CTA band — template-parts/colour-cta.php
   Figma "Section_Colour CTA Block". Contracts & Guides 12779:21353 (tangerine card, mail
   button, photo); eDocs 12814:24754 and Wage Summaries 13140:2710 (navy card, phone and
   email rows, no photo).
   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.
   ========================================================================== */

.colour-cta {
  padding: var(--space-28) var(--space-20); /* Figma 12779:21353 pad T112 R80 B112 L80 */
  background-color: var(--color-white);     /* Figma 12779:21353 fill #ffffff */
}

.colour-cta__card {
  position: relative;
  max-width: 1280px;                        /* Figma 12779:21354 w=1280 sizingH FILL */
  margin: 0 auto;
  display: flex;
  align-items: center;                      /* Figma 12779:21354 counter=CENTER */
  padding: var(--space-16);                 /* Figma 12779:21354 pad 64 */
  border-radius: var(--radius-sm);          /* Figma 12779:21354 cornerRadius 4 */
  overflow: hidden;                         /* Figma 12779:21354 clipsContent — the watermark runs past the card */
  color: var(--color-white);
}

.colour-cta--tangerine .colour-cta__card {
  background-color: var(--color-tangerine); /* Figma 12779:21354 fill #ff6600 */
}

.colour-cta__content {
  position: relative;
  z-index: 2;
  flex: 0 1 600px;                          /* Figma 12779:21356 w=600 sizingH FIXED */
  min-width: 0;
  min-height: 308px;                        /* Figma 12779:21357 h=308 sizingV FIXED, children top-aligned */
  display: flex;
  flex-direction: column;
  gap: var(--space-12);                     /* Figma 12779:21357 gap 48 */
}

/* The photo is absolute at the card's right (Figma 12779:21376 at x=848 of 1280), so the
   copy must stop short of it as the card narrows: 392 = photo 422 + right inset 10
   - card padding 64 + 24 clearance. Inert at 1440, where 600 is the smaller value. */
.colour-cta--has-photo .colour-cta__content {
  max-width: min(600px, calc(100% - 392px));
}

.colour-cta__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                      /* Figma 12779:21358 gap 24 */
}

.colour-cta__heading {
  margin: 0;
  font-family: var(--font-family);
  font-size: 44px;                          /* Figma 12779:21361 size 44 */
  font-weight: var(--font-weight-normal);   /* Figma 12779:21361 FrutigerLTStd-Roman 400 */
  line-height: 1.1;                         /* Figma 12779:21361 LH 48.4 */
  letter-spacing: -0.44px;                  /* Figma 12779:21361 LS -0.44 */
  color: var(--color-white);                /* Figma 12779:21361 fill #ffffff */
  text-decoration: none;
}

.colour-cta__text {
  margin: 0;
  font-family: var(--font-family);
  font-size: 18px;                          /* Figma 12779:21364 size 18 */
  font-weight: var(--font-weight-bold);     /* Figma 12779:21364 FrutigerLTStd-Bold 700 */
  line-height: 1.3;                         /* Figma 12779:21364 LH 23.4 */
  color: var(--color-white);                /* Figma 12779:21364 fill #ffffff */
}

.colour-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);                      /* Figma 12779:21366 gap 16 */
}

/* Size and colours come from .btn--sm + .btn--secondary.btn--alt (buttons.css:70, :135):
   pad 8/20, LH 24, 2px white border, white label — Figma 12779:21368. */
.colour-cta__btn {
  min-width: 0;
  text-decoration: none;                    /* Figma I12779:21368;10317:16886 textDecoration NONE */
}

.colour-cta__btn-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* MBA Logo Stacked, Colour=White — Figma 12779:21355: 498 instance at card (800,31) whose
   704 logomark frame sits at (-103,-103), i.e. a 704 box at card (697,-72). The SVG is the
   pre-rotated artwork, so the box is that frame: right = 1280 - 697 - 704 = -121. */
.colour-cta__watermark {
  position: absolute;
  z-index: 0;
  top: -72px;                               /* Figma 12779:21355 y 31 - 103 */
  right: -121px;                            /* Figma 12779:21355 x 800 - 103, w 704 */
  width: 704px;                             /* Figma I12779:21355;10210:110889 704x704 */
  height: 704px;
  background: url('../images/mba-logo-stacked-white.svg') no-repeat center / contain;
  pointer-events: none;
}

.colour-cta__photo {
  position: absolute;
  z-index: 1;
  bottom: 0;                                /* Figma 12779:21376 y 14 + 422 = card h 436 */
  right: 10px;                              /* Figma 12779:21376 x 848 + 422 = 1270 of 1280 */
  width: 422px;                             /* Figma 12779:21376 422x422 */
  height: 422px;
  pointer-events: none;
}

.colour-cta__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                        /* Figma 12779:21376 scaleMode FILL; a cut-out PNG, no radius */
}

/* --------------------------------------------------------------------------
   Navy variant — eDocs 12814:24754; Wage Summaries 13140:2710 has the same geometry
   (T64, content 580, logo instance at card (810,-31)).
   -------------------------------------------------------------------------- */
.colour-cta--navy {
  padding-top: var(--space-16);             /* Figma 12814:24754 pad T64 R80 B112 L80 */
}

.colour-cta--navy .colour-cta__card {
  background-color: var(--color-navy);      /* Figma 12814:24755 fill #0b1628 */
}

/* Content Wrapper 12814:24757 is 580 FIXED and HUG; no fixed height, unlike the tangerine
   card. The copy stops 24px short of the logo's visible left edge, which sits ~0.6477 of
   the watermark box in from the card's right: 704 x 0.6477 - pad 64 + 24 = 416. */
.colour-cta--navy .colour-cta__content {
  flex: 0 1 580px;                          /* Figma 12814:24757 w=580 sizingH FIXED */
  max-width: calc(100% - 416px);
  min-height: 0;                            /* Figma 12814:24757 sizingV HUG */
  gap: var(--space-9);                      /* Figma 12814:24758 gap 36 */
}

/* 498 instance at card (810,-31) whose 704 logomark frame sits at (-103,-103): a 704 box at
   card (707,-134), right = 1280 - 707 - 704 = -131. */
.colour-cta--navy .colour-cta__watermark {
  top: -134px;                              /* Figma 12814:24756 y -31 - 103 */
  right: -131px;                            /* Figma 12814:24756 x 810 - 103, w 704 */
}

.colour-cta__contacts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);                      /* Figma 12814:24763 gap 16 */
}

/* A block <li> adds a line-box strut under the inline-flex link (32px rows); flex keeps
   each row at the link's own 24px — Figma 12814:24767 h=24. */
.colour-cta__contacts > li {
  display: flex;
}

.colour-cta__contact {
  display: inline-flex;
  align-items: center;                      /* Figma 12814:24767 counter CENTER */
  gap: 10px;                                /* Figma 12814:24767 gap 10 */
  font-family: var(--font-family);
  font-size: var(--text-base);              /* Figma 12814:24769 size 16 */
  font-weight: var(--font-weight-bold);     /* Figma 12814:24769 FrutigerLTStd-Bold 700 */
  line-height: 1.3;                         /* Figma 12814:24769 LH 20.8 */
  color: var(--color-white);                /* Figma 12814:24769 fill #ffffff */
  text-decoration: none;
  overflow-wrap: anywhere;
}

.colour-cta__contact:hover .colour-cta__contact-label {
  text-decoration: underline;
}

.colour-cta__contact:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.colour-cta__contact-icon {
  flex: 0 0 auto;
  font-size: 24px;                          /* Figma 12814:24768 / 12814:24771 24x24 */
  color: var(--color-white);                /* Figma I12814:24768;7044:841 fill #ffffff */
}

/* --------------------------------------------------------------------------
   Responsive — mirrors .advice-cta on Workplace Relations, the same Figma CTA
   component, whose tablet and mobile geometry the client accepted:
   - 1025-1280: watermark and photo shrink in ~100px steps and the card reserves a
     right gutter, so the white logo stays clear of the heading (advice.css:685-761);
   - 769-1024: side by side kept, not stacked (Pastel WR #22, WR #19; advice.css:763-799);
   - <=768: Figma mobile frame 10515:6859 (advice.css:801-847).
   The photo gutter applies only with a photo. The navy card has none: its content keeps
   the 24px clearance from the logo through a max-width that tracks each watermark step
   (box x 0.6477 - card pad + 24), and the watermark offsets scale with the box
   (top -134/704, right -131/704).
   -------------------------------------------------------------------------- */
@media (min-width: 1201px) and (max-width: 1280px) {
  .colour-cta--has-photo .colour-cta__card {
    padding: 56px 390px 56px 56px;          /* advice.css:695 right gutter for the photo */
  }

  .colour-cta--has-photo .colour-cta__content {
    max-width: none;                        /* bounded by the gutter */
  }

  .colour-cta__watermark {
    top: -72px;                             /* advice.css:700-705 */
    right: -112px;
    width: 630px;
    height: 630px;
  }

  .colour-cta__photo {
    right: 12px;                            /* advice.css:706-710 */
    width: 385px;
    height: 385px;
  }

  .colour-cta--navy .colour-cta__content {
    max-width: calc(100% - 368px);          /* 630 x 0.6477 - 64 + 24 */
  }

  .colour-cta--navy .colour-cta__watermark {
    top: -120px;                            /* -134 x 630/704 */
    right: -117px;                          /* -131 x 630/704 */
  }
}

@media (min-width: 1101px) and (max-width: 1200px) {
  .colour-cta--has-photo .colour-cta__card {
    padding: 48px 355px 48px 48px;          /* advice.css:715 */
  }

  .colour-cta--has-photo .colour-cta__content {
    max-width: none;
  }

  .colour-cta__heading {
    font-size: 40px;                        /* advice.css:721 */
  }

  .colour-cta__watermark {
    top: -63px;                             /* advice.css:723-728 */
    right: -100px;
    width: 560px;
    height: 560px;
  }

  .colour-cta__photo {
    right: 14px;                            /* advice.css:729-733 */
    width: 350px;
    height: 350px;
  }

  .colour-cta--navy .colour-cta__content {
    max-width: calc(100% - 323px);          /* 560 x 0.6477 - 64 + 24 */
  }

  .colour-cta--navy .colour-cta__watermark {
    top: -107px;                            /* -134 x 560/704 */
    right: -104px;                          /* -131 x 560/704 */
  }
}

@media (min-width: 1025px) and (max-width: 1100px) {
  .colour-cta--has-photo .colour-cta__card {
    padding: 40px 330px 40px 40px;          /* advice.css:738 */
  }

  .colour-cta--has-photo .colour-cta__content {
    max-width: none;
    gap: var(--space-8);                    /* advice.css:742 gap 32 */
  }

  .colour-cta__heading {
    font-size: 38px;                        /* advice.css:745 */
  }

  .colour-cta__watermark {
    top: -56px;                             /* advice.css:750-755 */
    right: -90px;
    width: 500px;
    height: 500px;
  }

  .colour-cta__photo {
    right: 15px;                            /* advice.css:756-760 */
    width: 315px;
    height: 315px;
  }

  .colour-cta--navy .colour-cta__content {
    max-width: calc(100% - 284px);          /* 500 x 0.6477 - 64 + 24 */
  }

  .colour-cta--navy .colour-cta__watermark {
    top: -95px;                             /* -134 x 500/704 */
    right: -93px;                           /* -131 x 500/704 */
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .colour-cta {
    padding: var(--space-28) 40px;          /* horizontal halved so the card keeps width — advice.css:773 */
  }

  .colour-cta--has-photo .colour-cta__card {
    padding: 40px 320px 40px 40px;          /* advice.css:776 right gutter for the photo */
  }

  .colour-cta--has-photo .colour-cta__content {
    max-width: none;
    gap: var(--space-8);                    /* advice.css:780 gap 32 */
  }

  .colour-cta__heading {
    font-size: 36px;                        /* advice.css:783 */
  }

  .colour-cta__watermark {
    top: -52px;                             /* advice.css:788-793 — tucked top-right, behind the photo */
    right: -84px;
    width: 470px;
    height: 470px;
  }

  .colour-cta__photo {
    right: 16px;                            /* advice.css:794-798 */
    width: 300px;
    height: 300px;
  }

  .colour-cta--navy {
    padding-top: var(--space-16);           /* Section Padding medium 64, kept at tablet */
  }

  .colour-cta--navy .colour-cta__card {
    padding: 40px;                          /* card padding 40, as the tangerine/WR step */
  }

  .colour-cta--navy .colour-cta__content {
    max-width: calc(100% - 288px);          /* 470 x 0.6477 - 40 + 24 */
  }

  .colour-cta--navy .colour-cta__watermark {
    top: -89px;                             /* -134 x 470/704 */
    right: -87px;                           /* -131 x 470/704 */
  }
}

/* Figma mobile frame 10515:6859, as built on Workplace Relations (advice.css:801-847): copy
   on top, buttons full width in a column, then the photo on the card's bottom edge 29px from
   its left (its right side cropped by the card), the watermark at the bottom-left behind it.
   The photo stays in flow rather than absolute, so longer copy pushes it down instead of
   running under it. */
@media (max-width: 768px) {
  .colour-cta {
    padding: 50px 20px;                     /* Section Padding large 112->50, gutter 80->20 — mobile-derivation-catalog.md#container-caps */
  }

  .colour-cta__card {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-6);                /* Figma 10515:6859 card padding 24 — advice.css:808 */
  }

  .colour-cta--has-photo .colour-cta__card {
    padding-bottom: 0;                      /* the photo sits on the card's bottom edge */
  }

  .colour-cta__content,
  .colour-cta--has-photo .colour-cta__content {
    flex: 0 0 auto;
    max-width: none;
    min-height: 0;
  }

  /* Photo top at y 400 of the 752 card = 752 - 352 (advice.css:809, :840-845); 400 - pad 24. */
  .colour-cta--has-photo .colour-cta__content {
    min-height: 376px;
  }

  .colour-cta__heading {
    font-size: 32px;                        /* H2 44->32 */
  }

  .colour-cta__text {
    font-size: 16px;                        /* Text Medium 18->16 */
  }

  .colour-cta__actions {
    flex-direction: column;                 /* Figma 10515:6859 buttons column — advice.css:817-821 */
    align-items: stretch;
  }

  .colour-cta__btn {
    justify-content: center;                /* full width — advice.css:822-825 */
    width: 100%;
  }

  .colour-cta__watermark {
    top: auto;                              /* advice.css:826-837 bottom-left, past the card bottom */
    right: auto;
    bottom: -75px;
    left: 0;
    width: 446px;
    height: 446px;
  }

  .colour-cta__photo {
    position: relative;
    bottom: auto;
    right: auto;
    flex: 0 0 auto;
    align-self: flex-start;
    margin-left: 5px;                       /* left 29 in the card - pad 24 — advice.css:843 */
    width: 352px;                           /* advice.css:844-845 */
    height: 352px;
  }

  .colour-cta--navy {
    padding: 20px 20px 50px;                /* Section Padding medium 64->20 top, large 112->50 bottom */
  }

  /* The desktop navy rules out-specify the bare resets above, so the navy pair repeats them:
     in a column the 580 basis would be read as a height, and the desktop offsets would pin the
     logo top-right instead of bottom-left. */
  .colour-cta--navy .colour-cta__content {
    flex: 0 0 auto;
    max-width: none;
  }

  /* No photo covers the bottom-left logo here and the copy ran over it; the client asked
     for it gone on mobile (Pastel R10 o6jev5e4 #3). */
  .colour-cta--navy .colour-cta__watermark {
    display: none;
  }
}