/* ---------- Press review widgets and plugins: the edition shown on other pages ----------
 * Sidebar widgets (today's issue, its contents, earlier issues, where a story was in the press
 * review) and main content plugins (the front page strip, a section of today's issue, "Máshogy
 * írták"), to lead readers to press-review.html. They follow its newspaper concept: a masthead,
 * section icons, lead stories with their cover image, source marks. Self-contained: a page loads
 * this file without press-review.css. Shown in components/press-review.html. */

.pw { min-width: 0; color: var(--text); }
.pw p { margin: 0; }
.pw-body { display: grid; gap: 12px; padding: 14px 16px 16px; }

/* Mini masthead: the name of the paper and the issue */
.pw-masthead { display: grid; justify-items: center; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line); text-align: center; }
.pw-masthead small { color: var(--cyan); font-family: var(--font-mono); font-size: 9px; letter-spacing: .25em; }
.pw-masthead > strong { font-family: var(--font-heading); font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.pw-masthead > span { color: var(--muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; }

/* A story link: optional photo, section tag, headline */
.pw-photo { position: relative; display: block; overflow: hidden; height: 150px; border: 1px solid var(--line); background: var(--panel); }
.pw-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, var(--media-overlay-mid), transparent 45%); }
.pw-lead { display: grid; gap: 8px; color: var(--text); }
.pw-lead strong { font-family: var(--font-heading); font-size: 17px; font-weight: 600; line-height: 1.3; }
.pw-lead:hover strong { color: var(--color-primary); }
.pw-tag { justify-self: start; padding: 3px 6px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; }
.pw-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; }
.pw-excerpt { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

/* A list of headlines with a small kicker */
.pw-list { display: grid; margin: 0; padding: 0; list-style: none; }
.pw-list li + li { border-top: 1px solid var(--line); }
.pw-list a { display: grid; gap: 3px; padding: 8px 0; color: var(--text); }
.pw-list a:hover b { color: var(--color-primary); }
.pw-list small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; }
.pw-list small .accent { color: var(--color-primary); }
.pw-list b { display: -webkit-box; overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.pw-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; }
.pw-meta strong { color: var(--text); font-weight: 600; }
.pw-meta .is-published { color: var(--color-success); }

/* The call to action of every widget */
.pw-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--color-primary) 55%, var(--line)); color: var(--color-primary); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; }
.pw-cta:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.pw-cta .icon { font-size: 14px; }

/* A notice: the issue is being made, or there is none */
.pw-notice { display: flex; gap: 10px; padding: 10px 12px; border: 1px dashed var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; }
.pw-notice .icon { flex: none; color: var(--color-warning-text); font-size: 16px; }
.pw-notice strong { display: block; color: var(--text); font-size: 13px; }

