/* =========================================================================
   The history of the regiment keeps the look of the research site it came
   from ("Regimentul 61", css/stil.css of that site): the same colours —
   grass-green facings, gold buttons, the dark-blue tunic, cream paper — the
   same typefaces (Bodoni Moda for headings, Vollkorn for text) and the same
   layout. The rules below follow that style sheet one by one, translated to
   the blocks of the site's BBCode.

   Loaded only on the pages of a themed series (see page.php), under the
   association's own header; everything applies to body.istoric only. The
   chapter band takes the colour of the uniform of the period:
   body.epoca-alb (1798–1849, the white coat), body.epoca-albastru (the
   dark-blue tunic, the default), body.epoca-gri (1914–1918, field grey).
   ========================================================================= */

/* ---------- 1. Typefaces (in assets/fonts/istoric, so they work offline too) ---------- */
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/istoric/BodoniModa.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/istoric/BodoniModa-Italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Vollkorn"; src: url("../fonts/istoric/Vollkorn.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Vollkorn"; src: url("../fonts/istoric/Vollkorn-Italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Vollkorn"; src: url("../fonts/istoric/Vollkorn-SemiBold.woff2") format("woff2"); font-weight: bold; font-display: swap; }

/* ---------- 2. Colours: the uniform of the regiment ---------- */
body.istoric {
  --hartie: #fbfaf6;          /* the page */
  --hartie-inchisa: #f0ede4;  /* boxes */
  --cerneala: #23201b;        /* text */
  --cerneala-slaba: #5d564c;  /* captions and notes */
  --linie: #d8d2c4;           /* thin lines */
  --verde: #3b6e2c;           /* grass green (grasgrün), the colour of the regiment */
  --auriu: #c49a35;           /* the gold buttons */
  --auriu-deschis: #d9b65c;   /* gold on a dark ground */
  --albastru: #1e2b4a;        /* the dark-blue tunic */
  --uniforma: var(--albastru);
  --text-antet: #f6f2e8;
  --semn-antet: var(--auriu-deschis);
  --serif-titlu: "Bodoni Moda", "Didot", Georgia, serif;
  --serif-text: "Vollkorn", Georgia, serif;
  background: var(--hartie);
}
body.istoric.epoca-alb { --uniforma: #ece7dc; --text-antet: var(--cerneala); --semn-antet: var(--verde); }
body.istoric.epoca-albastru { --uniforma: var(--albastru); }
body.istoric.epoca-gri { --uniforma: #8d9ba0; --text-antet: #1d1f20; --semn-antet: var(--cerneala); }

/* ---------- 3. The band of the chapters, under the association's menu ----------
   The colour of the uniform of the period; under it a green stripe (the
   facings) and a gold thread (the buttons). */
body.istoric .sub-nav { background: var(--uniforma); color: var(--text-antet); border-bottom: 8px solid var(--verde); box-shadow: 0 3px 0 var(--auriu); position: relative; z-index: 1; font-family: var(--serif-text); }
body.istoric .antet-interior { width: auto; max-width: 70rem; margin: 0 auto; padding: 0.9rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 2rem; }
body.istoric .sigla { display: flex; align-items: center; gap: 0.75rem; color: var(--text-antet); text-decoration: none; }
body.istoric .sigla:hover { text-decoration: none; color: var(--text-antet); }
body.istoric .petlita { background: var(--verde); color: var(--auriu-deschis); border: 2px solid var(--auriu); font-family: var(--serif-titlu); font-size: 1.5rem; line-height: 1; padding: 0.3rem 0.45rem 0.35rem; }
body.istoric .sigla-text { font-family: var(--serif-titlu); font-size: 1.3rem; line-height: 1.1; }
body.istoric .sigla-text small { font-family: var(--serif-text); font-size: 0.8rem; opacity: 0.85; }
body.istoric .meniu { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; }
body.istoric .sub-nav.fara-sigla .antet-interior, body.istoric .sub-nav.fara-sigla .meniu { justify-content: center; }   /* no badge: the chapters centred */
body.istoric .sub-nav.fara-sigla .meniu { gap: 0.3rem 1.6rem; }
body.istoric .meniu a { color: var(--text-antet); text-decoration: none; font-size: 1rem; padding: 0.2rem 0; border-bottom: 2px solid transparent; }
body.istoric .meniu a:hover { border-bottom-color: var(--semn-antet); color: var(--text-antet); }
body.istoric .meniu a.activ { border-bottom: 2px solid var(--semn-antet); color: var(--text-antet); }

/* ---------- 4. The page: base elements ---------- */
body.istoric .istoric-main { padding: 0 0 4rem; min-height: 50vh; color: var(--cerneala); font-family: var(--serif-text); font-size: 1.1875rem; line-height: 1.6; }
body.istoric.has-subsol .istoric-main { padding-bottom: 0; }
body.istoric.has-subsol .site-footer { margin-top: 0; }
body.istoric .istoric-main > .flash { max-width: 67.5rem; margin: 1rem auto; }
body.istoric .istoric-main h1, body.istoric .istoric-main h2, body.istoric .istoric-main h3 { font-family: var(--serif-titlu); font-weight: normal; line-height: 1.15; margin: 0 0 0.6em; color: inherit; letter-spacing: 0; }
body.istoric .istoric-main h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
body.istoric .istoric-main h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-top: 2.2em; }
body.istoric .istoric-main h3 { font-size: 1.5rem; margin-top: 1.6em; }
body.istoric .istoric-main h1::after { content: none; }
body.istoric .istoric-main p, body.istoric .istoric-main ul, body.istoric .istoric-main ol { margin: 0 0 1em; }
body.istoric .istoric-main a { color: var(--verde); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
body.istoric .istoric-main a:hover { text-decoration-thickness: 2px; }
body.istoric .istoric-main a:focus-visible { outline: 3px solid var(--auriu); outline-offset: 3px; }
body.istoric .istoric-main img { max-width: 100%; max-height: none; width: auto; height: auto; display: block; border: 0; border-radius: 0; background: none; padding: 0; }
body.istoric .istoric-main figure { margin: 2em 0; }
body.istoric .istoric-main figcaption { margin-top: 0.6em; font-size: 0.9rem; font-style: italic; line-height: 1.45; color: var(--cerneala-slaba); }
body.istoric .istoric-main blockquote { margin: 1.8em 0; padding: 0 0 0 1.2em; border-left: 3px solid var(--auriu); background: none; font-family: var(--serif-titlu); font-style: italic; font-size: 1.4rem; line-height: 1.4; }
body.istoric .istoric-main blockquote footer { margin-top: 0.4em; font-family: var(--serif-text); font-style: normal; font-size: 0.95rem; color: var(--cerneala-slaba); }
body.istoric .istoric-main blockquote footer::before { content: none; }
body.istoric .istoric-main hr { border: 0; border-top: 1px solid var(--linie); margin: 3em 0; }
body.istoric .istoric-main .btn { font-family: var(--serif-text); text-decoration: none; color: var(--cerneala); }

/* ---------- 5. The first page: the dark-blue opening panel ---------- */
body.istoric .erou { background: var(--albastru); color: #f6f2e8; }
body.istoric .erou-interior { max-width: 70rem; margin: 0 auto; padding: 3.5rem 1.25rem 4rem; display: grid; grid-template-columns: 1.25fr 1fr; gap: 3rem; align-items: center; }
body.istoric .erou h1 { margin-bottom: 0.3em; }
body.istoric .erou .nume-german { font-family: var(--serif-titlu); font-style: italic; font-size: 1.35rem; color: var(--auriu-deschis); margin-bottom: 0.8rem; }
body.istoric .erou p { max-width: 34em; color: #ddd7c8; }
body.istoric .erou p > strong:only-child { display: block; max-width: 30em; color: #f6f2e8; font-weight: normal; font-size: 1.35rem; line-height: 1.4; }
body.istoric .erou .lead { max-width: 34em; color: #ddd7c8; font-size: inherit; line-height: inherit; }
body.istoric .erou .md-hero-img { margin: 0; max-width: 24rem; justify-self: center; }
body.istoric .erou figcaption { color: #b9b3a5; }
body.istoric .erou p:has(> .md-button) { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
body.istoric .md-button { display: inline-block; padding: 0.6rem 1.2rem; margin: 0; border-radius: 0; background: var(--auriu-deschis); color: var(--albastru); text-decoration: none; font-weight: bold; border: 2px solid var(--auriu-deschis); }
body.istoric .md-button:hover { background: #e8c978; color: var(--albastru); }
body.istoric .md-button.alt { background: transparent; color: #f6f2e8; }
body.istoric .md-button.alt:hover { background: rgba(255, 255, 255, 0.08); }
body.istoric .istoric-main a.md-button { color: var(--albastru); text-decoration: none; }
body.istoric .istoric-main a.md-button.alt { color: #f6f2e8; }

/* ---------- 6. A chapter: the years in large green figures, the title, the introduction ---------- */
body.istoric .titlu-capitol { max-width: 70rem; margin: 0 auto; padding: 3rem 1.25rem 1rem; }
body.istoric .titlu-capitol .ani { font-family: var(--serif-titlu); font-size: clamp(3rem, 9vw, 6.5rem); line-height: 1; color: var(--verde); margin: 0 0 0.2em; }
body.istoric .titlu-capitol .introducere { font-size: 1.3rem; line-height: 1.5; max-width: 36em; }
body.istoric .articol .lead { font-size: 1.3rem; line-height: 1.5; max-width: 36em; color: inherit; }

/* The article: the text sits in a narrow column, easy to read (40rem); some
   pictures and galleries are wider (52rem, "medium") or as wide as the page
   (67.5rem, "wide") — they step out of the column on both sides. */
body.istoric .articol { max-width: calc(40rem + 2.5rem); margin: 0 auto; padding: 0 1.25rem 3rem; }
body.istoric .articol > * { --w: 0; }
body.istoric .articol > .md-img.medium, body.istoric .articol > .md-img.vignette, body.istoric .articol > .md-gallery { --w: 52rem; }
body.istoric .articol > .md-img.wide, body.istoric .articol > .md-gallery.wide, body.istoric .articol > .md-reader, body.istoric .articol > .md-box.dark { --w: 67.5rem; }
body.istoric .articol > .md-img.medium, body.istoric .articol > .md-img.vignette, body.istoric .articol > .md-gallery,
body.istoric .articol > .md-img.wide, body.istoric .articol > .md-reader, body.istoric .articol > .md-box.dark {
  width: min(var(--w), 100vw - 2.5rem);
  max-width: none;
  margin-left: calc(50% - min(var(--w), 100vw - 2.5rem) / 2);
}
body.istoric .articol > .md-gallery { margin-bottom: 3rem; }
body.istoric .articol > .md-gallery.cols-2 { margin-bottom: 2rem; }
body.istoric .articol > .md-box.dark { margin-bottom: 2rem; }
body.istoric .articol > .md-reader { margin-bottom: 3rem; }

/* The research site keeps every run of text in a <section> of its own, so the
   margins round a section never merge with those of its neighbours. The same
   spacing without the wrappers: a heading opens a new run (its space above
   is padding, which adds to whatever ends the run before), and a picture, a
   gallery or a box that follows text adds its own margin to the paragraph's. */
body.istoric .articol { --pm: 1.1875rem; }
body.istoric .articol > h2 { margin-top: 0; padding-top: 2.2em; }
body.istoric .articol > .md-img:not(.right):not(.left) { --mt: 2em; clear: both; }
body.istoric .articol > .md-img.vignette { --mt: 3.5rem; }
body.istoric .articol > .md-gallery { --mt: 2rem; }
body.istoric .articol > .md-box { --mt: 2em; }
body.istoric .articol > .md-box.dark { --mt: 2rem; }
body.istoric .articol > .md-reader { --mt: 2rem; }
body.istoric .articol > .md-small { --mt: 3rem; }
body.istoric .articol > :is(.md-img:not(.right):not(.left), .md-gallery, .md-box, .md-reader, .md-small) { margin-top: var(--mt); }
body.istoric .articol > :is(p, ul, ol, blockquote, h3, .table-wrap, .md-timeline, .md-honours, .md-facts, .md-img.right, .md-img.left)
  + :is(.md-img:not(.right):not(.left), .md-gallery, .md-box, .md-reader, .md-small) { margin-top: calc(var(--mt) + var(--pm)); }

/* the first page uses the whole width, like the home page of the research site */
body.istoric .articol.lat { max-width: 70rem; padding-top: 0; }
body.istoric .articol.lat > * { --w: 0; }
body.istoric .articol.lat > .md-img.medium, body.istoric .articol.lat > .md-img.vignette, body.istoric .articol.lat > .md-gallery,
body.istoric .articol.lat > .md-img.wide, body.istoric .articol.lat > .md-reader, body.istoric .articol.lat > .md-box.dark { width: auto; margin-left: 0; }
body.istoric .articol.lat > h2, body.istoric .articol.lat > .md-columns { margin-top: 0; padding-top: 3.5rem; }
body.istoric .articol.lat > .md-columns, body.istoric .articol.lat > .md-timeline, body.istoric .articol.lat > .md-cards { margin-bottom: 1rem; }
body.istoric .articol.lat > .md-timeline { max-width: 48rem; }

/* ---------- 7. Pictures ---------- */
body.istoric .md-img.vignette { margin-bottom: 0; }
body.istoric .md-img.right, body.istoric .md-img.left { float: right; width: 40%; max-width: none; margin: 0.3rem 0 1rem 1.5rem; }
body.istoric .md-img.left { float: left; margin: 0.3rem 1.5rem 1rem 0; }
body.istoric .md-img.right img, body.istoric .md-img.left img { width: 100%; max-height: none; }
body.istoric .articol h2, body.istoric .articol > .md-gallery, body.istoric .articol > .md-columns, body.istoric .articol > .md-box,
body.istoric .articol > .table-wrap, body.istoric .articol > .md-reader, body.istoric .articol > .md-small, body.istoric .urmatorul { clear: both; }
body.istoric .md-img a { text-decoration: none; }

/* two pictures side by side */
body.istoric .md-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: start; margin: 2rem 0; }
body.istoric .md-gallery.cols-2 { grid-template-columns: 1fr 1fr; }
body.istoric .md-gallery.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.istoric .md-gallery .md-img { margin: 0; }
body.istoric .md-gallery .md-img img { width: auto; max-width: 100%; aspect-ratio: auto; max-height: none; object-fit: fill; padding: 0; border: 0; background: none; }
/* the gallery of prints: columns in which every picture keeps its shape */
body.istoric .md-gallery.masonry { display: block; columns: 3 17rem; column-gap: 1.5rem; }
body.istoric .md-gallery.masonry .md-img { break-inside: avoid; margin: 0 0 1.8rem; }
/* newspaper clippings: narrower columns, a thin frame */
body.istoric .md-gallery.masonry.framed { columns: 3 15rem; column-gap: 2rem; }
body.istoric .md-gallery.masonry.framed .md-img { margin: 0 0 2rem; }
body.istoric .md-gallery.framed .md-img img { border: 1px solid var(--linie); }
/* portraits: rows of pictures of the same width and shape (3:4); a row that is not full stays in the middle.
   The widths fill a full row exactly: 4 in a column of 52rem, 5 in a wide one of 67.5rem, 7 small ones in 67.5rem. */
body.istoric .md-gallery.portraits { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8rem 1.5rem; }
body.istoric .md-gallery.portraits > .md-img { flex: 0 0 11.875rem; min-width: 0; }
body.istoric .md-gallery.portraits.wide > .md-img { flex-basis: 12.3rem; }
body.istoric .md-gallery.portraits .md-img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
body.istoric .md-gallery.portraits figcaption { font-style: normal; color: var(--cerneala); font-size: 0.95rem; }
body.istoric .md-gallery.portraits figcaption strong { display: block; font-family: var(--serif-titlu); font-weight: normal; font-size: 1.15rem; }
/* the story of a person, in a box over the page: the paper and the type of the history */
body.istoric #storybox .sb-panel { background: var(--hartie); color: var(--cerneala); border-top: 3px solid var(--albastru); border-radius: 2px; font-size: 1.0625rem; }
body.istoric #storybox h2 { font-family: var(--serif-titlu); font-weight: normal; font-size: 1.6rem; }
body.istoric #storybox .sb-rank { color: var(--cerneala-slaba); opacity: 1; }   /* the rank above, in a quieter ink; the name under it */
body.istoric #storybox .sb-photo img { border-color: var(--linie); }
@media (max-width: 640px) { body.istoric #storybox h2 { font-size: 1.3rem; } }
body.istoric .md-gallery figure.has-story .story-open { color: var(--cerneala); font-size: 0.85rem; }
body.istoric .md-gallery.small figure.has-story .story-open { font-size: 0.78rem; }
/* small portraits: a long roll of people (a name and a rank under each picture) */
body.istoric .md-gallery.portraits.small { gap: 1.5rem 1.1rem; }
body.istoric .md-gallery.portraits.small > .md-img { flex-basis: 8.7rem; }
body.istoric .md-gallery.portraits.small figcaption { margin-top: 0.45em; font-size: 0.82rem; line-height: 1.35; color: var(--cerneala-slaba); }
body.istoric .md-gallery.portraits.small figcaption strong { font-size: 1rem; line-height: 1.2; color: var(--cerneala); }

/* ---------- 8. Boxes, the credits panel, the sources of a chapter ---------- */
body.istoric .md-box { background: var(--hartie-inchisa); border: 0; border-top: 3px solid var(--verde); border-radius: 0; padding: 1.2rem 1.5rem 0.4rem; margin: 2em 0; display: flow-root; overflow: visible; }
body.istoric .md-box h3 { margin-top: 0; font-size: 1.35rem; }
body.istoric .md-box > :last-child { margin-bottom: 1em; }
body.istoric .md-box .md-img { margin: 0.5rem 0 1rem; }
body.istoric .md-box .md-img.right { width: 40%; margin: 0.5rem 0 1rem 1.5rem; }
body.istoric .md-box.dark { background: var(--albastru); color: #f6f2e8; border-top: 0; border-bottom: 8px solid var(--verde); padding: 2rem; }
body.istoric .md-box.dark h3 { margin-top: 0; color: var(--auriu-deschis); font-size: clamp(1.8rem, 4vw, 2.5rem); }
body.istoric .md-box.dark p { margin: 0 0 1rem; }
body.istoric .md-box.dark p > strong:first-child { display: block; font-family: var(--serif-titlu); font-weight: normal; font-size: 1.6rem; }
body.istoric .md-box.dark a { color: var(--auriu-deschis); }
body.istoric .md-small { font-size: 0.95rem; color: var(--cerneala-slaba); border-top: 1px solid var(--linie); padding-top: 1rem; margin-top: 3rem; }
body.istoric .md-small h2 { font-size: 1.4rem; margin-top: 0; }
/* the italic line above a table is its caption */
body.istoric .articol p:has(> em:only-child):has(+ .table-wrap) { margin: 1.5rem 0 0.5rem; color: var(--cerneala-slaba); }

/* ---------- 9. The first page: fact sheet, cloth samples, timeline, battle honours, contents ---------- */
body.istoric .md-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; margin: 0; }
body.istoric .md-col .md-img { max-width: 26rem; }
body.istoric .md-facts { margin: 0; border-top: 2px solid var(--cerneala); }
body.istoric .md-facts div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--linie); }
body.istoric .md-facts dt { font-weight: bold; color: inherit; }
body.istoric .md-facts dd { margin: 0; }
body.istoric .md-facts + p { font-size: 0.85rem; color: var(--cerneala-slaba); margin-top: 0.8rem; }
body.istoric .md-swatches { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; padding: 0; list-style: none; }
body.istoric .md-swatches li { flex: 1 1 9rem; display: block; padding: 0; font-size: 0.95rem; line-height: 1.35; }
body.istoric .md-swatches .swatch { display: block; width: auto; height: 4.5rem; margin-bottom: 0.5rem; border: 0; border-radius: 0; border-bottom: 10px solid var(--verde); box-shadow: 0 3px 0 var(--auriu); }
body.istoric .md-swatches b { font-weight: normal; }
body.istoric .md-timeline { list-style: none; padding: 0; margin: 0; }
body.istoric .md-timeline li { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; padding: 0.8rem 0; border-bottom: 1px solid var(--linie); }
body.istoric .md-timeline li::before, body.istoric .md-timeline .year::after { content: none; display: none; }
body.istoric .md-timeline .year { font-family: var(--serif-titlu); white-space: nowrap; font-size: 1.6rem; line-height: 1.1; color: var(--verde); text-align: left; padding: 0; font-weight: normal; font-variant-numeric: normal; }
body.istoric .md-honours { display: flex; flex-wrap: wrap; gap: 0.7rem; padding: 0; margin: 1.5rem 0; list-style: none; }
body.istoric .md-honours li { border: 1.5px solid var(--cerneala); border-radius: 50%; padding: 0.55rem 1.1rem; text-align: center; font-family: var(--serif-titlu); font-style: italic; line-height: 1.15; background: none; font-size: inherit; }
body.istoric .md-honours small { display: block; font-style: normal; font-size: 0.85rem; margin: 0; color: inherit; font-family: inherit; }
body.istoric .md-cards { display: block; margin: 0; border-top: 2px solid var(--cerneala); }
body.istoric .md-card { display: grid; grid-template-columns: 9rem 1fr 14rem; grid-template-areas: "k t i" "k d i"; gap: 0 2rem; align-items: center; padding: 1.5rem 0; border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; background: none; color: var(--cerneala); text-decoration: none; }
body.istoric .md-card:not(.with-img) { grid-template-columns: 9rem 1fr; grid-template-areas: "k t" "k d"; }
body.istoric .md-card small { grid-area: k; font-family: var(--serif-titlu); font-size: 1.5rem; line-height: 1.1; color: var(--verde); }
body.istoric .md-card b { grid-area: t; align-self: end; display: block; font-family: var(--serif-titlu); font-weight: normal; font-size: 1.5rem; line-height: 1.15; color: var(--cerneala); margin: 0 0 0.3em; }
body.istoric .md-card span { grid-area: d; align-self: start; display: block; font-size: inherit; color: var(--cerneala); }
body.istoric .md-card img { grid-area: i; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
body.istoric .istoric-main a.md-card { text-decoration: none; }
body.istoric a.md-card:hover { background: none; border-color: var(--linie); }
body.istoric a.md-card:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* ---------- 10. Tables ---------- */
body.istoric .table-wrap { margin: 1.5rem 0 2rem; }
body.istoric table.table { width: 100%; border-collapse: collapse; font-size: 1rem; background: none; margin: 0; }
body.istoric table.table th, body.istoric table.table td { text-align: left; vertical-align: top; padding: 0.55rem 0.8rem 0.55rem 0; border: 0; border-bottom: 1px solid var(--linie); background: none; font-size: inherit; letter-spacing: 0; text-transform: none; color: inherit; font-weight: normal; }
body.istoric table.table th { border-bottom: 2px solid var(--cerneala); font-weight: bold; }
body.istoric table.table td:first-child { white-space: nowrap; }
body.istoric table.table tbody tr:hover td { background: none; }

/* ---------- 11. The bibliography: the documents on the left, the reader on the right ---------- */
body.istoric .md-reader { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem; align-items: start; }

body.istoric .md-document { padding: 1.4rem 0; border-bottom: 1px solid var(--linie); }
body.istoric .md-document h3 { margin: 0 0 0.3em; font-size: 1.3rem; }
body.istoric .md-document .author { margin-bottom: 0.3em; font-weight: bold; }
body.istoric .md-document p { margin-bottom: 0.6em; }
body.istoric .md-document p:has(> .md-doc) { margin-top: 0.8rem; }
body.istoric .md-document.main { background: var(--hartie-inchisa); border-top: 3px solid var(--verde); padding: 1.5rem; }
body.istoric .md-doc { display: inline-block; padding: 0.4rem 1rem; margin: 0 0.4rem 0.4rem 0; border-radius: 0; background: var(--verde); color: #fff; text-decoration: none; font-weight: normal; font-size: inherit; }
body.istoric .istoric-main a.md-doc { color: #fff; text-decoration: none; }
body.istoric .md-doc:hover { background: #2f5a23; }
/* a document not open to this visitor (hidden, or for those with an account): a grey button, no reader */
body.istoric .md-doc.locked, body.istoric .istoric-main a.md-doc.locked { background: var(--hartie-inchisa); color: var(--cerneala-slaba); border: 1px dashed var(--linie); }
body.istoric a.md-doc.locked:hover { background: var(--linie); }
body.istoric span.md-doc.locked { cursor: not-allowed; }
body.istoric .md-document a[target="_blank"] { font-size: 0.95rem; white-space: nowrap; }
body.istoric .md-reader-frame { position: sticky; top: 1rem; margin: 0; }
body.istoric .md-reader-frame .frame-box { position: relative; border: 0; border-radius: 0; background: none; }
body.istoric .md-reader-frame iframe { display: block; width: 100%; height: calc(100vh - 4.5rem); min-height: 0; border: 1px solid var(--linie); background: #fff; }
body.istoric .md-reader-frame .frame-hint { font-family: var(--serif-titlu); color: var(--cerneala-slaba); }
body.istoric .md-reader-note { font-size: 0.9rem; color: var(--cerneala-slaba); margin: 0.5rem 0 0; }

/* ---------- 12. The next chapter, the band of credits ---------- */
body.istoric .urmatorul { display: block; margin-top: 2.5rem; padding: 1.2rem 1.4rem; background: var(--albastru); color: #f6f2e8; text-decoration: none; font-family: var(--serif-titlu); font-size: 1.5rem; line-height: 1.2; border-bottom: 6px solid var(--verde); }
body.istoric .istoric-main a.urmatorul { color: #f6f2e8; text-decoration: none; }
body.istoric .urmatorul small { display: block; font-family: var(--serif-text); font-size: 0.9rem; color: var(--auriu-deschis); }
body.istoric .urmatorul:hover { background: #26365c; }
body.istoric .subsol { margin-top: 4rem; background: var(--albastru); color: #ddd7c8; border-top: 8px solid var(--verde); box-shadow: inset 0 3px 0 var(--auriu); font-size: 0.95rem; line-height: 1.6; }
body.istoric .subsol-interior { max-width: 70rem; margin: 0 auto; padding: 2rem 1.25rem 2.5rem; }
body.istoric .subsol p { max-width: 50em; margin: 0 0 1em; }
body.istoric .subsol p:last-child { margin-bottom: 0; }
body.istoric .istoric-main .subsol a { color: var(--auriu-deschis); }

/* ---------- 13. Phones and small screens (under 760 px the columns stack) ---------- */
@media (max-width: 760px) {
  body.istoric .istoric-main { font-size: 1.0625rem; }
  body.istoric .articol { --pm: 1.0625rem; }
  body.istoric .erou-interior, body.istoric .md-columns { grid-template-columns: 1fr; }
  body.istoric .erou-interior { padding-top: 2rem; }
  body.istoric .md-gallery.cols-2 { gap: 0.9rem; }
  body.istoric .md-facts div { grid-template-columns: 1fr; gap: 0; }
  body.istoric .md-timeline li { grid-template-columns: 1fr; gap: 0.2rem; }
  body.istoric .md-card, body.istoric .md-card:not(.with-img) { grid-template-columns: 1fr; grid-template-areas: "k" "t" "d" "i"; gap: 0.6rem; }
  body.istoric .md-img.right, body.istoric .md-img.left, body.istoric .md-box .md-img.right { float: none; width: 100%; margin: 1rem 0; }
  body.istoric .istoric-main blockquote { font-size: 1.2rem; }
  /* on a phone the reader sits at the top and the list scrolls under it */
  body.istoric .md-reader { grid-template-columns: 1fr; gap: 1.5rem; }
  body.istoric .md-reader-frame { order: -1; top: 0; z-index: 5; background: var(--hartie); padding-bottom: 0.3rem; }
  body.istoric .md-reader-frame iframe { height: 45vh; }
  body.istoric .md-reader-note { font-size: 0.8rem; }
  body.istoric .md-gallery, body.istoric .md-gallery.cols-4, body.istoric .md-gallery.portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1rem; }
  body.istoric .md-gallery.portraits > .md-img, body.istoric .md-gallery.portraits.wide > .md-img { flex-basis: calc((100% - 1rem) / 2); }   /* 2 in a row */
  body.istoric .md-gallery.portraits.small { gap: 1rem 0.7rem; }
  body.istoric .md-gallery.portraits.small > .md-img { flex-basis: calc((100% - 1.4rem) / 3); }   /* 3 in a row */
  body.istoric .md-gallery.portraits.small figcaption { font-size: 0.75rem; }
  body.istoric .md-gallery.portraits.small figcaption strong { font-size: 0.88rem; }
}