/* =============================================================================
   NextTechTalents — Projects
   Single-file stylesheet for the [ntt_projects] shortcode.
   Scoped to .ntt-projects to avoid bleeding into the surrounding theme.
   ============================================================================= */

:root {
    /* Neutral scale */
    --ntt-color-fg:        #111827;
    --ntt-color-fg-soft:   #374151;
    --ntt-color-muted:     #6b7280;
    --ntt-color-border:    #e5e7eb;
    --ntt-color-border-2:  #d1d5db;
    --ntt-color-bg-soft:   #f9fafb;
    --ntt-color-disabled:  #d1d5db;

    /* NextTechTalents brand */
    --ntt-brand:           #3F37C9;  /* deep purple — primary */
    --ntt-brand-dark:      #17146B;  /* navy           — pressed / hover-dark */
    --ntt-brand-blue:      #4895EF;  /* mid blue       — reserved for future use */
    --ntt-brand-cyan:      #57C8FA;  /* light cyan     — reserved */
    --ntt-brand-yellow:    #FFC636;  /* reserved */
    --ntt-brand-brown:     #C98200;  /* reserved */

    /* Semantic aliases */
    --ntt-color-accent:    var(--ntt-brand);
    --ntt-color-accent-d:  var(--ntt-brand-dark);

    --ntt-radius:          5px;
    --ntt-radius-sm:       6px;
    --ntt-radius-pill:     999px;

    --ntt-font-sans: "Exo 2", Sans-serif;
    --ntt-font-mono: "Exo 2", Sans-serif;

    --ntt-shadow-sm:       0 1px 2px rgba(17,24,39,.04);
    --ntt-shadow:          0 1px 2px rgba(17,24,39,.04), 0 4px 16px rgba(17,24,39,.05);
    --ntt-shadow-lg:       0 1px 2px rgba(17,24,39,.04), 0 8px 24px rgba(17,24,39,.08);

    --ntt-control-h:       42px;
}

/* Hide [x-cloak] until Alpine wakes up */
.ntt-projects [x-cloak] { display: none !important; }

.ntt-projects {
    font-family: var(--ntt-font-sans);
    color: var(--ntt-color-fg);
    line-height: 1.55;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
}
.ntt-projects * { box-sizing: border-box; }

.ntt-projects__loading,
.ntt-projects__error,
.ntt-projects__empty {
    padding: 2rem;
    text-align: center;
    color: var(--ntt-color-muted);
}

/* ─── Toolbar ─────────────────────────────────────────────────────────────── */
.ntt-projects__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--ntt-color-border);
}

