/* Service cards: rest / expanded states (:hover on pointer devices, .is-open on touch). */
.pb-svc__card { height: 120px; transition: flex 0.5s ease-out, height 0.5s ease-out; }
.pb-svc__img { object-position: 30% top; }
.pb-svc__dim {
    background: rgba(0,0,0,0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background-color 0.5s ease-out, backdrop-filter 0.5s ease-out;
}
.pb-svc__grad {
    background: linear-gradient(to top, #000 0%, rgba(0,0,0,0.85) 50%, rgba(0,0,0,0.1) 100%);
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
.pb-svc__rest { transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.pb-svc__hover { opacity: 0; transform: translateY(2rem); transition: opacity 0.5s ease-out, transform 0.5s ease-out; pointer-events: none; }

/* Rounded ends: top/bottom when stacked, left/right in the row. */
.pb-svc__card--first { border-radius: 20px 20px 0 0; }
.pb-svc__card--last  { border-radius: 0 0 20px 20px; }
@media (min-width: 768px) {
    .pb-svc__card { height: 350px; flex: 1 1 0%; }
    .pb-svc__img { object-position: top; }
    .pb-svc__card--first { border-radius: 20px 0 0 20px; }
    .pb-svc__card--last  { border-radius: 0 20px 20px 0; }
    .pb-svc__card.is-open { flex: 2 1 0%; }
}
@media (max-width: 767px) {
    .pb-svc__card.is-open { height: 400px; }
}
.pb-svc__card.is-open .pb-svc__dim { background: rgba(0,0,0,0.2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pb-svc__card.is-open .pb-svc__grad { opacity: 1; }
.pb-svc__card.is-open .pb-svc__rest { opacity: 0; transform: translateY(1rem); }
.pb-svc__card.is-open .pb-svc__hover { opacity: 1; transform: none; }

/* Hover only where a pointer can hover. On touch, :hover would apply on the first tap and iOS Safari
   then withholds the click (the card showed the expanded text clipped inside its 120px rest height);
   view.js opens the card with .is-open on the first tap instead. */
@media (hover: hover) {
    .pb-svc__card:hover .pb-svc__dim { background: rgba(0,0,0,0.2); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .pb-svc__card:hover .pb-svc__grad { opacity: 1; }
    .pb-svc__card:hover .pb-svc__rest { opacity: 0; transform: translateY(1rem); }
    .pb-svc__card:hover .pb-svc__hover { opacity: 1; transform: none; }
}
@media (min-width: 768px) and (hover: hover) {
    .pb-svc__card:hover { flex: 2 1 0%; }
}

/* Front end: the whole card is clickable (view.js follows the row's link); the card shows a pointer. */
.pb-svc__card { cursor: pointer; }
.pb-svc__link { pointer-events: auto; }

/* Editor: static authoring layout, every field visible; no hover or tap states. */
.pb-svc.pb-svc--editing .pb-svc__row { height: auto; }
.pb-svc.pb-svc--editing .pb-svc__card { height: auto; min-height: 350px; flex: 1 1 0%; }
.pb-svc.pb-svc--editing .pb-svc__card:hover { flex: 1 1 0%; }
.pb-svc.pb-svc--editing .pb-svc__dim { background: rgba(0,0,0,0.6); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pb-svc.pb-svc--editing .pb-svc__grad { opacity: 0; }
.pb-svc.pb-svc--editing .pb-svc__rest, .pb-svc--editing .pb-svc__card:hover .pb-svc__rest { opacity: 1; transform: none; }
.pb-svc.pb-svc--editing .pb-svc__card > .relative { justify-content: flex-start; gap: 1rem; }
.pb-svc.pb-svc--editing .pb-svc__hover, .pb-svc--editing .pb-svc__card:hover .pb-svc__hover { position: static; opacity: 1; transform: none; pointer-events: auto; padding: 0; }
.pb-svc.pb-svc--editing .pb-svc__title-lg { display: none; }
.pb-svc.pb-svc--editing .pb-svc__card { cursor: default; }