/* ==========================================================================
   Connect page redesign — Influential Women
   Scoped under .connect-redesign for the page surface,
   and .explore-iw for the shared Explore section (used on connect + about).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page scope — tokens, body font, background
   -------------------------------------------------------------------------- */
.connect-redesign {
    --pink: #FF68B4;
    --pink-light: #FFA3D1;
    --magenta: #D65DB1;
    --soft-pink: #F8C8E0;
    --pale-pink: #FFF3FA;
    --plum: #571545;
    --ink: #1E1E1E;
    --ink-soft: #6b5a66;
    --line: #f0e4ef;
    --cta-grad: linear-gradient(135deg, #FF68B4 0%, #FFA3D1 100%);

    --display: "Playfair Display", Georgia, serif;
    --ui: "Poppins", system-ui, sans-serif;
    --body: "Inter", system-ui, sans-serif;

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-pill: 999px;

    --shadow-sm: 0 2px 10px rgba(87, 21, 69, .06);
    --shadow-md: 0 10px 30px rgba(87, 21, 69, .08);

    background: var(--pale-pink);
    font-family: var(--body);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.connect-redesign *,
.connect-redesign *::before,
.connect-redesign *::after {
    box-sizing: border-box;
}

.connect-redesign .wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */
.connect-redesign__hero {
    padding: 88px 0 56px;
    text-align: center;
}

.connect-redesign__hero .eyebrow {
    display: inline-block;
    font-family: var(--ui);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pink);
    margin-bottom: 18px;
}

.connect-redesign__hero h1,
.connect-redesign__hero h2 {
    font-family: var(--display);
    font-weight: 700;
    color: var(--plum);
    font-size: 64px;
    line-height: 1.08;
    letter-spacing: -.015em;
    margin: 0 0 24px;
}

.connect-redesign__hero .lede {
    font-family: var(--body);
    font-size: 20px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 680px;
    margin: 0 auto 36px;
}

/* --------------------------------------------------------------------------
   3. Pill search form
   -------------------------------------------------------------------------- */
.dir-search {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border: 1px solid var(--soft-pink);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-md);
    padding: 8px 8px 8px 24px;
    max-width: 720px;
    margin: 0 auto;
}

.dir-search .field {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    padding: 10px 18px;
    min-width: 0;
}

.dir-search .field + .field {
    border-left: 1px solid var(--line);
}

.dir-search .field svg {
    flex: 0 0 auto;
    color: var(--pink);
    width: 18px;
    height: 18px;
}

.dir-search .field input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    font-family: var(--body);
    font-size: 15.5px;
    color: var(--ink);
    padding: 4px 0;
}

.dir-search .field input::placeholder {
    color: var(--ink-soft);
    opacity: .85;
}

.dir-search .field.zip {
    flex: 0 1 200px;
}

.dir-search .btn-primary {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--cta-grad);
    color: #fff;
    border: 0;
    border-radius: var(--r-pill);
    font-family: var(--ui);
    font-weight: 600;
    font-size: 15px;
    padding: 14px 30px;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.dir-search .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(255, 104, 180, .35);
}

.search-note {
    font-family: var(--ui);
    font-size: 13.5px;
    color: var(--ink-soft);
    text-align: center;
    margin-top: 18px;
}

.search-note a {
    color: var(--magenta);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.search-note a:hover {
    color: var(--plum);
}

/* --------------------------------------------------------------------------
   4. Section scaffolding (alternating stripes)
   -------------------------------------------------------------------------- */
.connect-redesign__section {
    padding: 72px 0;
}

.connect-redesign__section--alt {
    background: #fff;
}

.connect-redesign__section .dir-head {
    max-width: 720px;
    margin: 0 auto 38px;
    text-align: center;
}

.connect-redesign__section .dir-head .eyebrow {
    display: inline-block;
    font-family: var(--ui);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pink);
    margin-bottom: 14px;
}

.connect-redesign__section .dir-head h1,
.connect-redesign__section .dir-head h2 {
    font-family: var(--display);
    font-weight: 700;
    color: var(--plum);
    font-size: 42px;
    line-height: 1.1;
    letter-spacing: -.01em;
    margin: 0 0 14px;
}

.connect-redesign__section .dir-head h1 em,
.connect-redesign__section .dir-head h1 .italic,
.connect-redesign__section .dir-head h2 em,
.connect-redesign__section .dir-head h2 .italic {
    font-style: italic;
    font-weight: 600;
    color: var(--magenta);
}

.connect-redesign__section .dir-head .lede {
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
}

/* 5. Browse by state & city grid */
.city-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 32px;
}

.city-link {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    font-family: var(--ui);
    font-size: 16px;
    color: var(--ink);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 11px 0;
    text-align: left;
    cursor: pointer;
    transition: color .2s ease, gap .2s ease;
}

.city-link svg {
    flex: 0 0 auto;
    color: var(--pink);
    width: 15px;
    height: 15px;
}

.city-link .city-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.city-link .city-count {
    margin-left: auto;
    font-family: var(--ui);
    font-size: 12.5px;
    color: var(--ink-soft);
    flex: 0 0 auto;
}

.city-link:hover {
    color: var(--magenta);
    gap: 12px;
}

.city-link:focus-visible {
    outline: 2px solid var(--magenta);
    outline-offset: 4px;
    border-radius: 2px;
    color: var(--magenta);
}

/* 5b. State modal (per-state towns dialog) */
html:has(dialog.state-modal[open]) {
    overflow: hidden;
}

.state-modal {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    max-width: min(960px, calc(100% - 32px));
    width: 100%;
    max-height: 90vh;
    border-radius: var(--r-lg);
}

