/* Service pages (services.mjs). Layered on church.css, whose spatial-* layout they share. Only
   what those pages add is here: example cards, the wedding gallery, the example chat, and the
   strip of other services. Colours are the site's tokens, except inside the light window frame. */
.service-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:20px}
.service-card{display:grid;gap:26px;align-content:start;border-top:1px solid var(--border);padding-top:30px}
.service-card-image{display:block;padding:26px;background:var(--surface);border:1px solid var(--border);border-radius:4px;overflow:hidden}
.service-card-image img{width:100%;border-radius:3px;box-shadow:0 14px 25px #12120d16;transition:transform .5s var(--ease)}
.service-card-image:hover img{transform:scale(1.02)}
.service-card .section-index{margin-bottom:14px}
.service-card h3{font-size:clamp(28px,2.6vw,38px);line-height:1.1;letter-spacing:-.045em;margin-bottom:16px}
.service-card p:not(.section-index){font-size:15px;color:var(--muted);max-width:44ch}
.service-card .text-link{margin-top:18px}
.service-cards.is-single{grid-template-columns:1fr}
.service-cards.is-single .service-card{grid-template-columns:1.5fr 1fr;gap:58px;align-items:center}
.service-live>.text-link{margin-top:-10px}
.service-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.service-gallery-grid figure{margin:0}
.service-gallery-grid img{width:100%;border:1px solid var(--border);border-radius:3px}
.service-gallery-grid figcaption{font-size:13px;color:var(--muted);padding-top:14px;max-width:34ch}
.service-includes{row-gap:56px}
.service-more-link{margin-top:56px}
.service-pricing{border-top:1px solid var(--border)}
.service-pricing .prices{border-bottom:1px solid var(--border)}
.service-chat{max-width:620px}
.service-chat-log{list-style:none;margin:0;padding:26px 24px 30px;display:grid;gap:14px;color:#22221f}
.service-chat-log li{max-width:82%;padding:12px 16px;border-radius:14px;background:#fffdf8;border:1px solid #d5cfc2}
.service-chat-log li.from-visitor{justify-self:end;background:#282824;border-color:#282824;color:#f5f0e7}
.service-chat-log span{display:block;font-size:10px;letter-spacing:.04em;text-transform:uppercase;opacity:.7;margin-bottom:4px}
.service-chat-log p{font-size:14px;line-height:1.5}
.service-page .spatial-cover figcaption button{font-size:12px;padding:0;color:var(--text);border:0;gap:10px}
.service-others{padding-top:20px;padding-bottom:20px;border-top:1px solid var(--border)}
.service-others .spatial-eyebrow{margin-bottom:16px}
.service-others ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 40px}
.service-others a{font-size:clamp(18px,1.6vw,24px);letter-spacing:-.03em}
.service-others a:hover{color:var(--muted)}
@media(max-width:1099px){.service-cards{gap:30px}.service-cards.is-single .service-card{gap:30px}}
@media(max-width:767px){
  .service-cards,.service-cards.is-single .service-card,.service-gallery-grid{grid-template-columns:1fr;gap:26px}
  .service-cards{gap:44px}
  .service-card-image{padding:18px}
  .service-card h3{font-size:30px}
  .service-includes{row-gap:36px}
  .service-more-link{margin-top:36px}
  .service-chat-log{padding:18px 14px 22px}
  .service-chat-log li{max-width:92%}
  .service-chat-log p{font-size:13px}
  .service-others ul{flex-direction:column;gap:10px}
}