/* ==========================================================================
   NEWS & EVENTS HUB — REUSABLE TEMPLATE STYLES
   ==========================================================================
   - Every rule is scoped under `.ne-scope` so this file can be dropped into
     any existing website without touching its header, footer, nav, or
     global tag styles. No `body`, `header`, `footer`, `nav`, bare `a`,
     or bare `button` selectors are used.
   - Visual identity is controlled by the CSS variables below. To match a
     new institution, override the variables — do not edit the rules.

   HOW TO RE-BRAND (recommended):
     Add a small override AFTER this stylesheet, e.g.:

       .ne-scope {
         --ne-primary: #7a1f1f;      // institution primary colour
         --ne-accent:  #b8860b;      // highlight / badge colour
       }

   ========================================================================== */

.ne-scope {
  /* ---- Theme variables (override these per institution) ---- */
  --ne-primary: #0f4c5c;                 /* deep institutional colour (hero, headings) */
  --ne-secondary: #123b4d;               /* darker companion for gradients */
  --ne-accent: #1d7a63;                  /* buttons, active tab, badges, links */
  --ne-accent-dark: #135242;             /* hover / darker accent */
  --ne-bg: #f4f7f6;                      /* page-section background */
  --ne-surface: #ffffff;                 /* card / panel background */
  --ne-text: #1c2b33;                    /* main text */
  --ne-muted: #5b6b73;                   /* secondary text */
  --ne-border: #dbe4e2;                  /* card and divider borders */
  --ne-radius: 14px;                     /* card corner radius */
  --ne-radius-sm: 8px;                   /* badge / small element radius */
  --ne-shadow: 0 14px 34px rgba(18, 32, 41, 0.08);
  --ne-font: inherit;                    /* inherits the host website's font by default */
  --ne-max-width: 1180px;                /* content container width */

  font-family: var(--ne-font);
  color: var(--ne-text);
  /* Guard against horizontal overflow leaking out of the section */
  overflow-x: clip;
}

/* Sensible resets, applied ONLY inside the template wrapper */
.ne-scope *,
.ne-scope *::before,
.ne-scope *::after {
  box-sizing: border-box;
}

.ne-scope img {
  max-width: 100%;
  display: block;
}

