/* ==========================================================================
   pages/company.css — the company profile (listings/show) and its forms:
   add/edit your company (listings/new, listings/edit, listings/_fields),
   claim a profile (claims/new) and request quotes (quote_requests/new).
   Adapted from docs/redesign/directions/a-swiss-editorial/styles.css.
   Loads after 01–09, so these rules win ties with shared primitives.
   ========================================================================== */

/* ---------- Profile head: kicker · 55px name + grey tagline · meta · actions */
.profile-head { row-gap: var(--s-6); padding-block: clamp(64px, 8vw, 128px) var(--s-7); }
.profile-head__kicker { grid-column: 1 / span 2; padding-top: 0.55em; }
.profile-head__kicker .logo { margin-block-end: var(--s-4); }
.profile-head__kicker .muted { display: block; }
.profile-head__title { grid-column: 3 / span 9; font-size: var(--t-hero); line-height: var(--lh-tight); font-weight: 500; letter-spacing: var(--track-display); text-wrap: balance; }
.profile-head__title .grey { display: block; }
.profile-head__meta { grid-column: 3 / span 8; display: flex; flex-wrap: wrap; column-gap: var(--s-6); row-gap: 4px; color: var(--grey-text); }
.profile-head__247 { color: var(--ink); }
.profile-head__actions { grid-column: 3 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.profile-head__quiet { display: inline-flex; align-items: center; gap: var(--s-5); margin-inline-start: var(--s-3); }
.profile-head__quiet .save--text,
.profile-head__share { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); transition: color 200ms var(--ease); }
.profile-head__quiet .save--text:hover,
.profile-head__share:hover { color: var(--grey-text); }
.profile-head__quiet .icon { width: 18px; height: 18px; }
.profile-head__quiet .save-control form { display: contents; }
@media (max-width: 63.99rem) {
  .profile-head__kicker { grid-column: 1 / -1; padding: 0; color: var(--grey-text); }
  .profile-head__kicker p { display: flex; flex-wrap: wrap; column-gap: var(--s-3); }
  .profile-head__kicker .link { color: var(--ink); }
  .profile-head__kicker .muted { display: inline; }
  .profile-head__title, .profile-head__meta, .profile-head__actions { grid-column: 1 / -1; }
  .profile-head__quiet { width: 100%; margin: 0; }
}

/* Cover: 21:8 (4:3 on phones), captioned like print */
.profile-cover figcaption .link { color: var(--grey-text); }
.profile-cover figcaption .link:hover { color: var(--ink); }

/* ---------- Sticky text tabs, aligned to column 3 ------------------------ */
.profile-tabs { margin-block-start: var(--s-9); }
.profile-tabs .tabs__list { grid-column: 3 / -1; }
@media (max-width: 63.99rem) {
  .profile-tabs { margin-block-start: var(--s-7); }
  .profile-tabs .tabs__list { grid-column: 1 / -1; }
}

/* ---------- Main column (8 cols) + sticky aside (cols 10–12) ------------- */
.profile { align-items: start; }
.profile__main { grid-column: 1 / span 8; min-width: 0; }
.profile__aside { grid-column: 10 / -1; position: sticky; top: calc(var(--header-h) + 52px + var(--s-5)); padding-block: var(--s-7); }
.profile .row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--col-gap); }
.profile .row:first-child { border-top: 0; }
.profile .row__label { grid-column: 1 / span 2; }
.profile .row__main { grid-column: 3 / -1; min-width: 0; }
.profile .prose > p { margin: 0; }
.profile .prose > * + * { margin-block-start: 1em; }

/* Hairline fact grid */
.profile .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--col-gap); margin-block-start: var(--s-7); }
.profile .facts > div { padding-top: 10px; border-top: 1px solid var(--rule); }
.profile .facts dt { font-size: var(--t-s); color: var(--grey-text); }
.profile .facts dd { margin-top: 2px; }

/* Service rows: 20px name · grey description */
.profile .services li { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: baseline; column-gap: var(--col-gap); padding-block: var(--s-4); border-top: 1px solid var(--rule); }
.profile .services li:last-child { border-bottom: 1px solid var(--rule); }
.profile .services a { grid-column: 1 / span 3; font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); transition: color 200ms var(--ease); }
.profile .services a:hover { color: var(--grey-text); }
.profile .services span { grid-column: 4 / -1; color: var(--grey-text); }

