/* ==========================================================================
   Vendor profile page
   Loads after vendor_directory.css and reuses its tokens and .v-btn buttons.
   ========================================================================== */

/* ---------- Hero ---------- */
.vp-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    margin-top: 80px;
    padding-top: var(--v-header-clear);
    overflow: hidden;
    background: linear-gradient(155deg, var(--v-ink-lift) 0%, var(--v-ink) 78%);
}

.vp-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}

.vp-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--v-ink) 8%, rgba(4, 4, 6, 0.55) 55%, rgba(4, 4, 6, 0.15) 100%);
}

.vp-hero--photo .vp-hero__scrim {
    background: linear-gradient(to top, var(--v-ink) 4%, rgba(4, 4, 6, 0.72) 45%, rgba(4, 4, 6, 0.25) 100%);
}

.vp-hero__watermark {
    position: absolute;
    right: -0.15em;
    bottom: -0.2em;
    font-size: 13rem;
    line-height: 1;
    opacity: 0.07;
    pointer-events: none;
}

/* The back link rides at the top of the hero; the name block stays pinned to
   the bottom via margin-top, which holds even when there is no top row. */
.vp-hero__top {
    position: relative;
    z-index: 1;
}

.vp-hero__content {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: 1.25rem;
    padding-bottom: 1.75rem;
}

.vp-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    min-height: 36px;
    padding: 0 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

.vp-hero__back:hover,
.vp-hero__back:focus {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.vp-hero__medallion {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: 0.875rem;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85);
    background: var(--v-sand);
    color: var(--v-ink);
    font-size: 1.625rem;
    font-weight: 700;
    text-transform: uppercase;
}

.vp-hero__medallion img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vp-hero__title {
    margin: 0 0 0.4rem;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
}

.vp-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.vp-hero__place {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
}

.vp-hero__place i {
    color: var(--v-saffron);
}

.vp-hero__back-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vp-hero__trading {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
}

/* Reads as one line on wide screens: "Somnath - Trading name" */
.vp-hero__trading::before {
    content: "· ";
}

/* ---------- Phones: centred identity, location in the corner ----------
   The city is one short fact and belongs in the top-right utility slot beside
   the back link. The trading name runs to 41 characters on most vendors, so it
   stays under the title rather than following the city into the corner. */
@media (max-width: 767.98px) {
    .vp-hero__content {
        /* static so the location anchors to the hero, not to this block.
           It is a flex item, so z-index still applies without positioning. */
        position: static;
        text-align: center;
    }

    .vp-hero__medallion {
        margin-right: auto;
        margin-left: auto;
    }

    .vp-hero__meta {
        justify-content: center;
    }

    .vp-hero__place {
        position: absolute;
        top: var(--v-header-clear);
        right: 12px;
        min-height: 36px;
        margin: 0;
    }

    .vp-hero__trading::before {
        content: none;
    }

    /* Keep a long category name clear of the corner slot */
    .vp-hero__back {
        max-width: 62%;
    }
}

/* ---------- Body ---------- */
.vp-body {
    padding-bottom: 3rem;
    background: var(--v-sand);
}

/* ---------- Decision card ---------- */
.vp-card {
    position: relative;
    margin-top: -1.5rem;
    padding: 1.25rem 1.125rem 1.125rem;
    background: #fff;
    border-radius: var(--v-radius-card);
    box-shadow: var(--v-shadow);
}

.vp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.vp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.4375rem 0.8125rem;
    border-radius: 999px;
    background: var(--v-sand);
    color: var(--v-slate);
    font-size: 0.8125rem;
    font-weight: 600;
}

.vp-chip strong {
    color: var(--v-ink);
    font-weight: 700;
}

.vp-chip i {
    opacity: 0.75;
}

.vp-chip--rating {
    background: rgba(255, 159, 28, 0.14);
}

.vp-chip--rating i {
    color: var(--v-saffron-deep);
    opacity: 1;
}

.vp-chip__state {
    display: inline-flex;
    align-items: center;
    margin-left: 0.125rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--v-line);
    font-weight: 700;
}

.vp-chip__state::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 0.3125rem;
    border-radius: 50%;
    background: currentColor;
}

.vp-chip--open .vp-chip__state {
    color: var(--v-open);
}

.vp-chip--closed .vp-chip__state {
    color: var(--v-slate);
    opacity: 0.75;
}

.vp-lede {
    margin: 0 0 1rem;
    color: var(--v-slate);
    font-size: 1rem;
    line-height: 1.6;
}

/* ---------- Fact tiles ---------- */
/* Flex rather than an auto-fit grid: a grid track cannot collapse while another
   row still uses it, so a third tile sat at half width with a gap beside it.
   Flex grows whatever lands on the last row to fill it. */
.vp-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.vp-tile {
    flex: 1 1 140px;
    min-width: 0;
    overflow-wrap: anywhere;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    padding: 0.75rem 0.875rem;
    background: var(--v-sand);
    border-radius: 12px;
}

.vp-tile__label {
    color: var(--v-slate);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.8;
}

