/* Fliess — the small amount of CSS the Fliess content model genuinely needs.
 *
 * Loaded only on Fliess pages, so nothing here can reach Gloor, Magmaweld or
 * DRATEC. Everything structural — the landing sections, the catalogue toolbar,
 * the filter rail, the card, the hero — now comes from the shared styles.css +
 * gloor.css system unchanged, because the Fliess generators emit the shared
 * markup. This file is deliberately small; when it grew, that was the symptom
 * of Fliess drifting out of the design system rather than a need of its own.
 *
 * Three things remain Fliess-specific by content, not by branding:
 *   1. a chemistry table with one column per element (up to 8) — the shared
 *      key/value spec table is two columns and stacks below 620px, which for a
 *      column-per-element table would print all the elements and then all the
 *      values, breaking the pairing. It needs real contained scrolling instead.
 *   2. a card media treatment for a manufacturer that publishes no product
 *      photographs at all.
 *   3. document groups on the authority page.
 */

/* --- document list ------------------------------------------------------- */
/* gloor.css styles .g-docs as a grid, written for the <div class="g-docs"> that
   Gloor, Magmaweld and DRATEC all emit. Fliess is the only brand that uses a
   real <ul> — which is the more accurate element for a list of documents, but
   it also keeps the UA disc marker and 40px indent that no other document list
   on the site has. Scoped to ul.g-docs so no unrelated list is touched. */
ul.g-docs { list-style: none; margin: 0; padding-left: 0; }

/* --- pagination button honours the hidden attribute ----------------------- */
/* .btn is display:inline-flex, an author-origin value, which beats the UA
   stylesheet's [hidden]{display:none}. Without this rule fliess.js sets
   moreBtn.hidden and nothing moves, so "Prikaži još" stayed on screen even when
   fewer than one page of results remained and clicking it did nothing. Gloor and
   Magmaweld have no load-more button; DRATEC hit exactly this and carries the
   same rule in dratec.css. Fliess is the only catalogue that paginates, so the
   rule has to live here. */
.g-more .btn[hidden] { display: none; }

/* --- contained technical-table scrolling ---------------------------------- */
/* The wrapper is the scroll container, so a wide table can never widen the
   page. It is focusable (tabindex="0") because a keyboard user must be able to
   scroll it without a pointer. */
.g-tablewrap {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border-radius: var(--radius-sm);
  scrollbar-width: thin;
}
.g-tablewrap:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* --- chemistry: one column per element ------------------------------------ */
/* Override the shared two-column stacking. At every width each value stays
   directly under its element symbol; narrow screens scroll the table sideways
   inside .g-tablewrap rather than losing the pairing. */
.g-prod .g-spec-chem th,
.g-prod .g-spec-chem td {
  display: table-cell;
  width: auto;
  min-width: 0;
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
}
.g-spec-chem {
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
}
.g-spec-chem thead th {
  font-weight: var(--fw-bold);
  color: var(--l-muted);
}
.g-spec-chem tbody td {
  color: var(--l-text);
  /* technical values line up digit-for-digit when comparing products */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.g-prod .g-tablewrap .g-spec { width: 100%; }

/* --- product-page media where no photograph exists ------------------------ */
/* The site's established no-photo treatment (DRATEC's `.dt-plate`, same
   constraint). `.fl-media` is the media COLUMN: the plate plus the caption that
   belongs to it, in the figure/figcaption relationship DRATEC uses -- the
   caption sat in the information column below the CTAs, 500px from the panel it
   described.

   The plate names the programme group, not the designation: the designation is
   the h1 immediately beside it and the last breadcrumb above it. */
.fl-media { display: flex; flex-direction: column; gap: 10px; }
.fl-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 34px 24px;
  min-height: 240px;
  border: 1px solid var(--l-line);
  border-radius: var(--radius-md, 16px);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(56, 146, 207, 0.12), transparent 70%),
    var(--l-surface);
}
.fl-plate img { width: min(240px, 70%); height: auto; opacity: 0.95; }
.fl-plate-cat {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--l-muted);
}
.fl-media .form-note { margin-top: 0; }
/* The media column is sticky beside the technical column, as Gloor's gallery
   is; DRATEC's plate is not, and its media scrolls away on a long page. */
@media (min-width: 881px) {
  .g-prod .fl-media { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}

/* Related-product chips carry the welding process Fliess states for each
   relationship; it must read as a qualifier, not as part of the designation. */
.g-ptags .badge small {
  margin-left: 6px;
  font-weight: 700;
  font-size: var(--fs-2xs);
  color: var(--l-muted);
}

/* --- card media where no product photograph exists ------------------------ */
/* Fliess publishes no per-product photograph, so the frame carries the brand
   mark and nothing else. It briefly carried the designation as well, which is
   the card's own title twelve pixels below -- every card printed its name
   twice, and on long designations that was the loudest thing on the card.
   None of the other three catalogues put text in this frame.
   Never a stock photo, and never a category photo, which would imply the image
   depicts this specific alloy. */
.fl-card-media {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 22px 16px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(56, 146, 207, 0.1), transparent 70%),
    rgba(255, 255, 255, 0.02);
}
.fl-card-media img {
  width: min(150px, 68%);
  height: auto;
  object-fit: contain;
  opacity: 0.92;
}

/* --- document groups on the authority page -------------------------------- */
.g-doc-group {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--l-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: var(--sp-5) 0 var(--sp-2);
}
.g-doc-group:first-of-type { margin-top: var(--sp-2); }

/* --- catalogue toolbar ----------------------------------------------------- */
/* Fliess's sort control is the only two-option sort on the site; give its
   select the same minimum target height the shared controls have. */
.g-toolbar .g-sort select { min-height: 44px; }

/* --- category-page introduction ------------------------------------------- */
/* Sits between the hero and the sticky toolbar, so a category page explains the
   group before it lists it. Bounded to a reading measure and given the section
   rhythm the landing pages use, not the tighter product-page one. */
.g-cat-intro { padding-block: var(--sp-5) var(--sp-4); max-width: 74ch; }