/* Phrase work page layout. */


.work-page {
  background:
    radial-gradient(circle at 12% 10%, rgba(139, 99, 232, 0.42), transparent 22rem),
    radial-gradient(circle at 84% 78%, rgba(106, 45, 188, 0.28), transparent 27rem),
    radial-gradient(circle at 50% 18%, rgba(255, 198, 46, 0.18), transparent 19rem),
    linear-gradient(135deg, #eadcf7 0%, #f8edf8 44%, #ded4f1 100%);
}

.work-shell {
  padding-top: 70px;
}

.work-header {
  margin-bottom: 34px;
}

.work-hero h1 {
  color: #3b185f;
  text-shadow: 0 6px 0 rgba(114, 84, 216, 0.16);
}

.work-mode-spacer {
  height: 42px;
  margin: 0 0 30px;
}

.work-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(4, 129px);
  gap: var(--gap);
  padding: 12px;
  border: 2px solid #3b185f;
  border-radius: calc(var(--radius) + 8px);
  background: #3b185f;
  box-shadow:
    0 12px 0 rgba(43, 20, 80, 0.24),
    0 32px 62px rgba(54, 31, 83, 0.2);
  perspective: 1100px;
}

.work-tile {
  --tile-bg: var(--cream);
  border-color: rgba(59, 24, 95, 0.82);
  color: var(--ink);
  overflow: hidden;
  box-shadow:
    0 8px 0 rgba(43, 20, 80, 0.18),
    0 18px 24px rgba(54, 31, 83, 0.1);
}

.work-tile:hover {
  box-shadow:
    0 14px 0 rgba(43, 20, 80, 0.2),
    0 28px 32px rgba(54, 31, 83, 0.14);
}

.work-tile:active {
  box-shadow:
    0 5px 0 rgba(43, 20, 80, 0.24),
    0 12px 18px rgba(54, 31, 83, 0.12);
}

.work-tile .tile-title {
  max-width: calc(100% - 84px);
  font-size: var(--tile-title-side);
}

.work-logo {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 4;
  width: 72px;
  height: 72px;
  padding: 14px;
  border: 2px solid rgba(59, 24, 95, 0.82);
  border-radius: 16px;
  background: rgba(255, 248, 234, 0.86);
  box-shadow: 0 8px 0 rgba(43, 20, 80, 0.14);
  object-fit: contain;
  transform: translateZ(34px) rotate(var(--icon-tilt, -3deg));
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 220ms ease;
}

.work-logo-phrase {
  padding: 12px 19px;
}

.work-tile:hover .work-logo {
  transform: translateY(-5px) translateZ(44px) rotate(var(--icon-tilt, -3deg));
  box-shadow: 0 12px 0 rgba(43, 20, 80, 0.14);
}

.tile-work-calendar {
  --tile-bg: #7254d8;
  --tilt: -0.8deg;
  --icon-tilt: 4deg;
  grid-column: 1 / span 6;
  grid-row: 1 / span 2;
  color: var(--cream);
}

.tile-work-mail {
  --tile-bg: #e6b7f4;
  --tilt: 0.7deg;
  --icon-tilt: -4deg;
  grid-column: 7 / span 6;
  grid-row: 1 / span 2;
  color: #351151;
}

.tile-work-syntax {
  --tile-bg: #c6a4ff;
  --tilt: -0.5deg;
  --icon-tilt: 6deg;
  grid-column: 1 / span 6;
  grid-row: 3 / span 2;
  color: #26123f;
}

.tile-work-syntax .tile-title,
.tile-work-calendar .tile-title,
.tile-work-mail .tile-title {
  font-size: var(--tile-title-feature);
}

.tile-work-okta .tile-title,
.tile-work-personio .tile-title,
.tile-work-jira .tile-title,
.tile-work-claude .tile-title,
.tile-work-phrase .tile-title {
  display: none;
}

.tile-work-okta {
  --tile-bg: #f6f0ff;
  --tilt: 0.5deg;
  --icon-tilt: -7deg;
  grid-column: 7 / span 2;
  grid-row: 3;
  color: #351151;
}

.tile-work-personio {
  --tile-bg: #b7d6ff;
  --tilt: -0.7deg;
  --icon-tilt: 5deg;
  grid-column: 9 / span 2;
  grid-row: 3;
  color: #26123f;
}

.tile-work-jira {
  --tile-bg: #5c2ebd;
  --tilt: 0.8deg;
  --icon-tilt: -5deg;
  grid-column: 11 / span 2;
  grid-row: 3;
  color: var(--cream);
}

.tile-work-claude {
  --tile-bg: #d8c4ff;
  --tilt: -0.4deg;
  --icon-tilt: 5deg;
  grid-column: 7 / span 3;
  grid-row: 4;
  color: #26123f;
}

.tile-work-phrase {
  --tile-bg: #44206f;
  --tilt: 0.6deg;
  --icon-tilt: -3deg;
  grid-column: 10 / span 3;
  grid-row: 4;
  color: var(--cream);
}

@media (max-width: 760px) {
  .work-shell {
    padding-top: 58px;
  }

  .work-mode-spacer {
    margin-bottom: 26px;
  }

  .work-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(136px, auto);
  }

  .work-tile {
    grid-column: span 1;
    grid-row: auto;
  }

  .tile-work-calendar,
  .tile-work-mail {
    grid-column: span 2;
    min-height: 220px;
  }

  .tile-work-syntax {
    grid-column: span 2;
    min-height: 188px;
  }

  .work-logo {
    right: 16px;
    bottom: 16px;
    width: 66px;
    height: 66px;
    padding: 13px;
  }

  .work-logo-phrase {
    padding: 11px 18px;
  }
}