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

/* ---- 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; }
.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; }
.rfi-co-hero__tierline { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.rfi-co-hero__tier {
  display: inline-block; font-family: var(--rfi-font-ui); font-size: 10px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
  color: var(--rfi-navy); background: var(--rfi-partner-tint); box-shadow: 0 0 0 1px var(--rfi-partner-line) inset;
  padding: 4px 10px; border-radius: var(--rfi-radius-xs);
}
.rfi-co-hero__since { font-size: var(--rfi-meta); color: var(--rfi-text-3); }

/* 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 (design-decisions.md 4). */
.rfi-co-hero__name { 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 -------------------------------- */
.rfi-co-panel { background: var(--rfi-surface); border-radius: var(--rfi-radius); box-shadow: var(--rfi-shadow); padding: 22px 24px; }
.rfi-co-panel__h { font-family: var(--rfi-font-ui); font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.rfi-co-panel__body p { font-size: 15px; line-height: 1.65; }
.rfi-co-panel__body p + p { margin-top: 12px; }
.rfi-co-panel__body a { color: var(--rfi-navy); text-decoration: underline; text-underline-offset: 2px; }
.rfi-co-panel__body a:hover { color: var(--rfi-teal); }

.rfi-co-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* One 3:2 box per photo, the same pattern as the card thumbnail (card.css): the box
   owns the ratio and clips, the img fills and crops. aspect-ratio on the img alone did
   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. */
.rfi-co-gallery__item { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--rfi-radius-sm); background: var(--rfi-border-soft); }
.rfi-co-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Products & Services -----------------------------------
   LABELS, not links: same visual family as a tag (flat page-ground fill, one radius)
   but no href, no hover, no pointer. 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
   (design-decisions.md 4). */
.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 states 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; }
.rfi-std-hint__a { display: inline-block; margin-top: 10px; font-family: var(--rfi-font-ui); font-size: 13px; font-weight: 500; color: var(--rfi-navy); border-bottom: 1px solid var(--rfi-partner-line); padding-bottom: 2px; }
.rfi-std-hint__a:hover { color: var(--rfi-teal); border-color: var(--rfi-teal); }

@media (max-width: 700px) {
  .rfi-co-hero { flex-direction: column; }
  .rfi-co-gallery { grid-template-columns: repeat(2, 1fr); }
}