/* Einstein overrides on top of the shared case-study styles.
   Bigger headings and less text per block than the other case studies, plus
   the blocks that only exist here: stacked site captures, the Instagram grid
   and the anniversary pieces. */

:root{
  --accent:#0079B0;
  --accent-text:#116A9E;
  --accent-soft:#E8F4FC;
}

.cs-title{ font-size:clamp(34px, 5vw, 56px); line-height:1.1; }

.ei-note{
  text-align:center; max-width:520px; margin:10px auto 0; font-size:13.5px; color:var(--gray);
}
.ei-link-sep{ color:var(--line); margin:0 10px; }

/* A second statement further inside a section, so it does not compete with
   the one that opens it */
.cs-lead.ei-lead-sub{ font-size:clamp(21px,2.4vw,28px); margin-top:52px; }

/* The "before": a tall capture of the old site, capped so it stays a
   reference and does not take over the section */
.ei-old-site{ margin:36px auto 0; max-width:560px; }
.ei-old-site img{
  width:100%; display:block; border-radius:14px; border:1px solid var(--line); background:#fff;
  max-height:520px; object-fit:cover; object-position:top;
}

.ei-site-video{ margin:36px auto 0; max-width:var(--measure-wide); }
.ei-site-video video{
  width:100%; display:block; border-radius:14px; border:1px solid var(--line); background:#000;
}

/* Site captures, stacked full width so the pages stay readable */
.ei-site-shots{ display:flex; flex-direction:column; gap:28px; margin-top:44px; }
.ei-site-shots figure{ margin:0; }
.ei-site-shots img{
  width:100%; display:block; border-radius:14px; border:1px solid var(--line); background:#fff;
}

/* Applications */
.ei-extras{ display:flex; flex-direction:column; gap:64px; margin-top:44px; }
.ei-extra h3{ margin:0 0 8px; font-size:24px; font-weight:600; color:var(--ink); text-align:center; }
.ei-extra > p{
  margin:0 auto; max-width:560px; font-size:16px; line-height:1.6; color:var(--ink-soft); text-align:center;
}
.ei-extra-note{
  margin:22px auto 0 !important; max-width:560px; font-size:15px; line-height:1.6;
  color:var(--ink-soft); text-align:center;
}

.ei-posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
.ei-posts figure{ margin:0; }
.ei-posts img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  border-radius:12px; border:1px solid var(--line); background:#fff;
}
@media (max-width:700px){ .ei-posts{ grid-template-columns:repeat(2,1fr); } }

.ei-pieces{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; }
.ei-pieces figure{ margin:0; }
.ei-pieces figure.size-wide{ grid-column:span 3; }
.ei-pieces img{
  width:100%; display:block; border-radius:12px; border:1px solid var(--line); background:#fff;
}
.ei-pieces figure.size-sm img{ aspect-ratio:1; object-fit:cover; }
@media (max-width:700px){
  .ei-pieces{ grid-template-columns:1fr; }
  .ei-pieces figure.size-wide{ grid-column:span 1; }
}

/* A link with no URL yet: present, but clearly not clickable */

/* Pieces grid for the t-shirt and the social projects. Sizes let a wide mockup
   sit next to two smaller shots without a bespoke rule per project. */
.ei-piece-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:20px;
  max-width:var(--measure-wide); margin:40px auto 0; align-items:start;
  justify-content:center;
}
/* A short row of small pieces centres instead of hugging the left edge */
.ei-piece-grid.is-centered{ display:flex; justify-content:center; flex-wrap:wrap; }
.ei-piece-grid.is-centered figure{ width:min(260px,42%); }
.ei-piece-grid figure{ margin:0; grid-column:span 3; }
.ei-piece-grid figure.is-wide{ grid-column:span 6; }
.ei-piece-grid figure.is-sm{ grid-column:span 2; }
.ei-piece-grid img{
  width:100%; display:block; border-radius:14px; border:1px solid var(--line); background:#fff;
}
.ei-piece-grid.is-posts{ grid-template-columns:repeat(3,1fr); }
.ei-piece-grid.is-posts figure{ grid-column:span 1; }
@media (max-width:700px){
  .ei-piece-grid{ grid-template-columns:repeat(2,1fr); }
  .ei-piece-grid figure, .ei-piece-grid figure.is-sm{ grid-column:span 1; }
  .ei-piece-grid figure.is-wide{ grid-column:span 2; }
  .ei-piece-grid.is-posts{ grid-template-columns:repeat(2,1fr); }
}

/* The six brand colours, straight from the manual */
.ei-palette{
  display:grid; grid-template-columns:repeat(6,1fr); gap:16px;
  max-width:var(--measure-wide); margin:40px auto 0;
}
.ei-swatch{ display:flex; flex-direction:column; gap:6px; text-align:left; }
.ei-swatch-chip{ display:block; height:88px; border-radius:12px; border:1px solid var(--line); }
.ei-swatch-name{ font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--ink); }
.ei-swatch-hex{ font-size:11px; color:var(--gray); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
@media (max-width:700px){ .ei-palette{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:420px){ .ei-palette{ grid-template-columns:repeat(2,1fr); } }

/* Label above a group of pieces. Its own class so it does not inherit the
   colon and the marker indent that belong to the topic lists. */
.ei-group-title{
  text-align:center; margin:64px 0 0;
  font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:0;
  color:var(--eyebrow);
}
.ei-group-title + .ei-piece-grid{ margin-top:24px; }

/* Reference images for a moodboard step. No captions, so they tile evenly. */
.ei-inspo-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  max-width:var(--measure-wide); margin:36px auto 0;
}
.ei-inspo-grid img{
  width:100%; aspect-ratio:1; object-fit:cover; display:block;
  border-radius:12px; border:1px solid var(--line); background:#fff;
}
@media (max-width:700px){ .ei-inspo-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }