/* ============================================================
   Cloudloop — case study
   Loaded after styles.css. Laid out after the Cloudloop slides in the
   portfolio Figma page: a pale sky-blue ground, white cards with a flat
   light-blue offset behind them, dashed rounded callouts, and the kit's own
   colours (sky #9fcbe4, lemon #f4d86c, lavender #b9b4e6, apricot #f3a64d).
   ============================================================ */

/* Relif's three colours, mapped one to one onto Cloudloop's own:
     pink   → apricot  #f4ac60
     blue   → the kit's sky  #e6f1f7
     yellow → #f7e290
   and the ground is white, so the kit's own paper is the lightest thing on
   the page. Every tint below is one of those three, lightened or deepened
   only as far as contrast needs. */
.theme-cl {
  --paper:       #ffffff;   /* white ground */
  --hero-bg:     #fdf2e6;   /* palest apricot — Relif's pink sheet */
  --sky:         #d5e6f1;   /* flat offset block behind the cards */
  --sky-dash:    #9cc6df;   /* dashed outlines */
  --card-blue:   #e6f1f7;   /* the theme blue: folder cards, hero slip */
  --tab-blue:    #6fa9cf;   /* deeper blue for rules, eyelets and marks */
  --mock-blue:   #cbe3f0;   /* mockup plate + active tab */
  --mock-blue-2: #e6f1f7;   /* inactive tab */
  --tab-hover:   #d9ebf4;
  --flow-bg:     #fce4cb;   /* apricot paper for the sticky notes */
  --tag-pink:    #f4ac60;   /* the apricot itself */
  --highlight:   #f7e290;   /* the yellow marker */
  --index-pink:  #f4ac60;
  --cl-lav:      #b9b4e6;
  --cl-apricot:  #f4ac60;
}


/* the card that recurs through the slides: white, with a flat sky block
   offset down and right behind it */
.cl-book img,
.theme-cl .figure--paper img {
  background: #fff;
  box-shadow: 14px 14px 0 var(--sky);
}

/* ---- hero: the standard 1408 x 817 sheet, as on Relif ------------------ */
/* the kit photographed on black takes the laptop's place; the sheet is the
   palest apricot, so the photo carries all the contrast */
/* a print laid on the sheet, the way the room photo is on Little Wood Home:
   a white margin all round, and far enough in from the left edge that it
   clears the punched holes (which end at 4.76%) rather than sitting on them */
.theme-cl .hero__photo {
  left: 6.6%;
  top: 30%;
  width: 62%;
  aspect-ratio: 1920 / 1002;
  object-fit: cover;
  border: 8px solid #fff;
  /* the same shadow the blue slip beside it casts, so the two sit on the
     sheet at the same height */
  box-shadow: var(--paper-shadow);
}

/* stacked, it is one of the things on the page rather than a thing on a
   sheet, so it takes the same width as the slip below it */
@media (max-width: 899px) {
  .theme-cl .hero__photo { width: 100%; }
}

/* ---- context: book cover beside the problem statement ------------------ */
.cl-book { margin: 0; justify-self: center; max-width: 380px; }
.cl-book img { display: block; width: 100%; height: auto; }
.cl-book figcaption { margin-top: 28px; text-align: center; font-size: var(--small); color: var(--ink-soft); }
.theme-cl .split__text .h3 { margin-top: clamp(32px, 3.33vw, 48px); }
.theme-cl .split__text .h3 + p { margin-top: 16px; }

/* ---- research cards ----------------------------------------------------- */
/* ---- workshop --------------------------------------------------------- */
/* three short steps, so the cards hold three to a row and stop at the height
   their text needs rather than the 279 of the taller ones elsewhere */
.theme-cl .findings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* the card keeps the 443 x 279 of the source component, so three to a row it
   simply scales down rather than flattening; as a grid item its own content
   can still push it taller if a step ever runs long */
.theme-cl .findings .note { min-height: auto; aspect-ratio: 443 / 279; }
/* two cards keep the photo card's 512, so they do not swell to half the
   1120 column */
.theme-cl .findings--two {
  grid-template-columns: repeat(2, minmax(0, 512px));
  justify-content: space-between;
}
@media (max-width: 767px) {
  .theme-cl .findings,
  .theme-cl .findings--two { grid-template-columns: minmax(0, 1fr); }
}

/* the four workshop photos sit in polaroid frames, two and two, on the same
   two-up grid as the Challenge cards: 512 each, 96 between them at full width */
.polaroids--four {
  grid-template-columns: repeat(2, minmax(0, 512px));
  justify-content: space-between;
}
@media (max-width: 767px) { .polaroids--four { grid-template-columns: minmax(0, 1fr); justify-content: center; } }

