/* card-standard.css: the card standard (CARD-STANDARD-DRAFT06, owner-approved 9 Sep 2026) as it sits in the Claude Design review,
   installed verbatim with the same scoping reversal as responsive.css, loaded after the kit and before responsive.css as in the
   review. Edit the design, not this file. */
/* card-standard.css — the card standard, CARD-STANDARD-DRAFT06 (owner, 9 Sep 2026). Loaded after cards.css and
   kit-extra.css (the 8 Sep redesign) and before responsive.css; production ships these values in the kit.
   Scope: every face card and the detail record. The product card keeps its price row, size selector and Add to cart
   (the 8 Sep look) but its facts, identity block and body take the standard like every other card (owner, round 20). The tab band, the sort dropdown, the page size and the contract fields the
   cards read are untouched. Values are the draft's, verbatim; every rule is listed old -> new in CHANGES.md. */

/* THE GRID. Cards are content-sized (a set of one class lines up because every card has the same structure, never
   because a card is stretched to another's height). --set-n is the number of cards the column holds (kit .set:
   auto-fill, 300px minimum); --card-w the width each gets. The card sets the detail's width, never the other way. */
:root {
  --card-gap: 16px;
  --set-n: round(down, tan(atan2(calc(var(--col-w) + var(--card-gap)), calc(300px + var(--card-gap)))), 1);
  --card-w: calc((var(--col-w) - (var(--set-n) - 1) * var(--card-gap)) / var(--set-n));
}
.set { gap: var(--card-gap); align-items: start; }

/* FACE CARD: photo on top (kit .media, 4:3), one offering pill top left (kit .offer), name in the tenant accent,
   one-line address, a hairline, then the facts. */
.card .cbody { padding: 12px 14px 13px; }
/* identity block is a fixed minimum so the hairline lands on the same line across a set; a long name or address grows
   it for the whole set (copy rule: nothing is clamped) */
.card .cid, .set .card .cid { min-height: 74px; padding-bottom: 0; border-bottom: 0; margin-bottom: 0; }
.card .cname { color: var(--ac); font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 3px; line-height: 1.25; }
.card .caddr { font-size: 11.5px; color: var(--sub); margin: 0; line-height: 1.35; }
/* FACTS ARE ALWAYS TWO COLUMNS; four is two rows, never four columns. ONE SHAPE: the fact area always holds the full
   two-row shape (min-height 124), whatever it contains: four, three, two, one or no facts. */
.card .facts { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: minmax(44px, auto); gap: 0; border-top: 1px solid var(--line); padding-top: 9px; min-height: 124px; align-content: start; }
/* every cell holds room for a two-line label or a two-line value, so the first row sits on one line and the second on
   one line on every card in a set; small label over bold value; thin dividers, no tinted boxes */
.card .fact, .card .fact:nth-child(even), .card .fact:nth-child(n+3) { background: transparent; border: 0; border-radius: 0; padding: 0 10px 0 0; margin: 0; min-height: 44px; min-width: 0; height: auto; overflow: visible; }
.card .fact:nth-child(even) { padding-left: 11px; border-left: 1px solid var(--line); }
.card .fact:nth-child(n+3) { padding-top: 9px; margin-top: 9px; border-top: 1px solid var(--line); min-height: 62px; }
.card .facts.one .fact { padding-left: 0; border-left: 0; }
.card .fact label { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sub); margin: 0 0 2px; white-space: normal; }
.card .fact b { font-size: 12px; font-weight: 700; line-height: 1.3; display: block; }
/* a fact the strip names but the record does not carry */
.card .fact b.np, .card .fact b i { font-style: italic; font-weight: 600; color: var(--sub); }
@media (max-width: 210px) {
  .card .facts { grid-template-columns: 1fr; }
  .card .fact { padding-left: 0 !important; border-left: 0 !important; }
  .card .fact:nth-child(n+2) { padding-top: 9px; margin-top: 9px; border-top: 1px solid var(--line); }
}
/* a face card carries a button only when its class has a form CTA; it is last and stretches to the card's inner
   border (responsive.css R14 / R14b: 48px, full width of the body, 14px above it) */

/* DETAIL CARD: hero 16:9 with the offering pill and the photo count (kit), name and one-line address, then one fact
   strip across the card (value over label, hairlines above and below, dividers between cells; four across at
   desktop, two by two on phones), the tab band unchanged, the pane, the record's one CTA last. Two face cards wide. */
.pc { max-width: 100%; width: min(100%, calc(2 * var(--card-w) + var(--card-gap) + 34px)); }   /* exactly two face cards + one gutter + the pane's padding + the border (owner, round 20: three read too wide); never wider than the column */
.pc-id { padding: 15px 16px 12px; }
.pc-id .idwrap { padding-bottom: 0; border-bottom: 0; }
.pc-name { color: var(--ac); font-size: 17px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; line-height: 1.2; }
.pc-addr { font-size: 12.5px; color: var(--sub); margin-top: 4px; }
.pc-price { display: none; }   /* the price is a fact in the strip */
.pc-facts, .pc .pc-facts { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 0; padding: 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pc-fact, .pc-fact + .pc-fact { background: transparent; border: 0; border-radius: 0; padding: 11px 14px; min-height: 0; min-width: 0; height: auto; }
.pc-fact + .pc-fact { border-left: 1px solid var(--line); }
.pc-fact .v { font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.pc-fact .k { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sub); margin: 2px 0 0; }
.pc-fact .v.np { font-style: italic; font-weight: 600; color: var(--sub); }
.pc-facts + .tabrow, .pc-facts + .pane, .pc-facts + .copyblk { margin-top: 0; }
@media (max-width: 520px) {
  .pc-facts, .pc .pc-facts { grid-template-columns: repeat(2, 1fr); }
  .pc-fact:nth-child(odd) { border-left: 0; }
  .pc-fact:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.pane { padding: 16px; }
/* cards inside a detail are the same face card at the same size, two across (the pane is exactly 2 x --card-w + 1 gutter) */
.pc > .cta-bar { padding: 0 16px 16px; border-top: 0; }