/*
  Case study layout (layouts/case-study.njk) — reusable across "featured" projects
  (.eleventy.js's own comment already anticipated this: "'featured' projects use
  the case-study layout"). Each project supplies its own font via --project-font
  (frontmatter `fontFamily` + `fontImports`, read in base.njk) — Layo's Figma uses
  Montserrat, not the site's own Poppins, and per direct request that's kept
  per-project rather than normalized, since a future project could just as easily
  bring its own different brand font.

  First pass: title banner + overview (tags/mockup/intro/meta). Values below come
  from Figma node 6536:4181 ("Layo", 1920x11603 at the 1920 reference — same
  fluid clamp() convention as the rest of the site). The methodology diagram, pain
  points, personas, feature breakdown, wireframes, and closing sections aren't
  built yet — this file only covers what's rendered so far.
*/
.case-study {
  font-family: var(--project-font);
  max-width: var(--content-max-width);
  margin: 0 auto;
  overflow-x: hidden;
}

/* Title banner: white card holding just the project's own wordmark + subtitle,
   plus the 3 CTA links tucked along its bottom edge. */
.case-study-title {
  position: relative;
  background-color: #fff;
  padding-top: clamp(48px, 4.782vw, 91.82px);
  padding-bottom: clamp(68px, 6.771vw, 130px);
  text-align: center;
}

.case-study-title__logo {
  display: block;
  margin: 0 auto;
  width: clamp(243px, 24.311vw, 466.78px);
  height: clamp(179px, 17.894vw, 343.57px);
}

.case-study-title__subtitle {
  margin: clamp(27px, 2.651vw, 50.91px) 0 0;
  color: #000;
  font-family: var(--project-font);
  font-weight: 400;
  font-size: clamp(23px, 2.304vw, 44.229px);
}

.case-study-title__subtitle strong {
  font-weight: 700;
}

.case-study-title__links {
  position: relative;
  margin-top: clamp(34px, 3.385vw, 65px);
  height: clamp(23px, 2.24vw, 43px);
}

.case-study-title__links a {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: #192d8f;
  font-family: var(--project-font);
  font-weight: 500;
  font-size: clamp(9px, 0.833vw, 16px);
  text-align: center;
  text-decoration: underline;
}

.case-study-title__links a:hover {
  color: var(--color-green-2);
}

.case-study-title__links a:nth-child(1) {
  left: clamp(68px, 6.771vw, 130px);
  width: clamp(89px, 8.854vw, 170px);
}

.case-study-title__links a:nth-child(2) {
  left: clamp(244px, 24.372vw, 467.94px);
  width: clamp(152px, 15.208vw, 292px);
}

.case-study-title__links a:nth-child(2) span {
  display: block;
  font-weight: 400;
}

.case-study-title__links a:nth-child(3) {
  left: clamp(934px, 93.383vw, 1792.94px);
  width: clamp(117px, 11.667vw, 224px);
}

/*
  Overview: 3-column absolute layout (tags / mockup+intro / meta), same
  pixel-matched-then-clamp()-scaled convention as .hero and .about-intro, since
  Figma positioned these as free-floating elements rather than a real auto-layout
  row. The body paragraph below it spans its own width, left-aligned rather than
  centered in the 3 columns above it — that's how Figma has it too.
*/
.case-study-overview {
  position: relative;
  height: clamp(743px, 74.351vw, 1427.53px);
  padding: 0 clamp(30px, 3vw, 58px);
}