/* Sub-labels, comma lists, 32px port links */
.profile .sub { margin-block: var(--s-6) var(--s-2); font-size: var(--t-s); color: var(--grey-text); }
.profile .sub:first-child { margin-block-start: 0; }
.profile .inline-list { display: flex; flex-wrap: wrap; column-gap: 0.28em; }
.profile .inline-list > li:not(:last-child)::after { content: ","; }
.profile .big-links { font-size: var(--t-l); line-height: 1.3; font-weight: 500; letter-spacing: var(--track-head); }
.profile .big-links a { transition: color 200ms var(--ease); }
.profile .big-links a:hover { color: var(--grey-text); }

/* Photos (more than one): a quiet strip of 4:3 frames */
.profile .photo-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.profile .photo-strip a:first-child { grid-column: 1 / -1; }
.profile .photo-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--field); }
.profile .photo-strip a:first-child img { aspect-ratio: 16 / 9; }

/* "Your company?" claim row + "Spotted something out of date?" disclosure.
   .claim-cta is fully defined here (the legacy rule it shares a name with can go). */
.profile .claim-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 0; border: 0; }
.profile .claim-cta p { max-width: 32em; color: var(--ink); }
.profile .claim-cta + .suggest-edit { margin-block-start: var(--s-5); }
.suggest-edit > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; }
.suggest-edit > summary::-webkit-details-marker { display: none; }
.suggest-edit > summary::after { content: "+"; color: var(--grey-text); }
.suggest-edit[open] > summary::after { content: "−"; }
.suggest-edit > summary:hover { color: var(--grey-text); }
.suggest-edit > form { max-width: 32em; margin-block-start: var(--s-5); }
.profile-disclaimer { max-width: 36em; margin-block-start: var(--s-6); font-size: var(--t-s); color: var(--grey-text); }

@media (max-width: 63.99rem) {
  .profile__main, .profile__aside { grid-column: 1 / -1; position: static; }
  .profile__aside { padding-block: var(--s-7) var(--s-8); border-top: 1px solid var(--rule); }
  .profile .row { grid-template-columns: minmax(0, 1fr); }
  .profile .row__label, .profile .row__main { grid-column: 1; }
  .profile .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile .services li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .profile .services a, .profile .services span { grid-column: 1; }
  .profile .photo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Aside: underline enquiry form, hairline contact list --------- */
.profile .aside-block + .aside-block { margin-block-start: var(--s-8); }
.profile .aside-block h2 { margin-block-end: var(--s-2); font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); }
.profile .aside-block > p { margin-block-end: var(--s-5); color: var(--grey-text); }
.aside-block__submit { margin-block-start: var(--s-3); }
.aside-block__fine { display: block; margin-block-start: var(--s-3); font-size: var(--t-s); color: var(--grey-text); }
.profile .contact-list { border-top: 1px solid var(--rule); }
.profile .contact-list li { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: baseline; gap: var(--s-3); padding-block: 12px; border-bottom: 1px solid var(--rule); }
.profile .contact-list small { font-size: var(--t-s); color: var(--grey-text); }
.profile .contact-list a { overflow-wrap: anywhere; }
.profile .contact-list .inline-form { display: inline; }
.phone-reveal { min-height: 28px; padding: 0; border: 0; background: none; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.phone-reveal:hover { color: var(--grey-text); }
/* "Sponsored · Also consider": a hairline block (the partial owns its inner classes) */
.aside-block--also > * { border-top: 1px solid var(--rule); padding-top: var(--s-4); }

/* ---------- Related companies as rows ------------------------------------ */
.profile-related { margin-block-start: var(--s-9); }

/* ---------- Mobile action bar: Call (quiet) · Send enquiry (ink) --------- */
.action-bar { display: none; }
@media (max-width: 63.99rem) {
  .action-bar { position: sticky; bottom: 0; z-index: 15; display: flex; gap: var(--s-2); padding: var(--s-3) var(--gutter); border-top: 1px solid var(--rule); background: var(--scrim); }
  .action-bar .btn { flex: 1; }
}

/* ==========================================================================
   Forms: add/edit your company, claim, request quotes.
   Same row anatomy as the profile: hairline · label in cols 1–2 · fields in
   cols 3–8. Scoped to .company-form so the admin editor (which also renders
   listings/_fields) keeps the workspace layout.
   ========================================================================== */
.company-form-head .masthead__intro a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; color: var(--ink); }
.company-form-head .masthead__intro a:hover { color: var(--grey-text); }
.company-form-head .masthead__body .flash { margin-block-start: var(--s-4); }

.company-form { --form-offset: calc((100% - 11 * var(--col-gap)) / 12 * 2 + 2 * var(--col-gap)); padding-block-end: var(--row-end); }
.company-form > .flash, .company-form > form > .flash { margin-block-end: var(--s-6); }
.company-form .form-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-5); padding-block: var(--s-7) var(--s-8); border-top: 1px solid var(--rule); }
.company-form .form-section__intro { grid-column: 1 / span 2; padding-top: 0.4em; }
.company-form .form-section__intro h2 { font-size: var(--t-body); font-weight: 400; letter-spacing: var(--track-body); line-height: var(--lh-body); }
.company-form .form-section__intro p { max-width: none; margin-block-start: var(--s-2); font-size: var(--t-s); color: var(--grey-text); }
.company-form .form-section > :not(.form-section__intro) { grid-column: 3 / span 6; min-width: 0; }
.company-form .form-grid { row-gap: var(--s-6); }
.company-form .stack { gap: var(--s-6); }
.company-form .check-group > summary small { margin-inline-start: auto; margin-inline-end: var(--s-3); font-size: var(--t-s); color: var(--grey-text); }
.company-form .check-group > summary:hover { color: var(--grey-text); }
.company-form .field > .field__label + .check-group,
.company-form .field__label + .check-group { margin-block-start: var(--s-3); }
.company-form .check-columns { column-gap: var(--s-6); }
.company-form .switch { border-top: 1px solid var(--rule); }

/* File inputs: a quiet button + grey file name */
.company-form input[type="file"], .file-input { max-width: 100%; min-height: 44px; font-size: var(--t-s); color: var(--grey-text); }
.company-form input[type="file"]::file-selector-button, .file-input::file-selector-button { min-height: 44px; margin-inline-end: var(--s-4); padding: 0 20px; border: 0; border-radius: var(--radius); background: var(--field); color: var(--ink); font: inherit; font-size: var(--t-body); cursor: pointer; transition: background-color var(--dur) var(--ease); }
.company-form input[type="file"]::file-selector-button:hover, .file-input::file-selector-button:hover { background: color-mix(in srgb, var(--field) 88%, var(--ink)); }
.company-form .logo-preview { width: 72px; height: 72px; padding: 6px; }

/* Actions: aligned to column 3, submit first */
.company-form .form-actions { justify-content: flex-start; align-items: center; gap: var(--s-3); padding-block: var(--s-5); padding-inline-start: var(--form-offset); border-top: 1px solid var(--rule); }
.company-form .form-actions .btn--ghost { order: 2; padding-inline: 12px; background: none; color: var(--grey-text); }
.company-form .form-actions .btn--ghost:hover { color: var(--ink); background: none; }
.company-form .form-actions--sticky { margin-inline: calc(var(--gutter) * -1); padding-inline-end: var(--gutter); padding-inline-start: calc(var(--form-offset) + var(--gutter)); }
.company-form__danger { padding-block: var(--s-7) 0; padding-inline-start: var(--form-offset); }
.company-form__danger p { margin-block-end: var(--s-3); font-size: var(--t-s); color: var(--grey-text); }

/* Profile completeness: a 2px line (native <progress>, no inline style) */
.completeness { display: block; width: 100%; max-width: 20rem; height: 2px; margin-block-end: var(--s-3); border: 0; background: var(--rule); appearance: none; -webkit-appearance: none; color: var(--ink); }
.completeness::-webkit-progress-bar { background: var(--rule); }
.completeness::-webkit-progress-value { background: var(--ink); }
.completeness::-moz-progress-bar { background: var(--ink); }

/* Supplier picker (request quotes) */
.supplier-list { border-top: 1px solid var(--rule); }
.supplier-list .check { align-items: baseline; padding-block: 12px; border-bottom: 1px solid var(--rule); }
.supplier-list .check input { align-self: center; }
.supplier-list .check small { display: block; color: var(--grey-text); }
.supplier-list .check strong { font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); }

@media (max-width: 63.99rem) {
  .company-form { --form-offset: 0px; }
  .company-form .form-section { grid-template-columns: minmax(0, 1fr); padding-block: var(--s-6) var(--s-7); }
  .company-form .form-section__intro, .company-form .form-section > :not(.form-section__intro) { grid-column: 1; }
  .company-form .form-section__intro { padding: 0; }
  .company-form .form-section__intro h2 { font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); }
  .company-form .form-actions .btn:not(.btn--ghost) { flex: 1; }
}