/* ==========================================================
   UX CASE STUDY (InPath)
   Builds on project.css; same cream, teal and line colors.
   ========================================================== */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Hero: the artwork already holds the title, so show it whole */
.project-hero--inpath {
    max-width: 900px;
}

.project-hero--inpath img {
    height: auto;
    object-fit: initial;
}

/* Project / Role / Tools strip */
.case-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: #DED5C3;
    border: 1px solid #DED5C3;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.case-meta__item {
    background-color: #FFFFFF;
    padding: clamp(16px, 2vw, 24px) clamp(18px, 2.4vw, 30px);
}

.case-meta__label {
    display: block;
    margin-bottom: 6px;
    font-family: "DM Sans", Arial, sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #176C72;
}

.case-meta__value {
    font-family: "DM Sans", Arial, sans-serif;
    font-weight: 500;
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.5;
    color: #282D30;
}

/* Avoid single hanging words at the end of paragraphs */
.project-description p,
.case-persona__need {
    text-wrap: pretty;
}

/* No extra space under the last paragraph of a text box */
.project-description > p:last-child {
    margin-bottom: 0;
}

/* Section number above each heading */
.case-num {
    display: block;
    margin-bottom: 10px;
    font-family: "DM Sans", Arial, sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #176C72;
}

.project-description .case-num + h3,
.project-description .case-num + p {
    margin-top: 0;
}

/* "How Might I..." callout */
.case-hmw {
    margin-top: 6px;
    padding: clamp(18px, 2.4vw, 28px);
    background-color: #EAF5F3;
    border-left: 4px solid #176C72;
    border-radius: 0 14px 14px 0;
}

.case-hmw__label {
    display: block;
    margin-bottom: 6px;
    font-family: "DM Sans", Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #176C72;
}

.project-description .case-hmw p {
    margin: 0;
    font-size: clamp(17px, 1.6vw, 21px);
    font-weight: 500;
    line-height: 1.5;
    color: #282D30;
}

/* Goal cards */
.case-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.6vw, 20px);
    margin-top: 6px;
}

.case-card {
    padding: clamp(16px, 2vw, 24px);
    background-color: #F7F2E8;
    border: 1px solid #DED5C3;
    border-radius: 14px;
}

.case-card h4 {
    margin: 0 0 8px;
    font-family: "DM Sans", Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(17px, 1.5vw, 20px);
    color: #176C72;
}

.project-description .case-card p {
    margin: 0;
    line-height: 1.6;
}

/* Logo in "Behind the Name" */
.case-logo {
    margin-top: 10px;
    padding: clamp(24px, 4vw, 48px);
    background-color: #F7F2E8;
    border-radius: 14px;
    text-align: center;
}

.case-logo img {
    width: min(100%, 460px);
    height: auto;
}

/* Personas: image + one-line need under it */
.case-persona {
    max-width: 1200px;
    margin: 0 auto clamp(30px, 4vw, 50px);
}

.case-persona .project-image-single {
    margin-bottom: 14px;
    border-radius: 18px;
}

.case-persona__need {
    margin: 0;
    padding: clamp(14px, 1.8vw, 20px) clamp(18px, 2.4vw, 28px);
    background-color: #FFFFFF;
    border: 1px solid #DED5C3;
    border-radius: 14px;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.6;
    color: #4D5559;
}

.case-persona__need strong {
    color: #282D30;
}

/* Rounded corners for full-width images on this page */
.case-persona .project-image-single,
main > .project-image-single {
    border-radius: 18px;
}

.project-image-single--medium {
    max-width: 760px;
}

/* Tall artwork (e.g. before/after board) stays a readable size */
.project-image-single--tall {
    max-width: 900px;
}

/* Persona deck: one card on top, the others peeking out underneath */
.persona-deck {
    max-width: 1200px;
    margin: 0 auto clamp(30px, 4vw, 50px);
}

.persona-deck__stack {
    display: grid;
    padding: 0 48px 48px 0; /* room for the cards peeking out below and to the right */
}

.persona-card {
    grid-area: 1 / 1;
    margin: 0;
    background-color: #FFFFFF;
    border: 1px solid #DED5C3;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px -18px rgba(40, 45, 48, 0.45);
    transform-origin: 50% 100%;
    transition: transform 0.45s ease, filter 0.45s ease, opacity 0.45s ease;
}

.persona-card img {
    display: block;
    width: 100%;
    height: auto;
}

.persona-card .case-persona__need {
    border: none;
    border-top: 1px solid #DED5C3;
    border-radius: 0;
}

.persona-card[data-pos="0"] {
    z-index: 3;
}

.persona-card[data-pos="1"] {
    z-index: 2;
    transform: translate(24px, 24px);
    filter: brightness(0.92);
    cursor: pointer;
}

