/* ============================================================
   components/company.css
   The company profile surface: identity hero, panels, gallery, product labels,
   documents, relation lists and the free-listing hint.
   No outer margin on any root; the page section places them.

   Ported from refindustry components/company.css, 2026-08-12. What is NOT ported and why:
   the row list (.rfi-crow) and its stylesheet, because this catalogue uses a CARD grid
   following the live Bitrix site rather than the donor's rows; and the magazine cover grid,
   because the magazine section is not migrated (spec section 1).

   Added here, with no donor counterpart, because this project has relations the donor does
   not: the equipment, projects and branches lists at the foot of the file.
   ============================================================ */

/* ---- identity hero ----------------------------------------- */
.rfi-co-hero { background: var(--rfi-surface); border-radius: var(--rfi-radius); box-shadow: var(--rfi-shadow); padding: 24px 26px; display: flex; gap: 24px; align-items: flex-start; }
/* The logo box never crops and never upscales. Measured over the 617 migrated files: widths
   run 55px to 7167px and 232 of them are squarish rather than logo-shaped, so `contain` is
   the only fit that is honest about all of them. */
.rfi-co-hero__logo { width: 132px; height: 88px; flex: none; border-radius: var(--rfi-radius-sm); display: flex; align-items: center; justify-content: center; background: var(--rfi-surface); overflow: hidden; }
.rfi-co-hero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rfi-co-hero__id { flex: 1; min-width: 0; }
/* The tierline is the flex row the badge sits in and it STAYS: single-company.php still
   emits it. The badge inside it is `.rfi-tierbadge--hero` in components/tier-badge.css.
   `.rfi-co-hero__tier`, the navy-on-tint chip that was the same colour for every tier,
   was deleted 2026-08-22 with the tier-badge feature flag; nothing emitted it once the
   flag went. Its one distinguishing property, the 10px scale rather than the shared
   --rfi-label, moved into the component as the `--hero` modifier. */
.rfi-co-hero__tierline { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }

/* The FULL company name, exactly as the company entered it. It wraps rather than truncates:
   this is the one page where the reader is establishing which legal entity they are looking
   at, so clipping it would defeat the page.

   `.rfi-t-h1-rec` IS THE SAME TREATMENT ON A CATALOGUE RECORD, added 2026-08-15 by the
   owner's decision that equipment and projects follow this template. Those two pages carried
   `.rfi-t-h1`, the 24px/500 LISTING heading, so a record's own name was smaller and lighter
   than a company's and, once `.rfi-t-h2` was measured, smaller than the section headings
   below it. Shared selector rather than a copied value, so the three titles cannot drift. */
.rfi-co-hero__name,
.rfi-t-h1-rec { font-family: var(--rfi-font-ui); font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -.2px; }
.rfi-co-hero__type { font-size: 13.5px; color: var(--rfi-text-2); margin-top: 7px; }

.rfi-co-hero__meta { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--rfi-text-2); }
.rfi-co-hero__m { display: flex; align-items: flex-start; gap: 8px; }
.rfi-co-hero__m svg { width: 15px; height: 15px; fill: var(--rfi-text-3); flex: none; margin-top: 2px; }
.rfi-co-hero__m a { color: var(--rfi-navy); }
.rfi-co-hero__m a:hover { color: var(--rfi-teal); }

/* ---- a panel on the profile -------------------------------- */
/*
 * THE SECOND SELECTOR IN EACH RULE BELOW IS THE CATALOGUE-RECORD SURFACE, added 2026-08-15.
 *
 * Owner's decision of 2026-08-15: equipment and projects follow the COMPANY template, because
 * they are catalogue records rather than running text. That decision covers the page title size
 * and whether the reading measure applies; the surface, the heading and the prose model follow
 * from it, and they are written as SHARED SELECTORS rather than copied values so that the two
 * pages cannot drift from the company profile the way they drifted from each other.
 *
 * Every value in these rules is the donor's, from refindustry components/company.css lines 34-39.
 * Nothing here was chosen; the only choice was which of the donor's templates to point at, and
 * that was the owner's.
 */
.rfi-co-panel,
.rfi-rec { background: var(--rfi-surface); border-radius: var(--rfi-radius); box-shadow: var(--rfi-shadow); padding: 22px 24px; }

