/**
 * Final Figma geometry corrections for the Work archive, Sjogren's and Hikma.
 *
 * Load this file after style.css and work-figma.css. The archive rules are
 * intentionally local to the archive markup; the case-study rules are scoped
 * by project slug so unrelated work pages retain their existing layout.
 */

/* --------------------------------------------------------------------------
 * Work archive
 * -------------------------------------------------------------------------- */@media (min-width: 1051px) {.works .works-item {
    height: 802px;
  }.works .works-item .img,
  .works .works-item .text {
    height: 100%;
    max-height: none;
  }
}@media (min-width: 751px) and (max-width: 1050px) {.works .works-item {
    justify-content: flex-start;
    height: 594px;
  }.works .works-item .img,
  .works .works-item .text {
    height: 100%;
    max-height: none;
  }.works .works-item .img {
    flex: 0 0 50%;
    width: 50%;
  }.works .works-item .text {
    align-items: flex-start;
    width: auto;
    padding: 0;
  }.works .works-item:nth-child(odd) {
    /* 72px from 775px up (Figma 1024 frame); below that the gap gives way so the
     * right-hand text column keeps its widest single word on-canvas at 751px
     * (audit 2026-09-02: "WEAR A MASK" ran 6px past the viewport). */
    column-gap: clamp(48px, calc(100vw - 703px), 72px);
  }.works .works-item:nth-child(odd) .text {
    flex: 1 1 0;
  }.works .works-item:nth-child(even) {
    column-gap: 77px;
  }.works .works-item:nth-child(even) .text {
    /* 50% image + 77px gap + 323px only fits from 800px; below that the fixed
     * basis pushed this block to x -24 and clipped the title (audit 2026-09-02). */
    flex: 0 1 323px;
    min-width: 0;
  }.works .works-item .text .title {
    width: 100%;
    margin-bottom: 20px;
    font-size: 40px;
    line-height: 1.145;
  }.works .works-item .text .link,
  .works .works-item .text .link svg {
    width: 180.635px;
    height: 16px;
  }
}@media (max-width: 450px) {.works .works-item .img {
    width: 100%;
    height: 326px;
    max-height: none;
  }.works .works-item .img .bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }.works .works-item .img .logo {
    max-width: none;
    max-height: none;
    object-fit: contain;
  }.works .works-item .img[href*="/work/for-the-ones-who-cared-for-you/"] .logo,
  .works .works-item .img[href*="/work/were-neighbors/"] .logo {
    top: 137px;
    left: 50%;
    width: 200px !important;
    height: 51.6605px;
    transform: translateX(-50%);
  }.works .works-item .img[href*="/work/a-higher-aesthetic-standard/"] .logo {
    top: 140px;
    left: 50%;
    width: 242px !important;
    height: 57px;
    transform: translateX(-50%);
  }.works .works-item .img[href*="/work/125-years-of-healing-beyond-medicine/"] .logo,
  .works .works-item .img[href*="/work/we-will-never-stop/"] .logo {
    top: 122px;
    left: 50%;
    width: 200px !important;
    height: 82.071px;
    transform: translateX(-50%);
  }.works .works-item .img[href*="/work/the-riverspring-living-difference/"] .logo {
    top: 119px;
    left: 50%;
    width: 290px !important;
    height: 108px;
    transform: translateX(-50%);
  }.works .works-item .img[href*="/work/see-the-signs-of-sjogrens/"] .logo {
    top: 78px;
    left: 50%;
    width: 272px !important;
    height: 171px;
    transform: translateX(-50%);
  }.works .works-item .img[href*="/work/lean-on-us/"] .logo {
    top: 121px;
    left: 50%;
    width: 200px !important;
    height: 84.0588px;
    transform: translateX(-50%);
  }.works .works-item .img[href*="/work/unmasking-a-killer/"] .logo,
  .works .works-item .img[href*="/work/do-right-wear-a-mask/"] .logo,
  .works .works-item .img[href*="/work/amazing-things/"] .logo {
    top: 124px;
    left: 50%;
    width: 240px !important;
    height: 77.2295px;
    transform: translateX(-50%);
  }.works .works-item .img[href*="/work/1-for-families/"] .logo {
    top: 124px;
    left: 50%;
    width: 200px !important;
    height: 77.6px;
    transform: translateX(-50%);
  }.works .works-item .img[href*="/work/democratizing-taxi-insurance/"] .logo {
    top: 134px;
    left: 50%;
    width: 200px !important;
    height: 57.5268px;
    transform: translateX(-50%);
  }.works .works-item .img[href*="/work/builders-of-the-good-life/"] .logo {
    top: 105px;
    left: 50%;
    width: 200px !important;
    height: 115.7088px;
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
 * See the Signs of Sjogren's: Figma's 656px tablet rail / 592px media width.
 * The lower breakpoint is deliberately excluded because its existing media
 * grid and mobile stacking already match the approved design.
 * -------------------------------------------------------------------------- */@media (min-width: 451px) and (max-width: 1050px) {.work-sample-see-the-signs-of-sjogrens .images-2-big .container,
  .work-sample-see-the-signs-of-sjogrens .work-1-content:has(.image-items) .container,
  .work-sample-see-the-signs-of-sjogrens > .work-1-content:last-child .container {
    width: 100%;
    max-width: 656px;
    padding-right: clamp(16px, calc(7.767vw - 18.95px), 32px);
    padding-left: clamp(16px, calc(7.767vw - 18.95px), 32px);
  }.work-sample-see-the-signs-of-sjogrens .images-2-big .img,
  .work-sample-see-the-signs-of-sjogrens .image-items,
  .work-sample-see-the-signs-of-sjogrens > .work-1-content:last-child .image-cinter {
    width: 100%;
    max-width: 592px;
  }
}

/* Keep Figma 2489:2341's three-line mobile hero lockup as the viewport grows
 * beyond its authored 360px frame. The shared fluid type remains unchanged;
 * only this campaign title's measure is capped so it does not collapse to two
 * lines at 390–450px and appear shorter than the other Work heroes. */
@media (max-width: 450px) {
  .work-sample-see-the-signs-of-sjogrens .work-top .title {
    margin-right: auto;
    margin-left: auto;
    max-width: 360px;
  }
}