/* ==========================================================================
   CLM Newsroom - shared design system
   Layout + component shell used by every per-site design. Only the CSS
   custom properties below (and a handful of per-design overrides in
   clm-design-<slug>.css) change from site to site.
   Loaded only when a design is active; the original look lives in
   clm-newsroom.css and is untouched.
   ========================================================================== */

.clm-nr {
  /* Brand tokens - overridden per design */
  --clm-accent: #213A5C;
  --clm-accent-contrast: #FFFFFF;
  --clm-font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --clm-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Surface tokens */
  --clm-title: #16233A;
  --clm-body-text: #4B5563;
  --clm-meta-text: #3F4A5A;
  --clm-date-text: #9AA3AF;
  --clm-card-bg: #FFFFFF;
  --clm-card-border: #E7E9EC;
  --clm-card-radius: 10px;
  --clm-card-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --clm-field-border: #E3E6EA;
  --clm-featured-bg: #F8F9FB;
  --clm-grid-gap: 24px;
  --clm-field-width: 284px;

  box-sizing: border-box;
  font-family: var(--clm-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--clm-body-text);
  -webkit-font-smoothing: antialiased;
}

.clm-nr *,
.clm-nr *::before,
.clm-nr *::after { box-sizing: border-box; }

.clm-nr img { max-width: 100%; height: auto; }
.clm-nr p { margin: 0; }
.clm-nr a { text-decoration: none; }

/* ── Search ─────────────────────────────────────────────────────────── */

.clm-nr__bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0 18px;
}

.clm-nr__search {
  display: flex;
  align-items: center;
  width: var(--clm-field-width);
  max-width: 100%;
  height: 40px;
  background: #fff;
  border: 1px solid var(--clm-field-border);
  border-radius: 8px;
  overflow: hidden;
}

.clm-nr__search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 12px;
  font-family: var(--clm-font-body);
  font-size: 14px;
  color: var(--clm-title);
  box-shadow: none;
}

.clm-nr__search input::placeholder { color: #9AA3AF; opacity: 1; }

.clm-nr__search button {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-right: 7px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--clm-accent);
  color: var(--clm-accent-contrast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.clm-nr__search svg { width: 14px; height: 14px; display: block; }

/* ── Grid ───────────────────────────────────────────────────────────── */

.clm-nr__grid {
  display: grid;
  gap: var(--clm-grid-gap);
  align-items: start;
}

.clm-nr__grid--1 { grid-template-columns: minmax(0, 1fr); }
.clm-nr__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clm-nr__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* The Elementor tab panel decides how wide the stories column actually is,
   so when the browser supports container queries we adapt the grid to the
   column instead of the viewport. The media queries below stay as the
   fallback for browsers without them. */
@supports (container-type: inline-size) {
  .clm-nr { container-type: inline-size; }

  @container (max-width: 1000px) {
    .clm-nr__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @container (max-width: 660px) {
    .clm-nr__grid--2,
    .clm-nr__grid--3 { grid-template-columns: minmax(0, 1fr); }
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 1024px) {
    .clm-nr__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 700px) {
    .clm-nr__grid--2,
    .clm-nr__grid--3 { grid-template-columns: minmax(0, 1fr); }
  }
}

/* ── Card shell ─────────────────────────────────────────────────────── */

.clm-nr-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--clm-card-bg);
  border: 1px solid var(--clm-card-border);
  border-radius: var(--clm-card-radius);
  box-shadow: var(--clm-card-shadow);
  overflow: hidden;
  position: relative;
  transition: box-shadow .18s ease, transform .18s ease;
}

.clm-nr-card[hidden] { display: none; }

.clm-nr-card:hover {
  box-shadow: 0 10px 24px -12px rgba(16, 24, 40, .28);
}

.clm-nr-card__media {
  display: block;
  width: 100%;
  background: #0F172A;
  overflow: hidden;
}

.clm-nr-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clm-nr-card__media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
}

/* ── Grid (Featured News / Editorial) card ──────────────────────────── */

.clm-nr-card--grid .clm-nr-card__media { aspect-ratio: 1.92 / 1; }

.clm-nr-card--grid .clm-nr-card__body {
  flex: 1 1 auto;
  padding: 16px 20px 0;
}

