/**
 * .ut-pv-* — visual expression for the public organization read-surface.
 *
 * Fase 3-visuell (B-FP-024). Plain, hand-written CSS — NOT a Tailwind entry, so
 * it is never tree-shaken/purged (the same posture as ui-core's primitive CSS,
 * e.g. section-nav.css). Lives in this consumer plugin (public-views owns the
 * .ut-pv-* expression); the ui-core primitives (Banner/SectionNav/Accordion) and
 * the token layer are ui-core-owned and are NOT touched here.
 *
 * Consumes ONLY the semantic token roles from the `.ut-ui` scope (foundation
 * § 2.2) — never the physical --ut-color-* ramp. Every org view renders inside
 * `.ut-ui` (view_wrap / overview root / sub-view banner wrapper — Q-FP-028), so
 * --ut-surface, --ut-content, --ut-border, --ut-brand*, intent surfaces, radius,
 * spacing and motion all resolve.
 *
 * Enqueued (handle `ut-pv-org-views`, dep `ut-ui-core`) ONLY on the 9 org views
 * via the per-view should_load() gate — never global (perf).
 *
 * Design (B-FP-024): card-based — list cards (one bordered card per list,
 * hairline rows) + section cards (overview) on desktop; on narrow COLUMN width
 * (container-query ≤ 40rem) the sections shed their frame edge-to-edge to use the
 * mobile width. Badge intents (success/info/warning/danger/brand) realise the
 * lifecycle-state expression (UX F4).
 */

/* --------------------------------------------------------------------------- *
 * View shell + vertical rhythm.
 * `:not(:first-child)` gives (0,2,0) so the rhythm wins over a child's own
 * `margin:0` (a plain `> * + *` ties on specificity and loses — it nulled the
 * summary's top gap).
 * --------------------------------------------------------------------------- */
.ut-pv-bulletin {
  max-width: 46rem;
  margin: var(--ut-space-section) auto;
  padding: var(--ut-space-section);
  color: var(--ut-content);
  overflow-wrap: anywhere;
}
.ut-pv-bulletin__body {
  margin-top: var(--ut-space-section);
}
.ut-pv-org-overview,
.ut-pv-org-view {
  container-type: inline-size;
  container-name: utpv;
  color: var(--ut-content);
}
.ut-pv-org-overview > *:not(:first-child),
.ut-pv-org-view > *:not(:first-child) {
  margin-top: var(--ut-space-section);
}
/* Sub-view: the Banner sits OUTSIDE view_wrap() (its own `.ut-ui` wrapper), so
   give the content section air below it. */
.ut-ui-banner + .ut-pv-org-view {
  margin-top: var(--ut-space-section);
}

/* --------------------------------------------------------------------------- *
 * Identity: page title (Banner title slot), type pills (subtitle), initials.
 * The Banner primitive owns the card + logo; these are the consumer-owned slots.
 * --------------------------------------------------------------------------- */
.ut-pv-title {
  margin: 0;
  font-size: inherit; /* inherits the ui-core .ut-text-display role on the slot */
  font-weight: inherit;
  line-height: 1.2;
  color: var(--ut-content);
}
.ut-pv-typepills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.ut-pv-typepill {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--ut-radius-pill);
  background: var(--ut-selected-surface);
  color: var(--ut-brand-strong);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}
.ut-pv-initials {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ut-content-muted);
}

/* --------------------------------------------------------------------------- *
 * Contact strip (overview).
 * --------------------------------------------------------------------------- */
.ut-pv-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.ut-pv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 24px; /* target size ≥ 24px (SC 2.5.8) */
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-pill);
  background: var(--ut-surface);
  color: var(--ut-link);
  font-size: 0.875rem;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--ut-motion-fast), border-color var(--ut-motion-fast), color var(--ut-motion-fast);
}
.ut-pv-chip:hover {
  background: var(--ut-hover-surface);
  border-color: var(--ut-border-strong);
  color: var(--ut-interactive-hover);
}
.ut-pv-chip:focus-visible {
  outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color);
  outline-offset: var(--ut-focus-ring-offset);
}
.ut-pv-chip-contact {
  border-color: var(--ut-brand);
  color: var(--ut-interactive);
  font-weight: 600;
}

/* --------------------------------------------------------------------------- *
 * Person connections (B-FP-437, L4b / B5, C4): one row per organization or
 * place the person opened to everyone. The pill carries an icon AND a word —
 * colour is never the only carrier of meaning. Text stays --ut-content on the
 * intent surface, so contrast does not depend on the intent hue.
 * --------------------------------------------------------------------------- */
.ut-pv-conns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.ut-pv-conn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.ut-pv-conn__name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ut-pv-conn__role {
  color: var(--ut-content-muted);
}
.ut-pv-conn__role::before {
  content: " · ";
}
.ut-pv-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.1875rem 0.5625rem 0.1875rem 0.4375rem;
  border: 1px solid var(--ut-neutral-border);
  border-radius: var(--ut-radius-pill);
  background: var(--ut-neutral-surface);
  color: var(--ut-content);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.ut-pv-pill svg {
  flex: none;
}
.ut-pv-pill--organization {
  border-color: var(--ut-success-border);
  background: var(--ut-success-surface);
}
.ut-pv-pill--place {
  border-color: var(--ut-warning-border);
  background: var(--ut-warning-surface);
}

/* --------------------------------------------------------------------------- *
 * Lead / summary.
 * --------------------------------------------------------------------------- */
.ut-pv-summary {
  margin: 0;
  max-width: var(--ut-measure-prose);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ut-content-muted);
}

/* --------------------------------------------------------------------------- *
 * Section cards (overview). Scoped via `.ut-pv-section` — NOT bare `.ut-pv-card`
 * (the catalog uses `.ut-pv-card` for a different, clickable org-card anatomy).
 * --------------------------------------------------------------------------- */
.ut-pv-section {
  background: var(--ut-surface);
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-card);
  padding: var(--ut-space-section);
  scroll-margin-top: var(--ut-scroll-margin-section);
}
.ut-pv-cardtitle {
  margin: 0 0 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--ut-border);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ut-content);
}

/* --------------------------------------------------------------------------- *
 * Details (key/value grid).
 * --------------------------------------------------------------------------- */
.ut-pv-details {
  margin: 0;
  display: grid;
}
.ut-pv-row {
  display: grid;
  grid-template-columns: minmax(7rem, 13rem) 1fr;
  gap: 0.25rem 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--ut-border);
}
.ut-pv-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.ut-pv-row dt {
  margin: 0;
  color: var(--ut-content-muted);
  font-size: 0.875rem;
  font-weight: 500;
}
.ut-pv-row dd {
  margin: 0;
  color: var(--ut-content);
}

/* --------------------------------------------------------------------------- *
 * Prose (wysiwyg — wp_kses_post at the allowlist boundary). Not loaded from the
 * catalog island bundle on these views, so it is owned here.
 * --------------------------------------------------------------------------- */
.ut-pv-prose {
  color: var(--ut-content);
  line-height: 1.6;
  max-width: var(--ut-measure-prose);
}
.ut-pv-prose > * + * {
  margin-top: 0.75rem;
}
.ut-pv-prose h2,
.ut-pv-prose h3,
.ut-pv-prose h4 {
  font-weight: 600;
  color: var(--ut-content);
  line-height: 1.3;
}
.ut-pv-prose h2 {
  font-size: 1.125rem;
}
.ut-pv-prose h3 {
  font-size: 1rem;
}
.ut-pv-prose a {
  color: var(--ut-link);
  text-decoration: underline;
}
.ut-pv-prose a:hover {
  color: var(--ut-interactive-hover);
}
.ut-pv-prose ul,
.ut-pv-prose ol {
  padding-left: 1.25rem;
  list-style-position: outside;
}
.ut-pv-prose ul {
  list-style: disc;
}
.ut-pv-prose ol {
  list-style: decimal;
}
.ut-pv-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ut-radius-control);
}

/* --------------------------------------------------------------------------- *
 * Membership offerings (overview).
 * --------------------------------------------------------------------------- */
.ut-pv-membership-intro {
  margin: 0 0 1rem;
  color: var(--ut-content);
  line-height: 1.6;
  max-width: var(--ut-measure-prose);
}
.ut-pv-membership-block + .ut-pv-membership-block,
.ut-pv-membership-block + .ut-pv-membership-plans,
.ut-pv-membership-intro + .ut-pv-membership-block {
  margin-top: 1.25rem;
}
.ut-pv-membership-subtitle {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ut-content);
}
.ut-pv-plans {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.ut-pv-plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  padding: 1rem;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-card);
  background: var(--ut-hover-surface);
}
.ut-pv-plan-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ut-content);
}
.ut-pv-plan-desc {
  margin: 0;
  color: var(--ut-content-muted);
  font-size: 0.9375rem;
}
/* The "join" CTA is a chip promoted to a filled primary button. */
.ut-pv-plan-link {
  margin-top: 0.25rem;
  border-color: var(--ut-brand);
  background: var(--ut-brand);
  color: var(--ut-on-brand);
  font-weight: 600;
}
.ut-pv-plan-link:hover {
  background: var(--ut-interactive-hover);
  border-color: var(--ut-interactive-hover);
  color: var(--ut-on-brand);
}

/* --------------------------------------------------------------------------- *
 * Gallery (overview).
 * --------------------------------------------------------------------------- */
.ut-pv-gallery {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.ut-pv-galleryimg {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ut-radius-card);
  border: 1px solid var(--ut-border);
}

/* --------------------------------------------------------------------------- *
 * Lists — one shared "list card" expression for every sub-view list.
 * --------------------------------------------------------------------------- */
.ut-pv-newslist,
.ut-pv-projectlist,
.ut-pv-eventlist,
.ut-pv-propertylist,
.ut-pv-servicelist,
.ut-pv-connectionlist {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-card);
  background: var(--ut-surface);
  overflow: hidden;
}
.ut-pv-newsitem,
.ut-pv-projectitem,
.ut-pv-eventitem,
.ut-pv-propertyitem,
.ut-pv-serviceitem,
.ut-pv-connectionitem {
  display: grid;
  gap: 0.375rem 0.875rem;
  padding: 1rem var(--ut-space-section);
  border-top: 1px solid var(--ut-border);
  transition: background-color var(--ut-motion-fast);
}
.ut-pv-newslist > li:first-child,
.ut-pv-projectlist > li:first-child,
.ut-pv-eventlist > li:first-child,
.ut-pv-propertylist > li:first-child,
.ut-pv-servicelist > li:first-child,
.ut-pv-connectionlist > li:first-child {
  border-top: 0;
}
.ut-pv-newsitem:hover,
.ut-pv-projectitem:hover,
.ut-pv-eventitem:hover,
.ut-pv-propertyitem:hover,
.ut-pv-serviceitem:hover,
.ut-pv-connectionitem:hover {
  background: var(--ut-hover-surface);
}
.ut-pv-newsitem-link,
.ut-pv-projectitem-link,
.ut-pv-eventitem-link,
.ut-pv-propertyitem-link,
.ut-pv-serviceitem-link,
.ut-pv-connectionitem-link {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ut-content);
  text-decoration: none;
  line-height: 1.35;
}
.ut-pv-newsitem-link:hover,
.ut-pv-projectitem-link:hover,
.ut-pv-eventitem-link:hover,
.ut-pv-propertyitem-link:hover,
.ut-pv-serviceitem-link:hover,
.ut-pv-connectionitem-link:hover {
  color: var(--ut-interactive);
  text-decoration: underline;
}
.ut-pv-newsitem-date,
.ut-pv-projectitem-date,
.ut-pv-projectitem-meta,
.ut-pv-eventitem-meta,
.ut-pv-serviceitem-meta,
.ut-pv-bulletin-date,
.ut-pv-alert-date {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--ut-content-muted);
  font-size: 0.875rem;
}
.ut-pv-eventitem-when {
  color: var(--ut-content);
  font-weight: 500;
}
.ut-pv-eventitem-venue {
  color: var(--ut-content-muted);
}
.ut-pv-eventitem-venue::before {
  content: "\00b7";
  margin-right: 0.5rem;
  color: var(--ut-border-strong);
}
.ut-pv-newsitem-excerpt,
.ut-pv-projectitem-excerpt,
.ut-pv-eventitem-excerpt,
.ut-pv-propertyitem-excerpt,
.ut-pv-serviceitem-excerpt {
  margin: 0;
  color: var(--ut-content-muted);
  line-height: 1.5;
  font-size: 0.9375rem;
}
/* Rows with a leading thumbnail (properties / connections) → media grid. */
.ut-pv-propertyitem:has(.ut-pv-propertyitem-image),
.ut-pv-connectionitem:has(.ut-pv-connectionitem-image) {
  grid-template-columns: auto 1fr;
  align-items: start;
}
.ut-pv-propertyitem-image,
.ut-pv-connectionitem-image {
  grid-row: span 3;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--ut-radius-card);
  border: 1px solid var(--ut-border);
}

/* --------------------------------------------------------------------------- *
 * Taxonomy chips (type / place on list items).
 * --------------------------------------------------------------------------- */
