/* =========================================================================
   23_services_browser.css
   OWNS: the Services section -- the side-panel preview list
   (.cp-services-preview) and the main-column browser (.cp-services): its
   search/back bar, category cards, the list bar with its grid/rows view
   toggle, and the service cards in both views.

   DO NOT PUT HERE: the pane switcher, the View link or the branch/about
   cards (22_main_column_switch.css owns those), and nothing belonging to
   the Store page's own category browser -- that is
   15_category_browser.css and a different surface.

   PAGE-SCOPED through 'pageStyles', never the global list.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Side-panel preview
   ------------------------------------------------------------------------- */

.cp-services-preview {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-services-preview__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--cp-surface-muted, #F1F5F9);
}

.cp-services-preview__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.cp-services-preview__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--cp-heading);
    font-size: .8125rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-services-preview__count {
    flex: 0 0 auto;
    color: var(--cp-text-faint);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.cp-services-preview__summary {
    margin: 10px 0 0;
    color: var(--cp-text-faint);
    font-size: .75rem;
}

/* -------------------------------------------------------------------------
   Main column -- the bar
   ------------------------------------------------------------------------- */

.cp-services {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Back sits BESIDE the pill rather than above it, so the row does not
   change height when it appears and the content below never jumps. */
.cp-services__bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cp-services__back {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--cp-border);
    border-radius: 999px;
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-card);
    color: var(--cp-heading);
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.cp-services__back:hover {
    border-color: var(--cp-primary, #137A5A);
    color: var(--cp-primary, #137A5A);
}

.cp-services__search {
    flex: 1 1 auto;
    min-width: 0;
}

.cp-services__search-input {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--cp-border);
    border-radius: 999px;
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-card);
    color: var(--cp-text);
    font: inherit;
    font-size: .875rem;
}

.cp-services__search-input::placeholder {
    color: var(--cp-text-faint);
}

.cp-services__search-input:focus {
    border-color: var(--cp-primary, #137A5A);
    outline: none;
}

.cp-services__heading {
    margin: 0;
    color: var(--cp-heading);
    font-size: 16px;
    font-weight: 800;
}

.cp-services__empty {
    margin: 0;
    color: var(--cp-text-faint);
}

/* -------------------------------------------------------------------------
   Category cards
   ------------------------------------------------------------------------- */

/* Two per row, at every width the main column ever has. Not auto-fill:
   the number of columns is the decision here, and auto-fill would quietly
   make it three on a wide screen and one on a narrow one. */
.cp-services__categories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* Picture on top, words under it -- a post's own order, so a category
   card and a service card read as the same object at different sizes.
   No padding on the card itself: the art goes edge to edge and the body
   supplies its own. */
.cp-services__category {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-card);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease;
}

.cp-services__category:hover {
    border-color: var(--cp-primary, #137A5A);
}

/* A picture fills the band. An ICON is a small mark on a transparent
   ground -- stretched to fill it would be a blurry smear -- so the
   fallback keeps it small and centred on the band's own tint instead. */
/* min-height:0 and an absolutely positioned image, both load-bearing.
   A flex item defaults to min-height:auto, which floors it at its
   content's height -- so a tall photograph made the band as tall as the
   photograph and aspect-ratio never applied. Measured: bands came out at
   1.19, 1.57 and 1.78 across one row of cards that all declared 16/9.
   Taking the image out of flow means nothing inside can push the band
   around, and every card in a row gets the same picture height. */
.cp-services__category-art {
    position: relative;
    display: block;
    min-height: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--cp-surface-muted, #F1F5F9);
}

.cp-services__category-art img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cp-services__category-art--icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The icon is centred rather than filling, so it goes back into flow --
   inset:0 above would stretch a small mark across the whole band. */
.cp-services__category-art--icon img {
    position: static;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.cp-services__category-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px 14px;
}

.cp-services__category-name {
    color: var(--cp-heading);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Two lines, then an ellipsis: a long description must not make one card
   in a row twice the height of the one beside it. */
.cp-services__category-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--cp-text-faint);
    font-size: .8125rem;
    line-height: 1.45;
}

.cp-services__category-count {
    margin-top: auto;
    padding-top: 6px;
    color: var(--cp-text-faint);
    font-size: .75rem;
}

/* -------------------------------------------------------------------------
   Service rows
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   List bar: heading on the left, the view toggle on the right
   ------------------------------------------------------------------------- */

.cp-services__list-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cp-services__view {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
}

/* Bare glyphs, no box: the active one is in the company's colour, the
   other faint. 40px of target around a 22px glyph. */
.cp-services__view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cp-text-faint);
    cursor: pointer;
}

.cp-services__view-btn svg {
    fill: currentColor;
}