/* Search — height = --ntt-control-h, takes available space */
.ntt-projects__search {
    flex: 1 1 280px;
    display: flex;
    align-items: center;
    align-self: stretch; /* belt + braces: never let flex layout shrink us */
    gap: 0.5rem;
    height: var(--ntt-control-h);
    padding: 0 0.85rem;
    background: #fff;
    border: 1px solid var(--ntt-color-border);
    border-radius: var(--ntt-radius);
    transition: border-color .15s, box-shadow .15s;
}
.ntt-projects__search:focus-within {
    border-color: var(--ntt-color-accent);
    box-shadow: 0 0 0 3px rgba(63, 55, 201, .18); /* var(--ntt-brand) at 18% */
}
.ntt-projects__search.is-active {
    border-color: var(--ntt-color-accent);
}
.ntt-projects__search-icon {
    width: 18px;
    height: 18px;
    color: var(--ntt-color-muted);
    flex-shrink: 0;
}
.ntt-projects__search input {
    flex: 1;
    /* Reset UA chrome on type="search" (Chrome/Safari add their own padding) */
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    /* Override the .ntt-projects line-height (1.55), otherwise the placeholder
       sits above the icon baseline on Chrome */
    line-height: 1.2;
    color: var(--ntt-color-fg);
    padding: 0;
    margin: 0;
    /* No explicit height — flex parent + align-items:center handles centring */
}
.ntt-projects__search input::placeholder { color: var(--ntt-color-muted); }
.ntt-projects__search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Result count, lives INSIDE the search box on the right */
.ntt-projects__search-count {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding-left: 0.5rem;
    border-left: 1px solid var(--ntt-color-border);
    color: var(--ntt-color-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}
.ntt-projects__search-count strong {
    color: var(--ntt-color-fg);
    font-weight: 600;
    margin-right: 0.15rem;
}

/* Map / List toggle — same height as search */
.ntt-projects__toggle {
    display: inline-flex;
    align-self: stretch;
    height: var(--ntt-control-h);
    border: 1px solid var(--ntt-color-border);
    border-radius: var(--ntt-radius);
    overflow: hidden;
    background: #fff;
}
.ntt-projects__toggle button {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0 1.1rem;
    font: inherit;
    font-weight: 500;
    color: var(--ntt-color-fg-soft);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ntt-projects__toggle button:not(:last-child) {
    border-right: 1px solid var(--ntt-color-border);
}
.ntt-projects__toggle button:hover {
    background: var(--ntt-color-bg-soft);
    color: var(--ntt-color-fg);
}
.ntt-projects__toggle button.is-active {
    background: var(--ntt-color-accent);
    color: #fff;
}

/* ─── Map view ────────────────────────────────────────────────────────────── */
.ntt-projects__map-wrap {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 1rem;
}
@media (max-width: 720px) {
    .ntt-projects__map-wrap { grid-template-columns: 1fr; }
}

/* Left column wraps the map and its attribution line below */
.ntt-projects__map-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}
.ntt-projects__map {
    height: 560px;
    border-radius: var(--ntt-radius);
    border: 1px solid var(--ntt-color-border);
    background: var(--ntt-color-bg-soft);
}
@media (max-width: 720px) {
    .ntt-projects__map { height: 420px; }
}
/* Footer line under the map: disclaimer left, OSM/CARTO attribution right.
   On narrow screens they wrap onto separate lines. */
.ntt-projects__map-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    justify-content: space-between;
    align-items: baseline;
}
.ntt-projects__map-disclaimer,
.ntt-projects__map-attribution {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--ntt-color-muted);
}
.ntt-projects__map-disclaimer { font-style: italic; }
.ntt-projects__map-attribution { text-align: right; }
.ntt-projects__map-attribution a {
    color: var(--ntt-color-muted);
    text-decoration: underline;
    text-decoration-color: var(--ntt-color-border-2);
}
.ntt-projects__map-attribution a:hover {
    color: var(--ntt-color-fg-soft);
}

/* Legend (right column of map view) — interactive filter */
.ntt-projects__legend {
    border: 1px solid var(--ntt-color-border);
    border-radius: var(--ntt-radius);
    background: #fff;
    max-height: 560px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 0.875rem;
}
.ntt-projects__legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--ntt-color-border);
    background: var(--ntt-color-bg-soft);
}
.ntt-projects__legend-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ntt-color-muted);
}
.ntt-projects__legend-reset {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--ntt-color-accent);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}
.ntt-projects__legend-reset:hover { text-decoration: underline; }

.ntt-projects__legend-list {
    list-style: none;
    padding: 0.35rem;
    margin: 0;
    overflow-y: auto;
}
.ntt-projects__legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0.45rem 0.6rem;
    border-radius: var(--ntt-radius-sm);
    color: var(--ntt-color-fg);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.ntt-projects__legend-item:hover {
    background: var(--ntt-color-bg-soft);
}
.ntt-projects__legend-item.is-selected {
    background: var(--ntt-color-accent);
    color: #fff;
}
.ntt-projects__legend-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ntt-projects__legend-count {
    font-size: 0.75rem;
    font-family: var(--ntt-font-mono);
    color: var(--ntt-color-muted);
    flex-shrink: 0;
}
.ntt-projects__legend-item.is-selected .ntt-projects__legend-count {
    color: rgba(255, 255, 255, 0.85);
}

/* Map pins — subtle drop shadow so dots lift off the pale CartoDB base */
.ntt-projects__map .ntt-pin {
    filter: drop-shadow(0 1px 1.5px rgba(17, 24, 39, .35));
    transition: r 0.15s;
}
.ntt-projects__map .ntt-pin:hover {
    cursor: pointer;
}

/* Country-highlight polygons: subtle cross-fade when the selected project
   changes. Leaflet renders GeoJSON as SVG paths inside the overlay pane. */
.ntt-projects__map .leaflet-overlay-pane path {
    transition: fill-opacity 0.25s ease, stroke-opacity 0.25s ease, stroke-width 0.25s ease;
}

