.lib-service-offerings {
  width: 100%;
  padding-block: var(--lib-space-section-y-lg);
  color: var(--lib-text-primary);
  background: var(--lib-surface-page);
}

.lib-service-offerings__container {
  box-sizing: border-box;
  width: var(--lib-container-wide);
  margin-inline: auto;
  padding-inline: var(--lib-gutter);
}

.lib-service-offerings__header {
  margin: 0 auto var(--lib-space-8);
  /* Section header full-width LAW (2026-10-14): the title uses the shared wide
     heading measure; only the description keeps the reading measure. */
  max-width: var(--lib-section-heading-width-lg, clamp(56rem, calc(20vw + 43rem), 67.5rem));
  text-align: center;
}

.lib-service-offerings__description {
  max-width: var(--lib-content-measure);
  margin-inline: auto;
}

.lib-service-offerings__header.lib-section-heading--left {
  margin-inline: 0;
  text-align: left;
  max-width: none;
}

.lib-service-offerings__header.lib-section-heading--left .lib-service-offerings__description {
  margin-inline: 0;
}

.lib-service-offerings__title {
  margin: 0;
  font-family: var(--lib-font-heading);
  font-size: var(--lib-font-size-title-lg);
  line-height: 1.1;
}

.lib-service-offerings__description {
  margin: var(--lib-space-3) 0 0;
  color: var(--lib-text-secondary);
  font: var(--lib-font-size-body-lg)/1.6 var(--lib-font-body);
}

.lib-service-offerings__tabs {
  display: flex;
  gap: var(--lib-space-2);
  margin: 0 0 var(--lib-space-6);
  padding: var(--lib-space-1);
  overflow-x: auto;
  list-style: none;
  border: 1px solid var(--lib-border-default);
  border-radius: var(--lib-radius-pill);
  background: var(--lib-surface-section);
  scrollbar-width: thin;
}

.lib-service-offerings__tab {
  min-height: 2.75rem;
  padding: var(--lib-space-2) var(--lib-space-4);
  flex: 1 0 auto;
  border: 0;
  border-radius: var(--lib-radius-pill);
  color: var(--lib-text-secondary);
  background: transparent;
  font: 600 var(--lib-font-size-base)/1.2 var(--lib-font-body);
  cursor: pointer;
  transition: color var(--lib-transition-base), background var(--lib-transition-base), box-shadow var(--lib-transition-base);
}

.lib-service-offerings__tab:hover,
.lib-service-offerings__tab:focus-visible {
  color: var(--lib-text-primary);
}

.lib-service-offerings__tab:focus-visible {
  outline: 2px solid var(--lib-border-accent);
  outline-offset: 2px;
}

.lib-service-offerings__tab[aria-selected="true"] {
  color: var(--lib-action-primary-text);
  background: var(--lib-action-primary-bg);
  box-shadow: var(--lib-shadow-button);
}

.lib-service-offerings__panel[hidden] {
  display: none;
}

.lib-service-offerings__panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  min-height: 31rem;
  overflow: hidden;
  border: 1px solid var(--lib-border-default);
  border-radius: var(--lib-radius-lg);
  background: var(--lib-surface-elevated);
  box-shadow: var(--lib-shadow-card-soft);
}

/* --lib-gradient-deep/-deep deliberately NOT migrated on this media
   placeholder + its own scrim overlay below: a real fixed-dark
   placeholder, always dark regardless of Canvas by design (same
   established pattern as media-focus/skills-video). */
.lib-service-offerings__media {
  position: relative;
  min-height: 24rem;
  overflow: hidden;
  background: var(--lib-gradient-deep);
}

/* The photo fills the frame instead of sizing it: the panel's height comes
   from its content and the frame's min-height, so a lazy image arriving
   later never grows the section (it shifted the page by 418px mid-scroll
   and broke in-page anchors on Joe's Roofing, 2026-10-14). */
.lib-service-offerings__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lib-service-offerings__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--lib-color-deep) 72%, transparent));
}

.lib-service-offerings__content {
  display: flex;
  flex-direction: column;
  padding: var(--lib-space-8);
}

.lib-service-offerings__eyebrow {
  margin: 0 0 var(--lib-space-2);
  color: color-mix(in srgb, var(--lib-color-primary-strong) 35%, var(--lib-text-primary)); /* design-allow: CASE-4 brand-on-Canvas-neutral, clears 4.5:1 on Canvas Dark */
  font: 700 var(--lib-font-size-caption)/1.2 var(--lib-font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lib-service-offerings__subtitle {
  margin: 0;
  font-family: var(--lib-font-heading);
  font-size: var(--lib-font-size-title-md);
  line-height: 1.15;
}

.lib-service-offerings__body,
.lib-service-offerings__closing {
  color: var(--lib-text-secondary);
  font: var(--lib-font-size-base)/1.65 var(--lib-font-body);
}

.lib-service-offerings__body {
  margin: var(--lib-space-3) 0 var(--lib-space-5);
}

.lib-service-offerings__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lib-space-grid-gap);
}