.ut-pv-taxlist {
  list-style: none;
  margin: 0.125rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.ut-pv-tax {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.5rem;
  border-radius: var(--ut-radius-pill);
  background: var(--ut-hover-surface);
  border: 1px solid var(--ut-border);
  color: var(--ut-content-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------- *
 * Connections: grouped sections + role badges.
 * --------------------------------------------------------------------------- */
.ut-pv-connections-group + .ut-pv-connections-group {
  margin-top: var(--ut-space-section);
}
.ut-pv-connections-heading {
  margin: 0 0 0.625rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ut-content);
}
.ut-pv-connectionitem-roles {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* --------------------------------------------------------------------------- *
 * Badges — status / policy / role / severity mapped to intent tones.
 * Default neutral; the BEM modifiers map onto the semantic intent roles.
 * --------------------------------------------------------------------------- */
.ut-pv-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--ut-radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  background: var(--ut-hover-surface);
  color: var(--ut-content-muted);
  border: 1px solid var(--ut-border);
}
/* success — active / ongoing / open */
.ut-pv-badge--status-ongoing,
.ut-pv-badge--status-active,
.ut-pv-badge--policy-open {
  background: var(--ut-success-surface);
  color: var(--ut-success);
  border-color: transparent;
}
/* info — planned / proposed / access-policy category / low severity */
.ut-pv-badge--status-proposed,
.ut-pv-badge--status-planned,
.ut-pv-badge--policy-registration_only,
.ut-pv-badge--policy-members_only,
.ut-pv-badge--policy-invite_only,
.ut-pv-badge--severity-low {
  background: var(--ut-info-surface);
  color: var(--ut-info);
  border-color: transparent;
}
/* warning — paused / postponed / sold out / medium+high severity */
.ut-pv-badge--status-paused,
.ut-pv-badge--state-postponed,
.ut-pv-badge--state-sold_out,
.ut-pv-badge--severity-medium,
.ut-pv-badge--severity-high {
  background: var(--ut-warning-surface);
  color: var(--ut-warning);
  border-color: transparent;
}
/* danger — cancelled / stopped / critical severity */
.ut-pv-badge--state-cancelled,
.ut-pv-badge--status-stopped,
.ut-pv-badge--severity-critical {
  background: var(--ut-danger-surface);
  color: var(--ut-danger);
  border-color: transparent;
}
/* brand — completed + membership roles/positions */
.ut-pv-badge--status-completed,
.ut-pv-badge[class*="ut-pv-badge--role-"] {
  background: var(--ut-selected-surface);
  color: var(--ut-brand-strong);
  border-color: transparent;
}

/* --------------------------------------------------------------------------- *
 * Empty state (shared shape with the catalog's; this sheet only loads on the
 * org views so there is no collision).
 * --------------------------------------------------------------------------- */
.ut-pv-empty {
  margin: 0;
  padding: 2rem var(--ut-space-section);
  border: 1px dashed var(--ut-border);
  border-radius: var(--ut-radius-card);
  background: var(--ut-hover-surface);
  color: var(--ut-content-muted);
  text-align: center;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------- *
 * Narrow column (container-query ≤ 40rem): shed the section frame edge-to-edge
 * so content uses the mobile width; keep heading + rhythm for structure.
 * Keyed on the CONTENT COLUMN width, not the device viewport (foundation § 3.2).
 * --------------------------------------------------------------------------- */
@container utpv (max-width: 40rem) {
  .ut-pv-section {
    border: 0;
    border-radius: 0;
    padding-inline: 0;
    padding-top: 0;
  }
  .ut-pv-org-overview > .ut-pv-section + .ut-pv-section {
    margin-top: 2rem;
  }
  .ut-pv-newsitem,
  .ut-pv-projectitem,
  .ut-pv-eventitem,
  .ut-pv-propertyitem,
  .ut-pv-serviceitem,
  .ut-pv-connectionitem {
    padding-inline: 0.875rem;
  }
  .ut-pv-empty {
    padding-inline: 0.875rem;
  }
}
@container utpv (max-width: 34rem) {
  .ut-pv-row {
    grid-template-columns: 1fr;
    gap: 0.0625rem;
  }
}

/* =========================================================================== *
 * v2 — THE ORGANIZATION PRESENTATION SURFACE ("Flate 1", B-FP-077 / P7-2a).
 *
 * ADDITIVE. Everything above is the 0.11.0 card expression (B-FP-024) that the
 * 8 sub-view ROUTES and the contact/property/project/service/place surfaces all
 * still render — restyling those is P7-2c, so not one line of it is touched here.
 * These rules serve ONLY the classes Org_Presentation emits.
 *
 * Rules of the road (unchanged):
 *   - Semantic `.ut-ui` roles ONLY — never the physical --ut-color-* ramp.
 *   - The ui-core primitives (VisibilityChip/StatusChip/Callout/Register/
 *     SystemVoice/Monogram/Banner/SectionNav) own their OWN look. Nothing here
 *     restyles them; we only place them and drive their caller-side knobs
 *     (e.g. --ut-monogram-size, which the Monogram contract defines as
 *     caller-driven).
 *   - ui-core has no numeric spacing scale (styleguide gap list) → literal rem.
 *   - Container-first: keyed on the CONTENT COLUMN (container `utpv`), never the
 *     viewport (foundation § 3.2).
 * =========================================================================== */

/* The protocol rail. 10.75rem ≈ the fasit's 172px margin.
 *
 * P7-2c: `.ut-pv-org-page` is the sub-view PAGE wrapper (Org_View_Base::
 * maybe_render_on_single) — the Banner is a SIBLING of the view section, so the
 * identity scale + the rail + the container context have nowhere else to hang.
 * Scoped to the ORG slug + (B1, B-FP-274) the PROPERTY page + (B2, B-FP-275) the
 * PROJECT / SERVICE / PLACE pages + (B3, B-FP-276) the CONTACT page + (B4,
 * B-FP-277) the EVENT page. Every read flate now speaks the v2 idiom, and with
 * event the `.ut-pv-card` / `.ut-pv-cardtitle` expression is out of use on the
 * read tier entirely. */
.ut-pv-org-overview,
.ut-pv-org-page,
.ut-pv-property-page,
.ut-pv-project-page,
.ut-pv-service-page,
.ut-pv-place-page,
.ut-pv-contact-page,
.ut-pv-event-page {
  --ut-pv-rail: 10.75rem;
  /* Title scale, EIER-ENTITET (B-FP-338 pkt 4). The organisation head has a
     logo, a tagline and actions to balance 42px against; this is the default,
     and the under-entity pair below is the only exception. One token PAIR, not
     eight rules — which is also why the scale is a variable and not a font-size
     repeated per flate. */
  --ut-pv-title-scale: clamp(1.625rem, 4.4cqi, 2.625rem);
  background: var(--ut-canvas);
}

/* Title scale, UNDER-ENTITET (B-FP-338 pkt 4 — slice 1: project · slice 2:
   property · slice 3: service · slice 4: event · slice 5: place · slice 6:
   contact). 🔴 ALL SIX READ FLATES ARE HERE NOW — the migration is complete, and
   `verify-identity-head.php` § F1 (which asserted that the not-yet-sliced flates
   still took the owner scale above) was retired with this line, together with its
   mutation, rather than left guarding an empty list. § E1 covers all six page
   classes positively instead.
   Their heads carry the name and — on place and contact — a second identity datum
   (a tagline; a job title), not the owner entity's logo + actions, so they do not
   need 42px.
   🔴 This block does NOT take the flates out of the owner-default rule above:
   that rule also carries `--ut-pv-rail` and the background, which every flate
   still needs. The cascade — same specificity, later wins — is what overrides
   the scale, so this block must stay BELOW it (asserted in § E1).
   🔴 Measured caveat (Q-FP-202 § påstand 3): the middle term is inactive above
   a ~955px container — both clamps sit on their maximum there, so the visible
   difference at desktop width is 42px → 34px, not a fluid curve. */
.ut-pv-project-page,
.ut-pv-property-page,
.ut-pv-service-page,
.ut-pv-event-page,
.ut-pv-place-page,
.ut-pv-contact-page {
  --ut-pv-title-scale: clamp(1.5rem, 3.6cqi, 2.125rem);
}
/* The sub-view page is the container-query context for its own Banner + section
 * (the section sets its own `container-type` above; the wrapper carries the one
 * the Banner title measures against). Narrow-column from day one (A3 lesson): the
 * `@container utpv` rail collapse below keys on THIS name. */
.ut-pv-org-page,
.ut-pv-property-page,
.ut-pv-project-page,
.ut-pv-service-page,
.ut-pv-place-page,
.ut-pv-contact-page,
.ut-pv-event-page {
  container-type: inline-size;
  container-name: utpv;
}

/* --------------------------------------------------------------------------- *
 * Identity: the name scales with the CONTAINER, not the viewport.
 *
 * `.ut-pv-title` is the consumer-owned Banner title slot, so this is ours to set
 * (the Banner primitive itself is untouched). Without it the display role is a
 * fixed 30px and long Norwegian compounds ("Hytteeierforening") wrap onto three
 * lines in a narrow column. `cqi` resolves against `.ut-pv-org-overview`
 * (container-type: inline-size). Scoped to this surface — the 8 sub-view banners
 * keep today's expression until P7-2c.
 * --------------------------------------------------------------------------- */
.ut-pv-org-overview .ut-pv-title,
.ut-pv-org-page .ut-pv-title,
.ut-pv-property-page .ut-pv-title,
.ut-pv-project-page .ut-pv-title,
.ut-pv-service-page .ut-pv-title,
.ut-pv-place-page .ut-pv-title,
.ut-pv-contact-page .ut-pv-title,
.ut-pv-event-page .ut-pv-title {
  /* The literal fallback is not decoration — an undefined custom property makes
     the whole declaration invalid at computed-value time and the title drops to
     the display role's fixed 30px (same trap as `--ut-pv-rail` above). */
  font-size: var(--ut-pv-title-scale, clamp(1.625rem, 4.4cqi, 2.625rem));
  letter-spacing: -0.02em;
  line-height: 1.08;
  /* Measured (P7-2c): in a 292px column the Banner leaves the title 162px, and
   * "Hytteeierforening" does not fit even at the clamp's 26px MINIMUM. ui-core's
   * banner sets `overflow-wrap: break-word`, so it broke mid-word with no hyphen
   * — "Hytteeierfore / ning", which a reader cannot tell from two words. This is
   * what Norwegian compounds do to every org name on this site, and it is live on
   * Flate 1 today. `hyphens: auto` lets the browser break at a real syllable
   * boundary and show the hyphen (the page is lang="nb"); break-word stays as the
   * last resort for a word no dictionary knows. */
  hyphens: auto;
}

/* --------------------------------------------------------------------------- *
 * B-FP-338 — the flat identity head's three consumer-owned parts.
 * --------------------------------------------------------------------------- */

/* The provenance line under the title: type · owner (pkt 3). It replaces the
   identity BADGE for under-entities, so it has to read as system voice, not as
   a subtitle — the SystemVoice primitive already carries that typography; this
   only positions it. */
.ut-pv-provenance {
  display: block;
  margin-block-start: 0.25rem;
}

/* The page's source and audience, said once under its name (B-FP-464; J-01:
   the marker stands where it differentiates, and on a uniform page that is the
   page, once). */
.ut-pv-pagemarks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0 0;
}

/* SectionNav wrapper + its VISIBLE title (pkt 5). The title is `aria-hidden`:
   the <nav> already carries the identical accessible name, and it is a <p>, not
   a heading, so "On this page" never enters the document outline as a peer of
   the real sections. */
.ut-pv-nav {
  padding: 1rem 0 0;
}
.ut-pv-navtitle {
  margin: 0 0 0.5rem;
  color: var(--ut-content-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Tagline inside the Banner subtitle slot. */
.ut-pv-org-overview .ut-pv-tagline {
  margin: 0.25rem 0 0;
  max-width: var(--ut-measure-prose);
  color: var(--ut-content-muted);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------- *
 * Metaline — the provenance strip (I-01/I-05).
 * The border-top IS the provenance rule; the chips are separated visually (their
 * own borders + the flex gap), never by punctuation.
 * --------------------------------------------------------------------------- */
.ut-pv-metaline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ut-border);
}
/* The metaline is provenance FOR the identity head, so it sits tighter to the
   banner than the generic section rhythm (R2.2: fasit gap 16px, not the 32px
   `--ut-space-section` the `> *:not(:first-child)` rule gives). Same specificity
   as that rule, placed later → wins. */
.ut-pv-org-overview > .ut-pv-metaline {
  margin-top: 1rem;
}
.ut-pv-mchip {
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--ut-border-strong);
  border-radius: var(--ut-radius-control);
  color: var(--ut-content-muted);
  font-family: var(--ut-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Verification is double-coded: glyph (in the markup) + text + colour. */
.ut-pv-mchip-verified {
  border-color: var(--ut-success-border);
  background: var(--ut-success-surface);
  color: var(--ut-success);
}
.ut-pv-mchip-unverified {
  border-color: var(--ut-warning-border);
  background: var(--ut-warning-surface);
  color: var(--ut-warning);
}
/* Source is deliberately the quietest chip (S9/G2 — provenance, not a claim). */
.ut-pv-mchip-source {
  border-color: var(--ut-border);
  background: transparent;
  color: var(--ut-content-subtle);
}

/* --------------------------------------------------------------------------- *
 * Alert stream (GAP-F1-01) — a Callout per active alert.
 * --------------------------------------------------------------------------- */
.ut-pv-alertstream {
  display: grid;
  gap: 0.75rem;
}

/* Trinn H: the place page's report button and the single alert page. */
.ut-pv-alert__report { margin: 0.75rem 0 0; }
.ut-pv-alert__none { margin: 0; color: var(--ut-content-muted); }
.ut-pv-alert__where { color: var(--ut-content-muted); }
.ut-pv-alert { display: grid; gap: 1rem; }
.ut-pv-alert__facts { display: grid; gap: 0.5rem; margin: 0; }
.ut-pv-alert__facts > div { display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
.ut-pv-alert__facts dt { font-weight: 600; }
.ut-pv-alert__facts dt::after { content: ":"; }
.ut-pv-alert__facts dd { margin: 0; overflow-wrap: anywhere; }
.ut-pv-alert__image { margin: 0; }
.ut-pv-alert__image img { max-width: 100%; height: auto; border-radius: var(--ut-radius-card); }

/* --------------------------------------------------------------------------- *
 * `.sek` — a section: heading + body, full width (B-FP-464).
 * The protocol margin beside each section is gone; the page's source and
 * audience stand once under its name (`.ut-pv-pagemarks`), and a section that
 * differs carries its own chip in the heading.
 * --------------------------------------------------------------------------- */
.ut-pv-sek {
  padding: 2rem 0;
  border-top: 1px solid var(--ut-border);
  scroll-margin-top: var(--ut-scroll-margin-section);
}
/* The FIRST RENDERED section loses the rule — robust against skjul-tom-sone,
   which removes sections from the DOM entirely rather than hiding them. */
.ut-pv-sek:first-of-type {
  border-top: 0;
}
.ut-pv-sektitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  margin: 0 0 1rem;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ut-content);
}
.ut-pv-sekbody > .ut-pv-prose {
  max-width: var(--ut-measure-prose);
  color: var(--ut-content-muted);
}

/* --------------------------------------------------------------------------- *
 * Rows: posts / events / records. One idiom, three flavours.
 * --------------------------------------------------------------------------- */
.ut-pv-rows {
  display: grid;
  gap: 0.75rem;
}
.ut-pv-post,
.ut-pv-event,
.ut-pv-rrad {
  display: grid;
  gap: 1rem;
  align-items: start;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-card);
  background: var(--ut-surface);
}
.ut-pv-post {
  grid-template-columns: 6rem minmax(0, 1fr) auto;
}
.ut-pv-event,
.ut-pv-rrad {
  grid-template-columns: minmax(0, 1fr) auto;
}
.ut-pv-event {
  align-items: center;
}
/* Event date-tile (A8, B-FP-171 — fasit `.dato`). A dated row switches to a
   3-column grid (tile | main | marks); the base 2-column rule stays for undated
   rows. Placed BEFORE the narrow @container queries on purpose: equal specificity
   + later source order means those queries still collapse a dated row to 1fr. */
.ut-pv-event--dated {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.ut-pv-datetile {
  width: 4rem;
  padding: 0.375rem 0;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-control);
  background: var(--ut-canvas);
  font-family: var(--ut-font-mono);
  text-align: center;
}
.ut-pv-datetile-d {
  display: block;
  color: var(--ut-content);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.1;
}
.ut-pv-datetile-m {
  display: block;
  color: var(--ut-content-subtle);
  font-size: 0.65625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ut-pv-rowdate {
  padding-top: 0.1875rem;
  color: var(--ut-content-subtle);
  font-family: var(--ut-font-mono);
  font-size: 0.71875rem;
  font-variant-numeric: tabular-nums;
}
.ut-pv-rowtitle {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}
.ut-pv-rowtitle a {
  color: var(--ut-link);
  text-decoration: none;
}
.ut-pv-rowtitle a:hover {
  text-decoration: underline;
}
.ut-pv-rowtitle a:focus-visible {
  outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color);
  outline-offset: var(--ut-focus-ring-offset);
  border-radius: var(--ut-radius-control);
}
.ut-pv-rowexcerpt {
  margin: 0.125rem 0 0;
  max-width: var(--ut-measure-prose);
  color: var(--ut-content-muted);
  font-size: 0.875rem;
}
/* The marks column: `.sys` -> StatusChip -> VisibilityChip, stacked. */
.ut-pv-rowmarks {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.375rem;
}
/* Relation type sits ABOVE the title, in the system voice. */
.ut-pv-rellabel {
  display: block;
  margin-bottom: 0.125rem;
  color: var(--ut-content-subtle);
  font-family: var(--ut-font-mono);
  font-size: 0.65625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* "Se alle" -> the sub-view route (the teaser's honest way out). */
.ut-pv-seeall {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--ut-link);
  font-size: 0.84375rem;
  font-weight: 600;
  text-decoration: none;
}
.ut-pv-seeall:hover {
  text-decoration: underline;
}
.ut-pv-seeall:focus-visible {
  outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color);
  outline-offset: var(--ut-focus-ring-offset);
  border-radius: var(--ut-radius-control);
}

/* --------------------------------------------------------------------------- *
 * People cards (I-06). P7-2b adds the contact state line: shared value /
 * "Contact info exists" + ◐ (gated — chip INSTEAD of value) / honest ".tom" /
 * nothing at all (withheld). The gated VALUE never exists in the markup.
 * --------------------------------------------------------------------------- */
.ut-pv-folk {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.ut-pv-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-card);
  background: var(--ut-surface);
  /* Monogram size is caller-driven per its contract; the person tile is round. */
  --ut-monogram-size: 2.75rem;
}
.ut-pv-person .ut-ui-monogram {
  border-radius: var(--ut-radius-pill);
}
/* DSK-3: the person's own picture takes the Monogram's place and size. */
.ut-pv-personphoto {
  display: block;
  width: var(--ut-monogram-size);
  height: var(--ut-monogram-size);
  border-radius: var(--ut-radius-pill);
  object-fit: cover;
  background: var(--ut-surface-muted, var(--ut-surface));
}
.ut-pv-personname {
  font-size: 0.9375rem;
  font-weight: 600;
}
.ut-pv-personname a {
  color: var(--ut-link);
  text-decoration: none;
}
.ut-pv-personname a:hover {
  text-decoration: underline;
}
.ut-pv-personname a:focus-visible {
  outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color);
  outline-offset: var(--ut-focus-ring-offset);
  border-radius: var(--ut-radius-control);
}
.ut-pv-personrole {
  color: var(--ut-content-muted);
  font-size: 0.8125rem;
}
/* P7-2b: the contact state line. */
.ut-pv-personcontact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
}
.ut-pv-contactvalue {
  color: var(--ut-link);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ut-pv-contactvalue:hover {
  text-decoration: underline;
}
.ut-pv-contactvalue:focus-visible {
  outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color);
  outline-offset: var(--ut-focus-ring-offset);
  border-radius: var(--ut-radius-control);
}
.ut-pv-personcontact-marks {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
/* The gated marker: the Register gated-row idiom — a statement, not a value. */
.ut-pv-sealedvalue {
  color: var(--ut-content-muted);
  font-style: italic;
}
/* The honest ".tom": contact not provided — quiet, no chip. */
.ut-pv-contactnone {
  color: var(--ut-content-subtle);
  font-style: italic;
}

/* --------------------------------------------------------------------------- *
 * "For members" (I-03, P7-2b): sealed summary rows + present-only CTA. The
 * sealed rows themselves are the ui-core primitive (.ut-ui-sealed).
 * --------------------------------------------------------------------------- */
.ut-pv-memberscta {
  margin-top: 1rem;
}

/* --------------------------------------------------------------------------- *
 * Membership: the offer block + subordinate prose blocks.
 * --------------------------------------------------------------------------- */
.ut-pv-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-container);
  background: var(--ut-surface);
  box-shadow: var(--ut-elev-raised);
}
.ut-pv-offertitle {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.ut-pv-subblock {
  margin-top: 1.25rem;
}
.ut-pv-subtitle {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ut-content);
}