.ne-container {
  max-width: var(--ne-max-width);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Accessible focus ring for every interactive element in the template */
.ne-scope a:focus-visible,
.ne-scope button:focus-visible {
  outline: 3px solid var(--ne-accent);
  outline-offset: 2px;
  border-radius: var(--ne-radius-sm);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.ne-hero {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: linear-gradient(115deg, var(--ne-primary), var(--ne-secondary));
  color: #fff;
  text-align: center;
}

.ne-hero-kicker {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.ne-hero-title {
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.1;
  color: #fff;
}

.ne-hero-lede {
  max-width: 46rem;
  margin: 0.9rem auto 0;
  font-size: clamp(0.98rem, 1.6vw, 1.1rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}

/* --------------------------------------------------------------------------
   Main body section
   -------------------------------------------------------------------------- */
.ne-body {
  padding-block: clamp(2rem, 5vw, 3.5rem);
  background: var(--ne-bg);
}

/* --------------------------------------------------------------------------
   Tabs (visible on all sizes; they collapse sections on mobile,
   and act as quick filters on desktop)
   -------------------------------------------------------------------------- */
.ne-tabs {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
  overflow-x: auto;               /* never causes page-level overflow */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ne-tabs::-webkit-scrollbar {
  display: none;
}

.ne-tab {
  flex: 1 0 auto;
  min-height: 48px;               /* touch-friendly */
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--ne-border);
  border-radius: 999px;
  background: var(--ne-surface);
  color: var(--ne-text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.ne-tab:hover {
  border-color: var(--ne-accent);
  color: var(--ne-accent-dark);
}

.ne-tab.is-active {
  border-color: var(--ne-accent);
  background: var(--ne-accent);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Status line (loading / info / error messages)
   -------------------------------------------------------------------------- */
.ne-status {
  margin: 0 0 1.2rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--ne-border);
  border-radius: var(--ne-radius-sm);
  background: var(--ne-surface);
  color: var(--ne-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.ne-status.is-error {
  border-color: rgba(185, 28, 28, 0.35);
  background: #fdf3f3;
  color: #8a1d1d;
}

/* --------------------------------------------------------------------------
   Layout: news (wide) + events (sidebar) on desktop
   -------------------------------------------------------------------------- */
.ne-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(300px, 0.9fr);
  gap: 1.4rem;
  align-items: start;
}

.ne-panel {
  border: 1px solid var(--ne-border);
  border-radius: var(--ne-radius);
  background: var(--ne-surface);
  box-shadow: var(--ne-shadow);
  min-width: 0;                    /* prevents grid blowout / overflow */
}

.ne-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.5rem 0;
}

.ne-panel-title {
  position: relative;
  margin: 0;
  padding-left: 0.8rem;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--ne-text);
}

.ne-panel-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.12em;
  width: 4px;
  border-radius: 999px;
  background: var(--ne-accent);
}

.ne-list {
  display: grid;
  gap: 1rem;
  padding: 1.2rem 1.5rem 1.5rem;
}

/* --------------------------------------------------------------------------
   News cards
   -------------------------------------------------------------------------- */
.ne-news-card {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 1.1rem;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ne-border);
}

.ne-news-card:last-child,
.ne-event-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ne-media {
  overflow: hidden;
  border-radius: var(--ne-radius-sm);
  background: color-mix(in srgb, var(--ne-accent) 8%, var(--ne-surface));
}

.ne-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Branded placeholder shown when no image is provided (never a broken image) */
.ne-placeholder {
  display: grid;
  place-items: center;
  gap: 0.25rem;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0.8rem;
  background: linear-gradient(135deg, var(--ne-accent-dark), var(--ne-accent));
  color: #fff;
  text-align: center;
}

.ne-placeholder-mark {
  display: grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
}

.ne-placeholder-label {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
}

.ne-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.45rem;
}

.ne-card-date {
  color: var(--ne-muted);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Category / platform / event-type badge */
.ne-badge {
  display: inline-flex;
  width: fit-content;
  padding: 0.36rem 0.5rem;
  border-radius: var(--ne-radius-sm);
  background: color-mix(in srgb, var(--ne-accent) 14%, var(--ne-surface));
  color: var(--ne-accent-dark);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ne-badge-featured {
  background: #fff3d6;
  color: #8b5c00;
}

.ne-card-title {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ne-text);
}

.ne-card-text {
  margin: 0.4rem 0 0;
  color: var(--ne-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Text-style call-to-action link */
.ne-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 0.6rem;
  color: var(--ne-accent);
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
}

.ne-link::after {
  content: "\2192";               /* → */
  margin-left: 0.35rem;
  transition: transform 0.18s ease;
}

.ne-link:hover {
  color: var(--ne-accent-dark);
  text-decoration: underline;
}

.ne-link:hover::after {
  transform: translateX(3px);
}

.ne-card-body {
  min-width: 0;                    /* text can shrink; prevents overflow */
}

/* --------------------------------------------------------------------------
   Event rows (calendar-block style)
   -------------------------------------------------------------------------- */
.ne-event-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 0.9rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ne-border);
}

.ne-date-block {
  align-self: start;
  overflow: hidden;
  border: 1px solid var(--ne-border);
  border-radius: var(--ne-radius-sm);
  background: var(--ne-surface);
  text-align: center;
  box-shadow: 0 6px 16px rgba(18, 32, 41, 0.08);
}

.ne-date-block-month {
  display: block;
  padding-block: 0.4rem;
  background: var(--ne-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.ne-date-block-day {
  display: block;
  padding-block: 0.45rem;
  color: var(--ne-text);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.ne-event-meta {
  margin: 0.35rem 0 0;
  color: var(--ne-muted);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Social highlights grid
   -------------------------------------------------------------------------- */
.ne-panel-social {
  margin-top: 1.4rem;
}

.ne-social-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.2rem 1.5rem 1.5rem;
}

.ne-social-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ne-border);
  border-radius: var(--ne-radius-sm);
  background: var(--ne-surface);
}

.ne-social-media {
  position: relative;
  background: color-mix(in srgb, var(--ne-accent) 8%, var(--ne-surface));
}

.ne-social-media img,
.ne-social-media .ne-placeholder {
  aspect-ratio: 16 / 9;
}

/* Platform badge pinned on the thumbnail */
.ne-platform {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  display: inline-flex;
  padding: 0.36rem 0.5rem;
  border-radius: var(--ne-radius-sm);
  background: rgba(18, 32, 41, 0.86);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

/* Recognisable platform colours */
.ne-platform-instagram { background: #c13584; }
.ne-platform-facebook  { background: #1877f2; }
.ne-platform-youtube   { background: #cc0000; }
.ne-platform-x         { background: #111111; }
.ne-platform-linkedin  { background: #0a66c2; }
.ne-platform-website   { background: var(--ne-accent-dark); }

.ne-social-body {
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem;
}

.ne-social-body .ne-card-date {
  white-space: normal;
}

/* --------------------------------------------------------------------------
   Loading, empty, and error states
   -------------------------------------------------------------------------- */
.ne-empty {
  margin: 0;
  padding: 1.2rem;
  border: 1px dashed var(--ne-border);
  border-radius: var(--ne-radius-sm);
  background: color-mix(in srgb, var(--ne-bg) 55%, var(--ne-surface));
  color: var(--ne-muted);
  font-weight: 600;
}

/* Skeleton shimmer shown while the CSV is being fetched */
.ne-skeleton {
  height: 96px;
  border-radius: var(--ne-radius-sm);
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--ne-border) 55%, var(--ne-surface)) 30%,
    var(--ne-surface) 50%,
    color-mix(in srgb, var(--ne-border) 55%, var(--ne-surface)) 70%
  );
  background-size: 220% 100%;
  animation: ne-shimmer 1.4s ease infinite;
}

@keyframes ne-shimmer {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ne-skeleton { animation: none; }
  .ne-link::after { transition: none; }
}

/* --------------------------------------------------------------------------
   Responsive behaviour
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .ne-layout {
    grid-template-columns: 1fr;    /* stack news above events on tablets */
  }

  .ne-social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ne-panel-head,
  .ne-list,
  .ne-social-grid {
    padding-inline: 1rem;
  }

  .ne-news-card {
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: start;
  }

  /* On phones, hide the summary to keep news cards compact */
  .ne-news-card .ne-card-text {
    display: none;
  }

  .ne-card-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  /* MOBILE TABS: the active tab decides which section is visible.
     The JS sets data-ne-active on the wrapper; these rules do the rest.
     On wider screens all sections stay visible and tabs simply highlight. */
  [data-ne-app][data-ne-active="news"]   [data-ne-section="events"],
  [data-ne-app][data-ne-active="news"]   [data-ne-section="social"],
  [data-ne-app][data-ne-active="events"] [data-ne-section="news"],
  [data-ne-app][data-ne-active="events"] [data-ne-section="social"],
  [data-ne-app][data-ne-active="social"] [data-ne-section="news"],
  [data-ne-app][data-ne-active="social"] [data-ne-section="events"] {
    display: none;
  }

  .ne-panel-social {
    margin-top: 0;
  }

  .ne-social-grid {
    grid-template-columns: 1fr;
  }

  .ne-tab {
    flex: 1 1 0;
  }
}