/* #uwh-project-hero-section{
    background-image: url('../image/ux-was-here/hero-image.png');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
} */

/* Hero (css/case-hero.css) in a light sage from the green Beginner
   milestone badge, matching the project card. The hero image is a cut-out
   (hero-image-cutout.png) so the colour shows around the laptops. */
.case-study-page .case-hero-shell {
    --case-hero-bg: #e6f0db;
    /* Dark mode: the same green, dimmed to a deep muted sage
       (css/case-hero.css) */
    --case-hero-bg-dark: #1d2a1f;
}

/* Section titles and links in the Beginner badge's green instead of purple, as
   PhoenixRise has its blue. Deep in light mode (7.6:1 on white) and soft in
   dark mode (10.5:1 on the page), the same contrast as PhoenixRise's blues.
   The sidebar keeps the site's purple, as on PhoenixRise. (More specific than
   the defaults in css/case-study-layout.css, which loads after this file.) */
.case-study-page .case-study-shell {
    --case-accent: #2b5f22;
    --case-link: #2b5f22;
    --case-link-hover: #1f4f1a;
    --case-tint: var(--uwh-tint);
}

:root[data-portfolio-theme="dark"] .case-study-page .case-study-shell {
    --case-accent: #9ccc6f;
    --case-link: #9ccc6f;
    --case-link-hover: #b5e394;
    --case-tint: var(--uwh-tint);
}

/* Anton in capitals: tall, heavy block letters like the "UX" in the project's
   logo (image/ux-was-here/logo.png). It comes in one weight, so 400 keeps the
   browser from thickening it. The rest of the page stays in Plus Jakarta
   Sans. */
.case-study-page .case-hero-shell .case-hero__title {
    font-family: "Anton", Impact, sans-serif;
    font-weight: 400;
    letter-spacing: 0.015em;
    text-transform: uppercase;
}

/* With no logo or project-details box beside it, the overview spans the
   full width like the sections below */
.project-overview{
    width: 100%;
}

#survey-image{
    margin-top: -1rem;
}

#uwh-survey-container{
    width: 100%;
    display: flex;
    align-items: center;

    .text-image-container{
        
        p, h3, h4, h2, li{
            width: 80%;
        }

        ul{
            margin-top: -0.5rem;
        }

        li{
            margin-top: 0;
            margin-bottom: 0.5rem;
        }

        img{
            width: 160%;
            vertical-align: middle;
            margin-left: -7.5rem;
           }
    }
}

/* The solution is text only, so its row is one column, full width */
.case-study__content #uwh-solution .two-section-container {
    grid-template-columns: minmax(0, 1fr);
}

#uwh-solution{
    margin-top: 5rem;

    .heading-paragraph-container:first-of-type{
        margin-bottom: 3rem;
     }

    .heading-paragraph-container:last-of-type{
        margin-top: 3rem;
    }
}

/* ----- Milestones (js/case-milestones.js) -----
   A small card below the sidebar links, based on UX Was Here's milestone
   feature: three badges earned as sections are reached, a checklist
   and a progress bar. It fades in, stays 7s, then fades out, leaving a
   "View milestones" button. On phones the same progress sits inside the
   "On this page" menu instead. */
.case-milestone {
  --milestone-surface: #ffffff;
  --milestone-border: rgb(14 10 28 / 10%);
  --milestone-muted: #5f5a6b;
  --milestone-ring: #b9b4c4;
  --milestone-done: #63eb61;
  --milestone-check: #14320f;
  margin-top: 24px;
}

.case-milestone-mobile {
  --milestone-surface: transparent;
  --milestone-border: transparent;
  --milestone-muted: #5f5a6b;
  --milestone-ring: #b9b4c4;
  --milestone-done: #63eb61;
  --milestone-check: #14320f;
}

:root[data-portfolio-theme="dark"] :is(.case-milestone, .case-milestone-mobile) {
  --milestone-surface: #1b1530;
  --milestone-border: rgb(245 241 250 / 14%);
  --milestone-muted: #c3bdd2;
  --milestone-ring: #6d6782;
}

:root[data-portfolio-theme="dark"] .case-milestone-mobile {
  --milestone-surface: transparent;
  --milestone-border: transparent;
}

.case-milestone__card {
  position: relative;
  box-sizing: border-box;
  padding: 14px 14px 14px;
  border: 1px solid var(--milestone-border);
  border-radius: 16px;
  color: var(--case-nav-text);
  background: var(--milestone-surface);
  box-shadow: 0 10px 24px rgb(14 10 28 / 10%);
  font-family: "Plus Jakarta Sans", sans-serif;
  opacity: 0;
  transition: opacity 700ms ease;
}

.case-milestone__card.is-shown {
  opacity: 1;
  transition-duration: 250ms;
}

