/* =============================================================================
   EDITOR-CONTENT.CSS — shared, versioned, SHIPPED BY tools/update-front.sh.
   Do not edit this file on a site: the next update overwrites it.
   =============================================================================

   WHAT THIS IS
   The structural half of the editor28 (Tiptap) front contract — the rules that
   make editor features WORK, not the rules that make them look like this site.
   Colours, radii, fonts and spacing tokens are deliberately absent: they are
   the site's design and live in the site's own stylesheet, which loads after
   this file and wins.

   WHY IT EXISTS
   Every editor feature that emits markup used to be hand-ported into each
   site's style.css. Hand-porting is silent when it is skipped and silent when
   it is half-done: etransport.si ran for six weeks with the JS half ported and
   the CSS half not, and a fleet sweep on 2026-08-07 found four of nine ported
   sites already missing .file-card and two missing .link-card — features that
   shipped after their port and were never backfilled. A file that travels with
   the front cannot drift that way.

   THE SCOPE SELECTOR
   Element-level rules are scoped with the literal `:is(.rte-content)`.
   update-front.sh rewrites that exact string from
   $siteConfig['editor']['contentSelector'] when a site wraps rich text in
   something else — .content-inner on etransport and cargo-magazin, and it is
   the majority case among ported sites, not an edge case. `:is()` is used
   rather than `:where()` on purpose: it keeps the class's specificity, so
   these rules still beat a site's global `img { width: auto }`.

   Class-level rules (.content-gallery, .link-card, .file-card, .files-list)
   are NOT scoped — those class names are unique to editor output and also
   appear outside rich text (partials/attachments.tpl), so they must apply
   wherever the markup lands.

   WHAT IS NOT HERE, ON PURPOSE
   .par-* block styles and .btn-one/.btn-two/.btn-three are pure look. An
   unstyled .par-highlight is a plain paragraph, which is legible; a themed one
   is the site's design decision. They stay in the site's stylesheet — see
   .claude/docs/tiptap-front-assets.md §3 and §4.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Base — image/video sizing and the float clear
   `display: block` is what makes the editor's centre alignment work at all:
   the editor emits `margin-left:auto; margin-right:auto` inline, which does
   nothing to an inline element. `max-width` keeps oversized legacy uploads
   (640x480 mp4s, full-size Froala-era images) inside a phone column.
   -------------------------------------------------------------------------- */
:is(.rte-content) img,
:is(.rte-content) video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* inline-styled floats must not escape the content box */
:is(.rte-content)::after {
  content: '';
  display: table;
  clear: both;
}


/* -----------------------------------------------------------------------------
   2. Tables — the editor stores <colgroup> widths; main.js/editor-content.js
   wraps the table in .table-wrap so a wide one scrolls instead of blowing out
   the page on a phone.
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table-wrap > table { min-width: 480px; margin: 0; }

:is(.rte-content) table {
  width: 100%;
  border-collapse: collapse;
}


/* -----------------------------------------------------------------------------
   3. Accordion — native <details>/<summary>, no JS.
   Only the marker removal and the summary layout are structural; the border,
   background and open/closed affordance are the site's.
   -------------------------------------------------------------------------- */
:is(.rte-content) summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
:is(.rte-content) summary::-webkit-details-marker { display: none; }


/* -----------------------------------------------------------------------------
   4. Heading anchors — the editor's "Anchor" option puts an id on a heading
   and links to #id. Without an offset the target lands under a fixed header.
   Sites that set --header-height get the right offset for free; the fallback
   is a sane guess, and --rte-anchor-offset overrides both.
   -------------------------------------------------------------------------- */
:is(.rte-content) [id] {
  scroll-margin-top: var(--rte-anchor-offset, calc(var(--header-height, 4.5rem) + 1.5rem));
}


/* -----------------------------------------------------------------------------
   5. Inline galleries — grid, "images per row", captions.
   The 4/3 crop and the gap are defaults, not decisions: they sit in :where()
   so a single unqualified site rule replaces them.
   -------------------------------------------------------------------------- */