/* No clamp: this is the detail page, so every value shows in full. */
.vp-tile__value {
    color: var(--v-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.vp-tile__value--accent {
    color: var(--v-saffron-deep);
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
}

.vp-tile__sub {
    color: var(--v-slate);
    font-size: 0.75rem;
    line-height: 1.35;
}

/* A half tile fits roughly 15 characters per line on a 375px screen, so a long
   value would stack four lines deep beside a nearly empty neighbour. Flagged
   tiles take the full row instead - two comfortable lines rather than four. */
@media (max-width: 575.98px) {
    .vp-tile--wide {
        flex-basis: 100%;
    }
}

/* ---------- Actions ---------- */
/* Phones: Call + WhatsApp share a row, the primary CTA gets its own full-width
   row so a long label like "Reserve a vehicle" cannot overflow at 360px. */
.vp-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: stretch;
    gap: 0.5rem;
}

.vp-actions .v-btn--primary,
.vp-actions__solo {
    grid-column: 1 / -1;
}

.vp-actions__note {
    margin: 0.75rem 0 0;
    color: var(--v-slate);
    font-size: 0.75rem;
    line-height: 1.5;
    opacity: 0.85;
}

/* ---------- Content blocks ---------- */
.vp-grid {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.vp-block {
    padding: 1.25rem 1.125rem;
    background: #fff;
    border-radius: var(--v-radius-card);
    box-shadow: var(--v-shadow);
}

.vp-main .vp-block,
.vp-side .vp-block {
    margin-bottom: 1rem;
}

.vp-main .vp-block:last-child,
.vp-side .vp-block:last-child {
    margin-bottom: 0;
}

.vp-block--flush {
    padding: 1.25rem 0 0;
    overflow: hidden;
}

.vp-block__title {
    margin: 0 0 0.75rem;
    color: var(--v-ink);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.vp-block__title--inset {
    padding: 0 1.125rem;
}

.vp-block__subtitle {
    margin: 1rem 0 0.375rem;
    color: var(--v-ink);
    font-size: 0.875rem;
    font-weight: 700;
}

.vp-prose {
    color: var(--v-slate);
    font-size: 0.9375rem;
    line-height: 1.7;
}

.vp-prose p {
    margin-bottom: 0.75rem;
}

.vp-prose p:last-child {
    margin-bottom: 0;
}

.vp-prose--small {
    font-size: 0.8125rem;
    line-height: 1.6;
}

/* Services */
.vp-services {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.vp-services li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--v-ink);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
}

.vp-services li i {
    flex: 0 0 auto;
    margin-top: 0.2rem;
    color: var(--v-saffron-deep);
    font-size: 0.6875rem;
}

/* Fact lists */
.vp-facts {
    margin: 0;
}

.vp-facts__row {
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--v-line);
}

.vp-facts__row:first-child {
    padding-top: 0;
}

.vp-facts__row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.vp-facts dt {
    margin-bottom: 0.125rem;
    color: var(--v-slate);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.8;
}

.vp-facts dd {
    margin: 0;
    color: var(--v-ink);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
}

/* Contact links */
.vp-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--v-line);
}

.vp-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 44px;
    color: var(--v-ink);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.vp-link i {
    flex: 0 0 1rem;
    color: var(--v-saffron-deep);
    font-size: 0.8125rem;
}

.vp-link:hover,
.vp-link:focus {
    color: var(--v-saffron-deep);
}

/* Gallery */
.vp-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
}

.vp-gallery__item {
    position: relative;
    display: block;
    text-decoration: none;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
}

.vp-gallery__item img,
.vp-gallery__item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vp-gallery__item--video {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v-ink);
}

.vp-gallery__item--video a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

.vp-gallery__item--video i {
    color: var(--v-saffron);
    font-size: 1.75rem;
}

/* Map */
.vp-map {
    aspect-ratio: 4 / 3;
}

.vp-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Related */
.vp-related {
    margin-top: 2rem;
}

.vp-related .vp-block__title {
    margin-bottom: 1rem;
}

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
    .vp-hero {
        min-height: 380px;
    }

    .vp-hero__title {
        font-size: 3rem;
    }

    .vp-hero__meta {
        font-size: 1rem;
    }

    .vp-hero__medallion {
        width: 96px;
        height: 96px;
    }

    .vp-hero__content {
        padding-bottom: 2.25rem;
    }

    .vp-card {
        margin-top: -2rem;
        padding: 1.75rem;
        border-radius: 20px;
    }

    .vp-lede {
        font-size: 1.0625rem;
        max-width: 62ch;
    }

    .vp-actions {
        grid-template-columns: auto auto minmax(0, 1fr);
        max-width: 480px;
    }

    .vp-actions .v-btn--primary {
        grid-column: auto;
    }

    .vp-actions__solo {
        grid-column: 1 / -1;
    }

    .vp-block {
        padding: 1.5rem;
    }

    .vp-block--flush {
        padding: 1.5rem 0 0;
    }

    .vp-block__title--inset {
        padding: 0 1.5rem;
    }

    .vp-body {
        padding-bottom: 4rem;
    }
}

/* ---------- Desktop ---------- */
@media (min-width: 992px) {
    .vp-hero {
        min-height: 440px;
    }

    .vp-hero__title {
        font-size: 3.5rem;
    }

    .vp-grid {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
        gap: 1.5rem;
        margin-top: 1.5rem;
    }

    .vp-side {
        position: sticky;
        top: 100px;
        align-self: start;
    }

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

@media (prefers-reduced-motion: reduce) {
    .vp-hero__back,
    .vp-link {
        transition: none;
    }
}