/* Service-page extensions to Webblix's existing design system.
   Tokens: styles.css. Native page compositions: seo.css, webbplatser.css,
   system-integrationer.css. See DESIGN.md in the project root. */

/* Examples use the same disclosure rows as the existing service FAQs. */
.seo-work-examples { margin-top: var(--content-space); padding-top: var(--content-space); border-top: 1px solid var(--line); }
.seo-work-examples h3 { margin: 0; max-width: 21ch; font-size: var(--type-card-title-large); line-height: 1.2; letter-spacing: -.035em; }
.seo-work-examples .seo-work-copy p { font-size: var(--text-body); }
.seo-work-copy .service-caption { font-size: var(--text-support); }
.service-example-notes { margin: 0; padding: 0 0 1.5rem; }
.service-example-notes > div + div { margin-top: 1rem; }
.service-example-notes dt { color: var(--deep); font-size: var(--text-action); font-weight: 600; }
.service-example-notes dd { margin: .35rem 0 0; max-width: 58ch; color: var(--slate); font-size: var(--text-support); line-height: 1.7; }

/* Case composition follows website-case-panel / website-case-story:
   real, scrollable work alongside a dark text panel. Shared by two services. */
.service-reference { padding: var(--section-space-feature) 0; background: var(--white); }
.systems-service-page .service-reference { --service-reference-ink: var(--systems-deep); background: var(--systems-fog); }
.service-reference-panel { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); overflow: hidden; border-radius: var(--radius); }
.service-reference-screen { margin: 0; max-height: 34rem; overflow-y: auto; background: var(--beige); overscroll-behavior: contain; }
.service-reference-screen figcaption { position: sticky; top: 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; padding: 1rem 1.25rem; background: var(--beige); color: var(--slate); font-size: var(--text-label); }
.service-reference-screen figcaption span { color: var(--deep); }
.service-reference-screen img { display: block; width: 100%; height: auto; }
.service-reference-story { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(1.8rem,3.6vw,3.5rem); background: var(--service-reference-ink,var(--deep)); color: var(--white); }
.service-reference-story .service-reference-name { margin: 0 0 1rem; color: var(--mist); font-family: var(--font-mono); font-size: var(--text-label); line-height: 1.6; }
.service-reference-story h2 { margin: 0; max-width: 21ch; color: var(--white); font-size: var(--type-card-title-large); font-weight: 430; letter-spacing: -.035em; line-height: 1.15; }
.service-reference-story h2 em { color: var(--mist); }
.service-reference-story > p { margin: 1.25rem 0 0; color: rgba(255,255,255,.82); font-size: var(--text-support); line-height: 1.7; }
.service-reference-story .service-text-link { margin-top: 1.5rem; color: var(--white); border-color: var(--mist); }
.service-text-link { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; padding-block: .35rem; border-bottom: 1px solid currentColor; color: var(--deep); font-size: var(--text-action); font-weight: 600; line-height: 1.6; }
.service-text-link > span { flex-shrink: 0; }
.service-text-link:hover { text-decoration: underline; text-underline-offset: .22em; }
.service-text-link:focus-visible, .service-reference-screen:focus-visible, .service-related-links a:focus-visible, .seo-example-list summary:focus-visible, .website-delivery summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }

/* Integration example extends the existing information trail. */
@media (min-width: 1121px) {
  .systems-friction-layout { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(3rem,5vw,5rem); }
}
.systems-manual-trail--integrated li { grid-template-columns: 2.5rem minmax(0,1fr) 1rem; align-items: start; padding-block: 1.3rem; }
.systems-manual-trail--integrated li strong { font-size: var(--text-body); }
.systems-manual-trail--integrated li p { margin: .5rem 0 0; color: rgba(255,255,255,.76); font-size: var(--text-support); line-height: 1.65; }
.systems-manual-trail--integrated > p { display: block; }

/* Responsibilities sit immediately after the existing website process.
   Both heading and disclosure components are reused from website-faq. */