.case-milestone__card[hidden],
.case-milestone__toggle[hidden],
.case-milestone-mobile[hidden] {
  display: none;
}

.case-milestone .case-milestone__title,
.case-milestone-mobile .case-milestone__title {
  margin: 0;
  padding-right: 26px;
  color: inherit;
  font: 700 14px/1.3 "Plus Jakarta Sans", sans-serif;
}

.case-milestone .case-milestone__intro,
.case-milestone-mobile .case-milestone__intro {
  margin: 4px 0 0;
  color: var(--milestone-muted);
  font: 400 12px/1.4 "Plus Jakarta Sans", sans-serif;
}

/* The original's three connected badges, each labelled with its section:
   in colour once reached, greyed out until then */
.case-milestone__badges {
  display: flex;
  align-items: flex-start;
  margin-top: 12px;
}

.case-milestone__step {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.case-milestone__badge {
  display: block;
  width: 36px;
  height: 36px;
  margin: 0;
}

.case-milestone__step.is-ahead .case-milestone__badge {
  filter: grayscale(1);
  opacity: 0.45;
}

.case-milestone__name {
  color: var(--milestone-muted);
  font: 500 11px/1.2 "Plus Jakarta Sans", sans-serif;
  white-space: nowrap;
}

.case-milestone__step.is-reached .case-milestone__name {
  color: var(--case-nav-text);
  font-weight: 600;
}

/* Dashed connector, centred on the badges */
.case-milestone__link {
  flex: 1 1 auto;
  min-width: 8px;
  margin: 17px 4px 0;
  border-top: 2px dashed var(--milestone-ring);
}

.case-milestone__dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--milestone-muted);
  background: transparent;
  cursor: pointer;
}

.case-milestone__dismiss:hover {
  color: var(--case-nav-text);
  background: rgb(14 10 28 / 6%);
}

.case-milestone__dismiss svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.case-milestone__list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

/* main2.css fixes every list inside nav to the top right (for the old top
   menu); the phone progress sits inside the nav menu, so it's undone here */
.case-milestone-mobile .case-milestone__list {
  position: static;
  margin: 12px 0 0;
}

/* main.css spaces every list item 2.5rem apart and main2.css nudges list
   items inside nav; neither belongs here */
.case-milestone .case-milestone__list li,
.case-milestone-mobile .case-milestone__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 3px 0;
  color: var(--milestone-muted);
  font: 400 13px/1.35 "Plus Jakarta Sans", sans-serif;
  transform: none;
}

.case-milestone .case-milestone__list li.is-done,
.case-milestone-mobile .case-milestone__list li.is-done {
  color: var(--case-nav-text);
  font-weight: 600;
}

/* Not yet reached: a muted ring. Reached: a green circle with a tick. */
.case-milestone__mark {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--milestone-ring);
  border-radius: 50%;
}

.is-done > .case-milestone__mark {
  border-color: var(--milestone-check);
  background: var(--milestone-done)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%2314320f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}

.case-milestone .case-milestone__count,
.case-milestone-mobile .case-milestone__count {
  margin: 10px 0 6px;
  color: var(--milestone-muted);
  font: 500 12px/1.3 "Plus Jakarta Sans", sans-serif;
}

/* The original's progress bar: bright green, with a dark outline */
.case-milestone__bar {
  box-sizing: border-box;
  height: 9px;
  overflow: hidden;
  border: 1.5px solid var(--case-nav-text);
  border-radius: 999px;
}

.case-milestone__bar span {
  display: block;
  width: var(--milestone-progress, 0%);
  height: 100%;
  border-radius: 999px;
  background: var(--milestone-done);
  transition: width 400ms ease;
}

.case-milestone__toggle {
  margin: 0;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  color: var(--milestone-muted);
  background: transparent;
  font: 500 13px/1.4 "Plus Jakarta Sans", sans-serif;
  text-decoration: underline;
  text-decoration-color: var(--milestone-ring);
  text-underline-offset: 3px;
  cursor: pointer;
}

.case-milestone__card:not([hidden]) + .case-milestone__toggle {
  margin-top: 10px;
}

.case-milestone__toggle:hover {
  color: var(--case-nav-hover);
}

.case-milestone__dismiss:focus-visible,
.case-milestone__toggle:focus-visible {
  outline: 2px solid var(--case-nav-active);
  outline-offset: 2px;
}

.case-milestone__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Phones: the desktop card stays out of the way; progress lives in the
   "On this page" menu, below the links */
.case-milestone-mobile {
  margin: 0 0 16px;
  padding-top: 14px;
  border-top: 1px solid var(--case-nav-rule);
}

.case-milestone-mobile .case-milestone__card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

@media (min-width: 768px) {
  .case-milestone-mobile {
    display: none;
  }
}