.clm-nr-card__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 21px;
}

.clm-nr-badge {
  display: inline-block;
  font-family: var(--clm-font-display);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .2px;
  padding: 5px 8px;
  border-radius: 4px;
  background: var(--clm-accent);
  color: var(--clm-accent-contrast);
  white-space: nowrap;
}

.clm-nr-card__company {
  font-size: 13px;
  color: var(--clm-meta-text);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.clm-nr-card__company::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #C7CCD4;
}

.clm-nr-card__title {
  margin: 10px 0 8px;
  font-family: var(--clm-font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--clm-title);
}

.clm-nr-card__title a { color: inherit; }

.clm-nr-card__excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--clm-body-text);
}

.clm-nr-card__excerpt.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── List (Live News Feed) card ─────────────────────────────────────── */

.clm-nr-card--list .clm-nr-card__inner { padding: 18px 22px 0; }

.clm-nr-card--list .clm-nr-card__head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.clm-nr-card__logos {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}

.clm-nr-card__logos img {
  max-height: 38px;
  max-width: 118px;
  width: auto;
  object-fit: contain;
}

.clm-nr-card--list .clm-nr-card__headline-wrap { flex: 1 1 auto; min-width: 0; }

.clm-nr-card--list .clm-nr-card__title {
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1.34;
}

.clm-nr-card__section {
  border-top: 1px solid var(--clm-card-border);
  padding: 12px 0 0;
  margin: 0 0 2px;
}

.clm-nr-card__label {
  display: block;
  margin: 0 0 5px;
  font-family: var(--clm-font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--clm-label-color, var(--clm-title));
}

.clm-nr-card__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--clm-body-text);
}

/* ── Card footer ────────────────────────────────────────────────────── */

.clm-nr-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding: 14px 20px 18px;
}

.clm-nr-card--list .clm-nr-card__foot { padding: 12px 22px 18px; }

.clm-nr-card__date {
  font-size: 12px;
  color: var(--clm-date-text);
  white-space: nowrap;
}

.clm-nr-more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--clm-font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--clm-accent);
  white-space: nowrap;
}

.clm-nr-more-link svg { width: 12px; height: 12px; flex: 0 0 auto; }
.clm-nr-more-link:hover { text-decoration: underline; }

/* The first story in a feed list can be flagged as featured */
.clm-nr-card--featured {
  border: 1.5px solid var(--clm-accent);
  background: var(--clm-featured-bg);
}

.clm-nr-card--featured .clm-nr-card__flag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 6px 13px;
  font-family: var(--clm-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  background: var(--clm-accent);
  color: var(--clm-accent-contrast);
  border-radius: calc(var(--clm-card-radius) - 1px) 0 8px 0;
}

.clm-nr-card--featured .clm-nr-card__inner { padding-top: 52px; }

/* ── Load more ──────────────────────────────────────────────────────── */

.clm-nr__more {
  display: flex;
  justify-content: center;
  margin: 32px 0 0;
}

.clm-nr__more button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 0;
  border-radius: 6px;
  background: var(--clm-accent);
  color: var(--clm-accent-contrast);
  font-family: var(--clm-font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: filter .15s ease;
}

.clm-nr__more button:hover { filter: brightness(.92); }
.clm-nr__more button[disabled] { opacity: .55; cursor: default; filter: none; }
.clm-nr__more svg { width: 12px; height: 12px; flex: 0 0 auto; }
.clm-nr__more[hidden] { display: none; }

/* Designs whose button has no arrow icon */
.clm-nr--plain-more .clm-nr__more svg { display: none; }

/* ── Empty / status ─────────────────────────────────────────────────── */

.clm-nr__status {
  padding: 44px 20px;
  text-align: center;
  color: var(--clm-date-text);
  font-size: 15px;
  border: 1px dashed var(--clm-card-border);
  border-radius: var(--clm-card-radius);
  background: #fff;
}

.clm-nr__status[hidden] { display: none; }

.clm-nr__error {
  padding: 16px 18px;
  border-radius: 8px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #B91C1C;
  font-size: 14px;
}

.clm-nr__loading { opacity: .55; pointer-events: none; }

/* Screen-reader only helper */
.clm-nr__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}