.website-delivery { padding: 0 0 var(--section-space); background: #f5f2ed; }
.website-service-page .website-process { padding-bottom: var(--content-space); }
.website-delivery .website-faq-layout { padding-top: 0; }
.website-delivery .website-faq-intro { position: static; }
.website-delivery-scope { display: grid; grid-template-columns: minmax(17rem,.58fr) minmax(0,1fr); gap: clamp(3rem,9vw,9rem); margin-top: var(--content-space); }
.website-delivery-scope h3 { margin: 0; font-size: var(--type-card-title); line-height: 1.3; }
.website-delivery-scope p { margin: 0 0 1rem; color: var(--slate); font-size: var(--text-support); line-height: 1.7; }

/* SEO's existing AI and FAQ compositions also carry relevant onward links. */
.seo-service-page .seo-hero-grid { grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); }
.seo-service-page .seo-hero-copy { order: 0; }
.seo-service-page .seo-work-ledger div { grid-template-columns: 9rem minmax(0,1fr); }
.seo-ai-copy > .service-text-link { grid-column: 2; justify-self: start; }
.service-related-links { display: grid; margin-top: 2rem; border-top: 1px solid var(--line); }
.service-related-links a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.9rem; padding-block: .8rem; border-bottom: 1px solid var(--line); color: var(--deep); font-size: var(--text-action); font-weight: 500; line-height: 1.5; }
.service-related-links a > span { flex-shrink: 0; }
.service-related-links a:hover { text-decoration: underline; text-underline-offset: .22em; }

/* Preserve the established type roles, with a compact scale on small screens.
   Scope is restricted to the six pages revised in this SEO round. */
body.home-page.seo-content-update { --type-page-title: clamp(3.2rem,5vw,5.25rem); }
body.seo-content-update:is(.home-page,.seo-service-page,.website-service-page,.systems-service-page,.services-page,.local-agency-page) main h1 { font-size: var(--type-page-title); line-height: 1.08; letter-spacing: -.045em; max-width: 100%; min-height: 0; overflow-wrap: normal; }
body.home-page.seo-content-update main h1 em { white-space: normal; }
@media (max-width: 900px) {
  .service-reference-panel, .website-delivery-scope, .seo-service-page .seo-hero-grid { grid-template-columns: 1fr; }
  .service-reference-screen { max-height: 28rem; }
  .seo-ai-copy > .service-text-link { grid-column: 1; }
  .seo-service-page .seo-query-field { max-width: 38rem; }
}
@media (max-width: 700px) {
  body.seo-content-update {
    --type-page-title: clamp(1.7rem,8.4vw,2.25rem);
    --type-section-title: clamp(1.55rem,7.1vw,2rem);
    --type-section-title-compact: var(--type-section-title);
    --type-section-title-large: var(--type-section-title);
    --type-card-title-large: clamp(1.4rem,6.4vw,1.8rem);
    --type-card-title: clamp(1.2rem,5.8vw,1.5rem);
    --section-space: 3.75rem;
    --section-space-feature: 3.75rem;
    --section-space-compact: 3rem;
    --content-space: 2.5rem;
  }
  body.home-page.seo-content-update { --type-page-title: clamp(2rem,9.3vw,2.6rem); }
  body.seo-content-update:is(.home-page,.seo-service-page,.website-service-page,.systems-service-page,.services-page,.local-agency-page) main h2 { font-size: var(--type-section-title); line-height: 1.15; letter-spacing: -.035em; max-width: 100%; }
  body.seo-content-update:is(.home-page,.seo-service-page,.website-service-page,.systems-service-page,.services-page,.local-agency-page) main h3 { font-size: var(--type-card-title); line-height: 1.25; letter-spacing: -.025em; max-width: 100%; }
  body.seo-content-update main :is(h1,h2,h3) em { white-space: normal; }
  body.seo-content-update .button { max-width: 100%; white-space: normal; text-align: center; line-height: 1.5; }
  body.seo-content-update .button span[aria-hidden] { flex-shrink: 0; }
  .seo-service-page .seo-work-ledger div { grid-template-columns: 1fr; }
  .service-reference-story { padding: 1.7rem 1.25rem 2rem; }
  .service-reference-screen { max-height: 23rem; }
  .systems-manual-trail--integrated li { grid-template-columns: 1.5rem minmax(0,1fr) 1rem; }
  .website-delivery-scope { gap: 1.25rem; }
}

/* A case title uses the card role even though it is a semantic H2. */
body.seo-content-update main .service-reference-story h2 { font-size: var(--type-card-title-large); line-height: 1.15; }

@media (min-width: 861px) and (max-width: 1120px) {
  .systems-service-page .systems-hero-layout { grid-template-columns: 1fr; }
  .systems-service-page .systems-hero-copy { order: -1; }
  .systems-service-page .systems-hero-visual { width: min(100%,680px); justify-self: center; }
}

body.website-service-page main .website-case-story h3 { font-size: var(--type-card-title); max-width: 100%; line-height: 1.2; }

/* A real experience photo uses the same reference panel and story.
   Preserve the people in the crop when the panel stacks on mobile. */
.service-reference-photo { margin: 0; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.service-reference-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; }