/* ==========================================================================
   TenderMitra — Services list + Service detail
   Loads on top of modern.css, which supplies the fonts, tokens, buttons,
   mesh, cards, steps and reveal. Only page-specific components live here.
   Scoped to .tm-services / .tm-service or prefixed .sv-*.
   ========================================================================== */

/* ==========================================================================
   PAGE HERO — shared by both pages
   ========================================================================== */

/* Shell and atmosphere come from modern.css; only the padding is local */
.sv-hero {
    padding-top: clamp(3rem, 2rem + 4vw, 5rem);
    padding-bottom: clamp(3rem, 2rem + 3.5vw, 4.5rem);
}

.sv-hero > .hm-wrap { position: relative; z-index: 1; }

.sv-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    font-size: .8125rem;
    /* Sits on the coloured field, so one step darker than body muted */
    color: var(--s-ink-2);
}

.sv-crumbs--center { justify-content: center; }
.sv-crumbs a { color: var(--s-ink-2); text-decoration: none; transition: color .2s var(--tm-ease); }
.sv-crumbs a:hover { color: var(--s-ink); }
.sv-crumbs li + li::before { content: "/"; margin-right: .45rem; color: var(--s-line-2); }
.sv-crumbs [aria-current="page"] { color: var(--s-ink); }

/* Truncate a long service name in the breadcrumb rather than wrapping it */
.sv-crumbs .sv-crumb-now {
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   SERVICES HERO — two-column, mirroring the home hero
   ========================================================================== */

.sv-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 1.5rem + 3vw, 4rem);
    align-items: center;
}

@media (max-width: 991.98px) {
    .sv-hero-grid { grid-template-columns: 1fr; }
    .sv-hero-grid .hm-hero-cta,
    .sv-hero-grid .hm-trust { justify-content: flex-start; }
}

/* Left column reads left-aligned rather than centred */
.sv-hero-grid .hm-hero-cta { justify-content: flex-start; }
.sv-hero-grid .hm-trust { justify-content: flex-start; }

/* Row icon inside the "most requested" panel */
.sv-krow-ico {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 10px;
    font-size: .8rem;
    color: var(--s-orange-d);
    background: var(--t-cream);
}

/* Explicit rule for each emitted variant, so no class in the markup is dead */
.sv-krow-ico--1 { color: var(--s-orange-d); background: var(--t-cream); }
.sv-krow-ico--2 { color: var(--s-indigo-d); background: var(--t-lilac); }
.sv-krow-ico--3 { color: var(--s-teal); background: var(--t-mint); }
.sv-krow-ico--4 { color: var(--s-rose-d); background: var(--t-blush); }

/* Whole row is a link */
a.hm-krow {
    text-decoration: none;
    border-radius: 10px;
    margin-inline: -.5rem;
    padding-inline: .5rem;
    transition: background-color .2s var(--tm-ease);
}

a.hm-krow:hover { background: var(--s-off); }

a.hm-krow .hm-krow-label { color: var(--s-ink); font-weight: 600; }

a.hm-krow .sv-krow-go { color: var(--s-ink-3); font-size: .8rem; transition: transform .22s var(--tm-ease), color .2s var(--tm-ease); }
a.hm-krow:hover .sv-krow-go { transform: translateX(3px); color: var(--s-orange); }

/* ==========================================================================
   SERVICES LIST — count chip
   ========================================================================== */

.sv-listbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

/* ==========================================================================
   SERVICE DETAIL — two-column body
   ========================================================================== */

.sv-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: clamp(2rem, 1.5rem + 3vw, 4rem);
    align-items: start;
}

@media (max-width: 991.98px) { .sv-layout { grid-template-columns: 1fr; } }

.sv-aside { position: sticky; top: calc(var(--tm-header-h) + 1.5rem); display: grid; gap: 1rem; }

@media (max-width: 991.98px) { .sv-aside { position: static; } }

.sv-card {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--s-line);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgb(11 18 32 / .03);
}

.sv-card--tint { background: var(--t-cream); border-color: transparent; }

.sv-card-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--s-ink);
    margin: 0 0 .5rem;
}

.sv-card-text { font-size: .8438rem; line-height: 1.65; color: var(--s-ink-2); margin: 0 0 1.25rem; }

.sv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }

.sv-list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .8438rem;
    line-height: 1.5;
    color: var(--s-ink-2);
}

.sv-list i { color: var(--s-orange); font-size: .9em; margin-top: .15rem; flex: 0 0 auto; }

.sv-contact { display: grid; gap: .6rem; }

.sv-contact a {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .8438rem;
    font-weight: 500;
    color: var(--s-ink-2);
    text-decoration: none;
    transition: color .2s var(--tm-ease);
}

.sv-contact a:hover { color: var(--s-ink); }
.sv-contact i { color: var(--s-orange); }

/* Hero image plate for the detail page */
.sv-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin-bottom: 2.25rem;
    border-radius: 20px;
    background: var(--t-cream);
}

.sv-plate img {
    max-width: 100%;
    max-height: 260px;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* ==========================================================================
   NEXT / BACK NAV
   ========================================================================== */

.sv-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--s-line);
}

/* ==========================================================================
   CTA
   ========================================================================== */

.sv-cta { padding-block: clamp(4rem, 3rem + 5vw, 7rem); }

.sv-cta > .hm-wrap { position: relative; z-index: 1; }