/* --------------------------------------------------------------------------- *
 * Buttons + link pills (J-02).
 * --------------------------------------------------------------------------- */
.ut-pv-btn {
  display: inline-flex;
  align-items: center;
  /* 2.75rem = the 44px touch target (WCAG 2.5.8), not a decorative height. */
  min-height: 2.75rem;
  /* Fasit .knapp: rectangular control radius (NOT a pill) + 0 20px padding (R2.1). */
  padding: 0 1.25rem;
  border: 1px solid var(--ut-border-strong);
  border-radius: var(--ut-radius-control);
  background: var(--ut-surface);
  color: var(--ut-link);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.ut-pv-btn-primary {
  border-color: var(--ut-brand);
  background: var(--ut-brand);
  color: var(--ut-on-brand);
}
.ut-pv-btn-primary:hover {
  border-color: var(--ut-interactive-hover);
  background: var(--ut-interactive-hover);
  color: var(--ut-on-brand);
}

/* ===========================================================================
 * v2 — THE CATALOGUE SURFACE ("Flate 2", P7-3 / B-FP-103).
 *
 * ADDITIVE, same rules of the road as the Flate 1 block above: semantic
 * `.ut-ui` roles only (never the physical ramp); the ui-core primitives
 * (Breadcrumbs/SystemVoice/VisibilityChip/StatusChip/Monogram) own their OWN
 * look — these rules only PLACE them and drive caller-side knobs
 * (--ut-monogram-size); literal rem for spacing; container-first (keyed on
 * the content column `utpv`, never the viewport). Values are MEASURED from
 * the approved fasit (s6-p5-syntese-mockup-2026-07-14.html § Flate 2) and
 * mapped to their semantic roles.
 * =========================================================================== */

.ut-pv-catalog-page {
  background: var(--ut-canvas);
  container-type: inline-size;
  container-name: utpv;
}
.ut-pv-cat {
  display: grid;
  gap: 1.5rem;
}

/* Shared SR-only utility (labels the search field, sort select, pager arrows
 * and the thumb column header without painting them). */
.ut-pv-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------- *
 * Identity head: H1 + ingress + metaline (the metaline reuses Flate 1's strip).
 * --------------------------------------------------------------------------- */
.ut-pv-cat-head {
  display: grid;
  gap: 0.5rem;
}
.ut-pv-cat-title {
  margin: 0;
  font-size: clamp(1.75rem, 4.4cqi, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  hyphens: auto; /* Norwegian compounds — the Flate 1 lesson (B-FP-100). */
}
.ut-pv-cat-tagline {
  margin: 0;
  max-width: var(--ut-measure-prose);
  color: var(--ut-content-muted);
  font-size: 0.9375rem;
}
/* A host's content-paragraph margin is more specific than the base class. */
.ut-ui .ut-pv-cat-tagline {
  margin-bottom: 0;
}
.ut-pv-cat-head .ut-pv-metaline {
  margin-top: 0.5rem;
}

/* «Create …» (0.77.0, frontend-program SM-14b). From 0.94.0 the shared
   «make something new» look of wp-tema-arkitektur B169/B170 (felles mockup
   2026-10-01): filled in the site's brand colour with a white plus, like the
   header «+ Opprett». Wide: right of the H1. Narrow column: full width under
   the ingress, before the metaline. Without a button the head is unchanged. */
.ut-pv-cat-head.has-create { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; }
.ut-pv-cat-head.has-create > * { grid-column: 1 / -1; }
.ut-pv-cat-head.has-create > .ut-pv-cat-title { grid-column: 1; grid-row: 1; align-self: center; }
.ut-pv-cat-head.has-create > .ut-pv-cat-create { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; }
.ut-pv-cat-create {
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1.125rem 0 0.875rem;
  border-color: var(--ut-brand);
  background: var(--ut-brand);
  color: var(--ut-on-brand);
  font-size: 0.9375rem;
  white-space: nowrap;
  transition: background-color var(--ut-motion-fast), border-color var(--ut-motion-fast);
}
.ut-pv-cat-create:hover { border-color: var(--ut-brand-strong); background: var(--ut-brand-strong); color: var(--ut-on-brand); text-decoration: none; }
.ut-pv-cat-create svg { width: 1.125rem; height: 1.125rem; flex: none; stroke-width: 2.3; }
@container utpv (max-width: 34rem) {
  .ut-pv-cat-head.has-create > .ut-pv-cat-title { grid-column: 1 / -1; }
  .ut-pv-cat-head.has-create > .ut-pv-cat-create { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; margin-top: 0.25rem; white-space: normal; }
}

/* --------------------------------------------------------------------------- *
 * One column (0.66.0): search, then a filter bar of disclosure buttons, then
 * the list. It fits the theme's reading width, so a catalogue page is as wide
 * as every other page. Approved mockup: frontend-program
 * mockups/katalog-en-kolonne-2026-09-22.html.
 * --------------------------------------------------------------------------- */
.ut-pv-cat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  min-width: 0;
  margin: 0;
}
.ut-pv-cat-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}
.ut-pv-cat-search-field {
  display: block;
  min-width: 0;
}
/* The panels are anchored to the whole bar, so an open panel is as wide as the
 * list under it on every screen. */
.ut-pv-cat-filterbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.ut-pv-cat-sort {
  display: block;
  min-width: 12.5rem;
  margin-left: auto;
}
.ut-ui .ut-pv-cat .ut-pv-cat-filter {
  margin: 0;
  padding: 0;
  border: 0;
}
/* The disclosure button is a control, so the consumer owns its normal state
 * like the families below (B-FP-401) — a theme's `summary` rule must not reach it. */
.ut-ui .ut-pv-cat .ut-pv-cat-filter-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0 0.875rem 0 1rem;
  border: 1px solid var(--ut-border-strong);
  border-radius: var(--ut-radius-control);
  background-color: var(--ut-surface);
  background-image: none;
  box-shadow: none;
  color: var(--ut-content);
  font-family: var(--ut-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  list-style: none;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--ut-motion-fast), border-color var(--ut-motion-fast);
}
.ut-ui .ut-pv-cat .ut-pv-cat-filter-toggle::-webkit-details-marker {
  display: none;
}
.ut-ui .ut-pv-cat .ut-pv-cat-filter-toggle::marker {
  content: '';
}
.ut-ui .ut-pv-cat .ut-pv-cat-filter-toggle:hover {
  border-color: var(--ut-content-subtle);
  background-color: var(--ut-hover-surface);
}
.ut-ui .ut-pv-cat .ut-pv-cat-filter[open] > .ut-pv-cat-filter-toggle {
  border-color: var(--ut-interactive);
}
.ut-ui .ut-pv-cat .ut-pv-cat-filter.is-active > .ut-pv-cat-filter-toggle {
  border-color: var(--ut-selected);
  background-color: var(--ut-selected-surface);
}
.ut-pv-cat-filter-n {
  min-width: 1.375rem;
  padding: 0 0.375rem;
  border-radius: var(--ut-radius-pill);
  background: var(--ut-selected);
  color: var(--ut-on-brand);
  font-family: var(--ut-font-mono);
  font-size: 0.75rem;
  line-height: 1.375rem;
  text-align: center;
}
.ut-pv-cat-filter-caret {
  width: 1rem;
  height: 1rem;
  color: var(--ut-content-muted);
  transition: transform var(--ut-motion-fast);
}
.ut-pv-cat-filter[open] .ut-pv-cat-filter-caret {
  transform: rotate(180deg);
}
.ut-pv-cat-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  left: 0;
  z-index: 5;
  display: grid;
  gap: 1rem;
  max-height: min(28rem, 70vh);
  overflow: auto;
  padding: 1.125rem 1.25rem 1rem;
  border: 1px solid var(--ut-border-strong);
  border-radius: var(--ut-radius-card);
  background: var(--ut-surface);
  box-shadow: var(--ut-elev-overlay);
}
.ut-pv-cat-fgroup {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ut-pv-cat-fgroup legend {
  margin-bottom: 0.625rem;
  padding: 0;
  color: var(--ut-content-muted);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ut-pv-cat-panel-opts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.375rem 1.5rem;
}
.ut-pv-cat-panel-foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.875rem;
  border-top: 1px solid var(--ut-border);
}
/* ---------------------------------------------------------------------------
 * CATALOGUE CONTROL LAYER — consumer-owned normal state (B-FP-401).
 *
 * `frontend-foundation.md` § Vertstema-invariant: the CONSUMER owns the normal
 * state of buttons, control-like links, input, select and textarea under the
 * WordPress theme — appearance/-webkit-appearance, background colour AND image,
 * border, radius, shadow, font, margin/padding, text-align and cursor. A
 * deliberate `none`/`transparent`/`0` counts as ownership; absence does not.
 *
 * Every rule below is scoped under `.ut-pv-cat` (the catalogue root emitted by
 * `Catalog_Presentation::render()`). That is not decoration: Kadence's MEASURED
 * rules that reach a naked control in the content area top out at (0,2,2)
 * (B-FP-386 / Q-FP-219 punkt 24). The extra class puts every control rule at
 * (0,3,x) — one class of margin above the measured ceiling. Values are MEASURED
 * from the fasit's Flate 2 (§ .sokelinje / .opt / .filterchip / .pager /
 * .knapp-liten) and mapped to ui-core SEMANTIC roles — never physical tokens,
 * never a literal colour, never the mockup's own CSS.
 *
 * Three weights, applied consistently across the surface:
 *   44px  primary form controls — search, sort, pager pages
 *   36px  secondary action      — the no-JS apply button
 *   32px  inline state controls — facet rows, active chips, clear-all
 * --------------------------------------------------------------------------- */
/* Scoped like the controls: the hit area IS the accessibility guarantee here,
 * and a theme rule on `label` at (0,2,x) would otherwise reset it silently. */
/* ui-core ChoiceControl owns facet-row and native checkbox chrome. */
/* The no-JS apply button, one per filter panel (0.66.0). It is the panel's only
 * action, so it takes the SELECTED fill: `--ut-selected` carries the
 * ≥4.5:1-on-white guarantee the on-brand label needs (see the current page
 * below). Not .ut-pv-btn: a form control inside a panel, at the 36px weight. */
.ut-ui .ut-pv-cat .ut-pv-cat-apply {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  margin: 0;
  padding: 0 1rem;
  border: 1px solid var(--ut-selected);
  border-radius: var(--ut-radius-control);
  background-color: var(--ut-selected);
  background-image: none;
  box-shadow: none;
  color: var(--ut-on-brand);
  font-family: var(--ut-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ut-motion-fast), border-color var(--ut-motion-fast), color var(--ut-motion-fast);
}
.ut-ui .ut-pv-cat .ut-pv-cat-apply:hover {
  border-color: var(--ut-brand-strong);
  background-color: var(--ut-brand-strong);
}

/* ui-core FormControl owns search/select chrome and intrinsic states. */
.ut-ui .ut-pv-cat .ut-pv-cat-apply:focus-visible,
.ut-ui .ut-pv-cat .ut-pv-cat-chip:focus-visible,
.ut-ui .ut-pv-cat .ut-pv-cat-clear:focus-visible,
.ut-ui .ut-pv-cat .ut-pv-cat-page:focus-visible,
.ut-ui .ut-pv-cat .ut-pv-cat-filter-toggle:focus-visible {
  outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color);
  outline-offset: var(--ut-focus-ring-offset);
}

/* Result line. */
.ut-pv-cat-result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
}
.ut-pv-cat-result-count {
  color: var(--ut-content);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Active filter chips — links (no-JS removable), plus "clear all". */
.ut-pv-cat-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
/* An active chip is a SELECTED state, so it takes the selected surface with a
 * brand edge (fasit .filterchip). The label deliberately stays `--ut-content`
 * rather than the fasit's brand-dark ink: `--ut-brand-*` is per-site
 * overridable (§ 2.3), and a brand-on-brand-surface text pair would make WCAG
 * 1.4.3 depend on each site's brand value. The edge carries the brand instead. */
.ut-ui .ut-pv-cat .ut-pv-cat-chip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2rem;
  margin: 0;
  padding: 0 0.75rem;
  border: 1px solid var(--ut-brand);
  border-radius: var(--ut-radius-pill);
  background-color: var(--ut-selected-surface);
  background-image: none;
  box-shadow: none;
  color: var(--ut-content);
  font-family: var(--ut-font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ut-motion-fast), border-color var(--ut-motion-fast), color var(--ut-motion-fast);
}
.ut-ui .ut-pv-cat .ut-pv-cat-chip:hover {
  border-color: var(--ut-interactive-hover);
  background-color: var(--ut-hover-surface);
}
.ut-pv-cat-chip-x {
  color: var(--ut-content-muted);
  font-size: 0.875rem;
  line-height: 1;
}
.ut-ui .ut-pv-cat .ut-pv-cat-clear {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  margin: 0;
  padding: 0 0.25rem;
  border: 0;
  border-radius: var(--ut-radius-control);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--ut-link);
  font-family: var(--ut-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color var(--ut-motion-fast);
}
.ut-ui .ut-pv-cat .ut-pv-cat-clear:hover {
  color: var(--ut-interactive-hover);
}

/* --------------------------------------------------------------------------- *
 * The result list (0.66.0) — one item per entry, every value in words, so no
 * column header is needed. The title link is stretched over the item: one
 * link and one accessible name per entry, the whole row clickable.
 * Variants: register (logo/monogram), article (wide image), notice (none).
 * --------------------------------------------------------------------------- */