/* the LEGO models are photo cards. The picture is the pair of A4 scans with
   the model built out over their edge — that break-out is the point of the
   photograph, so it is shown whole: no crop, and no plate behind it, since
   the scans bring their own paper. Every scan is the same A4, so showing them
   all at the card's full width keeps them the same size card to card. */
.theme-cl .pcard__media img {
  aspect-ratio: auto;
  height: auto;
  object-fit: fill;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

/* these titles label a picture rather than open a section, so they sit one
   step above their own caption instead of at the H4 of the other cards */
.theme-cl .pcard__title { font-size: 18px; }

/* controllability: three dots, filled to the level (●●● / ●●○ / ●○○).
   They stay black wherever they appear — on the pale card the theme blue was
   too quiet to read as a rating. */
/* the ●/○ come from the body face: set in Urbanist alongside the legend's
   own type they fall back to a much smaller circle */
.cl-dots {
  margin-right: 6px;
  letter-spacing: 2px;
  font-family: Overpass, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1;
  color: var(--ink);
}
.cl-dots[data-level="3"]::before { content: "●●●"; }
.cl-dots[data-level="2"]::before { content: "●●○"; }
.cl-dots[data-level="1"]::before { content: "●○○"; }
.theme-cl .pcard__n { display: inline-flex; align-items: center; color: var(--ink); }

/* the legend is set in the heading face, so it matches the card titles it
   explains */
.cl-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
  margin-top: 16px;
  font-family: Urbanist, sans-serif;
  font-weight: 600;
}
.cl-legend__item { display: inline-flex; align-items: center; }
.cl-legend .cl-dots { margin-right: 14px; }
/* on a phone, one level to a line: the three set as a block in the middle,
   their dots lined up in a column */
@media (max-width: 599px) {
  .cl-legend {
    display: grid;
    justify-content: center;
    justify-items: start;
    gap: 10px;
  }
}

/* ---- prototyping: the pictures laid out as on the slide ---------------- */
/* Instructions and Tool are compositions, not rows: each picture sits at its
   own place on the 1920 x 1080 board, so the two booklet spreads step down
   from one another and the tool's three stages read left to right. --l/--t/--w
   are the picture's place in per cent of that board. */
.theme-cl .tabshot__free { position: absolute; inset: 0; }
.theme-cl .tabshot__free img {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: auto;
}

/* the dashed arrows that carry the tool from one stage to the next — without
   them the three pictures read as three objects rather than one change */
.theme-cl .tabshot__arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.theme-cl .tabshot__arrows path {
  fill: none;
  stroke: var(--sky-dash);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 14 12;
}
.theme-cl .tabshot__arrows marker path {
  fill: none;
  stroke: var(--sky-dash);
  stroke-width: 1.6;
  stroke-dasharray: none;
}

/* ---- testing ------------------------------------------------------------ */
.cl-testing { display: grid; gap: clamp(32px, 4vw, 48px); }

/* one card per tester: their two photographs side by side, and what they said
   underneath. The snapshots come at every shape, from a tall receipt roll to
   a wide page, so each goes into a 3:4 box and is cropped to it — otherwise
   one would run several times the height of its neighbour. No plate behind
   them, as on the LEGO cards. */
.theme-cl .pcard__media--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
/* a little squarer than 3:4, so the handwritten pages keep more of their
   writing when they are cropped to the box */
.theme-cl .pcards--shots .pcard__media img {
  aspect-ratio: 5 / 6;
  object-fit: cover;
}
.theme-cl .pcards--shots figcaption p { font-style: italic; }
.theme-cl .panel { min-width: 0; }
.theme-cl .mockup__body { padding: clamp(20px, 3.5cqw, 44px); }
.cl-iter { display: grid; gap: 24px; }
.cl-iter__why { margin: 0; padding: 12px 18px; background: #fff; border-radius: 12px; }
.cl-iter__why b { margin-right: 8px; padding: 0 6px; background: var(--highlight); font-family: Urbanist, sans-serif; }

/* the board sits directly under the Problem bar, so it is rounded to the same
   12 the bar uses. The picture fills its box exactly, so the radius has to sit
   on the picture as well as the box. */
.theme-cl .cl-iter .tabshot,
.theme-cl .cl-iter .tabshot > img { border-radius: 12px; }

/* The notes on these boards belong to a composition, so they scale with it.
   At a fixed 14px the text wraps into a taller and taller column as the board
   narrows, until the note grows off the top edge — which is what clipped the
   two notes on Motivation. Sizing the type and the padding in container units
   keeps every note the same shape at any width. */
.theme-cl .cl-iter .tabshot .sticky {
  padding: clamp(8px, 1.1cqw, 14px) clamp(9px, 1.3cqw, 16px);
  font-size: clamp(10px, 1.25cqw, 14px);
}

/* Placed by its TOP-LEFT corner instead of its bottom-right: where a note has
   a gap to sit in and the room is below it, anchoring the top keeps the top
   edge on the mark and lets the note grow downwards into that room. */
.theme-cl .cl-iter .sticky--tl {
  right: auto;
  bottom: auto;
  left: var(--sx);
  top: var(--sy);
}

/* ---- final outcome: a loose collage of kit photos ----------------------- */
.cl-final {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.cl-final figure { margin: 0; position: relative; }
.cl-final img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cl-final figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 2px 10px;
  background: rgba(255, 255, 255, .92);
  border-radius: 999px;
  font-size: 13px;
}
.cl-final__a { grid-column: span 3; aspect-ratio: 16 / 10; }
.cl-final__b { grid-column: span 3; aspect-ratio: 16 / 10; }
.cl-final__c { grid-column: span 2; aspect-ratio: 3 / 2; }
.cl-final__d { grid-column: span 2; aspect-ratio: 3 / 2; }
.cl-final__e { grid-column: span 2; aspect-ratio: 3 / 2; }
.cl-final__f { grid-column: span 6; aspect-ratio: 21 / 9; }
@media (max-width: 767px) {
  .cl-final { grid-template-columns: minmax(0, 1fr); }
  .cl-final figure { grid-column: auto; aspect-ratio: 3 / 2; }
}

.cl-ending { margin: 0; }
.cl-ending img { display: block; width: 100%; height: auto; box-shadow: var(--paper-shadow); }
.cl-ending figcaption { margin-top: 14px; text-align: center; color: var(--ink-soft); }
.cl-ending a, .footer a { color: inherit; }

/* Below 768 a one-picture tab drops its 16:9 box and lets the note fall under
   the picture. These two panels cannot do that: their pictures are placed on
   the board, so a collapsed box leaves them nothing to sit in and the whole
   composition lands on the section below. The board keeps its own 16:9 and
   becomes a block in the flow, with the notes stacked beneath it. */
@media (max-width: 767px) {
  .theme-cl .tabshot--board {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
  }
  .theme-cl .tabshot--board .tabshot__free {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #fff;           /* the board's own plate, now the box has none */
    border-radius: 4px;
    /* The board is composed on a 16:9 canvas with room above and below for the
       notes, and on a phone the notes move out from under them — leaving that
       room standing empty. Pull the two empty bands off with negative margins
       so the canvas is cropped to the pictures themselves and simply scales
       down with the page. A percentage margin resolves against the width, and
       the canvas is 56.25% of its width tall, so a band of n% of the canvas
       height is 0.5625n% here. */
    margin-top: calc(-1 * var(--ct, 0%));
    margin-bottom: calc(-1 * var(--cb, 0%));
    /* The negative margins only move the box; its white plate still paints
       over the two cropped bands, and the caption — which starts 12px after
       the box's own bottom margin — lands on top of that paint, so the gap
       disappears. Clipping the plate to the same bands gives the caption its
       12 back. The insets are shares of the width, and the box is 56.25% of
       its width tall, so they are converted before being read as height. */
    clip-path: inset(calc(var(--ct, 0%) / 0.5625) 0 calc(var(--cb, 0%) / 0.5625) 0);
  }

  /* under the picture the notes are ordinary captions again, so they take the
     page's own caption size rather than the size they had as part of the
     composition */
  /* Stacked, a note stops being a note and becomes a caption — Relif's
     caption, declaration for declaration: a bar of the page's note paper,
     square where it meets the left margin and rounded on the right to the
     picture's own radius, a deeper rule down its left edge, and the number
     set in that same colour with no disc behind it. */
  .theme-cl .sticky,
  .theme-cl .cl-iter .tabshot .sticky {
    margin: 12px 0 0;
    padding: 12px 16px 12px 46px;
    border-left: 3px solid var(--tab-blue);
    border-radius: 0 4px 4px 0;
    font-size: var(--small);
    line-height: 1.6;
  }

  .theme-cl .sticky .mark--tag {
    background: none;
    color: var(--tab-blue);
  }

  /* these two are placed by their top-left corner on the board, and relative
     positioning would read that placement as an indent once they stack */
  .theme-cl .cl-iter .sticky--tl { inset: auto; }

  /* and the boards drop their 12 for the radius every other picture on the
     page has, so nothing on the page rounds differently */
  .theme-cl .cl-iter .tabshot,
  .theme-cl .cl-iter .tabshot > img { border-radius: 4px; }
}