/* Geschiedenisverhalen (src/history_stories.php) - los van site.css gehouden */
/* Geschiedenis: hoofdstukken met tijdlijn, kerncijfers, sleutelwedstrijden en bronnen */
.history-article-page.has-story { max-width: 1180px; }
.history-lead { max-width: 760px; margin: 4px 0 14px !important; color: #e4e3e6 !important; font-size: 15px !important; line-height: 1.7; }
.story-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
.story-main { min-width: 0; }
.story-aside { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.story-timeline { list-style: none; margin: 0 0 18px; padding: 18px 22px; background: #fff; border: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 18px; }
.story-timeline li { position: relative; padding-left: 14px; color: #414147; font-size: 12px; line-height: 1.5; }
.story-timeline li::before { content: ""; position: absolute; left: 0; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: #e30613; }
.story-timeline span { display: block; color: #a80710; font: 800 11px/1.4 Manrope, sans-serif; letter-spacing: .02em; }
.story-quote { margin: 0 0 18px; padding: 20px 24px; background: #151518; color: #fff; border-left: 4px solid #e30613; }
.story-quote p { margin: 0 0 8px; font: 700 clamp(16px, 2.2vw, 20px)/1.45 Manrope, sans-serif; }
.story-quote cite { color: #b7b7bb; font-size: 11px; font-style: normal; }
.history-article blockquote { margin: 1.5em 0; padding: 4px 0 4px 18px; border-left: 3px solid #e30613; color: #2d2d31; font-style: italic; }
.history-article blockquote small { display: block; margin-top: 6px; color: #77777d; font-style: normal; font-size: 12px; }
.history-article h2 { padding-top: .2em; font-size: 20px; }
.story-box { padding: 18px 20px; background: #fff; border: 1px solid var(--line); }
.story-box .eyebrow { color: #a80710; font-size: 9px; }
.story-box h3 { margin: 16px 0 6px; font: 800 12px/1.3 Manrope, sans-serif; color: var(--ink); }
.story-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.story-stat-grid div { padding: 10px 8px; background: #f7f6f3; text-align: center; }
.story-stat-grid strong { display: block; color: var(--ink); font: 800 17px/1.2 Manrope, sans-serif; }
.story-stat-grid span { display: block; margin-top: 3px; color: #77777d; font-size: 9px; line-height: 1.35; }
.story-ranking { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.story-ranking li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid #efeeeb; font-size: 12px; counter-increment: rank; }
.story-ranking li::before { content: counter(rank); width: 16px; color: #a80710; font-weight: 800; }
.story-ranking a { flex: 1; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.story-ranking a:hover { color: #a80710; }
.story-ranking span { color: #77777d; white-space: nowrap; }
.story-note { margin: 12px 0 0; color: #8a8a90; font-size: 10px; line-height: 1.5; }
.story-matches, .story-sources ul { margin: 10px 0 0; padding: 0; list-style: none; }
.story-matches li + li { border-top: 1px solid #efeeeb; }
.story-matches a { display: block; padding: 8px 0; color: var(--ink); }
.story-matches a:hover span { color: #a80710; }
.story-matches small { display: block; color: #8a8a90; font-size: 10px; }
.story-matches span { font-size: 12px; font-weight: 700; }
.story-matches b { margin-left: 4px; color: #a80710; }
.story-sources li { padding: 6px 0; font-size: 11px; line-height: 1.5; }
.story-sources li + li { border-top: 1px solid #efeeeb; }
.story-sources a { color: #414147; text-decoration: underline; text-decoration-color: #d5b2b4; text-underline-offset: 2px; }
.story-sources a:hover { color: #a80710; }
@media (max-width: 900px) {
    .story-layout { grid-template-columns: minmax(0, 1fr); }
    .story-aside { position: static; }
}
.story-stat-grid strong { font-size: 15px; white-space: nowrap; }
.history-article > h2:first-child { margin-top: 0; }
.story-figure { margin: .4em 0 1.1em; width: 320px; max-width: 46%; background: #fff; border: 1px solid var(--line); padding: 6px; box-sizing: border-box; }
.story-figure.is-right { float: right; margin-left: 22px; clear: both; }
.story-figure.is-left { float: left; margin-right: 22px; clear: both; }
.history-article .story-figure img { display: block; width: 100%; height: auto; max-height: 380px; object-fit: contain; background: #f4f3f0; }
.story-figure.is-small { width: 180px; }
.history-article .story-figure.is-small img { width: auto; max-width: 100%; margin: 0 auto; background: none; }
.story-figure figcaption { padding: 7px 4px 2px; color: #77777d; font-size: 11px; line-height: 1.45; }
.history-article h2 { clear: both; }
.history-article::after { content: ""; display: block; clear: both; }
@media (max-width: 700px) { .story-figure, .story-figure.is-left, .story-figure.is-right { float: none; width: auto; max-width: 100%; margin: 1em 0; } .story-figure.is-small { width: 180px; } }
.story-figure.is-left, .story-figure.is-right { float: right; clear: right; margin-left: 22px; margin-right: 0; }
@media (max-width: 700px) { .story-figure.is-left, .story-figure.is-right { float: none; clear: both; width: auto; max-width: 100%; margin: 1em 0; } .story-figure.is-small { width: 180px; } }
/* Logo door de jaren heen (src/history_logos.php) */
.logo-timeline { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.logo-era { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 22px; align-items: center; padding: 20px 24px; background: #fff; border: 1px solid var(--line); border-left: 4px solid #e30613; }
.logo-era-image { display: flex; align-items: center; justify-content: center; min-height: 150px; }
.logo-era-image img { display: block; max-width: 150px; max-height: 170px; width: auto; height: auto; }
.logo-era-empty { display: flex; align-items: center; justify-content: center; width: 130px; height: 130px; border: 2px dashed #d5d3cf; border-radius: 50%; color: #8a8a90; font-size: 11px; text-align: center; }
.logo-era-text h2 { margin: 4px 0 8px; font-size: 20px; }
.logo-era-text .eyebrow { color: #a80710; }
.logo-era-text p { margin: 0 0 8px; color: #414147; font-size: 14px; line-height: 1.7; }
.logo-era-text small { color: #8a8a90; font-size: 10px; }
.logo-era-text small a { color: inherit; text-decoration: underline; }
@media (max-width: 640px) { .logo-era { grid-template-columns: minmax(0, 1fr); padding: 16px; } .logo-era-image { min-height: 0; } }
.history-article > div:first-child > h2:first-child { margin-top: 0; }
.history-article h2 { margin-top: 1.4em; }