.ut-ui .ut-pv-cat .ut-pv-cat-list {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-card);
  background: var(--ut-surface);
  list-style: none;
}
.ut-ui .ut-pv-cat .ut-pv-cat-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1rem;
  grid-template-areas: "body side chev";
  column-gap: 1rem;
  align-items: center;
  margin: 0;
  padding: 0.875rem 1.125rem 0.875rem 1rem;
  border-bottom: 1px solid var(--ut-border);
  transition: background-color var(--ut-motion-fast);
}
.ut-ui .ut-pv-cat .ut-pv-cat-item:last-child {
  border-bottom: 0;
}
.ut-ui .ut-pv-cat .ut-pv-cat-item.has-media {
  grid-template-columns: 2.75rem minmax(0, 1fr) auto 1rem;
  grid-template-areas: "media body side chev";
}
.ut-ui .ut-pv-cat--article .ut-pv-cat-item.has-media {
  grid-template-columns: 10rem minmax(0, 1fr) auto 1rem;
  align-items: start;
}
.ut-ui .ut-pv-cat .ut-pv-cat-item:hover {
  background: var(--ut-hover-surface);
}
.ut-ui .ut-pv-cat .ut-pv-cat-item:focus-within {
  outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color);
  outline-offset: calc(-1 * var(--ut-focus-ring-width));
}
/* The organization row's membership button (B-FP-455) is its own link beside
   the name: above the name link's stretched area, with its own focus ring —
   the row ring would say the whole row is focused. */
.ut-ui .ut-pv-cat .ut-pv-cat-join {
  position: relative;
  z-index: 1;
}
.ut-ui .ut-pv-cat .ut-pv-cat-item:has(.ut-pv-cat-join:focus-visible) {
  outline: none;
}
/* An organization row without an offer keeps an empty side cell for the
   signed-in status; empty, it takes no room. */
