/* ==========================================================================
   Newsletter Signup Block — Smith 2.0
   Dark navy section: heading + intro + Name/Email form (left), photo (right).
   ========================================================================== */

.smith-newsletter {
    background-color: var(--color-blue-zodiac, #0e1b44);
    color: var(--color-white, #fff);
    padding: clamp(3.5rem, 9vw, 7rem) clamp(1.25rem, 5vw, 4rem); /* Figma 112/64 */
}

.smith-newsletter__inner {
    max-width: 1280px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 2fr 1fr; /* Figma: 800px content / 400px image, 80px gap */
    gap: 5rem;
    align-items: start; /* frame: photo top = content top + 40 (10774:81472) */
}

.smith-newsletter__heading {
    margin: 0 0 2.5rem; /* Figma heading -> intro gap 40px */
    font-family: var(--font-family-heading, "Hoefler Text", Georgia, serif);
    font-weight: 400; /* 400: Smith Style Guide - Hoefler Text is Regular. See docs/DECISIONS.md D8 */
    font-size: 3.25rem; /* Figma 52px */
    line-height: 1.2;
    color: var(--color-white, #fff);
}

.smith-newsletter__intro {
    margin: 0 0 2.5rem; /* Figma intro -> form gap 40px */
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-size: 1.5rem; /* Figma 24px / 1.5 */
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.smith-newsletter__form {
    /* Figma: stacked full-width Name / Email inputs, then the button (gaps 20px) */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.smith-newsletter__field {
    width: 100%;
}

.smith-newsletter__form {
    /* Frame form column: inputs 768 wide x 46 tall inside the 800 content
       (10774:81480-81481), flush left (no centering). */
    max-width: 768px;
    margin-inline: 0;
}

.smith-newsletter__form input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 1.25rem; /* 8/20 -> 46px tall at 20px text (frame 768x46) */
    border: 0;
    background: #e8eaee; /* frame: filled light field on navy */
    color: var(--color-blue-zodiac, #0e1b44);
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-size: 1.25rem; /* frame 20px */
    border-radius: 0;
}

.smith-newsletter__form input::placeholder { color: rgba(14, 27, 68, 0.6); }
.smith-newsletter__form input:focus {
    outline: 2px solid var(--color-selective-yellow, #f0b200);
    outline-offset: 1px;
}

.smith-newsletter__form .btn--cta { flex: 0 0 auto; }

/* BugZap #93: the navy-section Subscribe pill is gold-on-navy in the Agentis design
   reference (measured rgb(240,178,0) bg / rgb(14,27,68) text), not the teal
   pill the older Figma frame 10774:81472 specified. The base .btn--cta already
   carries the correct gold, so the override is simply removed rather than
   replaced. */
/* BugZap #133: the pre-input disabled state read as "faded" - keep the
   not-allowed cursor but render at full strength. */
.smith-newsletter__form .btn--cta[disabled] { opacity: 1; cursor: not-allowed; }

/* BugZap #93: on the navy band the reference renders the fields as translucent
   white with a hairline border, full 800px content width -- not the light-grey
   filled 768px inputs the older Figma frame specified. Measured on
   /designs/v1-original/insights/ at 1440px:
     800 x 54.8, bg rgba(255,255,255,.06), color #fff,
     1px solid rgba(255,255,255,.3), 16px/25.6px, padding 13.6px 16px,
     placeholder rgba(255,255,255,.6).
   Scoped to --navy so the --white / lead-magnet variant (which already matches
   the reference at 558 x 49, 20px, 8/20 padding) is left untouched. */
.smith-newsletter--navy .smith-newsletter__form {
    max-width: none;
}

.smith-newsletter--navy .smith-newsletter__form input {
    padding: 0.85rem 1rem;                       /* 13.6px / 16px */
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-white, #fff);
    font-size: 1rem;                             /* 16px */
    line-height: 1.6;                            /* 25.6px -> 54.8px total */
}

.smith-newsletter--navy .smith-newsletter__form input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.smith-newsletter__disclaimer {
    margin: 1rem 0 0;
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

.smith-newsletter__media {
    /* BugZap #93: the secondary link no longer lives here (it moved back into
       the text column, per the Agentis design reference), so this box holds only the
       photo and needs no text-align. */
    margin-top: 39px;  /* frame: photo top = container top + 39 (10774:81472) */
}

/* BugZap #93 - "see the Agentis design export for formatting - eyebrow - button - move
   'see past newsletters ->' to left side".

   COLOUR RESOLVED: teal, not gold. Meeky in #mm 2026-08-04 13:34:47 MDT -
   "'See Past Newsletters' button: teal as Agentis design has teal". Measured against
   the reference at /designs/v1-original/insights/ @1440:

       [A.smith-newsletter__secondary] "See Past Newsletters"
       x80  color rgb(15,126,124)  fw700  fs14.4px  ls0.864px  uppercase

   which is #0f7e7c / --color-surfie-green, 0.9rem, 0.06em, left-aligned in the
   text column (x80 = the same inset as the eyebrow, heading and Subscribe
   button, confirming the "move it to the left side" half of the ticket).

   An earlier pass forced gold here on the assumption that "see the Agentis design export for
   formatting" meant matching the Subscribe pill. It did not. The doubled
   selector (0,2,0) is kept anyway: main.css ships
   `.section--dark a, .bg-navy a { color: #0f7e7c }` at (0,1,1), and while that
   happens to supply the same teal today, leaving this rule at (0,1,0) would
   make the colour here depend on a rule in another file that nothing pins.
   Declaring it explicitly at (0,2,0) states the intent without an !important.

   Not changed, because the reference agrees with what we already ship:
   eyebrow rgb(240,178,0) gold (see .smith-newsletter__eyebrow below), and the
   Subscribe button gold bg #f0b200 on navy text rgb(14,27,68). */
.smith-newsletter .smith-newsletter__secondary {
    display: inline-block;
    margin-top: 2.5rem; /* Figma image -> link gap 40px */
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-surfie-green, #0f7e7c);
    text-decoration: none;
}
.smith-newsletter .smith-newsletter__secondary::after { content: " \2192"; /* frame arrow */ }
.smith-newsletter .smith-newsletter__secondary:hover { text-decoration: underline; }

.smith-newsletter__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 400px;
    aspect-ratio: 1 / 1; /* Figma 400x400 */
    object-fit: cover;
    border-radius: 0;
}

/* White variant — Lead Magnet (Figma): light section, navy text, outlined
   fields on white; image sits on top on mobile via the existing order:-1. */
.smith-newsletter--white {
    background-color: var(--color-white, #fff);
    color: var(--color-blue-zodiac, #0e1b44);
}
.smith-newsletter--white .smith-newsletter__heading,
.smith-newsletter--white .smith-newsletter__intro {
    color: var(--color-blue-zodiac, #0e1b44);
}
.smith-newsletter--white .smith-newsletter__form input {
    border: 1px solid rgba(14, 27, 68, 0.4);
    background: var(--color-white, #fff);
    color: var(--color-blue-zodiac, #0e1b44);
}
.smith-newsletter--white .smith-newsletter__form input::placeholder {
    color: rgba(14, 27, 68, 0.55);
}
.smith-newsletter--white .smith-newsletter__disclaimer {
    color: rgba(14, 27, 68, 0.6);
}

/* Lead Magnet frame: the photo tops the container (no 39px ride-down) and
   runs a 400x484 portrait crop, not the navy section's square. */
.smith-newsletter--white .smith-newsletter__media {
    margin-top: 0;
}
.smith-newsletter--white .smith-newsletter__media img {
    aspect-ratio: 400 / 484;
    max-height: 484px;
}

@media (max-width: 860px) {
    .smith-newsletter { padding: 4rem 1.5rem; }
    .smith-newsletter__inner { grid-template-columns: 1fr; gap: 2rem; }
    .smith-newsletter__media { order: -1; margin-top: 0; text-align: center; }
}

/* ==========================================================================
   BugZap #93 - eyebrow + deck (Agentis design reference)

   Typography for both comes free from the figma layer: .content-list__eyebrow
   is the site-wide eyebrow style and .h2-deck is the site-wide deck style, both
   declared !important in figma-mobile-v4.css. All that is left is the reference
   colour on the eyebrow and the vertical rhythm on the deck - figma-mobile-v4
   zeroes eyebrow margins and sets the eyebrow -> heading gap itself, so nothing
   here touches the eyebrow's margins.
   ========================================================================== */

.smith-newsletter__eyebrow {
    color: var(--color-selective-yellow, #f0b200);
}

.smith-newsletter__deck {
    margin: 0.5rem 0 0;
}