/* ============================================================
   procedures.css — GRACIELLA V2 · Procedures page visual balance
   ------------------------------------------------------------
   ADDITIVE OVERLAY. Loaded ONLY by procedures.html and ru/procedures.html,
   AFTER style.css. It never edits style.css or main.js. It changes no
   content, no information architecture, no titles, no categories, and no
   study-panel behaviour — it adjusts only the visual RHYTHM of the
   procedure-card pill groups (layout/spacing). No colour or type changes,
   no centred pills, no masonry, no redesign.

   Cards are targeted STRUCTURALLY (no per-card hook classes, no markup
   change beyond the <link>): :has() selects a card by its own pill
   structure, so the rules stay correct regardless of card order. On a
   browser without :has() support the cards simply keep the existing
   flex-wrap layout — progressive enhancement, nothing breaks.

   Uses the existing design tokens (--s-2 = 1rem, --s-3 = 1.5rem) so
   spacing stays consistent with the rest of the system.
   ============================================================ */

/* ------------------------------------------------------------------
   Rejuvenation pill rhythm — use the shared flex-wrap (no override)
   ------------------------------------------------------------------
   An earlier attempt forced the six Rejuvenation pills into a 3-column
   grid (repeat(3, max-content)) to make a "3×2" matrix. But the six chips
   are different widths, so the columns sized to the widest chip in each
   column and left an uneven gap on the second row (e.g. between "RF
   lifting" and "Chemical peeling"). The clean, consistent result is the
   shared flex-wrap that EVERY other card uses — chips packed left with a
   uniform .4rem gap. At the desktop card width the six pills already wrap
   to a tidy two rows of three, with even spacing. So the Rejuvenation
   card intentionally keeps the default pill layout: no per-card override
   is applied here, which also guarantees pill rhythm is identical across
   all seven cards. */

/* ------------------------------------------------------------------
   OBJECTIVE 2 · Maxillofacial — harmonise the two pill groups
   ------------------------------------------------------------------
   This card uniquely carries a study-pill list (Dental implantation)
   immediately followed by a plain-tag list (Congenital anomalies,
   Tumour treatment, Nasal breathing & sinuses). As flex children of the
   card they sit a full card-gap (1rem) apart, which reads as two separate
   blocks. Pull the plain list up so all four chips flow as ONE coherent
   group, spaced like pills within a single list (~.4rem). The dot on the
   study pill is preserved as the ONLY distinction (it signals "opens a
   study"); chip chrome, content and behaviour are otherwise identical. */
.proc-card:has(.tags--study + .tags) .tags--study {
  margin-bottom: calc((var(--s-2) - .4rem) * -1); /* 1rem gap → net .4rem */
}

/* ------------------------------------------------------------------
   OBJECTIVE 3 · Last-row balance — the orphaned final card
   ------------------------------------------------------------------
   Seven cards in a two-column grid leave the last card (Non-surgical)
   alone on its row. Centre it across the row at exactly one-column width
   so it reads as deliberately balanced rather than a half-card hanging at
   the left. The two-column layout begins at 640px; below that the grid is
   single-column and this rule does not apply. Triggers only when the last
   card is also odd-positioned (i.e. genuinely orphaned), so an even card
   count would leave it untouched. */
@media (min-width: 640px) {
  .proc-grid > .proc-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--s-3)) / 2); /* one column width */
  }
}

/* ------------------------------------------------------------------
   OBJECTIVE 4 · Internal rhythm — consistent description height
   ------------------------------------------------------------------
   Card descriptions run 1–3 lines (Rhinoplasty is the longest, three
   lines at the 2-up widths). The differing heights pushed each card's
   pill group to a different vertical start (measured spread ~51px on
   desktop). Reserve three line-heights for the description so every
   card's pills begin at the same Y within a row. The principle line is
   already pinned to the card bottom (style.css `margin-top:auto`), so
   cards now align at the top (3:2 plate), the middle (pill start) and
   the bottom (principle line) — a calm, architectural rhythm.

   Applied only at the 2-up widths (>=640px), where cards sit side by
   side; stacked mobile keeps the natural height so short cards don't
   gain a needless gap. `3lh` scales with the line-height where
   supported; the px value (3 x 26px line-height) is the fallback. This
   reserves space only — it adds no text and changes no content. */
@media (min-width: 640px) {
  .proc-grid .proc-card > p:not(.principle-line) {
    min-height: 78px;
    min-height: 3lh;
  }
}