/* ============================================================================
   News & Insights — list (lists_news.htm) and article (view_news.htm)
   ----------------------------------------------------------------------------
   Loaded only by the two news templates, so every rule here is safe to change
   without touching the product catalogue or the service pages. Everything is
   built on the tokens declared in pq-global.css; no new palette is introduced.
   Breakpoints follow the rest of the site: 1000 / 860 / 560.
   ========================================================================== */

/* ---------------------------------------------------------------- list page */

.pq-news { padding: 68px 0 84px; background: var(--pq-offwhite); }

.pq-news-lead { max-width: 780px; margin-bottom: 34px; }

.pq-news-lead-title {
  margin: 0 0 14px;
  color: var(--pq-navy);
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.18;
}

.pq-news-lead-intro {
  margin: 0;
  color: var(--pq-steel);
  font-size: 15px;
  line-height: 1.75;
}

/* --- category tabs -------------------------------------------------------- */

.pq-news-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--pq-line);
}

.pq-news-tab {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--pq-line);
  color: var(--pq-navy);
  background: var(--pq-paper);
  font-size: 14px;
  font-weight: 700;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.pq-news-tab:hover { color: var(--pq-blue); border-color: var(--pq-blue); }

/* `is-active` is emitted by {eyou:channel ... currentstyle='is-active'} for the
   open category, and by an explicit condition for the "all" tab. */
.pq-news-tab.is-active {
  color: #fff;
  border-color: var(--pq-navy);
  background: var(--pq-navy);
}

/* --- article grid --------------------------------------------------------- */

.pq-news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.pq-news-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid var(--pq-line);
  color: var(--pq-navy);
  background: var(--pq-paper);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.pq-news-card:hover {
  border-color: var(--pq-blue);
  box-shadow: var(--pq-shadow);
  transform: translateY(-3px);
}

.pq-news-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--pq-offwhite); }

.pq-news-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }

.pq-news-card-media--placeholder { display: flex; align-items: flex-end; padding: 22px; color: rgba(255,255,255,.78); background: linear-gradient(135deg, var(--pq-navy), #1c5e94); }
.pq-news-card-media--placeholder span { color: var(--pq-accent); font-size: 11px; font-weight: 800; letter-spacing: .14em; }

.pq-news-card:hover .pq-news-card-media img { transform: scale(1.03); }

.pq-news-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
}

.pq-news-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font-size: 12px;
}

.pq-news-card-cat {
  color: var(--pq-blue);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pq-news-card-meta time { color: var(--pq-steel); }

.pq-news-card-title { margin: 0; font-size: 19px; line-height: 1.35; }

.pq-news-card-text {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--pq-steel);
  font-size: 14px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.pq-news-card-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  color: var(--pq-blue);
  font-size: 13px;
  font-weight: 700;
}

.pq-news-card-more i { font-style: normal; transition: transform .2s ease; }

.pq-news-card:hover .pq-news-card-more i { transform: translateX(4px); }

/* The newest three stories lead with imagery. Older or image-light entries
   become full-width editorial rows so a missing cover never leaves a strange
   empty block in the feed. */
@media (min-width: 861px) {
  .pq-news-card:nth-child(n+4) { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(250px, 31%) minmax(0, 1fr); }
  .pq-news-card:nth-child(n+4) .pq-news-card-media { height: 100%; min-height: 210px; aspect-ratio: auto; }
  .pq-news-card:nth-child(n+4) .pq-news-card-body { padding: 28px 32px; }
}

/* --- empty state ---------------------------------------------------------- */

.pq-news-empty {
  padding: 60px 28px;
  border: 1px dashed var(--pq-line);
  background: var(--pq-paper);
  text-align: center;
}

.pq-news-empty[hidden] { display: none; }

.pq-news-empty strong { display: block; margin-bottom: 10px; color: var(--pq-navy); font-size: 19px; }

.pq-news-empty p { margin: 0 auto; max-width: 520px; color: var(--pq-steel); font-size: 14px; line-height: 1.7; }

/* --- pagination: layout only, the controls are styled by .pq-pagination ---- */

.pq-news-pagination { margin-top: 44px; }

/* --- closing call to action ---------------------------------------------- */

.pq-news-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 56px;
  padding: 36px 40px;
  color: #fff;
  background: var(--pq-navy);
}

.pq-news-cta strong { display: block; margin-bottom: 8px; font-size: 21px; }

.pq-news-cta p { margin: 0; max-width: 620px; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.7; }

.pq-news-cta .pq-btn { flex: none; }

/* ------------------------------------------------------------- article page */

.pq-news-view { padding: 44px 0 84px; background: var(--pq-paper); }

