/* AMIN APAC — case.css
   ============================================================================
   Case studies. Loaded on TWO pages and split into two halves accordingly:

     1. .work-case — the profile's work tile, once there is a written-up case
        study behind it. Loaded by profile.html.
     2. .cs-* — the reader on case.html.

   ONE SHEET RATHER THAN TWO because the two halves are one feature and share
   the thing that matters about it: work imagery is never cropped to a shape the
   layout would prefer. Splitting them would put that rule in two places and
   let it drift.

   ALMOST NOTHING HERE DRAWS A READING COLUMN. insights.css already draws it -
   .ins-article, .ins-art-head, .ins-art-cols, .ins-art-body, .ins-h2, the
   sticky aside, the dark closer and the 404 are all its work, and case.html
   uses them verbatim. What is below is only what a case study needs that a
   field note does not.

   Loaded AFTER insights.css on case.html, which is load-bearing for .cs-media -
   it overrides the article plate's 21:9 crop. See the note there.
   ============================================================================ */

/* --- 1. The profile tile -------------------------------------------------
   A tile with a case study behind it is a link, not a picture that enlarges.
   It has to say so before it is clicked, which is what the caption is for -
   without it the tile is indistinguishable from the six beside it that open a
   viewer, and the visitor learns the difference only by being taken off the
   page they were on.

   The caption is ALWAYS VISIBLE, not revealed on hover. Half this grid is read
   on a touch screen where there is no hover, and a hover-only affordance there
   is not a subtle design - it is a missing one. */
.work-case{
  position:relative;display:block;
  text-decoration:none;color:inherit;
  /* .work-item already carries the ground, the border, the radius and the
     overflow clip. This only adds what a link needs. */
}
.work-case img{
  /* The tile keeps the grid's 4:3 so a member's row does not go ragged the
     moment one piece is written up. The uncropped version is the reward for
     opening it. */
  transition:transform 320ms cubic-bezier(.2,.7,.3,1);
}
.work-case:hover img{transform:scale(1.03)}