.case-study-overview__tags {
  position: absolute;
  left: clamp(54px, 5.365vw, 103px);
  top: clamp(34px, 3.423vw, 65.71px);
  display: flex;
  flex-direction: column;
  gap: clamp(25px, 2.5vw, 48px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-study-overview__tags li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(129px, 12.852vw, 246.747px);
  height: clamp(29px, 2.917vw, 56px);
  border-radius: clamp(8px, 0.833vw, 16px);
  background-color: #192d8f;
  color: #fff;
  font-family: var(--project-font);
  font-weight: 500;
  font-size: clamp(13px, 1.25vw, 24px);
  text-align: center;
}

/*
  Intro card, photo and phone mockup are independent absolutely-positioned
  siblings (like __tags and __meta below), not nested inside a shared wrapper —
  they used to live inside a "__center" box, which made the intro's own
  position/width resolve against THAT box instead of the section, pushing it out
  over the mockup instead of sitting to its left like Figma has it. Values below
  measured directly from the Figma render (node 6536:4181) at the 1920px
  reference width.
*/
.case-study-overview__intro {
  position: absolute;
  left: clamp(252px, 25.26vw, 485px);
  top: clamp(115px, 11.51vw, 221px);
  width: clamp(260px, 26.094vw, 501px);
  height: clamp(232px, 23.281vw, 447px);
  margin: 0;
  padding: clamp(17px, 1.667vw, 32px);
  box-sizing: border-box;
  background-color: #dce4fa;
  border-radius: clamp(6px, 0.625vw, 12px);
  color: #192d8f;
  font-family: var(--project-font);
  font-weight: 500;
  font-size: clamp(13px, 1.25vw, 24px);
}

.case-study-overview__photo {
  position: absolute;
  left: clamp(511px, 51.198vw, 983px);
  top: clamp(30px, 2.969vw, 57px);
  width: clamp(487px, 48.802vw, 937px);
  height: clamp(355px, 35.573vw, 683px);
  object-fit: cover;
  border-radius: clamp(6px, 0.625vw, 12px);
}

.case-study-overview__mockup {
  position: absolute;
  left: clamp(425px, 42.604vw, 818px);
  top: clamp(276px, 27.604vw, 530px);
  width: clamp(204px, 20.417vw, 392px);
  height: auto;
  display: block;
}

.case-study-overview__meta {
  position: absolute;
  left: clamp(679px, 67.917vw, 1304px);
  top: clamp(491px, 49.152vw, 943.71px);
  width: clamp(251px, 25.104vw, 482px);
  margin: 0;
}

.case-study-overview__meta div {
  margin-bottom: clamp(7px, 0.712vw, 13.67px);
}

.case-study-overview__meta dt {
  color: #000;
  font-family: var(--project-font);
  font-weight: 400;
  font-size: clamp(8px, 0.833vw, 16px);
}

.case-study-overview__meta dd {
  margin: 0;
  color: #000;
  font-family: var(--project-font);
  font-weight: 400;
  font-size: clamp(13px, 1.25vw, 24px);
}

.case-study-overview__body {
  position: absolute;
  left: clamp(60px, 5.99vw, 115px);
  top: clamp(635px, 63.465vw, 1218.53px);
  width: clamp(305px, 30.469vw, 585px);
  margin: 0;
  color: #000;
  font-family: var(--project-font);
  font-weight: 400;
  font-size: clamp(13px, 1.25vw, 24px);
}

.case-study-overview__body strong {
  font-weight: 700;
}

/* Decorative character strip — Figma scatters these individually across the
   title/overview area; kept as one simple centered row here since their exact
   positions aren't load-bearing content. */
.case-study-characters {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(16px, 2vw, 38px);
  padding: clamp(24px, 3vw, 58px) clamp(20px, 2vw, 38px);
}

.case-study-characters img {
  height: clamp(60px, 6vw, 115px);
  width: auto;
}

@media (max-width: 900px) {
  .case-study-overview {
    height: auto;
    padding: clamp(24px, 4vw, 40px) 20px;
  }

  .case-study-overview__tags,
  .case-study-overview__intro,
  .case-study-overview__photo,
  .case-study-overview__mockup,
  .case-study-overview__meta,
  .case-study-overview__body {
    position: static;
    width: auto;
    height: auto;
    margin: 0 auto 32px;
  }

  .case-study-overview__tags {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .case-study-title__links {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .case-study-title__links a {
    position: static;
    transform: none;
    width: auto !important;
  }
}