.pq-news-crumb { margin-bottom: 30px; color: var(--pq-steel); font-size: 13px; }

.pq-news-crumb a { color: var(--pq-steel); }

.pq-news-crumb a:hover { color: var(--pq-blue); }

.pq-news-view-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 56px;
  align-items: start;
}

.pq-news-view-head { margin-bottom: 26px; }

.pq-news-view-cat {
  margin: 0 0 14px;
  color: var(--pq-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pq-news-view-title {
  margin: 0 0 18px;
  color: var(--pq-navy);
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.16;
}

.pq-news-view-meta {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--pq-line);
  color: var(--pq-steel);
  font-size: 13px;
}

.pq-news-view-cover { margin: 0 0 32px; overflow: hidden; background: var(--pq-offwhite); }

.pq-news-view-cover img { width: 100%; height: auto; }

/* Scoped to the news article body only — .pq-detail-content is shared with the
   product pages, so nothing here may be written unscoped. */
.pq-news-view-content { font-size: 16px; line-height: 1.85; }

.pq-news-view-content > * + * { margin-top: 18px; }

.pq-news-view-content h2 {
  margin: 40px 0 0;
  color: var(--pq-navy);
  font-size: 22px;
  line-height: 1.35;
}

.pq-news-view-content h3 { margin: 30px 0 0; color: var(--pq-navy); font-size: 18px; line-height: 1.4; }

.pq-news-view-content ul, .pq-news-view-content ol { margin: 18px 0 0; padding-left: 22px; }

.pq-news-view-content li + li { margin-top: 9px; }

.pq-news-view-content a { color: var(--pq-blue); text-decoration: underline; }

.pq-news-view-content strong { color: var(--pq-navy); }

.pq-news-source { padding-top: 14px; border-top: 1px solid var(--pq-line); color: var(--pq-steel); font-size: 13px; }
.pq-news-source a { color: var(--pq-blue); }

.pq-news-view-back { margin: 42px 0 0; font-size: 14px; font-weight: 700; }

.pq-news-view-back a { color: var(--pq-blue); }

.pq-news-next { margin-top: 24px; }

.pq-news-view-side { position: sticky; top: 24px; }

.pq-news-side-title {
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--pq-navy);
  color: var(--pq-navy);
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pq-news-side-list { margin: 0 0 34px; padding: 0; list-style: none; }

.pq-news-side-list li + li { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--pq-line); }

.pq-news-side-list a { display: block; color: var(--pq-navy); }

.pq-news-side-list a:hover strong { color: var(--pq-blue); }

.pq-news-side-list time { display: block; margin-bottom: 6px; color: var(--pq-steel); font-size: 12px; }

.pq-news-side-list strong { font-size: 15px; font-weight: 600; line-height: 1.5; transition: color .2s ease; }

.pq-news-side-cta { padding: 30px 28px; color: #fff; background: var(--pq-navy); }

.pq-news-side-cta strong { display: block; margin-bottom: 10px; font-size: 18px; line-height: 1.35; }

.pq-news-side-cta p { margin: 0 0 22px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.7; }

.pq-news-side-cta .pq-btn { width: 100%; }

/* ------------------------------------------------------------ responsive --- */

@media (max-width: 1100px) {
  .pq-news-view-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .pq-news-view-side { position: static; }
}

@media (max-width: 860px) {
  .pq-news { padding: 48px 0 64px; }
  .pq-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .pq-news-card:nth-child(n+4) { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(190px, 34%) minmax(0, 1fr); }
  .pq-news-card:nth-child(n+4) .pq-news-card-media { height: 100%; min-height: 180px; aspect-ratio: auto; }
  .pq-news-cta { flex-direction: column; align-items: flex-start; padding: 30px 26px; }
  .pq-news-cta .pq-btn { width: 100%; }
}

@media (max-width: 560px) {
  .pq-news-grid { grid-template-columns: minmax(0, 1fr); }
  .pq-news-card:nth-child(n+4) { display: flex; grid-column: auto; }
  .pq-news-card:nth-child(n+4) .pq-news-card-media { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .pq-news-card-body { padding: 20px; }
  .pq-news-tabs { gap: 8px; }
  .pq-news-tab { padding: 0 14px; font-size: 13px; }
  .pq-news-view { padding: 30px 0 64px; }
  .pq-news-view-content { font-size: 15.5px; line-height: 1.8; }
  .pq-news-view-content h2 { margin-top: 32px; font-size: 20px; }
}

/* Let the list make use of a wide monitor; long-form news remains constrained. */
@media (min-width: 1440px) {
  .pq-news-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1800px) {
  .pq-news-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}