/*
 * `.rfi-t-h2` WAS WRITTEN ON FIVE HEADINGS AND DECLARED NOWHERE until 2026-08-15. It is used by
 * single-equipment.php and single-projects.php; the audit of 2026-08-15 found no rule for it in
 * any of the 24 stylesheets, so those headings were rendering at the browser's own h2 default,
 * 1.5em against a 17px body = 25.5px, bold, in the TEXT font rather than the UI one, which made
 * every section heading LARGER than the page title beside it. It is declared here rather than in
 * base.css beside the other type utilities so that the value exists exactly once: it is the
 * company panel heading, by the decision above.
 */
.rfi-co-panel__h,
.rfi-t-h2 { font-family: var(--rfi-font-ui); font-size: 16px; font-weight: 600; margin-bottom: 12px; }

/*
 * `.rfi-prose` HAD NO RULE EITHER. It carries the descriptive text on equipment and projects.
 * With no rule, and with base.css's `* { margin: 0 }` reset, its paragraphs had NO spacing
 * between them (measured: 7 of 318 equipment bodies carry more than one paragraph, 0 of 429
 * projects, so it was wrong on 7 pages and invisible on the rest), and a link inside it fell
 * through to base.css's `a { color: inherit; text-decoration: none }`, i.e. it was
 * indistinguishable from plain text. Neither failure produced an error or a visible fault
 * anywhere an editor would look.
 */
.rfi-co-panel__body p,
.rfi-prose p { font-size: 15px; line-height: 1.65; }
.rfi-co-panel__body p + p,
.rfi-prose p + p { margin-top: 12px; }
.rfi-co-panel__body a,
.rfi-prose a { color: var(--rfi-navy); text-decoration: underline; text-underline-offset: 2px; }
.rfi-co-panel__body a:hover,
.rfi-prose a:hover { color: var(--rfi-teal); }

/*
 * `.rfi-prose__lead` WAS DECLARED HERE AND IS DELETED, 2026-08-15, in the session that added it.
 * It was a standfirst for the tenders record, and the measurement that followed removed the
 * element: on 16 of 16 tenders carrying both a body and an excerpt, the excerpt repeats the
 * body's opening, so no template emits the class any more. A rule for markup nothing can produce
 * is a rule nobody can check, which is the reason the facts panel declines to style the donor's
 * action button. See holod_tender_description().
 */

/*
 * The «Показать все» line under a list the panel has capped. No donor counterpart: the donor's
 * company profile carries no capped relation lists, because Refindustry does not have the
 * relations spec section 5 defines here. Built from the company template's own in-panel link
 * idiom, `.rfi-std-hint__a` below: UI font, 13px, weight 500, navy, teal on hover. The top margin
 * is the panel heading's 12, so the line sits off the list by the same distance the heading sits
 * off its block.
 */
.rfi-co-panel__all { margin-top: 12px; font-family: var(--rfi-font-ui); font-size: 13px; font-weight: 500; }
.rfi-co-panel__all a { color: var(--rfi-navy); }
.rfi-co-panel__all a:hover { color: var(--rfi-teal); }
/* A count beside the heading, for the lists that are capped. It is the only place the reader
   is told the list is a sample rather than the whole thing. */
.rfi-co-panel__n { font-family: var(--rfi-font-ui); font-size: 13px; font-weight: 400; color: var(--rfi-text-3); margin-left: 8px; }

/* ---- gallery: a sideways strip ------------------------------
   REPLACED THE 3-COLUMN GRID 2026-08-22. The grid ran two rows deep on a rich
   profile (ARNEG carries 22 photographs) and pushed every block below it off the
   first screen. Six across, the rest reached by scrolling the strip sideways or
   by opening it in place.

   THE CARD WRAPPER IS UNTOUCHED. This is the content inside .rfi-co-panel; the
   panel's own padding, background and heading are exactly as they were.

   NO JAVASCRIPT. The «Все N фото» control is a <label> for a visually hidden
   checkbox that precedes the items, so `:checked ~` reveals the tail. Same
   mechanism as the masthead burger, and it is keyboard operable because the
   control is a real focusable input rather than a div with a handler. */
