/* The layout's <main> is already the site's 850px column and this page lives inside
   it, so there is no container of its own here and no second <main>. One column
   rather than a sidebar: at 850px a 320px aside leaves 500px for the content, and
   the search-result cards at the bottom do not fit in 500px. */
.vp {
    display: flex;
    flex-direction: column;
    gap: 34px;
    width: 100%;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.vp-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--foreground-tertiary);
}

.vp-crumbs a {
    color: var(--foreground-secondary);
    text-decoration: none;
    font-weight: 500;
}

.vp-crumbs a:hover { text-decoration: underline; }
.vp-crumbs span[aria-hidden] { color: var(--foreground-tertiary); }

/* --------------------------------------------------------------------------
   Cards and section headings
   -------------------------------------------------------------------------- */
.vp-card {
    background-color: var(--white);
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.vp-section__title {
    margin: 0 0 14px;
    font-size: 19px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--foreground-primary);
}

.vp-body {
    padding: 25px;
}

.vp-body p {
    margin: 0;
    font-size: 16px;
    line-height: 27px;
    color: var(--foreground-secondary);
}

.vp-note {
    margin-top: 14px;
    font-size: 13px;
    line-height: 20px;
    color: var(--foreground-tertiary);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.vp-head__body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 25px 25px 0;
}

/* Same recipe as .workshop-card__workshop img, one size up: the real favicon or
   the partner's approved logo, on white so a dark mark stays legible. */
.vp-head__logo {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background-color: #ffffff;
    padding: 4px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-sizing: content-box;
    flex-shrink: 0;
}

.vp-head__text { min-width: 0; }

.vp-head h1 {
    margin: 0;
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: 0.1px;
    color: var(--foreground-primary);
}

.vp-head__address {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 23px;
    color: var(--foreground-secondary);
}

.vp-head__meta {
    display: flex;
    align-items: center;
    gap: 8px 14px;
    flex-wrap: wrap;
    padding: 14px 25px 25px;
}

/* --------------------------------------------------------------------------
   Pills. Same grammar as .workshop-card__badge.
   -------------------------------------------------------------------------- */
.vp-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: rgba(17, 144, 74, 0.1);
    color: var(--action-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.vp-pill svg { width: 11px; height: 11px; }

.vp-pill--closed {
    background-color: rgba(231, 76, 60, 0.1);
    color: #a03227;
}

.vp-pill--muted {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--foreground-tertiary);
}

/* --------------------------------------------------------------------------
   Rating. Stars are drawn once and clipped, so 4.3 reads as 4.3 rather than
   rounding to a whole star.
   -------------------------------------------------------------------------- */
.vp-rating {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--foreground-tertiary);
}

.vp-rating__value {
    font-size: 15px;
    font-weight: 700;
    color: var(--foreground-primary);
}

.vp-rating a { color: var(--foreground-tertiary); }

.vp-stars {
    position: relative;
    display: inline-block;
    line-height: 0;
    flex-shrink: 0;
}

.vp-stars__track,
.vp-stars__fill { display: flex; gap: 2px; }

.vp-stars__fill {
    position: absolute;
    inset: 0;
    overflow: hidden;
    white-space: nowrap;
}

.vp-stars svg { width: 14px; height: 14px; flex-shrink: 0; }
.vp-stars__track svg { color: rgba(0, 0, 0, 0.16); }
.vp-stars__fill svg { color: #f5a623; }

/* --------------------------------------------------------------------------
   Price panel. One figure, one comparison sentence. No bar chart: a visitor
   choosing a workshop wants to know whether this price is fair for where they
   are, not where it sits against the most expensive workshop in the country.
   -------------------------------------------------------------------------- */
.vp-price {
    padding: 25px 25px 20px;
}

.vp-price__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--foreground-tertiary);
}

.vp-price__value {
    margin-top: 2px;
    font-size: 36px;
    line-height: 44px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--foreground-primary);
    font-variant-numeric: tabular-nums;
}

.vp-price__value span {
    font-size: 19px;
    font-weight: 600;
    color: var(--foreground-secondary);
    letter-spacing: 0;
}