.ut-ui .ut-pv-cat .ut-pv-cat-item-side:empty {
  display: none;
}
.ut-pv-cat-item-media {
  grid-area: media;
  align-self: start;
}
.ut-pv-cat-item-body {
  grid-area: body;
  display: grid;
  gap: 0.1875rem;
  min-width: 0;
}
.ut-pv-cat-item-side {
  grid-area: side;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 0.75rem;
  white-space: nowrap;
}
.ut-pv-cat-item-chev {
  grid-area: chev;
  align-self: center;
  width: 1rem;
  height: 1rem;
  color: var(--ut-content-subtle);
}
.ut-ui .ut-pv-cat .ut-pv-cat-item-title {
  margin: 0;
  font-family: var(--ut-font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.3;
}
.ut-ui .ut-pv-cat .ut-pv-cat-name {
  color: var(--ut-content);
  font-size: inherit;
  font-weight: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ut-ui .ut-pv-cat .ut-pv-cat-name::after {
  content: '';
  position: absolute;
  inset: 0;
}
.ut-ui .ut-pv-cat .ut-pv-cat-name:focus-visible {
  outline: none;
}
.ut-ui .ut-pv-cat .ut-pv-cat-item:hover .ut-pv-cat-name {
  color: var(--ut-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.ut-ui .ut-pv-cat .ut-pv-cat-item-kicker,
.ut-ui .ut-pv-cat .ut-pv-cat-item-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
}
.ut-ui .ut-pv-cat .ut-pv-cat-item-facts {
  color: var(--ut-content-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}
/* 0.62.1: ui-core's reset puts `max-width: 100%` on every <img>. The thumb is a
 * fixed 44px square by contract, so it opts out of the fluid rule. */
.ut-pv-cat-thumb {
  display: block;
  width: 2.75rem;
  min-width: 2.75rem;
  max-width: none;
  height: 2.75rem;
  border: 1px solid var(--ut-border);
  border-radius: 0.25rem;
  object-fit: cover;
}
.ut-pv-cat-thumb-wide {
  width: 10rem;
  min-width: 0;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--ut-radius-control);
}
.ut-pv-cat-mono {
  display: block;
  width: 2.75rem;
  min-width: 2.75rem;
}
/* The Monogram contract sizes via a caller-driven custom property — set ON the
 * primitive element (its own default declaration beats an inherited value). */
.ut-pv-cat-mono .ut-ui-monogram {
  --ut-monogram-size: 2.75rem;
}
/* Place/news/notice teaser. Two lines in the list; the entry's page has the rest. */
.ut-ui .ut-pv-cat .ut-pv-cat-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0.125rem 0 0;
  max-width: 60ch;
  color: var(--ut-content-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}
/* Archived entries (trinn 2 emits them; the style ships forward-stable). */
.ut-ui .ut-pv-cat .ut-pv-cat-item.is-archived {
  background: var(--ut-canvas);
}
.ut-ui .ut-pv-cat .ut-pv-cat-item.is-archived .ut-pv-cat-name {
  color: var(--ut-content-muted);
}

/* ---------------------------------------------------------------------------
 * Notice rows (K2 · B-FP-460/462/464, 0.108.0): the news row on a small warm
 * sheet with a 5px brown edge — ui-core's notice role (`ut-ui-core-notice`,
 * fallbacks so the row still reads without the sheet). The picture slot holds
 * the notice's own picture with a pin, or the brown «Notice» tile. «Notice»
 * leads the kicker in the notice brown. On the sheet secondary text is the
 * muted ink: the subtle ink falls under 4.5:1 on the darker hover sheet.
 * --------------------------------------------------------------------------- */
.ut-ui .ut-pv-cat.ut-pv-cat--notice .ut-pv-cat-item.has-media {
  grid-template-columns: 10rem minmax(0, 1fr) auto 1rem;
  align-items: start;
}
.ut-ui .ut-pv-cat .ut-pv-cat-item.is-notice {
  background: var(--ut-notice-surface, #F6E9DA);
  box-shadow: inset 5px 0 0 var(--ut-notice, #8A4B2A);
}
.ut-ui .ut-pv-cat .ut-pv-cat-item.is-notice:hover {
  background: var(--ut-notice-hover, #F0DFCB);
}
.ut-ui .ut-pv-cat .ut-pv-cat-item.is-notice .ut-ui-sys,
.ut-ui .ut-pv-cat .ut-pv-cat-item.is-notice .ut-pv-cat-item-chev {
  color: var(--ut-content-muted);
}
.ut-ui .ut-pv-cat .ut-pv-cat-item.is-notice.is-expired {
  background: var(--ut-hover-surface);
  box-shadow: inset 5px 0 0 var(--ut-border-strong);
}
.ut-ui .ut-pv-cat .ut-pv-cat-item.is-expired .ut-pv-cat-name {
  color: var(--ut-content-muted);
}
.ut-ui .ut-pv-cat .ut-pv-cat-kind {
  font-family: var(--ut-font-mono);
  font-size: 0.65625rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ut-notice, #8A4B2A);
}
.ut-ui .ut-pv-cat .ut-pv-cat-item.is-expired .ut-pv-cat-kind {
  color: var(--ut-content-muted);
}
.ut-pv-cat-pinned {
  position: relative;
  display: block;
}
.ut-pv-cat-pin {
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--ut-notice, #8A4B2A);
  color: #fff;
}
.ut-pv-cat-pin svg {
  width: 0.75rem;
  height: 0.75rem;
}
.ut-pv-cat-note {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.25rem;
  width: 10rem;
  aspect-ratio: 16 / 9;
  padding: 0.375rem;
  border: 1px solid var(--ut-notice-border, #DDBFA3);
  border-radius: var(--ut-radius-control);
  background: var(--ut-surface);
  color: var(--ut-notice, #8A4B2A);
  text-align: center;
}
.ut-pv-cat-note svg {
  width: 1.375rem;
  height: 1.375rem;
}
.ut-pv-cat-note span {
  font-family: var(--ut-font-mono);
  font-size: 0.65625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
}
.is-expired .ut-pv-cat-note {
  border-color: var(--ut-neutral-border);
  background: var(--ut-neutral-surface);
  color: var(--ut-neutral);
}
@container utpv (max-width: 34rem) {
  .ut-ui .ut-pv-cat.ut-pv-cat--notice .ut-pv-cat-item.has-media {
    grid-template-columns: 5.5rem minmax(0, 1fr) 1rem;
  }
  .ut-pv-cat-note {
    width: 5.5rem;
  }
  .ut-pv-cat-note span {
    display: none;
  }
}
@media (forced-colors: active) {
  .ut-ui .ut-pv-cat .ut-pv-cat-item.is-notice { border-left: 5px solid CanvasText; }
}

/* Empty state — scoped look on the shared .ut-pv-empty contract. */
.ut-pv-cat-empty {
  margin: 0;
  padding: 1.5rem;
  border: 1px dashed var(--ut-border-strong);
  border-radius: var(--ut-radius-card);
  color: var(--ut-content-muted);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------- *
 * Numbered pagination (delbare URL-er — the fasit's own margin note).
 * --------------------------------------------------------------------------- */
/* `flex-wrap` is load-bearing, not cosmetic: pager_model() emits EVERY page (no
 * windowing), and at the 44px weight 25 pages is ~1400px in one row. Without
 * the wrap, `min-width` blocks shrink and SC 1.4.10 Reflow breaks well before
 * 320px. The fasit's own .pager wraps for the same reason. */
.ut-pv-cat-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
/* Pager pages carry the 44px weight (fasit .pager a/.naa). The unavailable
 * arrow is a non-interactive <span class="ut-pv-cat-page-off">, NOT a disabled
 * link — the catalogue emits no `disabled` attribute anywhere, so "off" is this
 * family's honest unavailable state. */
.ut-ui .ut-pv-cat .ut-pv-cat-page {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0 0.5rem;
  border: 1px solid var(--ut-border-strong);
  border-radius: var(--ut-radius-control);
  background-color: var(--ut-surface);
  background-image: none;
  box-shadow: none;
  color: var(--ut-content-muted);
  font-family: var(--ut-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: default;
  transition: background-color var(--ut-motion-fast), border-color var(--ut-motion-fast), color var(--ut-motion-fast);
}
.ut-ui .ut-pv-cat a.ut-pv-cat-page {
  cursor: pointer;
}
.ut-ui .ut-pv-cat a.ut-pv-cat-page:hover {
  border-color: var(--ut-content-subtle);
  background-color: var(--ut-hover-surface);
  color: var(--ut-content);
}
/* `--ut-selected`, not `--ut-brand`: the current page is a SELECTED state, and
 * white on the default brand (#4B6BFB) is 4.38:1 — under WCAG 1.4.3 for 14px
 * semibold, which is not large text. `--ut-selected` (primary-600) carries the
 * ≥4.5:1-on-white guarantee, so on-brand text clears the threshold at 5.36:1. */
.ut-ui .ut-pv-cat .ut-pv-cat-page-now {
  border-color: var(--ut-selected);
  background-color: var(--ut-selected);
  color: var(--ut-on-brand);
}
.ut-ui .ut-pv-cat .ut-pv-cat-page-off {
  border-color: var(--ut-border);
  background-color: var(--ut-surface);
  color: var(--ut-content-subtle);
  cursor: default;
}

/* --------------------------------------------------------------------------- *
 * Narrow column (phones): the same list; the side facts move under the body,
 * the filter buttons share the row and the sort gets its own line.
 * --------------------------------------------------------------------------- */
@container utpv (max-width: 34rem) {
  .ut-pv-cat-filterbar > .ut-pv-cat-filter {
    flex: 1 1 0;
  }
  .ut-ui .ut-pv-cat .ut-pv-cat-filter-toggle {
    width: 100%;
    justify-content: space-between;
  }
  .ut-pv-cat-filter-label {
    margin-right: auto;
  }
  .ut-pv-cat-sort {
    flex: 1 1 100%;
    min-width: 0;
    margin-left: 0;
  }
  .ut-pv-cat-panel {
    padding: 1rem;
  }
  .ut-pv-cat-panel-opts {
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.25rem 1rem;
  }
  .ut-ui .ut-pv-cat .ut-pv-cat-item {
    grid-template-columns: minmax(0, 1fr) 1rem;
    grid-template-areas: "body chev" "side chev";
    column-gap: 0.75rem;
    padding: 0.8125rem 0.875rem 0.8125rem 0.8125rem;
  }
  .ut-ui .ut-pv-cat .ut-pv-cat-item.has-media {
    grid-template-columns: 2.5rem minmax(0, 1fr) 1rem;
    grid-template-areas: "media body chev" "media side chev";
  }
  .ut-ui .ut-pv-cat--article .ut-pv-cat-item.has-media {
    grid-template-columns: 5.5rem minmax(0, 1fr) 1rem;
  }
  .ut-pv-cat-item-side {
    justify-content: flex-start;
    margin-top: 0.25rem;
    white-space: normal;
  }
  .ut-pv-cat-item-media .ut-pv-cat-thumb:not(.ut-pv-cat-thumb-wide),
  .ut-pv-cat-item-media .ut-pv-cat-mono {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
  }
  .ut-pv-cat-item-media .ut-pv-cat-mono .ut-ui-monogram {
    --ut-monogram-size: 2.5rem;
  }
  .ut-pv-cat-thumb-wide {
    width: 5.5rem;
  }
}
.ut-pv-btn:focus-visible {
  outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color);
  outline-offset: var(--ut-focus-ring-offset);
}
.ut-pv-linkpill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2rem;
  margin: 0.125rem 0.5rem 0.125rem 0;
  padding: 0 0.75rem;
  border: 1px solid var(--ut-border-strong);
  border-radius: var(--ut-radius-pill);
  background: var(--ut-surface);
  color: var(--ut-link);
  font-size: 0.84375rem;
  font-weight: 600;
  text-decoration: none;
}
.ut-pv-linkpill:hover {
  background: var(--ut-hover-surface);
}
.ut-pv-linkpill:focus-visible {
  outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color);
  outline-offset: var(--ut-focus-ring-offset);
}

/* --------------------------------------------------------------------------- *
 * v2 SUB-VIEW PAGES (P7-2c, B-FP-100) — `/organisasjon/{slug}/{view}`.
 *
 * The sub-view page IS the "se alle" destination of Flate 1's teaser section, so
 * it renders as that section, expanded: same rail, same heading, same rows. That
 * is the whole restyle — almost nothing new is needed here, which is the point.
 * --------------------------------------------------------------------------- */

/* The org sub-view section is the page's only `.sek`, so it carries no rule and
 * no top padding — the Banner above it already opened the page. */
.ut-pv-org-view > .ut-pv-sek {
  border-top: 0;
  padding-top: 0;
}
/* The card layer gave `.ut-pv-org-view > *` a section rhythm; the sek owns its
 * own vertical space now. */
.ut-pv-org-page > .ut-pv-org-view,
.ut-pv-property-page > .ut-pv-org-view,
.ut-pv-project-page > .ut-pv-org-view,
.ut-pv-service-page > .ut-pv-org-view,
.ut-pv-place-page > .ut-pv-org-view,
.ut-pv-contact-page > .ut-pv-org-view,
.ut-pv-event-page > .ut-pv-org-view {
  margin-top: 0;
}
.ut-ui-banner + .ut-pv-org-view {
  margin-top: 1.5rem;
}
/* The honest empty state. The card layer dresses `.ut-pv-empty` as a dashed,
 * centred "nothing here" panel — a decorated frame around an absence. In the
 * register voice the absence is simply STATED, left-aligned where the rows
 * would have been, so the page reads the same whether or not it has content.
 * Every card-layer declaration is reset explicitly: an un-reset background or
 * text-align does not disappear just because this rule exists. */
.ut-pv-org-view .ut-pv-empty {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
  color: var(--ut-content-subtle);
  font-size: 0.9375rem;
  font-style: italic;
}
/* Taxonomy chips sit under the row's own text, inside `.ut-pv-rowmain`. */
.ut-pv-rowmain > .ut-pv-taxlist {
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------- *
 * v2 NARROW COLUMN — the protocol rail collapses.
 *
 * 🔴 Measured gap, not a new feature: the v2 layer shipped in 0.19.0/0.20.0 with
 * NO container query at all, so `10.75rem + minmax(0,1fr)` held a 172px rail on a
 * 375px phone and squeezed every section body into what was left. It is live on
 * Flate 1 today. P7-2c would have multiplied it across 8 more pages, so it is
 * fixed at the source rather than worked around per page.
 *
 * Collapsed, the margin becomes a HEADER above the body — the system voice still
 * precedes what it speaks about, so the protocol reading survives the reflow.
 * Keyed on the CONTENT COLUMN (container `utpv`), never the viewport.
 * --------------------------------------------------------------------------- */
@container utpv (max-width: 40rem) {
  .ut-pv-sek {
    padding: 1.5rem 0;
  }
  /* Date column → inline with the row text (a 6rem column starves the title). */
  .ut-pv-post {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ut-pv-post .ut-pv-rowdate {
    grid-column: 1 / -1;
    padding-top: 0;
  }
  .ut-pv-folk {
    grid-template-columns: minmax(0, 1fr);
  }
  .ut-pv-org-overview .ut-pv-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container utpv (max-width: 30rem) {
  /* The marks column drops under the row rather than shrinking the title to a
     two-character ribbon. */
  .ut-pv-post,
  .ut-pv-event,
  .ut-pv-rrad {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
  .ut-pv-rowmarks {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------- *
 * Gallery teaser (matted figures). The ui-core Gallery PRIMITIVE takes this
 * over in P7-7 (feasibility § 2e) — this is the teaser's interim frame.
 * --------------------------------------------------------------------------- */
.ut-pv-org-overview .ut-pv-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.ut-pv-galleryfig {
  margin: 0;
  padding: 0.5rem;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-card);
  background: var(--ut-surface);
  box-shadow: var(--ut-elev-raised);
}
.ut-pv-org-overview .ut-pv-galleryimg {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--ut-radius-control);
  object-fit: cover;
}

/* --------------------------------------------------------------------------- *
 * Narrow column. The rail ROTATES: the protocol margin becomes a horizontal
 * strip above the heading — same data, different direction (the fasit's move).
 * --------------------------------------------------------------------------- */
@container utpv (max-width: 40rem) {
  .ut-pv-post,
  .ut-pv-event,
  .ut-pv-rrad {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .ut-pv-rowmarks {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }
  .ut-pv-offer {
    grid-template-columns: 1fr;
  }
  .ut-pv-folk {
    grid-template-columns: 1fr;
  }
  .ut-pv-org-overview .ut-pv-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container utpv (max-width: 26.25rem) {
  .ut-pv-org-overview .ut-pv-gallery {
    grid-template-columns: 1fr;
  }
}

/* EventKit phase 1: approved 23 September composition. Tokens stay in ui-core. */
body.single-event .entry-content:has(> .ut-pv-event-page > .ut-pv-event-overview),
body.single-event .entry-content > .ut-pv-event-page:has(> .ut-pv-event-overview) {
  width:100%;
  max-width:var(--wp--style--global--wide-size, 76rem);
}
.ut-pv-event-overview { container-type: inline-size; }
.ut-pv-event-overview .ut-pv-event-layout { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); grid-template-areas:"art heading" "booking content"; gap:1.75rem 2.4rem; align-items:start; }
.ut-pv-event-overview .ut-pv-event-heading { grid-area:heading; min-width:0; }
.ut-pv-event-overview .ut-pv-event-heading .ut-pv-title { font-size:clamp(2rem,4cqi,2.875rem); line-height:1.08; letter-spacing:-.035em; }
.ut-pv-event-overview .ut-pv-event-heading .ut-ui-banner { margin:0 0 1rem; }
.ut-pv-event-overview .ut-pv-lead { font-size:1.0625rem; color:var(--ut-content-muted); }
.ut-pv-event-overview .ut-pv-event-art { grid-area:art; margin:0; padding:.375rem; background:var(--ut-surface); border:1px solid var(--ut-border); border-radius:1.625rem; overflow:hidden; }
.ut-pv-event-overview .ut-pv-event-art img { display:block; width:100%; height:auto; border-radius:1.25rem; }
.ut-pv-event-overview .ut-pv-event-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.625rem; margin:1.375rem 0 0; }
.ut-pv-event-overview .ut-pv-event-facts .ut-pv-row { display:block; border:1px solid color-mix(in srgb,var(--ut-tint-content) 13%,transparent); border-radius:1.0625rem; background:var(--ut-tint-1); color:var(--ut-tint-content); padding:.9375rem; }
.ut-pv-event-overview .ut-pv-event-facts .ut-pv-row:nth-child(2n) { background:var(--ut-tint-4); }
.ut-pv-event-overview .ut-pv-event-facts .ut-pv-row:nth-child(3n) { background:var(--ut-tint-3); }
.ut-pv-event-overview .ut-pv-event-facts dt { color:var(--ut-tint-content); font-size:.75rem; margin:0 0 .25rem; }
.ut-pv-event-overview .ut-pv-event-facts dd { margin:0; font-size:.9375rem; font-weight:600; overflow-wrap:anywhere; }
.ut-pv-event-overview .ut-pv-event-booking { grid-area:booking; position:sticky; top:1.5rem; padding:1.625rem; background:var(--ut-surface); border:1px solid var(--ut-border-strong); border-radius:1.375rem; }
.ut-pv-event-overview .ut-pv-event-booking h2 { font-size:1.6875rem; margin:0 0 .75rem; }
.ut-pv-event-overview .ut-pv-event-ticket { margin:1.25rem 0 0; padding:1rem; border-radius:.875rem; background:var(--ut-brand-surface); }
.ut-pv-event-overview .ut-pv-event-ticket h3 { margin:0 0 .5rem; font-size:1.125rem; }
.ut-pv-event-overview .ut-pv-event-ticket .ut-pv-btn { display:flex; margin-top:1rem; }
.ut-pv-event-overview .ut-pv-btn { min-height:46px; border-radius:99px; padding:.8rem 1.3rem; white-space:normal; text-align:center; }
.ut-pv-event-overview .ut-pv-btn-primary { background:var(--ut-link); border-color:var(--ut-link); }
.ut-pv-event-overview .ut-pv-event-booking-note { color:var(--ut-content-muted); font-size:.8125rem; margin:1rem 0 0; }
.ut-pv-event-overview .ut-pv-event-story { grid-area:content; min-width:0; }
.ut-pv-event-overview .ut-pv-event-story .ut-pv-sek { display:block; padding:1.5rem; margin:1.5rem 0 0; border:1px solid var(--ut-border); border-radius:1.25rem; background:var(--ut-surface); scroll-margin-top:1.5rem; }
.ut-pv-event-overview .ut-pv-event-story #program { background:var(--ut-tint-3); color:var(--ut-tint-content); }
.ut-pv-event-overview .ut-pv-event-story #organizer { background:var(--ut-tint-4); color:var(--ut-tint-content); }
.ut-pv-event-overview .ut-pv-event-story .ut-pv-sektitle { margin:0 0 .875rem; font-size:1.3125rem; }
.ut-pv-event-overview .ut-pv-event-story .ut-pv-nav { display:block; border:0; padding:0; margin:0 0 1.5rem; }
.ut-pv-event-overview .ut-pv-event-story .ut-pv-navtitle { display:none; }
.ut-pv-event-overview .ut-ui-section-nav { position:static; background:transparent; }
.ut-pv-event-overview .ut-ui-section-nav__list { display:flex; flex-wrap:nowrap; gap:.5rem; overflow-x:auto; overscroll-behavior-inline:contain; }
.ut-pv-event-overview .ut-ui-section-nav__link { display:flex; align-items:center; min-height:44px; padding:.55rem .9375rem; }
.ut-pv-event-overview .ut-pv-event-program { line-height:1.8; overflow-wrap:anywhere; }
.ut-pv-event-overview .ut-pv-event-organizer-links { display:flex; flex-wrap:wrap; gap:.75rem; margin:1rem 0; }
.ut-pv-event-overview .ut-pv-event-story a { overflow-wrap:anywhere; }
.ut-pv-event-overview .ut-pv-event-layout--no-image { grid-template-columns:minmax(0,1fr) minmax(16rem,20rem); grid-template-areas:"heading booking" "content booking"; }
@container (max-width:700px) {
  .ut-pv-event-overview .ut-pv-event-layout, .ut-pv-event-overview .ut-pv-event-layout--no-image { grid-template-columns:minmax(0,1fr); grid-template-areas:"heading" "art" "booking" "content"; gap:1.5rem; }
  .ut-pv-event-overview .ut-pv-event-layout--no-image { grid-template-areas:"heading" "booking" "content"; }
  .ut-pv-event-overview .ut-pv-event-booking { position:static; padding:1.25rem; }
  .ut-pv-event-overview .ut-pv-event-story .ut-pv-sek { padding:1.25rem; }
}
@media (forced-colors:active) { .ut-pv-event-overview .ut-pv-event-facts .ut-pv-row { border:1px solid CanvasText; } }

/* People catalogue: the portrait leads, with a complete monogram fallback. */
.ut-ui .ut-pv-cat--person .ut-pv-cat-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; overflow:visible; border:0; background:transparent; }
.ut-ui .ut-pv-cat--person .ut-pv-person-card { position:relative; display:flex; flex-direction:column; min-width:0; margin:0; overflow:hidden; border:1px solid var(--ut-border); border-radius:var(--ut-radius-card); background:var(--ut-surface); box-shadow:var(--ut-elev-raised); list-style:none; }
.ut-ui .ut-pv-cat--person .ut-pv-person-card::before { content:none; }
.ut-ui .ut-pv-cat--person .ut-pv-person-profile { display:block; flex:1; min-width:0; color:var(--ut-content); text-decoration:none; }
.ut-ui .ut-pv-cat--person a.ut-pv-person-profile::after { content:""; position:absolute; inset:0; z-index:1; }
.ut-ui .ut-pv-cat--person .ut-pv-person-card:has(> a.ut-pv-person-profile:focus-visible) { outline:var(--ut-focus-ring-width) solid var(--ut-focus-ring-color); outline-offset:var(--ut-focus-ring-offset); }
.ut-ui .ut-pv-cat--person .ut-pv-person-profile:focus-visible { outline:none; }
.ut-ui .ut-pv-cat--person .ut-pv-person-social a:focus-visible { outline:var(--ut-focus-ring-width) solid var(--ut-focus-ring-color); outline-offset:var(--ut-focus-ring-offset); }
.ut-ui .ut-pv-cat--person .ut-pv-person-photo { display:grid; place-items:center; width:100%; aspect-ratio:1; overflow:hidden; background:var(--ut-brand-surface); }
.ut-ui .ut-pv-cat--person .ut-pv-person-photo img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; }
.ut-ui .ut-pv-cat--person .ut-pv-person-mono { display:grid; place-items:center; width:6rem; height:6rem; border:1px solid var(--ut-border-strong); border-radius:50%; background:var(--ut-surface); color:var(--ut-content); font-size:2rem; font-weight:700; }
.ut-ui .ut-pv-cat--person .ut-pv-person-body { display:grid; gap:.55rem; padding:.95rem 1rem .8rem; overflow-wrap:anywhere; }
.ut-ui .ut-pv-cat--person .ut-pv-person-name { color:var(--ut-content); font-size:1rem; line-height:1.25; }
.ut-ui .ut-pv-cat--person a.ut-pv-person-profile:hover .ut-pv-person-name { color:var(--ut-link); text-decoration:underline; }
.ut-ui .ut-pv-cat--person .ut-pv-person-place { display:grid; grid-template-columns:4.2rem minmax(0,1fr); gap:.25rem; color:var(--ut-content-muted); font-size:.8rem; }
.ut-ui .ut-pv-cat--person .ut-pv-person-fact-label { color:var(--ut-content-subtle); font-weight:650; }
.ut-ui .ut-pv-cat--person .ut-pv-person-social { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; padding:.6rem 1rem; border-top:1px solid var(--ut-border); background:var(--ut-hover-surface); }
.ut-ui .ut-pv-cat--person .ut-pv-person-social a { display:inline-flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; border:1px solid var(--ut-border); border-radius:999px; background:var(--ut-surface); color:var(--ut-link); text-decoration:none; }
.ut-ui .ut-pv-cat--person .ut-pv-person-social svg { width:1.1rem; height:1.1rem; }
.ut-ui .ut-pv-cat--person .ut-pv-person-social a:hover { background:var(--ut-hover-surface); }
@media (min-width: 90rem) { @container utpv (min-width: 70rem) { .ut-ui .ut-pv-cat--person .ut-pv-cat-list { grid-template-columns:repeat(4,minmax(0,1fr)); } } }
@container utpv (max-width: 42rem) { .ut-ui .ut-pv-cat--person .ut-pv-cat-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container utpv (max-width: 29rem) { .ut-ui .ut-pv-cat--person .ut-pv-cat-list { grid-template-columns:minmax(0,1fr); } }

/* ===========================================================================
 * THE PLACE FRONT PAGE (Stedssiden steg 1, 0.95.0) — Christian's approved
 * forslag 2 (2026-10-02). The theme's wide width (76rem), two columns on a
 * large screen and one on a phone; the order on a phone follows the mockup
 * (lead story, What's on, more news, notices, About, map, places). Semantic
 * `.ut-ui` roles only, like every other read flate.
 * =========================================================================== */
body.single-place .entry-content:has(> .ut-pv-place-page .ut-pv-front),
body.single-place .entry-content > .ut-pv-place-page:has(.ut-pv-front) {
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 76rem);
}
.ut-pv-front { container-type: inline-size; container-name: utfront; color: var(--ut-content); }
.ut-pv-front a { color: var(--ut-link); }
.ut-pv-front a:focus-visible,
.ut-pv-front summary:focus-visible { outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color); outline-offset: var(--ut-focus-ring-offset); }
.ut-pv-front__icon { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ut-pv-front__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ut-ui .ut-pv-front p { margin: 0; }
/* Headings are bold, as in the approved mockup and the catalogue heads (700). */
.ut-ui .ut-pv-front h1, .ut-ui .ut-pv-front h2, .ut-ui .ut-pv-front h3 { margin: 0; font-family: var(--ut-font-sans); font-weight: 700; color: var(--ut-content); }

/* Alert band: only when one applies, one at a time. */
.ut-pv-front__alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; align-items: start; margin: 0 0 1.25rem; padding: 0.875rem 1.25rem; border: 1px solid var(--ut-warning-border); border-radius: var(--ut-radius-card); background: var(--ut-warning-surface); scroll-margin-top: var(--ut-scroll-margin-section, 6rem); }
.ut-pv-front__alert-icon { margin-top: 0.125rem; color: var(--ut-warning); }
.ut-pv-front__alert-kicker { font-family: var(--ut-font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ut-warning); }
.ut-ui .ut-pv-front .ut-pv-front__alert-title { font-size: 1rem; font-weight: 700; color: var(--ut-content); }
.ut-pv-front__alert-facts { display: flex; flex-wrap: wrap; gap: 0.125rem 0.875rem; margin-top: 0.125rem; font-size: 0.8125rem; color: var(--ut-content-muted); }
.ut-pv-front__alert-links { display: grid; gap: 0.25rem; justify-items: end; align-self: center; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.ut-ui .ut-pv-front .ut-pv-front__alert-links a { display: inline-flex; align-items: center; gap: 0.375rem; text-decoration: none; color: var(--ut-content); }
.ut-ui .ut-pv-front .ut-pv-front__alert-links a:hover { text-decoration: underline; }

/* Head: «Place», the name, «Part of …», tagline, «Last updated». */
.ut-pv-front__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1.5rem; align-items: end; padding-top: 0.5rem; }
.ut-pv-front__kind { font-family: var(--ut-font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ut-content-subtle); }
.ut-ui .ut-pv-front .ut-pv-front__name { margin-top: 0.125rem; font-size: clamp(2.125rem, 5cqi, 2.875rem); line-height: 1.08; letter-spacing: -0.025em; hyphens: auto; overflow-wrap: break-word; }
.ut-pv-front__partof { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.375rem; font-size: 0.875rem; color: var(--ut-content-muted); }
.ut-ui .ut-pv-front .ut-pv-front__tagline { margin-top: 0.25rem; max-width: 62ch; font-size: 1.0625rem; color: var(--ut-content-muted); }
.ut-pv-front__fresh { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.375rem; font-size: 0.8125rem; color: var(--ut-content-subtle); }
.ut-pv-front__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ut-brand); }
.ut-pv-front__dot.is-quiet { background: var(--ut-border-strong); }
.ut-pv-front__acts .ut-pv-btn { gap: 0.5rem; }

/* Content row: jumps down the page; «Organizations →» opens the list. */
.ut-pv-front__bar { display: flex; gap: 0.5rem; margin: 1.125rem 0 0; padding: 0.125rem 0 0.75rem; overflow-x: auto; border-bottom: 1px solid var(--ut-border); scrollbar-width: thin; }
/* The organization page's jump bar shares these buttons (B-FP-465). */
.ut-ui .ut-pv-front .ut-pv-front__pill,
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-front__pill { flex: none; display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.25rem; padding: 0.4375rem 0.8125rem; border: 1px solid var(--ut-border-strong); border-radius: var(--ut-radius-pill); background: var(--ut-surface); color: var(--ut-content); font-size: 0.8125rem; font-weight: 500; line-height: 1.3; text-decoration: none; }
.ut-ui .ut-pv-front .ut-pv-front__pill:hover,
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-front__pill:hover { border-color: var(--ut-brand); }
.ut-pv-front__pill .ut-pv-front__icon { width: 1rem; height: 1rem; }
.ut-pv-front__count { color: var(--ut-content-subtle); font-size: 0.75rem; }

/* Two columns: the news and the board; beside them the calendar, About, map, places. */
.ut-pv-front__grid { display: grid; grid-template-columns: minmax(0, 1fr) 23.75rem; gap: 3rem; align-items: start; padding-top: 1.5rem; }
.ut-pv-front__main, .ut-pv-front__side { min-width: 0; }
/* Only one column has parts: one readable column, no blank half (2026-10-05). */
.ut-pv-front__grid.is-single { grid-template-columns: minmax(0, 46rem); }
.ut-pv-front__part { scroll-margin-top: var(--ut-scroll-margin-section, 6rem); }
.ut-pv-front__part + .ut-pv-front__part { padding-top: 1.875rem; }
.ut-ui .ut-pv-front .ut-pv-front__h2 { margin: 0 0 0.25rem; font-size: 1.3125rem; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 0.625rem; flex-wrap: wrap; }
.ut-pv-front__h2 small { font-size: 0.8125rem; font-weight: 400; color: var(--ut-content-subtle); }
.ut-ui .ut-pv-front .ut-pv-front__h2--split { justify-content: space-between; }
.ut-ui .ut-pv-front .ut-pv-front__h2 a { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; font-weight: 500; text-decoration: none; }
.ut-pv-front__h2 a .ut-pv-front__icon { width: 1rem; height: 1rem; }
.ut-ui .ut-pv-front .ut-pv-front__sub { margin: 0.125rem 0 0.5rem; font-size: 0.8125rem; color: var(--ut-content-subtle); }
.ut-ui .ut-pv-front .ut-pv-front__more { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.75rem; font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.ut-ui .ut-pv-front .ut-pv-front__more:hover { text-decoration: underline; }
.ut-pv-front__more .ut-pv-front__icon { width: 1rem; height: 1rem; }

/* Lead story: the picture decides. Landscape 3:2 above, portrait 4:5 beside, none = a text story. */
.ut-pv-front__lead { margin: 0; }
.ut-pv-front__photo { margin: 0; overflow: hidden; border-radius: var(--ut-radius-card); background: var(--ut-surface-muted); aspect-ratio: 3 / 2; }
.ut-pv-front__photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.ut-pv-front__lead.is-landscape .ut-pv-front__lead-body { margin-top: 0.875rem; }
.ut-pv-front__lead.is-portrait { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.5rem; align-items: start; }
.ut-pv-front__lead.is-portrait .ut-pv-front__photo { aspect-ratio: 4 / 5; }
.ut-pv-front__lead.is-text { border-top: 3px solid var(--ut-content); padding-top: 0.875rem; }
.ut-ui .ut-pv-front .ut-pv-front__lead-title { margin: 0.25rem 0 0.625rem; max-width: 22ch; font-size: clamp(1.625rem, 3.2cqi, 2.125rem); line-height: 1.1; letter-spacing: -0.02em; }
.ut-ui .ut-pv-front .ut-pv-front__lead.is-portrait .ut-pv-front__lead-title { font-size: clamp(1.625rem, 2.8cqi, 1.875rem); }
.ut-ui .ut-pv-front .ut-pv-front__lead.is-text .ut-pv-front__lead-title { max-width: 20ch; font-size: clamp(1.75rem, 3.8cqi, 2.625rem); }
.ut-ui .ut-pv-front .ut-pv-front__lead-title a,
.ut-ui .ut-pv-front .ut-pv-front__story h3 a,
.ut-ui .ut-pv-front .ut-pv-front__event h3 a { color: var(--ut-content); text-decoration: none; }
.ut-ui .ut-pv-front .ut-pv-front__lead-title a:hover,
.ut-ui .ut-pv-front .ut-pv-front__story h3 a:hover,
.ut-ui .ut-pv-front .ut-pv-front__event h3 a:hover { text-decoration: underline; }
.ut-ui .ut-pv-front .ut-pv-front__lead-text { margin-bottom: 0.625rem; max-width: 60ch; font-size: 1rem; color: var(--ut-content-muted); }
.ut-ui .ut-pv-front .ut-pv-front__lead.is-text .ut-pv-front__lead-text { font-size: 1.125rem; }
.ut-pv-front__kicker { font-family: var(--ut-font-mono); font-size: 0.65625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ut-brand-strong); }
.ut-pv-front__byline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4375rem; font-size: 0.78125rem; color: var(--ut-content-subtle); }
.ut-ui .ut-pv-front .ut-pv-front__who { color: var(--ut-content); font-weight: 600; text-decoration: none; }
.ut-ui .ut-pv-front a.ut-pv-front__who:hover { color: var(--ut-link); text-decoration: underline; }

/* Stories under the lead, earlier stories and borrowed ones. */
.ut-pv-front__list { margin-top: 1.375rem; }
.ut-pv-front__h2 + .ut-pv-front__list { margin-top: 0.5rem; }
.ut-pv-front__story { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: 0.875rem; margin: 0; padding: 0.875rem 0; border-top: 1px solid var(--ut-border); }
.ut-pv-front__story.is-textonly { grid-template-columns: minmax(0, 1fr); }
.ut-pv-front__thumb { margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: var(--ut-radius-control); background: var(--ut-surface-muted); }
.ut-pv-front__thumb img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ut-ui .ut-pv-front .ut-pv-front__story h3 { margin: 0.1875rem 0 0.375rem; font-size: 1.0625rem; line-height: 1.25; }
.ut-pv-front__calm { padding: 1.375rem 1.5rem; border-radius: var(--ut-radius-card); background: var(--ut-brand-surface); }
.ut-pv-front__calm-kicker { font-family: var(--ut-font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ut-brand-strong); }
.ut-ui .ut-pv-front .ut-pv-front__calm h2 { margin: 0.375rem 0 0.5rem; font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.015em; }
.ut-ui .ut-pv-front .ut-pv-front__calm p:last-child { color: var(--ut-content-muted); }
.ut-ui .ut-pv-front .ut-pv-front__calm .ut-pv-front__calm-text { color: var(--ut-content-muted); }
.ut-ui .ut-pv-front .ut-pv-front__calm .ut-pv-front__calm-who { margin-top: 0.5rem; font-size: 0.875rem; color: var(--ut-content-muted); }

/* Notices and their actions (the board's two-and-two cards were replaced by the feed, 0.108.0). */
.ut-pv-front__acts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.ut-ui .ut-pv-front .ut-pv-front__acts-row .ut-pv-front__more { margin-top: 0; }
.ut-ui .ut-pv-front .ut-pv-front__new { gap: 0.375rem; color: var(--ut-on-brand); }
.ut-ui .ut-pv-front .ut-pv-front__new:hover { color: var(--ut-on-brand); text-decoration: none; }
.ut-pv-front__note-login { font-size: 0.8125rem; color: var(--ut-content-subtle); }

/* The feed (Stedssiden S1, 0.108.0): «Latest from …» with «All · News ·
   Notices» (ui-core FilterButtons, compact = the content row's pill size),
   notices on the warm sheet (ui-core notice role, B-FP-462/464; fallbacks so
   the sheet still reads without the sheet). The button row and two of the
   panels arrive `hidden`; the attribute must win over the primitive's flex. */
.ut-pv-front__feedhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.625rem 1rem; margin-bottom: 1rem; }
.ut-ui .ut-pv-front .ut-pv-front__feedhead .ut-pv-front__h2 { margin: 0; }
.ut-ui .ut-pv-front [data-ut-feed-filter][hidden],
.ut-ui .ut-pv-front [data-ut-feed-panel][hidden] { display: none; }
.ut-pv-front__kicker.is-notice { color: var(--ut-notice, #8A4B2A); }
.ut-pv-front__lead.is-notice { padding: 1.125rem 1.25rem; border: 1px solid var(--ut-notice-border, #DDBFA3); border-top: 6px solid var(--ut-notice, #8A4B2A); border-radius: var(--ut-radius-card); background: var(--ut-notice-surface, #F6E9DA); }
.ut-pv-front__lead.is-text.is-notice { border-top-width: 6px; padding-top: 1.125rem; }
.ut-pv-front__story.is-notice { margin: 0.25rem 0; padding: 0.75rem 0.75rem 0.75rem 1.125rem; border-top: 0; border-radius: var(--ut-radius-control); background: var(--ut-notice-surface, #F6E9DA); box-shadow: inset 5px 0 0 var(--ut-notice, #8A4B2A); }
.ut-pv-front__story.is-notice + .ut-pv-front__story:not(.is-notice) { border-top: 0; }
/* On the sheet the byline is muted ink (the subtle ink is too light there). */
.ut-ui .ut-pv-front .is-notice .ut-pv-front__byline { color: var(--ut-content-muted); }
@media (forced-colors: active) { .ut-pv-front__story.is-notice, .ut-pv-front__lead.is-notice { border: 1px solid CanvasText; } }

/* The calendar part: green date tile, sign-up as a link. */
.ut-pv-front__event { display: grid; grid-template-columns: 3.375rem minmax(0, 1fr); gap: 0.875rem; margin: 0; padding: 0.875rem 0; border-top: 1px solid var(--ut-border); }
.ut-ui .ut-pv-front .ut-pv-front__tile { align-self: start; padding: 0.375rem 0 0.4375rem; border-radius: var(--ut-radius-control); background: var(--ut-brand-surface); color: var(--ut-brand-strong); text-align: center; line-height: 1.05; }
.ut-pv-front__tile span { display: block; font-size: 0.65625rem; letter-spacing: 0.05em; text-transform: uppercase; }
.ut-pv-front__tile b { display: block; margin: 0.0625rem 0; font-size: 1.375rem; }
.ut-ui .ut-pv-front .ut-pv-front__event h3 { margin: 0 0 0.125rem; font-size: 0.96875rem; line-height: 1.3; }
.ut-ui .ut-pv-front .ut-pv-front__facts { font-size: 0.8125rem; color: var(--ut-content-muted); }
.ut-ui .ut-pv-front .ut-pv-front__event-act { margin-top: 0.5rem; }
.ut-ui .ut-pv-front .ut-pv-front__event-act .ut-pv-btn { min-height: 2.25rem; padding: 0 0.75rem; font-size: 0.8125rem; gap: 0.375rem; }
.ut-ui .ut-pv-front .ut-pv-front__going { border-color: var(--ut-brand-surface); background: var(--ut-brand-surface); color: var(--ut-brand-strong); }

/* About: the intro; «Read more» unfolds the description in place. */
.ut-ui .ut-pv-front .ut-pv-front__about p { margin: 0 0 0.375rem; font-size: 0.9375rem; color: var(--ut-content-muted); }
.ut-pv-front__readmore > summary { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem; list-style: none; cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--ut-link); }
.ut-pv-front__readmore > summary::-webkit-details-marker { display: none; }
.ut-pv-front__readmore[open] { display: flex; flex-direction: column; }
.ut-pv-front__readmore[open] > summary { order: 2; }
.ut-pv-front__readmore[open] .ut-pv-front__when-closed,
.ut-pv-front__readmore:not([open]) .ut-pv-front__when-open { display: none; }
.ut-pv-front__readmore[open] > summary .ut-pv-front__icon { transform: rotate(180deg); }

/* Map and «Open in map» (the menu is shared with the property page). */
.ut-pv-front__map .ut-map { border-radius: var(--ut-radius-card); }
.ut-map-open { position: relative; display: inline-block; margin-top: 0.625rem; }
.ut-map-open__button { display: inline-flex; align-items: center; gap: 0.4375rem; min-height: 2.25rem; padding: 0 0.75rem; border: 1px solid var(--ut-border-strong); border-radius: var(--ut-radius-control); background: var(--ut-surface); color: var(--ut-content); font-size: 0.8125rem; font-weight: 600; list-style: none; cursor: pointer; }
.ut-map-open__button::-webkit-details-marker { display: none; }
.ut-map-open__button:focus-visible { outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color); outline-offset: var(--ut-focus-ring-offset); }
.ut-map-open__icon, .ut-map-open__chevron { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ut-map-open[open] .ut-map-open__chevron { transform: rotate(180deg); }
.ut-map-open__menu { position: absolute; left: 0; top: calc(100% + 0.25rem); z-index: 30; display: grid; min-width: 14rem; margin: 0; padding: 0.25rem; list-style: none; border: 1px solid var(--ut-border); border-radius: var(--ut-radius-control); background: var(--ut-surface); box-shadow: var(--ut-elev-overlay); }
.ut-ui .ut-map-open__link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.625rem; border-radius: var(--ut-radius-control); color: var(--ut-content); font-size: 0.84375rem; text-decoration: none; }
.ut-ui .ut-map-open__link:hover { background: var(--ut-hover-surface); }
.ut-map-open__link small { margin-left: auto; color: var(--ut-content-subtle); font-size: 0.75rem; }

/* Places in …. */
.ut-pv-front__places { display: grid; gap: 0.5rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.ut-ui .ut-pv-front .ut-pv-front__places a { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border: 1px solid var(--ut-border); border-radius: var(--ut-radius-control); background: var(--ut-surface); color: var(--ut-content); font-size: 0.875rem; text-decoration: none; }
.ut-pv-front__places a:hover b { text-decoration: underline; }
.ut-pv-front__places span { color: var(--ut-content-subtle); font-size: 0.78125rem; text-align: right; }
.ut-pv-front__nothing { padding: 1.5rem 0; color: var(--ut-content-muted); }

/* One column (tablet and phone): the mockup's order, not the columns'. */
@container utfront (max-width: 62rem) {
  .ut-pv-front__grid { display: flex; flex-direction: column; align-items: stretch; gap: 1.875rem; }
  .ut-pv-front__main, .ut-pv-front__side { display: contents; }
  .ut-pv-front__part + .ut-pv-front__part { padding-top: 0; }
  .ut-pv-front__o1 { order: 1; } .ut-pv-front__o2 { order: 2; } .ut-pv-front__o3 { order: 3; } .ut-pv-front__o4 { order: 4; }
  .ut-pv-front__o5 { order: 5; } .ut-pv-front__o7 { order: 7; } .ut-pv-front__o8 { order: 8; } .ut-pv-front__o9 { order: 9; }
}
@container utfront (max-width: 40rem) {
  .ut-pv-front__alert { grid-template-columns: auto minmax(0, 1fr); padding: 0.75rem 1rem; }
  .ut-pv-front__alert-links { grid-column: 2; justify-items: start; }
  .ut-pv-front__head { grid-template-columns: minmax(0, 1fr); }
  .ut-ui .ut-pv-front .ut-pv-front__tagline { font-size: 1rem; }
  .ut-pv-front__bar { scrollbar-width: none; }
  .ut-pv-front__lead.is-portrait { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ut-pv-front__lead.is-portrait .ut-pv-front__photo { aspect-ratio: 1 / 1; }
  .ut-pv-front__lead.is-portrait .ut-pv-front__lead-body { margin-top: 0.875rem; }
  .ut-pv-front__story { grid-template-columns: 4rem minmax(0, 1fr); }
  .ut-ui .ut-pv-front .ut-pv-front__story h3 { font-size: 1rem; }
  .ut-pv-front__calm { padding: 1.125rem 1rem; }
  .ut-ui .ut-pv-front .ut-pv-front__calm h2 { font-size: 1.4375rem; }
}
@media (forced-colors: active) { .ut-pv-front__pill, .ut-pv-front__places a { border: 1px solid CanvasText; } }

/* «The map page for {place}» — the site's own map, last in «Open in map». */
.ut-map-open__own { margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid var(--ut-border); }

/* ===========================================================================
 * THE MAP PAGE (Kart og sted steg 1, 0.97.0) — `[ut_public_place_map]`.
 *
 * Mockup C's «Kartsiden» with places only: one panel (area, location, search,
 * numbers, list, pages) beside a large map, the chosen place under the map.
 * Semantic `.ut-ui` roles only; every control is at least 44 px. Container-
 * first (`utmapp`): below 56rem one column, and the script's map/list switch
 * shows one of them (without the script both stay, list first).
 * =========================================================================== */
.ut-pv-mapp-page { background: var(--ut-canvas); container-type: inline-size; container-name: utmapp; }
.ut-pv-mapp { display: grid; gap: 1rem; padding: 1.25rem 0 2rem; }
.ut-pv-mapp__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.75rem 1rem; }
.ut-pv-mapp__path { flex: 1 1 100%; }
.ut-pv-mapp__ident { min-width: 0; }
.ut-pv-mapp__kind { margin: 0; font-family: var(--ut-font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ut-content-muted); }
.ut-ui .ut-pv-mapp .ut-pv-mapp__title { margin: 0.125rem 0 0.25rem; font-size: 2.125rem; line-height: 1.12; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ut-pv-mapp__sub { margin: 0; color: var(--ut-content-muted); }
.ut-pv-mapp__truncated, .ut-pv-mapp__cap, .ut-pv-mapp__note:not(:empty) { margin: 0; padding: 0.625rem 0.875rem; border: 1px solid var(--ut-border-strong); border-radius: var(--ut-radius-control); background: var(--ut-info-surface); font-size: 0.8125rem; }
.ut-pv-mapp__note:empty { display: none; }
.ut-pv-mapp__layout { display: grid; grid-template-columns: 23rem minmax(0, 1fr); border: 1px solid var(--ut-border-strong); border-radius: var(--ut-radius-card); background: var(--ut-surface); overflow: hidden; }

/* The panel. */
.ut-pv-mapp__panel { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--ut-border-strong); }
.ut-pv-mapp__areaform, .ut-pv-mapp__search { display: grid; gap: 0.75rem; padding: 1rem 1.125rem 0; background: var(--ut-canvas); }
.ut-pv-mapp__areaform { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.ut-pv-mapp__areaform [hidden] { display: none; }
.ut-pv-mapp__search { padding-bottom: 1rem; border-bottom: 1px solid var(--ut-border); }
.ut-pv-mapp__formacts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.ut-ui .ut-pv-mapp__reset { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ut-link); font-size: 0.875rem; font-weight: 600; }
.ut-pv-mapp__switch { display: none; }
.ut-pv-mapp__count { padding: 0.75rem 1.125rem 0.5rem; }
.ut-ui .ut-pv-mapp .ut-pv-mapp__total { margin: 0; font-size: 0.9375rem; font-weight: 650; }
.ut-pv-mapp__parts { margin: 0.1875rem 0 0; font-size: 0.75rem; color: var(--ut-content-muted); }
.ut-pv-mapp__list { margin: 0; padding: 0 0.5rem 0.5rem; list-style: none; max-height: 40rem; overflow: auto; overscroll-behavior: contain; }
.ut-pv-mapp__row { padding: 0.6875rem 0.625rem; border-left: 3px solid transparent; border-bottom: 1px solid var(--ut-border); }
.ut-pv-mapp__row.is-selected { background: var(--ut-selected-surface); border-left-color: var(--ut-selected); }
.ut-ui .ut-pv-mapp .ut-pv-mapp__name { margin: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.ut-pv-mapp__mark { margin-left: 0.375rem; font-family: var(--ut-font-mono); font-size: 0.6875rem; color: var(--ut-selected); }
.ut-pv-mapp__mark::before { content: "✓ "; }
.ut-pv-mapp__mark[hidden] { display: none; }
.ut-ui .ut-pv-mapp .ut-pv-mapp__meta { margin: 0.1875rem 0 0.25rem; font-size: 0.75rem; color: var(--ut-content-muted); }
.ut-pv-mapp__acts { display: flex; flex-wrap: wrap; gap: 0 1rem; margin: 0; }
.ut-ui .ut-pv-mapp__show, .ut-ui .ut-pv-mapp__open { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ut-link); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.ut-ui .ut-pv-mapp__show:hover, .ut-ui .ut-pv-mapp__open:hover { text-decoration: underline; }
.ut-pv-mapp__empty { margin: 0.5rem 1.125rem 1rem; }
.ut-pv-mapp__pager { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.625rem 1.125rem 1rem; }
.ut-pv-mapp__pagetext { font-size: 0.8125rem; color: var(--ut-content-muted); }

/* The map column. */
.ut-pv-mapp__mapcol { display: flex; flex-direction: column; min-width: 0; }
.ut-pv-mapp__maphead { display: flex; justify-content: space-between; align-items: center; gap: 0.625rem; padding: 0.6875rem 1.125rem; border-bottom: 1px solid var(--ut-border); }
.ut-ui .ut-pv-mapp .ut-pv-mapp__h2 { margin: 0; font-size: 1rem; }
.ut-pv-mapp__maphead p { margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--ut-content-muted); }
.ut-pv-mapp__maphead [hidden], .ut-pv-mapp__tools[hidden] { display: none; }
.ut-pv-mapp__map { position: relative; min-height: 22rem; height: 36rem; background: var(--ut-info-surface); }
.ut-pv-mapp__map .leaflet-container { height: 100%; width: 100%; font: inherit; }
.ut-pv-mapp__fallback, .ut-pv-mapp__nothing { margin: 0; padding: 1.25rem 1.125rem; color: var(--ut-content-muted); }
.ut-pv-mapp__mapcol > .ut-pv-mapp__note, .ut-pv-mapp__mapcol > .ut-pv-mapp__cap { margin: 0.5rem 1.125rem 0; }
.ut-pv-mapp__tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3125rem; padding: 0.4375rem 1.125rem; border-top: 1px solid var(--ut-border); background: var(--ut-canvas); }
.ut-pv-mapp__tool { min-width: 2.75rem; justify-content: center; padding: 0 0.5rem; color: var(--ut-content); }
.ut-pv-mapp__detail { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.625rem 1.125rem; align-items: start; padding: 1rem 1.375rem; border-top: 1px solid var(--ut-border-strong); }
.ut-pv-mapp__dkicker { margin: 0; font-family: var(--ut-font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ut-content-muted); }
.ut-ui .ut-pv-mapp .ut-pv-mapp__dname { margin: 0.25rem 0; font-size: 1.375rem; line-height: 1.2; overflow-wrap: anywhere; }
.ut-pv-mapp__dnote, .ut-pv-mapp__dstate { margin: 0 0 0.25rem; font-size: 0.8125rem; color: var(--ut-content-muted); }
.ut-pv-mapp__dacts { display: grid; gap: 0.375rem; justify-items: stretch; min-width: 12rem; }
.ut-pv-mapp__dacts .ut-pv-btn { justify-content: center; }
.ut-pv-mapp__dacts .ut-map-open { margin-top: 0; }
.ut-pv-mapp .ut-map-open__button { min-height: 2.75rem; width: 100%; justify-content: center; }
.ut-pv-mapp .ut-map-open__link { min-height: 2.75rem; }
/* The layout clips its corners (overflow: hidden), so on the map page the menu
   unfolds in place instead of floating over the edge. */
.ut-pv-mapp .ut-map-open__menu { position: static; min-width: 0; margin-top: 0.25rem; box-shadow: none; }
.ut-pv-mapp--unknown .ut-pv-mapp__empty { margin: 0; }

/* One column: list first; the script's switch shows map or list. */
@container utmapp (max-width: 56rem) {
  .ut-pv-mapp__layout { grid-template-columns: minmax(0, 1fr); }
  .ut-pv-mapp__panel { border-right: 0; }
  .ut-pv-mapp__list { max-height: none; }
  .ut-pv-mapp__switch:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.75rem 1.125rem 0; }
  .ut-pv-mapp__views { display: inline-flex; border: 1px solid var(--ut-border-strong); border-radius: var(--ut-radius-control); overflow: hidden; }
  .ut-pv-mapp__view { min-height: 2.75rem; min-width: 5rem; padding: 0 1rem; border: 0; background: var(--ut-surface); color: var(--ut-content); font: inherit; font-weight: 600; cursor: pointer; }
  .ut-pv-mapp__view[aria-pressed="true"] { background: var(--ut-brand); color: var(--ut-on-brand); }
  .ut-pv-mapp__view:focus-visible { outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color); outline-offset: -3px; }
  .ut-pv-mapp__choice { font-size: 0.8125rem; color: var(--ut-content-muted); overflow-wrap: anywhere; }
  .ut-pv-mapp__layout[data-view="map"]:has(.ut-pv-mapp__switch:not([hidden])) [data-ut-mapp-list] { display: none; }
  .ut-pv-mapp__layout[data-view="list"]:has(.ut-pv-mapp__switch:not([hidden])) .ut-pv-mapp__mapcol { display: none; }
  .ut-pv-mapp__map { height: 26rem; }
  .ut-pv-mapp__mapcol { border-top: 1px solid var(--ut-border-strong); }
  .ut-pv-mapp__detail { grid-template-columns: minmax(0, 1fr); padding: 1rem 1.125rem; }
  .ut-pv-mapp__dacts { min-width: 0; }
}
@container utmapp (max-width: 30rem) {
  .ut-ui .ut-pv-mapp .ut-pv-mapp__title { font-size: 1.75rem; }
  .ut-pv-mapp__areaform { grid-template-columns: minmax(0, 1fr); }
  .ut-pv-mapp__maphead { flex-wrap: wrap; }
}
@media (forced-colors: active) { .ut-pv-mapp__row.is-selected { border-left-color: Highlight; } }
/* Felles Del reuses the article's existing quiet action expression. */
.ut-pv-share {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-block-end: 16px;
  color: var(--ut-content-muted);
  font-size: 0.78rem;
}
.ut-pv-share[hidden], .ut-pv-share input[hidden] { display: none; }
.ut-pv-share__button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 4px 6px;
  border: 0;
  border-radius: var(--ut-radius-control, 4px);
  background: none;
  font: inherit;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
}
.ut-pv-share__button:hover { color: var(--ut-link); text-decoration: underline; }
.ut-pv-share__button:focus-visible {
  outline: var(--ut-focus-ring-width, 3px) solid var(--ut-focus-ring-color);
  outline-offset: var(--ut-focus-ring-offset, 2px);
}
.ut-pv-share__button[data-state="done"] { color: var(--ut-success); }
.ut-pv-share__button[data-state="failed"] { color: var(--ut-danger); }
.ut-pv-share__button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}
.ut-pv-share input { width: 100%; min-width: 0; }
@media print { .ut-pv-share { display: none; } }

/* ===========================================================================
 * THE ORGANIZATION PAGE — forslag C «Nytt først» (B-FP-465, 0.106.0).
 * Christian's choice 2026-10-07; fasit: the mockup at vault commit 01168f4b.
 * The theme's wide width, a main column and a 320px side column on a large
 * screen; on a phone the new things first, then Contact, Details, Relations.
 * The side column does not stick: it can be taller than the screen, and a
 * sticky column taller than the screen hides its own end. Semantic `.ut-ui`
 * roles only; the jump bar borrows the place page's buttons.
 * =========================================================================== */
body.single-organization .entry-content:has(> .ut-pv-org-overview),
body.single-organization .entry-content:has(> .ut-pv-org-page),
body.single-organization .entry-content > .ut-pv-org-page,
body.single-organization .entry-content > .ut-pv-org-overview,
body.single-property .entry-content:has(> .ut-pv-property-page),
body.single-property .entry-content > .ut-pv-property-page {
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 76rem);
}
.ut-pv-org-overview a:not(.ut-pv-btn) { color: var(--ut-link); }
.ut-pv-org-overview a:focus-visible,
.ut-pv-org-overview summary:focus-visible { outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color); outline-offset: var(--ut-focus-ring-offset); }
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) p { margin: 0; }
.ut-ui .ut-pv-org-page .ut-pv-factline { margin: 0; }

/* The organization's own banner above the head, overview only (B-FP-495): low,
   full width, cropped from the middle; no image → nothing. */
.ut-pv-org-overview .ut-pv-ov-banner { margin: 0 0 1.25rem; overflow: hidden; border-radius: var(--ut-radius-card); background: var(--ut-hover-surface); }
.ut-pv-org-overview .ut-pv-ov-banner img { display: block; width: 100%; height: 150px; max-width: none; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 640px) { .ut-pv-org-overview .ut-pv-ov-banner img { height: 112px; } }

/* Head: the fact line under the name; «Become a member» and Share beside it. */
:is(.ut-pv-org-overview, .ut-pv-org-page, .ut-pv-property-page) .ut-ui-banner[data-ut-variant='identity'] .ut-ui-banner__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
:is(.ut-pv-org-overview, .ut-pv-org-page, .ut-pv-property-page) .ut-ui-banner[data-ut-variant='identity'] .ut-ui-banner__title { grid-column: 1; grid-row: 1; }
:is(.ut-pv-org-overview, .ut-pv-org-page, .ut-pv-property-page) .ut-ui-banner[data-ut-variant='identity'] .ut-ui-banner__subtitle { grid-column: 1; grid-row: 2; order: 0; max-inline-size: none; }
:is(.ut-pv-org-overview, .ut-pv-org-page, .ut-pv-property-page) .ut-ui-banner[data-ut-variant='identity'] .ut-ui-banner__actions { grid-column: 2; grid-row: 1 / span 2; margin-inline-start: 0; }
.ut-pv-factline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; font-size: 0.875rem; color: var(--ut-content-muted); }
.ut-pv-factdot { color: var(--ut-content-subtle); }
.ut-pv-factline > span:not(.ut-pv-factdot) { display: inline-flex; align-items: center; }
.ut-pv-type-icon { display: inline-block; flex: none; width: 1rem; height: 1rem; margin-inline-end: 0.375rem; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:is(.ut-pv-org-overview, .ut-pv-org-page, .ut-pv-property-page) .ut-ui-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ut-pv-joincell { display: inline-flex; }
:is(.ut-pv-org-overview, .ut-pv-org-page, .ut-pv-property-page) .ut-ui-banner__actions .ut-pv-share { margin: 0; font-size: inherit; color: var(--ut-content); }
:is(.ut-pv-org-overview, .ut-pv-org-page, .ut-pv-property-page) .ut-ui-banner__actions .ut-pv-share__button { min-height: 2.75rem; padding: 0 1rem; gap: 0.5rem; border: 1px solid var(--ut-border-strong); border-radius: var(--ut-radius-control); background: var(--ut-surface); font-size: 0.875rem; font-weight: 600; color: var(--ut-content); }
:is(.ut-pv-org-overview, .ut-pv-org-page, .ut-pv-property-page) .ut-ui-banner__actions .ut-pv-share__button:hover { border-color: var(--ut-brand); color: var(--ut-content); text-decoration: none; }
:is(.ut-pv-org-overview, .ut-pv-org-page, .ut-pv-property-page) .ut-ui-banner__actions .ut-pv-share__button svg { width: 1rem; height: 1rem; opacity: 1; }
:is(.ut-pv-org-overview, .ut-pv-org-page, .ut-pv-property-page) .ut-ui-banner__actions .ut-ui-status-chip { min-height: 2.75rem; display: inline-flex; align-items: center; padding-inline: 1rem; }

/* Jump bar: wraps instead of scrolling, so every button stays reachable. */
.ut-pv-org-overview > .ut-pv-ov-bar { flex-wrap: wrap; overflow: visible; margin-top: 1.25rem; padding-bottom: 1.25rem; }

/* Two columns. */
.ut-pv-ov-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; align-items: start; }
.ut-pv-ov-grid.is-single { grid-template-columns: minmax(0, 46rem); }
.ut-pv-ov-main, .ut-pv-ov-side { min-width: 0; }
.ut-pv-ov-part { scroll-margin-top: var(--ut-scroll-margin-section, 6rem); }
.ut-pv-ov-main > .ut-pv-ov-part + .ut-pv-ov-part { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--ut-border); }
.ut-pv-ov-side > .ut-pv-ov-part + .ut-pv-ov-part { margin-top: 1.5rem; }
/* Each side part is its own container, so the Register primitive's own
   container queries see the 320px column (one column, label above value). */