.persona-card[data-pos="2"] {
    z-index: 1;
    transform: translate(48px, 48px);
    filter: brightness(0.84);
    cursor: pointer;
}

/* cards already viewed slide off to the left and fade out */
.persona-card[data-pos="past"] {
    z-index: 0;
    transform: translateX(-40px);
    opacity: 0;
    pointer-events: none;
}

.persona-card[data-pos="1"]:hover,
.persona-card[data-pos="2"]:hover {
    filter: brightness(1);
}

.persona-deck__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 14px;
}

.persona-deck__btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #DED5C3;
    background-color: #FFFFFF;
    color: #176C72;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.persona-deck__btn:not(:disabled):hover,
.persona-deck__btn:not(:disabled):focus-visible {
    background-color: #176C72;
    border-color: #176C72;
    color: #FFFFFF;
}

/* greyed out when there is nowhere further to go */
.persona-deck__btn:disabled {
    color: #C9C2B4;
    border-color: #E8E1D3;
    background-color: #F7F2E8;
    cursor: default;
}

.persona-deck__dots {
    display: flex;
    gap: 10px;
}

.persona-deck__dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid #176C72;
    background-color: transparent;
    cursor: pointer;
}

.persona-deck__dot.is-active {
    background-color: #176C72;
}

@media (max-width: 760px) {
    .persona-deck__stack {
        padding: 0 24px 24px 0;
    }

    .persona-card[data-pos="1"] {
        transform: translate(12px, 12px);
    }

    .persona-card[data-pos="2"] {
        transform: translate(24px, 24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .persona-card {
        transition: none;
    }
}

/* Blank spot for an image still being made */
.case-placeholder {
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    margin: 0 auto clamp(30px, 4vw, 50px);
    background-color: #FFFFFF;
    border: 2px dashed #DED5C3;
    border-radius: 18px;
}

/* Interactive prototype */
.case-prototype {
    scroll-margin-top: 130px;
}

.case-prototype__frame {
    margin-top: 10px;
    background-color: #F7F2E8;
    border: 1px solid #DED5C3;
    border-radius: 14px;
    overflow: hidden;
}

.case-prototype__frame iframe {
    display: block;
    width: 100%;
    height: clamp(640px, 88vh, 940px);
    border: 0;
}

.project-description p.case-prototype__open {
    margin: 14px 0 0;
}

.case-prototype__open a {
    font-weight: 600;
    color: #176C72;
}

/* Scrollable strip of all screens under the prototype */
.case-screens {
    margin-top: clamp(28px, 3.5vw, 44px);
    padding-top: clamp(24px, 3vw, 36px);
    border-top: 1px solid #DED5C3;
}

.case-screens__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.case-screens__title {
    margin: 0;
    font-family: "DM Sans", Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 1.6vw, 22px);
    color: #282D30;
}

.case-screens__nav {
    display: flex;
    gap: 10px;
}

.case-screens__btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #DED5C3;
    background-color: #FFFFFF;
    color: #176C72;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.case-screens__btn:hover,
.case-screens__btn:focus-visible {
    background-color: #176C72;
    border-color: #176C72;
    color: #FFFFFF;
}

.case-screens__track {
    display: flex;
    gap: clamp(14px, 1.8vw, 24px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 14px;
    scrollbar-color: #176C72 #EFE7D8;
}

.case-screens__item {
    flex: 0 0 clamp(170px, 20vw, 230px);
    margin: 0;
    scroll-snap-align: start;
}

.case-screens__item img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #DED5C3;
    border-radius: 16px;
    background-color: #FAF9F6;
}

.case-screens__item figcaption {
    margin-top: 10px;
    text-align: center;
    font-family: "DM Sans", Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #4D5559;
}

/* Floating "Skip to prototype" button, bottom right */
.skip-proto {
    position: fixed;
    right: clamp(16px, 2.4vw, 32px);
    bottom: clamp(16px, 2.4vw, 32px);
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background-color: #176C72;
    color: #FFFFFF;
    font-family: "DM Sans", Arial, sans-serif;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 10px 24px -10px rgba(23, 108, 114, 0.6);
    transition: background-color 0.3s, transform 0.3s, opacity 0.3s;
}

.skip-proto:hover,
.skip-proto:focus-visible {
    background-color: #0F5257;
    transform: translateY(-2px);
}

.skip-proto span {
    font-size: 17px;
    line-height: 1;
}

.skip-proto.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

/* Tablet / phone */
@media (max-width: 760px) {
    .case-meta,
    .case-cards {
        grid-template-columns: 1fr;
    }

    .case-prototype__frame iframe {
        height: 80vh;
    }

    .skip-proto {
        padding: 10px 16px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skip-proto {
        transition: none;
    }
}