.cp-services__view-btn[aria-pressed="true"] {
    color: var(--cp-primary, #137A5A);
}

.cp-services__view-btn:focus-visible {
    outline: 2px solid var(--cp-primary, #137A5A);
    outline-offset: 2px;
    border-radius: 8px;
}

/* -------------------------------------------------------------------------
   Service list: two views over the same rows
   ----------------------------------------------------------------------
   grid  two cards per row at every width, like the categories: picture
         on top, words under it. The default.
   rows  one per line: a square thumbnail on the left, the words on the
         right. For a reader who wants to scan names and prices.

   The list used to be one full-width post card per service, with a
   picture up to 420px tall; six services were a long scroll before the
   list was in view, which is why the view is now a choice.
   ------------------------------------------------------------------------- */

.cp-services__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-services__list--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cp-services__list--rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* The script hides non-matching rows with the hidden property; a flex or
   grid item's display would otherwise beat the UA default. */
.cp-services__row[hidden] {
    display: none;
}

/* Same chrome as .cp-post (08_content.css) for the same reason the branch
   cards use it -- one card shape down the whole main column. */
/* An <a> now, so it needs a link's defaults undone. */
.cp-services__card {
    display: flex;
    height: 100%;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-card);
    cursor: pointer;
    transition: border-color .15s ease;
}

.cp-services__list--grid .cp-services__card {
    flex-direction: column;
}

.cp-services__card:hover {
    border-color: var(--cp-primary, #137A5A);
}

.cp-services__card-media {
    display: block;
    flex: 0 0 auto;
    overflow: hidden;
    background: var(--cp-surface-muted, #F1F5F9);
}

.cp-services__card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A 4:3 picture across the top of a grid card. */
.cp-services__list--grid .cp-services__card-media {
    aspect-ratio: 4 / 3;
}

/* A square thumbnail down the left of a row, stretching with the words
   beside it so the picture always fills its column. */
.cp-services__list--rows .cp-services__card-media {
    flex-basis: 96px;
    width: 96px;
    min-height: 96px;
    align-self: stretch;
}

.cp-services__card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px 12px;
}

.cp-services__list--rows .cp-services__card-body {
    padding: 10px 12px 10px 14px;
}

.cp-services__row-category {
    color: var(--cp-text-faint);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Two lines, then an ellipsis, so one long name cannot make its card
   twice the height of the one beside it. */
.cp-services__row-name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--cp-heading);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

/* Two lines here; the whole thing is on the service's own page once it
   is opened. */
.cp-services__card-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--cp-text);
    font-size: .8125rem;
    line-height: 1.45;
}

.cp-services__card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 6px;
}

/* A grid card is all target and too narrow for a chip beside a price:
   the price alone, and the card itself is the way in. */
.cp-services__list--grid .cp-services__card-action {
    display: none;
}

/* Pushed to the right on its own when there is no price beside it. */
.cp-services__card-foot > .cp-services__card-action:only-child {
    margin-left: auto;
}

.cp-services__row-price {
    color: var(--cp-primary, #137A5A);
    font-size: .9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* A span inside the card's own link -- it is the card's affordance, not
   a second target. */
.cp-services__card-action {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid var(--cp-border);
    border-radius: 999px;
    color: var(--cp-primary, #137A5A);
    font-size: .75rem;
    font-weight: 600;
}

.cp-services__card:hover .cp-services__card-action {
    border-color: var(--cp-primary, #137A5A);
}

/* -------------------------------------------------------------------------
   Hiding
   ------------------------------------------------------------------------- */

/* EVERY element the script hides needs this. The `hidden` attribute is
   only a UA default of display:none, and each of these sets its own
   display -- flex, grid, block -- which wins. Without it the script sets
   hidden, the browser agrees the element is hidden, and it stays on the
   screen: the categories, all 67 rows and the back button all at once.

   Listed explicitly rather than as a blanket [hidden] rule so this file
   cannot reach an element it does not own. */
.cp-services [hidden],
.cp-services__back[hidden],
.cp-services__categories[hidden],
.cp-services__list[hidden],
.cp-services__list-bar[hidden],
.cp-services__heading[hidden],
.cp-services__empty[hidden] {
    display: none !important;
}

/* -------------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------------- */

@media (max-width: 560px) {
    /* A gutter of its own, for THIS section only.
       The shell drops its 20px page gutter at this width (03_shell.css),
       which is right for the feed -- a post card going edge to edge is
       the point -- but it leaves the search pill and every services card
       flush against the glass. Measured at 390px: left 0, right 0. 14px
       is enough to read as a margin without costing much of a 390px
       screen, and nothing outside .cp-services is touched. */
    .cp-services {
        padding-right: 14px;
        padding-left: 14px;
    }

    /* Still two category cards per row here. At 390px that is a ~165px
       card, which holds a readable name and two lines of description --
       and one column would make the categories a long scroll before the
       reader reaches anything. */
    .cp-services__categories {
        gap: 10px;
    }

    .cp-services__category-body {
        padding: 10px 12px 12px;
    }

    /* Still two service cards per row here too, the same ~165px card
       as a category. The thumbnail in the rows view gives up a little
       so the words beside it keep ~230px. */
    .cp-services__list--rows .cp-services__card-media {
        flex-basis: 88px;
        width: 88px;
        min-height: 88px;
    }
}