.ut-pv-ov-side > .ut-pv-ov-part { container-type: inline-size; }
.ut-pv-ov-card { padding: 1.125rem 1.25rem; border: 1px solid var(--ut-border); border-radius: var(--ut-radius-card); background: var(--ut-surface); }
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-h2 { margin: 0 0 0.875rem; font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ut-content); }
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-side .ut-pv-ov-h2 { font-size: 1.0625rem; margin-bottom: 0.625rem; }
.ut-pv-ov-headrow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.875rem; }
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-headrow .ut-pv-ov-h2 { margin: 0; }
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-all,
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-more { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-more { margin-top: 1rem; }
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-all:hover,
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-more:hover { text-decoration: underline; }
.ut-pv-ov-all .ut-pv-front__icon, .ut-pv-ov-more .ut-pv-front__icon { width: 1rem; height: 1rem; }

/* Latest news: the newest large beside its picture, two smaller beside each other. */
.ut-pv-ov-lead { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.375rem; align-items: start; margin: 0; }
.ut-pv-ov-lead.is-text { grid-template-columns: minmax(0, 1fr); }
.ut-pv-ov-photo { margin: 0; overflow: hidden; border-radius: var(--ut-radius-card); background: var(--ut-hover-surface); aspect-ratio: 4 / 3; }
.ut-pv-ov-story .ut-pv-ov-photo { aspect-ratio: 16 / 10; }
.ut-pv-ov-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ut-pv-ov-kicker { font-family: var(--ut-font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ut-content-subtle); }
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-leadtitle { margin: 0.375rem 0 0.5rem; font-size: clamp(1.375rem, 2.6cqi, 1.625rem); line-height: 1.2; letter-spacing: -0.01em; }
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-storytitle { margin: 0.25rem 0 0; font-size: 1rem; line-height: 1.3; }
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-leadtitle a,
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-storytitle a,
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-note h3 a,
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-event h3 a { color: var(--ut-content); text-decoration: none; }
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-leadtitle a:hover,
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-storytitle a:hover,
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-note h3 a:hover,
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-event h3 a:hover { text-decoration: underline; }
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-excerpt { max-width: 60ch; font-size: 1rem; line-height: 1.6; color: var(--ut-content-muted); }
.ut-pv-ov-stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem; margin-top: 1.375rem; padding-top: 1.25rem; border-top: 1px solid var(--ut-border); }
.ut-pv-ov-story { display: grid; gap: 0.5rem; margin: 0; align-content: start; }