.state-modal::backdrop {
    background: rgba(57, 17, 47, 0.55);
}

.state-modal__inner {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.state-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--line);
    background: var(--pale-pink);
}

.state-modal__head h3 {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    color: var(--plum);
    font-size: 22px;
    line-height: 1.2;
}

.state-modal__close {
    background: transparent;
    border: 0;
    color: var(--plum);
    padding: 6px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 0;
    transition: background-color .15s ease, color .15s ease;
}

.state-modal__close svg {
    width: 20px;
    height: 20px;
}

.state-modal__close:hover {
    background: rgba(0, 0, 0, .06);
    color: var(--magenta);
}

.state-modal__close:focus-visible {
    outline: 2px solid var(--magenta);
    outline-offset: 2px;
}

/* Link to the state hub itself. Sits above the town grid because the hub is
   the broader of the two choices, and because it was previously unreachable
   from this page at all.

   Treatment follows .link-more in profile-redesign.css, which is the same
   journey (member -> "Browse all members" -> state hub): UI face, weight 600,
   brand colour, and an arrow that slides on hover via the gap. The hairline
   below borrows .city-link's separator idiom so the link reads as a peer of the
   town list rather than a button pasted above it. */
.state-modal__all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 14px 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    font-family: var(--ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--magenta);
    text-decoration: none;
    transition: gap .2s ease, color .2s ease;
}

.state-modal__all svg {
    flex: 0 0 auto;
}

.state-modal__all:hover {
    gap: 10px;
    color: var(--pink);
}

.state-modal__all:focus-visible {
    outline: 2px solid var(--magenta);
    outline-offset: 4px;
    border-radius: 2px;
}

.state-modal__towns {
    list-style: none;
    margin: 0;
    padding: 12px 16px;
    max-height: 65vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px 8px;
}

.state-modal__town {
    display: block;
    padding: 10px 12px;
    font-family: var(--ui);
    font-size: 15px;
    color: var(--ink);
    text-decoration: none;
    border-radius: var(--r-sm);
    transition: background-color .15s ease, color .15s ease;
}

.state-modal__town:hover {
    background: var(--pale-pink);
    color: var(--magenta);
}

.state-modal__town:focus-visible {
    outline: 2px solid var(--magenta);
    outline-offset: -2px;
    background: var(--pale-pink);
    color: var(--magenta);
}

@media (max-width: 900px) {
    .state-modal__towns {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .state-modal__head { padding: 14px 18px; }
    .state-modal__head h3 { font-size: 19px; }
    .state-modal__towns {
        grid-template-columns: 1fr;
        padding: 10px 12px;
        max-height: 70vh;
    }
}

/* --------------------------------------------------------------------------
   6. Recently joined grid + cards
   -------------------------------------------------------------------------- */
.recent-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

.recent-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, box-shadow .25s ease;
}

.recent-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.recent-card__ph {
    aspect-ratio: 4 / 5;
    background: #f4e3ef;
    overflow: hidden;
}

.recent-card__ph img,
.recent-card__ph picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.recent-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 24px;
}

.recent-card b {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    color: var(--plum);
    font-size: 21px;
    line-height: 1.2;
}

.recent-card__role {
    font-family: var(--ui);
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.4;
    margin: 8px 0 0;
}

.recent-card__city {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ui);
    font-size: 13px;
    color: var(--ink-soft);
    margin: 8px 0 16px;
}

.recent-card__city svg {
    flex: 0 0 auto;
    color: var(--pink);
    width: 13px;
    height: 13px;
}

.recent-card__industry {
    align-self: flex-start;
    margin-top: auto;
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--magenta);
    background: var(--pale-pink);
    border: 1px solid var(--soft-pink);
    border-radius: var(--r-pill);
    padding: 5px 12px;
}

/* --------------------------------------------------------------------------
   7. Empty state
   -------------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 56px 0;
}

.empty-state h3 {
    font-family: var(--display);
    font-weight: 700;
    color: var(--plum);
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 12px;
}

.empty-state p {
    font-family: var(--body);
    font-size: 16px;
    color: var(--ink-soft);
    margin: 0 auto;
    max-width: 480px;
}

/* --------------------------------------------------------------------------
   8. Join band (CTA strip)
   -------------------------------------------------------------------------- */
.join-band {
    background: #F8C8E0;
    text-align: center;
}

.join-band .wrap {
    padding: 36px var(--pr-pad, 40px);
    font-family: var(--ui);
    font-size: 21px;
    font-weight: 500;
    color: var(--plum);
}

.join-band a {
    color: #D65DB1;
    font-weight: 700;
    text-decoration: none;
}

.join-band a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================================
   EXPLORE SECTION — styles now live inline inside the partial:
   templates/public/default/components/explore-section.html.twig
   (Self-contained so any page including the partial Just Works.)
   ========================================================================== */

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .connect-redesign .city-grid,
    .connect-redesign .recent-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .connect-redesign .city-grid,
    .connect-redesign .recent-grid {
        grid-template-columns: 1fr;
    }

    .connect-redesign__hero h1,
    .connect-redesign__hero h2 {
        font-size: 40px;
    }

    .connect-redesign .dir-search {
        flex-direction: column;
        border-radius: 24px;
        padding: 16px;
        gap: 4px;
    }

    .connect-redesign .dir-search .field {
        width: 100%;
        padding: 12px 14px;
    }

    .connect-redesign .dir-search .field + .field {
        border-left: none;
        border-top: 1px solid var(--line);
    }

    .connect-redesign .dir-search .field.zip {
        border-left: none;
        flex: 1 1 auto;
    }

    .connect-redesign .dir-search .btn-primary {
        width: 100%;
        margin-top: 6px;
    }
}