.vp-price__context {
    margin: 6px 0 0;
    /* Held to a readable measure: at 830px the sentence would otherwise run the
       full width of the card under a single number. */
    max-width: 56ch;
    font-size: 14px;
    line-height: 21px;
    color: var(--foreground-secondary);
}

.vp-price__extra {
    margin-top: 10px;
    font-size: 13px;
    color: var(--foreground-tertiary);
}

/* --------------------------------------------------------------------------
   Buttons. Mirrors .workshop-card__button so the CTA here and on the card that
   led here are the same object.
   -------------------------------------------------------------------------- */
/* Its own strip under the price, the same shape as .workshop-card's action row.
   Three buttons do not fit beside a price inside 830px. */
.vp-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    padding: 18px 25px 25px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: var(--background-primary);
}

.vp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 13px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.12s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

/* Both dimensions, not "width: auto". These icons are <use> references whose
   viewBox lives on the <symbol>, so the outer <svg> has no intrinsic ratio and
   auto resolves to the 300px default; preserveAspectRatio keeps the non-square
   glyphs undistorted inside the square box. */
.vp-btn svg { width: 14px; height: 14px; }

.vp-btn--primary {
    background-color: var(--action-primary);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.05));
    color: var(--white);
    box-shadow: 0 2px 6px rgba(17, 144, 74, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.vp-btn--primary:hover {
    background-color: #0e7c3f;
    box-shadow: 0 4px 12px rgba(17, 144, 74, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.vp-btn--primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(17, 144, 74, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.vp-btn--ghost {
    background-color: #fff;
    color: var(--foreground-primary);
    border: 1px solid rgba(0, 0, 0, 0.14);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.vp-btn--ghost svg { color: var(--action-primary); }

.vp-btn--ghost:hover {
    border-color: var(--action-primary);
    color: var(--action-primary);
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Contact rows
   -------------------------------------------------------------------------- */
.vp-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    background: var(--white);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Separators are drawn by each cell rather than by a gap over a grey background:
   the number of facts we hold varies, and a gap shows the background through as a
   grey hole whenever the last row is not full. Box shadows draw the lines without
   taking part in the layout, and the card's overflow clips the outer ones — which is
   why .vp-facts carries no vertical padding: any would hold the last row off the card
   edge and leave its separator line stranded above a strip of white. */
.vp-fact {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 25px;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.06), 0 1px 0 rgba(0, 0, 0, 0.06);
    font-size: 14px;
    line-height: 21px;
    color: var(--foreground-secondary);
}

.vp-fact svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--action-primary);
}

.vp-fact a { color: var(--foreground-secondary); text-decoration: none; }
.vp-fact a:hover { color: var(--action-primary); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Opening hours
   -------------------------------------------------------------------------- */
.vp-hours {
    display: flex;
    flex-direction: column;
}

.vp-hours__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 25px;
    font-size: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.vp-hours__row:first-child { padding-top: 25px; }
.vp-hours__row:last-child { padding-bottom: 25px; border-bottom: none; }

.vp-hours__row--today { background: rgba(17, 144, 74, 0.05); }
.vp-hours__row--today .vp-hours__day { color: var(--foreground-primary); font-weight: 700; }

.vp-hours__day {
    color: var(--foreground-secondary);
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.vp-hours__today {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--action-primary);
}

.vp-hours__time {
    font-weight: 600;
    color: var(--foreground-primary);
    font-variant-numeric: tabular-nums;
}

.vp-hours__time--off {
    font-weight: 500;
    color: var(--foreground-tertiary);
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */
.vp-svc-group {
    padding: 20px 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.vp-svc-group:first-child { padding-top: 25px; }
.vp-svc-group:last-child { padding-bottom: 25px; border-bottom: none; }

.vp-svc-group__title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--foreground-tertiary);
}

.vp-svc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 7px 20px;
}

.vp-svc {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    line-height: 22px;
    color: var(--foreground-secondary);
}

.vp-svc svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--action-primary);
}

.vp-svc--priced {
    color: var(--foreground-primary);
    font-weight: 600;
}

.vp-svc__price {
    margin-left: auto;
    flex-shrink: 0;
    padding: 1px 9px;
    border-radius: 999px;
    background: rgba(17, 144, 74, 0.1);
    color: var(--action-primary);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Company information
   -------------------------------------------------------------------------- */
/* Rows rather than tiles: the number of facts we hold varies between three and six,
   and a tile grid leaves visible holes whenever the count does not fill the last
   row. Same shape as the opening hours above it. */
.vp-registry {
    display: flex;
    flex-direction: column;
}

/* Two columns shared across every row, so the values line up. Pushing label and
   value to opposite edges of an 830px card leaves far too much white space to read
   across for one short fact. Subgrid sizes the label column to the longest label
   instead of a guessed width; where it is unsupported each row falls back to the
   fixed width below, which fits "ORGANISASJONSNUMMER". */
.vp-registry__item {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: baseline;
    gap: 4px 22px;
    padding: 14px 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.vp-registry__item:first-child { padding-top: 25px; }
.vp-registry__item:last-child { padding-bottom: 25px; border-bottom: none; }

@supports (grid-template-columns: subgrid) {
    .vp-registry {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
    }

    .vp-registry__item {
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
    }
}


.vp-registry__label {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--foreground-tertiary);
}

.vp-registry__value {
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--foreground-primary);
}

.vp-registry__value a { text-decoration: none; }
.vp-registry__value a:hover { text-decoration: underline; }

.vp-registry__sub {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--foreground-tertiary);
}