/* Notices: the warm sheet (B-FP-462/464): ui-core's notice role from 0.108.0. */
.ut-pv-ov-notes { display: grid; gap: 0.625rem; }
.ut-pv-ov-note { margin: 0; padding: 0.75rem 1rem; border: 1px solid var(--ut-notice-border, #DDBFA3); border-left: 5px solid var(--ut-notice, #8A4B2A); border-radius: var(--ut-radius-control); background: var(--ut-notice-surface, #F6E9DA); }
.ut-pv-ov-note .ut-pv-ov-notemeta { color: var(--ut-content-muted); }
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-note h3 { margin: 0; font-size: 0.96875rem; line-height: 1.35; }
.ut-pv-ov-notemeta { margin-top: 0.125rem; font-size: 0.8125rem; color: var(--ut-content-muted); }
.ut-pv-ov-notes + .ut-pv-rows, .ut-pv-ov-event + .ut-pv-rows { margin-top: 0.75rem; }

/* About and Membership: intro, «Read more» in place, Accordion rows. */
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-intro { max-width: var(--ut-measure-prose); font-size: 1.0625rem; line-height: 1.6; color: var(--ut-content); }
.ut-pv-ov-readmore { margin-top: 0.5rem; }
.ut-pv-ov-readmore > summary { display: inline-flex; align-items: center; gap: 0.375rem; list-style: none; cursor: pointer; font-size: 0.9375rem; font-weight: 600; color: var(--ut-link); }
.ut-pv-ov-readmore > summary::-webkit-details-marker { display: none; }
.ut-pv-ov-readmore[open] { display: flex; flex-direction: column; }
.ut-pv-ov-readmore[open] > summary { order: 2; margin-top: 0.5rem; }
.ut-pv-ov-readmore[open] .ut-pv-ov-when-closed,
.ut-pv-ov-readmore:not([open]) .ut-pv-ov-when-open { display: none; }
.ut-pv-ov-readmore[open] > summary .ut-pv-front__icon { transform: rotate(180deg); }
.ut-pv-ov-readmore > .ut-pv-prose, .ut-pv-ov-part > .ut-pv-prose { max-width: var(--ut-measure-prose); margin-top: 0.75rem; color: var(--ut-content-muted); }
.ut-pv-ov-part .ut-ui-accordion { margin-top: 1.25rem; }
.ut-pv-ov-part .ut-ui-accordion__panel > .ut-pv-prose { max-width: var(--ut-measure-prose); color: var(--ut-content-muted); }
.ut-pv-ov-docs { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ut-pv-ov-docs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
/* «Images · N» (B-FP-466): small pictures, three across, two on a phone. They
   are lazy and inside a closed row, so nothing loads until the row opens. */
.ut-pv-ov-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
.ut-pv-ov-pics > .ut-pv-ov-pic { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ut-radius-card); background: var(--ut-hover-surface); }
@container utpv (max-width: 40rem) {
  .ut-pv-ov-pics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ut-pv-ov-part .ut-pv-offer { margin-top: 1rem; }
.ut-pv-ov-part .ut-pv-ov-intro + .ut-pv-offeraction { margin-top: 1rem; }

/* What's on: date tile beside the title. */
.ut-pv-ov-event { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; margin: 0; padding: 0.75rem 0; border-top: 1px solid var(--ut-border); }
.ut-pv-ov-card .ut-pv-ov-h2 + .ut-pv-ov-event { border-top: 0; padding-top: 0; }
.ut-pv-ov-event .ut-pv-datetile { width: 3.25rem; }
.ut-ui :is(.ut-pv-org-overview, .ut-pv-property-overview) .ut-pv-ov-event h3 { margin: 0; font-size: 0.9375rem; line-height: 1.3; }
.ut-pv-ov-when { margin-top: 0.125rem; font-size: 0.8125rem; color: var(--ut-content-muted); }

/* The side cards are narrow: relation rows stack, and the sealed count puts
   its chip under the text instead of squeezing it into a third column. */
.ut-pv-ov-card .ut-ui-sealed { grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; padding: 0.75rem 1rem; }
.ut-pv-ov-card .ut-ui-sealed > .ut-ui-visibility-chip { grid-column: 2; justify-self: start; }
.ut-pv-ov-card .ut-pv-rrad { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
.ut-pv-ov-card .ut-pv-rowmarks { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
.ut-pv-ov-card .ut-pv-folk { grid-template-columns: minmax(0, 1fr); }

/* One column (tablet and phone): the mockup's order, not the columns'. */
@container utpv (max-width: 56rem) {
  .ut-pv-ov-grid { display: flex; flex-direction: column; align-items: stretch; gap: 2rem; }
  .ut-pv-ov-main, .ut-pv-ov-side { display: contents; }
  .ut-pv-ov-main > .ut-pv-ov-part + .ut-pv-ov-part { margin-top: 0; padding-top: 0; border-top: 0; }
  .ut-pv-ov-side > .ut-pv-ov-part + .ut-pv-ov-part { margin-top: 0; }
  .ut-pv-ov-o1 { order: 1; } .ut-pv-ov-o2 { order: 2; } .ut-pv-ov-o3 { order: 3; } .ut-pv-ov-o4 { order: 4; }
  .ut-pv-ov-o5 { order: 5; } .ut-pv-ov-o6 { order: 6; } .ut-pv-ov-o7 { order: 7; } .ut-pv-ov-o8 { order: 8; }
}
@container utpv (max-width: 40rem) {
  /* Logo beside the name, as in the mockup, rather than above it. */
  :is(.ut-pv-org-overview, .ut-pv-org-page, .ut-pv-property-page) .ut-ui-banner[data-ut-variant='identity'] { flex-wrap: wrap; align-items: center; }
  :is(.ut-pv-org-overview, .ut-pv-org-page, .ut-pv-property-page) .ut-ui-banner[data-ut-variant='identity'] .ut-ui-banner__body { flex: 1 1 10rem; }
  :is(.ut-pv-org-overview, .ut-pv-org-page, .ut-pv-property-page) .ut-ui-banner[data-ut-variant='identity'] .ut-ui-banner__body { grid-template-columns: minmax(0, 1fr); }
  :is(.ut-pv-org-overview, .ut-pv-org-page, .ut-pv-property-page) .ut-ui-banner[data-ut-variant='identity'] .ut-ui-banner__actions { grid-column: 1; grid-row: 3; }
  :is(.ut-pv-org-overview, .ut-pv-org-page, .ut-pv-property-page) .ut-ui-banner__actions { order: 4; flex-basis: 100%; }
  .ut-pv-joincell { flex: 1 1 auto; }
  .ut-pv-joincell .ut-pv-btn { flex: 1 1 auto; justify-content: center; }
  .ut-pv-ov-lead { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .ut-pv-ov-lead .ut-pv-ov-photo { aspect-ratio: 3 / 2; }
  .ut-pv-ov-stories { grid-template-columns: minmax(0, 1fr); gap: 0.875rem; }
  .ut-pv-ov-story:has(.ut-pv-ov-photo) { grid-template-columns: 6rem minmax(0, 1fr); gap: 0.75rem; }
  .ut-pv-ov-story .ut-pv-ov-photo { aspect-ratio: 1; }
}
@media (forced-colors: active) { .ut-pv-ov-note, .ut-pv-ov-card { border: 1px solid CanvasText; } }
@media print { .ut-pv-ov-bar { display: none; } }

/* --------------------------------------------------------------------------- *
 * Property units (0.116.0, rad 8a trinn 3e — the unit mockup's tab 4,
 * B-FP-475 pkt 8). The cards are ui-core's ItemCard / IconTile / StatusChip
 * (own sheets, handle `ut-ui-core-item-card`); this block only lays them out:
 * count + search, a grid of three / two / one, «Show 24 more» and the holder box.
 * --------------------------------------------------------------------------- */
.ut-ui.ut-pv-units-mine[hidden] { display: none; }
.ut-pv-units-mine[hidden] + * { margin-top: 0; }
.ut-pv-units { display: grid; gap: 1rem; min-width: 0; }
.ut-pv-units-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}
.ut-pv-units-count { margin: 0; color: var(--ut-content); }
.ut-pv-units-count .ut-ui-sys { margin-left: 0.5rem; }
.ut-pv-units-search { display: flex; flex: 0 1 24rem; gap: 0.5rem; min-width: 0; margin: 0; }
.ut-pv-units-search-field { display: block; flex: 1 1 auto; min-width: 0; }
.ut-ui .ut-pv-units-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ut-ui .ut-pv-units-grid > li { margin: 0; }
.ut-pv-units-desc {
  margin: 0;
  color: var(--ut-content-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}
.ut-pv-units-more { margin: 0; display: flex; justify-content: center; }
/* «Show 24 more» lands on the first new card (#ut-pv-unit-{n}); keep it clear of a sticky header. */
.ut-ui .ut-pv-units-grid > li { scroll-margin-top: 6rem; }
.ut-ui .ut-pv-units-grid > li:focus { outline: none; }
.ut-ui .ut-pv-units-grid > li:focus-visible { outline: var(--ut-focus-ring-width, 2px) solid var(--ut-focus-ring-color, var(--ut-selected)); outline-offset: var(--ut-focus-ring-offset, 2px); }
/* «Your units here»: a tinted box above the list (tab 4). */
.ut-pv-units-minebox {
  padding: 1rem 1.125rem;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-card);
  background: var(--ut-info-surface);
}
.ut-ui .ut-pv-units-minetitle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 1rem;
  line-height: 1.3;
}
.ut-ui .ut-pv-units-minerows { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.ut-ui .ut-pv-units-minerows > li { margin: 0; }
.ut-pv-units-minemore,
.ut-pv-units-minenote { margin: 0.625rem 0 0; color: var(--ut-content-muted); font-size: 0.8125rem; }
.ut-ui .ut-pv-units-minemore[hidden] { display: none; }
@container utpv (max-width: 56rem) {
  .ut-ui .ut-pv-units-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container utpv (max-width: 36rem) {
  .ut-ui .ut-pv-units-grid { grid-template-columns: minmax(0, 1fr); }
  .ut-pv-units-search { flex-basis: 100%; }
}

/* B-FP-497: same shared presentation frame, main column first on phones. */
.ut-ui .ut-pv-property-page .ut-pv-factline { margin: 0; }
.ut-pv-property-overview > .ut-pv-ov-bar { flex-wrap: wrap; overflow: visible; margin: 1.25rem 0; padding-bottom: 1.25rem; }
.ut-pv-property-picture { margin: 0 0 2.25rem; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--ut-radius-card); background: var(--ut-hover-surface); }
.ut-pv-property-picture img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ut-pv-property-overview a { color: var(--ut-link); }
.ut-pv-property-overview a:focus-visible, .ut-pv-property-overview summary:focus-visible { outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color); outline-offset: var(--ut-focus-ring-offset); }
.ut-pv-property-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.ut-pv-property-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ut-pv-property-logo { flex: none; width: 40px; height: 40px; object-fit: contain; }
.ut-ui .ut-pv-property-overview .ut-pv-ov-h2 { margin: 0 0 0.875rem; font-size: 1.3125rem; font-weight: 700; color: var(--ut-content); }
.ut-ui .ut-pv-property-overview .ut-pv-ov-side .ut-pv-ov-h2 { font-size: 1.0625rem; }
.ut-pv-property-overview .ut-pv-ov-more { margin-top: 0.875rem; }
.ut-pv-property-overview .ut-pv-ov-main, .ut-pv-property-overview .ut-pv-ov-side { display: block; }
.ut-pv-property-overview .ut-pv-ov-main > #connections { padding: 0; border: 0; background: transparent; }
@media (min-width: 1000px) {
  .ut-pv-property-overview .ut-pv-ov-grid:not(.is-single) { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2rem; }
}
@media (max-width: 900px) {
  .ut-pv-property-overview .ut-pv-ov-main, .ut-pv-property-overview .ut-pv-ov-side { display: block; }
  .ut-pv-property-overview .ut-pv-ov-main > .ut-pv-ov-part + .ut-pv-ov-part { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--ut-border); }
  .ut-pv-property-overview .ut-pv-ov-side > .ut-pv-ov-part + .ut-pv-ov-part { margin-top: 1.5rem; }
}
@media (max-width: 440px) {
  .ut-pv-property-counts { grid-template-columns: minmax(0, 1fr); }
}