.wc-cap{
  position:absolute;inset:auto 0 0 0;
  display:flex;flex-direction:column;gap:2px;
  padding:var(--s8) var(--s4) var(--s4);
  /* A gradient, not a flat bar: the images are posters and stills with their own
     composition, and a solid block across the bottom third of somebody's
     campaign is a crop by another name.

     THE RAMP IS STEEP RATHER THAN EVEN, and that is measured against the work
     rather than chosen. A lot of this imagery is a poster with its own body copy
     low in the frame - Connect's mental-health execution sets three lines of
     small type exactly where the caption sits - and a gentle ramp left the
     caption and the artwork's own text interleaved and both unreadable. So the
     band is nearly opaque across the height the caption actually occupies and
     then falls away fast, which covers less of the picture in total than the
     softer version did. */
  background:linear-gradient(to top,
    rgba(20,22,26,.95) 0%, rgba(20,22,26,.9) 38%,
    rgba(20,22,26,.55) 72%, rgba(20,22,26,0) 100%);
  color:var(--white);
  pointer-events:none;
}
.wc-client{
  font-size:11px;font-weight:600;line-height:16px;
  letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.wc-title{
  font-size:15px;font-weight:500;line-height:21px;
  /* Two lines, then ellipsis. A four-line title inside a 4:3 tile eats the
     picture it is supposed to be labelling. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.wc-go{
  margin-top:var(--s2);
  font-size:12px;font-weight:500;line-height:18px;
  color:rgba(255,255,255,.82);
}
.wc-go i{display:inline-block;font-style:normal;transition:transform 200ms ease}
.work-case:hover .wc-go i{transform:translateX(3px)}

/* The frames after the first one in the same case study. Client and title are
   already on the lead tile beside them, so these carry the invitation alone -
   see the note in js/member-cases.js on the row that printed one campaign's
   name three times. The case study's name still reaches a screen reader through
   the link's aria-label.

   A CHIP, NOT A SCRIM, and this is the third thing about the caption that only
   showed up on the real artwork. A gradient cannot guarantee contrast over an
   arbitrary poster: Connect's mental-health execution sets four lines of small
   white type across the bottom of the frame, and at every scrim opacity that
   still let the picture through, that type and the words "Read the case study"
   overprinted each other.

   The lead tile is fine on a scrim because its caption is three lines deep and
   sits over the strong end of the ramp. A single line does not have that
   protection, so it gets a hard edge instead. A chip also reads as a control,
   which is the right signal for a tile whose only job is to say "this goes
   somewhere", and it covers a fraction of what the scrim did. */
.work-case.is-sub .wc-cap{
  inset:auto auto var(--s4) var(--s4);
  padding:7px 13px;
  background:rgba(20,22,26,.9);
  border-radius:var(--r-pill);
}
.work-case.is-sub .wc-go{margin-top:0;color:var(--white)}

/* The focus ring goes on the tile itself. base.css puts overflow:hidden on
   .work-item, so an inset outline would be clipped by the very thing it needs
   to sit outside of - hence the offset ring on the outer box. */
.work-case:focus-visible{
  outline:2px solid var(--purple-deep);outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  .work-case img,.wc-go i{transition:none}
  .work-case:hover img{transform:none}
}

/* --- 2. The reader ------------------------------------------------------- */

.cs-client{margin-bottom:var(--s4);color:var(--purple-deep)}
.ins-crumb-now{color:var(--gray);font-size:13px;font-weight:500}

/* The placeholder notice. Amber, because the site already has one meaning for
   amber - js/profile-draft.js's bar - and it is this one: what you are looking
   at is not the finished thing. Not red: the page is not broken and nothing has
   gone wrong. It sits above the imagery, not under the result, because a
   disclosure a reader reaches after the claim has landed is not a disclosure. */
.cs-flag{
  max-width:1080px;margin:var(--s10) auto 0;
  padding:var(--s5) var(--s6);
  background:#FDF6E3;border:1px solid #E8D9A8;border-radius:var(--r-md);
  color:#6B4E06;font-size:15px;line-height:24px;
}
.cs-flag b{font-weight:600}
/* The plate below it keeps its own bottom margin but loses the top one - two
   stacked 40px gaps read as the notice floating unattached to the page. */
.cs-flag + .cs-media{margin-top:var(--s6)}

/* UNCROPPED, and this is the one override that justifies the sheet's load
   order. .ins-art-media is a 21:9 plate, which is right for a city photograph
   chosen to sit behind a headline and wrong for a poster: a 4:3 campaign image
   forced into 21:9 loses the top and bottom third, which on most of this
   imagery is the headline and the logo. The page exists to show the work
   properly, so the work sets its own height. */
.cs-media{
  aspect-ratio:auto;
  display:flex;justify-content:center;
  background:var(--offwhite);border:1px solid var(--line);
  /* fit-content, NOT the column's full 1080. A landscape still fills the
     measure and nothing changes; a portrait poster in a full-width box became a
     narrow strip of work floating in a large empty field, which reads as a
     layout that failed rather than as an image that is tall. The ground should
     hug the work, so the box takes the picture's width and the auto margins
     centre it. */
  width:fit-content;max-width:100%;
}
.cs-media img{
  width:auto;max-width:100%;
  /* Capped so a tall poster does not push the first paragraph off the second
     screen. 68vh leaves the reader something to read below the fold. */
  max-height:68vh;height:auto;object-fit:contain;
}

/* The result, first and set apart. It is the one part of a case study a
   sceptical reader is looking for, and as a run of body paragraphs under a
   heading it looked exactly like the two sections that follow it. */
.cs-result{
  margin-bottom:var(--s10);
  padding:var(--s7) var(--s8);
  background:var(--offwhite);
  border-left:3px solid var(--ac,var(--purple-deep));
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.cs-result .eyebrow{margin-bottom:var(--s4);color:var(--purple-deep)}
.cs-result p{margin-bottom:var(--s4);color:var(--black);font-size:20px;line-height:32px}
.cs-result p:last-child{margin-bottom:0}

/* Inline work imagery. Full column width and uncropped, same rule as the
   plate above - these are the supporting frames of the same piece. */
.cs-fig{
  margin:var(--s10) 0;
}
.cs-fig img{
  display:block;width:100%;height:auto;
  border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--offwhite);
}
.cs-fig figcaption{
  margin-top:var(--s3);
  color:var(--ash);font-size:13px;line-height:20px;
}

/* --- 3. More work from the same agency -----------------------------------
   Not the network's related row. See the note in js/case.js on why a lateral
   move to a different member is an exit dressed as a recommendation. */
.cs-more-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s5);
}
.cs-more-card{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color 180ms ease,transform 180ms ease;
}
.cs-more-card:hover{border-color:var(--lavender);transform:translateY(-2px)}
.cs-more-card:focus-visible{outline:2px solid var(--purple-deep);outline-offset:2px}
.cs-more-media{display:block;background:var(--offwhite)}
.cs-more-media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.cs-more-body{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5)}
.cs-more-client{
  font-size:11px;font-weight:600;line-height:16px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ash);
}
.cs-more-card b{color:var(--black);font-size:16px;font-weight:500;line-height:23px}
.cs-more-sum{
  color:var(--gray);font-size:14px;line-height:21px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

@media (prefers-reduced-motion:reduce){
  .cs-more-card{transition:none}
  .cs-more-card:hover{transform:none}
}

@media (max-width:600px){
  .cs-result{padding:var(--s6)}
  .cs-result p{font-size:18px;line-height:29px}
  .cs-media img{max-height:56vh}
}