/* ===== BEGIN SHARED: tokens + reset ===== */
:root {
  /* type */
  --font-sans: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* colour */
  --color-accent: #FF124B;
  --color-surface: #FFFFFF;
  --color-page: #EDEDED;
  --color-ink: #1A1A1A;
  --color-text: #4A4A4A;
  --color-rule: #D8D8D8;
  --color-disabled: #C7C7C7;
  --color-shadow: rgba(20, 20, 20, 0.16);

  /* spacing scale */
  --space-3xs: 4px;
  --space-2xs: 6px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;

  /* radius + elevation */
  --radius-card: 6px;
  --shadow-card: 0 12px 28px var(--color-shadow);
  --shadow-card-hover: 0 20px 36px var(--color-shadow);

  /* motion: roll-in (hover) calm and slower, roll-out slightly faster */
  --ease-standard: ease;
  --duration-hover-in: 380ms;
  --duration-hover-out: 240ms;
  --lift-hover: -6px;

  /* card type sizes */
  --card-title-size: 18px;
  --card-title-tracking: 0.01em;
  --card-body-size: 14px;
  --card-body-leading: 1.45;
  --card-meta-size: 13px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, picture { display: block; }

img { max-width: 100%; }
/* ===== END SHARED ===== */


/* ===== BEGIN BLOCK: .card ===== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transform: translateY(0);
  /* roll-out: used when leaving :hover, deliberately the faster of the pair */
  transition: transform var(--duration-hover-out) var(--ease-standard),
              box-shadow var(--duration-hover-out) var(--ease-standard);
}

/* roll-over: the browser uses this transition (defined on the state being
   entered) while animating in, so it can be slower/calmer than the exit
   above without a second class or JS. No mock exists for this state —
   lift distance and both durations are my call, not measured. */
.card:hover {
  transform: translateY(var(--lift-hover));
  box-shadow: var(--shadow-card-hover);
  transition: transform var(--duration-hover-in) var(--ease-standard),
              box-shadow var(--duration-hover-in) var(--ease-standard);
}

/* --- corner glyph stack (illustration face only) --- */
.card__badges {
  position: absolute;
  top: var(--space-md);      /* geom: measured off card corner inset */
  left: var(--space-md);     /* geom */
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.card__glyph {
  width: 14px;               /* geom: intrinsic glyph size */
  height: 14px;              /* geom */
}

/* --- shared media frame: both faces occupy the identical box, so a
       swap never changes the card's dimensions --- */
.card__figure,
.card__hero {
  aspect-ratio: 27 / 22;     /* geom: media frame ratio from mockup (291/235) */
}

/* --- illustration face --- */
.card__figure {
  margin: 0;
  padding: var(--space-xl) var(--space-lg) var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__illustration {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* --- brand face (hero photo + org logo) --- */
.card__hero {
  position: relative;
  overflow: hidden;
  display: none;             /* revealed by .card--brand */
}

.card__hero-media {
  position: absolute;        /* gives height:100% a definite box to resolve against */
  inset: 0;
}

.card__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38%;                /* geom: logo occupies ~38% of hero width */
  height: auto;
}

/* --- shared body (identical on both faces) --- */
.card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
}

.card__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--card-title-size);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: var(--card-title-tracking);
  text-transform: uppercase;
}

.card__desc {
  margin: var(--space-sm) 0 0;
  color: var(--color-text);
  font-size: var(--card-body-size);
  font-weight: var(--fw-regular);
  line-height: var(--card-body-leading);
}

.card__rule {
  margin: var(--space-md) 0 0;
  border: 0;
  border-top: 1px solid var(--color-rule);
}

.card__meta {
  margin: var(--space-md) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  font-size: var(--card-meta-size);
  line-height: 1.35;
  color: var(--color-text);
}

.card__meta-label {
  color: var(--color-ink);
  font-weight: var(--fw-bold);
}

/* --- face switch --- */
.card--brand .card__badges { display: none; }
.card--brand .card__figure { display: none; }
.card--brand .card__hero { display: block; }
/* ===== END BLOCK ===== */


/* ===== BEGIN BLOCK: .my-work ===== */

/* all white, full-bleed: the grey paper bleed and panel shadow are gone,
   so cards pop against white via their own shadow. Content width is
   unchanged — the 42px side inset is retained but is now white gutter,
   not grey, and the panel keeps its max-width + centring. */
.my-work {
  padding: 0 42px;      /* geom: side gutter, now white; preserves prior content width */
  background: var(--color-surface);
}

.my-work__panel {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg) var(--space-2xl);
  background: var(--color-surface);
}

/* --- head: title on its own row --- */
.my-work__head {
  margin-bottom: var(--space-xl);
}

