/* Version 114 — third-wave mobile refinements.
   Desktop and tablet layouts remain unchanged. */

@media (max-width: 700px) {
  /* About Us — lead with the story and move the photograph beneath it. */
  .about-page {
    display: flex;
    flex-direction: column;
  }

  .about-story {
    order: 1;
  }

  .about-visual {
    order: 2;
    width: calc(100% - 16vw);
    margin: 0 8vw 28px;
  }

  .about-page > .site-footer {
    order: 3;
  }

  /* Services — preserve the full top of the Set It Off portrait. */
  #support-group-panel[aria-labelledby="support-tab-set-it-off"] .support-group-photo img {
    object-fit: cover;
    object-position: center 30%;
  }

  /* Services — workshop tab titles mirror the support-group underline treatment. */
  .workshop-title {
    line-height: 1.42;
    text-decoration: underline;
    text-decoration-color: rgb(197 154 52 / 78%);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-skip-ink: auto;
  }

  .workshop-title::after {
    display: none;
  }

  .workshop-tab.is-active .workshop-title {
    text-decoration-color: var(--gold-light);
  }

  /* Match the Waiting to Exhale frame to its wide artwork so nothing is cropped. */
  #workshop-panel[aria-labelledby="workshop-tab-exhale"] .workshop-photo {
    aspect-ratio: 2 / 1;
  }

  #workshop-panel[aria-labelledby="workshop-tab-exhale"] .workshop-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Programs — titles and their flourishes share the centered description axis. */
  .program-copy h3,
  #program-name {
    width: 100%;
    margin-inline: auto;
    text-align: center;
  }

  .program-copy h3::after,
  #program-name::after {
    margin-inline: auto;
    background: linear-gradient(90deg, transparent, var(--gold-light) 15% 85%, transparent);
  }
}