.lib-service-offerings__list-title {
  margin: 0 0 var(--lib-space-2);
  font: 700 var(--lib-font-size-small)/1.3 var(--lib-font-body);
}

.lib-service-offerings__list {
  display: grid;
  gap: var(--lib-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lib-service-offerings__list-item {
  position: relative;
  padding-inline-start: var(--lib-space-4);
  color: var(--lib-text-secondary);
  font: var(--lib-font-size-body-sm)/1.5 var(--lib-font-body);
}

.lib-service-offerings__list-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--lib-icon-brand);
}

.lib-service-offerings__closing {
  margin: var(--lib-space-5) 0 0;
}

.lib-service-offerings__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lib-space-4);
  margin-top: auto;
  padding-top: var(--lib-space-6);
}

.lib-service-offerings__pager {
  display: flex;
  gap: var(--lib-space-2);
}

.lib-service-offerings__pager-button {
  display: inline-grid;
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  /* Host themes pad every <button> (Kadence: 20px 40px), which turned the
     circle into a wide oval; the control owns its box. */
  padding: 0;
  min-width: 0;
  place-items: center;
  border: 1px solid var(--lib-border-default);
  border-radius: 50%;
  color: var(--lib-icon-brand);
  background: var(--lib-surface-page);
  cursor: pointer;
}

/* Same box, scoped to the section: host builders style every <button> with
   a class + element selector (Elementor kit: ".elementor-kit-N button",
   specificity 0,1,1), which beats a single class. */
.lib-service-offerings .lib-service-offerings__pager-button {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  min-width: 0;
}

.lib-service-offerings__pager-button:hover,
.lib-service-offerings__pager-button:focus-visible {
  color: var(--lib-action-primary-text);
  background: var(--lib-action-primary-bg);
}

.lib-service-offerings__pager-button:focus-visible {
  outline: 2px solid var(--lib-border-accent);
  outline-offset: 2px;
}

.lib-service-offerings__pager-button svg {
  /* Fixed icon size: the foundation's media rule (max-width: 100%) resolves
     to 0 inside this auto-sized grid button and hid the arrows. */
  width: 1rem;
  max-width: none;
  height: 1rem;
}

@media (max-width: 820px) {
  .lib-service-offerings__panel-grid {
    grid-template-columns: 1fr;
  }

  .lib-service-offerings__media {
    min-height: 18rem;
    max-height: 25rem;
  }
}

@media (max-width: 540px) {
  .lib-service-offerings__container {
    padding-inline: var(--lib-space-4);
  }

  .lib-service-offerings__content {
    padding: var(--lib-space-5);
  }

  .lib-service-offerings__columns {
    grid-template-columns: 1fr;
  }

  .lib-service-offerings__actions {
    align-items: flex-start;
    flex-direction: column-reverse;
  }
}

/* Tab selector (2026-10-29): a scrolling pill bar hides tabs off screen on a
   phone and on a small laptop with long labels. Below 90rem the tabs become a
   grid of chips (two columns below 37.5rem) where
   every option is visible and reachable, with no project CSS. Values are
   tokens. An odd last tab spans the row so no chip sits alone and narrow. */
@media (max-width: 90rem) {
  .lib-service-offerings__tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--lib-service-offerings-chip-gap, var(--lib-space-2));
    width: 100%;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .lib-service-offerings__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: var(--lib-space-2);
    border: 1px solid var(--lib-service-offerings-chip-border, var(--lib-color-border-card));
    border-radius: var(--lib-service-offerings-chip-radius, var(--lib-radius-md, 0.75rem));
    background: var(--lib-service-offerings-chip-bg, var(--lib-surface-card));
    color: var(--lib-text-primary);
    font-size: var(--lib-font-size-caption);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    box-shadow: none;
  }

  .lib-service-offerings__tab[aria-selected="true"] {
    border-color: var(--lib-action-primary-bg);
  }
}

@media (max-width: 37.5rem) {
  .lib-service-offerings__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lib-service-offerings__tab:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lib-service-offerings__tab {
    transition-duration: var(--lib-transition-reduced);
  }
}

/* Panel without a verified photo: content only, no empty media column and no
   tall fixed height (2026-10-22). */
.lib-service-offerings__panel-grid--no-media {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

/* Panel enter on tab change: opacity and transform only, skipped entirely
   under reduced motion. Replaces a project-side motion script. */
@media (prefers-reduced-motion: no-preference) {
  .lib-service-offerings__panel.is-entering .lib-service-offerings__panel-grid {
    animation: lib-service-offerings-panel-enter var(--lib-motion-duration-entry) var(--lib-motion-ease-emphasis) both;
  }

  @keyframes lib-service-offerings-panel-enter {
    from {
      opacity: 0.45;
      transform: translate3d(0, 0.5rem, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
}