.rfi-co-strip { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; }
/* One 3:2 box per photo, the same pattern as the card thumbnail: the box owns the ratio and
   clips, the img fills and crops. aspect-ratio on the img alone does NOT hold, because
   wp_get_attachment_image emits width/height attributes that size the img by its own ratio,
   so tall source photos overran the box unevenly. `flex: none` is what stops a strip of six
   squeezing itself to fit instead of scrolling. */
.rfi-co-strip__i { flex: none; width: 210px; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--rfi-radius-sm); background: var(--rfi-border-soft); scroll-snap-align: start; }
.rfi-co-strip__i img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The toggle itself is never seen and must still be focusable, so it is moved out of view
   rather than `display: none`, which would take it out of the tab order. */
.rfi-co-strip__t { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rfi-co-strip__i--more { display: none; }
.rfi-co-strip__t:checked ~ .rfi-co-strip__i--more { display: block; }
.rfi-co-strip__all {
  flex: none; width: 210px; aspect-ratio: 3 / 2; border-radius: var(--rfi-radius-sm);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-family: var(--rfi-font-ui); font-size: 13.5px; font-weight: 600; color: var(--rfi-navy);
  background: var(--rfi-partner-tint); box-shadow: 0 0 0 1px var(--rfi-partner-line) inset;
}
.rfi-co-strip__all:hover { color: var(--rfi-teal); }
.rfi-co-strip__t:checked ~ .rfi-co-strip__all { display: none; }
.rfi-co-strip__t:focus-visible ~ .rfi-co-strip__all { outline: 2px solid var(--rfi-teal); outline-offset: 2px; }

/* ---- О компании: three lines, then «Читать далее» -----------
   The clamp is CSS so it cuts at a rendered line boundary, never mid-word and
   never mid-tag: these bodies carry markup and a character cut can leave an
   unclosed element that swallows the rest of the panel. The control is drawn by
   the template only when the body is long enough to need one. */
.rfi-co-about__c { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rfi-co-about__c--full { display: block; }
.rfi-co-about__t { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rfi-co-about__t:checked ~ .rfi-co-about__c { display: block; overflow: visible; }
.rfi-co-about__more {
  display: inline-block; margin-top: 8px; cursor: pointer;
  font-family: var(--rfi-font-ui); font-size: 13px; font-weight: 500; color: var(--rfi-navy);
}
.rfi-co-about__more:hover { color: var(--rfi-teal); }
.rfi-co-about__t:checked ~ .rfi-co-about__more { display: none; }
.rfi-co-about__t:focus-visible ~ .rfi-co-about__more { outline: 2px solid var(--rfi-teal); outline-offset: 2px; }

/* ---- Проекты компании: cards ---------------------------------
   WAS A TWO-COLUMN LIST OF BARE LINKS until 2026-08-22. A project is a piece of
   evidence and a title alone is a poor one; the picture is most of what makes it
   persuasive. Three per row, one per row on a narrow viewport (mobile.css).

   THE IMAGELESS VARIANT IS REAL, not defensive: 15 published projects carry
   neither `rfi_preview_image` nor `rfi_gallery`, across 12 of the 61 companies
   that have projects. Those render text-only. There is deliberately no grey
   plate, because an empty plate promises a photograph that does not exist and
   makes a thin record look broken rather than simply text. */
.rfi-co-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rfi-co-proj { display: flex; flex-direction: column; gap: 9px; border-radius: var(--rfi-radius-sm); overflow: hidden; }
.rfi-co-proj:hover .rfi-co-proj__nm { color: var(--rfi-teal); }
.rfi-co-proj__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--rfi-radius-sm); background: var(--rfi-border-soft); }
.rfi-co-proj__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rfi-co-proj__b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rfi-co-proj__nm { font-family: var(--rfi-font-ui); font-size: 14.5px; font-weight: 500; line-height: 1.35; transition: color .15s ease; }
.rfi-co-proj__pl { font-size: 12.5px; color: var(--rfi-text-3); }

/* ---- Products & Services -----------------------------------
   LABELS, not links, and the donor's reasoning is kept because it applies here unchanged:
   they describe what this company does. A link would promise a page and, worse, would take a
   paying profile's visitor back out into the catalogue, which is the opposite of what the
   profile is for. */
.rfi-ps-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.rfi-ps-tag { font-family: var(--rfi-font-ui); font-size: 13px; color: var(--rfi-text-2); background: var(--rfi-bg); border-radius: var(--rfi-radius); padding: 7px 13px; line-height: 1; }

/* ---- documents --------------------------------------------- */
.rfi-docs { display: flex; flex-direction: column; }
.rfi-doc { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rfi-border-soft); }
.rfi-doc:first-child { border-top: 0; padding-top: 2px; }
.rfi-doc__ic { width: 34px; height: 34px; flex: none; border-radius: var(--rfi-radius-xs); background: var(--rfi-partner-tint); display: flex; align-items: center; justify-content: center; }
.rfi-doc__ic svg { width: 16px; height: 16px; fill: var(--rfi-navy); }
.rfi-doc__nm { font-family: var(--rfi-font-ui); font-size: 14px; font-weight: 500; }
.rfi-doc:hover .rfi-doc__nm { color: var(--rfi-teal); }
.rfi-doc__sz { font-size: 11.5px; color: var(--rfi-text-3); margin-top: 2px; }