/* Map popup */
.leaflet-popup-content .ntt-popup {
    font-family: var(--ntt-font-sans);
    line-height: 1.45;
}
.ntt-popup__partner {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ntt-color-fg);
    margin-bottom: 2px;
}
.ntt-popup__meta {
    color: var(--ntt-color-muted);
    font-size: 0.82rem;
    margin-bottom: 6px;
}
.ntt-popup__project {
    /* block + fit-content: forces its own line so the Website link below it
       isn't visually attached to the project pill (which could be misread as
       "the project's website"). */
    display: block;
    width: fit-content;
    padding: 2px 8px;
    margin-bottom: 8px;
    background: rgba(63, 55, 201, 0.08);  /* brand @ 8% */
    color: var(--ntt-brand);
    border-radius: var(--ntt-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.ntt-popup__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--ntt-color-accent);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}
.ntt-popup__link:hover { text-decoration: underline; }
.ntt-popup__icon {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

/* ─── List view ───────────────────────────────────────────────────────────── */
.ntt-projects__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ntt-projects__card {
    /* "--accent" is still used by "Show more" link and social-hover for a
       brand-coloured touch. The visible left stripe was removed per design. */
    --accent: var(--ntt-brand);
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1.5rem;
    padding: 2.5rem;
    background: #fff;
    border: 1px solid var(--ntt-color-border);
    border-radius: var(--ntt-radius);
    box-shadow: var(--ntt-shadow-sm);
}
@media (max-width: 640px) {
    .ntt-projects__card {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.ntt-projects__card-logo {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.25rem;
}
.ntt-projects__card-logo img {
    max-width: 100%;
    height: auto;
    max-height: 110px;
    object-fit: contain;
}

.ntt-projects__card-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

/* Header block */
.ntt-projects__card-header {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.ntt-projects__card-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ntt-color-fg);
}
.ntt-projects__card-subtitle {
    margin: 0;
    color: var(--ntt-color-fg-soft);
    font-size: 0.975rem;
    line-height: 1.5;
}
/* Meta line under the subtitle: one plain, subtle text row with "|"
   separators between items. No boxes, no chips. */
.ntt-projects__card-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    list-style: none;
    padding: 0;
    margin: 0.35rem 0 0;
    color: var(--ntt-color-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}
.ntt-projects__card-badges li {
    display: inline-flex;
    align-items: baseline;
}
.ntt-projects__card-badges li + li::before {
    content: "|";
    margin: 0 0.6rem;
    color: var(--ntt-color-border-2);
}

/* Abstract — uses <details>/<summary> */
.ntt-projects__abstract { margin: 0; }
.ntt-projects__abstract summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    color: var(--ntt-color-fg-soft);
    font-size: 0.945rem;
    line-height: 1.55;
}
.ntt-projects__abstract summary::-webkit-details-marker { display: none; }
.ntt-projects__abstract summary::after {
    content: "Show more ▾";
    display: inline-block;
    margin-top: 0.25rem;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
}
.ntt-projects__abstract[open] summary::after {
    content: "Show less ▴";
}
.ntt-projects__abstract-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ntt-projects__abstract[open] .ntt-projects__abstract-text { display: none; }
.ntt-projects__abstract-full {
    color: var(--ntt-color-fg-soft);
    font-size: 0.945rem;
    line-height: 1.55;
}
.ntt-projects__abstract:not([open]) .ntt-projects__abstract-full { display: none; }

/* Footer (socials + CTAs) */
.ntt-projects__card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
}

/* Socials — small circular icon buttons. Absent channels are not rendered. */
.ntt-projects__socials {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.4rem;
}
.ntt-projects__socials li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--ntt-color-border);
    background: #fff;
    color: var(--ntt-color-fg-soft);
    text-decoration: none;
    transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.ntt-projects__socials svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}
.ntt-projects__socials li > a:hover {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    transform: translateY(-1px);
}

/* CTA buttons */
.ntt-projects__card-links {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ntt-projects__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    border-radius: var(--ntt-radius-sm);
    border: 1px solid var(--ntt-color-border-2);
    background: #fff;
    color: var(--ntt-color-fg);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    transition: border-color .15s, color .15s, background .15s, transform .15s;
}
.ntt-projects__link:hover {
    border-color: var(--ntt-color-fg);
    color: var(--ntt-color-fg);
    transform: translateY(-1px);
}
.ntt-projects__link svg {
    width: 14px;
    height: 14px;
}
.ntt-projects__link--primary {
    background: var(--ntt-color-accent);
    color: #fff;
    border-color: var(--ntt-color-accent);
}
.ntt-projects__link--primary:hover {
    background: var(--ntt-color-accent-d);
    border-color: var(--ntt-color-accent-d);
    color: #fff;
}