/* --------------------------------------------------------------------------
   Map card. Fixed height so the still image and the live map occupy the same
   box and swapping one for the other does not move the page.
   -------------------------------------------------------------------------- */
.vp-map {
    height: 260px;
    background-color: #eef0e9;
}

/* --------------------------------------------------------------------------
   FAQ. Same row rhythm as the registry block, but a stacked question/answer
   rather than a two-column label/value: the answers run to a full sentence.
   -------------------------------------------------------------------------- */
.vp-faq__item {
    padding: 16px 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.vp-faq__item:first-child { padding-top: 25px; }
.vp-faq__item:last-child { padding-bottom: 25px; border-bottom: none; }

.vp-faq__q {
    margin: 0 0 4px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--foreground-primary);
}

.vp-faq__a {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--foreground-secondary);
}

/* --------------------------------------------------------------------------
   Nearby. The cards are the search-result card, at its own max-width, so the
   list has to stop constraining them.
   -------------------------------------------------------------------------- */
.vp-nearby .workshop-card {
    max-width: none;
    margin: 0 0 12px;
}

.vp-nearby .workshop-card:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
    .vp { gap: 26px; }

    .vp-head h1 { font-size: 23px; line-height: 31px; }

    .vp-head__body,
    .vp-body,
    .vp-svc-group,
    .vp-price,
    .vp-actions { padding-left: 18px; padding-right: 18px; }

    .vp-head__meta { padding-left: 18px; padding-right: 18px; }

    .vp-hours__row,
    .vp-fact,
    .vp-faq__item,
    .vp-registry__item { padding-left: 18px; padding-right: 18px; }

    .vp-registry__item { grid-template-columns: minmax(0, 1fr); }

    .vp-hours__row:first-child,
    .vp-svc-group:first-child,
    .vp-fact:first-child,
    .vp-registry__item:first-child { padding-top: 20px; }

    .vp-hours__row:last-child,
    .vp-svc-group:last-child,
    .vp-fact:last-child,
    .vp-registry__item:last-child { padding-bottom: 20px; }

    /* Full-width buttons on a phone: three of them side by side leaves each too
       narrow to read. */
    .vp-actions { width: 100%; }
    .vp-actions .vp-btn { flex: 1 1 calc(50% - 4px); }
    .vp-actions .vp-btn--primary { flex-basis: 100%; }

    .vp-svc-list { grid-template-columns: 1fr; }

    .vp-price__value { font-size: 32px; line-height: 40px; }
}