/* Contents: one row per section with its icon, count and first headline */
.pw-sections { display: grid; margin: 0; padding: 0; list-style: none; }
.pw-sections li + li { border-top: 1px solid var(--line); }
.pw-sections a { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 0; color: var(--text); }
.pw-sections .panel-icon { grid-row: span 2; width: 26px; height: 26px; }
.pw-sections b { font-size: 13px; font-weight: 600; }
.pw-sections .mono { color: var(--muted); font-size: 9px; }
.pw-sections small { grid-column: 2 / -1; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pw-sections a:hover b { color: var(--color-primary); }

/* Earlier issues: a week strip and the latest issues */
.pw-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pw-week a, .pw-week span { display: grid; justify-items: center; gap: 2px; padding: 6px 0; border: 1px solid var(--line); color: var(--text); }
.pw-week small { color: var(--muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: .04em; }
.pw-week b { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.pw-week a:hover { border-color: var(--color-primary); }
.pw-week .is-today { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
.pw-week .is-today b { color: var(--color-primary); }
.pw-week span { opacity: .4; }

/* Where a story was in the press review: a short timeline of issues */
.pw-trail { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pw-trail::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.pw-trail li { position: relative; padding-left: 20px; }
.pw-trail li::before { content: ""; position: absolute; left: 0; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-bright); }
.pw-trail li.is-front::before { background: var(--color-primary); box-shadow: 0 0 0 3px var(--panel); }
.pw-trail a { display: grid; gap: 2px; padding: 8px 0; color: var(--text); }
.pw-trail small { color: var(--muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; }
.pw-trail small .accent { color: var(--color-primary); }
.pw-trail b { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pw-trail a:hover b { color: var(--color-primary); }

/* ---- Plugins of the main content ---- */

/* Front page strip: masthead, the main lead story, the other two */
.pp-front { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1.4fr) minmax(0, 1fr); }
.pp-front > * { min-width: 0; padding: 18px; }
.pp-front > * + * { border-left: 1px solid var(--line); }
.pp-front .pw-masthead { align-content: center; gap: 6px; padding-bottom: 18px; border-bottom: 0; }
.pp-front .pw-masthead > strong { font-size: 26px; }
.pp-front .pw-meta { justify-content: center; }
.pp-day { display: grid; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pp-day b { color: var(--muted); font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; }
.pp-day p { display: -webkit-box; overflow: hidden; font-size: 13px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.pp-front .pw-masthead .pw-cta { margin-top: 10px; }
.pp-front .pw-photo { height: 180px; }
.pp-front .pw-lead strong { font-size: 20px; }

/* Compact strip: one line with the three lead headlines */
.pp-strip { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 10px 14px; }
.pp-strip .pp-strip-name { display: flex; flex: none; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 14px; font-weight: 700; }
.pp-strip .pp-strip-name small { color: var(--muted); font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: .05em; }
.pp-strip ol { display: flex; flex: 1; gap: 0; min-width: 0; margin: 0; padding: 0; list-style: none; }
.pp-strip li { flex: 1 1 0; min-width: 0; padding: 0 12px; border-left: 1px solid var(--line); }
.pp-strip li a { display: block; overflow: hidden; color: var(--text); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pp-strip li a:hover { color: var(--color-primary); }
.pp-strip li small { display: block; color: var(--color-primary); font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; }
.pp-strip .pw-cta { flex: none; padding: 6px 10px; }

/* A section of today's issue on a topic page: its stories in ruled columns */
.pp-section-body { padding: 16px 18px; }
.pp-columns { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.pp-columns > * { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 0 18px; }
.pp-columns > :first-child { padding-left: 0; }
.pp-columns > :last-child { padding-right: 0; }
.pp-columns > * + * { border-left: 1px solid var(--line); }
.pp-columns .pw-photo { height: 120px; }
.pp-columns h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.pp-columns h3 a { color: var(--text); }
.pp-columns h3 a:hover { color: var(--color-primary); }
.pp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

/* Source marks of a story with the number of independent sources */
.pw-sources { display: flex; align-items: center; gap: 3px; min-width: 0; }
.pw-sources .mono { margin-left: 6px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.pw-sources .mono strong { color: var(--text); }

/* "Máshogy írták": one story where the media put different emphases */
.pp-angle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pp-angle > * { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 18px; }
.pp-angle > * + * { border-left: 1px solid var(--line); }
.pp-angle h3 { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.25; }
.pp-angle h3 a { color: var(--text); }
.pp-angle h3 a:hover { color: var(--color-primary); }
.pp-quote { display: grid; gap: 8px; margin: 0; padding: 12px 14px; border-left: 2px solid var(--hud-transmission); background: color-mix(in srgb, var(--panel-hover) 60%, transparent); font-size: 14px; line-height: 1.6; }
.pp-quote b { color: var(--hud-transmission); font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; }
.pp-voices { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pp-voices li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; line-height: 1.5; }
.pp-voices strong { display: block; font-size: 12px; }
.pp-voices span { color: var(--muted); }

@media (max-width: 980px) {
  .pp-front { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pp-front > .pw-masthead { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
  .pp-front > .pw-masthead + * { border-left: 0; }
}

@media (max-width: 700px) {
  .pp-front, .pp-angle, .pp-columns { grid-template-columns: minmax(0, 1fr); }
  .pp-front > * + *, .pp-angle > * + * { border-left: 0; border-top: 1px solid var(--line); }
  .pp-columns > * { padding: 0 !important; border-left: 0 !important; }
  .pp-columns > * + * { margin-top: 14px; padding-top: 14px !important; border-top: 1px solid var(--line); }
  .pp-strip { flex-wrap: wrap; }
  .pp-strip ol { flex-basis: 100%; flex-direction: column; gap: 6px; }
  .pp-strip li { padding: 0; border-left: 0; }
}