/* =============================================================================
   NextTechTalents dashboard widgets.
   Lean stylesheet for standalone widget shortcodes ([ntt_events_grid] etc.)
   that get dropped into non-dashboard pages (homepage, event-type archives).
   Self-contained: carries its own brand tokens so it loads without the big
   app.css being present.
   ============================================================================= */

/* Country-flag emoji polyfill (same file app.css registers), so flags
   render on Windows where Segoe UI Emoji has no glyphs for regional
   indicators. unicode-range keeps the font from shadowing any other emoji. */
@font-face {
    font-family: "Twemoji Country Flags";
    src: url("../vendor/flags/TwemojiCountryFlags.woff2") format("woff2");
    font-display: swap;
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F;
}

:root {
    --ntt-w-brand:         #3F37C9;
    --ntt-w-brand-dark:    #17146B;
    --ntt-w-brand-blue:    #4895EF;
    --ntt-w-brand-cyan:    #57C8FA;
    --ntt-w-brand-yellow:  #FFC636;
    --ntt-w-fg:            #111827;
    --ntt-w-fg-soft:       #374151;
    --ntt-w-muted:         #6b7280;
    --ntt-w-border:        #e5e7eb;
    --ntt-w-radius:        10px;
    --ntt-w-radius-sm:     4px;
    --ntt-w-radius-pill:   999px;
    --ntt-w-shadow:        0 1px 2px rgba(17,24,39,.05), 0 6px 20px rgba(17,24,39,.08);
}

/* ─── Events grid ───────────────────────────────────────────────────────── */

.ntt-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1rem;
    box-sizing: border-box;
    /* Inherit the surrounding theme's typography so the grid never fights the
       rest of the site for the base font. */
    font-family: inherit;
}
.ntt-events-grid__empty {
    padding: 2rem;
    color: var(--ntt-w-muted);
    text-align: center;
}

/* Each card is the shared NTT event-pattern image, cover-sized. A dark
   gradient from the top-left anchors the text block so white type stays
   legible over the colourful parts of the image. */
.ntt-events-grid__card {
    position: relative;
    display: block;
    aspect-ratio: 2 / 1;
    min-height: 220px;
    padding: 1.5rem 1.75rem;
    background-image:
        linear-gradient(135deg, rgba(17, 20, 107, 0.72) 0%, rgba(17, 20, 107, 0.15) 55%, transparent 100%),
        url("../images/events.png");
    background-size: cover;
    background-position: center;
    border-radius: 0;
    box-shadow: var(--ntt-w-shadow);
    color: #fff;
    text-decoration: none;
    overflow: hidden;
}
/* Qode theme hits .entry-title a with !important and high specificity, so we
   have to shout back. Blanket white rule on the card and all its children. */
.ntt-events-grid__card,
.ntt-events-grid__card:visited,
.ntt-events-grid__card *,
.ntt-events-grid__card:hover *,
.ntt-events-grid__card:focus-visible * {
    color: #fff !important;
}
a.ntt-events-grid__card:hover,
a.ntt-events-grid__card:focus-visible {
    text-decoration: none;
    outline: none;
}
/* Only the title changes colour on hover: a crisp yellow tint, no lift,
   no shadow pulse, no underline. */
a.ntt-events-grid__card:hover .ntt-events-grid__title,
a.ntt-events-grid__card:focus-visible .ntt-events-grid__title {
    color: var(--ntt-w-brand-yellow) !important;
}

/* Text block in the top-left: all white, no panel. Subtle text-shadow
   handles the rare bright area in the background image. */
.ntt-events-grid__panel {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 80%;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.ntt-events-grid__type {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
}
.ntt-events-grid__title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s ease;
}
.ntt-events-grid__date {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.ntt-events-grid__meta {
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.5;
    opacity: 0.9;
}
.ntt-events-grid__sep {
    opacity: 0.55;
}
.ntt-events-grid__flag {
    font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
    font-style: normal;
    line-height: 1;
    text-shadow: none;
}

/* Responsive: single column + looser aspect ratio on narrow screens so cards
   don't become too tall-and-thin. */
@media (max-width: 640px) {
    .ntt-events-grid { grid-template-columns: 1fr; }
    .ntt-events-grid__card {
        aspect-ratio: auto;
        min-height: 180px;
        padding: 1.25rem 1.35rem;
    }
    .ntt-events-grid__panel { max-width: none; }
    .ntt-events-grid__title { font-size: 1.1rem; }
}

/* ─── News grid ─────────────────────────────────────────────────────────
   Same shape language as the events grid, but driven by WP_Query and
   per-post featured images. Each card inlines its own background-image via
   style="…" so the thumbnail changes per post without extra CSS. */

.ntt-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    box-sizing: border-box;
    font-family: inherit;
}
.ntt-news-grid__empty {
    padding: 2rem;
    color: var(--ntt-w-muted);
    text-align: center;
}

.ntt-news-grid__card {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    min-height: 200px;
    padding: 1.25rem 1.5rem;
    background-size: cover;
    background-position: center;
    border-radius: 0;
    box-shadow: var(--ntt-w-shadow);
    color: #fff;
    text-decoration: none;
    overflow: hidden;
}
/* Qode theme hits .entry-title a with !important and high specificity, so we
   have to shout back. Blanket white rule on the card and all its children. */
.ntt-news-grid__card,
.ntt-news-grid__card:visited,
.ntt-news-grid__card *,
.ntt-news-grid__card:hover *,
.ntt-news-grid__card:focus-visible * {
    color: #fff !important;
}
a.ntt-news-grid__card:hover,
a.ntt-news-grid__card:focus-visible {
    text-decoration: none;
    outline: none;
}
/* Yellow hover wins over the blanket white rule above. */
a.ntt-news-grid__card:hover .ntt-news-grid__title,
a.ntt-news-grid__card:focus-visible .ntt-news-grid__title {
    color: var(--ntt-w-brand-yellow) !important;
}

.ntt-news-grid__panel {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.ntt-news-grid__kicker {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.95;
}
.ntt-news-grid__title {
    margin: 0;
    font-size: 1.1rem;
    font-family: inherit !important;
    font-weight: 600 !important;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s ease;
}
.ntt-news-grid__date {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    opacity: 0.95;
}

@media (max-width: 640px) {
    .ntt-news-grid { grid-template-columns: 1fr; }
    .ntt-news-grid__card {
        aspect-ratio: auto;
        min-height: 180px;
    }
}

/* ─── Event-type quick links ─────────────────────────────────────────────
   Simple row of ghost buttons under the upcoming-events column, one per
   event type. Flex-wraps on narrow widths so three buttons never spill. */

.ntt-event-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-family: inherit;
    box-sizing: border-box;
}
.ntt-event-links__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    background: transparent;
    border: 1.5px solid var(--ntt-w-brand);
    color: var(--ntt-w-brand) !important;
    text-decoration: none !important;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background .15s ease, color .15s ease;
}
.ntt-event-links__btn:hover,
.ntt-event-links__btn:focus-visible {
    background: var(--ntt-w-brand);
    color: #fff !important;
    outline: none;
}