.content-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
:where(.content-gallery) {
  gap: 1rem;
  margin-block: 1.5rem;
}
.content-gallery a { display: block; overflow: hidden; }
.content-gallery img { width: 100%; }
:where(.content-gallery img) {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* the editor's "images per row" option */
.content-gallery.gallery-cols-2 { grid-template-columns: repeat(2, 1fr); }
.content-gallery.gallery-cols-3 { grid-template-columns: repeat(3, 1fr); }
.content-gallery.gallery-cols-4 { grid-template-columns: repeat(4, 1fr); }
.content-gallery.gallery-cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 640px) {
  .content-gallery[class*="gallery-cols-"] { grid-template-columns: repeat(2, 1fr); }
}

/* captioned items: <figure><a><img></a><figcaption> */
.content-gallery figure { margin: 0; }
:where(.content-gallery figcaption),
:where(:is(.rte-content) figure figcaption) {
  font-size: 0.875em;
  opacity: 0.75;
}
:is(.rte-content) figure { margin-inline: 0; }


/* -----------------------------------------------------------------------------
   6. Justified galleries — the editor's "Poravnano" option.
   fjGallery sizes each item to its natural ratio and sets inline widths, so
   the grid and the crop above have to yield. These selectors are deliberately
   NOT in :where(): a site with a global `img { width: auto }` would otherwise
   win and every justified row would collapse (hit on cargo-magazin).
   Row height comes from --gallery-row-height, read by the JS; .gallery-rh-*
   are the editor's per-gallery presets.
   -------------------------------------------------------------------------- */
.content-gallery.gallery-justified {
  display: block;
  --gallery-row-height: 220px;
}
.content-gallery.gallery-rh-140 { --gallery-row-height: 140px; }
.content-gallery.gallery-rh-220 { --gallery-row-height: 220px; }
.content-gallery.gallery-rh-320 { --gallery-row-height: 320px; }
.content-gallery.gallery-justified a { display: block; }
.content-gallery.gallery-justified img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: unset;
}
/* captions live in the lightbox for this variant */
.content-gallery.gallery-justified figcaption { display: none; }


/* -----------------------------------------------------------------------------
   7. Link / product card — editor "Product / link card".
   <div class="link-card"><a><img><span class="link-card-body">…</span></a></div>
   The thumbnail is hotlinked from the source site; if it 404s later the card
   has to degrade to text-only, which is why the flex row does not depend on
   the image being there.
   -------------------------------------------------------------------------- */
.link-card > a {
  display: flex;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.link-card img {
  flex: 0 0 auto;
  object-fit: cover;
  align-self: stretch;
}
:where(.link-card img) { width: 140px; }
@media (max-width: 480px) {
  :where(.link-card img) { width: 96px; }
}
.link-card .link-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.link-card .link-card-title,
.link-card .link-card-desc,
.link-card .link-card-domain { display: block; }
.link-card .link-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* -----------------------------------------------------------------------------
   8. File / download banner — editor "Insert document".
   <div class="file-card"><a><span class="file-card-ext">PDF</span>
     <span class="file-card-body">…</span></a></div>
   .file-card-locked = lead-gated, links through /ajax/dl/<id>.
   -------------------------------------------------------------------------- */
.file-card > a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.file-card .file-card-ext {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
:where(.file-card .file-card-ext) { width: 48px; height: 48px; }
.file-card .file-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.file-card .file-card-title,
.file-card .file-card-meta { display: block; }
.file-card .file-card-meta { overflow-wrap: anywhere; }


/* -----------------------------------------------------------------------------
   9. Documents inserted "as a list" — <ul class="files-list">
   -------------------------------------------------------------------------- */
.files-list {
  list-style: none;
  padding: 0;
}
.files-list li { margin: 0; }
.files-list a {
  display: flex;
  align-items: center;
  text-decoration: none;
}