/* ---- free-listing hint (Standard only) ---------------------
   The one place a free profile is told what it is missing. It names only what the company
   ACTUALLY has on file, so it is never a generic upsell about things that do not exist. */
.rfi-std-hint { background: var(--rfi-partner-tint); border-radius: var(--rfi-radius); box-shadow: 0 0 0 1px var(--rfi-partner-line) inset; padding: 18px 20px; }
.rfi-std-hint__t { font-family: var(--rfi-font-ui); font-size: 15px; font-weight: 600; color: var(--rfi-navy); }
.rfi-std-hint__s { font-size: 13px; line-height: 1.55; color: var(--rfi-text-2); margin-top: 6px; }

/* ---- Оборудование и бренды: chips ---------------------------
   WAS A TWO-COLUMN LINK LIST until 2026-08-22. Brand names are short and of very
   uneven length, which is the case a fixed two-column grid handles worst: every
   row is as tall as its longer side, the short names leave a hole beside them,
   and a twelve-item list spends half the panel on whitespace. Chips wrap to the
   content, so the block is as tall as the names actually need.

   No donor counterpart: Refindustry does not carry the relations spec section 5
   defines here. BACKLOG 89.3 carries bringing the donor to this treatment.

   THE «Показать все» REVEAL IS THE LAST CHIP, in the same flow rather than a
   paragraph under the block. In a wrapping flow a trailing line reads as a new
   element; as a chip it reads as the continuation it is, and it sits beside the
   last brand rather than under the whitespace after it. It is marked with its
   own modifier so it is legible as a control and not as a thirteenth brand.

   The «N из M» counter beside the heading is NOT here: it is .rfi-co-panel__n,
   unchanged, still fed by holod_truncation(). */
.rfi-co-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rfi-co-chip {
  display: inline-block; max-width: 100%;
  padding: 6px 12px; border-radius: var(--rfi-radius-sm);
  border: 1px solid var(--rfi-border-soft); background: var(--rfi-surface);
  font-size: 13.5px; line-height: 1.3; color: var(--rfi-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.rfi-co-chip:hover { border-color: var(--rfi-teal); color: var(--rfi-teal); }
/* The reveal chip: the same shape, in the UI face and the brand colour, so it is
   read as a control rather than as one more brand. */
.rfi-co-chip--all {
  font-family: var(--rfi-font-ui); font-weight: 500; color: var(--rfi-navy);
  border-color: var(--rfi-partner-line); background: var(--rfi-partner-tint);
}

@media (max-width: 700px) {
  .rfi-co-hero { flex-direction: column; }
  /* The photo strip scrolls sideways at every width, so it needs no column change:
     only the cell gets smaller. The projects grid drops to ONE card per row, because
     three across a phone is a thumbnail grid rather than a set of cards. */
  .rfi-co-strip__i,
  .rfi-co-strip__all { width: 168px; }
  .rfi-co-projects { grid-template-columns: 1fr; }
}