/*
=================================================================
  Newsletter Sign-up Pop-up (homepage)
  - Markup rendered by inc/newsletter-popup.php into wp_footer;
    revealed by src/js/global/newsletter-popup.js (12s / 30% scroll).
  - Variant A "Split": photo left, warm-white form panel right.
  - Mirrors the shared modal contract (.is-active + body.cfc-modal-open
    + scrim) used by the events/waitlist modals in _events.css.
  - Buttons/inputs inside the Gravity Form are styled by the system
    (_buttons.css, _gravityforms.css) — this file is layout only there.
=================================================================
*/

.cfc-nl-popup {
    display: none;
}

.cfc-nl-popup.is-active {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: var(--wp--custom--z--modal);
    padding: var(--wp--preset--spacing--70);
    background: rgba(40, 71, 52, 0.7); /* token-exception: color-mix fallback */
    background: color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--alpha--scrim), transparent);
}

/* Stop the page behind the pop-up from scrolling while it's open.
   (Also defined in _events.css, but that file never loads on the homepage.) */
body.cfc-modal-open {
    overflow: hidden;
}

.cfc-nl-popup__panel {
    position: relative;
    display: grid;
    grid-template-columns: 5fr 6fr;
    width: 100%;
    max-width: 60rem;
    /* Defined height (Figma board A proportions): the panel never grows with
       the form — longer forms scroll inside __content instead. */
    height: min(50rem, 90vh);
    overflow: hidden;
    border-radius: var(--wp--custom--radius--card);
    box-shadow: var(--wp--custom--shadow--float);
    background: var(--wp--custom--color--surface-warm);
}

/* No photo uploaded → the content spans the full card. */
.cfc-nl-popup__panel--no-media {
    grid-template-columns: 1fr;
}

/* Entrance: gentle rise + fade. @starting-style needs the transition on the
   final state; reduced-motion users get an instant show (no wrapper needed —
   the media query gates the transition itself). */
@media (prefers-reduced-motion: no-preference) {
    .cfc-nl-popup.is-active .cfc-nl-popup__panel {
        transition: opacity var(--wp--custom--transition--slow), translate var(--wp--custom--transition--slow);
    }

    @starting-style {
        .cfc-nl-popup.is-active .cfc-nl-popup__panel {
            opacity: 0;
            translate: 0 var(--wp--preset--spacing--50);
        }
    }
}

.cfc-nl-popup__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cfc-nl-popup__content {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
    padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cfc-nl-popup__eyebrow {
    margin: 0;
    font-family: var(--wp--preset--font-family--gill-sans);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    letter-spacing: var(--wp--custom--tracking--eyebrow);
    text-transform: uppercase;
    color: var(--wp--preset--color--secondary);
}

.cfc-nl-popup__title {
    margin: 0;
    font-family: var(--wp--preset--font-family--lovechild);
    font-size: var(--wp--preset--font-size--x-large);
    line-height: var(--wp--custom--line-height--snug);
    color: var(--wp--preset--color--primary);
}

.cfc-nl-popup__desc {
    color: var(--wp--preset--color--primary);
}

.cfc-nl-popup__desc p {
    margin: 0;
    font-size: var(--wp--preset--font-size--medium);
}

/* Gravity Form: layout only — buttons/inputs inherit the design system. */
.cfc-nl-popup__form .gform_wrapper {
    margin: 0;
}

.cfc-nl-popup__form .gform_footer,
.cfc-nl-popup__form .gform-footer {
    margin-block-start: var(--wp--preset--spacing--50);
    padding: 0;
}

.cfc-nl-popup__form .gform_footer .gform_button,
.cfc-nl-popup__form .gform-footer .gform_button {
    width: 100%;
}

/* Fine print — editor-managed WYSIWYG (np_microcopy), so it arrives wrapped
   in its own <p> and may carry an inline link (e.g. Privacy Policy). */
.cfc-nl-popup__microcopy {
    font-family: var(--wp--preset--font-family--gill-sans);
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--primary);
}

.cfc-nl-popup__microcopy p {
    margin: 0;
    font-size: var(--wp--preset--font-size--small);
}

/* Global links are unstyled (theme.json elements.link) — give the inline link
   its own colour + underline so it reads as a link inside the fine print. */
.cfc-nl-popup__microcopy a {
    color: var(--wp--preset--color--secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cfc-nl-popup__microcopy a:hover,
.cfc-nl-popup__microcopy a:focus-visible {
    color: var(--wp--preset--color--primary);
}

/* Close (×) — honeysuckle circle, top-right (mirrors the events modal close). */
.cfc-nl-popup__close {
    position: absolute;
    top: var(--wp--preset--spacing--50);
    right: var(--wp--preset--spacing--50);
    z-index: var(--wp--custom--z--raised);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wp--custom--button--min-height--sm);
    height: var(--wp--custom--button--min-height--sm);
    padding: 0;
    border: 0;
    border-radius: var(--wp--custom--radius--round);
    background: var(--wp--preset--color--tertiary);
    color: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--large);
    line-height: var(--wp--custom--line-height--none);
    cursor: pointer;
}

.cfc-nl-popup__close:hover {
    background: color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--alpha--faint), var(--wp--preset--color--tertiary));
}

.cfc-nl-popup__close:focus-visible {
    outline: var(--wp--custom--button--focus--outer-width) solid var(--wp--preset--color--primary);
    outline-offset: var(--wp--custom--button--focus--offset);
}

/* Mobile: bottom sheet — photo hidden, full width, top corners only. */
@media (max-width: 599px) {
    .cfc-nl-popup.is-active {
        align-items: flex-end;
        padding: 0;
    }

    .cfc-nl-popup__panel {
        grid-template-columns: 1fr;
        max-width: none;
        height: auto; /* bottom sheet hugs its content… */
        max-height: 85vh; /* …and scrolls inside when the form is longer */
        border-radius: var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0 0;
    }

    .cfc-nl-popup__media {
        display: none;
    }

    .cfc-nl-popup__content {
        padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
    }
}