.my-work__title {
  height: 40px;          /* geom: wordmark height at desktop */
  width: auto;
}

/* --- control bar: ONE row, tabs left + view-controls right, sharing a
       single full-width bottom rule (standard table-controls pattern) --- */
.my-work__controls {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  border-bottom: 1px solid var(--color-rule);
}

/* left cluster */
.my-work__tabs {
  display: flex;
  align-items: flex-end;
  gap: var(--space-lg);
}

.my-work__tabs-list {
  display: contents; /* tabs flatten into the row at tablet/desktop */
}

.my-work__tab {
  border: 0;
  background: none;
  padding: 0 0 var(--space-sm);
  margin-bottom: -1px;   /* active underline overlaps the shared rule */
  font: inherit;
  font-size: 12px;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.my-work__tab.is-active {
  color: var(--color-accent);
  font-weight: var(--fw-bold);
  border-bottom-color: var(--color-accent);
}

.my-work__tab.is-empty {
  display: none; /* filter with zero cards is not rendered */
}

/* mobile-only trigger (filter icon + current filter, no underline) */
.my-work__tabs-trigger {
  display: none;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0 0 var(--space-sm);
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  cursor: pointer;
}

.my-work__filter-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* right cluster */
.my-work__views {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm); /* baseline-aligns with the tab text */
  font-size: 12px;
  color: var(--color-text);
  text-transform: lowercase;
}

.my-work__swap,
.my-work__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* view more is never removed — it greys out when there is nothing left to
   reveal (disable-don't-hide, to keep the pattern legible) */
.my-work__more[aria-disabled="true"] {
  color: var(--color-disabled);
  cursor: default;
}

.my-work__toolbar-icon[hidden] {
  display: none; /* SHARED's svg{display:block} would otherwise win over the
                    native [hidden] rule — same fix already applied below
                    to .card[hidden] and .my-work__expand[hidden] */
}

.my-work__toolbar-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.my-work__divider {
  color: var(--color-rule);
}

/* all live controls go accent-red on hover; the disabled view-more does not */
.my-work__tab:hover,
.my-work__tabs-trigger:hover,
.my-work__swap:hover,
.my-work__more:not([aria-disabled="true"]):hover,
.my-work__expand:hover {
  color: var(--color-accent);
}

/* --- grid --- */
.my-work__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl) var(--space-lg);
  margin-top: var(--space-2xl);
}

/* breakpoints estimated from mockup frame widths (no spec tokens) — flagged */
@media (min-width: 700px) {
  .my-work__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .my-work__grid { grid-template-columns: repeat(4, 1fr); }
}

.my-work__grid .card[hidden] {
  display: none;
}

/* --- chevron: below the grid, NOT part of the control bar, so the
       disable-don't-hide rule does not apply. It is removed only when the
       first view already shows everything; otherwise it flips down->up
       (reveal -> collapse). --- */
.my-work__expand {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
  margin-top: var(--space-2xl);
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

.my-work__expand[hidden] {
  display: none; /* removed when there is nothing to reveal or collapse */
}

.my-work__expand-rule {
  flex: 1;
  height: 1px;
  background: var(--color-rule);
}

.my-work__expand-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-text);
  transition: transform var(--duration-hover-in) var(--ease-standard);
}

.my-work__expand:hover .my-work__expand-icon {
  color: var(--color-accent);
}

.my-work__expand.is-expanded .my-work__expand-icon {
  transform: rotate(180deg);
}

.my-work__expand-label {
  display: none; /* chevron-only at tablet/desktop, per mocks */
  font-size: 12px;
  font-weight: var(--fw-medium);
  text-transform: lowercase;
  color: inherit;
  white-space: nowrap;
}

@media (max-width: 699px) {
  .my-work__expand-icon { display: none; }
  .my-work__expand-label { display: inline; } /* text-only at mobile, per mocks */
}

/* ============================================================
   Mobile (<700px): control bar stays ONE row — tabs collapse to the
   filter trigger + dropdown, view-controls become icon-only.
   ============================================================ */
@media (max-width: 699px) {
  .my-work__toolbar-label { display: none; }

  .my-work__tabs-trigger { display: inline-flex; }
  .my-work__tabs-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    min-width: 160px;
  }
  .my-work__tabs.is-open .my-work__tabs-list { display: flex; }
  .my-work__tab { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
}

/* ===== END BLOCK ===== */


/* ================================================================
   TEST SCAFFOLDING BELOW — discarded on assembly, not part of block
   ================================================================ */
.js-stage {
  min-height: 100vh;
  padding: 48px 0;
  background: var(--color-surface);
}