/* Work card component (Figma: matsiutsia-elements, node 31:86). Used by
   the "Selected works" grid on index.html and the case-studies grid on
   design.html, which also adds a tag-filter row styled at the bottom
   of this file. index.html doesn't load fonts.css (its fonts live
   inline in index.css), so the two new families used here are
   declared once, at the top of this file, which both pages load. */

@font-face{font-family:"Figtree:Regular";font-style:normal;font-weight:400;src:url("../assets/fonts/v2/Figtree_1/Figtree_1-latin.woff2") format("woff2");font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Figtree:Regular";font-style:normal;font-weight:400;src:url("../assets/fonts/v2/Figtree_1/Figtree_1-latin-ext.woff2") format("woff2");font-display:block;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* EB Garamond Medium reuses the same variable-weight files as
   "EB Garamond:Regular" (styles/fonts.css) - only the font-weight
   descriptor differs, which is enough to pin the variable font's
   wght axis to 500 for this family name. */
@font-face{font-family:"EB Garamond:Medium";font-style:normal;font-weight:500;src:url("../assets/fonts/v2/EBGaramond_wght__1/EBGaramond_wght__1-english.woff2");font-display:block;unicode-range:U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond:Medium";font-style:normal;font-weight:500;src:url("../assets/fonts/v2/EBGaramond_wght__1/EBGaramond_wght__1-rest-latin.woff2");font-display:block;unicode-range:U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF}
@font-face{font-family:"EB Garamond:Medium";font-style:normal;font-weight:500;src:url("../assets/fonts/v2/EBGaramond_wght__1/EBGaramond_wght__1-latin-extended-a.woff2");font-display:block;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F}
@font-face{font-family:"EB Garamond:Medium";font-style:normal;font-weight:500;src:url("../assets/fonts/v2/EBGaramond_wght__1/EBGaramond_wght__1-latin-extended-b.woff2");font-display:block;unicode-range:U+0180-024F}
@font-face{font-family:"EB Garamond:Medium";font-style:normal;font-weight:500;src:url("../assets/fonts/v2/EBGaramond_wght__1/EBGaramond_wght__1-latin-extended-additional.woff2");font-display:block;unicode-range:U+1E00-1EFF}
@font-face{font-family:"EB Garamond:Medium";font-style:normal;font-weight:500;src:url("../assets/fonts/v2/EBGaramond_wght__1/EBGaramond_wght__1-rest.woff2");font-display:block;unicode-range:U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-FFFF}

.work-section,
.work-section * {
  box-sizing: border-box;
}

.work-section {
  max-width: none;
  margin: 0 auto;
  padding: 0 20px 96px;
}

/* Homepage only: cap the section to the same content width as
   voyage-monitor.html's desktop column (measured at 900px, border-box)
   so the two-up grid below doesn't run wider than the case-study pages.
   margin-top mirrors .page > section below, since index.html doesn't use
   the shared .page wrapper that would otherwise supply it. */
.work-section--home {
  max-width: 900px;
  margin-top: 40px;
}

/* Matches .page h2 (styles/pages.css) - e.g. talks.html's "Past talks &
   workshops" - so the homepage heading reads as the same page-section
   title used elsewhere on the site. */
.work-section__title {
  font-family: "EB Garamond:Regular", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 24px;
}

/* Grid: single column below 800px, 2-column masonry above it - matches
   the old .selected-works-grid behavior removed from styles/nav.css. */
.work-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

.work-grid * {
  box-sizing: border-box;
}

@media (min-width: 800px) {
  .work-grid {
    display: block;
    column-count: 2;
    column-gap: 20px;
  }
  .work-card {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 20px;
  }
}

/* Homepage only: a real 2-column grid instead of the masonry above, so
   cards read left-to-right/top-to-bottom (a "Z" order) instead of filling
   the left column first, and both columns stay exactly equal-width
   fractions of .work-section--home's 900px cap. */
@media (min-width: 800px) {
  .work-grid--home {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .work-grid--home .work-card {
    margin-bottom: 0;
    /* Grid items default to min-width:auto, which lets a wide image's
       intrinsic size (e.g. the 2560px voyage-monitor screenshot) inflate
       its column past the 1fr track instead of shrinking to fit it. */
    min-width: 0;
  }
}

.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #fff;
  border-radius: 20px;
  padding: 20px 20px 24px;
  color: inherit;
  text-decoration: none;
}

/* The filter script (js/filters.js) toggles the hidden attribute on
   cards - author display:flex above otherwise beats the UA stylesheet's
   [hidden]{display:none} regardless of specificity, since origin wins
   before specificity in the cascade. */
.work-card[hidden] {
  display: none;
}

.work-card__media {
  position: relative; /* positioning anchor for talks.css's .work-card__media--photo img (position:absolute; inset:0) */
  border-radius: 8px;
  overflow: hidden;
  background: #eee;
  aspect-ratio: 4 / 3;
}

.work-card__media-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-card__media--placeholder {
  aspect-ratio: 600 / 350;
}

.work-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.work-card__logo {
  display: block;
  width: 20px;
  height: 20px;
  margin-top: 4.4px; /* centers the logo on the title's first line (24px/1.2 line box) instead of the full, possibly-wrapped block - align-items:flex-start above anchors both to the block's top */
  flex-shrink: 0;
  object-fit: contain;
}

/* Fallback mark for cards without a company logo (e.g. external posts with
   no dedicated case study): the site's own logo, recolored via mask since
   the source SVG is hardcoded green and <img> can't be recolored with CSS. */
.work-card__logo--mark {
  background-color: #343434;
  -webkit-mask-image: url("../assets/logo/matsiutsia_logo.svg");
  mask-image: url("../assets/logo/matsiutsia_logo.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Selector scoped beyond a single class so it beats pages.css's ".page h2"
   rule (which otherwise leaks a 16px margin-bottom onto talks.html's hero
   card, whose title happens to be an h2 instead of h3 - inflating the gap
   to the description well past the card's own outer padding). */
.work-card__head .work-card__title {
  font-family: "EB Garamond:Regular", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.48px;
  margin: 0;
}

.work-card__desc {
  font-family: "Figtree:Regular", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.7);
  /* .work-card's flex gap (18px) is right for every other gap in the card;
     only this one needs to be tighter (8px), so pull it in with a negative
     margin instead of breaking the shared gap for media/tags too. */
  margin: -10px 0 0;
}

.work-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.work-card__tag {
  display: inline-flex;
  align-items: center;
  background: #eee;
  border-radius: 4px;
  padding: 4px 8px;
  font-family: "Figtree:Regular", sans-serif;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

/* Hover interactions, ported from the old styles/interactions.css and
   re-keyed to these clean classes (see that file's history for why each
   piece exists: pre-rendered shadow faded via opacity, title arrow
   injected via ::after, staggered tag ripple). */
@media (hover: hover) and (pointer: fine) {
  .work-card {
    transition: transform 200ms ease;
  }
  .work-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
  }
  .work-card__media-shot {
    transition: transform 300ms ease;
  }
  .work-card__title::after {
    content: " \2192";
    display: inline-block;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .work-card__tags > * {
    transition: transform 200ms ease;
  }

  .work-card:hover {
    transform: translateY(-3px);
  }
  .work-card:hover::after {
    opacity: 1;
  }
  .work-card:hover .work-card__media-shot {
    transform: scale(1.05);
  }
  .work-card:hover .work-card__title::after {
    opacity: 1;
    transform: translateX(0);
  }
  .work-card:hover .work-card__tags > *:nth-child(1) { transition-delay: 0ms; transform: translateY(-2px); }
  .work-card:hover .work-card__tags > *:nth-child(2) { transition-delay: 40ms; transform: translateY(-2px); }
  .work-card:hover .work-card__tags > *:nth-child(3) { transition-delay: 80ms; transform: translateY(-2px); }
  .work-card:hover .work-card__tags > *:nth-child(4) { transition-delay: 120ms; transform: translateY(-2px); }
  .work-card:hover .work-card__tags > *:nth-child(5) { transition-delay: 160ms; transform: translateY(-2px); }
}

.work-card:active {
  transform: translateY(-1px) scale(0.99);
  transition: transform 100ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .work-card,
  .work-card::after,
  .work-card__media-shot,
  .work-card__title::after,
  .work-card__tags > * {
    transition: none;
  }
}

/* Wraps the h1 + filter row on design.html: unlike .page--full's work-grid
   below it, this part reads as text, so it gets the same 600px centered
   column as every other page's heading instead of stretching full-bleed. */
.page-intro {
  max-width: 600px;
  margin: 0 auto;
}

/* Tag filter row - design.html only (guarded there by JS on presence
   of .work-filters). Cards keep their own tags visible regardless. */
.work-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0;
}

.work-filters__pill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid #000;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: "Figtree:Regular", sans-serif;
  font-size: 14px;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.work-filters__pill.is-active {
  background: #000;
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .work-filters__pill {
    transition: background-color 150ms ease;
  }
  .work-filters__pill:hover:not(.is-active) {
    background: #eee;
  }
}

.work-filters__pill:active {
  transform: translateY(-1px) scale(0.99);
}

@media (prefers-reduced-motion: reduce) {
  .work-filters__pill {
    transition: none;
  }
  .work-filters__pill:active {
    transform: none;
  }
}

/* Video card previews (js/video-preview.js drives play/pause). Keeping the
   video out of the click path means the whole card stays one link target -
   clicking it never triggers native video controls/scrubbing. */
.work-card__media-video {
  pointer-events: none;
}