@media (max-width: 767px) {
  .case-milestone {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-milestone__card,
  .case-milestone__card.is-shown,
  .case-milestone__bar span {
    transition: none;
  }
}

.case-milestone__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The three wireframes with their names underneath, each centred under its
   frame: the columns follow the frames' widths and gaps in the image */
.uwh-wireframes {
    margin: 0;
}

.uwh-wireframes .one-image {
    display: block;
    width: 100%;
}

/* (the old figcaption styles in main.css and main2.css dim, narrow and
   space captions out; reset here) */
.uwh-wireframes .uwh-wireframes__names {
    display: grid;
    width: 100%;
    grid-template-columns: 450fr 81fr 438fr 81fr 540fr;
    margin: clamp(10px, 1.6vw, 18px) 0 0;
    opacity: 1;
    color: var(--case-nav-text, #0e0a1c);
    font: 700 clamp(14px, 1.7vw, 22px)/1.3 "Plus Jakarta Sans", sans-serif;
    text-align: center;
}

.uwh-wireframes__names span:nth-child(2) {
    grid-column: 3;
}

.uwh-wireframes__names span:nth-child(3) {
    grid-column: 5;
}

/* ----- Gamification: how the milestone system works, as rows of text and
   screens like PhoenixRise's gamification section, text on the left and
   screens on the right. The first and last milestone
   cards sit side by side; the two unlocked-feature screens stack beside
   their text. On phones, everything is one column. ----- */
.case-study-page {
    --uwh-tint: #eef4e6;
}

/* Dark mode: the deep green of the hero at the top of the page
   (--case-hero-bg-dark above), so the notes carry its colour down */
:root[data-portfolio-theme="dark"] .case-study-page {
    --uwh-tint: #1d2a1f;
}

.uwh-gamification {
    display: grid;
    gap: clamp(36px, 5vw, 56px);
    margin-top: 28px;
}

.uwh-gamification__row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
    gap: clamp(28px, 4vw, 48px);
}

.uwh-gamification__copy {
    min-width: 0;
}

.uwh-gamification__copy > :last-child {
    margin-bottom: 0;
}

.case-study__content .uwh-gamification__image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
}

.uwh-gamification__milestones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1.6vw, 18px);
}

.uwh-gamification__unlocks {
    display: grid;
    gap: 16px;
}

/* Every content image has the same 10px corners, as on PhoenixRise, so the
   screens' white backgrounds read as rounded cards in both themes */
.case-study__content :is(.one-image, .uwh-gamification__image),
.case-study__content #uwh-survey-container .uwh-survey-charts img {
    border-radius: 10px;
}

@media (max-width: 767px) {
    .uwh-gamification__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

/* ----- What I Learned and Future Steps: short points, each a heading and
   a paragraph, spaced as on PhoenixRise ----- */
.case-study__content .uwh-reflection {
    display: grid;
    gap: clamp(28px, 3.5vw, 40px);
    margin: 0;
}

.case-study__content .uwh-reflection .project-section-subheading {
    margin: 0 0 8px;
}

.case-study__content .uwh-reflection .project-section-paragraph {
    margin: 0;
}

/* "Explore personalized questions" and "Explore Hives" land on these
   subheadings, clear of the
   top (and of the phone's "On this page" bar), as linked sections do */
.case-study__content :is(#uwh-onboarding, #uwh-hives) {
    scroll-margin-top: 28px;
}

@media (max-width: 767px) {
    .case-study__content :is(#uwh-onboarding, #uwh-hives) {
        scroll-margin-top: 72px;
    }
}
/* User survey: the three questions' charts in one column, spaced like the
   stacked screens in Gamification. The charts were cropped to the same
   width with even white space round them; each gets the same border,
   corners and soft shadow. */
.case-study__content .uwh-survey-charts {
    display: grid;
    gap: 16px;
}

.case-study__content #uwh-survey-container .uwh-survey-charts img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0;
    border: 1px solid #dadce0;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgb(14 10 28 / 8%);
}

/* User survey: the intro spans the full width; below it, each key question
   and what we learned sits beside its chart, its question level with the chart top
   as in Design Rationale. (More specific
   than the shared two-column rule in css/case-study-layout.css, which loads
   after this file.) */
.case-study__content #uwh-survey-container.uwh-survey {
    display: block;
}

.case-study__content .uwh-survey__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(24px, 4vw, 56px);
    margin-top: 24px;
}

.case-study__content .uwh-survey__row + .uwh-survey__row {
    margin-top: clamp(32px, 4vw, 48px);
}

.case-study__content .uwh-survey__copy {
    min-width: 0;
}

.case-study__content .uwh-survey__copy > h4 {
    margin-top: 0;
}

.case-study__content .uwh-survey__copy > :last-child {
    margin-bottom: 0;
}


@media (max-width: 767px) {
    .case-study__content .uwh-survey__row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ----- Hero ----- */
/* The subtitle runs the full width on one line, as on PhoenixRise (the
   shared hero caps it at 900px) */
@media (min-width: 769px) {
    .case-study-page .case-hero-shell .case-hero__subtitle {
        max-width: none;
    }
}

/* Two laptops standing on one line: the big one left, a smaller one right.
   They fade into the page at the bottom with the same mask the single hero
   image used (css/case-hero.css), applied to the pair. */
.case-hero-shell .uwh-hero-devices {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    -webkit-mask-image: var(--uwh-hero-mask);
    mask-image: var(--uwh-hero-mask);
    --uwh-hero-mask: linear-gradient(
        to bottom,
        #000 0%,
        #000 58%,
        rgba(0, 0, 0, 0.96) 63%,
        rgba(0, 0, 0, 0.86) 68%,
        rgba(0, 0, 0, 0.68) 74%,
        rgba(0, 0, 0, 0.46) 80%,
        rgba(0, 0, 0, 0.26) 86%,
        rgba(0, 0, 0, 0.11) 92%,
        rgba(0, 0, 0, 0.03) 97%,
        transparent 100%
    );
}

.uwh-hero-devices img {
    display: block;
    min-width: 0;
    height: auto;
    margin: 0;
}

/* Each laptop's base is wider than its screen (the screen is inset about
   9.5% on each side), and the fade hides the bases, so the images overlap
   a little: the screens end up about 3.5% of the width apart */
.uwh-hero-devices img.uwh-hero-devices__main {
    width: 58%;
}

.uwh-hero-devices img.uwh-hero-devices__side {
    width: 42%;
    margin-left: -6%;
}

/* Phones: wider than the screen and centred on the gap, so both stay a
   readable size; the hero clips the sides */
@media (max-width: 768px) {
    .case-hero-shell .uwh-hero-devices {
        width: 150vw;
        margin-left: 50%;
        transform: translateX(-50%);
    }
}

/* Prototype videos: each sits 16px under its description (the paragraph's own
   margin), replacing the 3rem above .one-image in css/main2.css */
.case-study__content .uwh-prototype-video {
    display: block;
    margin-top: 0;
}

.case-study__content .uwh-prototype-video:focus-visible {
    outline: 3px solid var(--case-accent);
    outline-offset: 3px;
}

/* References and citations: PhoenixRise's markup and rules (css/phoenixrise.css
   isn't loaded here), in this page's purple and green tint. The section title
   comes from .project-section-title. */
.phoenixrise-references__details {
    width: min(100%, 960px);
    box-sizing: border-box;
    margin: 28px 0 0;
    overflow: hidden;
    border: 2px solid var(--uwh-tint);
    border-radius: 10px;
}

.phoenixrise-references__summary {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    color: var(--case-nav-text);
    background: var(--uwh-tint);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.phoenixrise-references__summary::-webkit-details-marker {
    display: none;
}

.phoenixrise-references__summary:focus-visible {
    outline: 2px solid var(--case-accent);
    outline-offset: -4px;
}

.phoenixrise-references__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--case-accent);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.phoenixrise-references__chevron {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    margin-left: auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform 180ms ease;
}

.phoenixrise-references__details[open] .phoenixrise-references__chevron {
    transform: rotate(180deg);
}

.phoenixrise-references__list {
    display: grid;
    gap: 28px;
    padding: clamp(20px, 3vw, 32px);
    border-top: 1px solid var(--uwh-tint);
}

/* (more specific than the shared paragraph margin in
   css/case-study-layout.css, which loads after this file) */
.case-study__content .phoenixrise-references .phoenixrise-references__list p {
    margin: 0;
    overflow-wrap: anywhere;
}

.phoenixrise-reference__number {
    margin-right: 0.35em;
    font-weight: 700;
    white-space: nowrap;
}

.case-study__content .phoenixrise-references__list a {
    color: var(--case-accent);
    font-family: inherit;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.case-study__content .phoenixrise-citation {
    font-size: 0.72em;
    line-height: 0;
    vertical-align: super;
}

.case-study__content .phoenixrise-citation a {
    color: var(--case-link);
    font-size: inherit;
    text-decoration: none;
    text-underline-offset: 2px;
}

.case-study__content .phoenixrise-citation a:hover {
    color: var(--case-accent);
    text-decoration: underline;
}

.case-study__content .phoenixrise-citation a:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--case-accent);
    outline-offset: 2px;
}

/* A citation lands clear of the top of the screen and, on phones, the sticky
   bar: the same offsets as the page's sections */
.phoenixrise-references__list article {
    scroll-margin-top: 28px;
}

@media (max-width: 767px) {
    .phoenixrise-references__list article {
        scroll-margin-top: 72px;
    }
}

.phoenixrise-references__list article:focus {
    outline: 2px solid var(--case-accent);
    outline-offset: 4px;
}